/* ==========================================================================
   mockups.css: the concept app "screens" (templates/work/screens/*.html).

   They're real HTML, not pictures, so they stay sharp and load instantly.
   Each screen sits in a frame (browser, desktop window or phone) whose inner
   area is a CSS "container": every size inside is in em, and the base font
   size is a percentage of the container width (cqi). So one screen scales
   perfectly from a small card thumbnail to a full-width showcase.

   Screens always use a light "app" palette (like a real screenshot), tinted
   with the project's colour through --c (set by the c-<colour> class).
   ========================================================================== */

.mk-frame { --u-ink: #0f172a; --u-muted: #64748b; --u-line: #e8ecf2; --u-bg: #f6f8fb; position: relative; border-radius: 12px; background: #fff; border: 1px solid rgba(15, 23, 42, .12); overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 24px 60px -24px rgba(15, 23, 42, .35); }
.mk-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f1f4f8; border-bottom: 1px solid #e2e7ee; }
.mk-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.mk-bar i:nth-child(2) { background: #febc2e; } .mk-bar i:nth-child(3) { background: #28c840; }
.mk-url { flex: 1; max-width: 62%; margin-left: 10px; padding: 3px 10px; border-radius: 7px; background: #fff; font: 500 11px var(--font); color: #7a7590; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-screen { container-type: inline-size; }

/* desktop app window */
.mk-titlebar { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 0 0 12px; background: #1e293b; color: #fff; font: 500 12px var(--font); }
.mk-titlebar__icon { width: 16px; height: 16px; border-radius: 5px; background: var(--c); }
.mk-titlebar__ctrl { margin-left: auto; display: flex; height: 100%; }
.mk-titlebar__ctrl span { width: 40px; display: grid; place-items: center; font-size: 13px; opacity: .8; }
.mk-titlebar__ctrl span:last-child { background: #e8473c; opacity: 1; }

/* phones */
.mk-phones { display: flex; justify-content: center; align-items: flex-end; gap: 6%; max-width: 720px; margin-inline: auto; }
.mk-phone { --u-ink: #1d1933; --u-muted: #7a7590; --u-line: #ece8f4; --u-bg: #f7f5fb; position: relative; width: 100%; max-width: 330px; container-type: inline-size; aspect-ratio: 9 / 19; border-radius: 15% / 7.1%; background: #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 30px 60px -28px rgba(15, 23, 42, .5); }
.mk-phones .mk-phone { width: 44%; }
.mk-phones .mk-phone:first-child { transform: translateY(6%); }
.mk-phone__screen { position: absolute; inset: 3.4cqi; border-radius: 11.5cqi; overflow: hidden; background: #fff; } /* cqi here = the phone's own width */
.mk-phone__notch { position: absolute; top: 2.4cqi; left: 50%; width: 6cqi; height: 6cqi; margin-left: -3cqi; border-radius: 50%; background: #0f172a; z-index: 2; } /* Android-style punch-hole camera */

/* ---------------------------------------------------------------- the UI kit used inside screens */

.ui { font: 400 1.3cqi/1.45 var(--font); color: var(--u-ink); background: #fff; text-align: left; letter-spacing: 0; height: 100%; }
.mk-phone .ui { font-size: 4.3cqi; }
.ui * { box-sizing: border-box; }
.ui b, .ui strong { font-weight: 700; }
.ui-row { display: flex; align-items: center; gap: .8em; }
.ui-between { justify-content: space-between; }
.ui-col { display: flex; flex-direction: column; gap: .6em; }
.ui-grow { flex: 1; min-width: 0; }
.ui-wrap { flex-wrap: wrap; }
.ui-nav { display: flex; align-items: center; gap: 1.8em; padding: 1em 1.8em; border-bottom: 1px solid var(--u-line); }
.ui-logo { display: flex; align-items: center; gap: .45em; font-family: var(--font-display); font-weight: 650; font-size: 1.2em; letter-spacing: -.03em; white-space: nowrap; }
.ui-logo i { width: 1.25em; height: 1.25em; border-radius: .38em; background: var(--c); display: block; flex: none; }
.ui-links { display: flex; gap: 1.5em; color: var(--u-muted); font-weight: 500; }
.ui-links .on { color: var(--u-ink); font-weight: 650; }
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .62em 1.15em; border-radius: .65em; background: var(--c); color: #fff; font-weight: 650; white-space: nowrap; line-height: 1.2; }
.ui-btn--dark { background: var(--u-ink); }
.ui-btn--ghost { background: #fff; border: 1px solid var(--u-line); color: var(--u-ink); }
.ui-btn--block { width: 100%; }
.ui-btn--lg { padding: .9em 1.2em; font-size: 1.08em; border-radius: .8em; }
.ui-chip { display: inline-flex; align-items: center; gap: .3em; padding: .26em .72em; border-radius: 99px; background: var(--u-bg); font-size: .8em; font-weight: 600; color: #4d4866; white-space: nowrap; }
.ui-chip--c { background: color-mix(in srgb, var(--c) 15%, #fff); color: color-mix(in srgb, var(--c) 72%, #1d1933); }
.ui-chip--dark { background: var(--u-ink); color: #fff; }
.ui-card { background: #fff; border: 1px solid var(--u-line); border-radius: .95em; padding: 1.1em; box-shadow: 0 .4em 1.2em -.7em rgba(29, 25, 51, .25); }
.ui-soft { background: var(--u-bg); border-radius: .9em; padding: 1em; }
.ui-h1 { font-family: var(--font-display); font-size: 2.3em; font-weight: 650; letter-spacing: -.04em; line-height: 1.04; }
.ui-h2 { font-family: var(--font-display); font-size: 1.5em; font-weight: 620; letter-spacing: -.03em; line-height: 1.12; }
.ui-h3 { font-weight: 700; font-size: 1.05em; }
.ui-muted { color: var(--u-muted); }
.ui-sm { font-size: .84em; } .ui-xs { font-size: .72em; }
.ui-c { color: color-mix(in srgb, var(--c) 80%, #1d1933); }
.ui-input { display: flex; align-items: center; gap: .5em; border: 1px solid var(--u-line); border-radius: .6em; padding: .58em .85em; color: var(--u-ink); background: #fff; font-size: .92em; }
.ui-input--empty { color: var(--u-muted); }
.ui-label { font-size: .76em; font-weight: 650; color: var(--u-muted); margin-bottom: .25em; display: block; }
.ui-kpi { display: flex; flex-direction: column; gap: .2em; }
.ui-kpi small { color: var(--u-muted); font-weight: 600; font-size: .78em; }
.ui-kpi b { font-family: var(--font-display); font-size: 1.6em; letter-spacing: -.03em; line-height: 1.1; }
.ui-up { color: #0f9d6c; font-weight: 700; font-size: .78em; }
.ui-down { color: #d6342b; font-weight: 700; font-size: .78em; }
.ui-table { width: 100%; border-collapse: collapse; font-size: .86em; }
.ui-table th { text-align: left; color: var(--u-muted); font-weight: 600; font-size: .9em; padding: .55em .8em; border-bottom: 1px solid var(--u-line); white-space: nowrap; }
.ui-table td { padding: .7em .8em; border-bottom: 1px solid var(--u-line); white-space: nowrap; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table .r { text-align: right; }
.ui-status { display: inline-flex; align-items: center; gap: .35em; padding: .2em .65em; border-radius: 99px; font-size: .82em; font-weight: 700; }
.ui-status::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.ui-status--ok { background: #dcf5ec; color: #0f8a60; }
.ui-status--due { background: #fff1cc; color: #a86b00; }
.ui-status--bad { background: #ffe4df; color: #d6342b; }
.ui-status--info { background: #e2efff; color: #1d6fd1; }
.ui-avatar { width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; color: #fff; background: var(--c); font-size: .85em; }
.ui-avatar--2 { background: #ffc233; color: #1d1933; } .ui-avatar--3 { background: #15c39a; } .ui-avatar--4 { background: #2f9bff; } .ui-avatar--5 { background: #ff5ca8; }
.ui-bar { height: .45em; border-radius: 99px; background: var(--u-bg); overflow: hidden; }
.ui-bar span { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.ui-check { width: 1.25em; height: 1.25em; border-radius: .35em; display: grid; place-items: center; flex: none; border: 1.5px solid var(--u-line); font-size: .8em; font-weight: 650; color: #fff; }
.ui-check--on { background: #15c39a; border-color: #15c39a; }
.ui-check--on::after { content: "✓"; }
.ui-side { display: flex; flex-direction: column; gap: .3em; padding: 1.2em .9em; background: var(--u-bg); border-right: 1px solid var(--u-line); }
.ui-side .ui-logo { padding: 0 .4em 1em; }
.ui-side a { display: flex; align-items: center; gap: .6em; padding: .55em .7em; border-radius: .6em; color: var(--u-muted); font-weight: 600; font-size: .92em; }
.ui-side a i { width: .9em; height: .9em; border-radius: .25em; border: 1.5px solid currentColor; opacity: .7; }
.ui-side a.on { background: #fff; color: var(--u-ink); box-shadow: 0 .2em .6em -.3em rgba(29, 25, 51, .3); }
.ui-side a.on i { background: var(--c); border-color: var(--c); opacity: 1; }
.ui-app { display: grid; grid-template-columns: 15em 1fr; min-height: 34em; }
.ui-main { padding: 1.4em 1.6em; display: flex; flex-direction: column; gap: 1.1em; min-width: 0; }
.ui-grid { display: grid; gap: .9em; }
.ui-grid-2 { grid-template-columns: 1fr 1fr; }
.ui-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ui-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ui-svg { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- Wanderly */

.wd-main { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.6em; padding: 1.6em 1.8em 1.8em; }
.wd-photo { position: relative; border-radius: 1em; overflow: hidden; }
.wd-photo .ui-chip { position: absolute; left: .9em; top: .9em; background: #fff; }
.wd-photo .ui-chip + .ui-chip { left: auto; right: .9em; background: var(--c); color: #fff; }
.wd-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3em; text-align: center; font-size: .8em; }
.wd-cal span { padding: .45em 0; border-radius: .5em; font-weight: 600; }
.wd-cal .h { color: var(--u-muted); font-weight: 600; padding: .2em 0; }
.wd-cal .x { color: #c9c4d6; text-decoration: line-through; }
.wd-cal .a { background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 75%, #1d1933); }
.wd-cal .s { background: var(--c); color: #fff; }
.wd-slot { display: flex; justify-content: space-between; align-items: center; padding: .6em .8em; border: 1.5px solid var(--u-line); border-radius: .65em; font-size: .88em; }
.wd-slot.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, #fff); }
.wd-step { display: flex; align-items: center; gap: .6em; }
.wd-step span { width: 1.7em; height: 1.7em; border-radius: 50%; border: 1px solid var(--u-line); display: grid; place-items: center; font-weight: 700; }

/* ---------------------------------------------------------------- Ledgerline */

.ll-legend { display: flex; gap: 1.2em; font-size: .8em; font-weight: 600; color: var(--u-muted); }
.ll-legend span::before { content: ""; display: inline-block; width: .8em; height: .8em; border-radius: .2em; margin-right: .4em; vertical-align: -.1em; background: var(--k); }
.ll-feed li { display: flex; gap: .7em; align-items: center; padding: .6em 0; border-bottom: 1px solid var(--u-line); font-size: .9em; }
.ll-feed li:last-child { border: 0; }
.ll-ico { width: 2.1em; height: 2.1em; border-radius: .6em; display: grid; place-items: center; flex: none; font-weight: 650; font-size: .85em; }
.ll-tabs { display: flex; gap: .4em; }
.ll-tabs span { padding: .38em .9em; border-radius: 99px; font-weight: 600; font-size: .85em; color: var(--u-muted); }
.ll-tabs .on { background: var(--u-ink); color: #fff; }
.ll-paper { background: #fff; border: 1px solid var(--u-line); border-radius: .8em; padding: 1.3em; box-shadow: 0 1em 2em -1.4em rgba(29, 25, 51, .35); }

/* ---------------------------------------------------------------- Bloom & Basket */

.bb-banner { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; margin: 1.4em 1.8em 0; padding: 1.4em 1.8em; border-radius: 1.1em; background: color-mix(in srgb, var(--c) 16%, #fff); overflow: hidden; }
.bb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; padding: 1.4em 1.8em 1.8em; }
.bb-prod { display: flex; flex-direction: column; gap: .35em; }
.bb-img { position: relative; border-radius: .9em; background: var(--bg-c, #f4f1ea); aspect-ratio: 1 / 1.05; overflow: hidden; }
.bb-img .ui-chip { position: absolute; left: .6em; top: .6em; background: #fff; font-size: .72em; }
.bb-fav { position: absolute; right: .6em; top: .6em; width: 1.8em; height: 1.8em; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #ff5ca8; font-size: .8em; }
.bb-stars { color: #f5a524; letter-spacing: .05em; font-size: .8em; }
.bb-pay { display: flex; align-items: center; gap: .7em; padding: .75em .9em; border: 1.5px solid var(--u-line); border-radius: .7em; font-weight: 600; font-size: .9em; }
.bb-pay.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); }
.bb-radio { width: 1.1em; height: 1.1em; border-radius: 50%; border: 1.5px solid var(--u-line); flex: none; }
.bb-pay.on .bb-radio { border: .35em solid var(--c); }
.bb-thumb { width: 3em; height: 3em; border-radius: .6em; flex: none; overflow: hidden; }

/* ---------------------------------------------------------------- CareDesk */

.cd-wrap { position: relative; display: grid; grid-template-columns: 1fr 26em; min-height: 36em; }
.cd-site { padding: 1.4em 1.8em; display: flex; flex-direction: column; gap: 1.2em; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, #fff), #fff 60%); }
.cd-chat { display: flex; flex-direction: column; border-left: 1px solid var(--u-line); background: #fff; }
.cd-chat__head { display: flex; align-items: center; gap: .7em; padding: 1em 1.1em; background: var(--c); color: #fff; }
.cd-chat__log { flex: 1; display: flex; flex-direction: column; gap: .7em; padding: 1em; background: var(--u-bg); }
.cd-msg { max-width: 86%; padding: .65em .85em; border-radius: 1em; font-size: .9em; line-height: 1.45; background: #fff; border: 1px solid var(--u-line); border-bottom-left-radius: .3em; }
.cd-msg--me { align-self: flex-end; background: var(--u-ink); color: #fff; border: 0; border-radius: 1em; border-bottom-right-radius: .3em; }
.cd-msg ul { margin: .4em 0 0; padding-left: 1.1em; list-style: disc; }
.cd-slot { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .6em .75em; border-radius: .7em; background: #fff; border: 1.5px solid var(--u-line); font-size: .86em; }
.cd-input { display: flex; gap: .5em; padding: .8em; border-top: 1px solid var(--u-line); }
.cd-input .ui-input { flex: 1; }
.cd-doc { display: flex; gap: .7em; align-items: center; }

/* ---------------------------------------------------------------- FieldMate (phones) */

.fm { display: flex; flex-direction: column; height: 100%; }
.fm-top { padding: 3.2em 1.1em 1em; background: var(--c); color: #1d1933; }
.fm-body { flex: 1; padding: 1em; display: flex; flex-direction: column; gap: .7em; background: var(--u-bg); overflow: hidden; }
.fm-job { display: flex; gap: .75em; padding: .8em; border-radius: .9em; background: #fff; border: 1px solid var(--u-line); }
.fm-time { width: 3.2em; flex: none; text-align: center; font-weight: 650; font-size: .9em; line-height: 1.2; }
.fm-time small { display: block; font-weight: 600; color: var(--u-muted); font-size: .75em; }
.fm-job.on { border: 1.5px solid var(--c); box-shadow: 0 .4em 1em -.5em rgba(15, 23, 42, .3); }
.fm-tabs { display: flex; justify-content: space-around; padding: .7em 0 1.1em; background: #fff; border-top: 1px solid var(--u-line); font-size: .7em; font-weight: 700; color: var(--u-muted); }
.fm-tabs span { display: grid; justify-items: center; gap: .25em; }
.fm-tabs span::before { content: ""; width: 1.6em; height: 1.6em; border-radius: .5em; background: var(--u-line); }
.fm-tabs .on { color: #1d1933; }
.fm-tabs .on::before { background: var(--c); }
.fm-photo { flex: 1; aspect-ratio: 1; border-radius: .7em; overflow: hidden; }
.fm-sign { height: 4.5em; border-radius: .7em; border: 1.5px dashed var(--u-line); background: #fff; display: grid; place-items: center; }

/* ---------------------------------------------------------------- InvoiceBot (desktop) */

.ib { display: grid; grid-template-columns: 14em 1fr 20em; min-height: 36em; background: #fff; }
.ib-files { display: flex; flex-direction: column; gap: .35em; padding: 1em .8em; background: var(--u-bg); border-right: 1px solid var(--u-line); font-size: .86em; }
.ib-file { display: flex; align-items: center; gap: .55em; padding: .5em .6em; border-radius: .55em; }
.ib-file.on { background: #fff; box-shadow: 0 .2em .6em -.3em rgba(29, 25, 51, .35); }
.ib-file i { width: 1.6em; height: 2em; border-radius: .25em; background: #fff; border: 1px solid var(--u-line); flex: none; position: relative; }
.ib-file i::after { content: "PDF"; position: absolute; left: -.15em; bottom: .15em; padding: 0 .2em; border-radius: .15em; background: #e8473c; color: #fff; font-size: .45em; font-weight: 650; }
.ib-tick { margin-left: auto; width: .65em; height: .65em; border-radius: 50%; background: #15c39a; flex: none; }
.ib-tick--warn { background: #ffc233; } .ib-tick--bad { background: #e8473c; }
.ib-doc { padding: 1.4em; background: #ece9f2; display: grid; place-items: center; }
.ib-paper { width: 100%; max-width: 26em; background: #fff; border-radius: .3em; padding: 1.4em 1.5em; box-shadow: 0 .6em 1.6em -.6em rgba(29, 25, 51, .35); font-size: .82em; position: relative; }
.ib-paper .hl-box { position: absolute; border: 2px solid var(--c); border-radius: .3em; background: color-mix(in srgb, var(--c) 10%, transparent); }
.ib-line { height: .45em; border-radius: 99px; background: #ebe8f1; }
.ib-fields { display: flex; flex-direction: column; gap: .75em; padding: 1.2em; border-left: 1px solid var(--u-line); }
.ib-field { display: flex; flex-direction: column; gap: .2em; }
.ib-field .ui-input { justify-content: space-between; }
.ib-conf { font-size: .72em; font-weight: 650; padding: .1em .45em; border-radius: 99px; background: #dcf5ec; color: #0f8a60; }
.ib-conf--warn { background: #fff1cc; color: #a86b00; }
.ib-field--warn .ui-input { border-color: #ffc233; background: #fffaeb; }
.ib-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: .8em; padding: .8em 1.2em; border-top: 1px solid var(--u-line); background: #fff; }

/* ---------------------------------------------------------------- hero collage extras */

.mini-chat { container-type: inline-size; }
.mini-chat__box { padding: 4cqi; border-radius: 5cqi; background: #fff; border: 1px solid rgba(15, 23, 42, .1); box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .4); font-size: 4.6cqi; color: #0f172a; }
.mini-chat__head { display: flex; align-items: center; gap: 3cqi; margin-bottom: 3cqi; font-weight: 700; }
.mini-chat__head i { width: 8cqi; height: 8cqi; border-radius: 2.5cqi; background: var(--sky); display: block; }
.mini-chat__q { margin-left: auto; width: max-content; max-width: 85%; padding: 2.4cqi 3.6cqi; border-radius: 4cqi 4cqi 1cqi 4cqi; background: #1d1933; color: #fff; }
.mini-chat__a { margin-top: 2.6cqi; max-width: 92%; padding: 2.4cqi 3.6cqi; border-radius: 4cqi 4cqi 4cqi 1cqi; background: #eef5ff; line-height: 1.4; }

/* ---------------------------------------------------------------- Pulse (Android, Material 3 / Compose) */

.pl { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff8fa; }
.pl-top { padding: 3.6em 1.1em .6em; }
.pl-top small { color: #8b6b78; font-weight: 600; }
.pl-body { flex: 1; padding: .4em 1em 1em; display: flex; flex-direction: column; gap: .75em; overflow: hidden; }
.pl-card { padding: .9em; border-radius: 1.1em; background: #fff; box-shadow: 0 .15em .6em -.2em rgba(120, 30, 70, .2); }
.pl-card--tonal { background: #ffe0ec; box-shadow: none; }
.pl-rings { display: flex; align-items: center; gap: .9em; }
.pl-legend { display: grid; gap: .35em; font-size: .82em; }
.pl-legend b { display: block; font-size: 1.15em; }
.pl-legend span { position: relative; padding-left: 1em; color: var(--u-muted); }
.pl-legend span b { color: var(--u-ink); }
.pl-legend span::before { content: ""; position: absolute; left: 0; top: .45em; width: .6em; height: .6em; border-radius: 50%; background: var(--k); }
.pl-chip { display: inline-flex; padding: .3em .8em; border-radius: .6em; border: 1px solid #e6c9d5; font-size: .76em; font-weight: 600; color: #6b4b58; }
.pl-chip.on { background: #ffd9e7; border-color: #ffd9e7; color: #3e1022; }
.pl-btn { display: inline-flex; align-items: center; justify-content: center; padding: .6em 1.2em; border-radius: 99px; background: #b4185c; color: #fff; font-weight: 650; font-size: .85em; }
.pl-nav { display: flex; justify-content: space-around; padding: .55em 0 1.1em; background: #fdeef3; font-size: .68em; font-weight: 650; color: #6b4b58; }
.pl-nav span { display: grid; justify-items: center; gap: .3em; }
.pl-nav span i { display: grid; place-items: center; width: 3.4em; height: 1.9em; border-radius: 99px; }
.pl-nav span i::after { content: ""; width: 1.15em; height: 1.15em; border-radius: .3em; border: 1.5px solid currentColor; }
.pl-nav .on { color: #3e1022; }
.pl-nav .on i { background: #ffd9e7; }
.pl-fab { position: absolute; right: 1.1em; bottom: 4.6em; width: 3.2em; height: 3.2em; border-radius: 1em; background: #ffd9e7; display: grid; place-items: center; font-size: 1.1em; font-weight: 700; color: #3e1022; box-shadow: 0 .4em 1em -.3em rgba(120, 30, 70, .45); }
.pl-set { display: flex; gap: .4em; }
.pl-set span { flex: 1; padding: .5em 0; text-align: center; border-radius: .7em; background: #f4e3ea; font-weight: 700; font-size: .85em; }
.pl-set span.done { background: #b4185c; color: #fff; }

/* ---------------------------------------------------------------- TillPoint (Windows 11 desktop) */

.mk-titlebar--light { background: #f3f5f8; color: #1e293b; border-bottom: 1px solid #e2e7ee; }
.mk-titlebar--light .mk-titlebar__ctrl span { opacity: .7; }
.mk-titlebar--light .mk-titlebar__ctrl span:last-child { background: transparent; color: #1e293b; }
.tp { display: grid; grid-template-columns: 1fr 22em; min-height: 34em; background: #f8fafc; }
.tp-main { display: flex; flex-direction: column; gap: .8em; padding: 1em 1.2em; min-width: 0; }
.tp-scan { display: flex; align-items: center; gap: .6em; padding: .7em .9em; border-radius: .6em; background: #fff; border: 2px solid var(--c); font-weight: 500; }
.tp-scan kbd { margin-left: auto; font-family: var(--font-mono); font-size: .85em; padding: .1em .45em; border-radius: .3em; border: 1px solid #cbd5e1; color: #64748b; background: #f8fafc; }
.tp-table { background: #fff; border: 1px solid var(--u-line); border-radius: .7em; overflow: hidden; }
.tp-table .ui-table td, .tp-table .ui-table th { padding: .62em .8em; }
.tp-table tr.sel td { background: color-mix(in srgb, var(--c) 9%, #fff); }
.tp-side { display: flex; flex-direction: column; gap: .7em; padding: 1em 1.1em; background: #fff; border-left: 1px solid var(--u-line); }
.tp-total { padding: .9em 1em; border-radius: .8em; background: #0f172a; color: #fff; }
.tp-total small { color: #94a3b8; font-weight: 600; }
.tp-total b { display: block; font-size: 2em; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tp-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.tp-pay span { padding: .6em 0; text-align: center; border-radius: .55em; border: 1px solid var(--u-line); font-weight: 650; font-size: .88em; }
.tp-pay span.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); color: color-mix(in srgb, var(--c) 80%, #0f172a); }
.tp-keys { display: flex; flex-wrap: wrap; gap: .35em .7em; }
.tp-keys span { font-size: .72em; color: #64748b; }
.tp-keys kbd { font-family: var(--font-mono); font-size: 1em; padding: .05em .35em; border-radius: .25em; border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.tp-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4em 1.4em; padding: .5em 1.2em; background: #eef2f7; border-top: 1px solid #e2e7ee; font-size: .76em; color: #475569; }
.tp-status b { color: #0f172a; }
.tp-status .ok::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: #10b981; margin-right: .4em; }

/* ---------------------------------------------------------------- FleetBoard (map dashboard) */

.fb { display: grid; grid-template-columns: 18em 1fr; min-height: 36em; }
.fb-list { display: flex; flex-direction: column; gap: .45em; padding: 1em .8em; background: #fff; border-right: 1px solid var(--u-line); }
.fb-van { display: flex; align-items: center; gap: .6em; padding: .55em .65em; border-radius: .6em; font-size: .86em; }
.fb-van.on { background: color-mix(in srgb, var(--c) 9%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, #fff); }
.fb-van i { width: 2.2em; height: 2.2em; border-radius: .55em; display: grid; place-items: center; flex: none; font-style: normal; font-weight: 700; font-size: .78em; color: #fff; background: var(--k, #10b981); }
.fb-map { position: relative; background: #eef2f6; overflow: hidden; min-height: 30em; }
.fb-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fb-kpis { position: absolute; left: 1em; right: 1em; top: 1em; display: flex; gap: .5em; flex-wrap: wrap; }
.fb-kpis span { padding: .45em .8em; border-radius: .6em; background: #fff; font-size: .82em; font-weight: 600; box-shadow: 0 .2em .8em -.3em rgba(15, 23, 42, .3); }
.fb-kpis b { font-size: 1.1em; margin-right: .25em; }
.fb-pop { position: absolute; right: 1.2em; bottom: 1.2em; width: 17em; padding: .9em 1em; border-radius: .9em; background: #fff; box-shadow: 0 .6em 1.8em -.6em rgba(15, 23, 42, .45); font-size: .86em; display: grid; gap: .45em; }