/* ============================================================
   镜海 · MirrorSea — 工作台 / 黄昏海色 × 文学宣纸
   ============================================================ */
:root{
  --sea-900:#0c1f2b; --sea-800:#12303a; --sea-700:#1b4250; --sea-600:#28606e; --sea-glow:#4c9bab;
  --paper:#f5efe3; --paper-2:#efe7d6; --paper-card:#fbf7ed; --paper-line:#e2d6bd;
  --rouge:#c1574e; --rouge-soft:#d98a7e; --gold:#bd9a5f; --gold-soft:#d8bd8c;
  --ink:#2a2622; --ink-soft:#5e574c; --ink-faint:#8a8073;
  --ok:#4f8a6a;
  --shadow:0 22px 50px -28px rgba(12,31,43,.55);
  --shadow-sm:0 8px 22px -16px rgba(12,31,43,.5);
  --serif-cjk:"Noto Serif SC",serif; --sans-cjk:"Noto Sans SC",sans-serif;
  --display:"Cormorant Garamond","Noto Serif SC",serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--sans-cjk); color:var(--ink);
  background:radial-gradient(120% 80% at 50% -10%, #1b4250 0%, var(--sea-800) 38%, var(--sea-900) 100%);
  min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
}
.grain{position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.05;
  background-image: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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============ Masthead ============ */
.masthead{position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(12,31,43,.97), rgba(12,31,43,.86));
  backdrop-filter:blur(8px); border-bottom:1px solid rgba(189,154,95,.28);}
.masthead__inner{max-width:1760px; margin:0 auto; padding:11px 22px;
  display:flex; align-items:center; gap:18px;}
.brand{display:flex; align-items:center; gap:13px; flex:none;}
.brand__mark{position:relative; width:38px; height:38px; flex:none; display:flex; flex-direction:column;
  justify-content:center; gap:4px; padding:0 5px; border:1px solid rgba(189,154,95,.5); border-radius:50%;}
.brand__wave{height:2px; border-radius:2px; background:linear-gradient(90deg, var(--gold-soft), var(--sea-glow)); animation:tide 3.6s ease-in-out infinite;}
.brand__wave:nth-child(1){width:100%;} .brand__wave:nth-child(2){width:70%; animation-delay:.4s;} .brand__wave:nth-child(3){width:88%; animation-delay:.8s;}
@keyframes tide{0%,100%{transform:translateX(0); opacity:.7;}50%{transform:translateX(3px); opacity:1;}}
.brand__title{margin:0; font-family:var(--serif-cjk); font-weight:700; font-size:22px; letter-spacing:.14em; color:var(--paper); display:flex; align-items:baseline; gap:10px; line-height:1;}
.brand__latin{font-family:var(--display); font-style:italic; font-weight:500; font-size:13px; letter-spacing:.16em; color:var(--gold-soft);}

/* Project switcher */
.proj{position:relative; flex:1; display:flex; justify-content:center;}
.proj__current{display:flex; align-items:center; gap:10px; max-width:420px;
  background:rgba(245,239,227,.06); border:1px solid rgba(189,154,95,.3); border-radius:9px;
  padding:8px 14px; cursor:pointer; transition:.16s;}
.proj__current:hover{background:rgba(189,154,95,.16);}
.proj__name{font-family:var(--serif-cjk); font-weight:600; font-size:15px; color:var(--paper); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px;}
.proj__caret{color:var(--gold-soft); font-size:11px;}
.proj__menu{position:absolute; top:46px; left:50%; transform:translateX(-50%); width:340px; z-index:70;
  background:var(--paper); border:1px solid var(--gold-soft); border-radius:12px; box-shadow:var(--shadow);
  padding:8px; animation:rise .22s ease forwards;}
.proj__menu[hidden]{display:none;}
.proj__list{max-height:50vh; overflow:auto; display:flex; flex-direction:column; gap:3px;}
.proj-item{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; transition:.14s;}
.proj-item:hover{background:rgba(40,96,110,.08);}
.proj-item--active{background:rgba(193,87,78,.1);}
.proj-item__name{flex:1; font-family:var(--serif-cjk); font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.proj-item__name input{width:100%; font-family:var(--serif-cjk); font-size:14px; border:1px solid var(--rouge-soft); border-radius:5px; padding:2px 6px;}
.proj-item__meta{font-size:11px; color:var(--ink-faint); flex:none;}
.proj-item__act{border:none; background:transparent; cursor:pointer; color:var(--ink-faint); font-size:13px; padding:3px 5px; border-radius:5px; flex:none;}
.proj-item__act:hover{background:rgba(0,0,0,.06); color:var(--sea-700);}
.proj-item__act.danger:hover{background:rgba(193,87,78,.14); color:var(--rouge);}
.proj__new{width:100%; margin-top:6px; border:1px dashed var(--gold); background:transparent; color:#8a6f3a;
  border-radius:8px; padding:9px; cursor:pointer; font-family:var(--sans-cjk); font-size:13px; letter-spacing:.06em; transition:.14s;}
.proj__new:hover{background:rgba(189,154,95,.12);}

.masthead__tools{display:flex; align-items:center; gap:8px; flex:none;}
.save-pill{font-size:11px; letter-spacing:.08em; color:var(--ok); border:1px solid rgba(79,138,106,.4);
  background:rgba(79,138,106,.12); border-radius:20px; padding:5px 11px; transition:.2s; white-space:nowrap;}
.save-pill.saving{color:var(--gold); border-color:rgba(189,154,95,.5); background:rgba(189,154,95,.14);}

/* ============ Buttons ============ */
.btn{font-family:var(--sans-cjk); font-size:13px; letter-spacing:.05em; border-radius:8px; cursor:pointer;
  border:1px solid transparent; padding:8px 14px; transition:.18s; white-space:nowrap;}
.btn--ghost{background:rgba(245,239,227,.04); color:var(--gold-soft); border-color:rgba(189,154,95,.34);}
.btn--ghost:hover{background:rgba(189,154,95,.16); color:var(--paper); transform:translateY(-1px);}
.btn--primary{width:100%; padding:13px; font-size:15px; letter-spacing:.12em; color:var(--paper);
  background:linear-gradient(135deg, var(--rouge) 0%, #a9433c 100%);
  box-shadow:0 14px 30px -14px rgba(193,87,78,.8); border-color:rgba(216,189,140,.4);}
.btn--primary:hover{filter:brightness(1.06); transform:translateY(-1px);}
.btn__icon{color:var(--gold-soft); margin-right:4px;}

/* ============ Workbench layout ============ */
.workbench{flex:1; max-width:1760px; width:100%; margin:0 auto; padding:20px 22px 40px;
  display:grid; grid-template-columns:370px 1fr; gap:22px; align-items:start;}
body.drawer-collapsed .workbench{grid-template-columns:0 1fr; gap:0;}
body.drawer-collapsed .drawer{transform:translateX(-110%); opacity:0; pointer-events:none; width:0; padding:0; margin:0; border:none;}

/* ============ Drawer ============ */
.drawer{position:sticky; top:78px; background:var(--paper); border-radius:14px; box-shadow:var(--shadow);
  overflow:hidden; transition:transform .28s ease, opacity .22s ease; max-height:calc(100vh - 96px); display:flex; flex-direction:column;}
.drawer__head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; border-bottom:1px solid var(--paper-line); flex:none;}
.drawer__title{margin:0; font-family:var(--serif-cjk); font-weight:600; font-size:18px; letter-spacing:.12em; color:var(--sea-800);}
.drawer__close{border:1px solid var(--paper-line); background:transparent; color:var(--sea-700); width:28px; height:28px; border-radius:7px; cursor:pointer; font-size:14px; transition:.14s;}
.drawer__close:hover{background:rgba(40,96,110,.1);}
.drawer__form{padding:16px 20px 22px; overflow:auto;}
.drawer__tip{margin:12px 2px 0; font-size:11.5px; line-height:1.7; color:var(--ink-faint); background:rgba(189,154,95,.08); border-radius:7px; padding:9px 11px;}
.drawer__tip strong{color:var(--sea-700);}

.field{margin-bottom:14px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.field label, .field__label-row label{display:block; font-size:11.5px; font-weight:500; letter-spacing:.1em; color:var(--sea-700); margin-bottom:6px; text-transform:uppercase;}
.field__hint{text-transform:none; font-weight:400; color:var(--ink-faint); letter-spacing:0; margin-left:6px; font-size:11px;}
.field__label-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.field__label-row label{margin-bottom:0;}
input[type=text], input[type=number], input[type=password], textarea, select{
  width:100%; font-family:var(--sans-cjk); font-size:14px; color:var(--ink);
  background:var(--paper-card); border:1px solid var(--paper-line); border-radius:9px; padding:10px 12px; transition:.16s;}
textarea{resize:vertical; line-height:1.7; font-family:var(--serif-cjk);}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--rouge-soft); box-shadow:0 0 0 3px rgba(217,138,126,.18); background:#fff;}
input::placeholder, textarea::placeholder{color:var(--ink-faint); opacity:.7;}
.mini-add{font-family:var(--sans-cjk); font-size:12px; letter-spacing:.06em; background:transparent; border:1px dashed var(--gold); color:var(--gold); border-radius:7px; padding:4px 10px; cursor:pointer; transition:.16s;}
.mini-add:hover{background:rgba(189,154,95,.12); color:#8a6f3a;}
.love-list{display:flex; flex-direction:column; gap:8px;}
.love-row{display:grid; grid-template-columns:1fr 1.25fr auto; gap:7px; align-items:center;}
.love-row__del{border:none; background:transparent; color:var(--ink-faint); cursor:pointer; font-size:17px; line-height:1; padding:4px 6px; border-radius:6px; transition:.16s;}
.love-row__del:hover{color:var(--rouge); background:rgba(193,87,78,.1);}
.engine-hint{margin:10px 2px 0; font-size:12px; color:var(--ink-faint); letter-spacing:.05em; text-align:center;}
.engine-hint strong{color:var(--sea-700);}
.link-sample{color:var(--rouge); text-decoration:none; border-bottom:1px dashed var(--rouge-soft);}
.link-sample:hover{color:#9a3b33;}

/* ============ Workspace ============ */
.workspace{background:var(--paper); border-radius:14px; box-shadow:var(--shadow); min-height:60vh; position:relative; overflow:hidden;}
#ws-body{padding:24px 26px 32px;}

.empty-state{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:90px 20px; color:var(--ink-faint);}
.empty-state__art{font-size:54px; color:var(--gold-soft); margin-bottom:18px; animation:bob 4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-8px) rotate(4deg);}}
.empty-state__title{font-family:var(--serif-cjk); font-size:20px; color:var(--sea-700); margin:0 0 8px; letter-spacing:.1em;}
.empty-state__desc{font-size:14px; line-height:1.9; margin:0 0 22px;}
.empty-state__cta{width:auto; padding:11px 24px;}

/* ---- Work meta (editable) ---- */
.work-meta{background:linear-gradient(135deg, var(--sea-800), var(--sea-900)); color:var(--paper); border-radius:12px;
  padding:20px 22px; margin-bottom:22px; position:relative; overflow:hidden; box-shadow:var(--shadow-sm);}
.work-meta::after{content:"❀"; position:absolute; right:-10px; bottom:-22px; font-size:120px; color:rgba(216,189,140,.08);}
.work-meta__title{font-family:var(--serif-cjk); font-weight:700; font-size:24px; letter-spacing:.06em; margin:0 0 6px; color:var(--paper); background:transparent; border:none; border-bottom:1px dashed transparent; width:100%; padding:2px 0;}
.work-meta__title:focus{outline:none; border-bottom-color:rgba(216,189,140,.6); background:rgba(255,255,255,.04);}
.work-meta__world{font-family:var(--serif-cjk); font-style:italic; color:var(--gold-soft); font-size:14px; margin:0 0 14px; line-height:1.7; background:transparent; border:none; width:100%; resize:none; padding:2px 0;}
.work-meta__world:focus{outline:none; background:rgba(255,255,255,.04);}
.work-meta__tags{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.meta-tag{font-size:12px; letter-spacing:.05em; padding:5px 11px; border-radius:20px; background:rgba(245,239,227,.1); border:1px solid rgba(216,189,140,.3); color:var(--paper);}
.meta-tag strong{color:var(--gold-soft); font-weight:500;}
.meta-tag--rouge{background:rgba(193,87,78,.22); border-color:rgba(217,138,126,.5);}

/* ---- Act divider ---- */
.act-divider{display:flex; align-items:center; gap:14px; margin:24px 2px 16px;}
.act-divider__line{flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent);}
.act-divider__label{font-family:var(--display); font-style:italic; font-size:15px; letter-spacing:.16em; color:var(--gold); white-space:nowrap;}
.act-divider__label b{font-family:var(--serif-cjk); font-style:normal; color:var(--sea-700); font-weight:600; margin-left:6px;}

/* ---- Scene card (editable) ---- */
.scene{background:var(--paper-card); border:1px solid var(--paper-line); border-left:4px solid var(--sea-600);
  border-radius:11px; padding:0; margin-bottom:16px; overflow:hidden; box-shadow:var(--shadow-sm);}
.scene--heart{border-left-color:var(--rouge);}
.scene__head{display:flex; align-items:center; gap:10px; padding:12px 16px 10px; border-bottom:1px dashed var(--paper-line); background:linear-gradient(180deg, rgba(40,96,110,.05), transparent);}
.scene__no{font-family:var(--display); font-style:italic; font-size:13px; letter-spacing:.1em; color:var(--gold); flex:none;}
.scene__title{font-family:var(--serif-cjk); font-weight:600; font-size:17px; color:var(--sea-800); letter-spacing:.03em; flex:1; min-width:0;}
.scene__tools{display:flex; gap:2px; flex:none; opacity:.45; transition:.16s;}
.scene:hover .scene__tools{opacity:1;}
.tool-btn{border:none; background:transparent; cursor:pointer; color:var(--ink-faint); font-size:13px; padding:4px 6px; border-radius:6px; transition:.14s; line-height:1;}
.tool-btn:hover{background:rgba(40,96,110,.1); color:var(--sea-700);}
.tool-btn.danger:hover{background:rgba(193,87,78,.14); color:var(--rouge);}
.tool-btn:disabled{opacity:.25; cursor:default;}

/* inline editable fields */
.ed{font-family:var(--serif-cjk); background:transparent; border:1px solid transparent; border-radius:6px; color:var(--ink); padding:3px 6px; transition:.14s; width:100%;}
.ed:hover{background:rgba(255,255,255,.5);}
.ed:focus{outline:none; background:#fff; border-color:var(--rouge-soft); box-shadow:0 0 0 2px rgba(217,138,126,.16);}
textarea.ed{resize:none; line-height:1.7; overflow:hidden;}
.ed--title{font-weight:600; font-size:17px; color:var(--sea-800);}

.scene__stage{display:grid; grid-template-columns:repeat(2,1fr); gap:6px 14px; padding:11px 16px; background:rgba(226,214,189,.18);}
.stage-attr{display:flex; align-items:center; gap:7px; font-size:12.5px;}
.stage-attr__k{font-size:10px; letter-spacing:.08em; color:var(--sea-600); border:1px solid rgba(40,96,110,.25); border-radius:4px; padding:1px 5px; text-transform:uppercase; flex:none; white-space:nowrap;}

.cast{display:flex; flex-wrap:wrap; gap:7px; padding:11px 16px 4px; align-items:center;}
.cast-chip{display:flex; align-items:center; gap:6px; font-size:12px; background:#fff; border:1px solid var(--paper-line); border-radius:20px; padding:3px 8px 3px 4px;}
.cast-chip__dot{width:18px; height:18px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; font-family:var(--serif-cjk);}
.cast-chip__name{font-family:var(--serif-cjk); font-weight:600; color:var(--ink); max-width:120px;}
.cast-chip .ed{width:auto; min-width:40px; padding:1px 4px;}
.cast-chip__sep{color:var(--ink-faint);}
.cast-chip__del{border:none; background:transparent; color:var(--ink-faint); cursor:pointer; font-size:13px; padding:0 2px; border-radius:4px;}
.cast-chip__del:hover{color:var(--rouge);}
.cast-add{font-size:11px; border:1px dashed var(--gold); background:transparent; color:#8a6f3a; border-radius:14px; padding:3px 9px; cursor:pointer;}
.cast-add:hover{background:rgba(189,154,95,.12);}

/* ---- Beats ---- */
.beats{padding:6px 16px 12px;}
.beat{display:flex; gap:9px; padding:6px 0; border-bottom:1px solid rgba(226,214,189,.45); align-items:flex-start;}
.beat:last-child{border-bottom:none;}
.beat__type{flex:none; width:64px; margin-top:2px;}
.beat__type select{font-size:10.5px; padding:3px 4px; border-radius:5px; text-align:center; font-weight:500; border:1px solid transparent; background-color:rgba(40,96,110,.1); color:var(--sea-700); cursor:pointer;}
.beat__type select:focus{border-color:var(--rouge-soft); box-shadow:none;}
.beat__main{flex:1; min-width:0;}
.beat__meta{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:3px;}
.beat__meta .ed{width:auto; font-size:12px; padding:1px 5px;}
.beat__speaker{font-weight:700; color:var(--sea-800); max-width:110px;}
.beat__emotion{color:var(--rouge); border:1px solid rgba(193,87,78,.3); border-radius:4px; max-width:80px;}
.beat__action{color:var(--ink-faint); font-style:italic; max-width:130px;}
.beat__text{font-family:var(--serif-cjk); color:var(--ink); font-size:14px; line-height:1.7;}
.beat__del{flex:none; border:none; background:transparent; color:var(--ink-faint); cursor:pointer; font-size:14px; padding:2px 5px; border-radius:5px; opacity:0; transition:.14s; margin-top:2px;}
.beat:hover .beat__del{opacity:.7;}
.beat__del:hover{opacity:1; color:var(--rouge); background:rgba(193,87,78,.1);}
.beat-add{margin:6px 0 2px; font-size:12px; border:1px dashed var(--paper-line); background:transparent; color:var(--ink-faint); border-radius:7px; padding:5px 10px; cursor:pointer; transition:.14s;}
.beat-add:hover{border-color:var(--gold); color:#8a6f3a; background:rgba(189,154,95,.07);}

/* ---- Heart ---- */
.heart-row{display:flex; align-items:center; gap:8px; margin:6px 16px 12px;}
.heart-toggle{font-size:11px; border:1px solid var(--rouge-soft); color:var(--rouge); background:transparent; border-radius:14px; padding:4px 10px; cursor:pointer; flex:none;}
.heart-toggle.on{background:rgba(193,87,78,.14);}
.heart-moment{flex:1; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:9px;
  background:linear-gradient(135deg, rgba(193,87,78,.1), rgba(217,138,126,.06)); border:1px solid rgba(217,138,126,.4);}
.heart-moment__icon{color:var(--rouge); font-size:15px; animation:pulse 1.8s ease-in-out infinite; flex:none;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
.heart-moment .ed{font-size:13px; color:var(--rouge);}

/* ---- Choice ---- */
.choice{margin:6px 16px 14px; padding:12px 14px; border-radius:9px; background:rgba(40,96,110,.06); border:1px dashed var(--sea-600);}
.choice__head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.choice__q{flex:1; font-family:var(--serif-cjk); font-weight:600; color:var(--sea-800); font-size:14px;}
.choice__opt{display:flex; align-items:center; gap:8px; padding:4px 0;}
.choice__key{font-family:var(--display); font-style:italic; color:var(--gold); flex:none; width:16px;}
.choice__opt .choice__text{flex:1;}
.choice__opt .ed-target{width:90px; font-size:12px;}
.choice__fav{display:flex; align-items:center; gap:3px; flex:none;}
.choice__fav input{width:46px; font-size:12px; text-align:center; padding:3px 4px;}
.choice__fav-label{font-size:11px; color:var(--ink-faint);}
.choice__optdel{border:none; background:transparent; color:var(--ink-faint); cursor:pointer; font-size:13px; padding:2px 4px; flex:none;}
.choice__optdel:hover{color:var(--rouge);}
.choice__addopt{font-size:11px; border:1px dashed var(--sea-600); background:transparent; color:var(--sea-700); border-radius:12px; padding:3px 9px; cursor:pointer; margin-top:6px;}
.choice-toggle{font-size:11px; border:1px solid var(--sea-600); color:var(--sea-700); background:transparent; border-radius:14px; padding:4px 10px; cursor:pointer; margin:0 16px 12px;}
.choice-toggle.on{background:rgba(40,96,110,.1);}

/* ---- Note ---- */
.dir-note{margin:0 16px 14px; padding:9px 12px; font-size:12.5px; line-height:1.7; color:var(--ink-soft);
  font-family:var(--serif-cjk); border-left:2px solid var(--gold); background:rgba(189,154,95,.07); border-radius:0 7px 7px 0; display:flex; gap:8px; align-items:flex-start;}
.dir-note__k{color:var(--gold); font-weight:600; font-family:var(--sans-cjk); font-size:11px; letter-spacing:.06em; flex:none; margin-top:4px;}

/* add-scene */
.add-scene{display:block; width:100%; margin:6px 0 0; padding:11px; border:1px dashed var(--gold); background:transparent;
  color:#8a6f3a; border-radius:10px; cursor:pointer; font-family:var(--sans-cjk); font-size:13px; letter-spacing:.06em; transition:.16s;}
.add-scene:hover{background:rgba(189,154,95,.1);}

/* ============ Modal ============ */
.modal{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;}
.modal[hidden]{display:none;}
.modal__scrim{position:absolute; inset:0; background:rgba(12,31,43,.62); backdrop-filter:blur(4px);}
.modal__card{position:relative; width:min(460px,100%); background:var(--paper); border-radius:14px; padding:26px; box-shadow:var(--shadow); border:1px solid var(--gold-soft); animation:rise .35s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}
.modal__title{font-family:var(--serif-cjk); font-size:22px; color:var(--sea-800); margin:0 0 6px; letter-spacing:.08em;}
.modal__lead{font-size:13px; color:var(--ink-soft); line-height:1.7; margin:0 0 20px;}
.modal__warn{font-size:11.5px; color:var(--rouge); line-height:1.6; background:rgba(193,87,78,.08); border-radius:7px; padding:9px 11px; margin:4px 0 0;}
.modal__actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}
.modal__actions .btn--ghost{color:var(--sea-700); border-color:rgba(40,96,110,.3);}
.modal__actions .btn--primary{width:auto; padding:11px 24px;}

.drawer-scrim{position:fixed; inset:0; background:rgba(12,31,43,.5); z-index:50;}
.drawer-scrim[hidden]{display:none;}

/* ============ Context sheet (设定集) ============ */
.ctx-badge{display:inline-block; margin-left:6px; font-size:10px; background:var(--rouge); color:#fff; border-radius:10px; padding:1px 6px; letter-spacing:.04em;}
.ctx-badge[hidden]{display:none;}
.sheet{position:fixed; inset:0; z-index:160; display:flex; justify-content:flex-end;}
.sheet[hidden]{display:none;}
.sheet__scrim{position:absolute; inset:0; background:rgba(12,31,43,.55); backdrop-filter:blur(4px);}
.sheet__panel{position:relative; width:min(840px,96vw); background:var(--paper); height:100%; display:flex; flex-direction:column; box-shadow:var(--shadow); border-left:1px solid var(--gold-soft); animation:sheetIn .3s cubic-bezier(.2,.7,.3,1);}
@keyframes sheetIn{from{transform:translateX(40px); opacity:.4;} to{transform:translateX(0); opacity:1;}}
.sheet__head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 26px 16px; border-bottom:1px solid var(--paper-line); flex:none;
  background:linear-gradient(135deg, var(--sea-800), var(--sea-900)); color:var(--paper);}
.sheet__title{margin:0 0 6px; font-family:var(--serif-cjk); font-weight:700; font-size:22px; letter-spacing:.1em; color:var(--paper);}
.sheet__scope{font-size:11px; letter-spacing:.1em; background:rgba(193,87,78,.3); border:1px solid rgba(217,138,126,.5); color:var(--gold-soft); border-radius:12px; padding:2px 9px; margin-left:8px; vertical-align:middle;}
.sheet__lead{margin:0; font-size:12.5px; line-height:1.7; color:var(--gold-soft); max-width:620px;}
.sheet__close{flex:none; border:1px solid rgba(216,189,140,.4); background:rgba(245,239,227,.06); color:var(--paper); width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:15px; transition:.16s;}
.sheet__close:hover{background:rgba(189,154,95,.2);}
.sheet__body{padding:22px 26px 40px; overflow:auto;}

.ctx-section{margin-bottom:30px;}
.ctx-section__head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.ctx-section__seal{font-family:var(--serif-cjk); font-weight:700; color:var(--paper); background:linear-gradient(135deg, var(--sea-700), var(--sea-800)); width:28px; height:28px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center; font-size:14px; box-shadow:inset 0 0 0 1px rgba(216,189,140,.4);}
.ctx-section__title{margin:0; font-family:var(--serif-cjk); font-weight:600; font-size:18px; letter-spacing:.1em; color:var(--sea-800);}
.ctx-section__sub{font-size:12px; color:var(--ink-faint);}
.ctx-section__add{margin-left:auto; font-size:12px; border:1px dashed var(--gold); background:transparent; color:#8a6f3a; border-radius:8px; padding:6px 12px; cursor:pointer; transition:.14s;}
.ctx-section__add:hover{background:rgba(189,154,95,.12);}
.ctx-empty{font-size:13px; color:var(--ink-faint); font-family:var(--serif-cjk); padding:10px 2px;}

/* worldview entry */
.wv{background:var(--paper-card); border:1px solid var(--paper-line); border-left:3px solid var(--sea-600); border-radius:10px; padding:12px 14px; margin-bottom:12px;}
.wv__head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.wv__head .ed{font-family:var(--serif-cjk); font-weight:600; font-size:15px; color:var(--sea-800);}
.wv__del,.ch__del{flex:none; border:none; background:transparent; color:var(--ink-faint); cursor:pointer; font-size:15px; padding:3px 6px; border-radius:6px; transition:.14s;}
.wv__del:hover,.ch__del:hover{color:var(--rouge); background:rgba(193,87,78,.1);}

/* character card */
.ch{background:var(--paper-card); border:1px solid var(--paper-line); border-left:3px solid var(--rouge); border-radius:11px; padding:14px 16px; margin-bottom:14px;}
.ch__head{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.ch__avatar{width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--serif-cjk); font-size:16px; background:var(--sea-600);}
.ch__name .ed{font-family:var(--serif-cjk); font-weight:700; font-size:17px; color:var(--ink);}
.ch__grid{display:grid; grid-template-columns:1fr 1fr; gap:9px 16px;}
.ch__field{display:flex; flex-direction:column; gap:3px;}
.ch__field--wide{grid-column:1 / -1;}
.ch__label{font-size:10.5px; letter-spacing:.1em; color:var(--sea-700); text-transform:uppercase; font-weight:500;}
.ch__field .ed{background:#fff; border:1px solid var(--paper-line); border-radius:7px; padding:7px 10px; font-family:var(--serif-cjk); font-size:13.5px;}
.ch__field .ed:hover{background:#fff;}

/* 参考素材 */
.mat-adds{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap;}
.mat-total{font-size:12px; color:var(--ink-faint); margin:0 0 12px; letter-spacing:.03em;}
.mat-total b{color:var(--sea-700);}
.mat-warn{color:var(--rouge);}
.mat{background:var(--paper-card); border:1px solid var(--paper-line); border-left:3px solid var(--gold); border-radius:11px; padding:12px 14px; margin-bottom:12px; transition:.16s;}
.mat--off{opacity:.55; border-left-color:var(--ink-faint);}
.mat__head{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap;}
.mat__type{flex:none; width:auto; font-size:11px; font-weight:500; padding:5px 8px; border-radius:7px; background:rgba(189,154,95,.14); color:#8a6f3a; border:1px solid rgba(189,154,95,.3); cursor:pointer;}
.mat__type:focus{border-color:var(--rouge-soft); box-shadow:none;}
.mat__title{flex:1; min-width:120px; font-family:var(--serif-cjk); font-weight:600; font-size:14px; color:var(--ink);}
.mat__count{flex:none; font-size:11px; color:var(--ink-faint); white-space:nowrap;}
.mat__toggle{flex:none; display:flex; align-items:center; gap:4px; font-size:12px; color:var(--sea-700); cursor:pointer; user-select:none;}
.mat__toggle input{width:auto; accent-color:var(--rouge); cursor:pointer;}
.mat__btn{flex:none; border:1px solid var(--paper-line); background:#fff; color:var(--sea-700); font-size:11.5px; padding:4px 9px; border-radius:7px; cursor:pointer; transition:.14s;}
.mat__btn:hover{background:rgba(40,96,110,.08);}
.mat__btn.danger{color:var(--ink-faint);}
.mat__btn.danger:hover{color:var(--rouge); background:rgba(193,87,78,.1); border-color:rgba(217,138,126,.4);}
.mat__body{background:#fff; border:1px solid var(--paper-line); border-radius:8px; padding:9px 11px; font-family:var(--serif-cjk); font-size:13.5px; line-height:1.7; min-height:38px;}
.mat__body:hover{background:#fff;}

/* ============ Toast ============ */
.toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--sea-800); color:var(--paper); padding:12px 22px; border-radius:30px; font-size:13.5px; letter-spacing:.05em;
  z-index:300; opacity:0; transition:.3s; box-shadow:var(--shadow); border:1px solid rgba(216,189,140,.4); max-width:80vw; text-align:center;}
.toast[hidden]{display:none;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast .toast__act{margin-left:12px; color:var(--gold-soft); text-decoration:underline; cursor:pointer;}

/* spinner */
.spinner{display:inline-block; width:14px; height:14px; border:2px solid rgba(245,239,227,.4); border-top-color:var(--paper); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============ Responsive ============ */
@media(max-width:1080px){
  .workbench{grid-template-columns:1fr;}
  .drawer{position:fixed; top:0; left:0; bottom:0; width:340px; max-height:100vh; border-radius:0; z-index:55; max-width:88vw;}
  body:not(.drawer-open) .drawer{transform:translateX(-110%); opacity:0; pointer-events:none;}
  body.drawer-collapsed .workbench{grid-template-columns:1fr;}
  .proj{justify-content:flex-start;}
  .masthead__tools .btn span.lbl{display:none;}
}

/* ============ Print ============ */
@media print{
  body{background:#fff; display:block;}
  .grain,.masthead,.drawer,.scene__tools,.beat__del,.beat-add,.cast-add,.heart-toggle,.choice-toggle,.choice__optdel,.choice__addopt,.add-scene,.drawer-scrim,.toast{display:none !important;}
  .workbench{display:block; max-width:none; padding:0;}
  .workspace{box-shadow:none; background:#fff;}
  .scene,.work-meta{break-inside:avoid; box-shadow:none;}
  .ed{border:none !important; background:transparent !important;}
  .work-meta{background:#12303a !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
}