/* ============================================================
       AUTO BOOK WRITER — Editorial Atelier (home)
       主题 token（paper/ink/accent/字体族）已统一上提到 design-system.css
       的 [data-theme] 块，本页只保留布局与组件样式。
       ============================================================ */

    *{box-sizing:border-box}
    html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
    body.app-shell-home{
      margin:0;padding:0;min-height:100vh;
      font-family:var(--sans);color:var(--ink);background:var(--paper);
      background-image:
        radial-gradient(1100px 520px at 90% -10%, var(--accent-soft), transparent 60%),
        radial-gradient(820px 460px at -8% 2%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    }
    .container.container-wide{max-width:920px;margin:0 auto;padding:0 24px}
    ::selection{background:var(--accent);color:var(--paper-2)}
    a{color:var(--accent)}

    /* ---------- Masthead ---------- */
    .hero-section{
      position:sticky;top:0;z-index:120;margin:0 -24px 28px;padding:0 24px;
      background:color-mix(in srgb,var(--paper) 86%,transparent);
      backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid var(--line);
    }
    .hero-header{display:flex;align-items:center;justify-content:space-between;gap:14px 18px;padding:14px 0;flex-wrap:wrap}
    .hero-title-group{display:flex;flex-direction:column;gap:3px;min-width:0}
    .hero-title{font-family:var(--serif-display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.02em;line-height:1.1;margin:0;color:var(--ink)}
    /* 2026-08-14: 与 library 对齐删除 ::first-letter 金色首字（拉丁 drop-cap 错配中文，且与 CTA 抢焦点） */
    .hero-subtitle{font-family:var(--ui-sans);font-size:var(--text-2xs);letter-spacing:.04em;color:var(--ink-mute);font-weight:500}
    /* 信任锚点统计行：衬线 tabular 大数字 + 小单位（付费感背书） */
    .hero-stats-inline{
      font-family:var(--ui-sans);font-size:var(--text-xs);color:var(--ink-mute);
      margin-top:7px;font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:2px;
    }
    .hero-stats-inline span{
      font-family:var(--serif-display);font-weight:700;font-size:var(--text-base);color:var(--ink);
      letter-spacing:-.01em;
    }
    .hero-stats-label{font-family:var(--ui-sans) !important;font-weight:400 !important;font-size:var(--text-2xs) !important;color:var(--ink-mute) !important;margin-left:1px}
    .hero-stats-sep{color:var(--line-strong);margin:0 6px;font-weight:400;font-family:var(--ui-sans) !important;font-size:var(--text-2xs) !important}
    .hero-controls{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;justify-content:flex-end}

    /* ---------- User / auth / settings ---------- */
    .user-info-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .user-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);font-weight:600;font-size:var(--text-xs);font-family:var(--ui-sans);flex:none;transition:background var(--transition-fast),border-color var(--transition-fast)}
    .user-name{font-weight:600;font-size:var(--text-sm);color:var(--ink)}
    .user-role{font-family:var(--ui-sans);font-size:var(--text-2xs);color:var(--ink-mute);font-weight:500}
    .auth-buttons,.nav-buttons{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
    .auth-btn,.nav-btn{
      font-family:var(--ui-sans);font-weight:500;font-size:var(--text-xs);text-decoration:none;cursor:pointer;
      color:var(--ink-soft);background:transparent;border:none;border-radius:var(--radius-sm);
      padding:6px 10px;line-height:1;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
      transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);
    }
    .auth-btn:hover,.nav-btn:hover{color:var(--accent);background:var(--bg-tertiary)}
    .auth-btn.logout:hover{color:var(--accent)}
    .settings-panel-inline .settings-panel{display:flex;align-items:center;gap:8px}

    /* ---------- Main card ---------- */
    .main-card{
      background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
      box-shadow:none;padding:24px 28px;margin-bottom:24px;position:relative;overflow:hidden;
    }

    /* ---------- Slim notice (guest) ---------- */
    .guest-slim-note{
      display:flex;align-items:baseline;justify-content:center;gap:6px 10px;flex-wrap:wrap;
      padding:2px 4px 14px;margin:0 0 20px;border-bottom:1px solid var(--line);
      font-family:var(--ui-sans);font-size:var(--text-xs);line-height:1.6;color:var(--ink-mute);text-align:center;
    }
    .guest-slim-note a{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
    .guest-slim-note a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

    /* ---------- Product hero ---------- */
    .home-hero{max-width:42rem;margin:0 auto;padding:20px 0 16px;text-align:center}
    .home-hero-eyebrow{margin:0 0 6px;font-family:var(--ui-sans);font-size:var(--text-2xs);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
    .home-hero-title{
      margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,4vw,2.4rem);
      line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-wrap:balance;
    }
    .home-hero-sub{margin:8px auto 0;max-width:32rem;font-family:var(--ui-sans);font-size:var(--text-sm);line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
    .home-hero-rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 10px;color:var(--ink-mute)}
    .home-hero-rule::before,.home-hero-rule::after{content:"";height:1px;width:48px;background:var(--line-strong)}
    .home-hero-ornament{font-size:var(--text-base);line-height:1;color:var(--accent)}
    .home-hero-actions{display:flex;align-items:center;justify-content:center;gap:14px 22px;flex-wrap:wrap}
    .home-hero-ghost{
      font-family:var(--ui-sans);font-size:var(--text-sm);font-weight:600;color:var(--ink-soft);text-decoration:none;
      padding:6px 2px;border-bottom:1px solid var(--line-strong);transition:color var(--transition-fast),border-color var(--transition-fast);
    }
    .home-hero-ghost:hover{color:var(--accent);border-color:var(--accent)}

    /* ---------- Featured books ---------- */
    .featured-books{padding:24px 0 4px;margin-top:8px}
    .featured-books-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
    .featured-books-title{margin:0;font-family:var(--serif-display);font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em;color:var(--ink);position:relative;padding-left:14px}
    /* 刊头装饰条：货架区的编辑感起始（与阅读器章题短线同一语言） */
    .featured-books-title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:1.15em;border-radius:2px;background:color-mix(in srgb,var(--accent) 72%,transparent)}
    .featured-books-more{font-family:var(--ui-sans);font-size:var(--text-xs);font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}
    .featured-books-more:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
    .featured-books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
    .featured-book-card{
      display:flex;flex-direction:column;gap:9px;min-width:0;padding:16px 16px 13px;
      background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;
      transition:transform var(--transition-base) ease,border-color var(--transition-base) ease;
    }
    .featured-book-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
    .featured-book-num{font-family:var(--ui-sans);font-size:var(--text-2xs);font-weight:700;letter-spacing:.16em;color:var(--accent)}
    .featured-book-title{
      margin:0;font-family:var(--serif);font-weight:600;font-size:var(--text-base);line-height:1.5;color:var(--ink);
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    .featured-book-meta{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--line);font-family:var(--ui-sans);font-size:var(--text-xs);color:var(--ink-mute)}
    .featured-book-author{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .featured-book-words{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}

    /* ---------- Sections ---------- */
    .section{margin-bottom:24px;padding-top:4px}
    #create{scroll-margin-top:104px}

    /* ---------- Forms ---------- */
    .form-group{margin-bottom:14px}
    .form-header{margin-bottom:7px}
    .form-label{display:block;font-family:var(--ui-sans);font-weight:600;font-size:var(--text-sm,.875rem);color:var(--ink);letter-spacing:-.01em}
    .form-label .required,.required{color:var(--accent);margin-left:3px;font-weight:700}
    .form-help{
      margin:4px 0 0;font-family:var(--ui-sans);font-size:var(--text-xs,.75rem);color:var(--ink-mute);
      line-height:1.5;letter-spacing:0;
    }
    .form-input,.form-textarea,.form-select{
      width:100%;min-height:42px;font-family:var(--ui-sans);font-size:var(--text-base,1rem);font-weight:500;line-height:1.55;color:var(--ink);
      background-color:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm);
      padding:8px 12px;transition:border-color var(--transition-fast),background var(--transition-fast);outline:none;
      box-shadow:none;
      -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal;
    }
    .form-input:hover,.form-textarea:hover,.form-select:hover{border-color:var(--line-strong);background-color:var(--paper-3)}
    .form-textarea{resize:vertical;min-height:100px;line-height:1.65;font-family:var(--ui-sans);font-size:var(--text-sm)}
    .form-input::placeholder,.form-textarea::placeholder{
      color:color-mix(in srgb,var(--ink-mute) 82%,var(--paper));
      font-family:var(--ui-sans);font-size:var(--text-sm);font-weight:400;letter-spacing:0;
      line-height:inherit;opacity:1;
    }
    .form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--accent);background:var(--paper-2)}
    .form-select{
      font-size:var(--text-sm);font-weight:500;line-height:1.45;cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:38px;text-overflow:ellipsis;
      letter-spacing:0;font-variant-numeric:tabular-nums;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238B826F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-position:right 12px center;background-repeat:no-repeat;background-size:12px;
    }
    .form-select option,select option{
      font-family:var(--ui-sans);font-size:var(--text-sm);font-weight:400;line-height:1.45;color:var(--ink);background:var(--paper);
    }
    .form-select optgroup,select optgroup{font-family:var(--ui-sans);font-size:var(--text-xs);font-weight:700;color:var(--ink-mute);background:var(--paper-3)}
    .form-control-stack{display:flex;flex-direction:column;gap:10px}
    .form-custom-input{display:none}
    .form-custom-input.is-visible{display:block}
    .form-custom-input .form-input{
      min-height:48px;
      border-style:dashed;
      border-color:color-mix(in srgb,var(--accent) 20%,var(--line-strong));
      background:color-mix(in srgb,var(--paper-2) 88%,var(--accent-soft));
    }
    .form-custom-note{
      margin:0;
      font-size:var(--text-xs,.75rem);
      line-height:1.5;
      color:var(--ink-mute);
    }
    .form-error{margin:6px 0 0;font-size:var(--text-xs);color:var(--accent);font-weight:600;display:none}
    #apiKey,#apiBase,#model{
      font-family:var(--ui-sans);font-size:var(--text-sm);font-weight:500;letter-spacing:0;
      font-variant-numeric:tabular-nums;
    }
    select,select option,input,textarea,button{font-family:var(--ui-sans)}
    input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
      -webkit-text-fill-color:var(--ink);
      -webkit-box-shadow:0 0 0 1000px var(--paper-2) inset;
      caret-color:var(--ink);
      transition:background-color 9999s ease-out 0s;
    }

    /* ---------- Collapsible ---------- */
    .collapsible-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
    .collapsible-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;cursor:pointer;transition:background var(--transition-fast);user-select:none}
    .collapsible-header:hover{background:var(--paper-3)}
    .collapsible-title{font-family:var(--sans);font-weight:700;font-size:var(--text-sm,.875rem);color:var(--ink)}
    .privacy-notice{display:block;margin-top:4px;font-size:var(--text-xs,.75rem);color:var(--ink-mute);line-height:1.5}
    .collapsible-icon{font-size:var(--text-2xs);color:var(--ink-mute);transition:transform var(--transition-base)}
    .collapsible-icon.open{transform:rotate(180deg)}
    .collapsible-content{display:none;border-top:1px solid var(--line)}
    .collapsible-content.open{display:block;animation:slideDown var(--transition-base) ease}
    .collapsible-body{padding:18px}

    /* ---------- API config ---------- */
    .api-config-panel{margin-bottom:24px}
    .api-config-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .api-inline-field{display:flex;flex-direction:column;gap:6px;min-width:0}
    .api-inline-field-builtin{grid-column:1/-1}
    .api-inline-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
    .api-inline-label{font-family:var(--ui-sans);font-weight:600;font-size:var(--text-sm,.875rem);color:var(--ink);letter-spacing:-.01em}
    .api-inline-note{
      margin:0;font-family:var(--ui-sans);font-size:var(--text-xs,.75rem);color:var(--ink-mute);
      line-height:1.5;letter-spacing:0;
    }
    .api-inline-note-badges{display:flex;gap:6px;flex-wrap:wrap}
    .api-meta-chip{font-family:var(--ui-sans);font-size:var(--text-2xs,.6875rem);letter-spacing:.02em;text-transform:uppercase;color:var(--accent-2);background:var(--paper-3);border:1px solid var(--line-strong);border-radius:999px;padding:3px 9px;font-variant-numeric:tabular-nums}
    .api-meta-chip.quota{color:var(--accent)}
    .api-field-compact{margin-bottom:0}
    .empty-state-note{
      margin:0;padding:var(--spacing-8) var(--spacing-5);text-align:center;font-family:var(--ui-sans);
      font-size:var(--text-sm);line-height:1.65;color:var(--ink-mute);
    }
    /* 任务空状态：轻量卡片而非灰色块 */
    #tasksList, #noActiveTasks {
      background: transparent !important;
      border: 1px dashed var(--line-strong);
      border-radius: var(--radius);
      padding: 0 !important;
      min-height: auto !important;
    }

    /* ---------- Book topic / grid ---------- */
    .home-book-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:8px;align-items:stretch}
    .home-book-grid>.form-group{display:flex;flex-direction:column;margin-bottom:0}
    .home-book-grid>.form-group>.form-input,
    .home-book-grid>.form-group>input,
    .home-book-grid>.form-group>.form-control-stack{margin-top:auto}
    /* 创作参数区精简：去掉帮助文字、精选选项徽章、自定义说明，label 内联 */
    .home-book-grid .form-help{display:none}
    .home-book-grid .form-custom-note{display:none}
    .home-book-grid .form-header{margin-bottom:4px}
    .home-book-grid .form-label{font-size:var(--text-xs);color:var(--ink-mute);font-weight:600}
    /* 原生下拉框：与全站 select / custom-select 风格统一 */
    .home-native-select{
      width:100%;min-height:38px;padding:8px 36px 8px 12px;
      border:1px solid var(--line-strong);border-radius:var(--radius-sm);
      background:var(--paper-2);color:var(--ink);
      font-family:var(--ui-sans);font-size:var(--text-sm);font-weight:500;line-height:1.45;
      cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;text-overflow:ellipsis;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238B826F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-position:right 12px center;background-repeat:no-repeat;
      transition:border-color var(--transition-base),background var(--transition-base),box-shadow var(--transition-base);
    }
    .home-native-select:hover{border-color:var(--ink-mute);background:var(--paper)}
    .home-native-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
    .home-native-select option{font-family:var(--ui-sans);font-size:var(--text-sm);color:var(--ink);background:var(--paper-2)}
    .home-advanced-panel{margin:14px 0}
    .home-inline-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
    .clear-settings-link{font-family:var(--ui-sans);font-size:var(--text-xs);font-weight:500;color:var(--ink-mute);background:none;border:none;cursor:pointer;padding:6px 4px;border-radius:var(--radius-sm);transition:color var(--transition-fast)}
    .clear-settings-link:hover{color:var(--err)}

    /* ---------- Buttons ---------- */
    .btn{
      font-family:var(--sans);font-weight:700;font-size:var(--text-sm);cursor:pointer;border:1px solid transparent;
      border-radius:var(--radius-md);padding:12px 22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
      transition:transform var(--transition-fast) cubic-bezier(.2,.7,.2,1),box-shadow var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);
      text-decoration:none;
    }
    .btn:active{transform:translateY(0)}
    .btn-sm{font-size:var(--text-xs);padding:8px 14px;border-radius:var(--radius-sm)}
    .btn-primary{background:var(--accent);color:var(--paper-2);box-shadow:0 10px 22px -12px var(--accent)}
    .btn-primary:hover{background:var(--accent-ink);transform:translateY(-2px);box-shadow:0 16px 30px -14px var(--accent)}
    .btn-secondary{background:var(--paper);color:var(--ink);border-color:var(--line-strong)}
    .btn-secondary:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
    .btn-success{background:var(--accent-2);color:var(--paper-2);box-shadow:0 10px 22px -12px var(--accent-2)}
    .btn-success:hover{filter:brightness(1.06);transform:translateY(-2px)}
    .btn-danger{background:transparent;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
    .btn-danger:hover{background:var(--accent);color:var(--paper-2)}
    .btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}

    /* ---------- Spinner ---------- */
    .spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line-strong);border-top-color:var(--accent);animation:spin .8s linear infinite}
    .spinner-sm{width:16px;height:16px;border-width:2px}

    /* ---------- Outline preview ---------- */
    .outline-preview{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:22px;color:var(--ink-soft)}
    .outline-preview h3{font-family:var(--serif);font-weight:600;font-size:var(--text-2xl);color:var(--ink);margin:0 0 10px}
    .outline-preview h4{font-family:var(--sans);font-weight:700;font-size:var(--text-base);color:var(--ink);margin:18px 0 10px}
    .outline-preview strong{color:var(--ink)}

    /* ---------- Alerts ---------- */
    .alert{border-radius:var(--radius);padding:14px 16px;font-size:var(--text-sm);line-height:1.6;display:none}
    .alert-info{background:var(--color-info-bg);border-left:4px solid var(--accent-2);color:var(--ink-soft)}
    .alert-success{background:var(--ok-soft);border-left:4px solid var(--ok);color:var(--ink-soft)}
    .alert-error{background:var(--err-soft);border-left:4px solid var(--err);color:var(--ink-soft)}
    .alert-warning{background:var(--warn-soft);border-left:4px solid var(--warn);color:var(--ink-soft)}

    /* ---------- Progress / tasks ---------- */
    .section-title{font-family:var(--sans);font-weight:700;font-size:var(--text-base);color:var(--ink);margin:0 0 16px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
    .section-title::before{content:"";width:3px;height:18px;background:var(--accent);border-radius:2px;flex:none}
    .progress-section{display:none}
    .progress-bar,.task-progress-bar{position:relative;flex:1;height:6px;background:var(--paper-3);border:1px solid var(--line);border-radius:999px;overflow:hidden}
    .progress-fill,.task-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));color:transparent;font-size:0;border-radius:999px;transition:width .4s ease;min-width:2px;position:relative;overflow:hidden}
    .progress-fill::after,.task-progress-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shimmer 1.8s infinite}
    .progress-row,.task-progress-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;margin:0}
    .progress-label,.task-progress-label{font-family:var(--ui-sans);font-size:var(--text-2xs);font-weight:500;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
    .task-card{display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-xs);transition:border-color var(--transition-fast) ease,box-shadow var(--transition-fast) ease,transform var(--transition-fast) ease}
    .task-card:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:var(--shadow-sm);transform:translateY(-1px)}
    .task-card>*{margin:0}
    .task-card.completed{border-left:3px solid var(--ok)}
    .task-card.generating{border-left:3px solid var(--accent)}
    .task-card.partial{border-left:3px solid var(--warn)}
    .task-card.failed,.task-card.stalled{border-left:3px solid var(--err)}
    .task-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
    .task-title{flex:1 1 auto;min-width:0;font-family:var(--serif);font-weight:600;font-size:var(--text-sm);line-height:1.35;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .task-header-right{flex:0 0 auto;display:flex;align-items:center;gap:8px;max-width:min(50%,280px);flex-wrap:wrap;justify-content:flex-end}
    .task-header-right>span:not(.task-status){font-family:var(--ui-sans);font-size:var(--text-2xs);color:var(--ink-mute);white-space:nowrap}
    .task-status{font-family:var(--ui-sans);font-size:var(--text-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--paper-3);color:var(--ink-soft);border:1px solid var(--line-strong);white-space:nowrap}
    .task-status.completed{color:var(--ok);background:var(--ok-soft);border-color:transparent}
    .task-status.generating{color:var(--accent);background:var(--accent-soft);border-color:transparent;position:relative;padding-left:14px}
    .task-status.generating::before{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite}
    .task-status.failed,.task-status.stalled{color:var(--err);background:var(--err-soft);border-color:transparent}
    .task-status.partial{color:var(--warn);background:var(--warn-soft);border-color:transparent}
    .task-subtitle{font-family:var(--ui-sans);font-size:var(--text-xs);color:var(--ink-soft);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
    .task-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--ui-sans);font-size:var(--text-2xs);color:var(--ink-mute);font-variant-numeric:tabular-nums}
    .task-meta>span{display:inline-flex;align-items:center;gap:4px}
    .task-meta>span:not(:last-child)::after{content:"·";margin-left:4px;color:var(--line-strong);font-weight:700}
    .task-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0}
    .task-action-btn{font-family:var(--ui-sans);font-weight:600;font-size:var(--text-xs);cursor:pointer;border-radius:var(--radius-sm);padding:5px 10px;border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft);transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast);white-space:nowrap}
    .task-action-btn:hover{color:var(--ink);background:var(--paper-3);border-color:var(--ink-mute)}
    .task-action-btn.primary{background:var(--accent);color:var(--paper-2);border-color:var(--accent);box-shadow:0 4px 10px -4px color-mix(in srgb,var(--accent) 40%,transparent)}
    .task-action-btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
    .task-action-btn.secondary{border-color:transparent;background:transparent;color:var(--ink-mute);padding-left:6px;padding-right:6px}
    .task-action-btn.secondary:hover{color:var(--accent);background:var(--accent-soft)}
    .task-stalled-warning{margin:0;font-size:var(--text-xs);color:var(--warn);background:var(--warn-soft);border-radius:var(--radius-sm);padding:6px 10px}
    .task-error-banner{margin:0;font-size:var(--text-xs);color:var(--err);background:var(--err-soft);border-radius:var(--radius-sm);padding:6px 10px;line-height:1.5}
    .task-logs-panel{display:none;margin:0;font-family:var(--mono);font-size:var(--text-2xs);line-height:1.55;color:var(--ink-soft);background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;max-height:220px;overflow:auto;white-space:pre-wrap}
    .task-logs-panel.open{display:block}
    @keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

    /* ---------- Three-act create flow ---------- */
    .stage-steps{display:flex;align-items:center;gap:0;margin:0 0 22px;list-style:none;padding:0}
    .stage-step{display:flex;align-items:center;gap:8px;flex:0 0 auto}
    .stage-step:not(:last-child)::after{content:"";width:36px;height:1px;background:var(--line-strong);margin:0 14px}
    .stage-num{font-family:var(--serif);font-weight:600;font-size:var(--text-sm);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line-strong);color:var(--ink-mute);background:var(--paper);flex:none;transition:all var(--transition-base) ease}
    .stage-label{font-family:var(--ui-sans);font-size:var(--text-xs);color:var(--ink-mute);font-weight:500}
    .stage-step.is-active .stage-num{background:var(--accent);color:var(--paper-2);border-color:var(--accent);box-shadow:0 2px 8px -2px color-mix(in srgb,var(--accent) 50%,transparent)}
    .stage-step.is-active .stage-label{color:var(--ink);font-weight:600}
    .stage-step.is-done .stage-num{background:var(--ok-soft);color:var(--ok);border-color:transparent}
    .stage-step.is-done .stage-label{color:var(--ink-soft)}
    .stage-panel{animation:stageFade var(--transition-slow)}
    @keyframes stageFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    /* outline chapter list — serif book feel */
    .chapter-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
    .chapter-item{display:flex;gap:12px;padding:10px 14px;background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-sm);transition:border-color var(--transition-fast)}
    .chapter-item:hover{border-left-color:var(--gold)}
    .chapter-no{font-family:var(--serif);font-weight:600;font-size:var(--text-sm);color:var(--accent);flex:none;min-width:1.6rem}
    .chapter-title-text{font-family:var(--serif);font-weight:600;font-size:var(--text-sm);color:var(--ink);line-height:1.35;margin:0 0 2px}
    .chapter-summary{font-size:var(--text-xs);color:var(--ink-soft);line-height:1.5;margin:0}
    .outline-title{font-family:var(--serif);font-weight:600;font-size:var(--text-2xl);color:var(--ink);margin:0 0 10px;line-height:1.3}
    .outline-intro{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.7;margin:0 0 16px}
    .outline-meta{font-family:var(--ui-sans);font-size:var(--text-xs);color:var(--accent);margin:0 0 18px;letter-spacing:.02em}
    .chapter-dir-title{font-family:var(--serif);font-weight:600;font-size:var(--text-base);color:var(--ink);margin:0 0 12px}
    .outline-actions{margin-top:var(--spacing-5);display:flex;gap:var(--spacing-3);flex-wrap:wrap}

    /* ---------- Export ---------- */
    .export-section{display:none;background:linear-gradient(120deg,var(--ok-soft),transparent 70%),var(--paper);border:1px solid color-mix(in srgb,var(--ok) 30%,var(--line));border-radius:var(--radius);padding:18px;text-align:center;margin-top:10px}
    .export-section h3{font-family:var(--serif);font-weight:600;font-size:var(--text-2xl);color:var(--ink);margin:0 0 8px}

    /* ---------- Toast ---------- */
    #toastContainer{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px;max-width:min(92vw,360px)}
    .toast{font-family:var(--sans);font-weight:600;font-size:var(--text-sm);line-height:1.45;color:var(--ink);
      background:var(--paper-2);border:1px solid var(--line-strong);border-left:4px solid var(--ink-mute);
      border-radius:var(--radius-md);padding:13px 16px;box-shadow:var(--shadow-lg);cursor:pointer}
    .toast-success{border-left-color:var(--ok)}
    .toast-error{border-left-color:var(--err)}
    .toast-info{border-left-color:var(--accent-2)}
    .toast-warning{border-left-color:var(--warn)}
    .toast-enter{animation:toastIn .3s cubic-bezier(.2,.7,.2,1)}
    .toast-exit{animation:toastOut .3s ease forwards}

    /* ---------- Bottom nav (mobile) ---------- */
    .bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:200;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
    .bottom-nav-items{display:flex;max-width:var(--maxw);margin:0 auto}
    .bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 10px;text-decoration:none;color:var(--ink-mute);font-size:var(--text-2xs);font-weight:600;transition:color var(--transition-fast),transform var(--transition-fast)}
    .bottom-nav-item:active{transform:scale(.9)}
    .bottom-nav-item.active{color:var(--accent)}
    .bottom-nav-icon{font-size:var(--text-lg)}

    /* ---------- Utilities ---------- */
    .flex{display:flex}
    .flex-col{flex-direction:column}
    .items-center{align-items:center}
    .gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
    .hidden{display:none!important}
    .admin-only{display:none}

    /* ---------- Keyframes ---------- */
    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
    @keyframes toastIn{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
    @keyframes toastOut{to{opacity:0;transform:translateX(40px) scale(.96)}}
    @keyframes fadeOut{to{opacity:0}}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
    @keyframes skeletonPulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
    @keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
    @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

    /* ---------- Override design-system .app-shell .hero* (specificity) ---------- */
    body.app-shell-home .hero-section{color:var(--ink);margin:0 -24px 28px;padding:0 24px;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px) saturate(1.1);border:0;border-bottom:1px solid var(--line);box-shadow:none}
    body.app-shell-home .hero-header{
      background:transparent;border:0;border-radius:0;box-shadow:none;
      padding:14px 0 12px;margin-bottom:0;display:grid;grid-template-columns:minmax(0,1fr);
      align-items:flex-start;gap:14px;
    }
    body.app-shell-home .hero-title{
      color:var(--ink);text-shadow:none;font-family:var(--serif);font-weight:600;
      line-height:1.16;text-wrap:balance;white-space:normal;overflow:visible;text-overflow:clip;
    }
    body.app-shell-home .hero-subtitle{
      color:var(--ink-mute);opacity:1;font-family:var(--ui-sans);font-size:var(--text-2xs);
      letter-spacing:.14em;text-transform:uppercase;font-weight:600;line-height:1.5;
      white-space:normal;max-width:100%;display:block;
    }
    body.app-shell-home .control-divider,body.app-shell-home .settings-divider{background:var(--line)}
    /* nav-btn/auth-btn/user-info-bar 已在主样式统一为克制纯文字风格，此处不再覆盖 */

    /* Masthead: keep the title on its own line, controls neatly on a second row.
       Prevents the cramped look when logged-in users (esp. admin) have many controls. */
    body.app-shell-home .hero-title-group{
      width:100%;padding-right:0;gap:8px;max-width:min(100%,46rem);align-items:flex-start;
    }
    body.app-shell-home .hero-controls{width:100%;justify-content:flex-end;flex-wrap:wrap;row-gap:14px}
    @media (max-width:1100px){
      body.app-shell-home .hero-title-group{gap:5px}
      body.app-shell-home .hero-subtitle{letter-spacing:.08em}
    }

    /* ---------- Responsive ---------- */
    @media (max-width:820px){
      .container.container-wide{padding:0 16px}
      .hero-section{margin:0 -16px 12px;padding:0 16px}
      .main-card{padding:20px 16px}
      .api-config-grid,.home-book-grid{grid-template-columns:1fr}
      body.app-shell-home .hero-subtitle{display:none}
      .bottom-nav{display:block}
      body.app-shell-home{padding-bottom:84px}
      /* 移动端：标题+控件挤到同一行，省掉整行高度 */
      body.app-shell-home .hero-header{
        display:flex !important;flex-direction:row !important;flex-wrap:nowrap;align-items:center;
        padding:8px 0;gap:8px;
      }
      body.app-shell-home .hero-title{font-size:var(--text-xl);white-space:nowrap}
      body.app-shell-home .hero-controls{width:auto;flex-shrink:0;row-gap:0}
      /* 抵消 design-system ≤768px 的 flex:1 1 120px / width:100% 残留 */
      body.app-shell-home .hero-controls .auth-buttons{width:auto;gap:4px;justify-content:flex-start}
      body.app-shell-home .hero-controls .user-info-bar{width:auto}
      body.app-shell-home .hero-controls .auth-btn{flex:0 0 auto;font-size:var(--text-xs)}
      /* 主 CTA 胶囊保住横向留白（特异性需压过通用收缩） */
      body.app-shell-home .hero-controls .auth-btn-primary{padding:6px 14px}
      body.app-shell-home .hero-controls .auth-btn-ghost{padding:6px 8px}
      /* 登录态移动端瘦身：只留配额芯片+头像,藏用户名/角色/箭头 */
      body.app-shell-home .hero-controls .user-name,
      body.app-shell-home .hero-controls .user-role,
      body.app-shell-home .hero-controls .account-caret{display:none}
      body.app-shell-home .hero-controls .account-trigger{padding:2px;cursor:pointer}
      body.app-shell-home .hero-controls .user-avatar{width:26px;height:26px;font-size:var(--text-xs)}
      /* 语言胶囊固定在 controls 末尾(抵消 design-system ≤768px 的 order:-1) */
      body.app-shell-home .hero-controls .settings-panel-inline{order:0}
      .home-hero{padding:12px 0 10px}
      .home-hero-sub{font-size:var(--text-sm)}
      .featured-books-grid{grid-template-columns:repeat(2,1fr)}
      /* 手机端 header 瘦身:底部导航已含 首页/图书馆/关于/主题,顶部藏掉冗余的导航按钮、暗黑开关、主题切换器 */
      body.app-shell-home .hero-controls .nav-buttons,
      body.app-shell-home .settings-panel-inline .toggle-switch,
      body.app-shell-home .hero-controls .theme-segmented{display:none}
    }
    @media (max-width:520px){
      .hero-controls{gap:8px}
      .featured-books-grid{grid-template-columns:1fr}
      .home-inline-actions .btn{flex:1 1 auto}
      .nav-btn span:not(.flag-icon){font-size:var(--text-xs)}
    }

    /* =====================================================
       Masthead 精修 · 高级感与严格对齐
       原则：控件行右对齐（与容器右边缘取齐）、细竖线分组、单一 32px 基线、一致 hover。
       ===================================================== */
    @media (min-width:821px){
      /* 控件行右对齐：报头两行布局下整组控件贴容器右边缘，
         左对齐会在宽屏留出大片右侧空白、整行失衡 */
      body.app-shell-home .hero-controls{
        justify-content:flex-end;
        column-gap:0;
        row-gap:12px;
      }

      /* 三组控件用 1px 竖线分隔：导航 | 账户 | 设置。
         注意 padding 须整体归零再补左侧 14px——.app-shell .user-info-bar 自带
         padding:4px 8px，只写 padding-left 会让上下各多 4px（访客栏 42px 的来源） */
      body.app-shell-home .hero-controls .user-info-bar,
      body.app-shell-home .hero-controls .settings-panel-inline{
        position:relative;
        margin-left:14px;
        padding:0 0 0 14px;
        border:0;
      }
      body.app-shell-home .hero-controls .user-info-bar::before,
      body.app-shell-home .hero-controls .settings-panel-inline::before{
        content:"";
        position:absolute;
        left:0;top:50%;
        transform:translateY(-50%);
        width:1px;height:16px;
        background:var(--line);
      }

      /* 竖线分组内的胶囊组件自带内边距，须清零避免撑高控件行、拉大间距 */
      body.app-shell-home .hero-controls .settings-panel-inline .settings-panel{padding:0}

      /* 导航按钮与胶囊控件统一 32px 基线、统一圆角；初始克制，hover 显形
         （min-height 必须同步重置：design-system 的 .app-shell .nav-btn
          min-height:36px 会顶破这里的 height:32px） */
      body.app-shell-home .hero-controls .nav-btn{
        height:var(--hd-ctl-h,32px);
        min-height:32px;
        padding:0 11px;
        border-radius:var(--radius-md);
        border:1px solid transparent;
        box-sizing:border-box;
      }
      body.app-shell-home .hero-controls .nav-btn:hover{
        border-color:var(--line);
        background:var(--bg-tertiary);
        color:var(--ink);
      }
      body.app-shell-home .hero-controls .nav-btn .icon{
        width:15px;height:15px;
      }

      /* 登录/注册归入同一 32px 基线（访客态最显眼的两个按钮）——
         design-system 的 .app-shell .auth-btn min-height:36px 此前形成
         导航 36px / 按钮 36px / 胶囊 32px 的三档高度，是控件行错位的主因 */
      body.app-shell-home .hero-controls .auth-btn{
        height:var(--hd-ctl-h,32px);
        min-height:32px;
        padding:0 12px;
        border-radius:var(--radius-md);
        box-sizing:border-box;
      }
      body.app-shell-home .hero-controls .auth-btn-primary{padding:0 14px}
    }