/* ═══════════════════════════════════════════════════════════
   CARD TERMINAL — 名片工坊
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#0a0a0a;
  --bg-2:#0c0c0c;
  --ink:#e6e6e6;
  --ink-2:#b8b8b8;
  --dim:#8c8c8c;
  --dim-2:#5f5f5f;
  --accent:#e8e8e8;
  --accent-2:#ffffff;
  --amber:#dcdcdc;
  --danger:#ff5c5c;
  --line:rgba(255,255,255,.15);
  --line-2:rgba(255,255,255,.07);
  --hud:'HudFont','Bahnschrift','Segoe UI',sans-serif;
  --cn:'Microsoft YaHei UI','Microsoft YaHei','PingFang SC','Noto Sans SC',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--cn);font-size:14px;line-height:1.5;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 900px at 10% -12%,rgba(255,255,255,.055),transparent 62%),
    radial-gradient(1000px 820px at 108% 112%,rgba(255,255,255,.04),transparent 60%),
    radial-gradient(700px 560px at 50% 46%,rgba(44,44,44,.30),transparent 72%),
    linear-gradient(180deg,#080808,#0b0b0b 55%,#080808);
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 18%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 42%,#000 18%,transparent 78%);
  opacity:.6;
}
button{font-family:inherit}
img{user-select:none;-webkit-user-drag:none}
::selection{background:rgba(255,255,255,.28);color:#fff}

::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border:1px solid rgba(0,0,0,.4)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34)}

/* ───────────── 基础组件 ───────────── */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.brand__logo{height:24px;width:auto;display:block;flex:0 0 auto}
.brand--boot .brand__logo{height:30px}
.brand__txt{display:flex;flex-direction:column;gap:3px;line-height:1.05;min-width:0}
.brand__txt b{font-family:var(--hud);font-size:15px;font-weight:600;letter-spacing:.26em;color:#f4f4f4;white-space:nowrap}
.brand__txt span{font-family:var(--hud);font-size:9px;letter-spacing:.2em;color:var(--dim);white-space:nowrap}

.idx{
  font-family:var(--hud);font-size:9px;line-height:1;letter-spacing:.08em;
  color:var(--amber);border:1px solid rgba(232,232,232,.32);padding:3px 4px;
  flex:0 0 auto;
}
.hint{margin-left:auto;font-family:var(--hud);font-size:8.5px;letter-spacing:.22em;color:var(--dim-2)}

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 18px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);background:rgba(20,20,20,.6);color:var(--ink);
  font-family:var(--hud);font-size:11px;letter-spacing:.16em;
  transition:border-color .25s,color .25s,background .25s,transform .18s;
}
.btn:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:#fff}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn--primary{
  background:linear-gradient(105deg,#f4f4f4,#c9c9c9);border-color:transparent;
  color:#0c0c0c;font-weight:700;letter-spacing:.2em;
  box-shadow:0 6px 22px rgba(255,255,255,.18);
}
.btn--primary:hover{background:linear-gradient(105deg,#ffffff,#e0e0e0);color:#0c0c0c}
.btn__shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 26%,rgba(255,255,255,.55) 50%,transparent 74%);
  transform:translateX(-130%);
}
.btn--primary:hover .btn__shine{transform:translateX(130%);transition:transform .7s ease}
.btn--block{width:100%;height:48px;margin-top:13px}
.btn--boot{width:100%;height:52px;font-size:13px}

.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 2.4s infinite}
.chip{
  display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;
  border:1px solid var(--line);background:rgba(255,255,255,.045);
  font-family:var(--hud);font-size:9.5px;letter-spacing:.18em;color:var(--accent);
}
.chip--dim{color:var(--dim);border-color:var(--line-2);background:transparent}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ═════════════════ 开屏 ═════════════════ */
.boot{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:#080808;overflow:hidden;
}
.boot__glow{
  position:absolute;left:-240px;top:-320px;width:1000px;height:1000px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.13),transparent 64%);filter:blur(30px);
}
.boot__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 8%,transparent 70%);
  mask-image:radial-gradient(circle at 50% 50%,#000 8%,transparent 70%);
}
.boot__word{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-9deg);
  font-family:var(--hud);font-weight:700;white-space:nowrap;pointer-events:none;
  font-size:clamp(80px,15vw,220px);letter-spacing:.12em;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.075);
}
.boot__wrap{position:relative;z-index:2;width:min(720px,92vw)}
.boot__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.boot__sys{font-family:var(--hud);font-size:10px;letter-spacing:.26em;color:var(--dim)}
.boot__sys span{color:var(--accent)}

.boot__panel{
  position:relative;margin-top:18px;padding:32px 36px 26px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(16,16,16,.94),rgba(7,7,7,.97));
  box-shadow:0 40px 120px rgba(0,0,0,.75),inset 0 0 80px rgba(255,255,255,.02);
}
.hazard{
  position:absolute;left:0;right:0;top:0;height:4px;
  background:repeating-linear-gradient(45deg,#dcdcdc 0 10px,#121212 10px 20px);
  opacity:.9;
}
.boot__tag{
  display:flex;align-items:center;gap:9px;
  font-family:var(--hud);font-size:10px;letter-spacing:.26em;color:var(--amber);
}
.boot__tag i{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.boot__tag em{font-style:normal;color:var(--dim-2)}
.boot__title{
  margin:18px 0 14px;font-size:clamp(30px,4vw,44px);line-height:1.22;
  font-weight:700;letter-spacing:.05em;color:#f6f6f6;
}
.boot__line{display:block;overflow:hidden;padding-bottom:2px}
.boot__line>span{display:block}
.boot__title .accent{color:var(--accent);text-shadow:0 0 44px rgba(255,255,255,.4)}
.boot__desc{margin:0 0 20px;max-width:610px;font-size:12.5px;line-height:1.85;color:var(--dim);letter-spacing:.03em}
.boot__list{
  list-style:none;margin:0 0 18px;padding:1px;display:grid;gap:1px;
  border:1px solid var(--line-2);background:var(--line-2);
}
.boot__list li{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 12px;background:rgba(9,9,9,.94);
  font-family:var(--hud);font-size:9.5px;letter-spacing:.18em;color:var(--dim-2);
}
.boot__list b{font-weight:400;letter-spacing:.12em;color:var(--accent)}
.boot__list b.is-wait{color:var(--dim-2)}
.boot__bar{height:2px;margin-bottom:20px;background:rgba(255,255,255,.07);overflow:hidden}
.boot__bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px rgba(255,255,255,.8)}
.boot__foot{margin:13px 0 0;text-align:center;font-size:10px;letter-spacing:.12em;color:var(--dim-2)}
.boot__bottom{display:flex;justify-content:space-between;margin-top:16px;font-family:var(--hud);font-size:9px;letter-spacing:.24em;color:var(--dim-2)}

/* ═════════════════ 主布局 ═════════════════ */
.app{position:relative;z-index:1;height:100vh;display:flex;flex-direction:column}

.topbar{
  flex:0 0 auto;height:76px;display:flex;align-items:center;gap:22px;
  padding:0 26px;border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(5,12,14,.6),transparent);
}
.topbar__meta{margin-left:auto;display:flex;align-items:center;gap:10px}
.topbar__acts{display:flex;align-items:center;gap:10px}
.topbar__acts .btn--primary{height:42px;padding:0 22px}

.workspace{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:308px minmax(0,1fr) 336px;
  gap:16px;padding:16px 22px 14px;
}

/* ───────────── 面板 ───────────── */
.panel{
  position:relative;min-height:0;display:flex;flex-direction:column;
  padding:0;overflow:hidden;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(18,18,18,.72),rgba(9,9,9,.82));
  backdrop-filter:blur(12px);
}
.panel__body{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  padding:18px 18px 0;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
}
.panel::before,.panel::after{
  content:'';position:absolute;width:12px;height:12px;pointer-events:none;
  border:1px solid rgba(255,255,255,.32);
}
.panel::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.panel::after{right:-1px;bottom:-1px;border-left:0;border-top:0}

.group{padding-bottom:18px;margin-bottom:16px;border-bottom:1px solid var(--line-2)}
.group:last-of-type{border-bottom:0;margin-bottom:10px}
.group__head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.group__head h2{margin:0;font-size:13.5px;font-weight:600;letter-spacing:.1em;color:#ededed}
.group--export{padding-bottom:4px}
.panel__foot{margin-top:auto;padding:10px 0 18px;font-size:10px;line-height:1.7;letter-spacing:.03em;color:var(--dim-2)}

/* ───────────── 输入 ───────────── */
.field{display:block;position:relative;margin-bottom:13px}
.field:last-child{margin-bottom:0}
.field__label{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:11px;letter-spacing:.1em;color:var(--dim)}
.field__label em{font-style:normal;font-size:10px;color:var(--dim-2);letter-spacing:.04em}
.field input{
  width:100%;height:46px;padding:0 48px 0 13px;
  background:rgba(0,0,0,.42);border:1px solid var(--line-2);color:#f6f6f6;
  font-family:var(--cn);font-size:16px;letter-spacing:.03em;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.field input:hover{border-color:rgba(255,255,255,.24)}
.field input:focus{
  border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.05);
  box-shadow:0 0 0 3px rgba(255,255,255,.07),inset 0 0 20px rgba(255,255,255,.05);
}
.field__count{position:absolute;right:11px;bottom:15px;font-family:var(--hud);font-size:9.5px;letter-spacing:.08em;color:var(--dim-2)}

/* ───────────── 素材行 ───────────── */
.slotrow{
  display:flex;align-items:center;gap:11px;padding:8px;
  border:1px solid var(--line-2);background:rgba(0,0,0,.22);
  transition:border-color .25s,background .25s;
}
.slotrow:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.035)}
.slotrow__thumb{
  flex:0 0 auto;padding:0;cursor:pointer;overflow:hidden;position:relative;
  width:52px;height:52px;border:1px solid var(--line);
  background:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%) 0 0/12px 12px;
  transition:border-color .2s;
}
.slotrow__thumb:hover{border-color:var(--accent)}
.slotrow__thumb img{display:block;width:100%;height:100%;object-fit:contain}
.slotrow__thumb--tall{width:44px;height:70px}
.slotrow__thumb--wide{width:92px;height:36px}
.slotrow__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.slotrow__info b{font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slotrow__info span{font-family:var(--hud);font-size:8.5px;letter-spacing:.12em;color:var(--dim-2)}
.slotrow__ops{display:flex;gap:5px;flex:0 0 auto}
.mini{
  height:27px;padding:0 8px;cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--dim);
  font-family:var(--cn);font-size:10.5px;letter-spacing:.04em;
  transition:background .2s,color .2s,border-color .2s;
}
.mini:hover{background:var(--accent);border-color:var(--accent);color:#0c0c0c}
.mini--up{width:27px;padding:0;font-family:var(--hud);font-size:12px}

/* ───────────── 徽章位 ───────────── */
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.badge{
  position:relative;aspect-ratio:1;padding:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--line-2);
  background:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%) 0 0/14px 14px;
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.badge img{display:block;width:100%;height:100%;object-fit:cover}
.badge__n{
  position:absolute;left:5px;top:3px;font-family:var(--hud);font-size:8.5px;
  letter-spacing:.12em;color:rgba(255,255,255,.65);text-shadow:0 1px 3px #000;
}
.badge__edit{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(10,10,10,.7);opacity:0;
  font-size:10.5px;letter-spacing:.18em;color:var(--accent);
  transition:opacity .2s;
}
.badge:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.22),0 12px 26px rgba(0,0,0,.55)}
.badge:hover .badge__edit{opacity:1}
.badge:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.badge.is-custom{box-shadow:inset 0 0 0 1px rgba(232,232,232,.5)}
.badge.is-empty img{display:none}
.badge.is-empty::after{
  content:'空';position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--hud);font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.3);
}
.badge.is-empty{border-style:dashed;background:rgba(255,255,255,.02)}

/* ───────────── 导出分段 ───────────── */
.seg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2);overflow:hidden}
.seg button{
  height:38px;border:0;border-right:1px solid var(--line-2);background:rgba(0,0,0,.32);
  color:var(--dim);font-family:var(--hud);font-size:11px;letter-spacing:.1em;cursor:pointer;
  transition:background .2s,color .2s;
}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.seg button.is-active{background:rgba(255,255,255,.14);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.seg__hint{margin:10px 0 0;font-family:var(--hud);font-size:9px;letter-spacing:.13em;color:var(--dim-2)}
.group__note{margin:11px 0 0;font-size:10px;line-height:1.7;color:var(--dim-2);letter-spacing:.02em}
.group__note--drag{font-family:var(--hud);font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.32)}

/* ───────────── 留空 / 拖动 ───────────── */
.slotrow__thumb.is-empty{border-style:dashed;background:rgba(255,255,255,.015)}
.slotrow__thumb.is-empty img{display:none}
.slotrow__thumb.is-empty::after{
  content:'空';display:grid;place-items:center;width:100%;height:100%;
  font-family:var(--hud);font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.32);
}
.lib-item--none .lib-item__img{border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.015)}
.none-glyph{
  display:grid;place-items:center;width:100%;height:100%;
  font-family:var(--hud);font-size:15px;letter-spacing:.2em;color:rgba(255,255,255,.34);
}
.lib-item--none .lib-item__name{color:rgba(255,255,255,.45)}
.card-frame.is-draggable{cursor:grab}
.card-frame.is-draggable canvas{cursor:grab}
.card-frame.is-dragging{cursor:grabbing}
.card-frame.is-dragging canvas{cursor:grabbing}

/* ───────────── 分隔条 / 素材统计 ───────────── */
.divider{display:flex;align-items:center;gap:10px;margin:22px 0 13px;font-family:var(--hud);font-size:9px;letter-spacing:.2em;color:var(--dim-2)}
.divider i{width:14px;height:1px;background:var(--accent);opacity:.55}
.divider::after{content:'';flex:1;height:1px;background:var(--line-2)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{padding:12px 6px;border:1px solid var(--line-2);background:rgba(0,0,0,.3);text-align:center}
.stat b{display:block;font-family:var(--hud);font-size:19px;line-height:1;color:var(--accent);font-weight:600}
.stat span{display:block;margin-top:8px;font-size:9px;letter-spacing:.16em;color:var(--dim);font-family:var(--hud)}

.spec{border:1px solid var(--line-2);background:rgba(0,0,0,.26)}
.spec__row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.08);font-size:11px}
.spec__row:last-child{border-bottom:0}
.spec__row span{color:var(--dim);letter-spacing:.04em}
.spec__row b{font-family:var(--hud);font-size:10.5px;font-weight:400;letter-spacing:.1em;color:var(--ink)}

/* ═════════════════ 舞台 ═════════════════ */
.stage{
  position:relative;min-height:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  perspective:1500px;
}
.rings{
  position:absolute;left:50%;top:50%;height:120%;aspect-ratio:1;
  transform:translate(-50%,-50%);opacity:.6;pointer-events:none;
}
.rings__r{fill:none;stroke:rgba(255,255,255,.15);stroke-width:1;transform-box:view-box;transform-origin:center}
.rings__r--a{stroke-dasharray:1 15;animation:spin 90s linear infinite}
.rings__r--b{stroke:rgba(255,255,255,.09);stroke-dasharray:70 50 3 46;animation:spin 140s linear infinite reverse}
.rings__r--c{stroke:rgba(232,232,232,.11);stroke-dasharray:1 28;animation:spin 70s linear infinite}
.rings__tick{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.2}
.rings__tick--dim{stroke:rgba(255,255,255,.16)}

.stage__label{
  position:absolute;top:50%;display:flex;align-items:center;gap:10px;
  writing-mode:vertical-rl;font-family:var(--hud);font-size:8.5px;
  letter-spacing:.28em;color:var(--dim-2);pointer-events:none;
}
.stage__label i{width:1px;height:40px;background:linear-gradient(180deg,transparent,var(--accent),transparent);opacity:.5}
.stage__label--l{left:6px}
.stage__label--r{right:6px;transform:translateY(-50%)}

.card-3d{position:relative;transform-style:preserve-3d;will-change:transform}
.card-frame{
  position:relative;border:1px solid rgba(255,255,255,.28);background:#080808;
  box-shadow:0 44px 120px rgba(0,0,0,.78),0 0 70px rgba(255,255,255,.06);
}
.card-frame::after{content:'';position:absolute;inset:-11px;border:1px solid rgba(255,255,255,.1);pointer-events:none}
.card-frame canvas{display:block;width:100%;height:100%}
.corner{position:absolute;width:16px;height:16px;border:1px solid rgba(255,255,255,.65);pointer-events:none}
.corner--tl{left:-12px;top:-12px;border-right:0;border-bottom:0}
.corner--tr{right:-12px;top:-12px;border-left:0;border-bottom:0}
.corner--bl{left:-12px;bottom:-12px;border-right:0;border-top:0}
.corner--br{right:-12px;bottom:-12px;border-left:0;border-top:0}
.scanline{
  position:absolute;left:0;right:0;top:0;height:2px;opacity:.55;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
}
.card-cap{
  position:absolute;left:0;right:0;bottom:-32px;display:flex;justify-content:space-between;
  font-family:var(--hud);font-size:8.5px;letter-spacing:.24em;color:var(--dim-2);
}
.card-cap span{display:flex;align-items:center;gap:6px}
.stage__flash{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4),transparent 62%);
}

/* ═════════════════ 底部滚动条 ═════════════════ */
.ticker{
  flex:0 0 auto;height:32px;display:flex;align-items:center;overflow:hidden;
  border-top:1px solid var(--line-2);background:rgba(0,0,0,.28);
}
.ticker__track{
  display:flex;gap:38px;white-space:nowrap;width:max-content;
  font-family:var(--hud);font-size:9.5px;letter-spacing:.26em;color:var(--dim-2);
  animation:marquee 44s linear infinite;
}
.ticker__track b{font-weight:400;color:rgba(255,255,255,.78)}
.ticker__track i{font-style:normal;color:rgba(255,255,255,.4)}

.credit{
  flex:0 0 auto;height:30px;display:flex;align-items:center;justify-content:center;
  border-top:1px solid var(--line-2);background:rgba(0,0,0,.42);
  font-family:var(--hud);font-size:9.5px;letter-spacing:.28em;color:var(--dim-2);
}
.credit b{font-weight:500;color:var(--ink);letter-spacing:.22em}

/* ═════════════════ 素材库 ═════════════════ */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:4vh 4vw}
.modal.is-open{display:flex}
.modal__backdrop{position:absolute;inset:0;background:rgba(2,7,8,.82);backdrop-filter:blur(10px)}
.modal__panel{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  width:min(1180px,94vw);height:min(780px,90vh);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(8,18,20,.98),rgba(4,10,12,.99));
  box-shadow:0 50px 150px rgba(0,0,0,.8);
}
.modal__head{display:flex;align-items:center;gap:18px;padding:17px 22px;border-bottom:1px solid var(--line-2)}
.modal__title{display:flex;align-items:center;gap:10px;min-width:0}
.modal__title h2{margin:0;font-size:16px;font-weight:600;letter-spacing:.12em;white-space:nowrap}
.modal__title .hint{margin-left:2px}
.modal__tools{margin-left:auto;display:flex;align-items:center;gap:9px}
.search{
  display:flex;align-items:center;gap:8px;width:240px;height:38px;padding:0 12px;
  border:1px solid var(--line-2);background:rgba(0,0,0,.35);
  transition:border-color .2s;
}
.search:focus-within{border-color:rgba(255,255,255,.45)}
.search svg{width:15px;height:15px;color:var(--dim);flex:0 0 auto}
.search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font-family:var(--cn);font-size:12px}
.search input::placeholder{color:var(--dim-2)}
.iconbtn{
  width:38px;height:38px;flex:0 0 auto;cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--dim);
  font-family:var(--hud);font-size:13px;line-height:1;
  transition:color .2s,border-color .2s;
}
.iconbtn:hover{color:var(--accent);border-color:var(--line)}

.tabs{display:flex;gap:3px;padding:12px 22px 0;border-bottom:1px solid var(--line-2)}
.tabs button{
  position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 15px;
  cursor:pointer;border:1px solid transparent;border-bottom:0;background:transparent;
  color:var(--dim);font-family:var(--cn);font-size:12px;letter-spacing:.06em;
  transition:color .2s,background .2s,border-color .2s;
}
.tabs button i{font-style:normal;font-family:var(--hud);font-size:7.5px;letter-spacing:.18em;color:var(--dim-2)}
.tabs button:hover{color:var(--ink-2)}
.tabs button.is-active{color:var(--accent);background:rgba(255,255,255,.05);border-color:var(--line)}
.tabs button.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#0d0d0d}

.modal__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:18px 22px 24px}
.grid{display:grid;gap:9px;align-content:start}
.grid--badge{grid-template-columns:repeat(auto-fill,minmax(94px,1fr))}
.grid--card{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.grid--title{grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.grid--icon{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}

.lib-item{
  position:relative;display:flex;flex-direction:column;overflow:hidden;padding:0;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(0,0,0,.25);
  transition:border-color .2s,transform .2s,background .2s;
}
.lib-item:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.lib-item__img{
  display:block;width:100%;overflow:hidden;
  background:repeating-conic-gradient(rgba(255,255,255,.045) 0% 25%,transparent 0% 50%) 0 0/14px 14px;
}
.lib-item__img img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s}
.lib-item:hover .lib-item__img img{transform:scale(1.055)}
.grid--badge .lib-item__img,.grid--icon .lib-item__img{aspect-ratio:1}
.grid--card .lib-item__img{aspect-ratio:2/3}
.grid--card .lib-item__img img{object-fit:cover}
.grid--title .lib-item__img{aspect-ratio:896/192}
.lib-item__name{
  padding:6px 7px 7px;text-align:left;font-family:var(--hud);font-size:9px;
  letter-spacing:.03em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lib-item:hover .lib-item__name{color:var(--ink-2)}
.lib-item.is-active{border-color:var(--accent)}
.lib-item.is-active .lib-item__name{color:var(--accent)}
.lib-item.is-active::after{
  content:'✓';position:absolute;right:4px;top:4px;width:17px;height:17px;
  display:grid;place-items:center;background:var(--accent);color:#0c0c0c;
  font-size:10px;font-weight:700;
}
.lib-empty{grid-column:1/-1;padding:60px 0;text-align:center;color:var(--dim-2);font-size:12px;letter-spacing:.1em}

.modal__foot{
  display:flex;align-items:center;gap:16px;padding:13px 22px;
  border-top:1px solid var(--line-2);font-size:10.5px;color:var(--dim-2);letter-spacing:.03em;
}
.modal__foot .btn{margin-left:auto;height:36px}

/* ═════════════════ 导出 ═════════════════ */
.export{position:fixed;inset:0;z-index:90;display:none;place-items:center;background:rgba(2,7,8,.76);backdrop-filter:blur(8px)}
.export.is-open{display:grid}
.export__box{
  position:relative;width:390px;padding:34px 30px 30px;text-align:center;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(9,20,22,.98),rgba(4,10,12,.99));
  box-shadow:0 40px 130px rgba(0,0,0,.8);
}
.export__box::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.7}
.export__spinner{width:74px;height:74px;margin:0 auto 16px}
.export__spinner svg{width:100%;height:100%}
#spinArc{transform-box:view-box;transform-origin:center;animation:spin 1.15s linear infinite}
.export__tag{font-family:var(--hud);font-size:9px;letter-spacing:.32em;color:var(--accent)}
.export__box h3{margin:10px 0 7px;font-size:17px;font-weight:600;letter-spacing:.1em}
.export__box p{margin:0;font-family:var(--hud);font-size:10.5px;letter-spacing:.16em;color:var(--dim)}
.bar{height:2px;margin:22px 0 12px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;width:0;height:100%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.export__status{font-size:11px;letter-spacing:.05em;color:var(--dim-2)}
.export.is-done #spinArc{animation:none;stroke-dasharray:none;opacity:.9}
.export.is-done .export__tag{color:var(--accent-2)}

/* ═════════════════ Toast ═════════════════ */
.toast{
  position:fixed;left:50%;bottom:58px;z-index:120;
  transform:translate(-50%,16px);pointer-events:none;opacity:0;
  padding:11px 20px;border:1px solid var(--line);border-left:2px solid var(--accent);
  background:rgba(6,16,17,.97);color:var(--ink);font-size:12px;letter-spacing:.04em;
  transition:opacity .25s,transform .25s;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.toast.is-show{opacity:1;transform:translate(-50%,0)}

/* ═════════════════ 圆角（灰白配色版） ═════════════════ */
.panel{border-radius:14px}
.panel::before,.panel::after{display:none}
.boot__panel{border-radius:16px}
.btn{border-radius:10px}
.btn--primary{border-radius:10px}
.mini{border-radius:7px}
.iconbtn{border-radius:8px}
.chip{border-radius:7px}
.idx{border-radius:4px}
.field input{border-radius:9px}
.slotrow{border-radius:12px}
.slotrow__thumb{border-radius:9px}
.badge{border-radius:12px}
.badge__edit{border-radius:11px}
.seg{border-radius:10px}
.seg button.is-active{box-shadow:inset 0 -2px 0 var(--accent)}
.stat{border-radius:10px}
.spec{border-radius:10px;overflow:hidden}
.lib-item{border-radius:12px}
.lib-item__img{border-radius:9px}
.modal__panel{border-radius:18px}
.export__box{border-radius:16px}
.toast{border-radius:10px}
.card-frame{border-radius:14px}
.card-frame::after{display:none}
.card-frame canvas{border-radius:13px}
.corner{display:none}
.search{border-radius:9px}
.tabs button{border-radius:8px 8px 0 0}
.credit{border-radius:0}

/* ═════════════════ 响应式 ═════════════════ */
@media (max-width:1440px){
  .workspace{grid-template-columns:290px minmax(0,1fr) 318px}
}
@media (max-width:1240px){
  .workspace{grid-template-columns:274px minmax(0,1fr) 300px;gap:12px;padding:12px 14px}
  .topbar{padding:0 16px;gap:14px}
  .brand__txt b{font-size:13px}
}
@media (max-width:1080px){
  body{overflow:auto}
  .app{height:auto;min-height:100vh}
  .topbar{height:auto;flex-wrap:wrap;padding:12px 16px;gap:12px}
  .topbar__meta{display:none}
  .workspace{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"stage stage" "left right";
    gap:14px;padding:14px;
  }
  .panel--left{grid-area:left}
  .panel--right{grid-area:right}
  .stage{grid-area:stage;min-height:72vh;padding:34px 0}
  .stage__label{display:none}
  .modal__panel{height:92vh}
}
@media (max-width:820px){
  .workspace{grid-template-columns:1fr;grid-template-areas:"stage" "left" "right"}
  .stage{min-height:66vh}
  .modal{padding:0}
  .modal__panel{width:100%;height:100%;border:0}
  .modal__head{flex-wrap:wrap;padding:14px}
  .search{width:100%;order:3}
  .modal__tools{flex:1 1 100%;justify-content:flex-end}
  .modal__title{flex:1 1 auto}
  .modal__body{padding:14px}
  .tabs{overflow-x:auto;padding:10px 14px 0}
  .topbar__acts{width:100%}
  .topbar__acts .btn{flex:1}
}
@media (max-height:900px) and (min-width:1081px){
  .topbar{height:64px}
  .workspace{padding:12px 18px 10px;gap:14px}
  .panel__body{padding:14px 14px 0}
  .group{padding-bottom:14px;margin-bottom:12px}
  .group__head{margin-bottom:9px}
  .divider{margin:14px 0 9px}
  .stats{gap:7px;margin-bottom:12px}
  .stat{padding:9px 4px}
  .stat b{font-size:16px}
  .spec__row{padding:7px 10px}
  .field input{height:42px}
  .slotrow{margin-bottom:9px}
  .panel__foot{padding:8px 0 12px}
  .ticker{height:28px}
  .toast{bottom:50px}
}
@media (prefers-reduced-motion:reduce){
  .rings__r,.dot,.ticker__track{animation:none!important}
}