:root{
    --ink:#2f2a26;
    --paper:#f7f2e8;
    --paper-2:#efe7d7;
    --card:#fffdf8;
    --line:#e6ddcd;
    --accent:#e09a3f;
    --accent-deep:#c9832a;
    --accent-ink:#5c3d17;
    --go:#5fa86b;
    --stop:#c65f4a;
    --muted:#8a8177;
    --badge:#d9b46a;
    --shadow-sm:0 2px 8px rgba(60,45,25,.06);
    --shadow-md:0 14px 40px rgba(60,45,25,.12);
    --shadow-lg:0 30px 70px rgba(60,45,25,.18);
    --serif:"Georgia","Songti SC","STSong","SimSun",serif;
    --sans:"PingFang SC","Microsoft YaHei","微软雅黑",system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased}
  .hidden{display:none !important}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  input,textarea,select{font-family:inherit;color:inherit}
  img{display:block;max-width:100%}

  /* ---------- 通用 ---------- */
  .wrap{max-width:1120px;margin:0 auto;padding:0 40px}
  .view{display:none}
  .view.active{display:block;animation:viewIn .62s cubic-bezier(.22,.8,.24,1) both}
  @keyframes viewIn{from{opacity:0;transform:translateY(64px)}to{opacity:1;transform:translateY(0)}}

  .kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 14px}
  h1.hero-title{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;line-height:1.1;margin:0 0 20px}
  .lead{font-size:18px;color:var(--muted);max-width:520px;margin:0 0 32px;line-height:1.8}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;
    padding:13px 24px;border-radius:12px;transition:.2s transform,.2s box-shadow,.2s background;transform:translateY(0);
    min-height:44px}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--accent);color:#3b2a12;box-shadow:0 6px 18px rgba(224,154,63,.34)}
  .btn-primary:hover{background:#eda94b;box-shadow:0 12px 26px rgba(224,154,63,.44);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
  .btn-ghost:hover{color:var(--ink);border-color:var(--muted)}
  .btn-go{background:var(--go);color:#fff}
  .btn-go:hover{filter:brightness(1.05)}
  .btn-sm{padding:9px 15px;font-size:13px;border-radius:10px}
  .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

  /* ---------- 左侧导航（首页隐藏） ---------- */
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:248px;z-index:30;
    background:rgba(250,246,238,.92);backdrop-filter:blur(12px);border-right:1px solid var(--line);
    display:flex;flex-direction:column;padding:34px 22px 26px;gap:30px}
  .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;letter-spacing:.01em}
  .brand .mark{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));display:grid;place-items:center;color:#3b2a12;font-size:16px}
  .demo-badge{font-size:11px;font-weight:800;letter-spacing:.08em;background:var(--badge);color:#3c3124;padding:4px 10px;border-radius:999px;width:fit-content}
  .side-nav{display:flex;flex-direction:column;gap:10px}
  .side-nav button{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--muted);
    padding:13px 16px;border-radius:13px;transition:.18s;text-align:left;position:relative}
  .side-nav button:hover{color:var(--ink);background:var(--paper-2)}
  .side-nav button.on{color:var(--ink);background:#fff;box-shadow:var(--shadow-sm);font-weight:800}
  .side-nav button.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:3px;background:var(--accent)}
  .side-foot{margin-top:auto;font-size:12px;color:var(--muted);line-height:1.7}
  .content{margin-left:248px}

  /* ---------- 首页 ---------- */
  #viewHome{position:relative;min-height:100vh;overflow:hidden;
    background-image:linear-gradient(100deg, rgba(247,242,232,.97) 4%, rgba(247,242,232,.86) 30%, rgba(247,242,232,.34) 60%, rgba(247,242,232,.08) 100%),
      linear-gradient(0deg, rgba(247,242,232,.35), rgba(247,242,232,.35)),
      url("img/bg.jpg");
    background-size:cover;background-position:right center}
  #viewHome.active{display:flex;align-items:center}
  .home-demo{position:absolute;top:28px;left:36px;z-index:5;font-size:11px;font-weight:800;letter-spacing:.08em;
    background:rgba(255,253,248,.7);backdrop-filter:blur(6px);color:#5c3d17;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.6)}
  .home-inner{position:relative;z-index:3;max-width:1120px;margin:0 auto;width:100%;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:48px}
  .home-copy{max-width:620px}
  .home-copy .kicker{color:var(--accent-ink)}
  .home-copy h1{font-size:clamp(46px,6.6vw,86px);font-family:var(--serif);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0 0 24px}
  .home-copy h1 em{font-style:normal;color:var(--accent-deep)}
  .home-copy .lead{font-size:19px;max-width:480px}
  .home-card{flex:0 0 300px;background:rgba(255,253,248,.82);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6);
    border-radius:22px;box-shadow:var(--shadow-lg);padding:28px;animation:float 6s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .home-card .hc-k{font-size:11px;letter-spacing:.16em;color:var(--muted);font-weight:700;text-transform:uppercase;margin-bottom:16px}
  .home-card .minis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
  .mini{aspect-ratio:3/4;border-radius:10px;background:linear-gradient(160deg,#f2e9d6,#e9dcc0);position:relative;overflow:hidden}
  .mini::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(0deg,rgba(90,70,40,.28),transparent)}
  .home-card .hc-t{font-weight:800;font-size:16px}
  .home-card .hc-s{font-size:13px;color:var(--muted);margin-top:3px}
  .enter-zone{position:absolute;left:0;right:0;bottom:0;height:38%;z-index:4;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:36px}
  .enter-hint{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink);font-size:14px;font-weight:600;animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
  .enter-hint .arr{font-size:20px}

  /* ---------- 页头 ---------- */
  .page-head{padding:56px 0 28px}
  .page-head h2{font-family:var(--serif);font-size:clamp(32px,4.2vw,48px);font-weight:700;margin:0 0 10px;letter-spacing:-.01em;line-height:1.15}
  .page-head p{color:var(--muted);margin:0;font-size:16px}

  /* ---------- 卡片 ---------- */
  .card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);padding:26px}
  .card h3{font-size:16px;font-weight:800;margin:0 0 18px;display:flex;align-items:center;gap:9px}
  .step-no{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:var(--paper-2);color:var(--accent-deep);font-size:13px;font-weight:800;display:grid;place-items:center}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:7px;letter-spacing:.02em}
  .input,.textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:15px;transition:.18s border,.18s box-shadow}
  .input:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,154,63,.16)}
  .textarea{min-height:92px;resize:vertical}
  .hint{font-size:12px;color:var(--muted)}

  /* 日历 */
  .cal-layout{display:grid;grid-template-columns:1fr 348px;gap:26px;align-items:start}
  .cal-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
  .cal-title{font-family:var(--serif);font-size:24px;font-weight:700}
  .cal-toolbar .mnav{display:flex;gap:6px}
  .mnav button{width:36px;height:36px;border-radius:10px;background:var(--paper-2);font-size:16px;display:grid;place-items:center;transition:.15s}
  .mnav button:hover{background:var(--line)}
  .cal-head,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .cal-head span{font-size:12px;color:var(--muted);text-align:center;padding:4px 0;font-weight:700}
  .day{min-height:76px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px;cursor:pointer;transition:.15s;position:relative}
  .day:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
  .day.dim{opacity:.32}
  .day.today{outline:2px solid var(--accent);outline-offset:-1px}
  .day.sel{background:#fff7ea;border-color:var(--accent)}
  .day .num{font-size:12px;font-weight:800;color:var(--muted)}
  .day .ev{font-size:11px;color:var(--accent-deep);line-height:1.35;margin-top:5px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .day .dot{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

  /* AI创界 */
  .ai-head{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
  .ai-head-copy{max-width:660px}
  .ai-head em{font-style:normal;color:var(--accent-deep)}
  .ai-head-art{position:relative;width:214px;flex:none;margin-top:8px}
  .aha-panel{width:132px;height:142px;border:2.5px solid var(--ink);border-radius:14px;background:linear-gradient(180deg,#dcecf3,#f3e0c9);
    transform:rotate(-5deg);box-shadow:6px 8px 0 rgba(47,42,38,.08);position:relative;overflow:hidden}
  .aha-panel::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(47,42,38,.12) 1.5px,transparent 1.8px);background-size:12px 12px}
  .aha-cloud{position:absolute;left:24px;top:38px;width:52px;height:20px;background:#fff;border:2.5px solid var(--ink);border-radius:999px}
  .aha-cloud::before{content:"";position:absolute;left:8px;top:-16px;width:26px;height:26px;background:#fff;border:2.5px solid var(--ink);border-radius:50%}
  .aha-cloud::after{content:"";position:absolute;left:30px;top:-10px;width:20px;height:20px;background:#fff;border:2.5px solid var(--ink);border-radius:50%}
  .aha-sun{position:absolute;right:-3px;top:-9px;width:40px;height:40px;border-radius:50%;background:var(--accent);opacity:.85}
  .aha-bubble{position:absolute;left:96px;top:96px;background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:9px 14px;
    font-family:var(--serif);font-size:13px;line-height:1.55;transform:rotate(3deg);box-shadow:4px 5px 0 rgba(47,42,38,.08)}
  .aha-bubble::before{content:"";position:absolute;left:-14px;bottom:10px;border:7px solid transparent;border-right-color:var(--ink)}
  .aha-bubble::after{content:"";position:absolute;left:-9px;bottom:10px;border:6px solid transparent;border-right-color:#fff}
  .ai-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:26px;align-items:start;margin-bottom:70px}
  .ai-panel{padding:30px 32px}
  .ai-step{padding:6px 0}
  .ai-step+.ai-step{border-top:1px dashed var(--line);margin-top:18px;padding-top:22px}
  .ai-step-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  .ai-step-h h3{margin:0;font-size:17px;font-weight:800}
  .ai-sidenote{font-size:11.5px;color:var(--muted);margin-left:auto;text-align:right}
  .ai-drop{border:1.5px dashed #d5c6ab;border-radius:16px;background:linear-gradient(180deg,#fdfbf5,#faf5ea);padding:26px 18px;text-align:center;cursor:pointer;transition:.18s}
  .ai-drop:hover,.ai-drop.drag{border-color:var(--accent);background:#fffaf0;box-shadow:0 0 0 4px rgba(224,154,63,.12)}
  .ai-drop-plus{width:38px;height:38px;border-radius:50%;background:var(--paper-2);color:var(--accent-deep);display:grid;place-items:center;font-size:22px;margin:0 auto 10px;transition:.18s}
  .ai-drop:hover .ai-drop-plus,.ai-drop.drag .ai-drop-plus{background:var(--accent);color:#fff}
  .ai-drop-t{font-weight:700;font-size:14.5px}
  .ai-drop-s{font-size:12px;color:var(--muted);margin-top:4px}
  .ai-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
  .ai-thumb{position:relative;width:86px;height:86px;border-radius:12px;overflow:hidden;border:2px solid #fff;box-shadow:var(--shadow-sm);background:var(--paper-2)}
  .ai-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .ai-thumb .no{position:absolute;left:6px;top:6px;background:var(--ink);color:#fff;font-size:10px;font-weight:800;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
  .ai-thumb .x{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;background:rgba(47,42,38,.82);color:#fff;font-size:12px;display:grid;place-items:center;cursor:pointer;line-height:1}
  .ai-thumb .x:hover{background:var(--accent-deep)}
  .ai-ideas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
  .ai-idea{background:var(--paper-2);border:1px solid transparent;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--accent-ink);cursor:pointer;transition:.15s;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:inherit}
  .ai-idea:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}
  .ai-note{resize:vertical;min-height:76px;line-height:1.75}
  .ai-tones{display:flex;gap:10px;flex-wrap:wrap}
  .tone{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit}
  .tone i{width:14px;height:14px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.08)}
  .tone:hover{border-color:var(--accent)}
  .tone.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .ai-specs{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:16px}
  .ai-spec{width:88px;height:112px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--shadow-sm);position:relative;flex:none;padding:0;display:block}
  .ai-spec svg{display:block}
  .ai-spec .pos{position:absolute;left:6px;top:6px;font-size:9.5px;font-weight:800;color:var(--accent-deep);background:rgba(255,253,248,.85);padding:1px 5px;border-radius:6px}
  .ai-go{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
  .ai-main-btn{background:var(--ink);color:#fffdf8;font-weight:800;padding:14px 26px;border-radius:14px;font-size:15.5px;box-shadow:0 10px 24px rgba(47,42,38,.22)}
  .ai-main-btn:hover{background:var(--accent-deep);transform:translateY(-1px)}
  .ai-main-btn:disabled{background:#b8ac9c;box-shadow:none;cursor:default;transform:none}
  .ai-stage2{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-md);padding:22px 24px 20px;position:sticky;top:24px}
  .ai-stage-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
  .ai-stage-k{font-size:11px;letter-spacing:.18em;color:var(--muted);font-weight:800;text-transform:uppercase}
  .ai-tag{background:#fff7ea;border:1px solid #f0d9b0;color:var(--accent-deep);font-size:12px;font-weight:800;padding:3px 12px;border-radius:999px}
  .ai-frame{border:1px solid var(--line);border-radius:16px;background:#f6efe1;min-height:430px;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .ai-frame canvas,.ai-frame img{width:100%;height:auto;display:block;animation:aiIn .5s cubic-bezier(.22,.8,.3,1.1) both}
  @keyframes aiIn{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
  .ai-empty{text-align:center;color:var(--muted);padding:40px 20px}
  .ae-bubble{width:64px;height:46px;margin:0 auto 16px;border:2.5px solid #cdbfa6;border-radius:22px;display:grid;place-items:center;font-family:var(--serif);font-size:22px;color:#b7a98d;position:relative}
  .ae-bubble::before{content:"";position:absolute;left:12px;bottom:-12px;border:7px solid transparent;border-top-color:#cdbfa6}
  .ae-bubble::after{content:"";position:absolute;left:13px;bottom:-9px;border:5px solid transparent;border-top-color:#f6efe1}
  .ai-empty p{font-size:14.5px;line-height:1.9}
  .ai-empty p span{font-size:12.5px;color:#b7a98d}
  .ai-loading{width:100%;padding:36px 34px;text-align:left}
  .al-busy{display:flex;flex-direction:column;font-family:var(--serif);font-size:15.5px}
  .al-line{display:flex;align-items:center;gap:12px;padding:9px 0;color:#c4b69c;transition:.3s}
  .al-line .n{font-size:11px;letter-spacing:.1em;font-weight:700;width:34px;flex:none}
  .al-line.on{color:var(--ink)}
  .al-line.on::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:auto;animation:pulse 1s ease-in-out infinite}
  .al-bar{height:3px;border-radius:2px;background:var(--paper-2);margin-top:16px;overflow:hidden}
  .al-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-deep));transition:width .45s ease;width:0}
  .ai-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
  .ai-actions-note{margin:12px 2px 0}

  /* 自主绘世（原创作页） */
  .create-layout{display:grid;grid-template-columns:1fr 400px;gap:26px;align-items:start}
  .stack{display:flex;flex-direction:column;gap:22px}
  .series-list{display:flex;flex-wrap:wrap;gap:8px}
  .chip{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;transition:.15s;cursor:pointer}
  .chip:hover{border-color:var(--accent)}
  .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .chip .st{font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px}
  .chip .st.go{background:#e6f2e8;color:var(--go)}
  .chip .st.lock{background:#f7e7e1;color:var(--stop)}
  .chip.on .st.go{background:rgba(255,255,255,.2);color:#d9f0dc}
  .chip.on .st.lock{background:rgba(255,255,255,.2);color:#ffd9cf}
  .status-bar{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:14px}
  .status-pill{font-weight:800;padding:3px 11px;border-radius:999px;font-size:12px}
  .status-pill.go{background:#e6f2e8;color:var(--go)}
  .status-pill.lock{background:#f7e7e1;color:var(--stop)}
  .unlock-box{margin-top:12px;padding:14px 16px;background:#fdf3e7;border:1px solid #f0d9b0;border-radius:12px}
  .unlock-box .ub-t{font-weight:800;margin-bottom:6px}
  .unlock-box .ub-b{font-size:13px;color:var(--muted);line-height:1.75}
  .thumbs{display:flex;flex-wrap:wrap;gap:10px}
  .thumb{width:88px;aspect-ratio:1;border-radius:12px;border:2px solid transparent;overflow:hidden;position:relative;cursor:pointer;background:var(--paper-2);transition:.15s}
  .thumb img{width:100%;height:100%;object-fit:cover}
  .thumb.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,154,63,.18)}
  .thumb .check{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#3b2a12;display:none;place-items:center;font-size:12px;font-weight:800}
  .thumb.on .check{display:grid}
  .upload-btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;padding:11px 15px;border-radius:11px;border:1.5px dashed var(--accent);color:var(--accent-deep);cursor:pointer;transition:.15s}
  .upload-btn:hover{background:#fff7ea}
  .recs{display:flex;flex-wrap:wrap;gap:8px}
  .rec{font-size:13px;padding:7px 12px;border-radius:999px;background:var(--paper-2);color:var(--muted);cursor:pointer;transition:.15s}
  .rec.on{background:var(--ink);color:#fff}

  /* 结果/预览 */
  .gen-box{background:#fff;border:1px dashed var(--line);border-radius:18px;padding:30px;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .gen-box .empty{color:var(--muted);font-size:14px}
  .loader{width:36px;height:36px;border:3px solid var(--paper-2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px}
  @keyframes spin{to{transform:rotate(360deg)}}
  .syn-block{background:#fdf6ec;border:1px solid #f0d9b0;border-radius:12px;padding:13px 15px;align-self:stretch;text-align:left;margin-top:10px}
  .syn-k{font-size:11px;letter-spacing:.1em;color:var(--muted);font-weight:800;text-transform:uppercase;margin-bottom:6px}
  .syn-t{font-size:14.5px;line-height:1.75}
  .panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,180px));gap:12px;width:100%;justify-content:start;margin-top:16px}
  .panel{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .panel .img{background:linear-gradient(160deg,#f2e9d6,#e5d8ba);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .panel .img img{width:100%;height:auto;display:block}
  .panel .img .ph{min-height:150px;color:#a89a80;font-size:12px;display:grid;place-items:center;padding:12px}
  .result-meta{margin-top:16px;font-size:13px;color:var(--muted);width:100%;text-align:left}

  /* 查看页 */
  .books{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}
  .book{cursor:pointer;transition:.2s;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;text-align:center;box-shadow:var(--shadow-sm);position:relative}
  .book:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
  .book-cover{aspect-ratio:3/4;border-radius:12px;background:linear-gradient(160deg,#8a5a2b,#5c3d17);color:#f6e9d4;display:grid;place-items:center;margin-bottom:16px;font-family:var(--serif);font-size:18px;letter-spacing:.02em}
  .book-name{font-weight:800;font-size:15px}
  .book-sub{font-size:12px;color:var(--muted);margin-top:3px}
  /* 书本阅读器 */
  .book-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px}
  .bb-info{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .bb-t{font-family:var(--serif);font-size:20px;font-weight:700}
  .bb-s{font-size:12.5px;color:var(--muted)}
  .bb-pos{font-size:12px;color:var(--accent-deep);font-weight:800;background:#fff7ea;border:1px solid #f0d9b0;padding:2px 11px;border-radius:999px}
  .book-scene{position:relative;height:calc(100vh - 300px);min-height:540px;max-height:920px}
  .book-shadow{position:absolute;left:4%;right:4%;bottom:4px;height:70px;z-index:0;
    background:radial-gradient(50% 50% at 50% 50%,rgba(80,55,25,.4),rgba(80,55,25,0) 72%);filter:blur(16px)}
  .book-shell{position:absolute;top:0;bottom:26px;left:50%;transform:translateX(-50%);width:min(1200px,100%);perspective:2800px}
  .spread{position:absolute;inset:0}
  .spread::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:110px;transform:translateX(-50%);z-index:6;pointer-events:none;
    background:linear-gradient(90deg,rgba(110,80,45,0) 0%,rgba(110,80,45,.14) 42%,rgba(110,80,45,.22) 50%,rgba(110,80,45,.14) 58%,rgba(110,80,45,0) 100%)}
  .page{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,.06,.22,.98);z-index:1}
  .page-left{left:0;transform-origin:right center}
  .page-right{right:0;transform-origin:left center}
  .page.turning,.page.turning-back{z-index:40}
  .page-right.turning{transform:rotateY(-180deg)}
  .page-left.turning-back{transform:rotateY(180deg)}
  .page-right.opening{animation:openPage 1.15s cubic-bezier(.32,.6,.2,1) both}
  @keyframes openPage{0%{transform:rotateY(-160deg);z-index:40}100%{transform:rotateY(0);z-index:40}}
  .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
  .face.front{background:#fdfaf2;display:flex;flex-direction:column}
  .face.back{transform:rotateY(180deg);background:linear-gradient(180deg,#f7f0e1,#eee3c9);border-radius:3px}
  .page-left .face.front{border-radius:8px 3px 3px 8px;box-shadow:inset -18px 0 26px -20px rgba(100,70,35,.32),-9px 4px 18px -8px rgba(80,55,25,.28)}
  .page-right .face.front{border-radius:3px 8px 8px 3px;box-shadow:inset 18px 0 26px -20px rgba(100,70,35,.32),9px 4px 18px -8px rgba(80,55,25,.28)}
  .face.front::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:radial-gradient(rgba(120,95,60,.05) 1px,transparent 1.5px);background-size:14px 14px}
  .pg-head{display:flex;align-items:center;gap:10px;padding:20px 24px 12px;border-bottom:2.5px solid var(--ink);position:relative;z-index:2}
  .pg-ep{background:var(--ink);color:#fdfaf2;font-size:10.5px;font-weight:800;letter-spacing:.14em;padding:4px 10px;border-radius:6px;white-space:nowrap}
  .pg-t{font-family:var(--serif);font-size:16.5px;font-weight:700;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pg-date{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
  .pg-syn{margin:14px 20px 0;background:#fffef8;border:1px solid #ecdfc6;border-left:5px solid var(--accent);border-radius:8px;
    padding:10px 14px;max-height:26%;overflow:auto;box-shadow:var(--shadow-sm);flex:none}
  .pg-syn-k{display:block;font-size:10px;letter-spacing:.18em;color:var(--accent-deep);font-weight:800}
  .pg-syn p{font-family:var(--serif);font-size:14.5px;line-height:1.85;margin:5px 0 0;color:#4a3f33}
  .pg-imgs{flex:1;min-height:0;margin:12px 20px 34px;display:grid;gap:7px;grid-auto-rows:minmax(0,1fr)}
  .shot{position:relative;background:#efe4c8;border:1px solid #d9c9a3;border-radius:4px;box-shadow:0 2px 8px rgba(80,55,25,.1);
    margin:0;display:block;cursor:zoom-in;overflow:hidden;min-height:0;transition:.18s}
  .shot:hover{box-shadow:0 6px 18px rgba(80,55,25,.24)}
  .shot img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
  .zoom-tip{position:absolute;left:10px;top:8px;font-size:15px;color:rgba(47,42,38,.6);opacity:0;transition:.18s;z-index:2;text-shadow:0 1px 2px rgba(255,255,255,.6)}
  .shot:hover .zoom-tip{opacity:1}
  .shot-no{position:absolute;right:8px;bottom:8px;background:rgba(47,42,38,.8);color:#fff;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:999px;z-index:2}
  .shot .phd{position:absolute;inset:3px;background:repeating-linear-gradient(45deg,#f4ecda 0 9px,#eee4cb 9px 18px);
    display:grid;place-items:center;color:#b3a37e;font-size:11px;border-radius:3px}
  .pg-img-empty{display:grid;place-items:center;color:var(--muted);font-size:12px;border:1.5px dashed var(--line);border-radius:10px;min-height:60px}
  .face.tight .pg-head{padding:12px 16px 8px}
  .face.tight .pg-syn{max-height:20%;margin:10px 16px 0}
  .face.tight .pg-syn p{font-size:12.5px;line-height:1.6}
  .face.tight .pg-imgs{margin:10px 16px 30px;gap:6px}
  .pg-num{position:absolute;bottom:9px;font-family:var(--serif);font-size:11px;letter-spacing:.14em;color:#a3917a;z-index:2}
  .pg-num.nl{left:18px}
  .pg-num.nr{right:18px}
  .pg-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;gap:12px;
    background:linear-gradient(180deg,#fdfaf2,#f8f1e2)}
  .pg-empty-h{font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
  .pg-empty p{color:var(--muted);font-size:13px;line-height:1.9;margin:0}
  .halftone{width:130px;height:100px;background:radial-gradient(rgba(47,42,38,.16) 1.5px,transparent 1.6px);background-size:11px 11px;
    -webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 40%,transparent 72%);mask-image:radial-gradient(50% 50% at 50% 50%,#000 40%,transparent 72%)}
  .flip-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:80;width:52px;height:52px;border-radius:50%;
    background:rgba(255,253,248,.92);border:1px solid var(--line);box-shadow:var(--shadow-md);display:grid;place-items:center;
    font-size:22px;color:var(--ink);cursor:pointer;transition:.2s opacity,.2s transform;font-family:var(--serif)}
  .flip-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.07);color:var(--accent-deep)}
  .fa-l{left:6px}
  .fa-r{right:6px}

  /* 图片灯箱 */
  .lightbox{position:fixed;inset:0;z-index:120;background:rgba(30,24,17,.9);backdrop-filter:blur(7px);
    display:grid;place-items:center;animation:fadeIn .22s ease both}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .lb-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:94vw}
  .lb-wrap img{max-width:94vw;max-height:80vh;width:auto;height:auto;border-radius:8px;background:#fff;box-shadow:0 40px 90px rgba(0,0,0,.55)}
  .lb-cap{color:#efe3cd;font-size:13px;letter-spacing:.04em}
  .lb-x{position:absolute;top:24px;right:30px;color:rgba(255,255,255,.8);font-size:26px;cursor:pointer;line-height:1;padding:8px}
  .lb-x:hover{color:#fff}

  /* 弹窗 */
  .modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center}
  .modal-back{position:absolute;inset:0;background:rgba(47,42,38,.45);backdrop-filter:blur(3px)}
  .modal-card{position:relative;background:var(--card);border-radius:20px;padding:36px 34px;width:min(430px,92vw);
    text-align:center;box-shadow:var(--shadow-lg);animation:popIn .35s cubic-bezier(.22,.8,.3,1.25) both}
  @keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
  .modal-ico{width:54px;height:54px;border-radius:50%;background:#e6f2e8;color:var(--go);display:grid;place-items:center;font-size:26px;font-weight:800;margin:0 auto 14px}
  .modal-title{font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:8px}
  .modal-body{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:22px}

  .toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:13px 24px;border-radius:12px;font-size:14px;z-index:90;opacity:0;transition:.25s;pointer-events:none;max-width:90vw;text-align:center;box-shadow:var(--shadow-md)}
  .toast.show{opacity:1}
  .toast.warn{background:var(--stop)}

  @media(max-width:900px){
    .home-inner{flex-direction:column;align-items:flex-start;gap:28px;padding-top:60px}
    .home-card{flex:none;width:100%}
    .cal-layout,.create-layout{grid-template-columns:1fr}
    .panels{grid-template-columns:1fr}
    .book-scene{height:72vh;min-height:480px}
    .pg-syn p{font-size:13px}
    .ai-layout{grid-template-columns:1fr}
    .ai-stage2{position:static}
    .ai-head-art{display:none}
    .ai-sidenote{margin-left:0;text-align:left;width:100%}
  }
  @media(max-width:760px){
    .sidebar{position:relative;width:100%;height:auto;flex-direction:row;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap}
    .side-nav{flex-direction:row;gap:6px;margin:0}
    .side-nav button{padding:9px 13px;font-size:13px}
    .side-nav button.on::before{display:none}
    .side-foot{display:none}
    .content{margin-left:0}
  }
  @media(max-width:640px){
    .wrap{padding:0 18px}
    .home-inner{padding:0 18px}
    .day{min-height:62px;padding:6px}
  }


/* ===== T7：公告条（notice.banner） ===== */
.notice-banner{position:fixed;top:0;left:248px;right:0;z-index:60;background:linear-gradient(90deg,#f7e3bd,#f3d9a8);
  color:#5c3d17;font-size:13px;font-weight:700;text-align:center;padding:9px 16px;border-bottom:1px solid rgba(92,61,23,.14);box-shadow:0 3px 12px rgba(92,61,23,.08)}
@media(max-width:760px){.notice-banner{left:0}}

/* ===== T7：页脚版本号（全站一致） ===== */
.app-footer{position:fixed;right:14px;bottom:12px;z-index:55;font-size:11px;color:var(--muted);
  background:rgba(255,253,248,.88);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;letter-spacing:.03em}
.app-footer em{font-style:normal;font-weight:800;color:var(--accent-deep)}

/* ===== M2：AI 生成大图展示 ===== */
.ai-gen-img{display:block;max-width:100%;width:auto;max-height:66vh;margin:0 auto;
  border-radius:14px;box-shadow:0 10px 34px rgba(58,44,30,.16);border:1px solid var(--line)}
.ai-err{text-align:center;color:var(--muted);padding:30px 0}

/* ===== M4：漫画格版式库（1~8 格）与「添加漫画版式」开关 ===== */
.ai-grid-chip{display:flex;flex-direction:column;align-items:center;gap:3px;width:70px;padding:5px 4px 6px;
  border:1.5px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--shadow-sm);
  transition:transform .16s,border-color .16s,box-shadow .16s;font-family:inherit}
.ai-grid-chip span{font-size:11px;font-weight:800;color:var(--muted);line-height:1.2}
.ai-grid-chip svg{display:block;border-radius:4px}
.ai-grid-chip:hover{transform:translateY(-2px);border-color:var(--accent)}
.ai-grid-chip.on{border-color:var(--accent-deep);box-shadow:0 4px 14px rgba(201,131,42,.24)}
.ai-grid-chip.on span{color:var(--accent-deep)}
.btn.btn-ghost.on{background:var(--accent-ink);color:#fffdf8;border-color:var(--accent-ink);box-shadow:0 6px 16px rgba(92,61,23,.22)}
.btn.btn-ghost.on:hover{background:var(--accent-ink);color:#fffdf8}
.panels.single{grid-template-columns:minmax(0,1fr)}
.panels.single .panel .img img{width:100%}

/* ===== 阶段1：角色陪伴卡片 + 开启引导 ===== */
.char-zone{margin-bottom:22px}
.char-invite{display:flex;align-items:center;gap:18px}
.char-invite .ci-ava{flex:none;line-height:0}
.char-invite .ci-copy{flex:1;min-width:0}
.ci-title{font-family:var(--serif);font-size:19px;font-weight:700;margin-bottom:4px}
.ci-sub{color:var(--muted);font-size:13px;line-height:1.6}
.char-invite .btn{flex:none;white-space:nowrap}
.char-card{display:flex;align-items:center;gap:18px;position:relative;padding:20px 26px;background:linear-gradient(135deg,#fffdf8 0%,#fdf6e8 100%)}
.char-ava{flex:none;line-height:0}
.char-avatar{display:block}
.char-info{flex:1;min-width:0;padding-right:44px}
.char-name{font-family:var(--serif);font-size:21px;font-weight:700;display:flex;align-items:baseline;gap:10px}
.char-style{font-family:var(--sans);font-size:12px;font-weight:800;color:var(--accent-ink);background:#f7e7c8;border-radius:999px;padding:2px 10px}
.char-meta{display:flex;align-items:center;gap:12px;margin-top:6px;font-size:12px;font-weight:700;color:var(--muted)}
.char-status{display:inline-flex;align-items:center;gap:6px;color:var(--go)}
.char-status i{width:7px;height:7px;border-radius:50%;background:var(--go);display:inline-block}
.char-energy{color:var(--accent-deep)}
.char-meter{height:6px;max-width:320px;margin-top:8px;border-radius:999px;background:#efe7d8;overflow:hidden}
.char-meter span{display:block;height:100%;border-radius:999px;background:var(--go);transition:width .3s ease}
.char-card.is-low{background:linear-gradient(135deg,#fffaf0 0%,#f6ecda 100%)}
.char-card.is-low .char-avatar{filter:saturate(.82)}
.char-card.is-low .char-status{color:#b0781c}
.char-card.is-low .char-status i{background:#cf9a3f}
.char-card.is-low .char-energy{color:#a3762b}
.char-card.is-low .char-meter span{background:#cf9a3f}
.char-card.is-sleep{background:#f2f1ec;border-color:#dcd8cf}
.char-card.is-sleep .char-avatar{filter:grayscale(1);opacity:.7}
.char-card.is-sleep .char-name{color:#6c675e}
.char-card.is-sleep .char-style{background:#e6e2d8;color:#6c675e}
.char-card.is-sleep .char-status{color:#6f6a61}
.char-card.is-sleep .char-status i{background:#8b867c}
.char-card.is-sleep .char-energy{color:#6f6a61}
.char-card.is-sleep .char-meter{background:#e3e0d8}
.char-card.is-sleep .char-meter span{background:#a9a49a}
.char-card.is-sleep .char-line{color:#7a756b}
.char-line{margin-top:8px;font-size:14px;color:var(--ink);opacity:.8}
.char-tools{position:absolute;top:12px;right:12px;display:flex;gap:8px;align-items:center}
.char-off,.char-set{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-height:44px;min-width:44px;background:transparent}
.char-set{cursor:pointer}
.char-set:hover{color:var(--accent-ink);border-color:var(--accent)}
.char-off:hover{color:var(--stop);border-color:var(--stop)}
.char-guide{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}
.char-guide-back{position:absolute;inset:0;background:rgba(32,26,18,.44)}
.char-guide-card{position:relative;width:min(620px,94vw);max-height:88vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:28px 30px 24px;animation:popIn .22s ease-out}
.cg-k{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--muted);margin-bottom:6px}
.cg-title{font-family:var(--serif);font-size:24px;margin:0 0 8px}
.cg-p{color:var(--muted);font-size:14px;line-height:1.75;margin:0 0 16px}
.cg-points{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.cg-points span{font-size:12px;font-weight:700;color:var(--go);background:#eef6ee;border-radius:999px;padding:5px 12px}
.cg-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.char-styles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.char-style-chip{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:1.5px solid var(--line);border-radius:14px;background:#fffdf8;text-align:center;transition:.16s border-color,.16s box-shadow,.16s transform}
.char-style-chip b{font-size:13px}
.char-style-chip small{font-size:10px;color:var(--muted);line-height:1.4}
.char-style-chip:hover{transform:translateY(-2px);border-color:var(--accent)}
.char-style-chip.on{border-color:var(--accent-deep);box-shadow:0 4px 16px rgba(201,131,42,.22);background:#fff8ec}
.cg-preview{display:flex;align-items:center;gap:14px;background:var(--paper);border-radius:14px;padding:12px 16px;margin-bottom:18px}
.cg-preview b{display:block;font-size:15px}
.cg-preview small{color:var(--muted);font-size:12px}
.cg-label{display:block;font-size:13px;font-weight:800;margin-bottom:8px}
@media(max-width:640px){
  .char-invite{flex-direction:column;align-items:flex-start}
  .char-card{align-items:flex-start;padding:18px}
  .char-info{padding-right:118px}
  .char-styles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== 阶段3：沉睡留言 + 回来入口 + 灰变彩 + 回归叙事浮层 ===== */
.char-note{margin-top:10px;padding:10px 14px;border-radius:12px;background:rgba(255,253,248,.9);
  border:1px dashed #d8d2c4;font-size:13.5px;line-height:1.7;color:#6f6a61;max-width:600px}
.char-wake{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.char-wake label{cursor:pointer}
.char-wake-write{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;max-width:600px}
.char-wake-write .input{flex:1;min-width:210px}
.char-wake-write .btn{flex:none}
/* 灰变彩：苏醒重绘后卡片从灰度渐入彩色，共 1.5 秒（不超过 2 秒） */
.char-waking .char-card{animation:wakeColor 1.5s ease both}
@keyframes wakeColor{0%{filter:grayscale(1) saturate(.55)}100%{filter:grayscale(0) saturate(1)}}
/* 回归叙事浮层：独立样式，非全屏，可点背层或任一选择关闭 */
.wake-overlay{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:20px}
.wake-back{position:absolute;inset:0;background:rgba(32,26,18,.44)}
.wake-card{position:relative;width:min(560px,94vw);max-height:88vh;overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:28px 30px 24px;
  animation:popIn .25s ease-out}
.wake-k{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--go);margin-bottom:6px}
.wake-t{font-family:var(--serif);font-size:24px;margin:0 0 12px}
.wake-lines p{margin:0 0 10px;font-size:14.5px;line-height:1.75;color:var(--ink)}
.wake-lines p:last-child{margin-bottom:0}
.wake-actions{display:flex;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.wake-skip{background:none;border:none;color:var(--muted);font-size:13.5px;text-decoration:underline}
.wake-skip:hover{color:var(--ink)}
@media(max-width:640px){
  .char-wake .btn{flex:1 1 auto}
  .char-wake-write{flex-direction:column;align-items:stretch}
  .char-wake-write .input{min-width:0;width:100%}
}

/* ===== 阶段4：角色设置面板 / 站内提醒 / 无障碍 ===== */
/* 站内提醒：角色卡内小标签，不遮挡操作、不占公告条位置 */
.char-remind{margin-top:10px;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.6;
  color:#7a5a1f;background:#fff7e5;border:1px dashed #e6cf9f;border-radius:10px;padding:8px 12px;max-width:600px}
.char-remind i{width:8px;height:8px;border-radius:50%;background:var(--accent-deep);flex:none}
/* 设置面板：独立浮层，可点遮罩/「关闭」退出 */
.char-settings{position:fixed;inset:0;z-index:86;display:grid;place-items:center;padding:20px}
.char-settings-back{position:absolute;inset:0;background:rgba(32,26,18,.44)}
.char-settings-card{position:relative;width:min(600px,94vw);max-height:86vh;overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:26px 30px 22px;animation:popIn .22s ease-out}
.cs-k{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--accent-deep);margin-bottom:8px}
.cs-t{font-size:13px;font-weight:800;color:var(--muted);margin-bottom:8px}
.cs-row{padding:14px 0;border-bottom:1px solid var(--line)}
.cs-row .btn{margin-right:8px;margin-bottom:4px}
.cs-v{font-size:14.5px}
.cs-styles-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cs-styles-5 .char-style-chip{min-width:0}
.cs-note{font-size:12.5px;line-height:1.7;color:var(--muted);background:var(--paper);border-radius:12px;padding:10px 14px;margin:14px 0 0}
.cs-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
@media(max-width:640px){.cs-styles-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 减少动画：系统级 prefers-reduced-motion 或面板开关打开时跳过 1.5 秒灰变彩 */
@media (prefers-reduced-motion: reduce){
  .char-waking .char-card{animation:none}
  .char-settings-card,.wake-card,.char-guide-card,.del-card{animation:none}
  .btn,.char-style-chip{transition:none}
}

/* ===== 查看页：删除连载 / 删除单话 ===== */
/* 卡片右上角删除入口：默认低饱和、透明底，hover / 聚焦才明确可点 */
.book-del{position:absolute;top:4px;right:4px;z-index:2;width:44px;height:44px;display:grid;place-items:center;
  background:transparent;border:1px solid transparent;border-radius:12px;color:#f2e6cf;opacity:.5;cursor:pointer;
  transition:opacity .16s,color .16s,border-color .16s,background .16s}
.book-del svg,.pg-del svg{width:16px;height:16px;display:block}
.book-del:hover,.book-del:focus-visible{opacity:1;color:var(--stop);border-color:#e8c9bf;background:rgba(255,248,245,.94);outline:none}
/* 书页页头右侧删除入口：44px 点击区，负外边距不改变页头高度、不挤占剧情与画面 */
.pg-del{flex:none;width:44px;height:44px;margin:-10px -14px -10px 2px;display:grid;place-items:center;
  background:transparent;border:1px solid transparent;border-radius:10px;color:var(--muted);opacity:.55;cursor:pointer;
  transition:opacity .16s,color .16s,border-color .16s,background .16s}
.pg-del:hover,.pg-del:focus-visible{opacity:1;color:var(--stop);border-color:#e8c9bf;background:#fff8f5;outline:none}
.pg-t{flex:1;min-width:0}
@media(max-width:760px){.pg-date{display:none}}
/* 删到一话不剩时的空书状态 */
.book-empty{margin-top:10px;padding:56px 26px;text-align:center;background:var(--card);border:1.5px dashed var(--line);
  border-radius:18px;box-shadow:var(--shadow-sm)}
.be-h{font-family:var(--serif);font-size:24px;font-weight:700;margin-bottom:8px}
.book-empty p{color:var(--muted);font-size:13px;line-height:1.9;margin:0 0 18px}
/* 删除确认弹窗：警示语义，与解锁成功弹窗区分；警示色只在小图标与确认按钮描边上使用 */
.del-modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:20px}
.del-back{position:absolute;inset:0;background:rgba(47,42,38,.42);backdrop-filter:blur(3px)}
.del-card{position:relative;width:min(430px,92vw);background:var(--card);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);padding:30px 30px 24px;text-align:center;animation:popIn .28s cubic-bezier(.22,.8,.3,1.2) both}
.del-ico{width:50px;height:50px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;
  background:#f9e9e3;color:var(--stop);font-family:var(--serif);font-size:26px;font-weight:800}
.del-title{font-family:var(--serif);font-size:21px;font-weight:700;margin-bottom:8px}
.del-body{color:var(--muted);font-size:14px;line-height:1.75;margin-bottom:20px}
.del-warn{color:var(--stop);font-size:12.5px;font-weight:800;letter-spacing:.04em;margin-top:8px}
.del-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.del-ok{min-height:44px;padding:11px 22px;border-radius:12px;border:1px solid var(--stop);background:#fff7f4;color:var(--stop);font-weight:800}
.del-ok:hover{background:var(--stop);color:#fffdf8;border-color:var(--stop)}

/* ===== 阶段2：首页右上角账号入口（幽灵胶囊；橙色只留给主 CTA） ===== */
.home-auth{position:absolute;top:26px;right:8%;z-index:7;display:flex;align-items:center}
.home-auth-guest{display:flex;align-items:center;gap:10px}
.home-auth-user{display:flex;align-items:center;gap:12px}
.auth-pill{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.04em;color:#ffe9c6;white-space:nowrap;cursor:pointer;
  background:rgba(8,20,40,.22);border:1px solid rgba(255,233,198,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.auth-pill:hover{background:rgba(8,20,40,.42);border-color:rgba(255,233,198,.62);transform:translateY(-1px)}
.auth-pill:focus-visible{outline:2px solid rgba(255,233,198,.9);outline-offset:2px}
.auth-pill-strong{font-weight:800;color:#ffe9c6;background:rgba(8,20,40,.38);border-color:rgba(255,233,198,.58)}
.auth-pill-mini{padding:0 14px;font-size:12.5px}
.pill-short{display:none}
.auth-hello{font-size:13px;color:rgba(255,240,218,.85);letter-spacing:.02em;white-space:nowrap}
.auth-hello b{color:#ffe9c6;font-weight:800}
@media(max-width:960px){.home-auth{right:7%}}
@media(max-width:760px){
  .home-auth{right:7%}
  .auth-pill{padding:0 14px;font-size:12.5px}
  .auth-pill-mini{padding:0 12px}
}
@media(max-width:420px){
  .home-auth{right:6%}
  .auth-pill{padding:0 8px;font-size:12px;letter-spacing:0}
  .home-auth-guest{gap:6px}
  .pill-full{display:none}
  .pill-short{display:inline}
  .home-auth.is-user{top:64px}
  .home-auth-user{gap:8px}
  .auth-hello{font-size:12px;max-width:88px;overflow:hidden;text-overflow:ellipsis}
  .auth-pill-mini{padding:0 10px;font-size:12px}
}
@media(max-width:360px){.home-auth{top:64px}}

/* ---------- 阶段4：作品同步状态轻提示 ---------- */
.sync-hint{font-size:11.5px;color:var(--muted);line-height:1.5;padding:4px 2px 0;opacity:.9}
.sync-hint.hidden{display:none}