/* ============================================================
   Wireframe Kit — CSS Design System (zh)
   Grayscale · system sans body · monospace labels/annotations
   Thin black borders · hatched fills · no color. Spec-grade.
   ============================================================ */

:root{
  --ink:#1b1b1b;
  --ink-2:#525252;
  --ink-3:#717171;
  --line:#1b1b1b;
  --line-soft:#b4b4b4;
  --fill:#e4e4e4;
  --fill-2:#efefef;
  --paper:#ffffff;
  --backdrop:#d7d7d7;
  --bar:#1a1a1a;
  --bar-ink:#e9e9e9;
  --bar-ink-dim:#b0b0b0;
  --hair:#cfcfcf;
  --hatch:repeating-linear-gradient(45deg,#fff,#fff 5px,#ededed 5px,#ededed 10px);
  --hatch-d:repeating-linear-gradient(45deg,#fff,#fff 4px,#dcdcdc 4px,#dcdcdc 8px);
  --hatch-ph:repeating-linear-gradient(45deg,#fff,#fff 6px,#e0e0e0 6px,#e0e0e0 12px);
  --cjk:"Noto Sans SC","Noto Sans CJK SC","PingFang SC","Microsoft YaHei","Source Han Sans SC";
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,var(--cjk),monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,var(--cjk),sans-serif;
  --hand:var(--sans);
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:var(--sans);
  background:var(--backdrop);
  color:var(--ink);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------- App shell ---------- */
#app{display:flex;flex-direction:column;height:100vh;}
.topbar{
  display:flex;align-items:center;gap:18px;
  padding:9px 16px;border-bottom:2px solid #000;
  background:var(--bar);color:var(--bar-ink);flex:0 0 auto;
}
.topbar .brand{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.06em;color:#fff;}
.topbar .brand b{color:#fff;}
.topbar .sub{font-family:var(--mono);color:var(--bar-ink-dim);font-size:10px;text-transform:uppercase;letter-spacing:.1em;}
.spacer{flex:1;}
.filterpills{display:flex;gap:0;border:1px solid #3a3a3a;border-radius:2px;overflow:hidden;}
.fpill{
  font-family:var(--mono);font-size:11px;cursor:pointer;
  padding:5px 11px;background:#262626;color:#cfcfcf;border:0;border-left:1px solid #3a3a3a;white-space:nowrap;
}
.fpill:first-child{border-left:0;}
.fpill:hover{background:#333;color:#fff;}
.fpill.active{background:#f1f1f1;color:#111;font-weight:600;}

.body{display:flex;flex:1;min-height:0;}

/* ---------- Sidebar navigator ---------- */
.sidebar{
  width:282px;flex:0 0 auto;border-right:2px solid #000;
  background:#ececec;overflow-y:auto;padding:8px 0 60px;
}
.nav-search{margin:8px 12px 12px;}
.nav-search input{
  width:100%;font-family:var(--mono);font-size:12px;padding:7px 10px;
  border:1.4px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);
}
.nav-search input::placeholder{color:var(--ink-3);}
.nav-sec{margin:1px 0;}
.nav-sec > .sec-h{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:11px 14px 4px;cursor:pointer;display:flex;align-items:center;gap:6px;
}
.nav-sec .surf-tag{font-size:9px;border:1px solid var(--line-soft);border-radius:2px;padding:0 4px;color:var(--ink-2);}
.nav-item{
  font-family:var(--sans);font-size:13px;padding:5px 14px 5px 22px;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;gap:8px;line-height:1.25;
}
.nav-item:hover{background:#e0e0e0;}
.nav-item.active{background:var(--ink);color:#fff;}
.nav-item .dot{width:5px;height:5px;border:1px solid var(--ink-3);flex:0 0 auto;}
.nav-item.active .dot{background:#fff;border-color:#fff;}
.nav-item .ct{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-3);}
.nav-item.active .ct{color:var(--bar-ink-dim);}

/* ---------- Stage ---------- */
.stage{
  flex:1;min-width:0;overflow:auto;position:relative;
  background:var(--backdrop);
  display:flex;flex-direction:column;align-items:center;
  padding:24px 24px 90px;
}
.stage-head{width:100%;max-width:1300px;margin-bottom:6px;}
.stage-head .crumb{font-family:var(--mono);color:var(--ink-2);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;}
.stage-head h1{font-family:var(--sans);font-size:22px;margin:5px 0 0;font-weight:600;letter-spacing:.01em;}
.stage-head h1 .faithful{margin-left:8px;}
.stage-head .desc{color:var(--ink-2);font-size:13px;margin-top:6px;max-width:780px;line-height:1.5;}

.state-tabs{display:flex;flex-wrap:wrap;gap:0;margin:14px 0 2px;border:1px solid var(--line);border-radius:2px;overflow:hidden;width:fit-content;max-width:100%;}
.state-tab{
  font-family:var(--mono);font-size:11px;cursor:pointer;padding:6px 11px;
  background:#fafafa;color:var(--ink-2);border-left:1px solid var(--line);white-space:nowrap;
}
.state-tab:first-child{border-left:0;}
.state-tab:hover{background:#fff;color:var(--ink);}
.state-tab.active{background:var(--ink);color:#fff;font-weight:600;}
.state-note{font-family:var(--mono);font-size:11px;color:#454545;margin:10px 0 2px;max-width:840px;line-height:1.5;
  border-left:2px solid var(--ink);padding:2px 0 2px 9px;}
.state-note::before{content:"› ";color:var(--ink-3);}

.frame-wrap{display:flex;gap:22px;align-items:flex-start;justify-content:center;flex-wrap:wrap;width:100%;padding:16px 0 0;}

/* ---------- Device frames ---------- */
.device{position:relative;}
.screen-cap{font-family:var(--mono);font-size:10px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.1em;
  margin:0 2px 8px;}

/* mobile / h5 = clean bordered rectangle, no skeuomorphic bezel */
.phone{
  width:390px;height:844px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:5px;
  overflow:hidden;position:relative;
}
.phone-screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;background:var(--paper);}

.h5 .browserbar{
  height:34px;background:#f3f3f3;border-bottom:1.5px solid var(--line);
  display:flex;align-items:center;gap:8px;padding:0 12px;font-family:var(--mono);font-size:10px;color:var(--ink-2);
  position:relative;z-index:50;
}
.h5 .browserbar .url{flex:1;background:#fff;border:1px solid var(--line-soft);border-radius:3px;
  padding:3px 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

/* T5 landscape (1920×1080 device) — light screen, subtle dark bezel.
   Class names `.t5` / `.t5-screen` are template API; rename only if you also rename surface key in framework.js. */
.t5{
  width:1920px;height:1080px;background:#141414;
  border-radius:16px;padding:18px 18px 0;
  overflow:hidden;position:relative;transform-origin:top left;
}
.t5-screen{position:relative;background:var(--paper);border:1.5px solid #000;border-radius:7px;
  overflow:hidden;height:1044px;color:var(--ink);}

/* ---------- Phone chrome ---------- */
.statusbar{height:30px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;font-family:var(--mono);font-size:11px;color:var(--ink-2);border-bottom:1px solid var(--fill-2);
  position:relative;z-index:40;background:var(--paper);}
.appbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1.5px solid var(--line);}
.appbar .back{width:18px;height:18px;border:1.4px solid var(--ink);border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.appbar .back::before{content:"";width:5px;height:5px;border-left:1.4px solid var(--ink);border-bottom:1.4px solid var(--ink);transform:rotate(45deg) translate(1px,-1px);}
.appbar .title{font-family:var(--sans);font-size:15px;font-weight:600;flex:1;}
.appbar .title.left{text-align:left;}
.appbar .r{font-family:var(--mono);font-size:13px;color:var(--ink-2);cursor:pointer;}
.tabbar{position:absolute;bottom:0;left:0;right:0;height:54px;background:var(--paper);
  border-top:1.5px solid var(--line);display:flex;z-index:40;}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);}
.tabbar .tab .ic{width:18px;height:18px;border:1.3px solid var(--ink-3);border-radius:3px;}
.tabbar .tab.active{color:var(--ink);}
.tabbar .tab.active .ic{border-color:var(--ink);background:var(--fill);}

/* home indicator — 全屏 mobile 底部通用组件，恒有（规范2），置于 tabbar 之上 */
.home-indicator{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  width:134px;height:5px;border-radius:3px;background:var(--ink);opacity:.82;z-index:60;pointer-events:none;}

/* 弹窗 surface — 非全屏，免 390×844 与上下通用组件（规范2 例外），明显画成浮层 */
.popup-stage{width:390px;background:rgba(22,22,22,.42);border:1.5px dashed var(--line);border-radius:6px;
  padding:46px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;}
.popup-card{width:100%;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
  padding:18px 16px;box-shadow:0 10px 30px rgba(0,0,0,.20);}

/* ---------- Content area ---------- */
.scr{padding:16px;display:flex;flex-direction:column;gap:0;}
.scr{padding-bottom:74px;}
.scr.no-tab{padding-bottom:30px;}
.h5 .scr{padding:16px;}

/* ---------- Primitives ---------- */
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px;}
.wf-h{font-weight:600;}
h2.wf{font-family:var(--sans);font-size:19px;font-weight:600;margin:6px 0 8px;line-height:1.2;}
h3.wf{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:16px 0 6px;font-weight:400;}
.muted{color:var(--ink-2);}
.tiny{font-size:12px;color:var(--ink-2);line-height:1.5;}
.center{text-align:center;}

.card{
  background:var(--paper);border:1.4px solid var(--line);border-radius:4px;
  padding:14px;margin:10px 0;
}
.card.alt{border-radius:4px;}
.card.flat,.card.soft{border-color:var(--line-soft);}
.card.sel{border-width:2px;border-color:var(--ink);background:var(--fill-2);}
.card.tight{padding:11px 13px;}

.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font-family:var(--sans);font-size:13.5px;font-weight:600;padding:12px 14px;cursor:pointer;
  border:1.4px solid var(--ink);background:var(--paper);color:var(--ink);
  border-radius:3px;margin:8px 0;text-align:center;
}
.btn:hover{filter:brightness(.97);}
.btn.pri,.btn.dark,.btn.link,.btn.ok,.btn.danger{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn.ghost{border-color:var(--line-soft);color:var(--ink-2);font-weight:500;}
.btn.sm{font-size:12px;padding:8px 12px;width:auto;display:inline-flex;font-weight:600;}
.btn.disabled,.btn[disabled]{opacity:.34;cursor:not-allowed;}
.txtlink{font-family:var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:12.5px;}
.txtlink.center{display:block;text-align:center;margin:12px 0;}
.txtlink.danger{color:var(--ink);}

.row{display:flex;align-items:center;gap:10px;}
.row.sb{justify-content:space-between;}
.col{display:flex;flex-direction:column;}
.gap6{gap:6px;}.gap10{gap:10px;}.gap14{gap:14px;}
.mt8{margin-top:8px;}.mt14{margin-top:14px;}.mb8{margin-bottom:8px;}
.grow{flex:1;}

.listrow{display:flex;align-items:center;gap:11px;padding:13px 2px;border-bottom:1px solid var(--line-soft);cursor:pointer;}
.listrow:last-child{border-bottom:none;}
.listrow .lr-t{flex:1;font-size:14px;}
.listrow .lr-v{font-family:var(--mono);color:var(--ink-2);font-size:12px;}
.listrow .chev{font-family:var(--mono);color:var(--ink-3);font-size:14px;}

/* pill = status chip (mono uppercase) */
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border:1.4px solid var(--ink);border-radius:999px;background:var(--paper);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.chip.ok,.chip.info{border-color:var(--ink);color:var(--ink);background:var(--paper);}
.chip.warn,.chip.bad{border-color:var(--ink);color:var(--ink);background:var(--hatch-d);}
.chip.grey{border-color:var(--line-soft);color:var(--ink-2);background:var(--paper);}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0;}

/* notice = banner */
.banner{border:1.5px solid var(--ink);border-radius:4px;padding:11px 13px;margin:9px 0;font-size:13px;line-height:1.45;display:flex;gap:11px;align-items:flex-start;}
.banner .bi{flex:0 0 auto;width:20px;height:20px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:12px;transform:rotate(45deg);}
.banner .bi > *{display:block;transform:rotate(-45deg);}
.banner.info,.banner.ok{background:var(--fill-2);border-color:var(--line-soft);}
.banner.info .bi,.banner.ok .bi{border-color:var(--ink-3);color:var(--ink-2);border-radius:50%;transform:none;}
.banner.info .bi > *,.banner.ok .bi > *{transform:none;}
.banner.warn,.banner.bad{background:var(--hatch);border-color:var(--ink);}
.banner.urgent{background:var(--ink);color:#fff;border-color:#000;}
.banner.urgent .bi{border-color:#fff;color:#fff;}

/* placeholder */
.ph{
  background:var(--hatch-ph);
  border:1.4px solid var(--line-soft);border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;color:var(--ink-2);text-align:center;padding:8px;letter-spacing:.03em;
}
.ph.qr{background:var(--hatch-d);border:1.6px solid var(--ink);position:relative;}
.qr-pat{width:78%;height:78%;background:var(--hatch-d);border:1.4px solid var(--ink);}
.circ{border-radius:50%;}

.radio{display:flex;align-items:center;gap:11px;padding:12px;border:1.4px solid var(--line);border-radius:3px;margin:7px 0;cursor:pointer;background:var(--paper);}
.radio .rb{width:18px;height:18px;border:1.5px solid var(--ink);border-radius:50%;flex:0 0 auto;}
.radio.sel{border-width:2px;border-color:var(--ink);background:var(--fill-2);}
.radio.sel .rb{background:var(--ink);box-shadow:inset 0 0 0 3px var(--paper);}
.radio .rt{flex:1;font-size:13.5px;}
.radio .rsub{font-size:11.5px;color:var(--ink-2);margin-top:2px;}

.toggle{width:42px;height:24px;border:1.4px solid var(--ink);border-radius:14px;position:relative;background:var(--paper);flex:0 0 auto;}
.toggle .kn{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:1.4px solid var(--ink);}
.toggle.on{background:var(--ink);}
.toggle.on .kn{left:auto;right:2px;background:#fff;border-color:#fff;}
.toggle.lock{opacity:.45;}

.field{border:1.4px solid var(--line);border-radius:3px;padding:11px 12px;margin:7px 0;font-size:13px;font-family:var(--mono);color:var(--ink-3);background:var(--paper);}
.field.fill{color:var(--ink);}

.seatbar{display:flex;gap:6px;margin:10px 0;}
.seat{width:40px;height:34px;border:1.3px solid var(--ink);border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--ink-2);background:var(--fill);}
.seat.filled{background:var(--fill);}
.seat.owner{background:var(--ink);color:#fff;}
.seat:not(.filled):not(.owner){background:var(--hatch-d);border-style:dashed;border-color:var(--line-soft);}

/* modal */
.scrim{position:absolute;inset:0;background:rgba(20,20,20,.34);z-index:70;display:flex;align-items:center;justify-content:center;padding:22px;}
.scrim.bottom{align-items:flex-end;padding:0;}
.modal{background:var(--paper);border:1.7px solid var(--line);border-radius:6px;padding:20px 18px;width:100%;max-width:340px;}
.modal.sheet{max-width:none;border-radius:8px 8px 0 0;width:100%;border-bottom:0;}
.modal h3{font-family:var(--sans);font-size:17px;font-weight:600;margin:2px 0 12px;line-height:1.2;}
.modal .r{font-family:var(--mono);cursor:pointer;}
.toast{position:absolute;left:16px;right:16px;bottom:70px;background:var(--ink);color:#fff;
  border-radius:4px;padding:11px 13px;font-family:var(--mono);font-size:12px;z-index:80;display:flex;align-items:center;gap:8px;}
.h5 .toast{bottom:20px;}

.valprops{font-size:13px;line-height:1.7;}
.valprops b{font-family:var(--mono);font-weight:700;}

.skel{background:var(--fill);border-radius:2px;animation:pulse 1.3s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.5;}50%{opacity:.9;}}
.spin{width:30px;height:30px;border:2.5px solid var(--line-soft);border-top-color:var(--ink);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- landscape internal (light) ---------- */
.t5-pad{padding:24px 30px;height:100%;overflow:hidden;}
.t5-topbar{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;color:var(--ink-3);}
.t5-card{background:var(--paper);border:1.4px solid var(--line);border-radius:5px;padding:18px 20px;color:var(--ink);}
.t5-card.soft{border-color:var(--line-soft);}
.t5-left{width:300px;flex:0 0 auto;border-right:1.5px solid var(--line);padding-right:24px;}
.t5-right{flex:1;min-width:0;}
.t5 .btn{font-size:15px;}
.t5 .ph{color:var(--ink-2);}
.t5 .chip{background:var(--paper);}
.t5-nav{display:flex;flex-direction:column;gap:2px;margin-top:18px;}
.t5-nav .it{padding:10px 12px;border-radius:3px;color:var(--ink-2);font-size:14px;}
.t5-nav .it.active{background:var(--ink);color:#fff;}
.t5 .muted{color:var(--ink-2);}
.t5 .eyebrow{color:var(--ink-3);}

/* cover / index */
.cover{max-width:1040px;margin:0 auto;}
.cover .crumb{font-family:var(--mono);color:var(--ink-2);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;}
.cover h1{font-family:var(--sans);font-size:30px;margin:8px 0;font-weight:600;letter-spacing:-.01em;}
.cover h1 b{font-weight:600;}
.cover .desc{font-size:14px;line-height:1.6;color:var(--ink-2);}
.cover .desc b{color:var(--ink);font-weight:600;}
.grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px;}
.idx-card{background:var(--paper);border:1.4px solid var(--line);border-radius:4px;padding:16px;}
.idx-card h3{font-family:var(--sans);margin:0 0 8px;font-size:15px;font-weight:600;}
.idx-card .il{font-family:var(--sans);font-size:13px;padding:5px 0;border-bottom:1px dashed var(--line-soft);cursor:pointer;display:flex;gap:8px;line-height:1.3;align-items:flex-start;}
.idx-card .il:hover{color:var(--ink);background:var(--fill-2);}
.idx-card .il:last-child{border-bottom:none;}
.idx-card .il span:first-child{font-family:var(--mono);color:var(--ink-3);}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--ink-2);}
.legend .lg{display:flex;align-items:center;gap:7px;}
.sw{width:24px;height:15px;border:1.4px solid var(--line);border-radius:2px;}

.note-pill{display:inline-block;font-family:var(--mono);font-size:10.5px;color:#454545;
  border-left:2px solid var(--ink);padding:2px 0 2px 8px;margin:3px 0;line-height:1.45;}
.note-pill::before{content:"› ";color:var(--ink-3);}
.faithful{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  border:1.3px solid var(--ink);color:var(--ink);border-radius:2px;padding:1px 6px;vertical-align:middle;}

.flow-link{cursor:pointer;}
em.cfg{font-style:normal;font-family:var(--mono);font-size:.92em;color:currentColor;border-bottom:1px dotted currentColor;padding:0 1px;opacity:.95;}
em.cfg-bracket{font-style:normal;font-family:var(--mono);font-size:.92em;color:currentColor;border-bottom:1px dashed currentColor;padding:0 1px;opacity:.95;}
.banner.urgent em.cfg,.banner.urgent em.cfg-bracket{color:#fff;border-bottom-color:#fff;}
.banner.bad em.cfg,.banner.warn em.cfg,.banner.bad em.cfg-bracket,.banner.warn em.cfg-bracket{color:var(--ink);border-bottom-color:var(--ink);}
#counts{font-family:var(--mono);}

/* ---------- component-state showcase (outside device frame) ---------- */
.comp-showcase{flex:0 0 264px;width:264px;align-self:flex-start;border:1.5px solid var(--line-soft);border-radius:6px;
  background:var(--paper);padding:14px 14px 18px;font-family:var(--sans);max-height:782px;overflow-y:auto;box-sizing:border-box;}
.comp-showcase .cs-h{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink);}
.comp-showcase .cs-note{font-size:10.5px;color:var(--ink-2);margin:4px 0 12px;line-height:1.45;}
.comp-showcase .cs-g{border-top:1px solid var(--line-soft);padding-top:9px;margin-top:11px;}
.comp-showcase .cs-g:first-of-type{border-top:none;margin-top:2px;}
.comp-showcase .cs-gt{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin-bottom:8px;}
.comp-showcase .cs-row{display:flex;align-items:center;gap:9px;margin:7px 0;}
.comp-showcase .cs-row .btn{width:auto;flex:0 0 auto;margin:0;}
.comp-showcase .cs-tag{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);}
.comp-showcase .banner{margin:7px 0;}
.comp-showcase .listrow{padding:10px 2px;}
.comp-showcase .field{margin:6px 0;}
.btn.pressed{transform:translateY(1px);filter:brightness(.9);}
.txtlink.cs-dis{opacity:.4;cursor:not-allowed;text-decoration:none;}
.field.cs-focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--fill);}
.listrow.cs-press{background:var(--fill);}
.spin.sm{width:13px;height:13px;border-width:2px;margin:0 7px 0 0;display:inline-block;vertical-align:middle;}

/* per-screen optional collapsible drawer · only rendered when screen def declares componentVariants */
.comp-drawer{align-self:flex-start;flex:0 0 280px;width:280px;background:var(--paper);border:1.5px solid var(--line-soft);border-radius:6px;box-sizing:border-box;font-family:var(--sans);overflow:hidden;}
.comp-drawer .cd-summary{cursor:pointer;padding:10px 12px;font-size:12.5px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center;list-style:none;background:var(--fill-2);border-bottom:1px solid var(--line-soft);}
.comp-drawer .cd-summary::-webkit-details-marker{display:none;}
.comp-drawer .cd-summary:hover{background:var(--fill);}
.comp-drawer .cd-summary .cd-hint{font-size:10.5px;color:var(--ink-3);font-weight:400;font-family:var(--mono);}
.comp-drawer[open] .cd-summary .cd-hint::before{content:'已展开 · 点击收起';}
.comp-drawer:not([open]) .cd-summary .cd-hint::before{content:'点击展开';}
.comp-drawer .cd-body{padding:12px 13px 16px;max-height:720px;overflow-y:auto;}
.comp-drawer .cd-note{font-size:10.5px;color:var(--ink-2);margin:0 0 12px;line-height:1.5;}
.comp-drawer .cd-g{border-top:1px solid var(--line-soft);padding-top:9px;margin-top:11px;}
.comp-drawer .cd-g:first-of-type{border-top:none;margin-top:2px;padding-top:0;}
.comp-drawer .cd-gh{font-size:11.5px;font-weight:600;color:var(--ink);margin-bottom:8px;display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.comp-drawer .cd-gh b{font-family:var(--mono);font-weight:600;letter-spacing:.02em;}
.comp-drawer .cd-gh .cd-intro{font-size:10px;color:var(--ink-3);font-weight:400;font-family:var(--sans);text-align:right;}
.comp-drawer .cd-items{display:flex;flex-direction:column;gap:6px;}
.comp-drawer .cd-row{display:flex;align-items:center;gap:9px;}
.comp-drawer .cd-row .btn{width:auto;flex:0 0 auto;margin:0;}
.comp-drawer .cd-row .banner{margin:0;flex:1;}
.comp-drawer .cd-row .chip{flex:0 0 auto;}

/* ============================================================
   embed mode (child iframe loaded by prototype-map hides chrome)
   ============================================================ */
body.embed-mode .topbar,
body.embed-mode .sidebar,
body.embed-mode .stage-head{display:none !important;}
body.embed-mode #app{height:100vh;}
body.embed-mode .body{height:100vh;}
body.embed-mode .stage{padding:0 !important;margin:0 !important;width:100% !important;}
body.embed-mode .frame-wrap{padding:0 !important;margin:0 !important;display:block !important;}
body.embed-mode .device{margin:0 !important;padding:0 !important;}
body.embed-mode .screen-cap{display:none !important;}
body.embed-mode .comp-drawer{display:none !important;}
body.embed-mode .cover{padding:8px !important;}

/* ============================================================
   prototype-map mini-cover (single-screen thumbnail card)
   ============================================================ */
.mini-cover{
  position:absolute;
  background:#fff;
  border:1px solid #d6dae3;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(15,23,42,.06);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:box-shadow .15s, border-color .15s, opacity .2s;
}
.mini-cover:hover{box-shadow:0 6px 20px rgba(15,23,42,.18);border-color:#94a3b8;z-index:5;}
.mini-cover.surf-mobile{border-top:3px solid #2563eb;}
.mini-cover.surf-t5{border-top:3px solid #16a34a;}
.mini-cover.surf-h5{border-top:3px solid #d97706;}
.mini-cover.surf-cover{border-top:3px solid #7c3aed;}

.mc-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 8px;background:#f8fafc;border-bottom:1px solid #e2e8f0;
  font-size:11px;line-height:1.2;flex:0 0 auto;
}
.mc-title{font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:75%;}
.mc-section{color:#64748b;font-size:9.5px;background:#e2e8f0;padding:1px 5px;border-radius:3px;}

.mc-frame{
  flex:1;
  position:relative;
  overflow:hidden;
  background:#f1f5f9;
}
.mc-iframe{
  position:absolute;top:0;left:0;
  border:0;
  transform-origin:0 0;
  pointer-events:none;
  background:#fff;
}
/* iframe scaling per surface (cards size by real ratio) */
.mini-cover.surf-mobile .mc-iframe{
  width:390px; height:812px;
  transform:scale(.385);
}
.mini-cover.surf-t5 .mc-iframe{
  width:1920px; height:1080px;
  transform:scale(.161);
}
.mini-cover.surf-h5 .mc-iframe{
  width:390px; height:812px;
  transform:scale(.385);
}
.mini-cover.surf-cover .mc-iframe,
.mini-cover.surf-unknown .mc-iframe{
  width:555.56%; height:555.56%;
  transform:scale(.18);
}
.mc-overlay{
  position:absolute;inset:0;
  cursor:pointer;
  background:transparent;
  z-index:2;
}
.mc-overlay:hover{
  background:linear-gradient(180deg, rgba(15,23,42,.04) 0%, rgba(15,23,42,.08) 100%);
  outline:2px solid rgba(15,23,42,.45);
  outline-offset:-2px;
}
.mc-badges{
  display:flex;flex-wrap:wrap;gap:3px;
  padding:4px 6px;background:#fafbfc;border-top:1px solid #e2e8f0;
  flex:0 0 auto;max-height:42px;overflow:hidden;
}
.state-badge{
  font-size:9px;line-height:1.2;
  padding:2px 5px;
  background:#eef2f7;color:#475569;
  border:1px solid #cbd5e1;border-radius:3px;
  cursor:pointer;
  font-family:var(--mono, ui-monospace, Menlo, monospace);
}
.state-badge:hover{background:#dbeafe;border-color:#3b82f6;color:#1d4ed8;z-index:3;position:relative;}

/* ============================================================
   pan-zoom canvas
   ============================================================ */
.pz-wrap{
  position:relative;
  width:100%;height:calc(100vh - 140px);
  min-height:600px;
  background:radial-gradient(circle at 50% 50%, #f8fafc 0%, #e8eef5 100%);
  border:1px solid #cbd5e1;border-radius:6px;
  overflow:hidden;
  user-select:none;
}
.pz-viewport{
  position:absolute;inset:0;
  overflow:hidden;
  cursor:grab;
}
.pz-viewport.dragging{cursor:grabbing;}
.pz-canvas{
  position:absolute;top:0;left:0;
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size:40px 40px;
  background-color:#fdfefe;
}
.pz-controls{
  position:absolute;left:14px;bottom:14px;
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;
  background:rgba(15,23,42,.92);color:#f1f5f9;
  border-radius:8px;
  box-shadow:0 4px 16px rgba(15,23,42,.18);
  font-size:12px;z-index:50;
}
.pz-btn{
  appearance:none;border:0;background:#334155;color:#f1f5f9;
  width:28px;height:28px;border-radius:4px;cursor:pointer;
  font-size:16px;line-height:1;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s;
}
.pz-btn:hover{background:#475569;}
.pz-ratio{font-family:var(--mono, ui-monospace, Menlo, monospace);min-width:42px;text-align:center;}
.pz-hint{color:#94a3b8;font-size:11px;margin-left:6px;}

/* ============================================================
   minimap
   ============================================================ */
.pz-minimap{
  position:absolute;right:14px;top:14px;
  width:220px;height:160px;
  background:rgba(255,255,255,.95);
  border:1px solid #cbd5e1;border-radius:6px;
  box-shadow:0 4px 16px rgba(15,23,42,.12);
  overflow:hidden;
  z-index:50;
}
.mm-stage{
  position:relative;
  width:100%;height:calc(100% - 16px);
  background:#f8fafc;
}
.mm-content{position:absolute;inset:0;}
.mm-dot{position:absolute;border-radius:1px;opacity:.7;}
.mm-mobile{background:#2563eb;}
.mm-t5{background:#16a34a;}
.mm-h5{background:#d97706;}
.mm-cover{background:#7c3aed;}
.mm-other{background:#94a3b8;}
.mm-viewport{
  position:absolute;
  border:1.5px solid #ef4444;
  background:rgba(239,68,68,.08);
  pointer-events:none;
}
.mm-label{
  position:absolute;left:0;bottom:0;right:0;
  background:#1e293b;color:#cbd5e1;
  font-size:9.5px;text-align:center;padding:1px 0;
  font-family:var(--mono, ui-monospace, Menlo, monospace);
}

/* ============================================================
   flow filter sidebar
   ============================================================ */
.flow-filter-sidebar{
  position:absolute;left:14px;top:14px;
  width:200px;max-height:calc(100% - 100px);
  background:rgba(255,255,255,.96);
  border:1px solid #cbd5e1;border-radius:6px;
  box-shadow:0 4px 16px rgba(15,23,42,.12);
  overflow-y:auto;
  z-index:50;
  font-size:11.5px;
}
.ffs-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 10px;background:#1e293b;color:#f1f5f9;
  border-radius:6px 6px 0 0;font-weight:600;
}
.ffs-clear{
  appearance:none;border:1px solid #475569;background:transparent;color:#cbd5e1;
  font-size:10px;padding:2px 8px;border-radius:3px;cursor:pointer;
}
.ffs-clear:hover{background:#334155;}
.ffs-section{
  padding:6px 10px 4px;font-size:10px;color:#64748b;text-transform:uppercase;
  letter-spacing:.04em;font-weight:600;background:#f8fafc;border-top:1px solid #e2e8f0;
}
.ffs-chips{display:flex;flex-direction:column;gap:3px;padding:4px 6px 8px;}
.flow-chip{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 8px;border-radius:4px;cursor:pointer;
  background:#f1f5f9;color:#334155;border:1px solid transparent;
  transition:.1s;
}
.flow-chip:hover{background:#e2e8f0;border-color:#cbd5e1;}
.flow-chip.active{background:#dbeafe;border-color:#3b82f6;color:#1d4ed8;font-weight:600;}
.fc-ct{font-family:var(--mono, ui-monospace, Menlo, monospace);font-size:10px;color:#64748b;}
.flow-chip.active .fc-ct{color:#1d4ed8;}

/* ============================================================
   SVG edge overlay (on canvas)
   ============================================================ */
.ptm-edges{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:1;
}
.flow-edge path{
  fill:none;
  stroke:#94a3b8;
  stroke-width:1.3;
  stroke-opacity:.5;
  transition:stroke .15s, stroke-opacity .15s, stroke-width .15s;
}
.flow-edge-label{
  font-size:10px;
  fill:#64748b;
  font-family:var(--sans, system-ui), sans-serif;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s;
}
/* label visible at scale >= 60% — JS toggles 'lbl-on' class */
.pz-canvas.lbl-on .flow-edge-label{opacity:1;}

/* flow filter: dim non-active edges; per-flow color rules below are example placeholders.
   To wire your own flow keys, add CSS rules of the form:
     .pz-canvas.flow-filtered[data-active-flow="<key>"] .flow-edge[data-flow~="<key>"]{ stroke:<color>; stroke-opacity:1; stroke-width:2; }
   The two example rules ("demo-flow-a/b") show the pattern. */
.pz-canvas.flow-filtered .flow-edge{stroke-opacity:.08;}
.pz-canvas.flow-filtered[data-active-flow="demo-flow-a"] .flow-edge[data-flow~="demo-flow-a"]{stroke:#2563eb;stroke-opacity:1;stroke-width:2;}
.pz-canvas.flow-filtered[data-active-flow="demo-flow-b"] .flow-edge[data-flow~="demo-flow-b"]{stroke:#16a34a;stroke-opacity:1;stroke-width:2;}

/* flow filter: dim non-active mini-covers (template uses [data-flow~="..."] for matching) */
.pz-canvas.flow-filtered .mini-cover{opacity:.35;}
.pz-canvas.flow-filtered[data-active-flow="demo-flow-a"] .mini-cover[data-flow~="demo-flow-a"],
.pz-canvas.flow-filtered[data-active-flow="demo-flow-b"] .mini-cover[data-flow~="demo-flow-b"]{opacity:1;}

/* prototype-map cover-style stage 全宽 */
.cover.cover-ptm{padding:0 !important;width:100%;height:100%;}
.cover.cover-ptm .ptm-toolbar{
  padding:8px 14px;background:#1e293b;color:#f1f5f9;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;
}
.cover.cover-ptm .ptm-toolbar .ptm-stat{color:#94a3b8;}
.cover.cover-ptm .ptm-toolbar .ptm-stat b{color:#f1f5f9;font-weight:600;}
.cover.cover-ptm .ptm-toolbar .ptm-actions{display:flex;gap:8px;}
.cover.cover-ptm .ptm-toolbar .ptm-tlink{
  color:#cbd5e1;text-decoration:none;font-size:11.5px;
  padding:4px 10px;border:1px solid #475569;border-radius:4px;
}
.cover.cover-ptm .ptm-toolbar .ptm-tlink:hover{background:#334155;color:#fff;}

/* ============================================================
   prototype-map fullscreen mode
   body.ptm-fullscreen hides chrome (topbar/sidebar/stage-head)
   ============================================================ */
body.ptm-fullscreen .topbar,
body.ptm-fullscreen .sidebar,
body.ptm-fullscreen .stage-head,
body.ptm-fullscreen .filterpills{display:none !important;}
body.ptm-fullscreen #app{height:100vh;}
body.ptm-fullscreen .body{height:100vh;padding:0;margin:0;}
body.ptm-fullscreen .stage{padding:0 !important;margin:0 !important;width:100vw !important;height:100vh !important;overflow:hidden;}
body.ptm-fullscreen .frame-wrap{padding:0 !important;margin:0 !important;height:100vh;display:block !important;}
body.ptm-fullscreen .cover{padding:0 !important;height:100vh;overflow:hidden;}

.ptm-fullscreen-root{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  background:#0e1116;
  z-index:1;
}
.ptm-fullscreen-root .ptm-toolbar{
  flex:0 0 auto;
  padding:10px 18px;background:#0e1116;color:#f1f5f9;
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;border-bottom:1px solid #2a2f3a;
}
.ptm-fullscreen-root .ptm-stat{color:#94a3b8;}
.ptm-fullscreen-root .ptm-stat b{color:#f1f5f9;font-weight:700;margin:0 2px;}
.ptm-fullscreen-root .ptm-actions{display:flex;gap:8px;}
.ptm-fullscreen-root .ptm-tlink{
  color:#cbd5e1;text-decoration:none;font-size:12.5px;
  padding:6px 14px;border:1px solid #475569;border-radius:4px;
}
.ptm-fullscreen-root .ptm-tlink:hover{background:#334155;color:#fff;border-color:#64748b;}
.ptm-fullscreen-root .ptm-tlink-exit{color:#fda4af;border-color:#9f1239;}
.ptm-fullscreen-root .ptm-tlink-exit:hover{background:#9f1239;color:#fff;}
.ptm-fullscreen-root .ptm-stage-wrap{
  flex:1;position:relative;min-height:0;
  background:#0e1116;
}
.ptm-fullscreen-root .pz-wrap{
  height:100% !important;min-height:0 !important;
  border-radius:0;border:0;
}

/* row headers (mobile / landscape / h5 column titles in the map) */
.ptm-row-h{
  position:absolute;
  background:linear-gradient(90deg, rgba(15,23,42,.04) 0%, rgba(15,23,42,0) 100%);
  border-left:4px solid;
  padding:14px 16px;
  font-size:18px;font-weight:700;color:#1e293b;
  letter-spacing:.01em;z-index:3;
  border-radius:0 8px 8px 0;
  pointer-events:none;
}
.ptm-row-h[data-surface="mobile"]{border-left-color:#2563eb;color:#1e3a8a;}
.ptm-row-h[data-surface="t5"]{border-left-color:#16a34a;color:#14532d;}
.ptm-row-h[data-surface="h5"]{border-left-color:#d97706;color:#7c2d12;}

/* section header inside a row band */
.ptm-sec-h{
  position:absolute;
  font-size:11.5px;font-weight:600;color:#475569;
  padding:6px 10px;background:rgba(255,255,255,.85);
  border:1px solid #e2e8f0;border-radius:4px;
  letter-spacing:.01em;z-index:2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}

/* ============================================================
   prototype-map row family + exception card + manhattan edges
   ============================================================ */

.mini-cover.surf-mobile{ border:2px solid #2563eb; }
.mini-cover.surf-t5{ border:2px solid #16a34a; }
.mini-cover.surf-h5{ border:2px solid #d97706; }

.mini-cover .surf-chip{
  position:absolute; top:6px; right:6px;
  font-size:9px; font-weight:700; letter-spacing:.04em;
  padding:2px 6px; border-radius:3px;
  background:#fff; color:#0f172a;
  border:1px solid currentColor;
  z-index:5;
}
.mini-cover.surf-mobile .surf-chip{ color:#2563eb; border-color:#2563eb; }
.mini-cover.surf-t5 .surf-chip{ color:#16a34a; border-color:#16a34a; }
.mini-cover.surf-h5 .surf-chip{ color:#d97706; border-color:#d97706; }

.mini-cover.is-exception{
  background:#fef2f2;
  border-style:dashed; border-width:1.5px; opacity:.92;
  padding:6px 8px; cursor:pointer;
}
.mini-cover.is-exception .mc-title{ font-size:10px; line-height:1.2; color:#0f172a; }
.mini-cover.is-exception .mc-state{ font-size:9px; color:#64748b; margin-top:2px; }
.mini-cover.is-exception .exc-type{
  position:absolute; top:4px; left:4px;
  font-size:8px; font-weight:700; padding:1px 4px; border-radius:2px;
  background:#dc2626; color:#fff;
}
.mini-cover.is-exception .exc-type.block{ background:#dc2626; }
.mini-cover.is-exception .exc-type.error{ background:#b91c1c; }
.mini-cover.is-exception .exc-type.empty{ background:#9ca3af; }
.mini-cover.is-exception .exc-type.conflict{ background:#d97706; }
.mini-cover.is-exception .exc-type.denied{ background:#6b21a8; }
.mini-cover.is-exception:hover{ opacity:1; }

/* family band header — color rules per family are project-specific.
   To add your own family, append rules of the form:
     .ptm-row-h[data-family="<your-family-name>"]{ border-left-color:<color>; color:<color>; }
   The two demo rules below show the pattern. */
.ptm-row-h[data-family="demo-family-a"]{ border-left-color:#7c3aed; color:#5b21b6; }
.ptm-row-h[data-family="demo-family-b"]{ border-left-color:#475569; color:#1e293b; }

.ptm-flow-h{
  position:absolute;
  font-size:12px; font-weight:600; color:#334155;
  padding:4px 10px; background:#f1f5f9;
  border:1px solid #cbd5e1; border-radius:3px;
  letter-spacing:.02em; z-index:2;
  white-space:nowrap;
}
.ptm-flow-h .ptm-flow-name{ margin-right:6px; }
.ptm-flow-h .ptm-flow-ct{ display:inline-block; padding:0 6px; background:#fff; color:#64748b; border:1px solid #cbd5e1; border-radius:8px; font-size:10px; font-weight:600; }

/* family band header (vertical left-side label) */
.ptm-fam-h{
  position:absolute;
  background:#0f172a; color:#fff;
  border-radius:4px; padding:8px 6px;
  font-size:12px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  writing-mode:vertical-rl; text-orientation:mixed;
  z-index:2;
}
.ptm-fam-h .ptm-fam-h-inner{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.ptm-fam-h .ptm-fam-name{ letter-spacing:.05em; }
.ptm-fam-h .ptm-fam-ct{ background:#f59e0b; color:#1e293b; border-radius:8px; padding:1px 6px; font-size:10px; }

/* mini-cover surface chip (top-right corner) */
.mini-cover .mc-chip{
  position:absolute; top:4px; right:4px;
  font-size:9px; font-weight:700;
  padding:1px 4px; border-radius:2px;
  color:#fff;
  z-index:3;
  letter-spacing:.04em;
}

/* exception sub-card body (text only, no iframe) */
.mini-cover.is-exception .exc-body{
  width:100%; height:100%;
  display:flex; flex-direction:column;
  padding:4px 6px;
  gap:4px;
}
.mini-cover.is-exception .exc-label{
  font-size:10px; line-height:1.25; color:#0f172a;
  font-weight:500;
  word-break:break-word;
}
.mini-cover.is-exception .exc-type.uncertain{ background:#7c3aed; }
.mini-cover.is-exception .mc-overlay{
  position:absolute; inset:0; cursor:pointer;
}

/* degraded edge style */
.flow-edge.degraded path{ stroke-dasharray:4 3; opacity:.7; }
.flow-edge.label-hidden text{ display:none; }

.ptm-edges{
  position:absolute; top:0; left:0; pointer-events:none; z-index:1;
}
.ptm-edges svg{ display:block; }
.ptm-edges path.edge{
  fill:none; stroke:#94a3b8; stroke-width:1.2; stroke-linejoin:miter;
}
.ptm-edges path.edge.edge-cross-family{ stroke:#64748b; stroke-width:1.4; }
.ptm-edges path.edge.edge-to-exception{ stroke:#cbd5e1; stroke-width:1; stroke-dasharray:3,3; }
.ptm-edges path.edge:hover{ stroke:#0f172a; stroke-width:2; }
.ptm-edges marker#arrow path{ fill:#94a3b8; }
.ptm-edges path.edge.is-hovered{ stroke:#0ea5e9; stroke-width:2; }

.ptm-edges text.edge-label{
  font-size:11px; fill:#0f172a;
  paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linecap:round; stroke-linejoin:round;
  pointer-events:auto; cursor:pointer;
}
.ptm-edges rect.edge-label-bg{
  fill:#fff; stroke:#cbd5e1; stroke-width:.8;
}

/* ============================================================
   L2 component-level annotations (overlay on stage layer)
   Lives outside the device frame — never enters render() product HTML.
   ============================================================ */
.stage-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 2px;}
.stage-controls .state-tabs{margin:0;}
.anno-toggle{
  font-family:var(--mono);font-size:11px;cursor:pointer;
  padding:5px 11px;border:1px solid var(--line);border-radius:2px;
  background:#fafafa;color:var(--ink-2);user-select:none;white-space:nowrap;
}
.anno-toggle:hover{background:#fff;color:var(--ink);}
.anno-toggle.active{background:var(--ink);color:#fff;font-weight:600;border-color:var(--ink);}

.frame-wrap{position:relative;}

.anno-dot{
  position:absolute;width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;box-shadow:0 1px 3px rgba(15,23,42,.4);
  cursor:pointer;z-index:120;transition:transform .1s, box-shadow .1s;
}
.anno-dot.hl{transform:scale(1.15);box-shadow:0 2px 6px rgba(15,23,42,.6);}

/* anno mode reserves L+R gutters on the wrap so cards can flank the device frame.
   comp-drawer takes the right slot in normal mode; hide it while annotating to avoid overlap. */
.frame-wrap.anno-on{padding-left:290px;padding-right:290px;}
.frame-wrap.anno-on .comp-drawer{display:none;}

.anno-card{
  position:absolute;width:240px;box-sizing:border-box;
  display:flex;gap:9px;align-items:flex-start;
  padding:9px 10px;border:1px solid var(--line-soft);border-radius:4px;
  background:var(--fill-2);cursor:default;z-index:115;
  transition:border-color .1s, background .1s;
}
.anno-card.hl{border-color:var(--ink);background:var(--paper);}
.anno-card .anno-num{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.anno-card .anno-text{font-size:12.5px;line-height:1.5;color:var(--ink);}

.anno-lines{
  position:absolute;top:0;left:0;
  pointer-events:none;z-index:110;
}
.anno-lines polyline{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3;opacity:.55;transition:stroke .1s, opacity .1s, stroke-width .1s;}
.anno-lines polyline.hl{stroke:var(--ink);stroke-width:1.6;opacity:1;stroke-dasharray:none;}

/* anno kind semantic colours (small-area: dot bg + card .anno-num bg + card left border).
   Default kind=info keeps existing dark-ink style.
   Rules: ① default to info — only mark ok/warn/bad when semantically warranted;
          ② colour is secondary signal only; numbering stays visible for colour-blind users. */
.anno-dot.anno-ok{background:#2e7d32;}
.anno-dot.anno-ok.hl{background:#2e7d32;}
.anno-dot.anno-warn{background:#b45309;}
.anno-dot.anno-warn.hl{background:#b45309;}
.anno-dot.anno-bad{background:#b91c1c;}
.anno-dot.anno-bad.hl{background:#b91c1c;}

.anno-card.anno-ok{border-left:3px solid #2e7d32;}
.anno-card.anno-ok .anno-num{background:#2e7d32;}
.anno-card.anno-warn{border-left:3px solid #b45309;}
.anno-card.anno-warn .anno-num{background:#b45309;}
.anno-card.anno-bad{border-left:3px solid #b91c1c;}
.anno-card.anno-bad .anno-num{background:#b91c1c;}

/* ============================================================
   mermaid logic-diagram block (used on cover-surface diagram screens)
   ============================================================ */
.mermaid-block{
  background:var(--paper);border:1.4px solid var(--line-soft);border-radius:5px;
  padding:14px 16px;margin:14px 0;overflow-x:auto;
}
.mermaid-block .mermaid{font-family:var(--mono);font-size:12px;color:var(--ink);}
.mermaid-block svg{max-width:100%;height:auto;display:block;margin:0 auto;}