@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700&family=Outfit:wght@400;500;600;700&family=Quicksand:wght@500;700&display=swap');

/* ==========================================================================
   每日一句 · 优美句子抄写工具 — 样式表
   版本: 5.0 (极简 · 儿童教育 · 高端重构)
   设计理念: 温暖而克制的教育美学
   ========================================================================== */

/* ==========================================================================
   1. 设计系统 — Design Tokens
   ========================================================================== */
:root {
    /* 主色 — 柔紫罗兰 */
    --primary: #7C6AEF;
    --primary-hover: #6B5AD9;
    --primary-light: #F3F0FF;
    --primary-muted: rgba(124,106,239,.12);

    /* 副色 — 温暖杏橙 */
    --accent: #FF8F6B;
    --accent-hover: #E87B58;
    --accent-light: #FFF4F0;

    /* 背景 — 暖灰白 */
    --bg: #FAFAF8;
    --card-bg: #FFFFFF;

    /* 文字 */
    --text: #1A1A2E;
    --text-muted: #8E8EA0;
    --text-light: #B5B5C6;

    /* 边框 */
    --border: #EDEDF0;
    --border-focus: #C5C0E8;

    /* 语义色 */
    --success: #52D6A0;
    --success-light: #EDFBF5;
    --warning: #FFCA4F;
    --danger: #FF6B6B;

    /* 阴影 — 暖紫调 */
    --shadow-xs: 0 1px 3px rgba(124,106,239,.04);
    --shadow-sm: 0 2px 8px rgba(124,106,239,.06);
    --shadow-md: 0 4px 20px rgba(124,106,239,.10);
    --shadow-lg: 0 12px 40px rgba(124,106,239,.14);

    /* 圆角 — 更柔和 */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 9999px;

    /* 字体 */
    --font-display: 'Noto Serif SC', "Songti SC", "STSong", "华文宋体", serif;
    --font-body: 'Outfit', 'DM Sans', system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-accent: 'Quicksand', 'Outfit', sans-serif;

    /* 田字格 */
    --grid-size: 90px;
    --grid-border: #E8847A;
    --grid-line: rgba(232,132,122,0.4);

    /* 过渡 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #9B8FFF;
        --primary-hover: #B0A6FF;
        --primary-light: #1E1A35;
        --primary-muted: rgba(155,143,255,.15);

        --accent: #FFB09A;
        --accent-hover: #FFCAB8;
        --accent-light: #2E1F18;

        --bg: #0F0F17;
        --card-bg: #1A1A2E;

        --text: #E8E8EC;
        --text-muted: #8E8EA0;
        --text-light: #5A5A70;

        --border: #2A2A3E;
        --border-focus: #4A4A6A;

        --shadow-xs: 0 1px 3px rgba(0,0,0,.2);
        --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
        --shadow-md: 0 4px 20px rgba(0,0,0,.35);
        --shadow-lg: 0 12px 40px rgba(0,0,0,.45);

        --grid-border: #CF6679;
        --grid-line: rgba(207,102,121,0.35);
    }
}

/* ==========================================================================
   2. 全局重置 & 基础排版
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

/* ==========================================================================
   3. 通用组件 — 按钮
   ========================================================================== */

/* 基础按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    transition: all 0.25s var(--ease-out);
    text-decoration: none;
    letter-spacing: 0.01em;
}
.btn:active { transform: translateY(1px); }

/* 主按钮 */
.btn-primary {
    background: var(--primary);
    color: white;
}
.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(124,106,239,.25);
}

/* 轮廓按钮 */
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--border);
}
.btn-outline:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}

/* 大号启动按钮 */
.btn-mega {
    background: linear-gradient(135deg, var(--primary) 0%, #9B8FFF 100%);
    color: white;
    font-size: 17px;
    padding: 18px 36px;
    border-radius: var(--r-md);
    width: 100%;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 16px rgba(124,106,239,.2);
}
.btn-mega:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124,106,239,.3);
}
.btn-mega.shake {
    animation: shake 0.4s ease;
}

/* 胶囊按钮 */
.btn-pill {
    border: none;
    border-radius: var(--r-pill);
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
}
.btn-pill:hover { transform: scale(1.04); }
.btn-pill:active { transform: scale(0.97); }

/* 朗读按钮 */
.btn-speak {
    background: var(--primary-light);
    color: var(--primary);
}
.btn-speak.playing {
    background: var(--primary);
    color: #fff;
    animation: pulse 1s infinite;
}

/* 慢速按钮 */
.btn-slow {
    background: var(--accent-light);
    color: var(--accent);
}
.btn-slow.playing {
    background: var(--accent);
    color: #fff;
    animation: pulse 1s infinite;
}

/* 完成按钮 */
.btn-done {
    background: white;
    border: 2px solid var(--success);
    color: #2e7d32;
}
.btn-done.completed {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

/* Toast 提示 */
.toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-16px);
    background: var(--card-bg);
    color: var(--text);
    padding: 12px 28px;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s var(--ease-out);
    pointer-events: none;
    backdrop-filter: blur(12px);
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   4. 布局
   ========================================================================== */
.main-container {
    max-width: 880px;
    margin: 0 auto;
    padding: 20px 24px 80px;
}

/* --- 导航栏 --- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250,250,248,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: none;
    box-shadow: 0 1px 0 var(--border);
    height: 56px;
}
@media (prefers-color-scheme: dark) {
    .navbar {
        background: rgba(15,15,23,0.92);
    }
}

.nav-container {
    max-width: 880px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-left::-webkit-scrollbar { display: none; }

.nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

/* Logo */
.logo {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-family: var(--font-display);
    white-space: nowrap;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* 导航 Tab — 胶囊高亮风格 */
.nav-tabs {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.nav-tab {
    background: none;
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: all 0.25s var(--ease-out);
    font-family: var(--font-body);
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.nav-tab:hover {
    color: var(--text);
    background: var(--primary-muted);
}
.nav-tab.active {
    color: var(--primary);
    background: var(--primary-light);
    font-weight: 600;
}
/* 去掉旧的下划线指示器 */
.nav-tab.active::after {
    display: none;
}

/* 星星徽章 */
.star-badge {
    background: #FFF9EE;
    color: #C48A00;
    padding: 5px 14px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 13px;
    border: 1px solid #FFE8A8;
    font-family: var(--font-accent);
    white-space: nowrap;
    flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
    .star-badge {
        background: #2a2310;
        border-color: #5a4a1e;
        color: #FFD54F;
    }
}

/* --- 进度条 --- */
.progress-bar {
    height: 2px;
    background: var(--border);
    width: 100%;
    position: fixed;
    top: 56px;
    z-index: 99;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), #7BEBC0);
    transition: width 0.4s var(--ease-out);
    border-radius: 0 2px 2px 0;
}

/* ==========================================================================
   5. 选句页面（Setup Panel）
   ========================================================================== */

/* Hero Section — 极简呼吸感 */
.hero-section {
    position: relative;
    text-align: center;
    padding: 56px 32px 40px;
    background: linear-gradient(170deg, var(--primary-light) 0%, var(--bg) 100%);
    border-radius: var(--r-xl);
    margin-bottom: 32px;
    overflow: hidden;
}
/* 隐藏旧版 SVG 装饰 */
.hero-bg-left,
.hero-bg-right {
    display: none;
}

.hero-eyebrow {
    display: inline-block;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
    background: var(--primary-muted);
    padding: 4px 16px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
}
.hero-title {
    font-size: 32px;
    margin-bottom: 12px;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
}
.hero-subtitle {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 400px;
    margin: 0 auto;
}

/* --- 分类卡片网格 --- */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.theme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 96px;
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: all 0.3s var(--ease-out);
    animation: fadeSlideUp 0.45s var(--ease-out) backwards;
}
.theme-card:hover {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.theme-card.active {
    background: var(--primary-light);
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(124,106,239,.15);
}
.theme-card.active .theme-icon {
    transform: scale(1.15);
}
.theme-icon {
    font-size: 26px;
    transition: transform 0.3s var(--ease-spring);
}
.theme-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* 混合练习卡片 */
.mix-theme-card {
    background: linear-gradient(135deg, #F8F4FF, #FFF8F5) !important;
    border: 1.5px dashed var(--border-focus) !important;
}
.mix-theme-card:hover {
    border-style: solid !important;
    border-color: var(--primary) !important;
}
.mix-theme-card.active {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    color: #fff !important;
    border: 1.5px solid transparent !important;
    box-shadow: 0 6px 20px rgba(124,106,239,.25) !important;
}
.mix-theme-card.active .theme-icon,
.mix-theme-card.active .theme-name {
    color: #fff !important;
}

/* --- 句子列表卡片 --- */
.list-card {
    background: var(--card-bg);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    border: 1px solid var(--border);
}
.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.list-header h2 {
    font-size: 16px;
    font-weight: 700;
}

.filters-inline select {
    padding: 7px 14px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text);
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color 0.2s;
}
.filters-inline select:focus {
    outline: none;
    border-color: var(--primary);
}

/* 句子滚动列表 */
.sentence-list {
    max-height: 380px;
    overflow-y: auto;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sentence-list::-webkit-scrollbar { width: 4px; }
.sentence-list::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
.sentence-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sentence-list::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* 句子项 */
.sentence-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
}
.sentence-item:hover {
    background: var(--bg);
    border-color: var(--border-focus);
}
.sentence-item.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

/* 自定义复选框 — 圆形 */
.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ease-out);
    background: var(--card-bg);
    flex-shrink: 0;
}
.sentence-item.selected .checkbox-custom {
    border-color: var(--primary);
    background: var(--primary);
}
.sentence-item.selected .checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
}

.sentence-content { flex-grow: 1; min-width: 0; }
.sentence-text {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
    line-height: 1.5;
}
.sentence-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.meta-tag {
    background: var(--bg);
    padding: 2px 8px;
    border-radius: var(--r-xs);
    font-size: 11px;
}
/* 考点标签高亮 */
.meta-tag.point-tag {
    background: #FFF3E0;
    color: #E65100;
    font-weight: 600;
}
@media (prefers-color-scheme: dark) {
    .meta-tag.point-tag {
        background: #2E1F0A;
        color: #FFB74D;
    }
}

/* 列表操作区 */
.list-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- 设置卡片 --- */
.settings-card {
    background: var(--card-bg);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    border: 1px solid var(--border);
}
.settings-toggles {
    display: flex;
    gap: 32px;
    margin-bottom: 20px;
}
.toggle-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 14px;
}

/* 开关控件 */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 22px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--border);
    transition: .3s;
    border-radius: 22px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
input:checked + .toggle-slider { background-color: var(--success); }
input:checked + .toggle-slider:before { transform: translateX(22px); }

/* 自定义输入 */
.input-group { margin-bottom: 16px; }
.input-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
}
.input-group textarea,
.input-group input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text);
    background: var(--card-bg);
    resize: vertical;
    transition: border-color 0.2s;
}
.input-group textarea:focus,
.input-group input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-muted);
}

.cta-banner {
    text-align: center;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    padding: 16px;
    border-radius: var(--r-md);
    font-weight: 600;
}

/* ==========================================================================
   6. 抄写页面（Write Panel）
   ========================================================================== */

/* 单栏专注容器 */
.write-container {
    max-width: 880px;
    margin: 24px auto 0;
}

/* 顶部导航 */
.write-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg);
    padding: 10px 24px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    margin-bottom: 24px;
}

.btn-back {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 7px 18px;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
}
.btn-back:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.breadcrumb {
    color: var(--text-muted);
    font-size: 13px;
}
.breadcrumb .divider {
    margin: 0 8px;
    color: var(--text-light);
}

/* --- 抄写卡片 --- */
.copy-card {
    background: var(--card-bg);
    border-radius: var(--r-xl);
    padding: 48px 44px;
    box-shadow: var(--shadow-md);
    margin-bottom: 20px;
    border: 1px solid var(--border);
    animation: fadeSlideUp 0.4s var(--ease-out);
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

/* 序号标识 */
.sentence-index-badge {
    background: var(--primary-light);
    color: var(--primary);
    padding: 5px 16px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-accent);
}
@media (prefers-color-scheme: dark) {
    .sentence-index-badge {
        background: var(--primary-light);
        color: var(--primary);
    }
}

/* 屏幕模式单卡专注 */
@media screen {
    .copy-card {
        display: none !important;
    }
    .copy-card.active {
        display: flex !important;
        animation: cardFadeIn 0.35s var(--ease-out) forwards;
    }
}
@media print {
    .copy-card {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 卡片翻页导航 */
.btn-card-nav {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
}
.btn-card-nav:hover:not(:disabled) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}
.btn-card-nav:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

/* 抄写卡片标签居中 */
.card-meta {
    justify-content: center;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* --- 田字格布局 --- */
.tianzi-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 20px;
    margin: 36px 0;
    justify-content: center;
    flex-grow: 1;
    align-content: center;
}
.char-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pinyin {
    font-size: 17px;
    color: var(--primary);
    height: 24px;
    margin-bottom: 4px;
    font-family: var(--font-body);
    font-weight: 500;
    opacity: 0.8;
}

/* 田字格 */
.tianzi-grid {
    width: var(--grid-size);
    height: var(--grid-size);
    border: 2px solid var(--grid-border);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 66px;
    font-family: 'STKaiti', '华文楷体', 'KaiTi', '楷体', serif;
    color: var(--text);
    background: var(--card-bg);
    cursor: pointer;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}
.tianzi-grid:hover {
    transform: scale(1.06);
    box-shadow: var(--shadow-md);
    z-index: 2;
}
/* 十字虚线 */
.tianzi-grid::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    border-top: 1px dashed var(--grid-line);
    top: 50%;
    left: 0;
}
.tianzi-grid::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 0;
    border-left: 1px dashed var(--grid-line);
    left: 50%;
    top: 0;
}
.tianzi-grid.empty {
    color: transparent;
}

/* 标点符号与汉字的无折行组合 */
.char-group {
    display: inline-flex;
    flex-wrap: nowrap;
    column-gap: 8px;
}

/* 标点符号格 */
.tianzi-grid.punctuation {
    background: var(--card-bg);
    display: block;
    padding: 0;
    box-sizing: border-box;
}
.tianzi-grid.punctuation::before,
.tianzi-grid.punctuation::after {
    display: none;
}
.punctuation-mark {
    position: absolute;
    right: 10px;
    bottom: 8px;
    display: block;
    width: 18px;
    height: 18px;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 30px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
}

/* --- 卡片底部操作栏 --- */
.card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
}
.action-left-group {
    display: flex;
    gap: 10px;
}

/* --- 打印专用空白行 --- */
.print-only-row {
    display: none !important;
}

/* ==========================================================================
   7. 弹窗（Modals）
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(26,26,46,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
@media (prefers-color-scheme: dark) {
    .modal-overlay {
        background: rgba(0,0,0,0.6);
    }
}

.modal-card {
    background: var(--card-bg);
    width: 90%;
    max-width: 400px;
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow: var(--shadow-lg);
    position: relative;
    animation: scaleIn 0.3s var(--ease-spring);
    border: 1px solid var(--border);
}
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--bg);
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.modal-close:hover {
    background: var(--primary-light);
    color: var(--primary);
}
.modal-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.modal-char-display {
    width: 72px;
    height: 72px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 48px;
    font-family: 'STKaiti', '华文楷体', 'KaiTi', '楷体', serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    flex-shrink: 0;
}
.info-row {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.info-row strong { color: var(--text); }

.meaning-box {
    background: var(--bg);
    padding: 16px;
    border-radius: var(--r-sm);
    margin-bottom: 24px;
    border: 1px solid var(--border);
}
.meaning-box h4 {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}

.action-box {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}
.action-box .btn { flex: 1; font-size: 13px; }

.writer-target {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
}

/* 庆祝弹窗 */
.modal-card.celebration { text-align: center; }
.trophy-icon {
    font-size: 64px;
    margin-bottom: 12px;
}

/* ==========================================================================
   8. 浮动工具栏
   ========================================================================== */
.bottom-toolbar {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 90;
}
.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.25s var(--ease-out);
    backdrop-filter: blur(8px);
}
.icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}
.icon-btn.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

/* ==========================================================================
   9. 页脚
   ========================================================================== */
.footer {
    text-align: center;
    padding: 32px 0;
    color: var(--text-light);
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   10. 动画
   ========================================================================== */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ==========================================================================
   11. 响应式适配
   ========================================================================== */
@media (max-width: 768px) {
    .hero-title { font-size: 24px; }
    .hero-section { padding: 40px 20px 28px; border-radius: var(--r-lg); }

    .nav-container { padding: 0 12px; }
    .nav-left { gap: 12px; }
    .logo { font-size: 15px; }
    .nav-tab { font-size: 12px; padding: 5px 10px; }

    .main-container { padding: 12px 14px 80px; }

    .widget-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    .theme-card { height: 84px; gap: 8px; }
    .theme-icon { font-size: 22px; }
    .theme-name { font-size: 11px; }

    .write-layout { flex-direction: column; gap: 16px; }
    .write-sidebar { width: 100%; }
    .sidebar-list {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
    }
    .sidebar-item {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 12px;
    }

    .copy-card { padding: 24px 18px; min-height: auto; }
    .tianzi-row { gap: 4px; row-gap: 14px; margin: 24px 0; }
    .tianzi-grid {
        width: 48px;
        height: 48px;
        font-size: 32px;
    }
    .pinyin { font-size: 12px; height: 18px; }

    .card-actions { flex-direction: column; gap: 12px; }
    .action-left-group { width: 100%; justify-content: center; }
    .btn-pill { padding: 8px 16px; font-size: 13px; }

    .bottom-toolbar {
        bottom: env(safe-area-inset-bottom, 16px);
        right: 16px;
    }

    .settings-toggles { flex-direction: column; gap: 16px; }
    .list-actions { flex-direction: column; }
    .list-actions .btn { width: 100%; }

    .list-card { padding: 20px 16px; }
    .settings-card { padding: 20px 16px; }
}

/* ==========================================================================
   12. 打印样式
   ========================================================================== */
@media print {
    .navbar,
    .progress-bar,
    .write-sidebar,
    .write-header,
    .card-actions,
    .card-header,
    .breadcrumb,
    .bottom-toolbar,
    .footer,
    .hero-section {
        display: none !important;
    }

    body {
        background: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .main-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    .write-layout { display: block !important; }

    .copy-card {
        box-shadow: none !important;
        border: none !important;
        padding: 8px 0 12px 0 !important;
        margin: 0 0 8px 0 !important;
        page-break-inside: avoid;
        border-radius: 0 !important;
        min-height: auto !important;
    }

    .tianzi-row {
        margin: 4px 0 !important;
        column-gap: 4px !important;
        row-gap: 8px !important;
    }

    .print-only-row {
        display: flex !important;
        margin-top: 4px !important;
    }

    .pinyin {
        color: #333 !important;
        font-size: 12px !important;
        height: 16px !important;
    }
    .tianzi-grid {
        border: 1px solid #888 !important;
        color: #000 !important;
        font-weight: 600 !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 32px !important;
    }
    .tianzi-grid::before { border-color: #bbb !important; }
    .tianzi-grid::after { border-color: #bbb !important; }
    .print-only-row .tianzi-grid { color: transparent !important; }

    .char-group { column-gap: 4px !important; }

    .tianzi-grid.punctuation {
        border: 1px solid #888 !important;
        background: transparent !important;
        display: block !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .punctuation-mark {
        right: 4px !important;
        bottom: 3px !important;
        width: 10px !important;
        height: 10px !important;
        font-size: 16px !important;
        line-height: 10px !important;
    }
    .tianzi-grid.punctuation::before,
    .tianzi-grid.punctuation::after {
        display: none !important;
    }
}


/* ==========================================================================
   13. 说明页面（About View）— 全新杂志美学设计
   ========================================================================== */
#about-view {
    padding: 0;
    margin: 0;
}

#about-view .page {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* ── HERO —— 渐变大标题头图 ── */
#about-view .hero {
    background: linear-gradient(145deg, var(--primary) 0%, #9B8FFF 50%, var(--accent) 100%);
    border-radius: var(--r-xl);
    margin: 24px 0 0;
    padding: 52px 44px 48px;
    color: white;
    position: relative;
    overflow: hidden;
}
#about-view .hero::before {
    content: '';
    position: absolute;
    right: -60px; top: -80px;
    width: 280px; height: 280px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
}
#about-view .hero::after {
    content: '';
    position: absolute;
    left: -40px; bottom: -100px;
    width: 200px; height: 200px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
}
#about-view .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    border-radius: var(--r-pill);
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,.2);
}
#about-view .hero h1 {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 16px;
    color: white !important;
    position: relative; z-index: 1;
    font-family: var(--font-display);
}
#about-view .hero-sub {
    font-size: 15px;
    line-height: 1.9;
    opacity: .9;
    max-width: 460px;
    position: relative; z-index: 1;
    color: rgba(255,255,255,.95);
}
#about-view .hero-sub strong { opacity: 1; font-weight: 700; }
#about-view .hero-pills {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
    position: relative; z-index: 1;
}
#about-view .hero-pill {
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--r-pill);
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    color: white;
}

/* ── SECTION 通用 ── */
#about-view .section {
    margin-top: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}
#about-view .section.visible {
    opacity: 1;
    transform: translateY(0);
}

#about-view .section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
#about-view .section-num-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--primary);
    background: var(--primary-light);
    padding: 4px 14px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
}
#about-view .section-title {
    font-size: clamp(18px, 2.5vw, 23px);
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    font-family: var(--font-display);
    margin-bottom: 0;
}
#about-view .section-title .accent { color: var(--primary); }

/* ── CARD 卡片 ── */
#about-view .card {
    background: var(--card-bg);
    border-radius: var(--r-lg);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
    border: 1px solid var(--border);
    transition: box-shadow 0.3s;
}
#about-view .card:hover {
    box-shadow: var(--shadow-md);
}

/* ── BODY P 段落 ── */
#about-view .body-p {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-muted);
    margin-bottom: 16px;
}
#about-view .body-p strong { color: var(--text); }

/* ── INSIGHT 洞察块 ── */
#about-view .insight {
    background: var(--primary-light);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: 20px 24px;
    margin: 20px 0;
}
#about-view .insight-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.65;
    font-family: var(--font-display);
}

/* ── CONTRAST 对比区 ── */
#about-view .contrast {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 20px 0;
}
#about-view .contrast-col {
    border-radius: var(--r-md);
    padding: 20px 22px;
    transition: transform 0.2s;
}
#about-view .contrast-col:hover { transform: translateY(-2px); }
#about-view .contrast-col.bad {
    background: #FFF5F5;
    border: 1px solid #FFD4D4;
}
#about-view .contrast-col.good {
    background: var(--success-light);
    border: 1px solid #B8F0DA;
}
#about-view .contrast-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
#about-view .contrast-col.bad .contrast-label { color: var(--danger); }
#about-view .contrast-col.good .contrast-label { color: #2E9B6A; }
#about-view .contrast-sentence {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--text);
}

/* ── COUNT BADGE 计数徽章 ── */
#about-view .count-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: linear-gradient(135deg, var(--primary), #9B8FFF);
    color: white;
    border-radius: var(--r-sm);
    padding: 5px 20px 7px;
    margin-bottom: 20px;
}
#about-view .count-num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: white !important;
    font-family: var(--font-accent);
}
#about-view .count-unit { font-size: 13px; opacity: .85; color: white; }

/* ── EXAMPLE CHIPS 标签片 ── */
#about-view .example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}
#about-view .chip {
    background: var(--primary-light);
    border: 1px solid rgba(124,106,239,.15);
    border-radius: var(--r-pill);
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    line-height: 1.5;
    transition: transform 0.15s;
}
#about-view .chip:hover { transform: scale(1.03); }
#about-view .chip.orange {
    background: var(--accent-light);
    border-color: rgba(255,143,107,.2);
    color: #C46A48;
}
#about-view .chip.green {
    background: var(--success-light);
    border-color: rgba(82,214,160,.2);
    color: #2E9B6A;
}

/* ── MODULE GRID 技能模块 ── */
#about-view .module-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 20px 0;
}
#about-view .module-card {
    background: var(--bg);
    border-radius: var(--r-md);
    padding: 22px 20px;
    border: 1px solid var(--border);
    transition: all 0.3s var(--ease-out);
}
#about-view .module-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--border-focus);
}
#about-view .module-icon { font-size: 28px; margin-bottom: 10px; }
#about-view .module-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text);
}
#about-view .module-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
}
#about-view .module-eg {
    margin-top: 12px;
    font-size: 13px;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: var(--r-xs);
    padding: 8px 12px;
    line-height: 1.7;
    font-weight: 500;
    border-left: 3px solid var(--primary);
}

/* ── DIVIDER 分隔线 ── */
#about-view .divider {
    width: 36px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
    margin: 12px 0 20px;
}

/* ── STEPS 步骤条 ── */
#about-view .steps {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#about-view .step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--bg);
    border-radius: var(--r-md);
    padding: 20px 22px;
    border: 1px solid var(--border);
    transition: all 0.2s;
}
#about-view .step:hover {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-xs);
}
#about-view .step-num {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--primary), #9B8FFF);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-display);
}
#about-view .step-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}
#about-view .step-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.75;
}
#about-view .step-example {
    margin-top: 10px;
    background: var(--card-bg);
    border-radius: var(--r-sm);
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--text);
    border: 1px solid var(--border);
}
#about-view .step-example .orig { color: var(--text-muted); }
#about-view .step-example .imitate { color: var(--primary); font-weight: 600; }

/* ── KEY INSIGHT 关键洞察横幅 ── */
#about-view .key-insight {
    background: linear-gradient(145deg, var(--primary) 0%, #9B8FFF 50%, var(--accent) 100%);
    color: white;
    border-radius: var(--r-lg);
    padding: 36px 40px;
    margin: 24px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
#about-view .key-insight::before {
    content: '';
    position: absolute;
    right: -30px; top: -30px;
    width: 120px; height: 120px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
}
#about-view .key-insight-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.65;
    color: white !important;
    font-family: var(--font-display);
    position: relative;
    z-index: 1;
}

/* ── BEAUTY GRID 优美句子展示 ── */
#about-view .beauty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
}
#about-view .beauty-card {
    background: linear-gradient(150deg, var(--primary-light), var(--success-light));
    border-radius: var(--r-md);
    padding: 20px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
    color: var(--primary);
    border: 1px solid rgba(124,106,239,.1);
    transition: transform 0.2s;
}
#about-view .beauty-card:hover { transform: translateY(-2px); }

/* ── USE TAGS 使用标签 ── */
#about-view .use-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}
#about-view .tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: var(--r-pill);
    transition: transform 0.15s;
}
#about-view .tag:hover { transform: scale(1.03); }
#about-view .tag-green {
    background: var(--success-light);
    color: #2E9B6A;
    border: 1px solid #B8F0DA;
}
#about-view .tag-red {
    background: #FFF5F5;
    color: var(--danger);
    border: 1px solid #FFD4D4;
}

/* ── RATIO 比例条 ── */
#about-view .ratio-wrap {
    display: grid;
    grid-template-columns: 4fr 1fr;
    gap: 3px;
    border-radius: var(--r-md);
    overflow: hidden;
    margin: 20px 0;
}
#about-view .ratio-col {
    padding: 28px 24px 24px;
    color: white;
    transition: transform 0.2s;
}
#about-view .ratio-col:hover { transform: scale(1.01); }
#about-view .ratio-col.main-col {
    background: linear-gradient(135deg, var(--primary), #9B8FFF);
}
#about-view .ratio-col.sub-col {
    background: linear-gradient(135deg, var(--accent), #FFB09A);
}
#about-view .ratio-pct {
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: white !important;
    font-family: var(--font-accent);
}
#about-view .ratio-label {
    font-size: 12px;
    margin-top: 6px;
    opacity: .85;
    color: white;
}

/* ── TIME CARD 时间卡片 ── */
#about-view .time-card {
    display: flex;
    align-items: center;
    gap: 28px;
    background: var(--card-bg);
    border-radius: var(--r-lg);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
    margin: 16px 0;
    border: 1px solid var(--border);
}
#about-view .time-big {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), #9B8FFF);
    color: white;
    border-radius: var(--r-md);
    width: 88px; height: 88px;
}
#about-view .time-num {
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: white !important;
    font-family: var(--font-accent);
}
#about-view .time-unit { font-size: 12px; opacity: .8; margin-top: 2px; color: white; }
#about-view .time-text {
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-muted);
    text-align: left;
}
#about-view .time-text strong { color: var(--text); }

/* ── GOALS GRID 目标卡片 ── */
#about-view .goals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0;
}
#about-view .goal-card {
    background: var(--card-bg);
    border-radius: var(--r-lg);
    padding: 28px 16px;
    text-align: center;
    box-shadow: var(--shadow-xs);
    border: 1.5px solid transparent;
    transition: all 0.3s var(--ease-out);
}
#about-view .goal-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
#about-view .goal-icon { font-size: 32px; margin-bottom: 12px; }
#about-view .goal-label {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

/* ── FOOTER CTA ── */
#about-view .footer-cta {
    background: var(--primary-light);
    border-radius: var(--r-lg);
    padding: 28px 32px;
    text-align: center;
    margin-top: 20px;
    border: 1px solid rgba(124,106,239,.1);
}
#about-view .footer-cta p {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.7;
    margin: 0;
    font-family: var(--font-display);
}

/* ── 说明页响应式 ── */
@media (max-width: 640px) {
    #about-view .page { padding: 0 16px 60px; }
    #about-view .hero { padding: 36px 24px 32px; margin: 16px 0 0; border-radius: var(--r-lg); }
    #about-view .card { padding: 22px 18px; }
    #about-view .contrast,
    #about-view .module-grid,
    #about-view .beauty-grid,
    #about-view .goals-grid {
        grid-template-columns: 1fr;
    }
    #about-view .ratio-wrap { grid-template-columns: 1fr; }
    #about-view .time-card { flex-direction: column; text-align: center; }
}

/* ── 说明页暗黑模式 ── */
@media (prefers-color-scheme: dark) {
    #about-view .hero {
        background: linear-gradient(145deg, #4A3EB8 0%, #6B5AD9 50%, #C46A48 100%);
    }
    #about-view .section-num-label {
        color: var(--primary);
        background: var(--primary-light);
    }
    #about-view .section-title .accent { color: var(--primary); }
    #about-view .insight {
        background: var(--primary-light);
        border-left-color: var(--primary);
    }
    #about-view .insight-text { color: var(--primary); }
    #about-view .contrast-col.bad {
        background: #2B1212;
        border-color: #5D2525;
    }
    #about-view .contrast-col.good {
        background: #0F2B1D;
        border-color: #255D3F;
    }
    #about-view .contrast-col.bad .contrast-label { color: #EF5350; }
    #about-view .contrast-col.good .contrast-label { color: #81C784; }
    #about-view .chip {
        background: var(--primary-light);
        border-color: var(--border);
        color: var(--primary);
    }
    #about-view .chip.orange { background: #2E1F18; border-color: #5D3F12; color: #FFA726; }
    #about-view .chip.green { background: #0F2B1D; border-color: #255D3F; color: #66BB6A; }
    #about-view .beauty-card {
        background: linear-gradient(150deg, var(--primary-light), #0F2B1D);
        border-color: var(--border);
        color: var(--primary);
    }
    #about-view .tag-green { background: #0F2B1D; color: #66BB6A; border-color: #255D3F; }
    #about-view .tag-red { background: #2B1212; color: #EF5350; border-color: #5D2525; }
    #about-view .footer-cta {
        background: var(--primary-light);
        border-color: var(--border);
    }
    #about-view .footer-cta p { color: var(--primary); }
    #about-view .module-card { background: var(--primary-light); }
    #about-view .module-eg {
        background: var(--bg);
        color: var(--primary);
        border-left-color: var(--primary);
    }
    #about-view .step { background: var(--primary-light); }
    #about-view .step-example {
        background: var(--bg);
        border-color: var(--border);
    }
    #about-view .step-example .imitate { color: var(--primary); }
    #about-view .ratio-col.main-col { background: linear-gradient(135deg, #4A3EB8, #6B5AD9); }
    #about-view .ratio-col.sub-col { background: linear-gradient(135deg, #C46A48, #E87B58); }
    #about-view .goal-card:hover { border-color: var(--primary); }
    #about-view .divider { background: linear-gradient(90deg, var(--primary), var(--accent)); }
    #about-view .count-badge { background: linear-gradient(135deg, #4A3EB8, #6B5AD9); }
}


/* ==========================================================================
   14. 旧版兼容 — 保留部分旧 class 供 CSS/JS 无缝衔接
   ========================================================================== */

/* 说明页旧版样式的兼容（保留空壳防止布局闪烁） */
.about-container,
.about-paper,
.about-main-title,
.quote-card,
.quote-text-p,
.quote-divider,
.highlight-text,
.quote-core-title,
.intro-box,
.intro-sub-title,
.intro-summary,
.about-card-section,
.section-card,
.text-focus-title,
.highlight-banner,
.banner-label,
.banner-title,
.banner-sub,
.design-list,
.comparison-intro,
.example-box,
.example-label,
.example-lead,
.example-bad,
.example-good {
    /* 旧版说明页 class 已弃用，保留空壳兼容 */
}

/* ========================================================================== 
   Classroomscreen-inspired layout refresh
   轻量课堂工具感：选句页组件化，抄写页保留大字帖。
   ========================================================================== */
:root {
    --primary: #7067F0;
    --primary-hover: #5E55DA;
    --primary-light: #F1F0FF;
    --primary-muted: rgba(112, 103, 240, .10);
    --accent: #31D3D1;
    --accent-hover: #20BDBB;
    --accent-light: #E9FCFB;
    --success: #8BE15D;
    --success-light: #F0FCEB;
    --bg: #FBFBFE;
    --card-bg: #FFFFFF;
    --text: #171A2F;
    --text-muted: #71758A;
    --text-light: #A9ADBD;
    --border: #E7E9F2;
    --border-focus: #BCB8FF;
    --shadow-xs: 0 1px 2px rgba(21, 24, 45, .03);
    --shadow-sm: 0 4px 14px rgba(21, 24, 45, .05);
    --shadow-md: 0 10px 28px rgba(21, 24, 45, .08);
    --shadow-lg: 0 18px 48px rgba(21, 24, 45, .12);
    --grid-size: clamp(82px, 8.2vw, 108px);
    --grid-border: #E37878;
    --grid-line: rgba(227, 120, 120, .38);
}

body {
    background:
        radial-gradient(circle at 18% 8%, rgba(112, 103, 240, .035), transparent 24%),
        linear-gradient(180deg, #fff 0%, var(--bg) 44%, #fff 100%);
}

.main-container,
.nav-container {
    max-width: 1040px;
}

.main-container {
    padding-top: 28px;
}

.navbar {
    height: 64px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 1px 0 rgba(21, 24, 45, .06);
}

.progress-bar {
    top: 64px;
    background: transparent;
}

.logo {
    color: var(--text);
    font-family: var(--font-body);
    letter-spacing: 0;
}

.nav-tabs {
    gap: 4px;
}

.nav-tab {
    color: #3A3E52;
    font-size: 12px;
    padding: 8px 12px;
}

.nav-tab.active {
    color: var(--primary);
    background: #F5F4FF;
    box-shadow: inset 0 0 0 1px rgba(112, 103, 240, .18);
}

.star-badge {
    background: #FFFFFF;
    color: #3C4158;
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
}

.hero-section {
    min-height: 270px;
    padding: 68px 40px 54px;
    margin: 12px auto 34px;
    border-radius: 24px;
    background: #F8F9FC;
    border: 1px solid #F0F1F6;
    box-shadow: none;
}

.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    width: 132px;
    height: 132px;
    border-radius: 999px;
    pointer-events: none;
}

.hero-section::before {
    left: clamp(28px, 10vw, 150px);
    top: 70px;
    border: 22px solid rgba(112, 103, 240, .62);
    border-right-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-34deg);
}

.hero-section::after {
    right: clamp(30px, 11vw, 160px);
    top: 82px;
    border: 22px solid rgba(139, 225, 93, .88);
    border-left-color: transparent;
    border-top-color: transparent;
    transform: rotate(14deg);
}

.hero-eyebrow {
    position: relative;
    z-index: 1;
    background: transparent;
    color: var(--text-muted);
    padding: 0;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hero-title {
    position: relative;
    z-index: 1;
    font-family: var(--font-body);
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: 0;
    margin-bottom: 10px;
}

.hero-subtitle {
    position: relative;
    z-index: 1;
    max-width: 520px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.65;
}

.hero-section .hero-subtitle::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin: 24px auto 0;
    background: var(--accent);
    border-radius: 999px;
    box-shadow: 88px -10px 0 rgba(139, 225, 93, .9);
}

.widget-grid {
    width: min(760px, 100%);
    margin: 0 auto 28px;
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    gap: 16px;
}

.theme-card {
    height: 82px;
    gap: 7px;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: none;
    background: rgba(255, 255, 255, .88);
}

.theme-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-focus);
    box-shadow: 0 10px 24px rgba(21, 24, 45, .06);
}

.theme-card.active {
    background: #FFFFFF;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(112, 103, 240, .10), 0 10px 24px rgba(112, 103, 240, .10);
}

.theme-icon {
    font-size: 23px;
    line-height: 1;
}

.theme-name {
    font-size: 12px;
    font-weight: 800;
    color: #272B3E;
    text-align: center;
}

.mix-theme-card {
    background: #FFFFFF !important;
    border-style: dashed !important;
}

.mix-theme-card.active {
    background: #F4F3FF !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(112, 103, 240, .10) !important;
}

.mix-theme-card.active .theme-name,
.mix-theme-card.active .theme-icon {
    color: var(--primary) !important;
}

.list-card,
.settings-card {
    width: min(760px, 100%);
    margin-left: auto;
    margin-right: auto;
    border-radius: 18px;
    box-shadow: none;
    border: 1px solid var(--border);
}

.list-card {
    padding: 24px;
}

.list-header h2 {
    font-size: 18px;
    letter-spacing: 0;
}

.sentence-list {
    max-height: 430px;
    gap: 10px;
}

.sentence-item {
    border-radius: 13px;
    padding: 13px 15px;
    background: #FFFFFF;
}

.sentence-item:hover {
    background: #FCFCFF;
    transform: translateY(-1px);
}

.sentence-item.selected {
    background: #F6F5FF;
    box-shadow: inset 0 0 0 1px rgba(112, 103, 240, .22);
}

.checkbox-custom {
    border-radius: 7px;
}

.sentence-text {
    color: #202438;
    font-size: 15px;
}

.meta-tag {
    background: #F6F7FA;
    color: #6D7284;
    border-radius: 8px;
}

.meta-tag.point-tag {
    background: #E9FCFB;
    color: #168D8B;
}

.list-actions {
    justify-content: center;
}

.settings-card {
    padding: 18px 22px 22px;
}

.settings-toggles {
    justify-content: center;
    margin-bottom: 18px;
}

.btn-mega {
    max-width: 420px;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(112, 103, 240, .22);
}

.write-container {
    max-width: 1040px;
    margin: 0 auto;
}

.write-header {
    background: rgba(255, 255, 255, .9);
    box-shadow: none;
    border-radius: 16px;
    padding: 12px 16px;
    position: sticky;
    top: 76px;
    z-index: 20;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.btn-back {
    background: #FFFFFF;
    color: #3A3E52;
    border-color: var(--border);
    border-radius: 12px;
}

.copy-card {
    min-height: calc(100vh - 190px);
    padding: clamp(30px, 4.5vw, 58px);
    border-radius: 26px;
    border-color: #ECEEF5;
    box-shadow: 0 18px 60px rgba(21, 24, 45, .07);
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(112, 103, 240, .18), rgba(49, 211, 209, .12)) border-box;
}

.card-header {
    margin-bottom: 14px;
}

.sentence-index-badge {
    background: #F4F3FF;
    color: var(--primary);
    border: 1px solid rgba(112, 103, 240, .14);
    border-radius: 12px;
}

.btn-card-nav {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 8px 12px;
    color: #50566D;
}

.card-meta {
    opacity: .78;
    margin-bottom: 0;
}

.tianzi-row {
    margin: clamp(28px, 5vh, 54px) auto;
    column-gap: 10px;
    row-gap: 26px;
    max-width: 960px;
}

.char-box {
    min-width: var(--grid-size);
}

.pinyin {
    height: 26px;
    margin-bottom: 6px;
    color: #5F56D9;
    font-size: clamp(15px, 1.45vw, 19px);
    font-weight: 700;
}

.tianzi-grid {
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
    font-size: clamp(58px, 6.2vw, 76px);
    cursor: pointer;
}

.tianzi-grid:hover {
    transform: translateY(-2px) scale(1.025);
}

.card-actions {
    max-width: 760px;
    width: 100%;
    margin: 20px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.btn-pill {
    border-radius: 13px;
}

.bottom-toolbar {
    right: 28px;
    bottom: 28px;
}

.icon-btn {
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(21, 24, 45, .10);
}

@media (max-width: 980px) {
    .widget-grid {
        grid-template-columns: repeat(4, minmax(112px, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --grid-size: clamp(62px, 18vw, 76px);
    }

    .navbar {
        height: 60px;
    }

    .progress-bar {
        top: 60px;
    }

    .hero-section {
        min-height: 210px;
        padding: 42px 22px 36px;
        margin-top: 6px;
    }

    .hero-section::before,
    .hero-section::after {
        width: 78px;
        height: 78px;
        border-width: 14px;
        opacity: .55;
    }

    .hero-section::before { left: 22px; top: 30px; }
    .hero-section::after { right: 22px; top: 38px; }

    .widget-grid {
        grid-template-columns: repeat(3, minmax(92px, 1fr));
        gap: 10px;
        width: 100%;
    }

    .theme-card {
        height: 76px;
        border-radius: 13px;
    }

    .list-card,
    .settings-card {
        width: 100%;
    }

    .write-header {
        top: 68px;
        position: static;
        margin-bottom: 12px;
    }

    .copy-card {
        min-height: calc(100vh - 170px);
        padding: 22px 14px 24px;
        border-radius: 20px;
    }

    .card-header {
        gap: 8px;
    }

    .btn-card-nav {
        font-size: 0;
        width: 40px;
        height: 38px;
        padding: 0;
        justify-content: center;
    }

    .btn-card-nav:first-child::before { content: '‹'; font-size: 24px; }
    .btn-card-nav:last-child::before { content: '›'; font-size: 24px; }

    .sentence-index-badge {
        font-size: 12px;
        padding: 6px 12px;
    }

    .tianzi-row {
        column-gap: 6px;
        row-gap: 18px;
        margin: 28px auto;
    }

    .char-box {
        min-width: var(--grid-size);
    }

    .tianzi-grid {
        width: var(--grid-size);
        height: var(--grid-size);
        font-size: clamp(42px, 12vw, 54px);
    }

    .pinyin {
        font-size: 13px;
        height: 21px;
    }

    .card-actions {
        padding-top: 16px;
    }
}

@media (max-width: 430px) {
    .widget-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .settings-toggles {
        align-items: stretch;
    }

    .toggle-item {
        justify-content: space-between;
    }
}

/* Bottom setup controls polish */
.settings-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.settings-toggles {
    width: 100%;
    margin-bottom: 0;
    flex-wrap: wrap;
    row-gap: 14px;
}

.settings-card .btn-mega {
    display: flex;
    width: min(420px, 100%);
    margin: 0 auto;
    align-self: center;
}

@media (max-width: 768px) {
    .settings-card {
        align-items: stretch;
        gap: 16px;
    }

    .settings-toggles {
        justify-content: stretch;
    }

    .settings-card .btn-mega {
        width: 100%;
    }
}

/* Keep setup toggles as a tidy control strip */

.settings-toggles {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-items: center;
    column-gap: clamp(26px, 5vw, 46px);
}

.toggle-item {
    white-space: nowrap;
}

@media (max-width: 430px) {
    .settings-toggles {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }
}


/* Icon system polish: replace emoji feel with classroom-style line icons */
.theme-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #3F465B;
}

.theme-icon-svg {
    width: 25px;
    height: 25px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-card:nth-child(3n + 1) .theme-icon { color: #7067F0; }
.theme-card:nth-child(3n + 2) .theme-icon { color: #23B8B6; }
.theme-card:nth-child(3n) .theme-icon { color: #86D84E; }
.theme-card.active .theme-icon { color: var(--primary); }
.mix-theme-card .theme-icon { color: #23A8E8; }

.theme-card.active .theme-icon-svg {
    stroke-width: 2.15;
}

.sentence-meta {
    align-items: center;
}

.meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 21px;
    padding: 2px 8px;
    border: 1px solid transparent;
    line-height: 1;
}

.source-tag {
    background: #F4F3FF;
    color: #635ADF;
    border-color: rgba(112, 103, 240, .18);
}

.source-tag::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 2px;
    border: 1.5px solid #7067F0;
    background: rgba(112, 103, 240, .08);
    box-shadow: inset 0 -2px 0 rgba(112, 103, 240, .18);
}

.level-tag {
    background: #F4F3FF;
    color: #635ADF;
    font-weight: 800;
}

.level-tag::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(180deg, #31D3D1 0 30%, #7067F0 30% 65%, #8BE15D 65%);
}

.point-tag {
    border-color: rgba(35, 184, 182, .12);
}

.tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #23B8B6;
    box-shadow: 0 0 0 3px rgba(35, 184, 182, .10);
}

@media (max-width: 768px) {
    .theme-icon {
        width: 26px;
        height: 26px;
    }

    .theme-icon-svg {
        width: 22px;
        height: 22px;
    }
}

/* Section and button icons use the same lightweight visual language */
.section-heading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.heading-icon {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    color: var(--primary);
    background: #F4F3FF;
    border: 1px solid rgba(112, 103, 240, .14);
}

.heading-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-icon {
    width: 14px;
    height: 14px;
    position: relative;
    flex: 0 0 auto;
}

.spark-icon::before,
.spark-icon::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: currentColor;
    clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
}

.spark-icon::after {
    inset: auto 0 0 auto;
    width: 5px;
    height: 5px;
    opacity: .65;
}

/* Text button micro-icons without emoji rendering differences */
.btn-line-icon {
    width: 15px;
    height: 15px;
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}

.sound-icon::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 4px;
    width: 5px;
    height: 7px;
    background: currentColor;
    clip-path: polygon(0 25%, 45% 25%, 100% 0, 100% 100%, 45% 75%, 0 75%);
}

.sound-icon::after {
    content: '';
    position: absolute;
    right: 1px;
    top: 3px;
    width: 7px;
    height: 9px;
    border: 2px solid currentColor;
    border-left: 0;
    border-radius: 0 999px 999px 0;
}

.slow-icon::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px solid currentColor;
    border-radius: 999px;
}

.slow-icon::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    width: 4px;
    height: 5px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.done-icon::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 9px;
    height: 9px;
    border: 2px solid currentColor;
    border-radius: 4px;
}

.done-icon::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 7px;
    width: 6px;
    height: 3px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.undo-icon::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 4px;
    width: 9px;
    height: 7px;
    border: 2px solid currentColor;
    border-left: 0;
    border-radius: 0 999px 999px 0;
}

.undo-icon::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 3px;
    width: 7px;
    height: 7px;
    border-left: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* Celebration modal aligned with the new classroom UI */
.modal-card.celebration {
    width: min(400px, calc(100vw - 40px));
    padding: 42px 34px 34px;
    border-radius: 26px;
    text-align: center;
    border: 1px solid rgba(231, 233, 242, .92);
    box-shadow: 0 24px 70px rgba(21, 24, 45, .18);
}

.modal-card.celebration .trophy-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: #F4F3FF;
    color: var(--primary);
    box-shadow: inset 0 0 0 1px rgba(112, 103, 240, .12);
}

.modal-card.celebration .trophy-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modal-card.celebration h2 {
    font-family: var(--font-body);
    font-size: 28px;
    letter-spacing: 0;
    margin-bottom: 8px;
}

.modal-card.celebration p {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 16px;
}

.reward-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    margin-bottom: 24px;
    border-radius: 14px;
    background: #FFF9E8;
    color: #A97900;
    border: 1px solid rgba(249, 202, 36, .22);
    font-weight: 700;
}

.reward-badge strong {
    font-size: 22px;
    color: #7A5A00;
    line-height: 1;
}

.reward-star {
    width: 17px;
    height: 17px;
    background: #F8C933;
    clip-path: polygon(50% 0, 62% 35%, 99% 35%, 69% 57%, 80% 92%, 50% 70%, 20% 92%, 31% 57%, 1% 35%, 38% 35%);
}

.modal-card.celebration .btn-mega {
    width: 100%;
    max-width: none;
    margin-top: 0;
}

/* Make the explanatory nav item quieter than primary practice tabs */
.nav-tab-info {
    gap: 6px;
    color: #6B7085;
    background: transparent;
}

.nav-info-icon {
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    opacity: .72;
}

.nav-tab-info.active {
    color: var(--primary);
    background: #F4F3FF;
}

.nav-tab-info.active .nav-info-icon {
    opacity: 1;
}

/* About classroom layout inspired by the reference page */
#about-view.about-classroom {
    padding: 0;
}

.classroom-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 18px 92px;
}

.classroom-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 56px;
    align-items: center;
    min-height: 360px;
    margin: 10px 0 70px;
    padding: 64px 86px;
    border-radius: 28px;
    overflow: hidden;
    background: #F8F9FC;
    border: 1px solid #F0F1F6;
}

.classroom-hero::before,
.classroom-hero::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.classroom-hero::before {
    left: -62px;
    bottom: -70px;
    width: 150px;
    height: 150px;
    border: 24px solid #8BE15D;
    border-right-color: transparent;
    border-top-color: transparent;
}

.classroom-hero::after {
    right: 120px;
    bottom: -64px;
    width: 170px;
    height: 170px;
    border: 26px solid #FF5E8A;
    border-left-color: transparent;
    border-top-color: transparent;
}

.classroom-eyebrow {
    margin-bottom: 14px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
}

.classroom-hero h1 {
    max-width: 430px;
    margin-bottom: 18px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: clamp(42px, 5vw, 62px);
    line-height: 1.05;
    letter-spacing: 0;
}

.classroom-hero p,
.section-lead p,
.story-copy p,
.classroom-proof > p,
.help-row p,
.classroom-start p {
    color: var(--text-muted);
    line-height: 1.85;
}

.classroom-hero-visual {
    position: relative;
    z-index: 1;
    min-height: 230px;
}

.practice-photo-card {
    position: absolute;
    inset: 22px 20px auto auto;
    width: 330px;
    min-height: 210px;
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(21, 24, 45, .14);
    transform: rotate(-3deg);
}

.paper-line {
    height: 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: #E8EAF3;
}

.paper-line.short { width: 46%; }

.copy-grid-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 24px;
}

.copy-grid-preview span {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 2px solid #E37878;
    color: var(--text);
    font-family: 'KaiTi', serif;
    font-size: 30px;
}

.floating-badge {
    position: absolute;
    right: 8px;
    bottom: 20px;
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: var(--primary);
    color: #fff;
    font-weight: 900;
    transform: rotate(12deg);
    box-shadow: 0 14px 30px rgba(112, 103, 240, .3);
}

.classroom-transform,
.classroom-practice,
.classroom-proof,
.classroom-help,
.classroom-start {
    margin: 0 auto 94px;
}

.section-lead {
    max-width: 620px;
    margin: 0 auto 40px;
    text-align: center;
}

.section-lead h2,
.classroom-practice > h2,
.classroom-proof > h2,
.classroom-help > h2,
.classroom-start h2 {
    margin-bottom: 10px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: clamp(30px, 3.8vw, 42px);
    letter-spacing: 0;
    line-height: 1.15;
}

.transform-layout {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 64px;
    align-items: center;
    max-width: 780px;
    margin: 0 auto;
}

.board-preview {
    position: relative;
    min-height: 260px;
    padding: 28px;
    border-radius: 18px;
    background: #263654;
    color: #fff;
    box-shadow: 0 20px 54px rgba(21, 24, 45, .12);
}

.board-title {
    margin-bottom: 18px;
    font-size: 30px;
    font-weight: 900;
    color: #fff;
}

.board-card {
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    line-height: 1.6;
    color: var(--text);
    background: #fff;
}

.board-card strong {
    display: block;
    color: var(--text);
}

.board-card.primary { background: #FFF3C7; }
.board-card.soft { background: #DDF9F7; }

.mini-clock {
    position: absolute;
    right: 22px;
    top: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    color: #6A63EA;
    font-size: 13px;
    font-weight: 900;
    border: 1px solid rgba(112, 103, 240, .16);
    box-shadow: 0 10px 24px rgba(112, 103, 240, .14);
}

.feature-list {
    display: grid;
    gap: 24px;
}

.feature-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
}

.feature-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: var(--primary);
    box-shadow: inset 0 -6px 0 rgba(255,255,255,.25);
}

.feature-icon.accent { background: var(--accent); }
.feature-icon.green { background: var(--success); }

.feature-item h3 {
    margin-bottom: 5px;
    color: var(--text);
    font-size: 17px;
}

.classroom-practice > h2,
.classroom-proof,
.classroom-help > h2 {
    text-align: center;
}

.practice-story {
    display: grid;
    grid-template-columns: 240px 390px;
    gap: 56px;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
}

.story-phone {
    width: 210px;
    padding: 12px;
    border-radius: 28px;
    background: #171A2F;
    box-shadow: 0 22px 60px rgba(21, 24, 45, .18);
    transform: rotate(-5deg);
}

.phone-screen {
    min-height: 320px;
    padding: 22px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, #F8F9FC, #fff);
}

.phone-title {
    color: var(--primary);
    font-weight: 900;
    margin-bottom: 24px;
}

.phone-sentence {
    padding: 18px;
    border-radius: 16px;
    background: #F4F3FF;
    color: var(--text);
    font-weight: 800;
    line-height: 1.7;
}

.phone-grid {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.phone-grid span {
    height: 12px;
    border-radius: 999px;
    background: #E7E9F2;
}

.story-copy h3 {
    margin-bottom: 10px;
    color: var(--text);
    font-size: 22px;
}

.story-copy ul {
    margin-top: 18px;
    padding: 0;
    list-style: none;
}

.story-copy li {
    margin-bottom: 10px;
    color: var(--text-muted);
    font-weight: 700;
}

.story-copy li::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 9px;
    border-radius: 999px;
    background: var(--primary);
}

.classroom-proof {
    max-width: none;
    padding: 58px 18px 70px;
    background: #F5F6FC;
    border-radius: 0;
    text-align: center;
}

.proof-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 620px;
    margin: 34px auto 0;
}

.proof-card {
    padding: 28px 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 12px 36px rgba(21, 24, 45, .05);
}

.proof-card span {
    display: block;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 36px;
    font-weight: 900;
}

.proof-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--primary);
}

.proof-card p {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
}

.classroom-help {
    max-width: 720px;
}

.help-row {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 60px;
    align-items: center;
    min-height: 240px;
    margin-top: 42px;
}

.help-row.reverse {
    grid-template-columns: 260px 1fr;
}

.help-row.reverse > div:first-child { grid-column: 2; }
.help-row.reverse > .help-visual { grid-column: 1; grid-row: 1; }

.help-row h3 {
    margin-bottom: 10px;
    color: var(--text);
    font-size: 24px;
}

.help-visual {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 16px 42px rgba(21, 24, 45, .07);
    transform: rotate(3deg);
}

.help-visual span {
    padding: 12px;
    border-radius: 12px;
    background: #F4F3FF;
    color: var(--primary);
    font-weight: 900;
    text-align: center;
}

.action-board { transform: rotate(-3deg); }
.action-board span { background: #E9FCFB; color: #168D8B; }
.life-board span { background: #F0FCEB; color: #4D9830; }

.classroom-start {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 70px;
    align-items: center;
    max-width: 720px;
}

.start-preview {
    display: flex;
    gap: 10px;
    transform: rotate(-5deg);
}

.start-preview div {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 18px;
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--border);
    box-shadow: 0 14px 36px rgba(21, 24, 45, .07);
    font-weight: 900;
}

@media (max-width: 820px) {
    .classroom-page { padding: 6px 14px 76px; }
    .classroom-hero,
    .transform-layout,
    .practice-story,
    .help-row,
    .help-row.reverse,
    .classroom-start {
        grid-template-columns: 1fr;
    }

    .classroom-hero {
        gap: 24px;
        padding: 42px 24px;
    }

    .practice-photo-card {
        position: relative;
        inset: auto;
        width: 100%;
        transform: none;
    }

    .floating-badge { right: 12px; bottom: -10px; }
    .proof-cards { grid-template-columns: 1fr; }
    .help-row.reverse > div:first-child,
    .help-row.reverse > .help-visual { grid-column: auto; grid-row: auto; }
    .help-row { gap: 22px; min-height: auto; }
    .classroom-proof { margin-left: -14px; margin-right: -14px; }
}

/* Fix medium-width about layout so explanatory text never collapses vertically */
@media (max-width: 1040px) {
    .transform-layout,
    .practice-story,
    .classroom-start {
        grid-template-columns: 1fr;
        max-width: 720px;
        gap: 34px;
    }

    .feature-list {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin: 0 auto;
    }

    .feature-item {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .board-preview {
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
    }

    .story-phone,
    .start-preview {
        margin: 0 auto;
    }
}

/* Keep feature copy in the text column beside the icon */
.feature-item .feature-icon {
    grid-row: 1 / span 2;
}

.feature-item h3,
.feature-item p {
    grid-column: 2;
    min-width: 0;
}

/* Typography refinement: UI sans, Chinese editorial accents in serif */
:root {
    --font-ui: 'Outfit', 'DM Sans', system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-serif-cn: 'Noto Serif SC', "Songti SC", "STSong", "SimSun", serif;
    --font-copybook: 'STKaiti', "华文楷体", 'KaiTi', "楷体", serif;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

.hero-title,
.classroom-hero h1,
.section-lead h2,
.classroom-practice > h2,
.classroom-proof > h2,
.classroom-help > h2,
.classroom-start h2,
.belief-card {
    font-family: var(--font-serif-cn);
    font-weight: 700;
    letter-spacing: 0;
}

.hero-eyebrow,
.classroom-eyebrow,
.nav-tab,
.theme-name,
.meta-tag,
.btn,
.toggle-item,
.sentence-index-badge {
    font-family: var(--font-ui);
}

.tianzi-grid,
.copy-grid-preview span {
    font-family: var(--font-copybook);
}

.classroom-hero h1 {
    line-height: 1.12;
}

.hero-title {
    line-height: 1.25;
}

/* Learn modal readability fixes */
.meaning-box {
    max-height: 150px;
    overflow-y: auto;
}

.meaning-box p {
    white-space: pre-line;
    color: var(--text);
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

.modal-char-info .info-row strong,
#modal-pinyin {
    font-family: var(--font-ui);
    font-weight: 800;
}

/* Child-friendly dictionary inside learn modal */
.meaning-box {
    max-height: 230px;
    overflow-y: auto;
}

#modal-meaning {
    display: grid;
    gap: 12px;
}

.child-meaning-card,
.child-section {
    border-radius: 12px;
}

.child-meaning-card {
    padding: 13px 14px;
    background: #F4F3FF;
    border: 1px solid rgba(112, 103, 240, .14);
}

.child-meaning-card p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.75;
    font-weight: 600;
}

.child-section-label {
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
}

.child-word-card-list {
    display: grid;
    gap: 8px;
}

.child-word-card {
    padding: 11px 12px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(112, 103, 240, .16);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

.child-word-card strong {
    display: block;
    margin-bottom: 4px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 900;
}

.child-word-card p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.65;
    font-weight: 650;
}
.child-words {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.child-word {
    padding: 5px 9px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
}

.child-empty {
    color: var(--text-muted);
    font-size: 13px;
}

.child-example {
    padding: 9px 11px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    line-height: 1.65;
    font-weight: 600;
}

.child-example + .child-example {
    margin-top: 7px;
}

.child-example.muted {
    color: var(--text-muted);
    font-weight: 500;
}

.adult-meaning {
    padding-top: 4px;
    border-top: 1px dashed var(--border);
}

.adult-meaning summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.adult-meaning p {
    margin: 9px 0 0;
    white-space: pre-line;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.7;
}








/* Toolbox home: foundation for future Chinese learning widgets */
.toolbox-view {
    max-width: 1080px;
    margin: 0 auto;
}

.toolbox-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 42px;
    align-items: center;
    min-height: 360px;
    padding: 56px 62px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #F8FAFD;
}

.toolbox-hero::before,
.toolbox-hero::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.toolbox-hero::before {
    width: 150px;
    height: 150px;
    left: -54px;
    bottom: -46px;
    border: 22px solid #96E66A;
    border-right-color: transparent;
    border-top-color: transparent;
    transform: rotate(18deg);
}

.toolbox-hero::after {
    width: 190px;
    height: 190px;
    right: -64px;
    top: -58px;
    border: 24px solid rgba(112, 103, 240, .58);
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-12deg);
}

.toolbox-hero-copy,
.toolbox-hero-board,
.tool-section {
    position: relative;
    z-index: 1;
}

.toolbox-eyebrow {
    margin: 0 0 10px;
    color: var(--primary);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.toolbox-hero h1 {
    max-width: 520px;
    margin: 0 0 16px;
    color: var(--text);
    font-family: var(--font-serif-cn);
    font-size: 46px;
    line-height: 1.14;
    letter-spacing: 0;
}

.toolbox-hero-copy > p:not(.toolbox-eyebrow) {
    max-width: 560px;
    margin: 0;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.85;
}

.toolbox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.toolbox-hero-board {
    display: grid;
    gap: 14px;
    padding: 22px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(218, 223, 236, .86);
    box-shadow: 0 24px 60px rgba(27, 31, 54, .08);
}

.toolbox-board-card {
    padding: 18px 20px;
    border: 1px solid #E4E8F2;
    border-radius: 8px;
    background: #FFFFFF;
    color: #6B7085;
    font-size: 13px;
    line-height: 1.55;
}

.toolbox-board-card strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: 18px;
    font-family: var(--font-serif-cn);
    font-weight: 800;
}

.toolbox-board-card.active-card {
    border-color: rgba(112, 103, 240, .34);
    box-shadow: 0 14px 32px rgba(112, 103, 240, .14);
}

.toolbox-board-card.soft {
    color: #21AFAF;
    background: #EDFEFC;
    border-color: rgba(47, 202, 202, .22);
    font-weight: 800;
}

.tool-section {
    padding: 56px 0 20px;
}

.tool-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    margin-bottom: 22px;
}

.tool-section-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-family: var(--font-serif-cn);
}

.tool-section-head > p {
    max-width: 430px;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
    text-align: right;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.tool-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid #E1E6F0;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 10px 26px rgba(27, 31, 54, .04);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tool-card.is-ready {
    cursor: pointer;
}

.tool-card.is-ready:hover {
    transform: translateY(-3px);
    border-color: rgba(112, 103, 240, .42);
    box-shadow: 0 18px 40px rgba(112, 103, 240, .13);
}

.tool-card.is-planned {
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
}

.tool-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.tool-category,
.tool-status,
.tool-tags span {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
}

.tool-category {
    color: #6B7085;
}

.tool-status {
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--primary);
    background: #F4F3FF;
}

.tool-card.is-planned .tool-status {
    color: #7D8398;
    background: #F3F5FA;
}

.tool-card h3 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    font-family: var(--font-serif-cn);
}

.tool-card p {
    flex: 1;
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.75;
}

.tool-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tool-tags span {
    padding: 5px 8px;
    border-radius: 8px;
    color: #21AFAF;
    background: #EDFEFC;
}

.tool-action {
    color: var(--primary);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 900px) {
    .toolbox-hero {
        grid-template-columns: 1fr;
        padding: 42px 28px;
    }

    .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .toolbox-hero {
        padding: 34px 22px;
    }

    .toolbox-hero h1 {
        font-size: 34px;
    }

    .tool-section-head {
        display: block;
    }

    .tool-section-head > p {
        margin-top: 10px;
        text-align: left;
    }

    .tool-grid {
        grid-template-columns: 1fr;
    }
}


/* Tangguo Hezi widgets directory page */
.site-nav-tabs {
    align-items: center;
}

.site-nav-link {
    border: none;
    background: transparent;
    padding: 8px 10px;
    color: #3A3E52;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.site-nav-link:hover {
    color: var(--primary);
}

.site-nav-cta {
    min-width: 94px;
    min-height: 34px;
    padding: 7px 14px;
    font-size: 12px;
}

.star-badge.is-hidden {
    display: none;
}

body[data-tool-page="copybook"] .nav-container {
    max-width: 1040px;
}

body[data-tool-page="copybook"] .nav-left {
    min-width: 0;
    flex: 1 1 auto;
}

.tool-page-context {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.tool-page-context::before {
    content: "";
    width: 1px;
    height: 18px;
    background: var(--border);
}

.tool-page-context strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

body[data-tool-page="copybook"] .site-nav-cta {
    min-width: auto;
    height: 34px;
    padding: 0 14px;
}

body[data-tool-page="copybook"] .star-badge {
    height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
}

body[data-tool-page="copybook"] .tool-star-badge {
    display: none;
}

body[data-tool-page="copybook"] .nav-tab {
    text-decoration: none;
}

body[data-tool-page="copybook"] .site-nav-tabs a,
body[data-tool-page="copybook"] .site-nav-tabs a:visited,
body[data-tool-page="copybook"] .site-nav-tabs a:hover,
body[data-tool-page="copybook"] .site-nav-tabs a:focus {
    text-decoration: none;
}

.tool-page-main {
    max-width: 1180px;
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-top: 28px;
}

.tool-page-content {
    min-width: 0;
}

.tool-sidebar {
    position: sticky;
    top: 86px;
    z-index: 10;
    min-height: calc(100vh - 112px);
    padding: 8px 0 24px;
}

.tool-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.tool-breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.tool-breadcrumb a {
    color: var(--muted);
    text-decoration: none;
}

.tool-breadcrumb strong {
    color: var(--primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-sidebar-toggle {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,.78);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
}

.tool-sidebar-toggle span,
.tool-sidebar-toggle span::before,
.tool-sidebar-toggle span::after {
    display: block;
    width: 12px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    content: "";
}

.tool-sidebar-toggle span {
    position: relative;
}

.tool-sidebar-toggle span::before {
    position: absolute;
    transform: translateY(-5px);
}

.tool-sidebar-toggle span::after {
    position: absolute;
    transform: translateY(5px);
}

.tool-sidebar-list {
    display: grid;
    gap: 8px;
}

.tool-side-link {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.tool-side-link:hover {
    background: rgba(112, 103, 240, .06);
    border-color: rgba(112, 103, 240, .18);
}

.tool-side-link.active {
    color: var(--primary);
    background: rgba(112, 103, 240, .08);
    border-color: var(--primary);
    box-shadow: 0 8px 18px rgba(112, 103, 240, .10);
}

.tool-side-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: transparent;
    color: var(--primary);
    flex: 0 0 auto;
}

.tool-side-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #111827;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tool-side-icon svg .fill-blue,
.tool-side-icon svg .fill-purple,
.tool-side-icon svg .fill-pink,
.tool-side-icon svg .fill-green,
.tool-side-icon svg .fill-yellow,
.tool-side-icon svg .fill-cyan {
    stroke: #111827;
    stroke-width: 1.6;
}

.tool-side-icon svg .fill-blue { fill: #7B8CFF; }
.tool-side-icon svg .fill-purple { fill: #8D85F7; }
.tool-side-icon svg .fill-pink { fill: #FF9DC6; }
.tool-side-icon svg .fill-green { fill: #9BE56C; }
.tool-side-icon svg .fill-yellow { fill: #FFE27A; }
.tool-side-icon svg .fill-cyan { fill: #48D7D2; }

.tool-side-link.is-disabled {
    color: var(--muted);
    opacity: .66;
}

.tool-side-link.is-disabled:hover {
    background: transparent;
    border-color: transparent;
}

body.is-tool-sidebar-collapsed .tool-page-main {
    grid-template-columns: 56px minmax(0, 1fr);
}

body.is-tool-sidebar-collapsed .tool-breadcrumb {
    display: none;
}

body.is-tool-sidebar-collapsed .tool-sidebar-toggle {
    margin-left: 8px;
}

body.is-tool-sidebar-collapsed .tool-side-link {
    width: 44px;
    padding: 0;
    justify-content: center;
}

body.is-tool-sidebar-collapsed .tool-side-link span:last-child {
    display: none;
}

body.is-writing-mode .tool-page-main {
    display: block;
    max-width: 100%;
}

body.is-writing-mode .tool-sidebar {
    display: none;
}

body.is-writing-mode .tool-page-content {
    max-width: none;
}

@media (max-width: 720px) {
    body[data-tool-page="copybook"] .site-nav-cta {
        display: inline-flex;
    }
}

@media (max-width: 980px) {
    .tool-page-main {
        display: block;
        max-width: 880px;
    }

    .tool-sidebar {
        position: static;
        min-height: 0;
        margin-bottom: 18px;
        padding: 0;
    }

    .tool-sidebar-top {
        margin-bottom: 10px;
    }

    .tool-sidebar-toggle {
        display: none;
    }

    .tool-sidebar-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: rgba(255,255,255,.82);
        box-shadow: var(--shadow-xs);
        scrollbar-width: none;
    }

    .tool-sidebar-list::-webkit-scrollbar {
        display: none;
    }

    .tool-side-link {
        width: auto;
        flex: 0 0 auto;
        height: 38px;
        padding: 0 12px;
        font-size: 13px;
    }
}

@media (max-width: 640px) {
    .tool-page-main {
        padding-top: 18px;
    }

    .tool-breadcrumb {
        padding-left: 4px;
    }

    .tool-side-link {
        height: 36px;
    }
}

@media (max-width: 560px) {
    body[data-tool-page="copybook"] .nav-container {
        padding: 0 12px;
    }

    body[data-tool-page="copybook"] .nav-left {
        flex: 0 1 auto;
        gap: 12px;
    }

    body[data-tool-page="copybook"] .tool-page-context {
        display: none;
    }

    body[data-tool-page="copybook"] .site-nav-cta,
    body[data-tool-page="copybook"] .star-badge {
        height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }
}

.toolbox-view {
    max-width: 1180px;
    margin: 0 auto;
}

.toolbox-hero {
    position: relative;
    min-height: 330px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 76px 36px 72px;
    border: 1px solid #EDF0F6;
    border-radius: 8px;
    background: #F8FAFC;
    text-align: center;
}

.toolbox-hero::before,
.toolbox-hero::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.toolbox-hero::before {
    width: 150px;
    height: 150px;
    left: 135px;
    top: 74px;
    border: 21px solid rgba(112, 103, 240, .58);
    border-right-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-14deg);
}

.toolbox-hero::after {
    width: 175px;
    height: 175px;
    right: 135px;
    top: 96px;
    border: 22px solid #96E66A;
    border-left-color: transparent;
    border-top-color: transparent;
    transform: rotate(-7deg);
}

.toolbox-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.toolbox-eyebrow {
    margin: 0 0 10px;
    color: var(--primary);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.toolbox-hero h1 {
    max-width: none;
    margin: 0 auto 12px;
    color: var(--text);
    font-family: var(--font-serif-cn);
    font-size: 42px;
    line-height: 1.16;
    letter-spacing: 0;
}

.toolbox-hero-copy > p:not(.toolbox-eyebrow) {
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.8;
}

.toolbox-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.tool-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 0 42px;
}

.tool-section-head,
.toolbox-section-title {
    margin-bottom: 26px;
    text-align: center;
}

.tool-section-head h2,
.toolbox-section-title h2,
.toolbox-about h2,
.toolbox-cta h2 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-serif-cn);
    font-size: 32px;
    line-height: 1.25;
}

.tool-section-head > p,
.toolbox-section-title + p {
    max-width: 560px;
    margin: 10px auto 0;
    color: var(--text-muted);
    line-height: 1.75;
    text-align: center;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.tool-card {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 18px 12px 14px;
    border: 1px solid #E1E6F0;
    border-radius: 8px;
    background: #FFFFFF;
    text-align: center;
    box-shadow: none;
    cursor: default;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tool-card.is-ready {
    cursor: pointer;
}

.tool-card.is-ready:hover {
    transform: translateY(-2px);
    border-color: rgba(112, 103, 240, .42);
    box-shadow: 0 16px 34px rgba(112, 103, 240, .12);
}

.tool-card.is-planned {
    opacity: .72;
}

.tool-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #30354A;
}

.tool-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tool-card h3 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.tool-card p,
.tool-tags,
.tool-category {
    display: none;
}

.tool-card-bottom {
    min-height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tool-status {
    padding: 3px 7px;
    border-radius: 999px;
    color: #7D8398;
    background: #F3F5FA;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.tool-card.is-ready .tool-status {
    color: #21AFAF;
    background: #EDFEFC;
}

.toolbox-about {
    max-width: 900px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    margin: 10px auto 70px;
    padding-top: 52px;
    border-top: 1px solid #EDF0F6;
}

.toolbox-about p:not(.toolbox-eyebrow),
.toolbox-cta p:not(.toolbox-eyebrow),
.practice-grid p {
    margin: 10px 0 0;
    color: var(--text-muted);
    line-height: 1.75;
}

.toolbox-practice {
    max-width: 1000px;
    margin: 0 auto 72px;
    padding: 62px 0;
    background: #F4F5FF;
}

.practice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 860px;
    margin: 0 auto;
}

.practice-grid article {
    padding: 22px;
    border: 1px solid #E1E6F0;
    border-radius: 8px;
    background: #FFFFFF;
}

.practice-grid span {
    color: var(--primary);
    font-family: var(--font-ui);
    font-weight: 900;
    font-size: 12px;
}

.practice-grid h3 {
    margin: 10px 0 0;
    color: var(--text);
    font-size: 18px;
    font-family: var(--font-serif-cn);
}

.toolbox-cta {
    position: relative;
    overflow: hidden;
    margin: 0 auto 48px;
    padding: 68px 28px 74px;
    border-radius: 8px;
    background: #7067F0;
    color: #FFFFFF;
    text-align: center;
}

.toolbox-cta::before,
.toolbox-cta::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.toolbox-cta::before {
    width: 170px;
    height: 170px;
    left: 150px;
    top: -58px;
    border: 22px solid #2FCACA;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(24deg);
}

.toolbox-cta::after {
    width: 220px;
    height: 220px;
    right: 120px;
    bottom: -112px;
    border: 26px solid rgba(255, 255, 255, .18);
}

.toolbox-cta > * {
    position: relative;
    z-index: 1;
}

.toolbox-cta .toolbox-eyebrow,
.toolbox-cta h2,
.toolbox-cta p {
    color: #FFFFFF;
}

.toolbox-cta h2 {
    font-size: 38px;
}

.toolbox-cta p:not(.toolbox-eyebrow) {
    max-width: 520px;
    margin: 12px auto 24px;
    color: rgba(255, 255, 255, .84);
}

.toolbox-cta .btn {
    background: #FFFFFF;
    color: var(--primary);
    box-shadow: 0 12px 26px rgba(29, 24, 92, .18);
}

@media (max-width: 920px) {
    .site-nav-link {
        display: none;
    }

    .tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .toolbox-about {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .practice-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
}

@media (max-width: 640px) {
    .site-nav-cta {
        display: none;
    }

    .toolbox-hero {
        min-height: 292px;
        padding: 54px 22px 52px;
    }

    .toolbox-hero::before {
        left: -54px;
        top: 64px;
    }

    .toolbox-hero::after {
        right: -68px;
        top: 94px;
    }

    .toolbox-hero h1 {
        font-size: 34px;
    }

    .tool-section {
        padding-top: 42px;
    }

    .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .toolbox-cta h2 {
        font-size: 30px;
    }
}

/* Copybook tool internal navigation */
.copybook-subnav {
    max-width: 760px;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: -14px auto 28px;
    padding: 8px;
    border: 1px solid #E4E8F2;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(27, 31, 54, .06);
}

.copybook-tab {
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #596070;
    padding: 9px 16px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.copybook-tab:hover {
    color: var(--primary);
    background: #F5F4FF;
}

.copybook-tab.active {
    color: var(--primary);
    background: #F4F3FF;
    box-shadow: inset 0 0 0 1px rgba(112, 103, 240, .16);
}

@media (max-width: 640px) {
    .copybook-subnav {
        justify-content: flex-start;
        overflow-x: auto;
        margin: -8px 0 22px;
        border-radius: 16px;
    }

    .copybook-tab {
        flex: 0 0 auto;
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* Hide copybook practice controls on the library idea page */
#setup-panel.is-about-mode .hero-section,
#setup-panel.is-about-mode .settings-card {
    display: none;
}

#setup-panel.is-about-mode .copybook-subnav {
    margin-top: 12px;
    margin-bottom: 28px;
}

/* Colored widget icons */
.tool-icon {
    color: #111827;
}

.tool-icon svg .fill-blue,
.tool-icon svg .fill-purple,
.tool-icon svg .fill-pink,
.tool-icon svg .fill-green,
.tool-icon svg .fill-yellow,
.tool-icon svg .fill-cyan {
    stroke: #111827;
    stroke-width: 1.6;
}

.tool-icon svg .fill-blue { fill: #7B8CFF; }
.tool-icon svg .fill-purple { fill: #8D85F7; }
.tool-icon svg .fill-pink { fill: #FF9DC6; }
.tool-icon svg .fill-green { fill: #9BE56C; }
.tool-icon svg .fill-yellow { fill: #FFE27A; }
.tool-icon svg .fill-cyan { fill: #48D7D2; }

/* Tangguo Hezi brand mark */
.logo {
    gap: 8px;
}

.logo .tangguo-logo-icon {
    flex: 0 0 auto;
    margin-right: 0 !important;
    filter: drop-shadow(0 5px 10px rgba(112, 103, 240, .12));
}

/* Homepage story copy refinements */
.toolbox-story {
    max-width: 880px;
    margin: 12px auto 76px;
    padding-top: 58px;
    border-top: 1px solid #EDF0F6;
}

.story-copy {
    max-width: 720px;
    margin: 0 auto;
}

.story-copy h2 {
    margin: 0 0 22px;
    color: var(--text);
    font-family: var(--font-serif-cn);
    font-size: 34px;
    line-height: 1.32;
    letter-spacing: 0;
}

.story-copy p:not(.toolbox-eyebrow) {
    margin: 0 0 15px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.9;
}

.story-copy .btn {
    margin-top: 10px;
}

.toolbox-cta small {
    position: relative;
    z-index: 1;
    display: block;
    margin: -8px 0 22px;
    color: rgba(255, 255, 255, .72);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
}

.footer p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 640px) {
    .story-copy h2 {
        font-size: 27px;
    }

    .story-copy p:not(.toolbox-eyebrow) {
        font-size: 15px;
    }
}

/* Hero layout polish */
.toolbox-hero {
    min-height: 360px;
    padding: 78px 42px 76px;
}

.toolbox-hero::before {
    left: 90px;
    top: 72px;
    width: 160px;
    height: 160px;
    opacity: .72;
    z-index: 0;
}

.toolbox-hero::after {
    right: 100px;
    top: 92px;
    width: 180px;
    height: 180px;
    opacity: .95;
    z-index: 0;
}

.toolbox-hero-copy {
    max-width: 760px;
}

.toolbox-hero .toolbox-eyebrow {
    position: relative;
    z-index: 2;
    margin-bottom: 14px;
}

.toolbox-hero h1 {
    position: relative;
    z-index: 2;
    max-width: 760px;
    font-size: clamp(38px, 4.2vw, 58px);
    line-height: 1.18;
    text-wrap: balance;
}

.toolbox-hero-copy > p:not(.toolbox-eyebrow) {
    position: relative;
    z-index: 2;
    max-width: 620px;
    font-size: 17px;
}

.toolbox-actions {
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .toolbox-hero::before {
        left: -54px;
        top: 72px;
    }

    .toolbox-hero::after {
        right: -62px;
        top: 110px;
    }
}

@media (max-width: 640px) {
    .toolbox-hero {
        min-height: 330px;
        padding: 58px 22px 56px;
    }

    .toolbox-hero h1 {
        font-size: 34px;
    }
}

/* Hero final copy layout */
.toolbox-hero {
    min-height: 350px;
    padding: 72px 56px 70px;
}

.toolbox-hero-copy {
    width: min(780px, 100%);
    max-width: 780px;
}

.toolbox-hero .toolbox-eyebrow {
    margin-bottom: 12px;
}

.toolbox-hero h1 {
    width: 100%;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(42px, 4.6vw, 54px);
    line-height: 1.15;
}

.toolbox-hero-copy > p:not(.toolbox-eyebrow) {
    max-width: 560px;
    margin-top: 18px;
    font-size: 17px;
}

.toolbox-hero::before {
    left: 96px;
    top: 62px;
    opacity: .48;
}

.toolbox-hero::after {
    right: 108px;
    top: 96px;
    opacity: .9;
}

@media (max-width: 760px) {
    .toolbox-hero {
        padding: 58px 24px 56px;
    }

    .toolbox-hero h1 {
        font-size: 36px;
        line-height: 1.18;
    }

    .toolbox-hero-copy > p:not(.toolbox-eyebrow) {
        font-size: 16px;
    }
}

/* Hero headline reset: short stable lines */
.toolbox-hero h1 {
    display: grid;
    gap: 6px;
    font-size: clamp(40px, 4.4vw, 56px);
    line-height: 1.12;
}

.toolbox-hero h1 span {
    display: block;
    white-space: nowrap;
}

.toolbox-hero-copy > p:not(.toolbox-eyebrow) {
    max-width: 680px;
}

@media (max-width: 640px) {
    .toolbox-hero h1 {
        font-size: 34px;
    }

    .toolbox-hero h1 span {
        white-space: normal;
    }
}

/* Homepage refinement: closer to a calm widgets directory */
body:not([data-tool-page]) .main-container {
    max-width: 1180px;
    padding-top: 26px;
}

body:not([data-tool-page]) .toolbox-view {
    max-width: 1180px;
}

body:not([data-tool-page]) .toolbox-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 318px;
    padding: 62px 32px;
    margin: 0 auto 34px;
    border-radius: 20px;
    background: #F8F9FC;
    border: 1px solid #F0F1F6;
    box-shadow: none;
}

body:not([data-tool-page]) .toolbox-hero-copy {
    width: min(560px, 100%);
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

body:not([data-tool-page]) .toolbox-hero h1 {
    max-width: 560px;
    margin: 0 auto;
    font-size: clamp(34px, 4vw, 46px);
    line-height: 1.18;
}

body:not([data-tool-page]) .toolbox-hero-copy > p:not(.toolbox-eyebrow) {
    max-width: 560px;
    margin: 16px auto 0;
    font-size: 16px;
    line-height: 1.8;
}

body:not([data-tool-page]) .toolbox-actions {
    justify-content: center;
    margin-top: 22px;
}

body:not([data-tool-page]) .toolbox-hero::before {
    left: 148px;
    top: 82px;
    width: 126px;
    height: 126px;
    border-width: 18px;
    opacity: .58;
    transform: rotate(-8deg);
}

body:not([data-tool-page]) .toolbox-hero::after {
    right: 150px;
    top: 92px;
    width: 144px;
    height: 144px;
    border-width: 19px;
    opacity: .92;
    transform: rotate(18deg);
}

body:not([data-tool-page]) .tool-section {
    max-width: 860px;
    margin: 0 auto;
    padding: 34px 0 70px;
}

body:not([data-tool-page]) .tool-section-head {
    display: block;
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}

body:not([data-tool-page]) .tool-section-head h2 {
    font-size: clamp(28px, 3vw, 36px);
}

body:not([data-tool-page]) .tool-section-head > p {
    max-width: 560px;
    margin: 10px auto 0;
    text-align: center;
    font-size: 16px;
}

body:not([data-tool-page]) .tool-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

body:not([data-tool-page]) .tool-card {
    min-height: 112px;
    padding: 18px 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    text-align: center;
}

body:not([data-tool-page]) .tool-card .tool-icon {
    width: 34px;
    height: 34px;
    margin: 0;
}

body:not([data-tool-page]) .tool-card .tool-icon svg {
    width: 30px;
    height: 30px;
}

body:not([data-tool-page]) .tool-card h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
}

body:not([data-tool-page]) .tool-card > p {
    display: none;
}

body:not([data-tool-page]) .tool-card-bottom {
    margin-top: 0;
    justify-content: center;
}

body:not([data-tool-page]) .tool-category {
    display: none;
}

body:not([data-tool-page]) .tool-status {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
}

body:not([data-tool-page]) .toolbox-story {
    max-width: 860px;
    margin: 0 auto 76px;
    padding-top: 54px;
}

body:not([data-tool-page]) .story-copy {
    max-width: 720px;
}

body:not([data-tool-page]) .toolbox-practice {
    padding: 62px 24px 70px;
    margin: 0 calc(50% - 50vw) 74px;
    background: #F0F1FF;
}

body:not([data-tool-page]) .toolbox-section-title {
    max-width: 680px;
    margin: 0 auto 30px;
    text-align: center;
}

body:not([data-tool-page]) .practice-grid {
    max-width: 860px;
    margin: 0 auto;
}

body:not([data-tool-page]) .toolbox-cta {
    max-width: none;
    margin: 0 calc(50% - 50vw);
    padding: 76px 24px 90px;
    border-radius: 0;
}

@media (max-width: 980px) {
    body:not([data-tool-page]) .tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body:not([data-tool-page]) .toolbox-hero::before {
        left: -42px;
    }

    body:not([data-tool-page]) .toolbox-hero::after {
        right: -42px;
    }
}

@media (max-width: 640px) {
    body:not([data-tool-page]) .main-container {
        padding-left: 14px;
        padding-right: 14px;
    }

    body:not([data-tool-page]) .toolbox-hero {
        min-height: 292px;
        padding: 48px 20px;
        margin-bottom: 24px;
    }

    body:not([data-tool-page]) .toolbox-hero h1 {
        font-size: 32px;
    }

    body:not([data-tool-page]) .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    body:not([data-tool-page]) .tool-card {
        min-height: 104px;
    }
}

/* Homepage full-width section system */
body:not([data-tool-page]) {
    background: #FFFFFF;
}

body:not([data-tool-page]) .main-container {
    width: 100%;
    max-width: none;
    padding: 0;
}

body:not([data-tool-page]) .toolbox-view {
    width: 100%;
    max-width: none;
}

body:not([data-tool-page]) > .footer {
    display: none;
}

body:not([data-tool-page]) .home-band {
    width: 100%;
}

body:not([data-tool-page]) .home-inner {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 0 28px;
}

body:not([data-tool-page]) .home-hero-band {
    padding: 28px 0 54px;
    background: #FFFFFF;
}

body:not([data-tool-page]) .toolbox-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    margin: 0;
    padding: 70px 32px 76px;
    overflow: hidden;
    border: 1px solid #EEF0F6;
    border-radius: 24px;
    background: #F8F9FC;
    box-shadow: none;
}

body:not([data-tool-page]) .toolbox-hero::before {
    left: 128px;
    top: 76px;
    width: 138px;
    height: 138px;
    border-width: 20px;
    opacity: .58;
    transform: rotate(-8deg);
}

body:not([data-tool-page]) .toolbox-hero::after {
    right: 130px;
    top: 92px;
    width: 158px;
    height: 158px;
    border-width: 20px;
    opacity: .92;
    transform: rotate(18deg);
}

body:not([data-tool-page]) .toolbox-hero-copy {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

body:not([data-tool-page]) .toolbox-hero .toolbox-eyebrow {
    margin-bottom: 12px;
}

body:not([data-tool-page]) .toolbox-hero h1 {
    display: grid;
    gap: 4px;
    max-width: 560px;
    margin: 0 auto;
    font-size: clamp(44px, 5vw, 64px);
    line-height: 1.06;
    letter-spacing: 0;
}

body:not([data-tool-page]) .toolbox-hero h1 span {
    white-space: nowrap;
}

body:not([data-tool-page]) .toolbox-hero-copy > p:not(.toolbox-eyebrow) {
    max-width: 560px;
    margin: 18px auto 0;
    color: #667085;
    font-size: 17px;
    line-height: 1.85;
}

body:not([data-tool-page]) .toolbox-actions {
    justify-content: center;
    margin-top: 26px;
}

body:not([data-tool-page]) .home-tools-band {
    padding: 70px 0 84px;
    background: #FFFFFF;
}

body:not([data-tool-page]) .home-tools-inner {
    max-width: 960px;
}

body:not([data-tool-page]) .tool-section {
    max-width: none;
    margin: 0;
    padding: 0;
}

body:not([data-tool-page]) .tool-section-head {
    display: block;
    max-width: 760px;
    margin: 0 auto 34px;
    text-align: center;
}

body:not([data-tool-page]) .tool-section-head h2 {
    font-size: clamp(30px, 3.3vw, 42px);
}

body:not([data-tool-page]) .tool-section-head > p {
    max-width: 560px;
    margin: 12px auto 0;
    text-align: center;
    color: #667085;
    font-size: 16px;
}

body:not([data-tool-page]) .tool-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

body:not([data-tool-page]) .tool-card {
    min-height: 122px;
    padding: 20px 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    text-align: center;
    background: #FFFFFF;
}

body:not([data-tool-page]) .tool-card .tool-icon {
    width: 36px;
    height: 36px;
    margin: 0;
}

body:not([data-tool-page]) .tool-card .tool-icon svg {
    width: 31px;
    height: 31px;
}

body:not([data-tool-page]) .tool-card h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
}

body:not([data-tool-page]) .tool-card > p,
body:not([data-tool-page]) .tool-category {
    display: none;
}

body:not([data-tool-page]) .tool-card-bottom {
    margin-top: 0;
    justify-content: center;
}

body:not([data-tool-page]) .tool-status {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
}

body:not([data-tool-page]) .home-about-band {
    padding: 78px 0 88px;
    border-top: 1px solid #F0F1F6;
    background: #FFFFFF;
}

body:not([data-tool-page]) .home-about-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
    gap: 78px;
    align-items: center;
}

body:not([data-tool-page]) .toolbox-story {
    max-width: none;
    margin: 0;
    padding: 0;
}

body:not([data-tool-page]) .story-copy {
    max-width: 520px;
    margin: 0;
}

body:not([data-tool-page]) .story-copy h2 {
    max-width: 520px;
    margin-bottom: 18px;
    font-size: clamp(32px, 3.4vw, 46px);
    line-height: 1.16;
}

body:not([data-tool-page]) .story-copy p {
    color: #667085;
    font-size: 16px;
    line-height: 1.95;
}

body:not([data-tool-page]) .about-collage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    grid-auto-rows: 96px;
    gap: 18px;
    min-height: 430px;
}

body:not([data-tool-page]) .collage-card,
body:not([data-tool-page]) .collage-tile {
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(31, 41, 55, .08);
}

body:not([data-tool-page]) .collage-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px;
    background: #FFFFFF;
    border: 1px solid #E6E9F4;
}

body:not([data-tool-page]) .collage-card span {
    color: #6F68F5;
    font-size: 13px;
    font-weight: 800;
}

body:not([data-tool-page]) .collage-card strong {
    margin-top: 8px;
    color: #101828;
    font-size: 20px;
    line-height: 1.35;
}

body:not([data-tool-page]) .collage-card em {
    margin-top: 10px;
    color: #667085;
    font-style: normal;
    font-weight: 700;
}

body:not([data-tool-page]) .collage-copybook {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    transform: rotate(-3deg);
}

body:not([data-tool-page]) .collage-plan {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    background: #FFF3C4;
}

body:not([data-tool-page]) .collage-dict {
    grid-column: 3 / 5;
    grid-row: 3 / 5;
    background: #F4F3FF;
    transform: rotate(2deg);
}

body:not([data-tool-page]) .tile-mint {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background: #8FEAE7;
}

body:not([data-tool-page]) .tile-pink {
    grid-column: 4 / 5;
    grid-row: 1 / 3;
    background: #FFE0EB;
}

body:not([data-tool-page]) .tile-green {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    background:
        radial-gradient(circle at 24% 22%, #8EE66A 0 10px, transparent 11px),
        radial-gradient(circle at 70% 44%, transparent 0 30px, rgba(113, 217, 83, .72) 31px 47px, transparent 48px),
        #C9FF9C;
}

body:not([data-tool-page]) .tile-purple {
    grid-column: 4 / 5;
    grid-row: 5 / 6;
    background:
        radial-gradient(circle at 0% 100%, transparent 0 44px, rgba(143, 138, 247, .35) 45px 62px, transparent 63px),
        #E4E2FF;
}

body:not([data-tool-page]) .home-value-band {
    padding: 74px 0 82px;
    background: #F0F1FF;
}

body:not([data-tool-page]) .toolbox-practice {
    margin: 0;
    padding: 0;
    background: transparent;
}

body:not([data-tool-page]) .toolbox-section-title {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

body:not([data-tool-page]) .practice-grid {
    max-width: 920px;
    margin: 0 auto;
}

body:not([data-tool-page]) .practice-grid article {
    background: rgba(255,255,255,.82);
}

body:not([data-tool-page]) .home-cta-band {
    position: relative;
    padding: 78px 0 30px;
    overflow: hidden;
    background: #6F68F5;
}

body:not([data-tool-page]) .home-cta-band::before,
body:not([data-tool-page]) .home-cta-band::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

body:not([data-tool-page]) .home-cta-band::before {
    left: 20%;
    top: -74px;
    width: 220px;
    height: 220px;
    border: 24px solid #3ED5D0;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(26deg);
}

body:not([data-tool-page]) .home-cta-band::after {
    right: 12%;
    bottom: 120px;
    width: 310px;
    height: 310px;
    border: 28px solid rgba(255,255,255,.18);
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(-14deg);
}

body:not([data-tool-page]) .toolbox-cta {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto 64px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body:not([data-tool-page]) .toolbox-cta::before,
body:not([data-tool-page]) .toolbox-cta::after {
    display: none;
}

body:not([data-tool-page]) .toolbox-cta .toolbox-eyebrow,
body:not([data-tool-page]) .toolbox-cta h2,
body:not([data-tool-page]) .toolbox-cta p {
    color: #FFFFFF;
}

body:not([data-tool-page]) .toolbox-cta h2 {
    font-size: clamp(38px, 4.4vw, 54px);
}

body:not([data-tool-page]) .toolbox-cta p:not(.toolbox-eyebrow) {
    color: rgba(255,255,255,.78);
}

body:not([data-tool-page]) .toolbox-cta small {
    display: block;
    margin: 12px 0 22px;
    color: rgba(255,255,255,.74);
}

body:not([data-tool-page]) .toolbox-cta .btn {
    background: #FFFFFF;
    color: #6F68F5;
    box-shadow: 0 12px 28px rgba(24, 22, 84, .18);
}

body:not([data-tool-page]) .home-footer-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 1.4fr 1fr;
    gap: 28px;
    width: min(100%, 960px);
    margin: 0 auto;
    padding: 30px 34px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(24, 22, 84, .14);
}

body:not([data-tool-page]) .home-footer-card strong {
    color: #101828;
    font-size: 18px;
}

body:not([data-tool-page]) .home-footer-card p,
body:not([data-tool-page]) .home-footer-card span {
    color: #667085;
    font-size: 13px;
    line-height: 1.8;
}

body:not([data-tool-page]) .home-footer-card div:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
}

@media (max-width: 980px) {
    body:not([data-tool-page]) .toolbox-hero::before {
        left: -44px;
    }

    body:not([data-tool-page]) .toolbox-hero::after {
        right: -46px;
    }

    body:not([data-tool-page]) .tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body:not([data-tool-page]) .home-about-layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    body:not([data-tool-page]) .story-copy {
        max-width: 720px;
        text-align: center;
        margin: 0 auto;
    }

    body:not([data-tool-page]) .story-copy h2 {
        margin-left: auto;
        margin-right: auto;
    }

    body:not([data-tool-page]) .about-collage {
        max-width: 620px;
        margin: 0 auto;
    }

    body:not([data-tool-page]) .home-footer-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 640px) {
    body:not([data-tool-page]) .home-inner {
        padding: 0 16px;
    }

    body:not([data-tool-page]) .home-hero-band {
        padding-top: 18px;
    }

    body:not([data-tool-page]) .toolbox-hero {
        min-height: 318px;
        padding: 52px 20px 58px;
        border-radius: 20px;
    }

    body:not([data-tool-page]) .toolbox-hero h1 {
        font-size: 36px;
    }

    body:not([data-tool-page]) .toolbox-hero h1 span {
        white-space: normal;
    }

    body:not([data-tool-page]) .tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    body:not([data-tool-page]) .tool-card {
        min-height: 110px;
    }

    body:not([data-tool-page]) .home-about-band,
    body:not([data-tool-page]) .home-value-band {
        padding: 58px 0;
    }

    body:not([data-tool-page]) .about-collage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 86px;
        min-height: auto;
    }

    body:not([data-tool-page]) .collage-copybook,
    body:not([data-tool-page]) .collage-plan,
    body:not([data-tool-page]) .collage-dict,
    body:not([data-tool-page]) .tile-mint,
    body:not([data-tool-page]) .tile-pink,
    body:not([data-tool-page]) .tile-green,
    body:not([data-tool-page]) .tile-purple {
        grid-column: auto;
        grid-row: auto;
        transform: none;
    }

    body:not([data-tool-page]) .collage-copybook,
    body:not([data-tool-page]) .collage-dict {
        grid-column: span 2;
    }

    body:not([data-tool-page]) .home-cta-band {
        padding-top: 60px;
    }

    body:not([data-tool-page]) .home-footer-card {
        padding: 24px 20px;
    }
}

/* Homepage hero should read as a full-width section, not an inner card */
body:not([data-tool-page]) .home-hero-band {
    padding: 0;
    background: #F8F9FC;
    border-bottom: 1px solid #EEF0F6;
}

body:not([data-tool-page]) .home-hero-band .home-inner {
    width: min(100%, 1180px);
    padding: 0 28px;
}

body:not([data-tool-page]) .toolbox-hero {
    min-height: 500px;
    padding: 86px 32px 92px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body:not([data-tool-page]) .toolbox-hero::before {
    left: 68px;
    top: 118px;
}

body:not([data-tool-page]) .toolbox-hero::after {
    right: 74px;
    top: 144px;
}

@media (max-width: 980px) {
    body:not([data-tool-page]) .toolbox-hero::before {
        left: -52px;
    }

    body:not([data-tool-page]) .toolbox-hero::after {
        right: -54px;
    }
}

@media (max-width: 640px) {
    body:not([data-tool-page]) .home-hero-band .home-inner {
        padding: 0 16px;
    }

    body:not([data-tool-page]) .toolbox-hero {
        min-height: 390px;
        padding: 64px 18px 70px;
    }
}

/* Mobile homepage polish */
@media (max-width: 640px) {
    body:not([data-tool-page]) .navbar {
        height: 56px;
    }

    body:not([data-tool-page]) .nav-container {
        min-height: 56px;
        padding: 0 16px;
    }

    body:not([data-tool-page]) .logo {
        font-size: 18px;
        gap: 8px;
    }

    body:not([data-tool-page]) .logo svg {
        width: 24px;
        height: 24px;
    }

    body:not([data-tool-page]) .site-nav-tabs {
        margin-left: 10px;
    }

    body:not([data-tool-page]) .site-nav-tabs .nav-tab {
        min-height: 30px;
        padding: 6px 12px;
        font-size: 13px;
    }

    body:not([data-tool-page]) .home-hero-band {
        margin-top: 0;
    }

    body:not([data-tool-page]) .home-hero-band .home-inner {
        padding: 0;
    }

    body:not([data-tool-page]) .toolbox-hero {
        min-height: 390px;
        padding: 58px 22px 62px;
    }

    body:not([data-tool-page]) .toolbox-hero::before {
        left: -70px;
        top: 118px;
        width: 132px;
        height: 132px;
        border-width: 18px;
        opacity: .34;
    }

    body:not([data-tool-page]) .toolbox-hero::after {
        right: -82px;
        top: 252px;
        width: 160px;
        height: 160px;
        border-width: 20px;
        opacity: .86;
    }

    body:not([data-tool-page]) .toolbox-hero .toolbox-eyebrow {
        margin-bottom: 10px;
        font-size: 12px;
    }

    body:not([data-tool-page]) .toolbox-hero h1 {
        max-width: 360px;
        font-size: 34px;
        line-height: 1.12;
    }

    body:not([data-tool-page]) .toolbox-hero-copy > p:not(.toolbox-eyebrow) {
        max-width: 350px;
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.85;
    }

    body:not([data-tool-page]) .toolbox-actions {
        gap: 10px;
        margin-top: 24px;
    }

    body:not([data-tool-page]) .toolbox-actions .btn {
        min-width: 128px;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
    }

    body:not([data-tool-page]) .home-tools-band {
        padding: 54px 0 58px;
    }

    body:not([data-tool-page]) .tool-section-head {
        margin-bottom: 24px;
    }

    body:not([data-tool-page]) .tool-section-head h2,
    body:not([data-tool-page]) .toolbox-section-title h2 {
        font-size: 30px;
        line-height: 1.18;
    }

    body:not([data-tool-page]) .tool-section-head > p,
    body:not([data-tool-page]) .toolbox-section-title > p:not(.toolbox-eyebrow) {
        font-size: 15px;
        line-height: 1.75;
    }

    body:not([data-tool-page]) .tool-grid {
        gap: 10px;
    }

    body:not([data-tool-page]) .tool-card {
        min-height: 98px;
        padding: 14px 8px 12px;
        border-radius: 12px;
        gap: 6px;
    }

    body:not([data-tool-page]) .tool-card .tool-icon {
        width: 30px;
        height: 30px;
    }

    body:not([data-tool-page]) .tool-card .tool-icon svg {
        width: 27px;
        height: 27px;
    }

    body:not([data-tool-page]) .tool-card h3 {
        font-size: 13px;
    }

    body:not([data-tool-page]) .tool-status {
        padding: 2px 7px;
        font-size: 10px;
    }

    body:not([data-tool-page]) .home-about-band {
        padding: 54px 0 58px;
    }

    body:not([data-tool-page]) .home-about-layout {
        gap: 34px;
    }

    body:not([data-tool-page]) .story-copy {
        max-width: 380px;
        text-align: left;
    }

    body:not([data-tool-page]) .story-copy h2 {
        font-size: 30px;
        line-height: 1.2;
        margin-bottom: 16px;
    }

    body:not([data-tool-page]) .story-copy p {
        font-size: 15px;
        line-height: 1.88;
        text-align: left;
    }

    body:not([data-tool-page]) .story-copy .toolbox-eyebrow {
        text-align: center;
    }

    body:not([data-tool-page]) .story-copy .btn {
        display: flex;
        width: max-content;
        margin: 20px auto 0;
    }

    body:not([data-tool-page]) .about-collage {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        grid-auto-rows: auto;
        max-width: 380px;
        min-height: 0;
        justify-self: stretch;
    }

    body:not([data-tool-page]) .collage-card {
        width: 100%;
        min-height: 96px;
        padding: 14px;
        border-radius: 14px;
        box-shadow: 0 12px 28px rgba(31, 41, 55, .07);
    }

    body:not([data-tool-page]) .collage-card strong {
        font-size: 17px;
    }

    body:not([data-tool-page]) .collage-card em,
    body:not([data-tool-page]) .collage-card span {
        font-size: 12px;
    }

    body:not([data-tool-page]) .collage-copybook,
    body:not([data-tool-page]) .collage-plan,
    body:not([data-tool-page]) .collage-dict {
        grid-column: 1;
        grid-row: auto;
        transform: none;
    }

    body:not([data-tool-page]) .collage-tile {
        display: none;
    }

    body:not([data-tool-page]) .home-value-band {
        padding: 54px 0 60px;
    }

    body:not([data-tool-page]) .toolbox-section-title {
        margin-bottom: 24px;
    }

    body:not([data-tool-page]) .practice-grid {
        gap: 12px;
    }

    body:not([data-tool-page]) .practice-grid article {
        padding: 20px;
        border-radius: 14px;
    }

    body:not([data-tool-page]) .practice-grid article h3 {
        font-size: 18px;
    }

    body:not([data-tool-page]) .practice-grid article p {
        font-size: 14px;
        line-height: 1.75;
    }

    body:not([data-tool-page]) .home-cta-band {
        padding: 58px 0 24px;
    }

    body:not([data-tool-page]) .home-cta-band::before {
        left: -70px;
        top: -80px;
    }

    body:not([data-tool-page]) .home-cta-band::after {
        right: -150px;
        bottom: 150px;
    }

    body:not([data-tool-page]) .toolbox-cta {
        margin-bottom: 42px;
    }

    body:not([data-tool-page]) .toolbox-cta h2 {
        font-size: 34px;
        line-height: 1.16;
    }

    body:not([data-tool-page]) .toolbox-cta p:not(.toolbox-eyebrow) {
        font-size: 15px;
        line-height: 1.75;
    }

    body:not([data-tool-page]) .home-footer-card {
        gap: 18px;
        padding: 22px 18px;
        border-radius: 14px;
    }

    body:not([data-tool-page]) .home-footer-card div:nth-child(2) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        text-align: left;
    }
}

@media (max-width: 380px) {
    body:not([data-tool-page]) .toolbox-hero h1 {
        font-size: 31px;
    }

    body:not([data-tool-page]) .toolbox-actions {
        flex-direction: column;
        align-items: stretch;
        width: min(100%, 260px);
        margin-left: auto;
        margin-right: auto;
    }

    body:not([data-tool-page]) .toolbox-actions .btn {
        width: 100%;
    }
}

/* Mobile copybook tool polish */
@media (max-width: 640px) {
    body[data-tool-page="copybook"] .main-container {
        padding: 14px 14px 56px;
    }

    body[data-tool-page="copybook"] .tool-page-shell {
        display: block;
    }

    body[data-tool-page="copybook"] .tool-sidebar {
        position: static;
        width: 100%;
        height: auto;
        max-height: none;
        margin-bottom: 18px;
        padding: 0;
        overflow: visible;
        border-right: 0;
        background: transparent;
    }

    body[data-tool-page="copybook"] .tool-sidebar-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 2px 0 8px;
        scrollbar-width: none;
    }

    body[data-tool-page="copybook"] .tool-sidebar-list::-webkit-scrollbar {
        display: none;
    }

    body[data-tool-page="copybook"] .tool-sidebar-item {
        flex: 0 0 auto;
        min-width: 104px;
        padding: 10px 12px;
        justify-content: center;
        border-radius: 12px;
        font-size: 13px;
    }

    body[data-tool-page="copybook"] .tool-sidebar-item svg,
    body[data-tool-page="copybook"] .tool-sidebar-icon {
        width: 18px;
        height: 18px;
    }

    body[data-tool-page="copybook"] .tool-page-main {
        min-width: 0;
    }

    body[data-tool-page="copybook"] .hero-section {
        min-height: 0;
        padding: 46px 22px 48px;
        border-radius: 18px;
    }

    body[data-tool-page="copybook"] .hero-title {
        font-size: 33px;
        line-height: 1.16;
    }

    body[data-tool-page="copybook"] .hero-subtitle {
        font-size: 15px;
        line-height: 1.75;
    }

    body[data-tool-page="copybook"] .copybook-subnav {
        gap: 6px;
        margin: 16px 0;
        padding: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body[data-tool-page="copybook"] .copybook-subnav::-webkit-scrollbar {
        display: none;
    }

    body[data-tool-page="copybook"] .copybook-tab {
        flex: 0 0 auto;
        min-width: 98px;
        padding: 9px 12px;
        font-size: 13px;
    }

    body[data-tool-page="copybook"] .widget-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body[data-tool-page="copybook"] .widget-card {
        min-height: 86px;
        padding: 14px 8px 12px;
        border-radius: 12px;
    }

    body[data-tool-page="copybook"] .widget-card .widget-icon,
    body[data-tool-page="copybook"] .widget-card svg {
        width: 28px;
        height: 28px;
    }

    body[data-tool-page="copybook"] .widget-card span,
    body[data-tool-page="copybook"] .widget-card .widget-title {
        font-size: 13px;
    }

    body[data-tool-page="copybook"] .list-card,
    body[data-tool-page="copybook"] .settings-card {
        border-radius: 16px;
        padding: 18px;
    }

    body[data-tool-page="copybook"] .list-header {
        gap: 12px;
        align-items: flex-start;
    }

    body[data-tool-page="copybook"] .section-heading {
        font-size: 20px;
    }

    body[data-tool-page="copybook"] .sentence-item {
        padding: 14px;
        border-radius: 12px;
    }

    body[data-tool-page="copybook"] .list-actions {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body[data-tool-page="copybook"] .settings-card {
        gap: 16px;
        align-items: stretch;
    }

    body[data-tool-page="copybook"] .settings-toggles {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body[data-tool-page="copybook"] .toggle-item {
        justify-content: space-between;
        width: 100%;
    }

    body[data-tool-page="copybook"] .btn-mega {
        width: 100%;
        min-height: 52px;
    }
}
/* Lightweight learning summary in the celebration modal */
.learning-summary {
    width: 100%;
    margin: 18px 0 16px;
    padding: 16px;
    border: 1px solid rgba(111, 99, 240, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(246, 245, 255, 0.96), rgba(255, 255, 255, 0.94));
    box-shadow: 0 12px 30px rgba(111, 99, 240, 0.08);
    text-align: left;
}

.learning-summary-title {
    margin-bottom: 12px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
}

.learning-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.learning-summary-item,
.learning-summary-row {
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 14px;
    background: #fff;
}

.learning-summary-item {
    padding: 10px 12px;
}

.learning-summary-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    margin-top: 8px;
}

.learning-summary span {
    color: var(--text-light);
    font-size: 12px;
    font-weight: 700;
}

.learning-summary strong {
    display: block;
    color: var(--text-dark);
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}

.learning-summary-note {
    margin: 12px 2px 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

@media (max-width: 640px) {
    .learning-summary {
        padding: 14px;
    }

    .learning-summary-grid {
        grid-template-columns: 1fr;
    }

    .learning-summary-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* Avatar logo from Xiaohongshu brand artwork */
.brand-logo-img {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    object-fit: cover;
    flex: 0 0 auto;
    box-shadow: 0 6px 14px rgba(112, 103, 240, 0.16);
}

.logo-wordmark {
    color: var(--text);
    font-weight: 800;
    letter-spacing: 0;
}

@media (max-width: 640px) {
    .brand-logo-img {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }
}


.learning-summary-download {
    width: 100%;
    min-height: 42px;
    margin-top: 14px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #8D85F7);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(111, 99, 240, 0.18);
}

.learning-summary-download:active {
    transform: translateY(1px);
}


.settings-actions {
    display: grid;
    grid-template-columns: minmax(220px, 420px) minmax(150px, 190px);
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    width: 100%;
}

.settings-actions .btn-mega {
    width: 100%;
    margin: 0;
}

.btn-print-setup {
    min-height: 56px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 800;
    background: #fff;
}

.btn-print-setup.shake {
    animation: shake 0.4s ease;
}

@media (max-width: 640px) {
    .settings-actions {
        grid-template-columns: 1fr;
    }

    .btn-print-setup {
        min-height: 50px;
    }
}


/* Print copybook worksheet v9.2 */
.print-sentence-header {
    display: none;
}

@media print {
    @page {
        size: A4;
        margin: 13mm 12mm 14mm;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        background: #fff !important;
        color: #111827 !important;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .navbar,
    .progress-bar,
    .tool-sidebar,
    .write-sidebar,
    .write-header,
    .card-actions,
    .card-header,
    .breadcrumb,
    .bottom-toolbar,
    .footer,
    .modal-overlay,
    .hero-section,
    .copybook-subnav,
    .tool-page-hero,
    .copybook-tabs,
    .toolbox-page {
        display: none !important;
    }

    .main-container,
    .tool-page-shell,
    .tool-page-content,
    .write-layout,
    .write-main,
    .write-container,
    .cards-container {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border: 0 !important;
    }

    .cards-container::before {
        content: "糖果盒子 · 句子抄写练习纸       姓名：_________    日期：_________";
        display: block;
        margin: 0 0 8mm;
        padding-bottom: 4mm;
        border-bottom: 1px solid #C9CDD8;
        color: #1F2937;
        font-size: 11pt;
        font-weight: 800;
        letter-spacing: 0;
    }

    .copy-card,
    .copy-card.active {
        display: block !important;
        break-inside: avoid;
        page-break-inside: avoid;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 0 10mm !important;
        padding: 0 0 8mm !important;
        border: 0 !important;
        border-bottom: 1px solid #E5E7EB !important;
        border-radius: 0 !important;
        background: #fff !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .copy-card:last-child {
        border-bottom: 0 !important;
    }

    .sentence-meta.card-meta {
        display: none !important;
    }

    .print-sentence-header {
        display: block !important;
        margin: 0 0 5mm !important;
        text-align: left !important;
    }

    .print-sentence-top {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 3mm !important;
        flex-wrap: wrap !important;
    }

    .print-sentence-top strong {
        color: #111827 !important;
        font-size: 12pt !important;
        font-weight: 900 !important;
    }

    .print-sentence-tags {
        display: flex !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    .print-sentence-tags span {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 18px !important;
        padding: 1px 6px !important;
        border: 1px solid #D8DCE8 !important;
        border-radius: 999px !important;
        color: #4B5563 !important;
        background: #fff !important;
        font-size: 8.5pt !important;
        font-weight: 700 !important;
    }

    .print-sentence-text {
        color: #111827 !important;
        font-size: 14pt !important;
        font-weight: 800 !important;
        line-height: 1.6 !important;
        text-align: left !important;
    }

    .tianzi-row {
        justify-content: flex-start !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 5mm !important;
        column-gap: 2.2mm !important;
        row-gap: 4mm !important;
        text-align: left !important;
    }

    .print-only-row {
        display: flex !important;
        margin-top: 1mm !important;
    }

    .char-box {
        width: 18mm !important;
        min-width: 18mm !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .pinyin {
        height: 5mm !important;
        margin-bottom: 1mm !important;
        color: #555B6E !important;
        font-size: 8pt !important;
        font-weight: 700 !important;
        line-height: 5mm !important;
        text-align: center !important;
        text-transform: lowercase !important;
    }

    .print-only-row .pinyin {
        color: transparent !important;
    }

    .tianzi-grid {
        width: 18mm !important;
        height: 18mm !important;
        border: 1px solid #D26A6A !important;
        background: #fff !important;
        color: #111827 !important;
        font-size: 34pt !important;
        font-family: "KaiTi", "STKaiti", "楷体", serif !important;
        line-height: 18mm !important;
    }

    .tianzi-grid::before {
        border-color: #E8B8B8 !important;
    }

    .tianzi-grid::after {
        border-color: #E8B8B8 !important;
    }

    .print-only-row .tianzi-grid {
        color: transparent !important;
    }

    .char-group {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        column-gap: 2.2mm !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .tianzi-grid.punctuation {
        border: 1px solid #D26A6A !important;
        background: #fff !important;
        display: block !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .tianzi-grid.punctuation::before,
    .tianzi-grid.punctuation::after {
        display: block !important;
        border-color: #E8B8B8 !important;
    }

    .punctuation-mark {
        right: 2.5mm !important;
        bottom: 2mm !important;
        width: 4mm !important;
        height: 4mm !important;
        color: #111827 !important;
        font-size: 14pt !important;
        font-weight: 500 !important;
        line-height: 4mm !important;
    }
}


/* Print copybook remove redundant text v9.3 */
@media print {
    .cards-container::before {
        content: none !important;
        display: none !important;
    }

    .print-sentence-text {
        display: none !important;
    }

    .print-sentence-header {
        margin-bottom: 4mm !important;
    }
}


/* Print copybook compact packing v9.4 */
@media print {
    @page {
        size: A4;
        margin: 8mm 8mm 9mm;
    }

    .copy-card,
    .copy-card.active {
        margin: 0 0 5mm !important;
        padding: 0 0 4.5mm !important;
        border-bottom: 1px solid #E5E7EB !important;
    }

    .print-sentence-header {
        margin-bottom: 2.5mm !important;
    }

    .print-sentence-top {
        margin-bottom: 0 !important;
        gap: 4px !important;
    }

    .print-sentence-top strong {
        font-size: 10.5pt !important;
    }

    .print-sentence-tags span {
        min-height: 15px !important;
        padding: 0 5px !important;
        font-size: 7.5pt !important;
        line-height: 15px !important;
    }

    .tianzi-row {
        margin: 0 0 2.5mm !important;
        column-gap: 1.7mm !important;
        row-gap: 2.4mm !important;
    }

    .print-only-row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .char-group {
        column-gap: 1.7mm !important;
    }

    .char-box {
        width: 15.8mm !important;
        min-width: 15.8mm !important;
    }

    .pinyin {
        height: 4mm !important;
        margin-bottom: 0.7mm !important;
        font-size: 7pt !important;
        line-height: 4mm !important;
    }

    .tianzi-grid {
        width: 15.8mm !important;
        height: 15.8mm !important;
        font-size: 29pt !important;
        line-height: 15.6mm !important;
    }

    .punctuation-mark {
        right: 2mm !important;
        bottom: 1.7mm !important;
        width: 3.5mm !important;
        height: 3.5mm !important;
        font-size: 12pt !important;
        line-height: 3.5mm !important;
    }
}


/* Print page footer v9.5 */
@media print {
    @page {
        margin: 8mm 8mm 12mm;

        @bottom-left {
            content: "糖果盒子 tangguohezi.com · 小学学习小工具箱";
            color: #6B7280;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 8pt;
            font-weight: 600;
        }

        @bottom-right {
            content: "";
            color: #6B7280;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 8pt;
            font-weight: 600;
        }
    }

    .print-page-footer-fallback {
        display: none !important;
    }
}


/* Print fixed footer fallback v9.6 */
@media print {
    @page {
        margin: 8mm 8mm 13mm;
    }

    body::after {
        content: "糖果盒子 tangguohezi.com · 小学学习小工具箱";
        position: fixed;
        left: 8mm;
        bottom: 4mm;
        z-index: 9999;
        color: #6B7280;
        background: transparent;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: 8pt;
        font-weight: 600;
        line-height: 1;
    }

    body::before {
        content: "";
        position: fixed;
        right: 8mm;
        bottom: 4mm;
        z-index: 9999;
        color: #6B7280;
        background: transparent;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: 8pt;
        font-weight: 600;
        line-height: 1;
    }
}


/* Print footer serif stable v9.7 */
@media print {
    @page {
        margin: 8mm 8mm 13mm;
    }

    body::after {
        content: "糖果盒子 tangguohezi.com · 小学学习小工具箱" !important;
        position: fixed !important;
        left: 8mm !important;
        bottom: 4mm !important;
        z-index: 9999 !important;
        color: #6B7280 !important;
        background: transparent !important;
        font-family: "Source Han Serif SC", "Noto Serif CJK SC", "思源宋体", "Songti SC", SimSun, serif !important;
        font-size: 8pt !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    body::before {
        content: "" !important;
        display: none !important;
    }
}


/* Print footer no unreliable page counter v9.8 */
@media print {
    @page {
        @bottom-right {
            content: "" !important;
        }
    }

    body::before {
        content: "" !important;
        display: none !important;
    }
}


/* Reliable print pagination v9.9 */
.print-pagination-root,
.print-measure-root {
    display: none;
}

.print-measure-root {
    position: absolute;
    left: -10000px;
    top: 0;
    display: block;
    visibility: hidden;
    pointer-events: none;
    width: 210mm;
    background: #fff;
}

.print-page {
    position: relative;
    width: 210mm;
    height: 297mm;
    padding: 8mm 8mm 13mm;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
}

.print-page-content {
    height: 272mm;
    overflow: hidden;
}

.print-page-footer {
    position: absolute;
    left: 8mm;
    right: 8mm;
    bottom: 4mm;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8mm;
    color: #6B7280;
    font-family: "Source Han Serif SC", "Noto Serif CJK SC", "思源宋体", "Songti SC", SimSun, serif;
    font-size: 8pt;
    font-weight: 600;
    line-height: 1;
}

.print-page-footer-brand {
    white-space: nowrap;
}

.print-page-footer-number {
    white-space: nowrap;
}

.print-pagination-root .copy-card,
.print-measure-root .copy-card {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 3.5mm !important;
    padding: 0 0 3mm !important;
    border: 0 !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
}

.print-pagination-root .copy-card:last-child,
.print-measure-root .copy-card:last-child {
    border-bottom: 0 !important;
}

.print-pagination-root .print-sentence-header,
.print-measure-root .print-sentence-header {
    display: block !important;
    margin: 0 0 2mm !important;
    text-align: left !important;
}

.print-pagination-root .print-sentence-text,
.print-measure-root .print-sentence-text {
    display: none !important;
}

.print-pagination-root .print-sentence-top,
.print-measure-root .print-sentence-top {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap !important;
}

.print-pagination-root .print-sentence-top strong,
.print-measure-root .print-sentence-top strong {
    color: #111827 !important;
    font-size: 10.5pt !important;
    font-weight: 900 !important;
}

.print-pagination-root .print-sentence-tags,
.print-measure-root .print-sentence-tags {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
}

.print-pagination-root .print-sentence-tags span,
.print-measure-root .print-sentence-tags span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 15px !important;
    padding: 0 5px !important;
    border: 1px solid #D8DCE8 !important;
    border-radius: 999px !important;
    color: #4B5563 !important;
    background: #fff !important;
    font-size: 7.5pt !important;
    font-weight: 700 !important;
    line-height: 15px !important;
}

.print-pagination-root .tianzi-row,
.print-measure-root .tianzi-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1.8mm !important;
    column-gap: 1.7mm !important;
    row-gap: 2mm !important;
    text-align: left !important;
}

.print-pagination-root .print-only-row,
.print-measure-root .print-only-row {
    display: flex !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.print-pagination-root .char-group,
.print-measure-root .char-group {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    column-gap: 1.7mm !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.print-pagination-root .char-box,
.print-measure-root .char-box {
    width: 15.6mm !important;
    min-width: 15.6mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
}

.print-pagination-root .pinyin,
.print-measure-root .pinyin {
    height: 3.8mm !important;
    margin-bottom: 0.5mm !important;
    color: #555B6E !important;
    font-size: 7pt !important;
    font-weight: 700 !important;
    line-height: 4mm !important;
    text-align: center !important;
    text-transform: lowercase !important;
}

.print-pagination-root .print-only-row .pinyin,
.print-measure-root .print-only-row .pinyin {
    color: transparent !important;
}

.print-pagination-root .tianzi-grid,
.print-measure-root .tianzi-grid {
    width: 15.6mm !important;
    height: 15.6mm !important;
    border: 1px solid #D26A6A !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 29pt !important;
    font-family: "KaiTi", "STKaiti", "楷体", serif !important;
    line-height: 15.8mm !important;
}

.print-pagination-root .tianzi-grid::before,
.print-measure-root .tianzi-grid::before {
    border-color: #E8B8B8 !important;
}

.print-pagination-root .tianzi-grid::after,
.print-measure-root .tianzi-grid::after {
    border-color: #E8B8B8 !important;
}

.print-pagination-root .print-only-row .tianzi-grid,
.print-measure-root .print-only-row .tianzi-grid {
    color: transparent !important;
}

.print-pagination-root .tianzi-grid.punctuation,
.print-measure-root .tianzi-grid.punctuation {
    border: 1px solid #D26A6A !important;
    background: #fff !important;
    display: block !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.print-pagination-root .tianzi-grid.punctuation::before,
.print-pagination-root .tianzi-grid.punctuation::after,
.print-measure-root .tianzi-grid.punctuation::before,
.print-measure-root .tianzi-grid.punctuation::after {
    display: block !important;
    border-color: #E8B8B8 !important;
}

.print-pagination-root .punctuation-mark,
.print-measure-root .punctuation-mark {
    right: 2mm !important;
    bottom: 1.7mm !important;
    width: 3.5mm !important;
    height: 3.5mm !important;
    color: #111827 !important;
    font-size: 12pt !important;
    font-weight: 500 !important;
    line-height: 3.5mm !important;
}

@media print {
    @page {
        size: A4;
        margin: 0;
    }

    body::before,
    body::after {
        content: "" !important;
        display: none !important;
    }

    body.is-print-paginated .cards-container > .copy-card {
        display: none !important;
    }

    body.is-print-paginated .print-pagination-root {
        display: block !important;
        width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.is-print-paginated .print-measure-root {
        display: none !important;
    }

    body.is-print-paginated .print-page {
        display: block !important;
        page-break-after: always;
        break-after: page;
    }

    body.is-print-paginated .print-page:last-child {
        page-break-after: auto;
        break-after: auto;
    }
}


/* Learning summary calm report v10.1 */
.modal-card.celebration {
    width: min(460px, calc(100vw - 34px));
    padding: 30px 28px 28px;
    text-align: left;
    border-radius: 28px;
}

.modal-card.celebration .trophy-icon,
.modal-card.celebration .reward-badge {
    display: none !important;
}

.modal-card.celebration h2 {
    margin: 0 0 8px;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: left;
}

.modal-card.celebration > p {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.75;
    text-align: left;
}

.learning-summary {
    width: 100%;
    margin: 0 0 16px;
    padding: 18px;
    border: 1px solid rgba(221, 225, 239, 0.96);
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 8%, rgba(139, 227, 106, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 255, 0.96));
    box-shadow: 0 18px 44px rgba(31, 35, 70, 0.08);
    text-align: left;
}

.learning-summary-header {
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
}

.learning-summary-header span {
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.learning-summary-header strong {
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.5;
}

.learning-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.learning-summary-item {
    min-height: 82px;
    padding: 13px 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: #fff;
}

.learning-summary-item span,
.learning-summary-row span {
    display: block;
    margin-bottom: 6px;
    color: #7B8298;
    font-size: 12px;
    font-weight: 900;
}

.learning-summary-item strong {
    display: block;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: 0;
}

.learning-summary-row {
    display: block;
    margin-top: 10px;
    padding: 13px 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: #fff;
}

.learning-summary-row-soft {
    background: #F8F7FF;
    border-color: rgba(112, 103, 240, 0.16);
}

.learning-summary-row-note {
    background: #F0FFFB;
    border-color: rgba(52, 213, 208, 0.22);
}

.learning-summary-row strong {
    display: block;
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.75;
    word-break: break-word;
}

.learning-summary-note {
    display: none;
}

.learning-summary-download {
    width: 100%;
    min-height: 42px;
    margin-top: 14px;
    border: 1px solid rgba(112, 103, 240, 0.24);
    border-radius: 15px;
    background: #fff;
    color: var(--primary);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: none;
}

.modal-card.celebration .btn-mega {
    min-height: 48px;
    border-radius: 16px;
}

@media (max-width: 640px) {
    .modal-card.celebration {
        padding: 26px 20px 22px;
    }

    .modal-card.celebration h2 {
        font-size: 26px;
    }

    .learning-summary {
        padding: 15px;
    }

    .learning-summary-grid {
        grid-template-columns: 1fr;
    }
}


/* Celebration dismiss button v10.3 */
.modal-card.celebration {
    position: relative;
}

.celebration-dismiss {
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    color: #7B8298;
    background: #F7F8FC;
    font-size: 22px;
    font-weight: 700;
}

.celebration-dismiss:hover {
    color: var(--primary);
    background: #F0EEFF;
}


/* SEO FAQ section v10.11 */
.seo-faq {
    width: min(100%, 980px);
    margin: 28px auto 0;
    padding: 30px;
    border: 1px solid #E5E7F0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.05);
}

.seo-faq-eyebrow {
    margin: 0 0 8px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
}

.seo-faq h2 {
    margin: 0 0 22px;
    color: var(--text);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: 0;
}

.seo-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.seo-faq article {
    padding: 18px;
    border: 1px solid #E8EAF4;
    border-radius: 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
}

.seo-faq h3 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: 0;
}

.seo-faq p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.75;
}

@media (max-width: 720px) {
    .seo-faq {
        margin-top: 20px;
        padding: 22px 16px;
        border-radius: 18px;
    }

    .seo-faq-grid {
        grid-template-columns: 1fr;
    }
}