/* =========================================================
   赛希&ME — 像素风游戏摄影站
   色板取自参考图（深青黑底 + 冷青荧光 + 灰蓝正文）
   ========================================================= */

/* ---------- 必须放在最前 ----------
   HTML 的 hidden 属性靠浏览器默认样式 display:none 生效，
   而作者样式（.modal{display:grid} 之类）会盖过它 ——
   那样弹窗一打开页面就全露出来了。这条 !important 兜住。 */
[hidden]{ display:none !important; }

:root{
  --bg:        #050809;
  --bg-2:      #070c0e;
  --panel:     #0a1114;
  --panel-2:   #0c1519;
  --line:      #16262b;
  --line-2:    #1d343a;

  --ink:       #b6c7c7;   /* 主正文（灰蓝白） */
  --ink-dim:   #6a8085;
  --ink-faint: #3f5459;

  --teal:      #5fe3d8;   /* 参考图高亮青 */
  --teal-2:    #2ea79f;
  --teal-3:    #1b6b68;
  --mint:      #9ad9c8;
  --warn:      #d9b26a;
  --bad:       #d76a6a;

  --mono: "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Consolas,
          "DejaVu Sans Mono", "Noto Sans Mono CJK SC", monospace;
  --ui: "Pixelify Sans", "Zpix", "Fusion Pixel", var(--mono);

  --px: 2px;
  --sp: 24px;
  --shadow: 0 0 0 1px var(--line), 0 18px 40px -24px rgba(0,0,0,.9);
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(47,167,159,.10), transparent 62%),
    radial-gradient(900px 520px at 8% 108%, rgba(95,227,216,.05), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.65;
  letter-spacing:.02em;
  -webkit-font-smoothing:none;
  font-smooth:never;
  text-rendering:geometricPrecision;
  overflow-x:hidden;
}

body::before{ /* 极细网格，像素底噪 */
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(95,227,216,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,227,216,.028) 1px, transparent 1px);
  background-size:32px 32px, 32px 32px;
  mask-image:radial-gradient(ellipse at 50% 30%, #000 30%, transparent 88%);
}

::selection{ background:var(--teal); color:#04100f; }

button,input,textarea,select{ font:inherit; color:inherit; }

code{ background:#0e1a1e; border:1px solid var(--line); padding:1px 5px; color:var(--mint); }

/* ============ CRT 覆盖层 ============ */
.crt{ position:fixed; inset:0; z-index:90; pointer-events:none; }
.crt__scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,.20) 0 1px, rgba(0,0,0,0) 1px 3px);
  opacity:.55;
}
.crt__flicker{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(95,227,216,.05), transparent 40%);
  mix-blend-mode:screen;
  animation:flicker 5.5s steps(2,end) infinite;
}
@keyframes flicker{
  0%,97%{ opacity:.28 } 98%{ opacity:.55 } 99%{ opacity:.12 } 100%{ opacity:.3 }
}
.crt__vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(0,0,0,.72) 100%);
}
body.no-crt .crt__scan,body.no-crt .crt__flicker{ opacity:0; }

/* ============ 顶栏 ============ */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,3.4vw,54px) 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(5,8,9,.96), rgba(5,8,9,.72));
  backdrop-filter:blur(3px);
}
.topbar__left,.topbar__right{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.brand{ display:flex; align-items:center; gap:8px; color:var(--teal); }
.brand__mark{ animation:blip 2.4s steps(2,end) infinite; }
@keyframes blip{ 0%,70%{opacity:1} 71%,100%{opacity:.25} }
.brand__text{ letter-spacing:.24em; font-size:12.5px; color:var(--mint); }

.chip{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); border:1px solid var(--line-2);
  padding:3px 9px; white-space:nowrap;
}
.chip--dim{ color:var(--ink-faint); border-color:var(--line); }
.chip--dim b,.chip b{ color:var(--teal); font-weight:400; }
.chip--ghost{ border-color:transparent; color:var(--ink-faint); }

/* 运行模式指示：SERVER = 数据在服务端（游客可见）/ LOCAL = 只存本机浏览器 */
.chip--mode{
  border-color:var(--line-2); color:var(--warn); letter-spacing:.16em;
  background:rgba(217,178,106,.06);
}
.chip--mode.is-server{
  color:var(--teal); border-color:var(--teal-3);
  background:rgba(95,227,216,.07);
}
.chip--mode.is-server::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:6px;
  background:var(--teal); animation:blip 1.6s steps(2,end) infinite; vertical-align:1px;
}

.authbox{ display:flex; align-items:center; gap:8px; }
.authbox__in{ display:flex; align-items:center; gap:8px; }
.who{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.16em; color:var(--mint);
  border:1px solid var(--line-2); padding:3px 10px;
}
.dot{ width:6px; height:6px; background:var(--teal); display:inline-block; animation:blip 1.6s steps(2,end) infinite; }

/* ============ 按钮 ============ */
.btn{
  position:relative;
  appearance:none; cursor:pointer;
  background:#0b1418; color:var(--ink);
  border:1px solid var(--line-2);
  padding:8px 14px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  transition:background .12s steps(2,end), color .12s steps(2,end), border-color .12s steps(2,end), transform .06s;
  clip-path:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.btn:hover{ background:#12242a; color:var(--teal); border-color:var(--teal-2); }
.btn:active{ transform:translate(1px,1px); }
.btn__glyph{ color:var(--teal); margin-right:4px; }
.btn--ghost{ background:transparent; }
.btn--primary{ background:linear-gradient(180deg,#12403f,#0c2b2c); color:#d8fbf6; border-color:var(--teal-2); }
.btn--primary:hover{ background:linear-gradient(180deg,#175353,#0e3536); color:#eafffb; }
.btn--danger:hover{ color:var(--bad); border-color:#5a2a2a; background:#1a1013; }
.btn--block{ width:100%; justify-content:center; text-align:center; padding:12px; }
.linkbtn{ background:none; border:0; padding:0; color:var(--teal); cursor:pointer; letter-spacing:.14em; font-size:11px; }
.linkbtn:hover{ text-shadow:0 0 8px var(--teal-2); }

/* ============ 页面骨架 ============ */
.page{
  position:relative; z-index:1;
  padding:0 clamp(16px,3.4vw,54px) 60px;
  max-width:1760px; margin:0 auto;
}

.hex{ color:var(--ink-faint); }
.arw{ color:var(--teal-2); }
.mono{ font-family:var(--mono); }
.mono--dim{ color:var(--ink-faint); }

/* ============ HERO ============ */
.hero{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(22px,3vw,54px);
  padding:34px 0 10px;
  align-items:start;
}
.hero__left{ position:relative; padding-left:26px; }
.hero__left::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}

.crumb{ font-size:11.5px; letter-spacing:.2em; color:var(--ink-dim); text-transform:uppercase; }
.crumb__num{ color:var(--teal); }
.crumb__val{ color:var(--mint); }

.ack{ margin:14px 0; font-size:11px; letter-spacing:.2em; color:var(--ink-faint); }
.ack--top{ margin-top:18px; }

/* --- 标题（像素字体感 + 抹除/代码错乱特效） --- */
.hero__title{
  position:relative;
  margin:6px 0 14px;
  font-family:var(--ui);
  font-size:clamp(42px,6.4vw,96px);
  line-height:.98;
  letter-spacing:.04em;
  font-weight:700;
  color:#cfe9e6;
  text-transform:uppercase;
  cursor:crosshair;
  user-select:none;
  isolation:isolate;
  filter:drop-shadow(0 0 12px rgba(95,227,216,.10));
  transition:filter .18s steps(3,end);
}
.hero__title::after{ /* 标题底部的像素阴影层 */
  content:"赛希&ME";
  position:absolute; left:3px; top:3px; z-index:-1;
  color:#0d2226;
  letter-spacing:.04em;
}
.glitch__layer{ position:absolute; left:0; top:0; white-space:nowrap; }
.glitch__layer--base{ position:relative; }
.glitch__layer--code{
  color:var(--teal);
  opacity:0;
  text-shadow:0 0 10px rgba(95,227,216,.55);
  pointer-events:none;
}
.glitch__layer--mask{
  color:#eafaf7;
  opacity:0;
  pointer-events:none;
  clip-path:inset(0 100% 0 0);
  text-shadow:
    -2px 0 rgba(255,60,120,.55),
     2px 0 rgba(95,227,216,.55);
}
/* 底部扫描轨 */
.glitch__rail{
  position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:linear-gradient(90deg, var(--teal), var(--teal-2) 70%, transparent);
  opacity:0;
}
.hero__title.is-glitching{ filter:drop-shadow(0 0 18px rgba(95,227,216,.30)); }
.hero__title.is-glitching .glitch__layer--base{ opacity:.10; }
.hero__title.is-glitching .glitch__layer--code{ opacity:1; }
.hero__title.is-glitching .glitch__layer--mask{ opacity:1; animation:wipe 1.35s steps(11,end) forwards; }
.hero__title.is-glitching .glitch__rail{ animation:railRun 1.35s steps(14,end) forwards; }

@keyframes wipe{
  0%   { clip-path:inset(0 100% 0 0); }
  38%  { clip-path:inset(0 6% 0 0); }
  52%  { clip-path:inset(0 46% 0 34%); }
  70%  { clip-path:inset(0 0 0 78%); }
  100% { clip-path:inset(0 0 0 0); }
}
@keyframes railRun{
  0%{ opacity:.9; width:0 } 70%{ opacity:.9; width:100% } 100%{ opacity:0; width:100% }
}
/* 代码错乱层逐段抖动（由 JS 设置 --sx / --sy / --sk） */
.glitch__layer--code{
  transform:translate(var(--sx,0), var(--sy,0)) skewX(var(--sk,0deg));
}

.hero__sub{
  margin:2px 0 18px; min-height:24px;
  color:var(--teal); font-size:13px; letter-spacing:.16em;
}
.caret{ display:inline-block; width:9px; height:15px; margin-left:3px; vertical-align:-2px; background:var(--teal); animation:blip .8s steps(2,end) infinite; }

.rail{
  position:absolute; left:6px; top:270px;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:10px; letter-spacing:.5em; color:var(--ink-faint);
}

/* --- 参数滑块（纯视觉） --- */
.params{ margin:22px 0 18px; max-width:420px; }
.params__head{ font-size:11px; letter-spacing:.22em; color:var(--teal); margin-bottom:12px; }
.prow{ display:grid; grid-template-columns:66px 52px 1fr; align-items:center; gap:10px; margin-bottom:11px; cursor:ew-resize; }
.prow__k{ font-size:11px; letter-spacing:.18em; color:var(--ink-dim); }
.prow__v{ font-size:11px; color:var(--mint); }
.prow__track{ position:relative; height:2px; background:var(--line-2); }
.prow__track > i{
  position:absolute; left:0; top:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--teal-3),var(--teal));
}
.prow__track > .knob{
  position:absolute; top:-4px; left:0; width:8px; height:10px;
  background:#0b1418; border:1px solid var(--teal); transform:translateX(-4px);
}
.prow:hover .prow__k{ color:var(--teal); }

.statline{
  display:flex; gap:22px; flex-wrap:wrap;
  margin-top:20px; padding-top:14px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.18em; color:var(--ink-faint);
}
.statline b{ color:var(--teal); font-weight:400; }

/* ============ 右侧窗口 ============ */
.hero__right{ display:flex; flex-direction:column; gap:14px; }

.win{
  border:1px solid var(--line-2);
  background:
    linear-gradient(180deg, rgba(95,227,216,.035), transparent 40%),
    var(--panel);
  box-shadow:var(--shadow);
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.win__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 12px; border-bottom:1px solid var(--line);
  font-size:10.5px; letter-spacing:.22em; color:var(--ink-dim); text-transform:uppercase;
}
.win__bar::before{ content:""; }
.win__bar-right{ color:var(--line-2); letter-spacing:.3em; }
.win__label{ color:var(--mint); }
.win__stage{ position:relative; background:#03070a; overflow:hidden; }
.win__stage::before{ /* 舞台底噪 */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 8%, rgba(95,227,216,.10), transparent 62%);
  pointer-events:none;
}
#faceCanvas{
  display:block; width:100%; height:auto;
  image-rendering:pixelated; image-rendering:crisp-edges;
  filter:saturate(1.05) contrast(1.04);
}
/* 字符画模式（v4 引擎）：绿字发光，需要保留次像素抗锯齿，不能 pixelated */
#faceCanvas.is-ascii{
  image-rendering:auto;
  filter:none;
  background:#03110a;
  text-shadow:0 0 6px rgba(95,227,216,.35);
  box-shadow:inset 0 0 0 1px rgba(74,190,110,.12);
}
/* 字符画模式下，窗口底噪会糊掉点阵，压暗它 */
.win__stage:has(#faceCanvas.is-ascii) .win__noise{ opacity:.12; }
.win__noise{
  position:absolute; inset:0; pointer-events:none; opacity:.30; mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(to right, rgba(95,227,216,.035) 0 1px, transparent 1px 4px);
  animation:noiseShift .6s steps(3,end) infinite;
}
@keyframes noiseShift{ 0%{background-position:0 0,0 0} 100%{background-position:0 3px,4px 0} }
.hud{ position:absolute; width:16px; height:16px; border:1px solid var(--teal-2); opacity:.75; }
.hud--tl{ left:8px; top:8px; border-right:0; border-bottom:0; }
.hud--tr{ right:8px; top:8px; border-left:0; border-bottom:0; }
.hud--bl{ left:8px; bottom:8px; border-right:0; border-top:0; }
.hud--br{ right:8px; bottom:8px; border-left:0; border-top:0; }
.win__foot{
  display:flex; justify-content:space-between; gap:12px;
  padding:7px 12px; border-top:1px solid var(--line);
  font-size:10.5px; letter-spacing:.18em; color:var(--ink-dim);
}

.codebox{
  margin:0; padding:12px 14px;
  border:1px solid var(--line); background:var(--panel-2);
  color:var(--ink-dim); font-size:11.5px; line-height:1.75; overflow:auto;
}
.codebox .ln{ color:var(--ink-faint); margin-right:12px; user-select:none; }
.codebox b{ color:var(--teal); font-weight:400; }
.codebox--sm{ font-size:11px; margin-bottom:14px; }

.meter{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-top:0; padding:8px 14px;
  font-size:10.5px; letter-spacing:.16em; color:var(--ink-dim);
  background:var(--panel-2);
}
.meter__k--r{ margin-left:auto; color:var(--ink-faint); }
.meter__k--r b{ color:var(--warn); font-weight:400; }
.meter__bars{ display:flex; align-items:flex-end; gap:2px; height:14px; flex:1; }
.meter__bars i{ width:3px; background:var(--teal-2); height:20%; opacity:.85; }
.bitmap{
  margin:0; padding:12px 14px; max-height:190px; overflow:hidden;
  border:1px solid var(--line); background:var(--panel-2);
  color:var(--teal-3); font-size:10.5px; line-height:1.5; letter-spacing:.14em;
}

/* ============ 分隔线 ============ */
.divider{ position:relative; margin:44px 0 26px; height:1px; background:var(--line-2); }
.divider__cap{
  position:absolute; left:0; top:-10px; padding-right:14px; background:var(--bg);
  font-size:11px; letter-spacing:.18em; color:var(--ink-dim);
}
.divider__line{ position:absolute; left:0; top:-4px; width:120px; height:2px; background:var(--teal-2); }

/* ============ 画廊 ============ */
.gallery__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-bottom:20px;
}
.gallery__tag{ font-size:11px; letter-spacing:.22em; color:var(--teal); }
.gallery__title h2{
  margin:4px 0 0; font-family:var(--ui); font-size:clamp(24px,3vw,40px);
  letter-spacing:.06em; color:#cfe9e6; font-weight:700;
}
.gallery__tools{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.tab{
  appearance:none; cursor:pointer; background:transparent; color:var(--ink-dim);
  border:1px solid var(--line); padding:6px 12px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  transition:color .12s, border-color .12s, background .12s;
}
.tab:hover{ color:var(--mint); border-color:var(--line-2); }
.tab.is-on{ color:#04100f; background:var(--teal); border-color:var(--teal); }
.tab b{ font-weight:400; opacity:.6; margin-left:6px; }

.search{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--panel-2); padding:5px 10px; }
.search span{ color:var(--teal-2); }
.search input{ background:none; border:0; outline:none; width:210px; font-size:12px; color:var(--ink); }
.search input::placeholder{ color:var(--ink-faint); }
.search--sm input{ width:160px; font-size:11.5px; }

.grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(272px,1fr));
}
.card{
  position:relative; cursor:pointer;
  border:1px solid var(--line); background:var(--panel);
  overflow:hidden;
  transition:border-color .14s steps(2,end), transform .14s steps(2,end);
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.card:hover{ border-color:var(--teal-2); transform:translateY(-3px); }
.card__thumb{ position:relative; aspect-ratio:16/9; background:#03070a; overflow:hidden; }
.card__thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  image-rendering:pixelated;
  filter:saturate(.92) contrast(1.05);
  transition:transform .25s steps(6,end), filter .2s;
}
.card:hover .card__thumb img{ transform:scale(1.035); filter:saturate(1.05) contrast(1.08); }
.card__thumb::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity:.5; pointer-events:none;
}
.card__idx{
  position:absolute; left:0; top:0; z-index:2;
  background:rgba(5,8,9,.82); color:var(--teal);
  font-size:10px; letter-spacing:.14em; padding:3px 7px;
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.card__meta{ padding:11px 13px 13px; border-top:1px solid var(--line); }
.card__title{
  margin:0 0 6px; font-size:13px; color:#d7e8e6; font-weight:400;
  display:flex; justify-content:space-between; gap:10px; align-items:baseline;
}
.card__title span{ color:var(--ink-faint); font-size:10.5px; letter-spacing:.14em; white-space:nowrap; }
.card__sub{ display:flex; gap:8px; flex-wrap:wrap; font-size:10.5px; color:var(--ink-dim); letter-spacing:.12em; }
.tag{
  border:1px solid var(--line-2); padding:2px 7px; color:var(--mint);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
}
.tag--dim{ color:var(--ink-dim); border-color:var(--line); }
.card__cmt{ color:var(--warn); }

.empty{
  text-align:center; padding:50px 20px; color:var(--ink-faint);
  border:1px dashed var(--line-2); letter-spacing:.16em; font-size:12px;
}

/* ============ 公告 ============ */
.notice{ margin-top:66px; border:1px solid var(--line); background:var(--panel); padding:20px 22px; }
.notice__head{ border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:14px; }
.notice__tag{ font-size:11px; letter-spacing:.22em; color:var(--teal); }
.notice__head h3{ margin:4px 0 0; font-size:19px; color:#d7e8e6; font-weight:400; }
.notice__body{ color:var(--ink); font-size:13px; }
.notice__body ol,.notice__body ul{ padding-left:22px; }
.notice__body li{ margin:5px 0; }
.notice__body p{ margin:10px 0; }

/* ============ 底部快捷键 ============ */
.hotkeys{
  position:relative; z-index:1;
  display:flex; gap:26px; flex-wrap:wrap; align-items:center;
  padding:16px clamp(16px,3.4vw,54px) 26px;
  border-top:1px solid var(--line);
  font-size:10.5px; letter-spacing:.18em; color:var(--ink-faint); text-transform:uppercase;
}
.hotkeys b{ color:var(--mint); font-weight:400; }
.hotkeys__right{ margin-left:auto; }

/* ============ 弹窗 ============ */
.modal{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:22px; }
.modal__mask{ position:absolute; inset:0; background:rgba(2,5,6,.86); backdrop-filter:blur(2px); }
.modal__panel{
  position:relative; width:min(920px,100%); max-height:88vh; display:flex; flex-direction:column;
  border:1px solid var(--line-2); background:var(--panel);
  box-shadow:0 0 0 1px rgba(95,227,216,.07), 0 40px 80px -30px #000;
  animation:pop .16s steps(3,end);
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
@keyframes pop{ from{ transform:translateY(8px); opacity:0 } to{ transform:none; opacity:1 } }
.modal__panel--sm{ width:min(460px,100%); }
.modal__panel--wide{ width:min(1180px,100%); }
.modal__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 15px; border-bottom:1px solid var(--line);
  font-size:11px; letter-spacing:.2em; color:var(--teal); text-transform:uppercase;
  background:var(--panel-2);
}
.modal__bar .x{ background:none; border:0; color:var(--ink-dim); cursor:pointer; font-size:14px; }
.modal__bar .x:hover{ color:var(--bad); }
.modal__body{ padding:18px 20px 22px; overflow:auto; }
.modal__body--split{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:20px; }

.field{ display:block; margin-bottom:13px; }
.field > span{ display:block; font-size:10.5px; letter-spacing:.18em; color:var(--ink-dim); margin-bottom:6px; text-transform:uppercase; }
.field .req{ color:var(--teal); }
.field input,.field textarea,.field select,.addgroup input{
  width:100%; background:#070f12; border:1px solid var(--line-2); outline:none;
  padding:9px 11px; font-size:13px; color:var(--ink);
}
.field input:focus,.field textarea:focus,.field select:focus,.addgroup input:focus{
  border-color:var(--teal-2); box-shadow:0 0 0 1px rgba(95,227,216,.18);
}
.field textarea{ resize:vertical; line-height:1.6; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.frow--btns{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.frow--tight{ grid-template-columns:1fr; }
.check{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--ink-dim); margin:2px 0 16px; }
.check input{ accent-color:var(--teal-2); }
.formmsg{ margin:0 0 12px; font-size:12px; color:var(--bad); }
.formmsg.ok{ color:var(--teal); }
.hintline{ font-size:11px; color:var(--ink-faint); line-height:1.7; margin:12px 0 0; }
.hint-inline{ font-size:10.5px; color:var(--ink-faint); }

/* 管理面板 tab */
.subtabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.subtab{
  appearance:none; cursor:pointer; background:transparent; color:var(--ink-dim);
  border:1px solid var(--line); padding:6px 12px; font-size:11px; letter-spacing:.12em;
}
.subtab:hover{ color:var(--mint); }
.subtab.is-on{ color:#04100f; background:var(--mint); border-color:var(--mint); }
.pane{ display:none; }
.pane.is-on{ display:block; }
.pane__bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; font-size:11px; letter-spacing:.16em; color:var(--ink-dim); flex-wrap:wrap; }
.pane__bar b{ color:var(--teal); font-weight:400; }

/* 上传拖拽区 */
.drop{
  border:1px dashed var(--line-2); background:var(--panel-2);
  padding:26px 18px; text-align:center; cursor:pointer; margin-bottom:16px;
  transition:border-color .14s, background .14s;
}
.drop:hover,.drop.is-over{ border-color:var(--teal); background:#0d1c20; }
.drop__icon{ font-size:26px; color:var(--teal-2); }
.drop__t{ margin:8px 0 4px; font-size:13px; color:var(--ink); }
.drop__t .em{ color:var(--teal); }
.drop__s{ margin:0; font-size:11px; color:var(--ink-faint); }

.queue{ border:1px solid var(--line); margin-bottom:16px; background:var(--panel-2); }
.queue__head{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.16em; color:var(--ink-dim); }
.queue__head b{ color:var(--teal); font-weight:400; }
.queue__list{ max-height:220px; overflow:auto; padding:8px; display:grid; gap:8px; }
.qitem{ display:grid; grid-template-columns:76px 1fr auto; gap:10px; align-items:center; border:1px solid var(--line); padding:6px; background:#070f12; }
.qitem img{ width:76px; height:44px; object-fit:cover; image-rendering:pixelated; }
.qitem__n{ font-size:11.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qitem__s{ font-size:10.5px; color:var(--ink-faint); }
.qitem--done{ opacity:.45; }

/* 照片管理表 */
.editpane{ border:1px solid var(--teal-3); background:#08181a; margin-bottom:14px; }
.editpane__bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; border-bottom:1px solid var(--line);
  font-size:11px; letter-spacing:.18em; color:var(--ink-dim); background:#0a1e21;
}
.editpane__bar b{ color:var(--teal); font-weight:400; }
.editpane__bar .x{ background:none; border:0; color:var(--ink-dim); cursor:pointer; font-size:13px; }
.editpane__bar .x:hover{ color:var(--bad); }
.editpane__body{ padding:14px 14px 16px; }

.mtable{ display:grid; gap:8px; }
.mrow{ display:grid; grid-template-columns:60px 1fr auto; gap:12px; align-items:center; border:1px solid var(--line); padding:7px; background:var(--panel-2); }
.mrow img{ width:60px; height:36px; object-fit:cover; image-rendering:pixelated; }
.mrow__t{ font-size:12.5px; color:var(--ink); }
.mrow__s{ font-size:10.5px; color:var(--ink-faint); letter-spacing:.1em; }
.mrow__acts{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.mini{ appearance:none; cursor:pointer; background:#0b1418; border:1px solid var(--line-2); color:var(--ink-dim); padding:4px 8px; font-size:10.5px; letter-spacing:.1em; }
.mini:hover{ color:var(--teal); border-color:var(--teal-2); }
.mini--danger:hover{ color:var(--bad); border-color:#5a2a2a; }

/* 分组管理 */
.glist{ display:grid; gap:8px; margin-bottom:14px; }
.grow{ display:grid; grid-template-columns:1fr auto auto auto; gap:8px; align-items:center; border:1px solid var(--line); padding:7px 9px; background:var(--panel-2); }
.grow input{ background:#070f12; border:1px solid var(--line-2); padding:6px 9px; font-size:12.5px; }
.grow input:focus{ outline:none; border-color:var(--teal-2); }
.grow__n{ font-size:10.5px; color:var(--ink-faint); white-space:nowrap; }
.addgroup{ display:grid; grid-template-columns:1fr auto; gap:10px; margin-bottom:20px; }
.orderbar{ border-top:1px solid var(--line); padding-top:14px; display:flex; gap:16px; align-items:center; font-size:11px; color:var(--ink-dim); letter-spacing:.16em; flex-wrap:wrap; }
.swatches{ display:flex; gap:6px; }
.swatches button{ width:22px; height:22px; border:1px solid var(--line-2); cursor:pointer; }
.swatches button.is-on{ outline:2px solid var(--teal); outline-offset:1px; }

/* 备份 */
.usage{ display:flex; align-items:center; gap:14px; font-size:11.5px; color:var(--ink-dim); margin:16px 0; letter-spacing:.14em; }
.usage b{ color:var(--teal); font-weight:400; }
.usage__bar{ flex:1; height:6px; background:#0b1418; border:1px solid var(--line-2); display:block; }
.usage__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal-3),var(--teal)); }

/* ============ 灯箱 ============ */
.viewer__stage{ position:relative; border:1px solid var(--line); background:#03070a; }
.viewer__stage img{
  width:100%; max-height:56vh; object-fit:contain; display:block;
  image-rendering:pixelated;
}
.viewer__nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 11px; border-top:1px solid var(--line); background:var(--panel-2);
}
.viewer__meta{ padding:14px 2px 0; }
.viewer__meta h3{ margin:0 0 10px; font-size:18px; color:#deeeec; font-weight:400; }
.viewer__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.viewer__desc{ color:var(--ink-dim); font-size:12.5px; white-space:pre-wrap; margin:0; }

.comments{ display:flex; flex-direction:column; border:1px solid var(--line); background:var(--panel-2); min-height:0; }
.comments__head{
  display:flex; justify-content:space-between; gap:10px; align-items:baseline; flex-wrap:wrap;
  padding:10px 12px; border-bottom:1px solid var(--line);
  font-size:10.5px; letter-spacing:.18em; color:var(--ink-dim); text-transform:uppercase;
}
.comments__head b{ color:var(--teal); font-weight:400; }
.comments__list{ padding:10px; display:grid; gap:9px; max-height:44vh; overflow:auto; }
.cmt{ border:1px solid var(--line); background:#070f12; padding:9px 11px; }
.cmt__top{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:5px; }
.cmt__name{ color:var(--teal); font-size:12px; letter-spacing:.08em; }
.cmt__time{ color:var(--ink-faint); font-size:10.5px; }
.cmt__text{ margin:0; font-size:12.5px; color:var(--ink); white-space:pre-wrap; word-break:break-word; }
.cmt__del{ background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:11px; }
.cmt__del:hover{ color:var(--bad); }
.cmt--empty{ border:0; color:var(--ink-faint); font-size:11.5px; text-align:center; padding:22px 10px; letter-spacing:.14em; }
.comments__form{ border-top:1px solid var(--line); padding:12px; }
.charcount{ font-size:10.5px; color:var(--ink-faint); margin-left:auto; }

/* ============ Toast ============ */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:95; transform:translateX(-50%);
  border:1px solid var(--teal-2); background:#08201f; color:#d8fbf6;
  padding:10px 18px; font-size:12px; letter-spacing:.12em;
  box-shadow:0 0 0 1px rgba(95,227,216,.2), 0 20px 40px -20px #000;
  animation:pop .14s steps(3,end);
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.toast--bad{ border-color:#5a2a2a; background:#200d0d; color:#f0c9c9; }

/* ============ 响应式 ============ */
@media (max-width:1180px){
  .modal__body--split{ grid-template-columns:1fr; }
  .viewer__stage img{ max-height:44vh; }
}
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; }
  .hero__right{ order:-1; }
  .rail{ display:none; }
  .search input{ width:150px; }
}
@media (max-width:620px){
  .frow{ grid-template-columns:1fr; }
  .bitmap{ display:none; }
  .hotkeys{ gap:14px; }
  .hotkeys__right{ margin-left:0; }
  .hero__left{ padding-left:16px; }
  .card__thumb{ aspect-ratio:4/3; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}