/* Sokaris V12.0 「Modern」重设计层（Seedance 式处理 × 深色底）
   方向：视频内容为主角、大而克制的无衬线标题、发丝线级 chrome、
   胶囊按钮、大留白。金色从"到处都是"降级为唯一的稀缺强调色。
   取代 v119-prime.css（其焦点环/滚动条/品牌规则已并入本文件）。
   机制说明：全站衬线标题都走 var(--serif)，这里把该变量重定义为
   无衬线栈，一行完成整站去衬线化。 */

:root{
  /* 拾帧 BITFRAME 设计系统 06 颜色与材质令牌：
     Carbon Black / Graphite / Border Gray / Stone Gray / Warm White /
     Frame Light / Bitframe Gold / Gold Glow。变量名不动，全站跟着换。 */
  --bg:#0a0a0a;--bg2:#101010;
  --surface:#141414;--surface2:#1c1c1c;--surface3:#242424;
  --line:#2a2a2a;--line2:#3a3a3a;
  --text:#ede8d9;--muted:#9a978f;--dim:#6b6b6b;
  --gold:#ffc861;--gold2:#f7e7b5;--glow:rgba(255,200,97,.6);
  --green:#4ade80;--red:#f87171;--blue:#7dd3fc;--purple:#c4b5fd;
  --shadow:0 24px 70px rgba(0,0,0,.5);--shadow2:0 8px 28px rgba(0,0,0,.35);
  --r:16px;
  --sans:'Inter','Inter var',-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  --serif:'Inter','Inter var',-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  --ring:0 0 0 2px rgba(10,10,10,1),0 0 0 4px rgba(255,200,97,.65);
}
html,body{background:radial-gradient(900px 480px at 50% -160px,#17171b 0,#0e0e11 45%,#0a0a0c 100%);color:var(--text);font-family:var(--sans)}
body:before{display:none}  /* 去掉噪点纹理：现代处理靠留白与层次，不靠材质 */
h1,h2,h3{letter-spacing:-.01em}
html[lang=en] h1,html[lang=en] h2{letter-spacing:-.025em}

/* ---------- 顶栏 ---------- */
.topbar{height:64px;background:rgba(10,10,12,.75);backdrop-filter:blur(22px) saturate(1.15);border-bottom:1px solid var(--line)}
/* 新 logo 自带发光和透明留白，30px 太小了看不清 */
.brand-wordmark{height:46px;width:auto;object-fit:contain;display:block;filter:none}
.brand-fallback{display:flex;align-items:center;gap:10px}
.brand-fallback[hidden]{display:none!important}
.mode{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:999px;padding:4px}
.mode button{color:var(--muted);border-radius:999px;padding:8px 22px;font-weight:550;letter-spacing:0;transition:color .18s ease,background .18s ease}
.mode button.on{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.mode button:not(.on):hover{color:#d6d6dc}
.top-link{background:transparent;border:1px solid transparent;border-radius:999px;color:var(--muted);font-weight:550;transition:color .18s ease,background .18s ease}
.top-link:hover{background:rgba(255,255,255,.06);border-color:transparent;color:#fff}
.lang-toggle-v119{color:var(--muted);min-width:44px;letter-spacing:.04em}
.lang-toggle-v119:hover{color:#fff}
.avatar{background:linear-gradient(135deg,#e3bd57,#8a7434);box-shadow:none}

/* ---------- 首页 Hero 与创作台 ---------- */
.app{padding-top:56px}
.hero{margin:8px auto 34px}
.eyebrow{color:var(--dim);letter-spacing:.34em;font-weight:600;font-size:11px}
.hero h1{font:650 clamp(46px,5.6vw,84px)/1.06 var(--sans);letter-spacing:-.02em;margin:16px 0 14px;
  background:linear-gradient(180deg,#ffffff 30%,#b9b9c2);-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang=en] .hero h1{letter-spacing:-.045em}
.hero p{color:var(--muted);font-size:16px;letter-spacing:0}
.composer{border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.035);box-shadow:none;backdrop-filter:blur(8px);transition:border-color .2s ease,background .2s ease}
.composer:focus-within{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);box-shadow:0 0 0 4px rgba(227,189,87,.07)}
.editor{border-bottom:1px solid var(--line);font-size:17px;line-height:1.9}
.editor:empty:before{color:var(--dim)}
.tool{background:rgba(255,255,255,.05);border:1px solid transparent;border-radius:999px;color:#c9c9d1;font-weight:520;transition:background .18s ease,color .18s ease}
.tool:hover{background:rgba(255,255,255,.1);border-color:transparent;color:#fff}
.tool.on{background:rgba(227,189,87,.14);border-color:rgba(227,189,87,.35);color:var(--gold2)}
.chip{background:rgba(255,255,255,.05);border-color:transparent;border-radius:999px;color:#b9b9c1}
.chip.auto{background:rgba(74,222,128,.1);border-color:transparent;color:#86e5a5}

/* ---------- 按钮体系：胶囊化、去渐变 ---------- */
.gold{background:var(--gold);border:1px solid var(--gold);border-radius:999px;color:#141005;font-weight:650;letter-spacing:0;box-shadow:none;transition:background .18s ease,transform .18s ease}
.gold:hover{background:var(--gold2);border-color:var(--gold2);transform:none;filter:none;box-shadow:none}
.gold:active{background:#d4ae4b}
.btn,.ghost{background:rgba(255,255,255,.06);border:1px solid transparent;border-radius:999px;color:#e6e6ec;font-weight:550;transition:background .18s ease}
.btn:hover,.ghost:hover{background:rgba(255,255,255,.11);border-color:transparent;color:#fff}
.danger{background:rgba(248,113,113,.1);border:1px solid transparent;border-radius:999px;color:#fca5a5}
.danger:hover{background:rgba(248,113,113,.16)}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--ring)}

/* ---------- 卡片：内容优先、发丝线、16px 圆角 ---------- */
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:none;transition:border-color .2s ease,background .2s ease,transform .2s ease}
.direction-card:hover,.skill-card:hover,.project-card:hover,.asset-card:hover{transform:translateY(-3px);border-color:var(--line2);background:var(--surface2);box-shadow:var(--shadow2)}
.direction-card.selected{border-color:rgba(227,189,87,.6);box-shadow:0 0 0 1px rgba(227,189,87,.35)}
.direction-card h3{font:640 22px/1.3 var(--sans);letter-spacing:-.01em}
.label{color:var(--gold);letter-spacing:.14em;font-size:10px}
.kv{border-top:1px dashed rgba(255,255,255,.08);color:#c9c9d1}
.kv b{color:var(--gold)}
.beat:before{border-color:rgba(227,189,87,.4);color:var(--gold);background:transparent}
.tag,.choice{background:rgba(255,255,255,.05);border:1px solid transparent;border-radius:999px;color:#c1c1c9}
.tag.on,.choice.on{background:rgba(227,189,87,.14);border-color:rgba(227,189,87,.4);color:var(--gold2)}
.recommend,.cap{border-left:2px solid rgba(227,189,87,.7);background:rgba(255,255,255,.03);border-radius:0 10px 10px 0}

/* ---------- Skill 目录：封面为主角 ---------- */
.skill-catalog{gap:18px}
.skill-card{min-height:0;border-radius:var(--r);overflow:hidden}
.skill-cover{aspect-ratio:16/10;background:#101013;position:relative}
.skill-cover:after{display:none} /* 移除「SOKARIS SKILL」角标：内容自己说话 */
.skill-cover img,.skill-cover video{width:100%;height:100%;object-fit:cover;display:block}
.skill-cover video{position:absolute;inset:0}
.skill-card:hover .skill-cover img{transform:scale(1.03)}
.skill-cover img{transition:transform .5s ease}
.skill-body{padding:14px 16px 16px}
.skill-body h3{font:640 17px/1.35 var(--sans);letter-spacing:-.01em;margin:0 0 5px}
.skill-body .asset-meta{min-height:0;color:var(--muted);font-size:12.5px}
.skill-status{border-radius:999px;border-color:transparent;background:rgba(255,255,255,.07);color:#b5b5bd;letter-spacing:.04em}
.skill-status.internal_verified{background:rgba(227,189,87,.13);color:var(--gold2);border-color:transparent}
.skill-step{border-radius:999px;background:rgba(255,255,255,.04);border-color:transparent}
.skill-step.on{background:rgba(227,189,87,.13);border-color:transparent;color:var(--gold2)}
.skill-step.done{background:rgba(74,222,128,.1);border-color:transparent;color:#86e5a5}

/* ---------- 阶段导航与页面标题 ---------- */
.stages{border-bottom:1px solid var(--line);gap:2px}
.stages button{font-weight:550;color:var(--dim);letter-spacing:0;transition:color .18s ease}
.stages button.on{color:#fff;border-bottom:2px solid #fff;text-shadow:none}
.stages button:not(:disabled):hover{color:#c5c5cd}
.section h2,.page-title h1,.modal-head h2{font-family:var(--sans);font-weight:650;letter-spacing:-.02em}
.section h2{font-size:30px}
.page-title h1{font-size:38px}
.modal-head h2{font-size:21px}
.empty h3{font-family:var(--sans);font-weight:640}
.sub{letter-spacing:0}

/* ---------- 表单 / 弹窗 / 提示 ---------- */
input,select,textarea,.rich-input{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;color:var(--text);transition:border-color .18s ease,box-shadow .18s ease}
input:focus,textarea:focus,select:focus,.rich-input:focus{border-color:rgba(227,189,87,.5);box-shadow:0 0 0 3px rgba(227,189,87,.1)}
.field label{color:var(--muted);letter-spacing:.02em}
.modal-layer{background:rgba(6,6,8,.7);backdrop-filter:blur(18px)}
.modal{border:1px solid var(--line2);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.modal-head,.modal-foot{border-color:var(--line)}
.toast{background:rgba(28,28,32,.92);border:1px solid var(--line2);backdrop-filter:blur(12px);border-radius:999px;box-shadow:var(--shadow2)}
.prompt-box{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:14px}
.upload-zone{border:1px dashed rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.02)}
.upload-zone.drag{border-color:var(--gold);background:rgba(227,189,87,.06)}

/* ---------- 会话 / 聊天 ---------- */
.bubble{background:var(--surface2);border-radius:16px;box-shadow:none}
.msg.user .bubble{background:rgba(227,189,87,.13);color:#f2dda2}
.bot{background:rgba(125,211,252,.12);color:#7dd3fc;border-radius:10px}
.skill-head h2{font-family:var(--sans);font-weight:650}
.resource-thumb{border-radius:12px;background:#101013}

/* ---------- 素材 / 项目页 ---------- */
.project-preview{border-radius:12px;background:linear-gradient(135deg,#1b1b20,#121215)}
.asset-thumb{background:#101013}
.folder{border-radius:10px;color:#b5b5bd}
.folder.on,.folder:hover{background:rgba(255,255,255,.07);color:#fff}
.asset-type-tabs button,.settings-tabs button,.pref-tabs button{border-radius:999px;background:rgba(255,255,255,.04);border-color:transparent;color:#b5b5bd}
.asset-type-tabs button.on,.settings-tabs button.on{background:rgba(227,189,87,.13);border-color:transparent;color:var(--gold2)}
.platform-pill{border-radius:999px;background:rgba(255,255,255,.04);border-color:transparent}
.platform-pill.on{background:rgba(227,189,87,.13);border-color:rgba(227,189,87,.4);color:var(--gold2)}

/* ---------- 滚动条 / 无障碍 ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25);border:2px solid transparent;background-clip:content-box}
@media(max-width:760px){.brand-wordmark{height:32px}.hero h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important}.skill-card:hover .skill-cover img{transform:none}}