@font-face { font-family:'Baloo 2'; font-style:normal; font-weight:600 800; font-display:swap; src:url(baloo2-latin.woff2) format('woff2'); }
:root {
  --bg:#fff4dd; --card:#fffdf7; --card-2:#f6ead2; --text:#26201a; --soft:#3d352c; --muted:#6a6052; --line:#e2d4bb; --ink:#26201a;
  --accent:#0b6f58; --mint:#a3d9cd; --sun:#ffd84d; --rose:#ffc2dc; --sky:#b9e3ff; --lilac:#d7c8ff; --peach:#ffc9a8; --bad:#b3261e;
  --round:'Baloo 2','Arial Rounded MT Bold',system-ui,sans-serif; --mono:ui-monospace,'SF Mono','Cascadia Code',Menlo,Consolas,monospace;
}
[data-theme='dark'] {
  --bg:oklch(.18 .012 70); --card:oklch(.235 .014 70); --card-2:oklch(.28 .016 72); --text:oklch(.93 .025 80); --soft:oklch(.85 .025 78);
  --muted:oklch(.72 .025 75); --line:oklch(.36 .02 72); --ink:oklch(.08 .005 70); --accent:#a3d9cd; --bad:#ff8a80;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100dvh; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
       -webkit-font-smoothing:antialiased; }
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--accent); }
.top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
       background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
       border-bottom:2px solid var(--ink); }
.brand { display:flex; align-items:center; gap:9px; color:inherit; text-decoration:none; flex:none; }
.brand img { width:34px; height:34px; border-radius:10px; border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); }
.brand b { font:800 19px/1 var(--round); letter-spacing:-.4px; padding-top:3px; }
.brand small { display:block; font:600 11px/1.2 var(--mono); color:var(--muted); letter-spacing:0; max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tabs { display:flex; gap:4px; padding:4px; margin:0 auto; border:2px solid var(--ink); border-radius:999px; background:var(--card);
        box-shadow:2px 2px 0 var(--ink); overflow-x:auto; scrollbar-width:none; max-width:100%; }
.tabs::-webkit-scrollbar { display:none; }
.tabs button { display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:7px 13px 6px; border-radius:999px;
               font:700 14px/1 var(--round); cursor:pointer; white-space:nowrap; color:var(--muted); }
.tabs button svg { width:15px; height:15px; flex:none; margin-top:-2px; }
.tabs button[aria-selected='true'] { background:var(--mint); color:#192c26; }
.tabs button:hover { color:var(--text); }
.tabs button:focus-visible, .btn:focus-visible, .seg button:focus-visible, .switch:focus-visible, .acc:focus-visible {
  outline:3px solid color-mix(in srgb,var(--accent) 50%,transparent); outline-offset:2px; }
.tools { display:flex; align-items:center; gap:8px; flex:none; }
.select { height:36px; padding:0 30px 0 12px; border:2px solid var(--ink); border-radius:999px; background:var(--card); font:700 13px/1 var(--round);
          appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),linear-gradient(135deg,var(--text) 50%,transparent 50%);
          background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px; background-size:5px 5px; background-repeat:no-repeat; }
.round { width:36px; height:36px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:999px; background:var(--card); cursor:pointer;
         box-shadow:2px 2px 0 var(--ink); }
main { max-width:1180px; margin:0 auto; padding:18px 16px 70px; }
.view { display:grid; gap:16px; animation:fade .25s ease; }
@keyframes fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.banner { display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap; padding:10px 14px; border:2px dashed var(--ink);
          border-radius:14px; background:color-mix(in srgb,var(--sun) 35%,var(--card)); font-weight:600; }
.banner.bad { background:color-mix(in srgb,var(--rose) 45%,var(--card)); border-style:solid; }
.banner.ok { background:color-mix(in srgb,var(--mint) 40%,var(--card)); border-style:solid; }
.banner .btn { flex:none; }
.back { display:inline-flex; align-items:center; gap:6px; justify-self:start; padding:6px 12px 5px 8px; border:2px solid var(--ink); border-radius:999px;
        background:var(--card); font:700 13.5px/1 var(--round); color:var(--text); cursor:pointer; box-shadow:2px 2px 0 var(--ink); text-decoration:none; }
.back svg { width:16px; height:16px; }
.meter { display:block; height:8px; margin-top:7px; border-radius:999px; background:var(--card-2); border:1.5px solid var(--ink); overflow:hidden; }
.meter i { display:block; height:100%; background:var(--accent); border-radius:999px; }
.meter.near i { background:color-mix(in srgb,var(--sun) 85%,var(--ink)); }
.meter.full i { background:var(--bad); }
.steps { display:grid; gap:8px; margin:0; padding:0; list-style:none; counter-reset:step; }
.steps li { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; padding:9px 10px; border:1.5px solid var(--line); border-radius:14px; }
.steps li::before { counter-increment:step; content:counter(step); display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
                    border:2px solid var(--ink); background:var(--card); font:800 14px/1 var(--round); }
.steps li.done { background:color-mix(in srgb,var(--mint) 22%,var(--card)); }
.steps li.done::before { content:'✓'; background:var(--mint); color:#192c26; }
.steps li b { font:800 15px/1.25 var(--round); display:block; }
.steps li small { color:var(--muted); font-size:12.5px; }
.kv { display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:6px 16px; margin:0; font-size:14px; }
.kv dt { color:var(--muted); font:600 12.5px/1.6 var(--mono); }
.kv dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.tile { position:relative; padding:12px 14px 11px; border:2px solid var(--ink); border-radius:16px; background:var(--card); box-shadow:3px 3px 0 var(--ink); min-width:0; }
.tile .k { font:600 12px/1.3 var(--mono); color:var(--muted); display:flex; align-items:center; gap:6px; }
.tile .v { font:800 28px/1.1 var(--round); letter-spacing:-.6px; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile .s { font-size:12.5px; line-height:1.35; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.tile.mint { background:color-mix(in srgb,var(--mint) 38%,var(--card)); }
.tile.sun { background:color-mix(in srgb,var(--sun) 34%,var(--card)); }
.tile.sky { background:color-mix(in srgb,var(--sky) 38%,var(--card)); }
.tile.rose { background:color-mix(in srgb,var(--rose) 38%,var(--card)); }
.dim { opacity:.45; font-size:.72em; letter-spacing:0; }
.up { color:var(--accent); } .down { color:var(--bad); }
.panel { padding:14px 16px 16px; border:2px solid var(--ink); border-radius:18px; background:var(--card); box-shadow:4px 4px 0 var(--ink); min-width:0; }
.panel > header { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.panel h2 { margin:0; font:800 18px/1.2 var(--round); letter-spacing:-.3px; display:flex; align-items:center; gap:8px; }
.panel h2 .count { font:700 12px/1 var(--mono); color:var(--muted); padding:4px 8px 3px; border:1.5px solid var(--line); border-radius:999px; }
.hint { font-size:12.5px; color:var(--muted); }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cols.wide { grid-template-columns:1.4fr 1fr; }
@media (max-width:860px) { .cols, .cols.wide { grid-template-columns:1fr; } }
.chart { display:flex; align-items:flex-end; justify-content:center; gap:3px; height:150px; padding:6px 0 0; border-bottom:2px solid var(--line); }
.chart .b { flex:1 1 0; min-width:3px; max-width:56px; position:relative; height:100%; display:flex; align-items:flex-end; }
.chart .b i { display:block; width:100%; border-radius:5px 5px 0 0; background:var(--accent); min-height:2px; transition:height .45s cubic-bezier(.2,.7,.2,1); }
.chart .b.zero i { background:var(--line); }
.chart .b:hover i { background:color-mix(in srgb,var(--accent) 75%,var(--sun)); }
.chart.money .b i { background:color-mix(in srgb,var(--sun) 80%,var(--ink)); }
.axis { display:flex; justify-content:space-between; font:11px var(--mono); color:var(--muted); margin-top:5px; }
.tip { position:fixed; z-index:50; pointer-events:none; padding:6px 9px; border:2px solid var(--ink); border-radius:10px; background:var(--card);
       box-shadow:2px 2px 0 var(--ink); font:600 12.5px/1.35 system-ui,sans-serif; white-space:nowrap; }
.hours { display:grid; grid-template-columns:repeat(24,1fr); gap:2px; align-items:end; height:70px; }
.hours i { display:block; background:var(--mint); border-radius:3px 3px 0 0; min-height:2px; }
.hbars { display:grid; gap:7px; }
.hb { display:grid; grid-template-columns:minmax(90px,150px) 1fr auto; gap:10px; align-items:center; font-size:14px; }
.hb .l { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.hb .t { height:10px; border-radius:999px; background:var(--card-2); overflow:hidden; }
.hb .t i { display:block; height:100%; border-radius:999px; background:var(--accent); }
.hb .n { font:600 12.5px var(--mono); color:var(--muted); min-width:36px; text-align:right; }
.list { display:grid; }
.row { display:grid; grid-template-columns:1fr auto; gap:4px 14px; align-items:start; padding:11px 2px; border-top:1.5px solid var(--line); }
.row:first-child { border-top:0; }
.row.click { cursor:pointer; border-radius:10px; padding-left:8px; padding-right:8px; }
.row.click:hover { background:color-mix(in srgb,var(--card-2) 60%,transparent); }
.row .q { font-weight:650; overflow-wrap:anywhere; }
.row .q.clamp { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.row .q.fold { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.row:has(.q.fold) { cursor:pointer; }
.row.open .q.fold { display:block; -webkit-line-clamp:unset; overflow:visible; }
.row .qposts { display:none; grid-column:1 / -1; }
.row.open .qposts { display:grid; gap:8px; margin-top:4px; }
.row .qpost { padding:8px 12px; border-left:3px solid var(--line); border-radius:4px; color:var(--muted); font-size:14px;
              white-space:pre-wrap; overflow-wrap:anywhere; max-height:420px; overflow:auto; }
.row .q .qlink { display:inline-block; margin-left:4px; padding:0 8px; border:1.5px solid var(--ink); border-radius:999px; font:700 11.5px/1.6 var(--round);
                 color:var(--ink); background:var(--sky); text-decoration:none; white-space:nowrap; vertical-align:1px; }
.row .m { grid-column:1 / -1; font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; min-width:0; }
.row .m > * { min-width:0; overflow-wrap:anywhere; }
.row > * { min-width:0; }
.row .side { text-align:right; font:600 13px var(--mono); white-space:nowrap; }
.row .side small { display:block; font-size:11.5px; color:var(--muted); font-weight:500; }
.row .a { grid-column:1 / -1; margin-top:6px; padding:10px 12px; border-radius:12px; background:var(--card-2); white-space:pre-wrap; overflow-wrap:anywhere;
          font-size:14px; max-height:420px; overflow:auto; }
.row .tech { grid-column:1 / -1; font:12px/1.5 var(--mono); color:var(--muted); }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px 1px; border-radius:999px; border:1.5px solid var(--ink); font:700 11px/1.4 var(--round);
         color:var(--text); background:var(--card-2); white-space:nowrap; }
.badge.web, .badge.embed, .badge.api, .badge.ok, .badge.off, .badge.paused, .badge.warn, .badge.followup, .badge.rephrased, .badge.down,
.badge.not_found, .badge.sun, .badge.sky, .badge.lilac { color:#26201a; }
.badge.web { background:var(--mint); } .badge.embed { background:var(--sky); } .badge.api { background:var(--lilac); }
.badge.ok { background:var(--mint); } .badge.off, .badge.paused { background:var(--rose); } .badge.warn, .badge.sun { background:var(--sun); }
.badge.sky { background:var(--sky); } .badge.lilac { background:var(--lilac); }
.badge.followup { background:var(--peach); } .badge.rephrased { background:var(--sun); } .badge.down { background:var(--rose); } .badge.not_found { background:var(--sky); }
[data-theme='dark'] .badge { border-color:var(--ink); }
[data-theme='dark'] .badge:not([class*=' ']) { border-color:var(--line); }
.empty { padding:20px 6px; text-align:center; color:var(--muted); font-size:14px; }
.more { margin-top:10px; display:flex; justify-content:center; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px 4px; border:1.5px solid var(--ink); border-radius:999px; background:var(--card);
        font:700 13px/1.2 var(--round); cursor:default; }
.chip b { font:600 11.5px var(--mono); color:var(--muted); }
button.chip { cursor:pointer; } button.chip[aria-pressed='true'] { background:var(--mint); color:#192c26; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 15px; border-radius:999px; border:2px solid var(--ink);
       background:var(--card); font:700 14px/1 var(--round); cursor:pointer; box-shadow:2px 2px 0 var(--ink); white-space:nowrap; text-decoration:none; color:var(--text);
       transition:transform .1s, box-shadow .1s; }
.btn:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.btn:active { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.btn.primary { background:var(--mint); color:#192c26; }
.btn.sun { background:var(--sun); color:#26201a; }
.btn.danger { background:var(--rose); color:#26201a; }
.btn.small { height:30px; padding:0 11px; font-size:12.5px; box-shadow:1.5px 1.5px 0 var(--ink); }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.form { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; align-items:end; }
.field { display:grid; gap:4px; font:600 12px/1.3 var(--mono); color:var(--muted); }
.input { width:100%; height:40px; padding:0 12px; border:2px solid var(--ink); border-radius:12px; background:var(--card); color:var(--text); font:15px system-ui,sans-serif; }
textarea.input { height:auto; min-height:76px; padding:9px 12px; resize:vertical; }
.input:focus, .select:focus { outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:1px; }
.search { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.search .input { flex:1 1 220px; border-radius:999px; }
.switch { position:relative; width:46px; height:26px; flex:none; border-radius:999px; border:2px solid var(--ink); background:var(--card-2); cursor:pointer; padding:0; }
.switch::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--ink); transition:left .2s; }
.switch[aria-checked='true'] { background:var(--mint); }
.switch[aria-checked='true']::after { left:22px; }
.line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.spread { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.keybox { display:grid; gap:8px; padding:12px 14px; border:2px solid var(--ink); border-radius:14px; background:color-mix(in srgb,var(--sun) 30%,var(--card)); }
.keybox code { display:block; padding:9px 11px; border-radius:10px; background:var(--card); border:1.5px solid var(--ink); font:13px/1.4 var(--mono); overflow-wrap:anywhere; user-select:all; }
pre.code { margin:0; padding:12px 14px; border-radius:12px; background:#26201a; color:#fff4dd; font:12.5px/1.55 var(--mono); overflow:auto; white-space:pre; }
pre.code.wrap { white-space:pre-wrap; overflow-wrap:anywhere; }
.codehead { display:flex; justify-content:space-between; align-items:center; margin:12px 0 6px; font:700 13px var(--round); }
.seg { display:inline-flex; gap:3px; padding:3px; border:2px solid var(--ink); border-radius:999px; background:var(--card); }
.seg button { border:0; background:none; padding:6px 13px 5px; border-radius:999px; font:700 13px/1 var(--round); cursor:pointer; color:var(--muted); }
.seg button[aria-pressed='true'] { background:var(--mint); color:#192c26; }
.toast { position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); translate:-50% 0; z-index:60; padding:10px 16px; border:2px solid var(--ink);
         border-radius:999px; background:var(--card); box-shadow:3px 3px 0 var(--ink); font:700 14px/1.3 var(--round); animation:fade .2s ease; max-width:90vw; }
.toast.bad { background:var(--rose); color:#26201a; }
.skel { height:14px; border-radius:7px; background:linear-gradient(90deg,var(--card-2),var(--line),var(--card-2)); background-size:200% 100%; animation:shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.sep { height:1.5px; background:var(--line); margin:12px 0; }
.preview-frame { width:100%; height:560px; border:2px solid var(--ink); border-radius:16px; background:var(--bg); }
.acc { display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:12px 14px; border:2px solid var(--ink); border-radius:16px; background:var(--card);
       box-shadow:3px 3px 0 var(--ink); cursor:pointer; transition:transform .1s, box-shadow .1s; }
.acc:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.acc .name { font:800 16px/1.2 var(--round); }
.acc .mail { font:12.5px var(--mono); color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.acc .amt { text-align:right; font:800 18px/1.1 var(--round); }
.acc .amt small { display:block; font:600 11.5px var(--mono); color:var(--muted); }
.acc .m { grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap; }
.accs { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
@media (max-width:640px) {
  .top { padding:calc(8px + env(safe-area-inset-top)) 12px 8px; background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .brand small { max-width:46vw; }
  .tabs { position:fixed; z-index:30; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); margin:0; max-width:none;
          display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2px; padding:5px; border-radius:22px;
          box-shadow:3px 3px 0 var(--ink); overflow:visible; }
  .tabs button { flex-direction:column; justify-content:center; gap:3px; min-width:0; padding:7px 2px 6px; border-radius:16px;
                 font:700 11px/1.1 var(--round); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tabs button span { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .tabs button svg { width:21px; height:21px; margin:0; }
  .tools { margin-left:auto; }
  main { padding:14px 12px calc(98px + env(safe-area-inset-bottom)); } .tile .v { font-size:24px; } .tiles { grid-template-columns:1fr 1fr; gap:10px; }
  .hb { grid-template-columns:minmax(80px,120px) 1fr auto; } .panel { padding:12px 13px 14px; }
  .btn.small { height:34px; padding:0 12px; font-size:13px; }
  .toast { bottom:calc(96px + env(safe-area-inset-bottom)); }
  .kv { grid-template-columns:1fr; gap:0 0; } .kv dd { margin-bottom:8px; }
  .acc .amt { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition:none !important; } }
.balance { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.balance .big { font:800 40px/1.05 var(--round); letter-spacing:-1px; }
.balance .big.bad { color:var(--bad); }
.zero-note { margin:10px 0 0; padding:9px 12px; border-left:4px solid var(--sun); border-radius:6px; background:color-mix(in srgb,var(--sun) 14%,var(--card));
             font-size:13.5px; line-height:1.45; }
.h3 { margin:0 0 8px; font:800 15.5px/1.2 var(--round); }
.chips.amounts { gap:8px; }
.chip.big { padding:8px 16px 7px; font-size:15px; box-shadow:2px 2px 0 var(--ink); }
.field.grow { flex:1 1 220px; }
.kasbox { display:grid; gap:9px; margin-top:12px; padding:13px 14px; border:2px solid var(--ink); border-radius:14px;
          background:color-mix(in srgb,var(--sun) 24%,var(--card)); }
.kasbox > b { font:800 18px/1.25 var(--round); }
.copyline { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; }
.copyline .k { font:600 12px var(--mono); color:var(--muted); min-width:52px; }
.copyline code { padding:7px 10px; border-radius:10px; background:var(--card); border:1.5px solid var(--ink); font:13px/1.4 var(--mono);
                 overflow-wrap:anywhere; user-select:all; }
.dots { display:inline-flex; gap:3px; } .dots i { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:blink 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay:.2s; } .dots i:nth-child(3) { animation-delay:.4s; }
@keyframes blink { 0%, 80%, 100% { opacity:.25; } 40% { opacity:1; } }
@media (max-width:640px) { .copyline { grid-template-columns:1fr auto; } .copyline .k { grid-column:1 / -1; } .balance .big { font-size:34px; } }
details.how { margin-top:12px; font-size:13.5px; }
details.how summary { cursor:pointer; font:700 13.5px/1.4 var(--round); }
details.how ol { margin:8px 0 0; padding-left:20px; display:grid; gap:6px; line-height:1.45; }
select.input { appearance:auto; padding-right:8px; }
.cols.design { grid-template-columns:minmax(300px,1fr) minmax(320px,1.15fr); align-items:start; }
@media (max-width:860px) { .cols.design { grid-template-columns:1fr; } }
.form.one { grid-template-columns:1fr; }
.field .seg { margin-top:2px; flex-wrap:wrap; border-radius:18px; }
.swatches { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.swatch { position:relative; width:36px; height:36px; border-radius:50%; border:2px solid var(--ink); background:var(--s); cursor:pointer; padding:0;
          box-shadow:2px 2px 0 var(--ink); }
.swatch[aria-pressed='true'], .swatch.other.on { outline:3px solid var(--accent); outline-offset:2px; }
.swatch.other { display:grid; place-items:center; overflow:hidden; background:conic-gradient(#ffd84d,#ffc2dc,#d7c8ff,#b9e3ff,#a3d9cd,#ffd84d); }
.swatch.other.on { background:var(--s); }
.swatch.other input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }
.mock { position:relative; overflow:hidden; border:2px solid var(--ink); border-radius:16px; background:#f4f6fb; min-height:360px; }
.mock-bar { display:flex; align-items:center; gap:6px; height:30px; padding:0 10px; background:#e3e7f0; border-bottom:1.5px solid #c9cfdc; color:#4a5468;
            font:600 11.5px var(--mono); }
.mock-bar i { width:9px; height:9px; border-radius:50%; background:#c9cfdc; }
.mock-bar span { margin-left:8px; }
.mock-page { display:grid; gap:9px; padding:18px 18px 0; max-width:62%; }
.mock-page b { height:14px; width:70%; border-radius:6px; background:#cfd6e4; margin-top:6px; }
.mock-page span { height:9px; border-radius:5px; background:#dde2ec; } .mock-page span.short { width:60%; }
.mock-panel { position:absolute; bottom:calc(var(--bs,56px) + 30px); right:14px; transform-origin:bottom right; border:2.5px solid #26201a; border-radius:20px;
              box-shadow:5px 5px 0 #26201a; overflow:hidden; background:#fff4dd; }
.mock-panel iframe { width:100%; height:100%; border:0; display:block; }
.mock-bubble { position:absolute; bottom:14px; right:14px; width:var(--bs,56px); height:var(--bs,56px); border-radius:50%; border:2.5px solid #26201a;
               background:var(--c,#a3d9cd); color:var(--on,#26201a); box-shadow:3px 3px 0 #26201a; cursor:pointer; display:grid; place-items:center; padding:0; }
.mock-bubble svg { width:calc(var(--bs,56px) * .47); height:calc(var(--bs,56px) * .47); flex:none; }
.mock-bubble.lab { width:auto; max-width:calc(100% - 28px); display:inline-flex; align-items:center; gap:8px; padding:0 20px 0 15px; border-radius:999px; }
.mock-bubble.lab span { font:700 15px/1 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.mock[data-side='left'] .mock-panel { right:auto; left:14px; transform-origin:bottom left; }
.mock[data-side='left'] .mock-bubble { right:auto; left:14px; }
.mock[data-side='left'] .mock-page { margin-left:auto; }
.mock[data-corners='soft'] .mock-panel { border-radius:16px; } .mock[data-corners='square'] .mock-panel { border-radius:6px; }
.mock[data-corners='soft'] .mock-bubble { border-radius:32%; } .mock[data-corners='square'] .mock-bubble { border-radius:6px; }
.mock[data-corners='soft'] .mock-bubble.lab { border-radius:18px; } .mock[data-corners='square'] .mock-bubble.lab { border-radius:6px; }
.mock:not([data-look='kaspanews']) .mock-panel { border:1px solid rgb(16 18 27 / .09); box-shadow:0 22px 60px rgb(16 18 27 / .22), 0 4px 14px rgb(16 18 27 / .08); background:#fff; }
.mock[data-look='minimal'] .mock-panel { border-color:transparent; }
.mock:not([data-look='kaspanews'])[data-dark='on'] .mock-panel { border-color:rgb(255 255 255 / .1); background:#18181b; }
.mock:not([data-look='kaspanews']) .mock-bubble { border:0; box-shadow:0 6px 18px rgb(16 18 27 / .22), 0 1px 4px rgb(16 18 27 / .12); }
.mock:not([data-look='kaspanews']) .mock-bubble.lab span { font-weight:600; }
.dgroup { margin:18px 0 8px; padding-top:14px; border-top:1.5px solid var(--line); font:800 15px/1.2 var(--round); letter-spacing:-.2px; }
.panel > header + .dgroup { margin-top:4px; padding-top:0; border-top:0; }
.looks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.look-pick { display:grid; gap:2px; padding:8px 8px 9px; text-align:left; cursor:pointer; border:2px solid var(--line); border-radius:14px;
             background:var(--card); color:var(--text); transition:border-color .15s, box-shadow .15s, transform .1s; }
.look-pick:hover { border-color:color-mix(in srgb, var(--ink) 45%, var(--line)); }
.look-pick:active { transform:scale(.98); }
.look-pick[aria-pressed='true'] { border-color:var(--ink); box-shadow:2px 2px 0 var(--ink); background:color-mix(in srgb, var(--mint) 20%, var(--card)); }
.look-pick:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset:2px; }
.look-name { font:800 14px/1.2 var(--round); }
.look-tip { font-size:11.5px; line-height:1.3; color:var(--muted); }
.look-art { position:relative; display:block; height:62px; margin-bottom:7px; border-radius:10px; background:#ffffff; overflow:hidden; }
.look-art i { position:absolute; left:0; right:0; top:0; height:14px; border-bottom:1px solid #e4e4e7; }
.look-art i::before { content:''; position:absolute; left:7px; top:4px; width:34%; height:5px; border-radius:3px; background:#a1a1aa; }
.look-art b { position:absolute; right:7px; top:21px; width:46%; height:11px; border-radius:6px 6px 2px 6px; background:var(--c, #a3d9cd); }
.look-art s { position:absolute; left:7px; height:5px; border-radius:3px; background:#d4d4d8; }
.look-art s:nth-of-type(1) { top:39px; width:72%; } .look-art s:nth-of-type(2) { top:49px; width:50%; }
.look-art.kn { background:#fff4dd; border:2px solid #26201a; box-shadow:2px 2px 0 #26201a; border-radius:11px; }
.look-art.kn i { border-bottom:2px solid #26201a; } .look-art.kn i::before { background:#26201a; }
.look-art.kn b { border:1.5px solid #26201a; } .look-art.kn s { background:#cbbf9f; }
.look-art.clean { border:1px solid #e4e4e7; box-shadow:0 6px 16px rgb(16 18 27 / .1); }
.look-art.minimal { background:#ffffff; box-shadow:inset 0 0 0 1px #f0f0f2; }
.look-art.minimal i { border-bottom:0; } .look-art.minimal b { background:#ececef; } .look-art.minimal s { background:#e4e4e7; }
.swatch-break { flex-basis:100%; height:0; }
.swatch-note, .field .hint { font:500 12px/1.4 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--muted); }
.seg button.f-system { font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-weight:600; }
.seg button.f-serif { font-family:ui-serif,'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif; font-weight:600; }
.seg button.f-mono { font-family:var(--mono); font-weight:600; }
.seg.icons button { display:inline-grid; place-items:center; width:46px; padding:5px 0; }
.seg.icons button svg { width:20px; height:20px; }
.seg .dot { display:inline-block; width:11px; height:11px; margin:0 6px -1px 0; border-radius:50%; background:var(--d); border:1.5px solid var(--ink); }
.logo-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
.logo-box { display:grid; place-items:center; min-width:104px; height:46px; padding:6px 10px; border:2px dashed var(--line); border-radius:12px;
            background:repeating-conic-gradient(#efeff2 0 25%, #ffffff 0 50%) 0 0 / 12px 12px; font:600 12px var(--mono); color:#6a6052; }
.logo-box img { display:block; max-height:32px; max-width:160px; object-fit:contain; }
.save-line { position:sticky; bottom:0; z-index:3; margin:16px -16px -16px; padding:12px 16px 14px; border-top:1.5px solid var(--line);
             background:var(--card); border-radius:0 0 16px 16px; }
@media (min-width:861px) { .preview-panel { position:sticky; top:78px; } }
@media (max-width:640px) { .save-line { bottom:calc(76px + env(safe-area-inset-bottom)); margin:16px -13px -14px; padding:10px 13px 12px; }
                           .looks { gap:7px; } .look-tip { display:none; } .look-art { height:54px; } }
.row .a-acts { grid-column:1 / -1; margin-top:2px; }
.linkbtn { border:0; background:none; padding:0; color:var(--accent); font:600 12.5px/1.4 system-ui,sans-serif; text-decoration:underline; cursor:pointer; }