/* ===== TTastro 深空拼图 =====
 * 视觉沿用 TTastro 主站的「电影感深空」：近黑底、琥珀点缀、发丝级分隔线。
 */

:root{
  --bg:#04060d; --bg2:#070b15; --panel:rgba(10,14,24,.78);
  --ink:#e9eef7; --muted:#b7c2d4; --muted2:#93a0b4; --faint:#6b7689;
  --amber:#ffbe4d; --amber2:#ff8a4d; --blue:#8ec7ff;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.055);
  --ok:#6ee7a8; --warn:#ffbe4d; --bad:#ff7a7a;
  --disp:'Sora','Noto Sans SC',system-ui,sans-serif;
  --body:'Noto Sans SC','Sora',system-ui,sans-serif;
  --r:12px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--body); font-weight:300;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button,input,select,textarea{ font-family:inherit; color:inherit; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:8px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.2); background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }

#sky{ position:fixed; inset:0; z-index:0; display:block; }
.veil{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(130% 90% at 50% -10%, transparent 35%, rgba(4,6,13,.78) 100%); }

/* ============ 通用控件 ============ */
.eyebrow{ display:inline-flex; align-items:center; gap:11px; font-size:11px; letter-spacing:3.4px;
  color:var(--blue); text-transform:uppercase; }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--blue); opacity:.7; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size:13px; color:var(--muted); border:1px solid var(--line);
  padding:9px 16px; border-radius:999px; cursor:pointer; background:rgba(255,255,255,.02);
  transition:border-color .25s, color .25s, background .25s, box-shadow .3s; user-select:none;
  white-space:nowrap;
}
.btn:hover{ border-color:rgba(255,190,77,.34); color:#fff; box-shadow:0 0 18px -6px rgba(255,190,77,.65); }
.btn:active{ transform:translateY(.5px); }
.btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; border-color:var(--line); color:var(--faint); }
.btn.primary{ background:linear-gradient(180deg, rgba(255,190,77,.16), rgba(255,138,77,.1));
  border-color:rgba(255,190,77,.45); color:#ffd98a; }
.btn.primary:hover{ color:#fff2d4; border-color:var(--amber); box-shadow:0 0 26px -8px rgba(255,190,77,.9); }
.btn.ghost{ border-color:transparent; background:transparent; }
.btn.ghost:hover{ border-color:var(--line); box-shadow:none; }
.btn.sm{ padding:6px 12px; font-size:12px; }
.btn.icon{ padding:8px; width:34px; height:34px; border-radius:10px; }

.field{ display:flex; flex-direction:column; gap:7px; }
.field > label{ font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--faint); }
/* 单位别跟着转大写：µ 会被转成希腊大写 Mu，「µm」就读成「MM」了 */
.field > label i{ text-transform:none; font-style:normal; }
.inp, select.inp{
  background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; font-size:14px; font-weight:400; color:var(--ink); outline:none; width:100%;
  transition:border-color .2s, background .2s;
}
.inp:focus{ border-color:rgba(255,190,77,.5); background:rgba(255,255,255,.06);
  box-shadow:0 0 0 2px rgba(255,190,77,.12); }

/* 从画布点文字跳过来时，给目标控件一段短暂高亮。
   只靠上面那条 50% 透明度的焦点边框，在一排长得差不多的输入框里太容易错过。
   动画结束后交还给焦点边框继续标记，不留残留样式。 */
@keyframes flash-hit{
  0%  { border-color:rgba(255,190,77,.95); box-shadow:0 0 0 4px rgba(255,190,77,.30); }
  60% { border-color:rgba(255,190,77,.8);  box-shadow:0 0 0 4px rgba(255,190,77,.16); }
  100%{ border-color:rgba(255,190,77,.5);  box-shadow:0 0 0 2px rgba(255,190,77,.12); }
}
.flash-hit{ animation:flash-hit 1.1s ease-out; border-radius:10px; }

/* 提示里的跳转，长得像链接但本体是 button——键盘和读屏都能正常用 */
.linkish{ background:none; border:0; padding:2px 0; margin-top:4px; cursor:pointer;
  font:inherit; color:var(--amber); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px; }
.radec{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }

.linkish:hover{ color:var(--ink); }
.linkish:focus-visible{ outline:2px solid rgba(255,190,77,.6); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){
  /* 不放动画，但高亮本身是功能性指引，不能省——改成静态的 */
  .flash-hit{ animation:none; box-shadow:0 0 0 4px rgba(255,190,77,.28); }
}
select.inp{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted2) 50%),linear-gradient(135deg,var(--muted2) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px; }
select.inp option{ background:#0a0e18; }
.inp[type=number]::-webkit-inner-spin-button{ opacity:.35; }

input[type=range]{ -webkit-appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track{ height:2px; background:rgba(255,255,255,.14); border-radius:2px; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; margin-top:-5.5px;
  border-radius:50%; background:var(--amber); box-shadow:0 0 12px -2px rgba(255,190,77,.8); }
input[type=color]{ -webkit-appearance:none; border:1px solid var(--line); border-radius:8px;
  width:100%; height:32px; padding:2px; background:rgba(255,255,255,.03); cursor:pointer; }
input[type=color]::-webkit-color-swatch-wrapper{ padding:0; }
input[type=color]::-webkit-color-swatch{ border:none; border-radius:6px; }

.seg{ display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.seg button{ flex:1; background:transparent; border:0; padding:8px 4px; font-size:12px; color:var(--muted2);
  cursor:pointer; transition:background .2s,color .2s; border-right:1px solid var(--line2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seg button:last-child{ border-right:0; }
.seg button:hover{ background:rgba(255,255,255,.04); color:var(--ink); }
.seg button.on{ background:rgba(255,190,77,.14); color:#ffd98a; }

.switch{ display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; user-select:none; }
.switch span{ font-size:13px; color:var(--muted); }
.switch i{ width:36px; height:20px; border-radius:999px; background:rgba(255,255,255,.1);
  border:1px solid var(--line); position:relative; transition:background .25s; flex:none; }
.switch i::after{ content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:var(--muted2); transition:transform .25s, background .25s; }
.switch.on i{ background:rgba(255,190,77,.28); border-color:rgba(255,190,77,.45); }
.switch.on i::after{ transform:translateX(16px); background:var(--amber); }

/* ============ 整站导航（启动页顶部） ============ */
.sitenav{ position:fixed; top:0; left:0; right:0; z-index:45; display:flex; align-items:center;
  justify-content:space-between; gap:24px; padding:16px 40px;
  background:rgba(4,6,13,.62); backdrop-filter:blur(14px); border-bottom:1px solid var(--line2); }
.sitenav.hide{ display:none; }
.sn-brand{ font-family:var(--disp); font-weight:800; font-size:19px; letter-spacing:1.8px;
  color:#fff; text-decoration:none; white-space:nowrap; transition:opacity .2s; }
.sn-brand:hover{ opacity:.8; }
.sn-brand b{ color:var(--amber); font-weight:800; }
.sn-right{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:flex-end; }
.sn-menu{ display:flex; gap:24px; font-size:14px; flex-wrap:wrap; justify-content:flex-end; }
.sn-menu a{ color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .2s; }
.sn-menu a:hover{ color:#fff; }
.sn-menu a.on{ color:#fff; }

/* 语言开关：外形跟主站的 pill 一致，切换写的也是同一个 tt_lang */
.langbtn{ display:inline-flex; align-items:center; gap:6px; flex:none;
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; cursor:pointer;
  background:rgba(255,255,255,.02); color:var(--muted); font-size:12.5px; letter-spacing:.4px;
  transition:border-color .25s, color .25s, box-shadow .3s; }
.langbtn:hover{ border-color:rgba(255,190,77,.34); color:#fff; box-shadow:0 0 18px -6px rgba(255,190,77,.65); }
.langbtn svg{ opacity:.8; flex:none; }

@media (max-width:900px){
  .sitenav{ padding:12px 18px; gap:14px; }
  .sn-right{ gap:12px; }
  .sn-menu{ gap:14px; font-size:12.5px; }
}

/* 英文用户要等模块加载完才换得了字，先把启动页藏起来，避免闪一下中文。
   i18n 一生效就摘掉这个类（index.html 里还有个 1.6 秒的兜底定时器）。
   这里用 visibility 而不是 opacity+transition：过渡一旦没跑完（标签页被节流、
   合成器抽风），页面就永远是透明的——为了 250ms 的淡入不值得冒这个险。
   卡片本来就有 rise 入场动画，观感不亏。 */
.i18n-pending #setup{ visibility:hidden; }

/* ============ 编辑器里的站内导航：收进品牌字标的下拉 ============ */
.brandwrap{ position:relative; }
button.brand{ background:transparent; border:0; cursor:pointer; padding:0; display:inline-flex;
  align-items:center; gap:5px; }
.brand .caret{ font-size:10px; color:var(--faint); transition:transform .2s, color .2s; }
.brandwrap.open .caret{ transform:rotate(180deg); color:var(--amber); }
.branddrop{ position:absolute; top:calc(100% + 9px); left:0; min-width:184px; z-index:40;
  background:rgba(10,14,24,.97); backdrop-filter:blur(16px); border:1px solid var(--line);
  border-radius:12px; padding:6px; display:none;
  box-shadow:0 22px 60px -22px rgba(0,0,0,.95); }
.brandwrap.open .branddrop{ display:block; }
.branddrop a{ display:block; padding:8px 12px; border-radius:8px; font-size:13px;
  color:var(--muted); text-decoration:none; white-space:nowrap; transition:background .18s, color .18s; }
.branddrop a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.branddrop a.on{ color:#ffd98a; }
.branddrop .dd-sep{ height:1px; background:var(--line2); margin:6px 8px; }
.branddrop a.dd-lang{ color:var(--muted2); letter-spacing:.4px; }
.branddrop a.dd-lang:hover{ color:#ffd98a; }

/* ============ 启动页 ============ */
/* 用 margin:auto 而不是 align-items:center 做居中：内容比视口高时，
   居中会把顶部推到可视区外且滚不回来，margin:auto 不会截断起始边。 */
#setup{ position:fixed; inset:0; z-index:40; display:flex;
  padding:96px 24px 40px; overflow:auto; }
#setup.hide{ display:none; }
.setup-card{
  margin:auto;
  position:relative; width:min(940px,100%); background:var(--panel); backdrop-filter:blur(22px);
  border:1px solid var(--line); border-radius:22px; padding:44px 46px 38px;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
  animation:rise .7s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.setup-card h1{ font-family:var(--disp); font-weight:800; font-size:40px; line-height:1.1; margin:18px 0 10px;
  letter-spacing:-.5px; }
.setup-card h1 b{ color:var(--amber); font-weight:800; }
.setup-lede{ color:var(--muted2); font-size:14.5px; line-height:1.75; max-width:60ch; margin:0 0 30px; }
.setup-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px 20px; }
.setup-grid .span2{ grid-column:span 2; }
.setup-sep{ height:1px; background:var(--line); margin:30px 0 24px; }
.setup-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.setup-hint{ font-size:12.5px; color:var(--faint); line-height:1.7; max-width:62ch; }
.setup-hint b{ color:var(--muted); font-weight:400; }

.style-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.style-opt{ border:1px solid var(--line); border-radius:12px; padding:11px 10px 9px; cursor:pointer;
  background:rgba(255,255,255,.02); transition:border-color .22s, background .22s; text-align:center; }
.style-opt:hover{ border-color:rgba(255,190,77,.3); }
.style-opt.on{ border-color:rgba(255,190,77,.55); background:rgba(255,190,77,.09); }
.style-opt svg{ display:block; margin:0 auto 7px; }
.style-opt span{ font-size:11.5px; color:var(--muted2); letter-spacing:.3px; }
.style-opt.on span{ color:#ffd98a; }

.preview-note{ font-size:12px; color:var(--faint); margin-top:12px; line-height:1.7; }
.preview-note b{ color:var(--amber); font-weight:400; }

/* ============ 已保存的工程 ============ */
.projects{ margin-bottom:6px; }
.projects-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:11px; letter-spacing:2.2px; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
.projects-list{ display:flex; flex-direction:column; gap:7px; max-height:230px; overflow:auto; }
.proj{ display:flex; align-items:center; gap:12px; padding:10px 13px; border:1px solid var(--line);
  border-radius:12px; background:rgba(255,255,255,.02); cursor:pointer;
  transition:border-color .2s, background .2s; }
.proj:hover{ border-color:rgba(255,190,77,.38); background:rgba(255,190,77,.05); }
.proj .pn{ flex:1; min-width:0; }
.proj .pn b{ display:block; font-size:14px; font-weight:400; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.proj .pn span{ font-size:11.5px; color:var(--faint); }
.proj .pdel{ flex:none; border:1px solid transparent; background:none; color:var(--faint);
  border-radius:8px; width:28px; height:28px; cursor:pointer; font-size:15px; line-height:1;
  transition:color .2s, border-color .2s, background .2s; }
.proj .pdel:hover{ color:var(--bad); border-color:rgba(255,122,122,.4); background:rgba(255,122,122,.1); }

/* ============ 顶栏：工程名 + 文件菜单 ============ */
.projname{ flex:none; width:150px; min-width:70px; background:transparent; border:1px solid transparent;
  border-radius:8px; padding:5px 9px; font-size:13px; color:var(--muted); outline:none;
  transition:border-color .2s, background .2s, color .2s; text-overflow:ellipsis; }
.projname:hover{ border-color:var(--line2); color:var(--ink); }
.projname:focus{ border-color:rgba(255,190,77,.5); background:rgba(255,255,255,.05); color:var(--ink); }

.menuwrap{ position:relative; flex:none; }
.filemenu{ position:absolute; right:0; top:calc(100% + 8px); min-width:210px; z-index:40;
  background:rgba(10,14,24,.97); backdrop-filter:blur(16px); border:1px solid var(--line);
  border-radius:12px; padding:6px; display:none; box-shadow:0 22px 60px -22px rgba(0,0,0,.95); }
.menuwrap.open .filemenu{ display:block; }
.filemenu button{ display:block; width:100%; text-align:left; background:none; border:0;
  color:var(--muted); font:inherit; font-size:13px; padding:8px 12px; border-radius:8px;
  cursor:pointer; white-space:nowrap; transition:background .18s, color .18s; }
.filemenu button:hover{ background:rgba(255,255,255,.06); color:#fff; }
.filemenu hr{ border:0; border-top:1px solid var(--line2); margin:5px 9px; }

@media (max-width:1180px){
  .projname{ width:104px; }
}

/* ============ 编辑器骨架 ============ */
#editor{ position:fixed; inset:0; z-index:5; display:grid;
  grid-template-columns:238px 1fr 296px; grid-template-rows:54px 1fr 30px; }
#editor.hide{ display:none; }

.topbar{ grid-column:1/-1; display:flex; align-items:center; gap:14px; padding:0 16px;
  border-bottom:1px solid var(--line); background:rgba(6,9,17,.82); backdrop-filter:blur(16px); z-index:3; }
.brand{ font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:1.6px; white-space:nowrap;
  color:var(--ink); text-decoration:none; transition:opacity .2s; }
.brand:hover{ opacity:.75; }
.brand b{ color:var(--amber); }
.topbar .sp{ flex:1; }
.pagenav{ display:flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:999px; padding:3px; }
.pagenav button{ background:transparent; border:0; color:var(--muted2); cursor:pointer; padding:4px 9px;
  border-radius:999px; font-size:12px; transition:background .2s,color .2s; }
.pagenav button:hover{ background:rgba(255,255,255,.06); color:var(--ink); }
.pagenav .lbl{ font-size:12px; color:var(--muted); padding:0 8px; letter-spacing:.5px; white-space:nowrap; }

.tray{ border-right:1px solid var(--line); background:rgba(6,9,17,.5); display:flex; flex-direction:column; min-height:0; }
.tray-head{ padding:13px 14px 10px; border-bottom:1px solid var(--line2); }
.tray-title{ font-size:11px; letter-spacing:2.2px; text-transform:uppercase; color:var(--faint); margin-bottom:9px; }
/* grid-auto-rows 必须是 max-content：缩略图带 overflow:hidden，网格按「最小高度 0」起算行高，
   图一多（超过这一栏放得下的行数）就只把栏高平分给各行，110 张时每行十几像素，缩略图全叠在一起 */
.tray-list{ flex:1; overflow-y:auto; padding:9px; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:max-content; gap:7px; align-content:start; }
.tray-item{ position:relative; aspect-ratio:16/10; border-radius:8px; overflow:hidden; cursor:grab;
  border:1px solid var(--line2); background:rgba(255,255,255,.03); transition:border-color .2s, transform .15s; }
.tray-item:hover{ border-color:rgba(255,190,77,.4); transform:translateY(-1px); }
.tray-item canvas{ width:100%; height:100%; display:block; }
.tray-item .tag{ position:absolute; left:0; right:0; bottom:0; font-size:9.5px; padding:8px 5px 3px;
  background:linear-gradient(transparent, rgba(0,0,0,.82)); color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tray-item.used{ opacity:.3; }
.tray-empty{ grid-column:1/-1; padding:26px 12px; text-align:center; font-size:12px; color:var(--faint); line-height:1.8; }

.stage{ position:relative; overflow:hidden; background:
  radial-gradient(120% 100% at 50% 0%, #080c16 0%, #04060d 70%); min-height:0; }
/* 用 place-items:start + margin:auto 做居中，不用 place-items:center：
   后者在内容大于容器时会把起始边推到可视区外且滚不回来，放大后左上角就够不着了。 */
.stage-scroll{ position:absolute; inset:0; overflow:auto; display:grid; place-items:start; padding:34px; }
#pageWrap{ position:relative; margin:auto; box-shadow:0 30px 90px -30px rgba(0,0,0,.95); }

/* 空格按住 = 平移模式。用 !important 是因为画布的光标是 JS 写在 style 上的内联值 */
.stage-scroll.pan-ready, .stage-scroll.pan-ready *{ cursor:grab !important; }
.stage-scroll.panning, .stage-scroll.panning *{ cursor:grabbing !important; }
#pageCanvas{ display:block; border-radius:3px; }
#pageWrap.dragover::after{ content:""; position:absolute; inset:-3px; border:2px dashed rgba(255,190,77,.7);
  border-radius:6px; pointer-events:none; }

.stage-tools{ position:absolute; left:14px; bottom:14px; display:flex; gap:7px; z-index:2;
  background:rgba(6,9,17,.8); backdrop-filter:blur(12px); border:1px solid var(--line);
  border-radius:999px; padding:5px; }
/* 提示条压在星场上，用 --faint 只有 4.3:1 的对比度（11.5px 小字要 4.5:1 才够 AA），
   底下一遇到亮星就更看不清。提到 --muted2 后是 7.5:1；底色也从 .8 提到 .92，
   免得亮星透上来把字吃掉。 */
.stage-hint{ position:absolute; right:14px; bottom:14px; z-index:2; font-size:11.5px; color:var(--muted2);
  background:rgba(6,9,17,.92); backdrop-filter:blur(12px); border:1px solid var(--line);
  border-radius:999px; padding:7px 14px; letter-spacing:.3px; pointer-events:none; }

.inspector{ border-left:1px solid var(--line); background:rgba(6,9,17,.5); overflow-y:auto; min-height:0; }
.insp-tabs{ display:flex; border-bottom:1px solid var(--line); position:sticky; top:0;
  background:rgba(6,9,17,.95); backdrop-filter:blur(14px); z-index:2; }
.insp-tabs button{ flex:1; background:transparent; border:0; border-bottom:2px solid transparent;
  padding:12px 6px; font-size:12px; color:var(--faint); cursor:pointer; transition:color .2s, border-color .2s; }
.insp-tabs button:hover{ color:var(--muted); }
.insp-tabs button.on{ color:#ffd98a; border-bottom-color:var(--amber); }
.insp-body{ padding:16px 15px 40px; display:flex; flex-direction:column; gap:16px; }
.insp-body.hide{ display:none; }
.sec{ display:flex; flex-direction:column; gap:11px; }
.sec-t{ font-size:10.5px; letter-spacing:2.2px; text-transform:uppercase; color:var(--faint);
  display:flex; align-items:center; gap:9px; }
.sec-t::after{ content:""; flex:1; height:1px; background:var(--line2); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.slider-row{ display:flex; flex-direction:column; gap:2px; }
.slider-row .top{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.slider-row .top i{ font-style:normal; color:var(--faint); font-variant-numeric:tabular-nums; }

.cellinfo{ border:1px solid var(--line); border-radius:12px; padding:12px 13px; background:rgba(255,255,255,.02); }
.cellinfo .n{ font-family:var(--disp); font-weight:700; font-size:17px; color:#fff; letter-spacing:.4px; }
.cellinfo .sub{ font-size:12px; color:var(--muted2); margin-top:3px; line-height:1.6; }
.cellinfo .file{ font-size:11px; color:var(--faint); margin-top:7px; word-break:break-all; line-height:1.5; }
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; padding:3px 8px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted2); letter-spacing:.4px; }
.badge.ok{ color:var(--ok); border-color:rgba(110,231,168,.32); }
.badge.warn{ color:var(--warn); border-color:rgba(255,190,77,.34); }
.badge.bad{ color:var(--bad); border-color:rgba(255,122,122,.34); }

/* 和 .stage-hint 同一个毛病：11.5px 的字用 --faint 只有 4.3:1，低于 AA 的 4.5:1。 */
.statusbar{ grid-column:1/-1; display:flex; align-items:center; gap:16px; padding:0 15px;
  border-top:1px solid var(--line); background:rgba(6,9,17,.82); font-size:11.5px; color:var(--muted2);
  letter-spacing:.3px; }
.statusbar b{ color:var(--muted); font-weight:400; }
.statusbar .sp{ flex:1; }

/* ============ 天体选择：星表 + 编号/关键词 ============ */
.objpick{ display:flex; gap:6px; }
.objpick > select{ flex:0 0 94px; min-width:0; }
.objq{ position:relative; flex:1; min-width:0; }
.objmenu{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; display:none;
  background:rgba(10,14,24,.98); backdrop-filter:blur(16px); border:1px solid rgba(255,190,77,.45);
  border-radius:10px; max-height:300px; overflow:auto; box-shadow:0 18px 46px -14px rgba(0,0,0,.9); }
.objmenu.on{ display:block; }
.objmenu .oi{ padding:7px 10px; cursor:pointer; border-bottom:1px solid var(--line2); font-size:12.5px;
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.objmenu .oi:last-child{ border-bottom:0; }
.objmenu .oi:hover{ background:rgba(255,190,77,.12); }
.objmenu .oi b{ color:var(--amber); font-weight:600; }
.objmenu .oi .zh{ color:var(--ink); }
.objmenu .oi .en{ color:var(--muted2); font-style:italic; font-size:11.5px; }
.objmenu .oi .meta{ margin-left:auto; color:var(--faint); font-size:11px; white-space:nowrap; }
.objmenu .omsg{ padding:9px 11px; color:var(--muted2); font-size:12px; }
/* 放宽提示是条说明不是选项，压深背景 + 分隔线，别让人误点 */
.objmenu .owide{ background:rgba(255,190,77,.08); border-bottom:1px solid var(--line);
  color:var(--amber); }

/* ============ 设备表 ============ */
.gear{ border:1px solid var(--line2); border-radius:10px; padding:8px; margin-bottom:7px;
  background:rgba(255,255,255,.02); }
.gear .gname{ margin-bottom:6px; }
.gear .grow{ display:flex; align-items:center; gap:6px; }
.gear .gnum{ width:64px; flex:none; text-align:center; padding:6px 4px; }
.gear .gps{ flex:1; min-width:0; font-size:11px; color:var(--faint); text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gear .gdel{ flex:none; width:26px; height:26px; border:1px solid transparent; background:none;
  color:var(--faint); border-radius:7px; cursor:pointer; font-size:14px; line-height:1;
  transition:color .2s, border-color .2s, background .2s; }
.gear .gdel:hover{ color:var(--bad); border-color:rgba(255,122,122,.4); background:rgba(255,122,122,.1); }
.gear-empty{ font-size:12px; color:var(--faint); line-height:1.7; margin-bottom:8px; }

/* ============ 弹层 ============ */
.modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(2,4,9,.74); backdrop-filter:blur(8px); padding:30px; }
.modal.hide{ display:none; }
.modal-card{ width:min(560px,100%); background:var(--panel); backdrop-filter:blur(24px);
  border:1px solid var(--line); border-radius:18px; padding:28px 30px 24px;
  box-shadow:0 40px 110px -40px rgba(0,0,0,.95); animation:rise .4s cubic-bezier(.2,.7,.25,1) both; }
.modal-card h3{ font-family:var(--disp); font-weight:700; font-size:20px; margin:0 0 6px; }
.modal-card p{ color:var(--muted2); font-size:13.5px; line-height:1.8; margin:0 0 18px; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }

.prog{ height:3px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; margin:16px 0 8px; }
.prog i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--amber2),var(--amber));
  border-radius:3px; transition:width .18s ease; }
.prog-txt{ font-size:12px; color:var(--muted2); font-variant-numeric:tabular-nums; }

.toast{ position:fixed; left:50%; bottom:52px; transform:translateX(-50%) translateY(14px); z-index:70;
  background:rgba(10,14,24,.94); backdrop-filter:blur(14px); border:1px solid var(--line);
  border-radius:999px; padding:11px 22px; font-size:13px; color:var(--ink);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9); opacity:0; pointer-events:none;
  transition:opacity .28s, transform .28s; max-width:min(560px,86vw); text-align:center; }
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.warn{ border-color:rgba(255,190,77,.4); }
.toast.bad{ border-color:rgba(255,122,122,.45); }

@media (max-width:1180px){
  #editor{ grid-template-columns:200px 1fr 262px; }
}
/* 窄屏：启动页四列表单挤成一团，收成两列；版式风格同理。
   编辑器本身是桌面版式工具，手机上不是可用形态，这里只保证启动页读得下去。 */
@media (max-width:760px){
  .setup-card{ padding:28px 20px 24px; border-radius:16px; }
  .setup-card h1{ font-size:32px; }
  .setup-lede{ font-size:13.5px; margin-bottom:22px; }
  .setup-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .style-row{ grid-template-columns:repeat(2,1fr); }
  /* 英文标签比中文长，窄屏两列下 "Landscape" 正好差几个像素被切掉 */
  .seg button{ padding:8px 1px; font-size:11.5px; }
  .setup-foot{ flex-direction:column; align-items:stretch; }
  .setup-foot > div{ justify-content:flex-end; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}