/* 短剧工坊 · 手稿（E 风格） */
:root{
  --bg:#FBF6EC; --card:#FFFFFF; --ink:#221C16; --dim:#8B8072; --dim2:#B7AC9B;
  --red:#D6532F; --green:#3E6B5A; --line:#EDE4D3; --line2:#E0D4BE; --gold:#E8C87A;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  --r:18px; --safe-b:env(safe-area-inset-bottom,0px);
  --grad:linear-gradient(135deg,#E8C87A,#D6532F);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.65 var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:radial-gradient(rgba(180,160,120,.18) .8px,transparent .8px);background-size:4px 4px}
#app{position:relative;z-index:2;height:100%;display:flex;flex-direction:column}
.shell{max-width:440px;margin:0 auto;width:100%;height:100%;display:flex;flex-direction:column;position:relative}
@media(min-width:520px){.shell{border-left:1px solid var(--line);border-right:1px solid var(--line);background:rgba(255,255,255,.28)}}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 18px 24px}
.scroll::-webkit-scrollbar{width:0}

/* 通用 */
.h1{font-family:var(--serif);font-size:28px;font-weight:700;letter-spacing:.03em;margin:0;line-height:1.3}
.h2{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:.04em;margin:0}
.sub{color:var(--dim);font-size:12.5px;margin:5px 0 0;line-height:1.7}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grow{flex:1;min-width:0}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}
.muted{color:var(--dim)}.tiny{font-size:11.5px;line-height:1.7}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hide{display:none!important}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 8px 22px -20px rgba(120,100,60,1)}
.pad{padding:16px}

.btn{appearance:none;border:0;width:100%;padding:15px 18px;border-radius:14px;font-size:14.5px;font-weight:700;
  color:#FFF8EE;background:var(--ink);cursor:pointer;transition:transform .14s ease,opacity .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);letter-spacing:.03em;
  box-shadow:0 10px 22px -16px rgba(34,28,22,.95)}
.btn:active{transform:scale(.982)}
.btn[disabled]{opacity:.42;box-shadow:none}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 16px -18px rgba(120,100,60,1)}
.btn.gold{background:var(--red);color:#FFF8EE;box-shadow:0 10px 22px -16px rgba(214,83,47,.9)}
.btn.dangr{background:#fff;color:var(--red);border:1px solid rgba(214,83,47,.34);box-shadow:none}
.btn.mini{width:auto;padding:8px 12px;font-size:12px;border-radius:10px;font-weight:700}
.cost{font-variant-numeric:tabular-nums;font-weight:700;color:var(--red)}

.chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:999px;font-size:12.5px;
  background:#fff;border:1px solid var(--line);color:var(--dim);cursor:pointer;white-space:nowrap;
  box-shadow:0 3px 9px -8px rgba(120,100,60,.9)}
.chip.on{background:rgba(214,83,47,.08);border-color:rgba(214,83,47,.42);color:var(--red);font-weight:600}
.badge{font-size:10px;padding:3px 8px;border-radius:99px;font-weight:700;letter-spacing:.06em}
.badge.ai{background:rgba(214,83,47,.10);color:var(--red);border:1px solid rgba(214,83,47,.24)}
.badge.up{background:#F2F9F5;color:var(--green);border:1px solid #CFE0D6}
.badge.free{background:#FFF7E4;color:#9B7B2E;border:1px solid #F0E2C0}

input,textarea,select{font-family:var(--sans);font-size:14.5px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:13px;padding:13px 14px;width:100%;outline:none;
  transition:.18s;resize:none;box-shadow:0 4px 12px -14px rgba(120,100,60,1)}
input:focus,textarea:focus{border-color:rgba(214,83,47,.5);box-shadow:0 0 0 3px rgba(214,83,47,.08)}
::placeholder{color:var(--dim2)}

/* 顶栏 */
.top{display:flex;align-items:center;gap:10px;padding:16px 18px 10px;position:sticky;top:0;z-index:8;
  background:linear-gradient(180deg,rgba(251,246,236,.98),rgba(251,246,236,.86) 65%,rgba(251,246,236,0));
  backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:.04em}
.logo{display:none}
.brand::after{content:"。";color:var(--red);font-weight:700}
.pill{display:flex;align-items:center;gap:5px;padding:7px 13px;border-radius:999px;background:#fff;
  border:1px solid var(--line);color:var(--dim);font-size:12px;cursor:pointer;
  box-shadow:0 4px 12px -10px rgba(120,100,60,1);transition:transform .18s}
.pill b{font-family:var(--serif);font-size:15px;color:var(--red)}
.pill.bump{transform:scale(1.07)}
.icobtn{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#fff;
  border:1px solid var(--line);cursor:pointer;flex:none;color:var(--ink)}
.icobtn:active{transform:scale(.94)}

/* 底部导航 */
.nav{display:flex;border-top:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
  padding:7px 10px calc(7px + var(--safe-b));gap:6px;z-index:9}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0;color:var(--dim2);
  text-decoration:none;font-size:10.5px;font-weight:600;border-radius:12px;transition:.18s}
.nav a.on{color:var(--ink)}
.nav a.on svg{stroke:var(--red)}
.nav svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav .dot{width:4px;height:4px;border-radius:50%;background:var(--red);opacity:0;transform:scale(.3);transition:.2s}
.nav a.on .dot{opacity:1;transform:scale(1)}

/* 登录 */
.auth{flex:1;display:flex;flex-direction:column;justify-content:center;padding:30px 24px;gap:18px}
.auth .mark{width:56px;height:56px;border-radius:18px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;font-size:26px;box-shadow:0 12px 28px -22px rgba(120,100,60,1)}
.seg{display:flex;background:#F5EDDF;border:1px solid var(--line);border-radius:13px;padding:3px;gap:3px}
.seg b{flex:1;text-align:center;padding:9px;border-radius:10px;font-size:13.5px;color:var(--dim);cursor:pointer;transition:.2s;font-weight:600}
.seg b.on{background:#fff;color:var(--ink);box-shadow:0 3px 10px -8px rgba(120,100,60,1)}

/* 首页 */
.greet{padding:8px 0 2px}
.greet .e{display:inline-block;font-size:10.5px;letter-spacing:.16em;color:var(--red);
  border-bottom:2px dashed rgba(214,83,47,.35);padding-bottom:3px}
.greet h1{font-family:var(--serif);font-size:29px;line-height:1.32;letter-spacing:.03em;margin:11px 0 0}
.greet h1 em{font-style:normal;background:linear-gradient(180deg,transparent 62%,rgba(232,200,122,.55) 62%)}
.greet p{font-size:12.5px;color:var(--dim);margin:8px 0 0}

.hero{padding:16px;border-radius:var(--r);position:relative;overflow:hidden;
  background:linear-gradient(135deg,#FFF9EC,#FFFDF7);border:1px solid #F0E3C8}
.hero .k{font-size:11.5px;color:#8B7A55;letter-spacing:.02em}
.bal{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--red);line-height:1.1;margin-top:4px}
.bal s{text-decoration:none;font-size:12px;color:#A89771;margin-left:4px;font-family:var(--sans);font-weight:500}

.works{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.work{position:relative;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;cursor:pointer;box-shadow:0 10px 24px -20px rgba(120,100,60,1);transition:.18s}
.work:active{transform:scale(.985)}
.work .cv{width:100%;aspect-ratio:9/12;object-fit:cover;display:block;background:#F7F1E4}
.work .cv.ph{display:grid;place-items:center;font-size:24px;
  background:repeating-linear-gradient(45deg,#F7F0E2 0 10px,#FBF6EC 10px 20px)}
.work .sh{padding:9px 10px 10px;border-top:1px solid var(--line)}
.work .t{font-family:var(--serif);font-size:14.5px;font-weight:600;letter-spacing:.02em}
.work .m{font-size:10.5px;color:var(--dim);margin-top:2px}
.work .flag{position:absolute;top:9px;left:9px;z-index:2;background:rgba(255,255,255,.94)}

.empty{text-align:center;padding:8px 0 4px}
.frame{padding:10px}
.frame .glass{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 18px 26px;position:relative;overflow:hidden;
  box-shadow:0 14px 34px -28px rgba(120,100,60,1)}
.frame .glass::before{content:"";position:absolute;inset:9px;border:1.5px dashed #E3D8C4;border-radius:14px}
.frame .art{margin:0 auto 14px;width:104px;height:132px;position:relative}
.frame .art .ph{position:absolute;inset:0;border-radius:8px;background:#F7F1E4;border:1px solid var(--line);overflow:hidden}
.frame .art .ph::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(180,160,120,.10) 0 8px,transparent 8px 16px)}
.frame .art .strip{position:absolute;left:0;right:0;top:-8px;height:9px;background-image:repeating-linear-gradient(90deg,#E3D8C4 0 5px,transparent 5px 11px)}
.frame .art .cap{position:absolute;left:0;right:0;bottom:-10px;font-size:9px;letter-spacing:.2em;color:var(--dim2);text-align:center}
.frame .t1{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.04em;position:relative}
.frame .t2{font-size:12px;color:var(--dim);margin-top:6px;position:relative}

.sec{display:flex;align-items:flex-end;gap:9px;margin:26px 0 12px}
.sec h2{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:.05em;position:relative;margin:0}
.sec h2::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='4'%3E%3Cpath d='M0 3 Q10 0 20 3 T40 3' fill='none' stroke='%23E8C87A' stroke-width='2'/%3E%3C/svg%3E") repeat-x}
.sec .sp{flex:1}
.sec u{text-decoration:none;font-size:11.5px;color:var(--dim)}

.s3{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:15px;
  padding:12px 14px;box-shadow:0 6px 18px -20px rgba(120,100,60,1);margin-bottom:9px}
.s3 .n{width:25px;height:25px;flex:none;border-radius:9px;background:#F7F1E4;border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--serif);font-size:13.5px;font-weight:700;color:var(--red)}
.s3 .tx{flex:1}
.s3 .tx b{font-size:13px;font-weight:600}
.s3 .tx p{font-size:11.5px;color:var(--dim);margin:3px 0 0;line-height:1.65}
.s3 .c{font-size:11px;color:var(--red);white-space:nowrap}

/* 步骤条 */
.steps{display:flex;gap:7px;margin:14px 0 4px}
.step{flex:1;text-align:center;padding:9px 0;border-radius:12px;font-size:11.5px;font-weight:600;
  background:#fff;border:1px solid var(--line);color:var(--dim);position:relative;
  box-shadow:0 4px 12px -14px rgba(120,100,60,1);transition:.2s}
.step.on{background:var(--red);color:#FFF8EE;border-color:var(--red);transform:rotate(-1deg);
  box-shadow:0 7px 16px -10px rgba(214,83,47,.75)}
.step.done{color:var(--green);border-color:#CFE0D6;background:#F5FAF7}
.step.done::before{content:"✓ ";font-weight:700}

/* 剧本 */
.script{font-size:13px;line-height:2;white-space:pre-wrap;word-break:break-word;color:#443A30;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 17px;max-height:46vh;overflow:auto;
  box-shadow:0 8px 22px -22px rgba(120,100,60,1);position:relative}
.script::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:16px 0 0 16px;
  background:linear-gradient(180deg,var(--gold),var(--red))}

/* 资产 */
.assets{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.asset{position:relative;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);
  cursor:pointer;box-shadow:0 10px 24px -22px rgba(120,100,60,1);transition:.16s}
.asset:active{transform:scale(.985)}
.asset img{width:100%;aspect-ratio:9/12;object-fit:cover;display:block;background:#F7F1E4}
.asset .gr{display:none}
.asset .nm{position:absolute;left:0;right:0;bottom:0;padding:9px 10px 10px;font-family:var(--serif);
  font-size:14px;font-weight:600;letter-spacing:.02em;color:#FFF8EE;
  background:linear-gradient(0deg,rgba(20,14,10,.92),rgba(20,14,10,.55) 55%,transparent)}
.asset .bd{position:absolute;top:8px;left:8px;background:rgba(255,255,255,.95)}
.add{border-radius:16px;border:1.5px dashed var(--line2);display:grid;place-items:center;text-align:center;gap:5px;
  color:var(--dim);font-size:12px;font-weight:600;background:rgba(255,255,255,.55);cursor:pointer;padding:16px 8px}
.add:active{background:rgba(214,83,47,.06);border-color:rgba(214,83,47,.4)}
.add .plus{font-size:20px;line-height:1;color:var(--dim2)}

/* 镜头 */
.shot{display:flex;gap:12px;padding:11px;border-radius:15px;background:#fff;border:1px solid var(--line);
  margin-bottom:10px;box-shadow:0 6px 18px -20px rgba(120,100,60,1)}
.shot .th{width:70px;height:100px;border-radius:11px;overflow:hidden;flex:none;background:#F7F1E4;position:relative}
.shot .th img{width:100%;height:100%;object-fit:cover}
.shot .th .du{position:absolute;right:3px;bottom:3px;font-size:9px;font-weight:700;padding:2px 4px;border-radius:4px;
  background:rgba(255,255,255,.92);color:var(--ink)}
.shot .ttl{font-size:13px;font-weight:600;margin-bottom:2px}
.shot .ds{font-size:11.5px;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.durs{display:flex;gap:6px;margin-top:8px}
.durs b{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:8px;background:#fff;
  border:1px solid var(--line);color:var(--dim);cursor:pointer}
.durs b.on{background:rgba(214,83,47,.09);border-color:rgba(214,83,47,.38);color:var(--red)}

/* 播放器 */
.player{width:100%;border-radius:16px;overflow:hidden;background:#0E0A08;border:1px solid var(--line);display:block}
.player video{width:100%;display:block;max-height:56vh;object-fit:contain;background:#0E0A08}

/* 流水 */
.led{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.led:last-child{border-bottom:0}
.led .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:14px;flex:none}
.led .ic.m{background:rgba(214,83,47,.10);color:var(--red)}
.led .ic.p{background:#F2F9F5;color:var(--green)}
.led .d{font-size:13px;font-weight:600}
.led .t{font-size:10.5px;color:var(--dim2);margin-top:1px}
.led .v{font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}
.led .v.m{color:var(--red)}.led .v.p{color:var(--green)}

/* 弹层 */
.mask{position:fixed;inset:0;background:rgba(40,30,20,.34);backdrop-filter:blur(4px);z-index:50;
  display:flex;align-items:flex-end;justify-content:center;animation:fade .18s ease}
.sheet{width:100%;max-width:440px;background:#FFFDF8;border:1px solid var(--line);border-radius:22px 22px 0 0;
  padding:18px 18px calc(18px + var(--safe-b));animation:up .26s cubic-bezier(.2,.9,.2,1);max-height:88vh;overflow:auto;
  box-shadow:0 -12px 34px -24px rgba(120,100,60,1)}
@media(min-width:520px){.mask{align-items:center}.sheet{border-radius:22px;margin:0 16px}}
.sheet .bar{width:36px;height:4px;border-radius:99px;background:var(--line2);margin:-4px auto 14px}
.lbl{font-size:11.5px;font-weight:700;color:var(--dim);margin:14px 0 7px;letter-spacing:.06em}
.spin{width:14px;height:14px;border:2px solid rgba(34,28,22,.22);border-top-color:var(--ink);border-radius:50%;
  animation:sp .7s linear infinite;display:inline-block}
.loading{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--dim);font-size:13px;padding:16px}
.skel{background:linear-gradient(90deg,#F5EDDF 25%,#FBF6EC 37%,#F5EDDF 63%);background-size:400% 100%;
  animation:sk 1.3s ease infinite;border-radius:14px}

/* toast */
#toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-160%);z-index:99;max-width:86%;
  padding:11px 16px;border-radius:13px;font-size:13px;font-weight:600;background:rgba(34,28,22,.96);color:#FFF8EE;
  box-shadow:0 18px 40px -20px rgba(34,28,22,.9);transition:transform .3s cubic-bezier(.2,.9,.2,1);
  display:flex;align-items:center;gap:8px}
#toast.on{transform:translate(-50%,0)}
#toast.ok{background:#274D3E}
#toast.err{background:#8E2F1C}

/* 动画 */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(38px);opacity:.5}to{transform:translateY(0);opacity:1}}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.in{animation:fadeUp .28s ease both}
.in2{animation:fadeUp .28s .05s ease both}
.in3{animation:fadeUp .28s .1s ease both}
.gen{position:relative;overflow:hidden}
.gen::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.4) 45%,transparent 70%);
  animation:sh 1.2s linear infinite}
@keyframes sh{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}