/* ============================================================
   SERVICES PAGE
   Seven offerings, each shown through the artefact a client
   actually receives: a scanned invoice with its extraction
   overlay, a help-desk ticket the agent closed, a Slack
   escalation, a cited answer, a workflow run, a pipeline board,
   SQL an analyst approved, a photo with detections, an internal
   tool, a prototype. All of it is HTML, CSS and inline SVG in
   the site's own palette. No stock imagery.
   The mocks are specimens: client fields are redacted bars.
   ============================================================ */

.svc-page { padding-top: clamp(7rem, 15vh, 10.5rem); }

/* ---------- masthead ---------- */
.svc-mast { margin-bottom: clamp(3rem, 8vh, 5rem); }
.svc-mast .lbl a { border-bottom: 1px solid var(--rule-2); }
.svc-mast .lbl a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.svc-title {
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  line-height: .9; letter-spacing: -.045em; font-weight: 500;
  margin: 1.25rem 0 1.5rem;
}
.svc-lead { font-size: var(--fs-lead); color: var(--text-mid); max-width: 48ch; line-height: 1.45; }

.svc-index {
  list-style: none; margin-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--rule-2);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto); grid-auto-flow: column;
  column-gap: clamp(1.5rem, 4vw, 4rem);
}
.svc-index li { border-bottom: 1px solid var(--rule); }
.svc-index a {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: 1rem; align-items: baseline; padding: .95rem 0;
}
.svc-index .n { font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; color: var(--text-dim); }
.svc-index .t { font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 500; letter-spacing: -.02em; color: var(--text-mid); transition: color .2s var(--ease); }
.svc-index .k { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.svc-index a:hover .t { color: var(--text); }
.svc-index a:hover .n { color: var(--accent); }
@media (max-width: 700px) { .svc-index { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } }

/* ---------- one service ---------- */
.svc-sec { padding-block: clamp(3rem, 7vh, 5rem); border-top: 1px solid var(--rule-2); }
.svc-head {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.svc-head > .n { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--accent); padding-top: .7rem; }
.svc-h2 { font-size: clamp(2rem, 5vw, 4.2rem); line-height: .95; letter-spacing: -.04em; font-weight: 500; margin-bottom: 1.25rem; }
.svc-p { font-size: var(--fs-lead); color: var(--text-mid); max-width: 52ch; line-height: 1.45; margin-bottom: 1.5rem; }
.svc-meta { display: flex; flex-wrap: wrap; gap: .6rem 2.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.svc-meta .lbl b { color: var(--text); font-weight: 500; letter-spacing: 0; text-transform: none; font-family: var(--mono); font-size: var(--fs-small); margin-left: .35rem; }

.samples { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.samples > .lbl { position: sticky; top: 6rem; padding-top: .3rem; }
.sample { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.sample:last-child { margin-bottom: 0; }
.sample figcaption { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; margin-top: 1rem; }
.sample figcaption p { font-size: var(--fs-small); color: var(--text-dim); max-width: 62ch; line-height: 1.55; }
.svc-cta {
  display: inline-block; margin-top: clamp(1.5rem, 3vw, 2rem);
  font-family: var(--mono); font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); border-bottom: 1px solid var(--rule-2); padding-bottom: .3rem;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.svc-cta::after { content: " \2192"; }
.svc-cta:hover { color: var(--accent); border-bottom-color: var(--accent); }
.svc-tail { grid-column: 2; }

@media (max-width: 860px) {
  .svc-head, .samples { grid-template-columns: 1fr; gap: 1rem; }
  .samples > .lbl { position: static; }
  .sample figcaption { grid-template-columns: 1fr; gap: .4rem; }
  .svc-tail { grid-column: 1; }
}

/* ---------- mock frame ---------- */
.mock { border: 1px solid var(--rule-2); background: var(--ink-2); overflow: hidden; font-size: var(--fs-small); }
.mock-bar { display: flex; align-items: center; gap: .8rem; padding: .6rem .95rem; border-bottom: 1px solid var(--rule); background: rgba(0, 0, 0, .28); }
.mock-dots { display: flex; gap: .35rem; }
.mock-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); display: block; }
.mock-bar .t { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.mock-bar .r { margin-left: auto; font-family: var(--mono); font-size: .625rem; letter-spacing: .08em; color: var(--text-dim); white-space: nowrap; }
.mock-body { padding: clamp(.9rem, 1.8vw, 1.4rem); }
.mock-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
@media (max-width: 760px) { .mock-split { grid-template-columns: 1fr; } }

.chip { display: inline-block; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .5rem; border: 1px solid var(--rule-2); color: var(--text-dim); white-space: nowrap; }
.chip.on { color: var(--accent); border-color: var(--accent); }
.chip.ok { color: var(--text-mid); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- paper document ---------- */
.paper {
  background: #EEEAF3; color: #251F33;
  padding: clamp(1rem, 2vw, 1.5rem);
  font-size: .78rem; line-height: 1.45;
  position: relative;
}
.paper .ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.paper .brand { width: 6.5rem; height: .95rem; background: #C7BFD5; margin-bottom: .45rem; }
.paper .addr { font-size: .68rem; color: #5B5470; line-height: 1.4; }
.paper h4 { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.paper .pm { font-family: var(--mono); font-size: .68rem; color: #5B5470; text-align: right; line-height: 1.6; }
.paper .pm b { color: #251F33; font-weight: 500; }
.paper table { width: 100%; border-collapse: collapse; margin: .8rem 0; }
.paper th, .paper td { text-align: left; padding: .38rem .25rem; border-bottom: 1px solid #D6D0E0; font-size: .72rem; }
.paper th { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #6A6380; font-weight: 500; }
.paper td.num, .paper th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.paper .tot { margin-left: auto; width: min(100%, 15rem); display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem; font-size: .74rem; }
.paper .tot .num { font-family: var(--mono); text-align: right; }
.paper .tot b { font-weight: 600; }
.paper .pf { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid #D6D0E0; font-size: .66rem; color: #5B5470; font-family: var(--mono); }
.paper .lines { margin: .7rem 0; }
.paper .line { height: .42rem; background: #D9D3E3; margin: .4rem 0; border-radius: 1px; }
.paper .clause { padding: .55rem .7rem; margin: .8rem 0; font-size: .74rem; line-height: 1.5; }
.paper .clause b { font-weight: 600; }
.paper .h5 { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #6A6380; margin: .9rem 0 .3rem; }
.rp { display: inline-block; background: #2A2438; height: .8em; width: 5.5em; vertical-align: middle; border-radius: 1px; }
.rp.s { width: 3em; }
.hl { position: relative; outline: 1.5px solid var(--accent); outline-offset: 3px; }
.hl:not([data-f])::after { content: none; }
.hl::after {
  content: attr(data-f); position: absolute; left: -.15rem; top: -1.15rem;
  font-family: var(--mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); white-space: nowrap;
}
.hl.rt::after { left: auto; right: -.15rem; }
.hl.lt::after { top: 50%; left: auto; right: calc(100% + .5rem); transform: translateY(-50%); }
.hl.bt::after { top: auto; bottom: -1.15rem; }
.hl.blk { display: block; outline-offset: 5px; }
.hl.blk::after { top: -1.35rem; }

/* ---------- extracted panel ---------- */
.ext { display: flex; flex-direction: column; gap: .65rem; }
.ext-h { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule); }
.ext-h .lbl { letter-spacing: .12em; }
.ext-row { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 3rem 2.2rem; gap: .6rem; align-items: center; }
.ext-row .k { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.ext-row .v { font-family: var(--mono); font-size: .76rem; color: var(--text); overflow-wrap: anywhere; }
.ext-row .v .redact { vertical-align: middle; }
.ext-row .bar { height: 3px; background: var(--rule); position: relative; }
.ext-row .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--text-mid); }
.ext-row .c { font-family: var(--mono); font-size: .68rem; color: var(--text-dim); text-align: right; }
.ext-row.low .bar i, .ext-row.low .c { background: var(--accent); color: var(--accent); }
.ext-foot { margin-top: .35rem; padding-top: .7rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--mono); font-size: .66rem; color: var(--text-dim); line-height: 1.5; }
@media (max-width: 480px) { .ext-row { grid-template-columns: 5rem minmax(0, 1fr) 2.2rem; } .ext-row .bar { display: none; } }

/* ---------- help desk ---------- */
.tk { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
@media (max-width: 760px) { .tk { grid-template-columns: 1fr; } }
.msg { display: flex; gap: .8rem; }
.msg .av { width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink-3); border: 1px solid var(--rule-2); font-family: var(--mono); font-size: .6rem; display: grid; place-items: center; color: var(--text-dim); flex: none; }
.msg.bot .av { border-color: var(--accent); color: var(--accent); }
.msg .who { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .3rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.msg .who b { color: var(--text-mid); font-weight: 500; }
.msg p { color: var(--text); line-height: 1.5; }
.decide { margin: .9rem 0; padding: .8rem .9rem; border: 1px solid var(--rule); background: rgba(0, 0, 0, .22); display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.reply { border-left: 2px solid var(--rule-2); padding-left: .9rem; margin: .9rem 0 .2rem; color: var(--text-mid); line-height: 1.55; }
.reply .sig { display: block; margin-top: .4rem; font-family: var(--mono); font-size: .65rem; color: var(--text-dim); }
.side h5 { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .4rem; font-weight: 500; }
.side ul { list-style: none; }
.side li { padding: .5rem 0; border-top: 1px solid var(--rule); color: var(--text-mid); display: flex; justify-content: space-between; gap: .8rem; line-height: 1.4; }
.side li:last-child { border-bottom: 1px solid var(--rule); }
.side li span { font-family: var(--mono); font-size: .66rem; color: var(--text-dim); white-space: nowrap; }
.side + .side { margin-top: 1.1rem; }

/* ---------- slack ---------- */
.sl-ch { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--text-dim); padding-bottom: .6rem; border-bottom: 1px solid var(--rule); margin-bottom: .6rem; display: flex; justify-content: space-between; }
.sl-m { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .75rem; padding: .55rem 0; }
.sl-m .av { width: 2.2rem; height: 2.2rem; background: var(--ink-3); border: 1px solid var(--rule-2); display: grid; place-items: center; font-family: var(--mono); font-size: .6rem; color: var(--text-dim); }
.sl-m.bot .av { border-color: var(--accent); color: var(--accent); }
.sl-m .h { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.sl-m .h b { font-weight: 500; color: var(--text); }
.sl-m .h span { font-family: var(--mono); font-size: .62rem; color: var(--text-dim); }
.sl-m .h .appb { font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--rule-2); padding: .08rem .3rem; }
.sl-m p { color: var(--text-mid); line-height: 1.5; margin-top: .3rem; }
.sl-m p strong { color: var(--text); font-weight: 500; }
.kv { margin: .55rem 0; border-left: 3px solid var(--rule-2); padding-left: .75rem; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem .9rem; }
.kv dt { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); padding-top: .25em; }
.kv dd { color: var(--text); line-height: 1.45; }
.kv dd.hot { color: var(--accent); }
.btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.btns span { border: 1px solid var(--rule-2); padding: .32rem .65rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--text-mid); }
.btns span.pri { background: var(--text); color: var(--ink); border-color: var(--text); }
.sl-thread { margin-left: 2.95rem; padding-left: .8rem; border-left: 2px solid var(--rule); }

/* ---------- chat with citations ---------- */
.chat { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
@media (max-width: 760px) { .chat { grid-template-columns: 1fr; } }
.bub { max-width: 92%; padding: .8rem 1rem; border: 1px solid var(--rule-2); line-height: 1.55; color: var(--text); }
.bub.u { margin-left: auto; background: var(--ink-3); }
.bub.a { background: rgba(0, 0, 0, .22); margin-top: .8rem; }
.bub sup { color: var(--accent); font-family: var(--mono); font-size: .6rem; margin-left: .12rem; }
.bub .chip { margin-bottom: .55rem; }
.bub .then { display: block; margin-top: .55rem; color: var(--text-dim); }
.chat-foot { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; color: var(--text-dim); margin-top: .9rem; }
.srcs { list-style: none; }
.srcs li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--rule); color: var(--text-mid); line-height: 1.4; }
.srcs li:last-child { border-bottom: 1px solid var(--rule); }
.srcs li i { font-style: normal; font-family: var(--mono); font-size: .62rem; color: var(--accent); padding-top: .2em; }
.srcs li span { display: block; font-family: var(--mono); font-size: .62rem; color: var(--text-dim); margin-top: .2rem; }
.srcs li.none { color: var(--text-dim); }
.srcs li.none i { color: var(--text-dim); }

/* ---------- workflow timeline ---------- */
.wf { list-style: none; }
.wf li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--rule); color: var(--text-mid); }
.wf li:first-child { border-top: 0; padding-top: 0; }
.wf .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mid); justify-self: center; }
.wf .dot.on { background: var(--accent); }
.wf .ms { font-family: var(--mono); font-size: .74rem; color: var(--text); }
.wf .sub { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .04em; color: var(--text-dim); margin-top: .15rem; }
.wf-total { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--rule-2); font-family: var(--mono); font-size: .72rem; color: var(--text); }
.wf-total span { color: var(--text-dim); }

/* ---------- tables (pipelines, results) ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); text-align: left; padding: .35rem .6rem .5rem 0; border-bottom: 1px solid var(--rule-2); font-weight: 500; }
.tbl td { padding: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--rule); color: var(--text-mid); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.mono, .tbl th.num { font-family: var(--mono); font-size: .74rem; color: var(--text); }
.tbl td.num, .tbl th.num { text-align: right; padding-right: 0; }
.tbl td.num:not(:last-child), .tbl th.num:not(:last-child) { padding-right: 1.4rem; }
.tbl td.num { font-family: var(--mono); font-size: .74rem; color: var(--text); font-variant-numeric: tabular-nums; }
.st { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.st.re { color: var(--accent); }
.spark { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; vertical-align: middle; }
.spark i { width: 4px; height: var(--h); background: var(--text-dim); display: block; opacity: .75; }
.spark i.hot { background: var(--accent); opacity: 1; }
.tbl-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--rule-2); font-family: var(--mono); font-size: .66rem; color: var(--text-dim); }
.tbl-foot b { color: var(--text); font-weight: 500; }

/* ---------- SQL ---------- */
.q { border: 1px solid var(--rule-2); padding: .7rem .9rem; color: var(--text); display: flex; gap: .8rem; align-items: baseline; line-height: 1.45; }
.q .lbl { flex: none; }
.code { font-family: var(--mono); font-size: .72rem; line-height: 1.6; color: var(--text-mid); padding: .8rem .95rem; border: 1px solid var(--rule); background: rgba(0, 0, 0, .3); white-space: pre; overflow-x: auto; margin: .8rem 0; }
.code b { color: var(--text); font-weight: 500; }
.code .s { color: var(--accent); }
.res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 700px) { .res { grid-template-columns: 1fr; } }
.bars svg { width: 100%; height: auto; display: block; }
.bars .lbl { margin-bottom: .5rem; }
.approve { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: center; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--rule-2); font-family: var(--mono); font-size: .66rem; color: var(--text-dim); }

/* ---------- KPI digest ---------- */
.kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .45rem 1.1rem; align-items: baseline; margin-top: .4rem; }
.kpi .k { color: var(--text-mid); }
.kpi .v { font-family: var(--mono); font-size: .84rem; color: var(--text); text-align: right; }
.kpi .d { font-family: var(--mono); font-size: .64rem; color: var(--text-dim); text-align: right; min-width: 4.5rem; }
.kpi .d.hot { color: var(--accent); }

/* ---------- vision ---------- */
.vis { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
@media (max-width: 760px) { .vis { grid-template-columns: 1fr; } }
.vis svg { width: 100%; height: auto; display: block; background: #171128; border: 1px solid var(--rule); }
.vis .det { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; fill: var(--accent); text-transform: uppercase; }
.vis .box { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.vis .box.dash { stroke-dasharray: 4 3; }
.vis .tag { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; fill: #7E7691; text-transform: uppercase; }
.checks { list-style: none; }
.checks li { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--rule); color: var(--text-mid); line-height: 1.4; }
.checks li:last-child { border-bottom: 1px solid var(--rule); }
.checks li b { font-family: var(--mono); font-size: .74rem; color: var(--text); font-weight: 500; white-space: nowrap; }
.checks li b.hot { color: var(--accent); }
.tl { position: relative; height: 34px; margin: 1rem 0 .4rem; background: linear-gradient(90deg, var(--ink-3), var(--ink-3)) 0 14px / 100% 6px no-repeat; }
.tl i { position: absolute; top: 8px; width: 2px; height: 18px; background: var(--accent); left: var(--x); }
.tl i::after { content: attr(data-t); position: absolute; top: -1.05rem; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; color: var(--accent); white-space: nowrap; }
.tl-ax { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .58rem; color: var(--text-dim); letter-spacing: .06em; }

/* ---------- internal tool ---------- */
.app { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 13rem; min-height: 18rem; }
.app-nav { border-right: 1px solid var(--rule); padding: .9rem .8rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); display: flex; flex-direction: column; gap: .75rem; }
.app-nav i { font-style: normal; color: var(--text); }
.app-nav .sp { margin-top: auto; }
.app-main { padding: .9rem 1rem; min-width: 0; }
.app-main .ah { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .7rem; }
.app-main .ah b { font-weight: 500; color: var(--text); font-size: var(--fs-body); letter-spacing: -.01em; }
.app-side { border-left: 1px solid var(--rule); padding: .9rem .95rem; }
.app-side h5 { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .55rem; font-weight: 500; }
.app-side .kv { border-left: 0; padding-left: 0; margin: 0 0 .8rem; }
.log { list-style: none; margin-top: .8rem; }
.log li { font-family: var(--mono); font-size: .6rem; letter-spacing: .02em; color: var(--text-dim); padding: .38rem 0; border-top: 1px solid var(--rule); line-height: 1.45; }
.log li b { color: var(--text-mid); font-weight: 500; }
tr.sel td { background: rgba(245, 92, 168, .06); }
@media (max-width: 860px) { .app { grid-template-columns: 1fr; } .app-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--rule); } .app-nav .sp { margin: 0; } .app-side { border-left: 0; border-top: 1px solid var(--rule); } }

/* ---------- design screens ---------- */
.scr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; padding-bottom: 1.3rem; }
.scr > div { aspect-ratio: 9 / 16; border: 1px solid var(--rule-2); background: var(--ink-3); position: relative; padding: 11%; display: flex; flex-direction: column; gap: 7%; }
.scr i { display: block; background: var(--rule-2); height: 5%; border-radius: 1px; }
.scr i.w { width: 62%; }
.scr i.h { height: 9%; width: 80%; background: var(--text-dim); }
.scr i.c { height: 22%; border: 1px solid var(--rule-2); background: transparent; }
.scr i.b { height: 11%; background: var(--accent); margin-top: auto; }
.scr span { position: absolute; left: 0; bottom: -1.15rem; font-family: var(--mono); font-size: .55rem; letter-spacing: .08em; color: var(--text-dim); white-space: nowrap; }
.scr > div.now { border-color: var(--accent); }
.tokens { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.tokens .sw { display: flex; gap: .35rem; }
.tokens .sw i { width: 1.25rem; height: 1.25rem; display: block; border: 1px solid var(--rule-2); }
.tokens .ty { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--text-dim); }
.tokens .ty b { color: var(--text); font-weight: 500; }
@media (max-width: 700px) { .scr { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.8rem; } }

/* ---------- one-line strip ---------- */
.strip { display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; padding: .85rem 1.05rem; border: 1px solid var(--rule); background: rgba(0, 0, 0, .2); font-family: var(--mono); font-size: .7rem; color: var(--text-dim); letter-spacing: .02em; }
.strip b { color: var(--text); font-weight: 500; }
.strip .lbl { margin-right: .3rem; }

/* ---------- page closer ---------- */
.svc-close { border-top: 1px solid var(--rule-2); padding-block: clamp(3.5rem, 10vh, 7rem); }
.svc-close h2 { font-size: clamp(2.4rem, 7vw, 5.6rem); line-height: .9; letter-spacing: -.045em; font-weight: 500; margin-bottom: 1.5rem; }