/* Kunji app screens: tokens from the Kunji Design System (ds/kunji/tokens.json) plus app-shell patterns. */

:root {
  --surface: #f6f7f5; --surface-raised: #ffffff; --surface-sunken: #eceeeb;
  --line: #dde1dd; --line-strong: #7c8590;
  --ink: #0e1116; --ink-muted: #5b6470;
  --key: #12b886; --on-key: #0e1116; --key-ink: #0b7a5a; --key-soft: #e3f8f0;
  --blue: #5b7cfa; --blue-ink: #2f4bd6; --blue-soft: #e8edff;
  --amber: #f5a524; --amber-ink: #8a5a00; --amber-soft: #fff3dc;
  --coral: #ff7a59; --coral-ink: #b93a1e; --coral-soft: #ffebe5;
  --on-tool: #0e1116; --danger: #b4232a; --danger-soft: #fce8e8;
  --scrim: rgba(14, 17, 22, 0.44);
  --shadow-sheet: 0 -8px 24px rgba(14, 17, 22, 0.12);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px;
  --font-sans: "Geist", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace;
}
.dark {
  --surface: #0e1116; --surface-raised: #171b21; --surface-sunken: #0a0c10;
  --line: #2a3038; --line-strong: #6b7480;
  --ink: #f2f4f3; --ink-muted: #9aa3ae;
  --key: #2bd9a0; --key-ink: #2bd9a0; --key-soft: #0f2e25;
  --blue: #8aa2ff; --blue-ink: #8aa2ff; --blue-soft: #1a2350;
  --amber: #ffc24d; --amber-ink: #ffc24d; --amber-soft: #3a2a08;
  --coral: #ff9a7d; --coral-ink: #ff9a7d; --coral-soft: #3d1a12;
  --danger: #ff6b70; --danger-soft: #3a1517;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.5);
}

/* screen shell */
.k-screen { position: relative; width: 390px; height: 844px; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.k-scroll { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.k-ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.k-ic-sm { width: 18px; height: 18px; }

/* top app bars */
.k-topbar { display: flex; align-items: center; gap: var(--space-2); min-height: 64px; padding: 24px var(--space-4) 0; box-sizing: border-box; }
.k-iconbtn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-full); color: var(--ink); text-decoration: none; flex: none; }
.k-bar-title { margin: 0; flex: 1; font-size: 20px; line-height: 26px; font-weight: 600; text-wrap: balance; }
.k-screen-title { margin: 0; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }

/* Android navigation bar */
.k-navbar { display: flex; height: 80px; padding-bottom: 8px; box-sizing: content-box; background: var(--surface-raised); border-top: 1px solid var(--line); }
.k-navitem { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-muted); text-decoration: none; font-size: 12px; line-height: 16px; font-weight: 500; }
.k-navitem .k-ind { display: grid; place-items: center; width: 64px; height: 32px; border-radius: var(--radius-full); }
.k-navitem.is-on { color: var(--ink); font-weight: 600; }
.k-navitem.is-on .k-ind { background: var(--key-soft); color: var(--key-ink); }

/* tool tiles */
.k-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: 0 var(--space-4); }
.k-tool { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); min-height: 136px; padding: var(--space-4); box-sizing: border-box; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.k-well { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--on-tool); }
.k-well.unlock { background: var(--key); } .k-well.merge { background: var(--blue); } .k-well.sign { background: var(--amber); } .k-well.convert { background: var(--coral); }
.k-tool-name { display: flex; align-items: center; gap: 6px; font-size: 17px; line-height: 22px; font-weight: 600; }
.k-tool-meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* lists */
.k-label { margin: 0; padding: var(--space-6) var(--space-4) var(--space-2); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.k-list { display: flex; flex-direction: column; margin: 0 var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.k-li { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding: var(--space-3) var(--space-4); box-sizing: border-box; color: var(--ink); text-decoration: none; }
.k-li + .k-li { border-top: 1px solid var(--line); }
.k-li-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.k-li-title { font-size: 16px; line-height: 22px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-li-meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.k-thumb { display: grid; place-items: center; width: 40px; height: 48px; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-muted); flex: none; }

/* pills and badges */
.k-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; flex: none; }
.k-pill.ok { background: var(--key-soft); color: var(--key-ink); } .k-pill.locked { background: var(--danger-soft); color: var(--danger); }
.k-pill.blue { background: var(--blue-soft); color: var(--blue-ink); } .k-pill.amber { background: var(--amber-soft); color: var(--amber-ink); } .k-pill.coral { background: var(--coral-soft); color: var(--coral-ink); }
.k-pill.pro { background: var(--ink); color: var(--surface); }

/* buttons (shape from the design system's Button) */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-6); border-radius: var(--radius-md); border: 1px solid transparent; font: 600 16px/20px var(--font-sans); text-decoration: none; box-sizing: border-box; }
.k-btn.primary { background: var(--key); color: var(--on-key); }
.k-btn.secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.k-btn.ghost { background: transparent; color: var(--key-ink); }
.k-btn.block { width: 100%; }

/* sheets */
.k-scrim { position: absolute; inset: 0; background: var(--scrim); }
.k-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: 10px var(--space-6) 32px; box-sizing: border-box; background: var(--surface-raised); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-sheet); }
.k-handle { align-self: center; width: 32px; height: 4px; border-radius: 2px; background: var(--line-strong); margin-bottom: var(--space-2); }

/* fields (shape from the design system's PasswordField) */
.k-field { display: flex; flex-direction: column; gap: var(--space-2); }
.k-field-label { font-size: 15px; line-height: 20px; font-weight: 500; }
.k-field-box { display: flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-2) 0 var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--line-strong); }
.k-field-box.is-focus { border-color: var(--key-ink); box-shadow: 0 0 0 1px var(--key-ink); }
.k-field-box.is-error { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.k-field-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 16px/22px var(--font-mono); letter-spacing: 0.04em; outline: none; }
.k-field-help { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.k-field-help.is-error { color: var(--danger); }

/* toggles (Material switch, drawn) */
.k-switch { position: relative; width: 52px; height: 32px; border-radius: 16px; background: var(--surface-sunken); border: 2px solid var(--line-strong); box-sizing: border-box; flex: none; }
.k-switch::after { content: ""; position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--line-strong); }
.k-switch.is-on { background: var(--key); border-color: var(--key); }
.k-switch.is-on::after { left: 24px; top: 2px; width: 24px; height: 24px; background: var(--on-key); }

/* page thumbnails */
.k-page { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); background: #ffffff; border: 1px solid var(--line); box-sizing: border-box; padding: 10px 8px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.k-page i { display: block; height: 4px; border-radius: 2px; background: #dde1dd; }
.k-page i.w6 { width: 60%; } .k-page i.w8 { width: 80%; } .k-page i.w4 { width: 40%; } .k-page i.dark { background: #5b6470; }

/* Pro marks: a Pro feature stays visible where the job happens, marked with a key */
.k-pro { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: var(--radius-full); background: var(--ink); color: var(--surface); font: 600 12px/16px var(--font-sans); white-space: nowrap; flex: none; }
.k-pro svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-pro-key { position: absolute; top: -5px; right: -9px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--surface); box-shadow: 0 0 0 2px var(--surface-raised); }
.k-pro-key svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.k-pro-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); text-decoration: none; }
.k-pro-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.k-pro-row b { font-size: 15px; line-height: 20px; font-weight: 600; }
.k-pro-row small { font-size: 13px; line-height: 18px; color: var(--ink-muted); }