/* Interactive demos. In-app surfaces use the app's tokens (--app-*); the site
   controls around them use the site's. */

/* Standalone sheets reuse .win for the app's colors (and its dark mode). */
.win.sheet { display: flex; flex-direction: column; height: auto; border-radius: 12px; user-select: text; -webkit-user-select: text; }
.win.sheet .w-sheet-t { border-bottom: 0.5px solid var(--app-pane-line); padding: 14px 16px 12px; display: flex; align-items: center; gap: 12px; }
.win.sheet .w-sheet-b { padding: 14px 16px 16px; gap: 12px; flex: 1; }
.win.sheet .w-sheet-f { flex-wrap: wrap; row-gap: 8px; }
.win button { font: inherit; color: inherit; }
.w-run { border: 0; cursor: pointer; }
.w-run:disabled { opacity: 0.45; cursor: default; }
.w-btn2 { border: 0; cursor: pointer; }
.clickable { cursor: pointer; }
.clickseg span { cursor: pointer; }

/* Site-side controls */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.demo-label { font: 600 12px/1 var(--mono); color: var(--ink-4); letter-spacing: 0; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-3); gap: 2px; }
.seg button { border: 0; background: transparent; height: 30px; padding: 0 14px; border-radius: 7px; font-size: 14px; color: var(--ink-3); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); font-weight: 600; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; gap: 6px; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px dashed var(--line); background: transparent; font: 400 13px/1 var(--mono); letter-spacing: 0; color: var(--ink-3); transition: all 0.15s ease; }
.fchip .c { font-weight: 600; color: var(--ink-2); }
.fchip .o { color: var(--sage-ink); }
.fchip[aria-pressed="true"] { border: 1px solid var(--sage-line); background: var(--sage-tint); color: var(--ink); }
.fchip:hover { border-color: var(--sage-strong); }

/* #open */
.open-panel { margin-top: 18px; display: grid; gap: 16px; padding: 20px 22px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); }
.open-read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 16px; color: var(--ink-3); }
.open-read b { color: var(--ink); font-size: 18px; font-weight: 600; }
.open-range input { width: 100%; accent-color: var(--sage-strong); height: 28px; }
.open-ctl { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.open-jumps { display: flex; flex-wrap: wrap; gap: 8px; }
.open-jumps kbd { margin-left: 4px; font-size: 11px; }
.open-go { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); }
.open-go input { width: 150px; height: 34px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--bg-3); font: 400 14px/1 var(--mono); letter-spacing: 0; outline: none; }
.open-go input:focus { box-shadow: 0 0 0 2px var(--sage-strong); }

/* #sql */
.sql-demo { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.qtabs { display: grid; gap: 8px; }
.qtab { text-align: left; border: 0; border-radius: 14px; padding: 14px 16px; background: transparent; display: grid; gap: 4px; transition: background 0.15s ease; }
.qtab:hover { background: var(--bg-2); }
.qtab[aria-selected="true"] { background: var(--sage-tint); box-shadow: inset 0 0 0 0.5px var(--sage-line); }
.qt { font: 600 15.5px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.qw { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.qf { font: 400 11.5px/1.4 var(--mono); color: var(--ink-4); letter-spacing: 0; }
@media (max-width: 960px) { .sql-demo { grid-template-columns: minmax(0, 1fr); } .qtabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .qtabs { grid-template-columns: minmax(0, 1fr); } }

/* #clean */
.clean-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .clean-grid { grid-template-columns: minmax(0, 1fr); } }
.presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--app-ink-4); }
.preset { border: 0; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--app-chip-fill); box-shadow: inset 0 0 0 0.5px var(--app-chip-border); font: 400 11.5px/24px var(--mono) !important; letter-spacing: 0; color: var(--app-accent-text) !important; cursor: pointer; }
.frow { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 12.5px; color: var(--app-ink-3); }
.frow select, .frow input { height: 28px; border-radius: 6px; border: 0; padding: 0 9px; background: var(--app-grid); box-shadow: 0 0 0 0.5px var(--app-card-line), inset 0 0.5px 1px rgba(0, 0, 0, 0.06); color: var(--app-ink); font: 400 12.5px/1 var(--mono); letter-spacing: 0; outline: none; min-width: 0; }
.frow input:focus, .frow select:focus { box-shadow: 0 0 0 2px var(--app-accent-strong); }
.fin { display: flex; gap: 6px; }
.fin input { flex: 1; }
.tog { border: 0; width: 34px; height: 28px; border-radius: 6px; background: var(--app-grid); box-shadow: 0 0 0 0.5px var(--app-card-line); font: 600 12px/1 var(--mono) !important; color: var(--app-ink-3) !important; cursor: pointer; }
.tog[aria-pressed="true"] { background: var(--app-accent-fill); color: #1f2a17 !important; box-shadow: inset 0 0 0 0.5px #86a56c; }
.pv-head { display: flex; justify-content: space-between; gap: 10px; font: 600 11px/1 var(--sans); color: var(--app-ink-4); margin-top: 4px; }
.pv-sum { font: 400 11px/1 var(--mono); }
.pv-list { display: grid; gap: 1px; background: var(--app-card-line); border-radius: 8px; overflow: hidden; min-height: 40px; }
.pv { display: grid; grid-template-columns: 128px 76px minmax(0, 1fr) 16px minmax(0, 1fr); gap: 8px; align-items: center; background: var(--app-grid); padding: 6px 10px; font: 400 11.5px/1.35 var(--mono); letter-spacing: 0; }
.pv > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-id { color: var(--app-ink-4); }
.pv-col { color: var(--app-ink-3); }
.pv-old { color: var(--app-danger); }
.pv-new { color: var(--app-accent-text); font-weight: 600; }
.pv-arrow { color: var(--app-ink-ghost); text-align: center; }
.pv-none { background: var(--app-grid); padding: 12px; font-size: 12px; color: var(--app-ink-4); }
.pv-err { font: 400 11.5px/1.4 var(--mono); color: var(--app-danger); }
.pv-err:empty { display: none; }
@media (max-width: 640px) { .pv { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); } .pv-id, .pv-col { display: none; } }
.nsub { font-size: 12px; color: var(--app-ink-3); line-height: 1.45; }
.nlist { display: grid; gap: 1px; background: var(--app-card-line); border-radius: 8px; overflow: hidden; }
.nrow { display: grid; grid-template-columns: 96px 16px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 10px; background: var(--app-grid); font: 400 12px/1.3 var(--mono); letter-spacing: 0; }
.nfrom { color: var(--app-ink-2); }
.nto { color: var(--app-accent-text); font-weight: 600; }
.nleft { font-size: 11px; color: var(--app-warn); }
.nrow.amb { background: color-mix(in srgb, var(--app-warn) 7%, var(--app-grid)); }

/* #dedupe */
.dd-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dd-label { font: 600 11px/1 var(--sans); color: var(--app-ink-4); }
.kchips { display: flex; flex-wrap: wrap; gap: 6px; }
.kchip { border: 0; height: 24px; padding: 0 9px; border-radius: 6px; font: 400 11.5px/24px var(--mono) !important; letter-spacing: 0; cursor: pointer; background: var(--app-grid); box-shadow: inset 0 0 0 0.5px var(--app-card-line); color: var(--app-ink-4) !important; text-decoration: line-through; }
.kchip[aria-pressed="true"] { background: var(--app-chip-fill); box-shadow: inset 0 0 0 0.5px var(--app-chip-border); color: var(--app-ink) !important; text-decoration: none; }
.dd-sum { margin-left: auto; font: 400 11.5px/1 var(--mono); color: var(--app-ink-3); }
.dd-warn { display: flex; gap: 8px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--app-warn) 10%, var(--app-grid)); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--app-warn) 40%, transparent); color: var(--app-ink); font-size: 12.5px; line-height: 1.45; }
.dd-warn::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--app-warn); color: #fff; font: 700 12px/18px var(--sans); text-align: center; }
.dd-groups { display: grid; gap: 10px; }
.dd-group { border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 0.5px var(--app-card-line); }
.dd-gh { display: flex; justify-content: space-between; padding: 7px 10px; background: var(--app-bar); font: 600 11px/1 var(--sans); color: var(--app-ink-3); }
.dd-gh span { font: 400 11px/1 var(--mono); }
.dd-row { display: grid; grid-template-columns: 18px 136px 88px 150px 84px 128px minmax(0, 1fr); gap: 8px; padding: 6px 10px; font: 400 11.5px/1.3 var(--mono); letter-spacing: 0; background: var(--app-grid); border-top: 1px solid var(--app-cell-line); }
.dd-row > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-row.rm { background: var(--app-danger-soft); color: var(--app-danger); }
.dd-row.rm .dd-c { text-decoration: line-through; }
.dd-mark { font-weight: 700; }
.dd-row.kept .dd-mark { color: var(--app-accent-text); }
.dd-c.num { text-align: right; }
.sheet-wide .table-scroll, .dd-groups { overflow-x: auto; }
@media (max-width: 760px) { .dd-row { grid-template-columns: 18px 136px 88px 150px 84px 128px 96px; width: max-content; } }

/* #compare */
.cmp-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--app-card-line); border-radius: 8px; overflow: hidden; }
.cmp-fig { background: var(--app-grid); padding: 10px 12px; display: grid; gap: 4px; }
.cmp-fig b { font: 600 20px/1 var(--mono); letter-spacing: -0.02em; }
.cmp-fig span { font-size: 11px; color: var(--app-ink-4); }
.cmp-fig.add b { color: var(--app-accent-text); }
.cmp-fig.rem b { color: var(--app-danger); }
.cmp-fig.chg b { color: var(--app-warn); }
.cmp-list { display: grid; gap: 1px; background: var(--app-card-line); border-radius: 8px; overflow: hidden; }
.cmp-line { display: grid; grid-template-columns: 16px 132px 86px minmax(0, 1fr) 16px minmax(0, 1fr); gap: 8px; padding: 6px 10px; align-items: center; font: 400 11.5px/1.35 var(--mono); letter-spacing: 0; background: var(--app-grid); }
.cmp-line > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-line.added { background: var(--app-col-tint); }
.cmp-line.removed { background: var(--app-danger-soft); }
.cmp-sign { font-weight: 700; }
.cmp-line.added .cmp-sign, .cmp-line.added .cmp-after { color: var(--app-accent-text); }
.cmp-line.removed .cmp-sign, .cmp-line.removed .cmp-before { color: var(--app-danger); }
.cmp-line.changed .cmp-sign { color: var(--app-warn); }
.cmp-line.changed .cmp-before { color: var(--app-danger); text-decoration: line-through; }
.cmp-line.changed .cmp-after { color: var(--app-accent-text); font-weight: 600; }
.cmp-id { color: var(--app-ink-3); }
.cmp-field { color: var(--app-ink-4); }
@media (max-width: 640px) { .cmp-line { grid-template-columns: 16px minmax(0, 1fr) 16px minmax(0, 1fr); } .cmp-id, .cmp-field { display: none; } .cmp-figs { grid-template-columns: repeat(2, 1fr); } }

/* #history (inspector) */
.h-top { display: flex; gap: 6px; }
.hbtn { border: 0; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 6px; background: var(--app-grid); box-shadow: 0 0 0 0.5px var(--app-card-line), 0 0.5px 1px rgba(0, 0, 0, 0.08); font: 500 11.5px/1 var(--sans) !important; color: var(--app-ink-2) !important; cursor: pointer; white-space: nowrap; overflow: hidden; }
.hbtn kbd { background: transparent; box-shadow: none; font-size: 10.5px; color: var(--app-ink-4); padding: 0; min-width: 0; }
.hbtn:disabled { opacity: 0.4; cursor: default; }
.hbtn.small { flex: none; height: 22px; font-size: 11px !important; }
.h-steps { display: grid; gap: 2px; }
.h-step { border: 0; background: transparent; text-align: left; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; padding: 7px 8px; border-radius: 7px; cursor: pointer; align-items: center; }
.h-step:hover { background: var(--app-hover); }
.h-step i { width: 8px; height: 8px; border-radius: 50%; background: var(--app-hist-neg); grid-row: 1 / span 2; align-self: start; margin-top: 4px; }
.h-step.cur { background: var(--app-sel-header); }
.h-step.cur i { background: var(--app-accent-strong); }
.h-step.future { opacity: 0.45; }
.h-step.future i { background: var(--app-ink-ghost); }
.h-l { font: 600 12px/1.25 var(--sans); color: var(--app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-t { font: 400 10.5px/1 var(--mono); color: var(--app-ink-4); }
.h-d { grid-column: 2 / span 2; font: 400 10.5px/1.3 var(--mono); letter-spacing: 0; color: var(--app-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-pipe-head { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.h-pipe { margin: 0; padding: 10px; border-radius: 8px; background: var(--app-code); font: 400 10.5px/1.55 var(--mono); letter-spacing: 0; color: var(--app-ink-2); white-space: pre; overflow: hidden; user-select: text; }

/* #save */
.save-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.save-top .w-seg { --app-seg-track: var(--bg-3); --app-seg-on: var(--surface); --app-ink: var(--ink); --app-ink-2: var(--ink-3); padding: 3px; border-radius: 10px; }
.save-top .w-seg span { height: 30px; padding: 0 14px; font-size: 14px; border-radius: 7px; }
.save-legend { display: flex; flex-wrap: wrap; gap: 14px; font: 400 12px/1 var(--mono); color: var(--ink-3); letter-spacing: 0; }
.save-legend span { display: inline-flex; align-items: center; gap: 6px; }
.save-legend i { width: 10px; height: 10px; border-radius: 3px; }
.l-bom { background: #8f5f92; } .l-d { background: #b3623f; } .l-q { background: #4a6fa0; } .l-eol { background: #9a9aa0; }
.save-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .save-grid { grid-template-columns: minmax(0, 1fr); } }
.save-col { border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.save-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 0.5px solid var(--line); font-size: 14px; }
.hash { font: 400 11.5px/1 var(--mono); color: var(--ink-4); letter-spacing: 0; }
.bytes { padding: 8px 0; overflow-x: auto; }
.bytes-line { display: flex; align-items: baseline; gap: 6px; padding: 3px 14px; font: 400 12px/1.6 var(--mono); letter-spacing: 0; white-space: nowrap; width: max-content; min-width: 100%; }
.bytes-line.edit { background: var(--sage-tint); }
.b-n { width: 14px; color: var(--ink-4); text-align: right; flex: none; }
.b-bom { font-size: 9.5px; padding: 1px 4px; border-radius: 3px; background: #8f5f92; color: #fff; }
.b-d { color: #b3623f; font-weight: 700; }
.b-q { color: #4a6fa0; font-weight: 700; }
.b-eol { font-size: 10px; color: var(--ink-4); padding: 0 4px; border-radius: 3px; background: var(--bg-3); }
.b-state { margin-left: 10px; font-size: 10.5px; color: var(--ink-4); }
.bytes-line.edit .b-state { color: var(--sage-ink); font-weight: 600; }
.hash-verdict { margin-top: 14px; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.hash-verdict.same { color: var(--sage-ink); font-weight: 600; }
.hash-verdict.diff { color: var(--ink-2); }

/* #import */
.import-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .import-grid { grid-template-columns: minmax(0, 1fr); } }
.ifile { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.ifile svg { width: 28px; height: 28px; color: var(--app-ink-3); }
.ifile div { display: grid; gap: 3px; }
.ifile .m { font-size: 11px; color: var(--app-ink-4); }
.dcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dcard { border: 0; position: relative; text-align: left; padding: 10px 12px; border-radius: 8px; background: var(--app-grid); box-shadow: 0 0 0 0.5px var(--app-card-line); display: grid; gap: 4px; cursor: pointer; }
.dcard b { font-size: 12.5px; }
.dcard .m { font-size: 11px; color: var(--app-ink-4); }
.dcard .dconf { font: 600 16px/1 var(--mono); letter-spacing: -0.02em; }
.dcard em { position: absolute; top: 8px; right: 8px; font: 500 10px/1 var(--sans); font-style: normal; color: var(--app-accent-text); }
.dcard[aria-pressed="true"] { background: var(--app-chip-fill); box-shadow: 0 0 0 1.5px var(--app-accent-fill); }
@media (max-width: 560px) { .dcards { grid-template-columns: repeat(2, 1fr); } }
.igrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
@media (max-width: 760px) { .igrid { grid-template-columns: minmax(0, 1fr); } }
.igrid > div { display: grid; gap: 6px; align-content: start; min-width: 0; }
.raw { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--app-code); font: 400 11px/1.65 var(--mono); letter-spacing: 0; overflow-x: auto; color: var(--app-ink-2); }
.raw div { white-space: pre; }
.raw .rn { display: inline-block; width: 16px; color: var(--app-ink-ghost); }
.raw .b-d { color: var(--app-op); }
.raw .b-q { color: var(--app-kw); }
.parsed { overflow-x: auto; border-radius: 8px; box-shadow: 0 0 0 0.5px var(--app-card-line); background: var(--app-grid); }
.parsed table { border-collapse: collapse; font: 400 11px/1.3 var(--mono); letter-spacing: 0; width: 100%; }
.parsed th { background: var(--app-bar); text-align: left; font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--app-header-line); white-space: nowrap; }
.parsed td { padding: 5px 8px; border-bottom: 1px solid var(--app-cell-line); white-space: nowrap; }
.parsed td.num { text-align: right; }
.parsed.bad td, .parsed.bad th { color: var(--app-danger); }
.imeta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--app-card-line); border-radius: 8px; overflow: hidden; }
.imeta div { background: var(--app-grid); padding: 8px 10px; display: grid; gap: 3px; }
.imeta span { font-size: 10px; color: var(--app-ink-4); }
.imeta b { font-size: 11.5px; font-weight: 600; }
.imeta.small2 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .imeta { grid-template-columns: repeat(2, 1fr); } }
.sheets { display: grid; gap: 4px; }
.sheet-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 7px; font-size: 12.5px; }
.sheet-row svg { width: 16px; height: 16px; color: var(--app-ink-3); }
.sheet-row .m { font-size: 10.5px; color: var(--app-ink-4); }
.sheet-row.on { background: var(--app-sel-row); }
.sheet-row.hid { opacity: 0.55; }

/* #cards */
.cards-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .cards-grid { grid-template-columns: minmax(0, 1fr); } }
.cards-t { justify-content: space-between; }
.swl { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--sans); color: var(--app-ink-2); cursor: pointer; }
.switch { border: 0; position: relative; width: 34px; height: 20px; border-radius: 999px; background: #dcdce1; padding: 0; cursor: pointer; transition: background 0.2s ease; }
.switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; }
.switch[aria-checked="true"] { background: var(--app-accent-fill); }
.switch[aria-checked="true"] i { transform: translateX(14px); }
.ctable { border-collapse: collapse; width: 100%; font: 400 12px/1.3 var(--mono); letter-spacing: 0; }
.ctable th { text-align: left; background: var(--app-bar); padding: 7px 9px; border-bottom: 1px solid var(--app-header-line); font-weight: 700; white-space: nowrap; }
.ctable td { padding: 6px 9px; border-bottom: 1px solid var(--app-cell-line); white-space: nowrap; }
.ctable td.num { text-align: right; }
.ctable td.dim { color: var(--app-ink-3); }
.ctable td.pan { color: var(--app-ink); }
.win.sheet .w-sheet-b { position: relative; }
.cdialog { position: absolute; inset: 12px 16px auto; z-index: 3; display: flex; gap: 12px; padding: 16px; border-radius: 12px; background: var(--app-surface); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 18px 50px rgba(0, 0, 0, 0.25); }
.cdialog[hidden] { display: none; }
.cd-icon svg { width: 34px; height: 34px; color: var(--app-warn); }
.cd-body { display: grid; gap: 8px; font-size: 12.5px; line-height: 1.45; color: var(--app-ink-2); }
.cd-body b { font-size: 13.5px; color: var(--app-ink); }
.cd-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.luhn-wrap { display: grid; gap: 12px; }
.lh { font-size: 12px; }
.luhn { display: grid; gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 0.5px var(--line); }
.lrow { display: grid; grid-template-columns: minmax(0, 1.5fr) auto auto auto; gap: 4px 10px; align-items: center; padding: 9px 12px; background: var(--surface); font: 400 12px/1.3 var(--mono); letter-spacing: 0; }
.lrow code { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow span { color: var(--ink-4); font-size: 11px; }
.lrow b { grid-column: 1 / -1; font-size: 11px; font-weight: 600; }
.lrow.yes b { color: var(--sage-ink); }
.lrow.no b { color: var(--ink-3); }

/* #mac */
.mac-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.mac-frame { border-radius: 18px; padding: clamp(14px, 3vw, 36px); background: linear-gradient(160deg, #dfe6d6, #c9d5bd 55%, #b7c7a8); transition: background 0.3s ease; }
.mac-frame.on-dark { background: linear-gradient(160deg, #2b3327, #1b2118 60%, #11150f); }
.mac-grid .keys { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.menu { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-2); }
.menu-item { border: 0; background: transparent; display: inline-flex; align-items: center; gap: 18px; height: 30px; padding: 0 10px; border-radius: 6px; font-size: 14px; color: var(--ink); }
.menu-item:hover:not(:disabled) { background: var(--sage-strong); color: #fff; }
.menu-item:hover:not(:disabled) kbd { color: #fff; }
.menu-item kbd { background: transparent; box-shadow: none; color: var(--ink-4); padding: 0; }
.menu-item:disabled { color: var(--ink-4); cursor: default; }
.b-chg { background: var(--sage); color: var(--on-sage); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.win button.w-run { font: 600 12px/24px var(--sans); color: #1f2a17; letter-spacing: -0.005em; }
.win button.w-btn2 { font: 500 12px/24px var(--sans); color: var(--app-ink-2); letter-spacing: -0.005em; }
.ctable td:last-child { white-space: normal; min-width: 150px; }
.save-top .w-seg { max-width: 100%; flex-wrap: wrap; height: auto; }
.save-top .w-seg span { height: auto; min-height: 30px; padding-block: 6px; white-space: normal; text-align: center; line-height: 1.2; }