/* ============================================================
 * learn.css · WEB 端「入门游戏」卡通皮肤
 * 前缀 cu-learn-，不影响站点其他模块
 * ============================================================ */

body.cu-learn-mode, body.cu-learn-lesson-mode {
    background: linear-gradient(180deg, #e8f5e9 0%, #fff3e0 50%, #fce4ec 100%);
    min-height: 100vh;
    margin: 0;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #3a2e2a;
}

@keyframes cuLearnBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes cuLearnWiggle {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}
@keyframes cuLearnPlusOne {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-20px); opacity: 0; }
}
@keyframes cuLearnFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================== 目录页 ================== */
#cu-learn-root { padding-bottom: 80px; }
/* patch129b: 闯关页不需要 80px 底部留白(那是给目录页底部 fab 留位置的),低视口下缩为 16 配合 boardSize 放大 */
@media (max-height:900px){
  /* patch129d: padding-bottom 16→0 根治 2-10px 边界溢出(controls 自带 box-shadow 视觉留白) */
  body.cu-learn-lesson-mode #cu-learn-root{ padding-bottom: 0; }
}
.cu-learn-catalog { animation: cuLearnFadeIn 0.3s ease; }

.cu-learn-hero {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    border-radius: 0 0 24px 24px;
    padding: 16px 16px 12px;
    box-shadow: 0 6px 16px rgba(161, 140, 209, 0.3);
    position: relative;
    overflow: hidden;
}
.cu-learn-hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background:
      radial-gradient(circle at 15% 20%, rgba(255,255,255,0.3) 0, transparent 20%),
      radial-gradient(circle at 85% 15%, rgba(255,255,255,0.2) 0, transparent 15%);
    pointer-events: none;
}
.cu-learn-hero-deco {
    display: flex; gap: 6px; justify-content: center; margin-bottom: 6px;
    position: relative; z-index: 1;
}
.cu-learn-deco { font-size: 18px; animation: cuLearnBounce 2s ease-in-out infinite; display: inline-block; }

.cu-learn-title {
    color: #fff; font-size: 28px; font-weight: 800; text-align: center;
    letter-spacing: 2px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3), 0 0 8px rgba(255,255,255,0.2);
    position: relative; z-index: 1;
}
.cu-learn-sub {
    color: rgba(255,255,255,0.95); font-size: 13px; text-align: center;
    letter-spacing: 1px; margin-top: 4px;
    text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.2);
    position: relative; z-index: 1;
}

/* 打卡条 */
.cu-learn-streak {
    background: rgba(255,255,255,0.96); border-radius: 14px;
    padding: 10px 14px; margin-top: 12px;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.08);
    position: relative; z-index: 1;
}
.cu-learn-fire { font-size: 22px; animation: cuLearnBounce 1.2s ease-in-out infinite; }
.cu-learn-streak-label { font-size: 13px; color: #3a2e2a; font-weight: 700; }
.cu-learn-streak-days { font-size: 20px; color: #dc2626; font-weight: 800; margin: 0 4px; }
.cu-learn-streak-check {
    font-size: 11px; color: #16a34a; font-weight: 800;
    background: #dcfce7; border-radius: 8px; padding: 2px 6px;
}
.cu-learn-streak-track {
    flex: 1; height: 8px; background: #fde68a; border-radius: 8px;
    overflow: hidden; margin-left: 4px;
}
.cu-learn-streak-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, #f97316, #ef4444);
    border-radius: 8px; transition: width 0.6s ease;
}

/* 按钮行 */
.cu-learn-actions {
    display: flex; gap: 8px; margin-top: 12px;
    padding: 0 4px;
    position: relative; z-index: 1;
}
.cu-learn-action {
    flex: 1; border: none; cursor: pointer;
    background: linear-gradient(135deg, #6d28d9, #4c1d95);
    color: #fff; border-radius: 12px; padding: 10px 0;
    font-size: 14px; font-weight: 800;
    box-shadow: 0 3px 0 rgba(0,0,0,0.2);
    transition: transform 0.15s;
}
.cu-learn-action:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.cu-learn-action-home { background: linear-gradient(135deg, #6d28d9, #4c1d95); }
.cu-learn-action-reset { background: linear-gradient(135deg, #f59e0b, #d97706); }
.cu-learn-action-sound { background: linear-gradient(135deg, #06b6d4, #0891b2); }

/* 章节 tabs */
.cu-learn-tabs {
    background: #fff; border-radius: 14px;
    margin: 12px 12px 0; padding: 6px 6px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.06), 0 6px 14px rgba(160,80,40,0.08);
    display: flex; gap: 6px; overflow-x: auto;
    scrollbar-width: none;
}
.cu-learn-tabs::-webkit-scrollbar { display: none; }
.cu-learn-tab {
    flex: 1; min-width: 70px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px; padding: 10px 14px;
    border-radius: 12px;
    background: #d1d5db; color: #1f2937;
    font-size: 13px; font-weight: 800;
    border: 1px solid #9ca3af;
    box-shadow: 0 2px 0 #6b7280;
    cursor: pointer;
    white-space: nowrap;
}
.cu-learn-tab.active {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 0 rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.25);
    transform: scale(1.05);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.cu-learn-tab-icon { font-size: 18px; }
.cu-learn-tab-name { font-size: 13px; font-weight: 800; }

/* 关卡卡 */
.cu-learn-cards {
    padding: 0 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    row-gap: 10px;
}
.cu-learn-card {
    display: flex; align-items: center;
    background: linear-gradient(135deg, #fffde7, #fff9c4);
    border: 2px solid #fff;
    border-radius: 14px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.08), 0 6px 14px rgba(160,80,40,0.1);
    margin: 0; padding: 10px;
    position: relative;
    text-decoration: none; color: inherit;
    transition: transform 0.15s;
    overflow: hidden;
}
.cu-learn-card:active { transform: scale(0.97); }
.cu-learn-card-badge {
    position: absolute; left: -6px; top: -6px;
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #ec4899);
    color: #fff; font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.cu-learn-card-img {
    width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 2px 6px rgba(102,126,234,0.4);
    margin-right: 10px; padding: 3px;
}
.cu-learn-card-right { flex: 1; min-width: 0; padding-right: 28px; overflow: hidden; }
.cu-learn-card-title { color: #3a2e2a; font-size: 14px; font-weight: 800; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-learn-card-desc { color: #7c5b50; font-size: 11px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cu-learn-card-tip {
    font-size: 9px; color: #92400e; background: #fef3c7;
    border-radius: 5px; padding: 1px 5px;
    display: inline-block; font-weight: 700; margin-top: 3px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cu-learn-card-ribbon {
    position: absolute; right: -12px; top: 14px;
    width: 50px; height: 20px; line-height: 20px;
    text-align: center; transform: rotate(45deg);
    color: #fff; font-size: 10px; font-weight: 800;
    border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    background: #66bb6a; z-index: 2;
}
.cu-learn-card.done { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); border-color: #a5d6a7; }
.cu-learn-card.done .cu-learn-card-title { color: #2e7d32; }
.cu-learn-card.done .cu-learn-card-badge { background: linear-gradient(135deg, #34d399, #059669); }
.cu-learn-card.doing { background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-color: #90caf9; }
.cu-learn-card.doing .cu-learn-card-title { color: #1565c0; }
.cu-learn-card.doing .cu-learn-card-badge { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.cu-learn-card.nodo { background: linear-gradient(135deg, #fafafa, #eee); border-color: #e0e0e0; opacity: 0.92; }
.cu-learn-card.nodo .cu-learn-card-title { color: #6b7280; }
.cu-learn-card.nodo .cu-learn-card-desc { color: #9ca3af; }
.cu-learn-card.nodo .cu-learn-card-badge { background: linear-gradient(135deg, #d1d5db, #9ca3af); }
.cu-learn-card.nodo .cu-learn-card-ribbon { display: none; }
.cu-learn-card-advance { background: linear-gradient(135deg, #fdf2f8, #fbcfe8) !important; border: 2px dashed #ec4899 !important; }

/* 横幅（高级章节） */
.cu-learn-banner {
    display: flex; align-items: center; gap: 12px;
    margin: 8px 12px; padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    box-shadow: 0 3px 0 rgba(180,83,9,0.15);
    border: 1px dashed #f59e0b;
    cursor: pointer;
    animation: cuLearnBounce 2.4s ease-in-out infinite;
}
.cu-learn-banner:active { transform: scale(0.97); }
.cu-learn-banner-icon { font-size: 28px; animation: cuLearnWiggle 2.6s ease-in-out infinite; }
.cu-learn-banner-txt { flex: 1; min-width: 0; }
.cu-learn-banner-title { font-size: 14px; font-weight: 800; color: #7c2d12; }
.cu-learn-banner-sub { font-size: 11px; color: #92400e; margin-top: 1px; }
.cu-learn-banner-arrow { font-size: 22px; color: #b45309; font-weight: 800; }

/* 总进度 */
.cu-learn-total {
    margin: 12px; padding: 12px; border-radius: 16px;
    background: linear-gradient(135deg, #fff, #fce7f3);
    box-shadow: 0 4px 0 rgba(0,0,0,0.08), 0 6px 14px rgba(190,24,93,0.08);
}
.cu-learn-total-head { font-size: 14px; color: #831843; margin-bottom: 8px; font-weight: 800; }
.cu-learn-train { display: flex; gap: 3px; flex-wrap: wrap; }
.cu-learn-train-cell { width: 14px; height: 18px; border-radius: 3px; background: #fbcfe8; }
.cu-learn-train-cell.done { background: linear-gradient(180deg, #34d399, #059669); }
.cu-learn-total-tip { font-size: 11px; color: #9d174d; margin-top: 6px; font-weight: 700; }

/* 浮动按钮 */
.cu-learn-fab {
    position: fixed; bottom: 18px; left: 18px;
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f97316);
    color: #fff; border: none; font-size: 22px; cursor: pointer;
    box-shadow: 0 4px 0 rgba(0,0,0,0.15), 0 6px 14px rgba(249,115,22,0.4);
    z-index: 50;
}
.cu-learn-fab:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); }

/* ================== 闯关页 ================== */
.cu-learn-lesson {
    padding: 12px;
    display: flex; flex-direction: column; align-items: center;
    animation: cuLearnFadeIn 0.3s ease;
}
.cu-learn-banner-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; max-width: 480px;
    margin-bottom: 8px;
}
.cu-learn-back, .cu-learn-sound2 {
    background: #fff; border: none; border-radius: 12px;
    padding: 8px 14px; cursor: pointer; font-size: 14px; font-weight: 700;
    box-shadow: 0 3px 0 rgba(0,0,0,0.1);
}
.cu-learn-back:active, .cu-learn-sound2:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.1); }
.cu-learn-lesson-title { flex: 1; text-align: center; font-size: 18px; font-weight: 800; color: #5b21b6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 课程选择器（下拉跳课） */
.cu-learn-jump {
    display: inline-flex; align-items: center;
    background: #fff; border: none; border-radius: 12px;
    padding: 0 6px 0 10px; cursor: pointer;
    box-shadow: 0 3px 0 rgba(0,0,0,0.1);
    position: relative; flex: none;
}
.cu-learn-jump::after {
    content: '▾'; margin-left: 2px; font-size: 11px;
    color: #8b5cf6; pointer-events: none;
}
.cu-learn-jump select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    border: none; background: transparent; outline: none;
    font-size: 14px; font-weight: 700; color: #5b21b6;
    padding: 8px 0; cursor: pointer; max-width: 88px;
}
.cu-learn-jump select option, .cu-learn-jump select optgroup { font-weight: 600; color: #333; }
.cu-learn-jump:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.1); }
@media (max-width: 380px) {
    .cu-learn-jump select { max-width: 64px; font-size: 13px; }
}

.cu-learn-message {
    background: #fff; border-radius: 14px;
    padding: 10px 14px; margin: 8px 0;
    width: 100%; max-width: 480px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.06);
    font-size: 14px; line-height: 1.5; color: #3a2e2a;
    text-align: center;
}

.cu-learn-board-wrap {
    position: relative;
    margin: 8px auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18), 0 4px 0 rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
/* 升变选择器（lichess 风格：底线内侧四选一） */
.cu-learn-promo {
    position: absolute; inset: 0;
    background: rgba(30, 20, 60, 0.45);
    z-index: 40;
}
.cu-learn-promo-strip {
    position: absolute; z-index: 41;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.cu-learn-promo-strip button {
    border: none; background: #fff; padding: 0;
    cursor: pointer; flex: 1; display: block;
}
.cu-learn-promo-strip button:hover, .cu-learn-promo-strip button:active { background: #ede9fe; }
.cu-learn-promo-strip img { width: 100%; height: 100%; display: block; pointer-events: none; }

.cu-learn-board {
    display: grid;
    width: 100%; height: 100%;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    /* 拖拽走子：棋盘上禁用浏览器手势滚动/原生图片拖拽 */
    touch-action: none;
    user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.cu-learn-piece { cursor: grab; }
.cu-learn-piece:active { cursor: grabbing; }
/* 拖拽幽灵棋子（跟随指针的浮动棋子） */
.cu-learn-drag-ghost {
    position: fixed; z-index: 99999;
    pointer-events: none;
    opacity: 0.92;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
/* 拖拽悬停目标格高亮 */
.cu-learn-sq.cu-learn-drag-over { box-shadow: inset 0 0 0 4px #22c55e; }
.cu-learn-sq {
    position: relative;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.1s;
}
/* 入门游戏棋盘配色特意固定为经典色，不跟随全局棋盘主题（产品决定，2026-09-25）；
   不再用 var(--sq-light/--sq-dark)，避免 index.php 主题键修复后本模块被联动改色 */
.cu-learn-sq.light { background: #f0d9b5; }
.cu-learn-sq.dark { background: #b58863; }
.cu-learn-sq.cu-learn-selected { background: #f6f669 !important; }
.cu-learn-sq.cu-learn-lastmove {
    background-image: linear-gradient(rgba(255,255,0,0.35), rgba(255,255,0,0.35));
}
.cu-learn-sq.cu-learn-flash { animation: cuLearnFlash 0.5s ease; }
.cu-learn-sq.cu-learn-check {
    background-image: radial-gradient(circle at center, rgba(255,0,0,0.6), transparent 60%);
}
@keyframes cuLearnFlash {
    0%, 100% { background-color: inherit; }
    50% { background-color: rgba(239,68,68,0.5) !important; }
}
.cu-learn-piece {
    width: 90%; height: 90%;
    object-fit: contain;
    pointer-events: none;
}
/* 目标星位覆盖标记（begin-setup 关）：叠在格子上方，不参与 flex 排布 */
.cu-learn-star-mark {
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0.92;
    z-index: 2;
}
.cu-learn-valid-dot {
    position: absolute; inset: 25%;
    border-radius: 50%;
    background: rgba(0,0,0,0.18);
    pointer-events: none;
}
.cu-learn-valid-cap {
    inset: 0;
    border-radius: 50%;
    background: transparent;
    border: 4px solid rgba(0,0,0,0.18);
    width: 100%; height: 100%;
}
.cu-learn-anno {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* 步骤条 */
.cu-learn-stages {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 10px 0; width: 100%; max-width: 480px;
    justify-content: center;
}
.cu-learn-stage-btn {
    min-width: 36px; height: 36px; padding: 0 8px;
    background: linear-gradient(135deg, #fffde7, #fff9c4);
    border: 2px solid #fff;
    border-radius: 10px; cursor: pointer;
    font-size: 12px; font-weight: 800; color: #3a2e2a;
    box-shadow: 0 2px 0 rgba(0,0,0,0.08);
    transition: transform 0.1s;
}
.cu-learn-stage-btn:active { transform: translateY(2px); }
.cu-learn-stage-btn.active { background: linear-gradient(135deg, #fbcfe8, #f9a8d4); border-color: #ec4899; }
.cu-learn-stage-btn.done { background: linear-gradient(135deg, #d1fae5, #a7f3d0); border-color: #34d399; color: #065f46; }

/* 控制按钮 */
.cu-learn-controls { display: flex; gap: 10px; margin-top: 8px; }
.cu-learn-ctrl {
    background: linear-gradient(135deg, #6d28d9, #4c1d95);
    color: #fff; border: none; border-radius: 14px;
    padding: 10px 22px; cursor: pointer; font-size: 14px; font-weight: 800;
    box-shadow: 0 4px 0 rgba(0,0,0,0.15);
}
.cu-learn-ctrl:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); }
.cu-learn-ctrl#cu-learn-retry { background: linear-gradient(135deg, #f59e0b, #d97706); }

/* 弹窗 */
.cu-learn-toast {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: #fff; border-radius: 18px;
    padding: 24px 32px;
    font-size: 22px; font-weight: 800; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 999; opacity: 0; pointer-events: none;
    transition: all 0.3s ease;
    min-width: 200px;
}
.cu-learn-toast.pass { background: linear-gradient(135deg, #fff9c4, #fff176); color: #b45309; }
.cu-learn-toast.fail { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #b91c1c; }
.cu-learn-toast.complete { background: linear-gradient(135deg, #a78bfa, #ec4899); color: #fff; }
.cu-learn-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ================== 开课介绍弹窗（对齐 lichess learn 卡片：阶段 X · 课名 + 大图 + 文案 + 开始） ================== */
.cu-learn-intro { position: fixed; inset: 0; background: rgba(30, 20, 60, .55); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; animation: cu-learn-intro-fade .25s ease-out; }
@keyframes cu-learn-intro-fade { from { opacity: 0; } to { opacity: 1; } }
.cu-learn-intro-card { background: linear-gradient(160deg, #ffffff, #f8f7ff); border-radius: 18px; width: 100%; max-width: 420px; padding: 26px 26px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .32); text-align: center; position: relative; animation: cu-learn-intro-pop .3s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes cu-learn-intro-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cu-learn-intro-eyebrow { font-size: 12px; font-weight: 600; color: #7c3aed; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.cu-learn-intro-title { font-size: 26px; font-weight: 800; color: #1f2937; margin-bottom: 14px; }
.cu-learn-intro-img { width: 96px; height: 96px; object-fit: contain; margin: 4px auto 14px; display: block; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .15)); }
.cu-learn-intro-emoji { display: flex; align-items: center; justify-content: center; font-size: 64px; background: linear-gradient(135deg, #ede9fe, #fce7f3); border-radius: 50%; color: #7c3aed; }
.cu-learn-intro-text { font-size: 14px; line-height: 1.65; color: #374151; margin-bottom: 12px; }
.cu-learn-intro-tip { font-size: 12px; color: #b45309; background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 8px; padding: 6px 10px; margin-bottom: 16px; display: inline-block; }
.cu-learn-intro-start { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; font-size: 16px; font-weight: 700; padding: 12px 36px; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 16px rgba(118, 75, 162, .35); transition: transform .15s, box-shadow .15s; }
.cu-learn-intro-start:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(118, 75, 162, .45); }
.cu-learn-intro-start:active { transform: translateY(0); }

/* ================== 响应式 ================== */
@media (max-width: 380px) {
    .cu-learn-title { font-size: 22px; }
    .cu-learn-cards { grid-template-columns: 1fr; }
    .cu-learn-card { padding: 10px; }
    .cu-learn-card-img { width: 48px; height: 48px; }
}