/* Abacus app. Same tokens as the landing page: Mona Sans + Chivo Mono, grey ruled sheet, orange only as signal. */
:root {
  --bg: #f3f3f2;
  --paper: #f8f8f7;
  --paper-2: #f1f1f0;
  --white: #fff;
  --rule: #e5e5e3;
  --rule-2: #d8d8d6;
  --ink: #111;
  --ink-2: #3b3b3a;
  --mute: #737371;
  --mute-2: #a1a19f;
  --dark: #1c1c1c;
  --signal: #ff5f1f;
  --signal-2: #ff7428;
  --signal-bg: #fff1e9;
  --pos: #1e9a54;
  --pos-bg: #e8f5ed;
  --neg: #d9383e;
  --neg-bg: #fdecec;
  --side: 244px;
  --sans: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Chivo Mono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }
svg { flex: none; }
.ic { width: 17px; height: 17px; display: block; }
.mono, .num { font-family: var(--mono); letter-spacing: -.02em; }
.mute { color: var(--mute); }
.pos { color: var(--pos); } .neg { color: var(--neg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; border-radius: 5px; }
kbd { font: 500 10.5px/1 var(--mono); padding: 3px 5px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--rule-2), 0 1px 0 var(--rule-2); color: var(--mute); white-space: nowrap; }

/* shell */
.shell { display: grid; grid-template-columns: var(--side) 1fr; height: 100vh; height: 100dvh; }
.side { background: var(--paper-2); border-right: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 0; z-index: 40; }
.side-top { padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.ws { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; text-align: left; width: 100%; }
.ws:hover { background: #e8e8e7; }
.ws .mark { width: 28px; height: 28px; }
.ws .mark svg { width: 100%; height: 100%; display: block; }
.ws-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.ws-t b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-t small { font-size: 11.5px; color: var(--mute); white-space: nowrap; }
.ws-chev { color: var(--mute); }
.side-search { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 8px 0 10px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--rule); color: var(--mute); font-size: 13.5px; }
.side-search .lbl { flex: 1; text-align: left; }
.side-search:hover { box-shadow: 0 0 0 1px var(--rule-2); }
.nav { flex: 1; overflow-y: auto; padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 1px; }
.nav a { display: flex; align-items: center; gap: 11px; height: 34px; padding: 0 10px; border-radius: 8px; color: #4a4a48; font-size: 14px; position: relative; }
.nav a:hover { background: #e9e9e8; color: var(--ink); }
.nav a.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0,0,0,.04); font-weight: 500; }
.nav a .lbl { flex: 1; }
.nav a kbd { opacity: 0; transition: opacity .15s; }
.nav a:hover kbd { opacity: 1; }
.cnt { font-style: normal; font: 500 11.5px var(--mono); color: var(--mute); }
.cnt.sig { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 11px; }
.cnt:empty { display: none; }
.nav-h { margin: 16px 10px 6px; font-size: 12px; color: var(--mute-2); }
.side-foot { padding: 10px 12px 12px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.sync { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); padding: 0 8px; }
.sync i { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); flex: none; }
.me { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; text-align: left; width: 100%; }
.me:hover { background: #e8e8e7; }
.me img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #ddd; }
.me-t { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.me-t b { font-weight: 550; font-size: 13.5px; }
.me-t small { font-size: 11.5px; color: var(--mute); }
.ariadne { align-self: flex-start; font: 500 12.5px/1 var(--sans); padding: 7px 11px; border-radius: 999px; background: rgba(20,22,26,.88); color: #fff; letter-spacing: .01em; box-shadow: 0 0 0 1px rgba(255,255,255,.14); opacity: .92; margin-left: 4px; }
.ariadne b { font-weight: 600; color: #ff8a3d; }
.scrim { position: fixed; inset: 0; background: rgba(15,15,15,.32); z-index: 39; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top { height: 56px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px 0 24px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mute); min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; }
.crumbs a:hover { color: var(--ink); }
.crumbs b { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { color: var(--rule-2); }
.top-r { display: flex; align-items: center; gap: 6px; }
.asof { font-size: 12px; color: var(--mute); margin-right: 8px; }
.icon-btn { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #4a4a48; position: relative; }
.icon-btn:hover { background: #ececeb; color: var(--ink); }
.icon-btn.menu { display: none; }
.dot-n { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 2px var(--paper); }
.dot-n.off { display: none; }
.page { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--paper); outline: none; scroll-behavior: smooth; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 7px; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .15s, box-shadow .15s, color .15s; }
.btn .ic { width: 16px; height: 16px; }
.btn-dark { background: #1f1f1f; color: #f4f4f3; box-shadow: 0 0 0 1px #0c0c0c, inset 0 1px 0 rgba(255,255,255,.13), 0 1px 3px rgba(0,0,0,.18); }
.btn-dark:hover { background: #000; }
.btn-line { background: #fff; box-shadow: 0 0 0 1px var(--rule-2), 0 1px 2px rgba(0,0,0,.04); color: var(--ink-2); }
.btn-line:hover { background: #f6f6f5; color: var(--ink); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: #ececeb; }
.btn-sig { background: var(--signal-2); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.btn-sig:hover { background: var(--signal); }
.btn-danger { background: #fff; color: var(--neg); box-shadow: 0 0 0 1px #f0c9ca; }
.btn-danger:hover { background: var(--neg-bg); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 6px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.mono-b { font-family: var(--mono); font-weight: 400; font-size: 12.5px; }

/* page header */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 26px 28px 22px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.ph h1 { margin: 0; font-size: 26px; font-weight: 550; font-stretch: 106%; letter-spacing: -.03em; line-height: 1.1; }
.ph p { margin: 6px 0 0; color: var(--mute); font-size: 13.5px; }
.ph-a { display: flex; gap: 8px; flex-wrap: wrap; }

/* ruled grid */
.row { display: grid; border-bottom: 1px solid var(--rule); }
.row > * { min-width: 0; }
.row > * + * { border-left: 1px solid var(--rule); }
.r4 { grid-template-columns: repeat(4, 1fr); }
.r3 { grid-template-columns: repeat(3, 1fr); }
.r2 { grid-template-columns: 1fr 1fr; }
.r21 { grid-template-columns: 2fr 1fr; }
.r12 { grid-template-columns: 1fr 2fr; }
.cell { padding: 20px 24px; }
.cell-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 28px; }
.cell-h h2 { margin: 0; font-size: 15px; font-weight: 550; letter-spacing: -.01em; }
.cell-h .sub { font-size: 12.5px; color: var(--mute); }
.cell-h a.more { font-size: 12.5px; color: var(--mute); display: inline-flex; align-items: center; gap: 4px; }
.cell-h a.more:hover { color: var(--ink); }

/* KPI */
.kpi { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 6px; }
.kpi > span { font-size: 12.5px; color: var(--mute); display: flex; align-items: center; gap: 6px; }
.kpi > b { font: 500 28px/1.1 var(--mono); letter-spacing: -.05em; }
.kpi > small { font-size: 12.5px; color: var(--mute); }
.kpi > small .num { color: var(--ink-2); }
.delta { font-family: var(--mono); font-size: 12px; }

/* command bar (prompt box) */
.cmd { position: relative; padding: 34px 28px 30px; border-bottom: 1px solid var(--rule); background: var(--paper-2); overflow: hidden; }
.cmd-meta { max-width: 820px; margin: 0 auto 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cmd-meta h1 { margin: 0; font: 400 24px/1.15 var(--mono); letter-spacing: -.045em; }
.cmd-meta h1 span { color: #8b8b89; }
.cmd-meta p { margin: 0; font-size: 12.5px; color: var(--mute); }
.pb { position: relative; z-index: 0; max-width: 820px; margin: 0 auto; background: #eeeeed; border: 1px solid #dfdfdd; border-radius: 18px; padding: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 40px -32px rgba(40,30,20,.35); }
.halo { position: absolute; z-index: -1; pointer-events: none; }
.pb-chips { display: flex; gap: 7px; padding: 0 0 8px; overflow-x: auto; scrollbar-width: none; }
.pb-chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 31px; padding: 0 4px 0 9px; background: #fff; border: 1px solid #e0e0de; border-radius: 9px; font-size: 13.5px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.chip .ic { width: 16px; height: 16px; }
.chip button { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: #8e8e8c; }
.chip button:hover { background: #f1f1f0; color: var(--ink); }
.chip button .ic { width: 13px; height: 13px; }
.pb-panel { background: #fff; border: 1px solid #e5e5e3; border-radius: 13px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.pb-stage { position: relative; height: 92px; transition: height .45s var(--ease); }
.pb.answering .pb-stage { height: 212px; }
.pb-input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 15px 18px; border: 0; resize: none; outline: none; background: transparent; font-size: 16px; line-height: 1.5; transition: opacity .25s; }
.pb-input::placeholder { color: #a3a3a1; }
.pb-answer { position: absolute; inset: 0; padding: 12px 16px 10px; opacity: 0; visibility: hidden; overflow: auto; transition: opacity .3s, visibility 0s .3s; }
.pb.answering .pb-input { opacity: 0; pointer-events: none; }
.pb.answering .pb-answer { opacity: 1; visibility: visible; transition: opacity .3s; }
.pb-bar { display: flex; align-items: center; gap: 7px; padding: 8px 10px 10px; }
.pb-icon, .pb-seg, .pb-model { height: 33px; border: 1px solid #e0e0de; border-radius: 9px; background: #fff; }
.pb-icon { width: 33px; display: grid; place-items: center; }
.pb-seg { display: flex; padding: 2px; gap: 2px; }
.pb-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 7px; font-size: 13px; color: #8a8a88; }
.pb-seg button .ic { width: 15px; height: 15px; }
.pb-seg button.on { background: #f1f1f0; color: var(--ink); }
.pb-model { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 9px; font-size: 13px; }
.pb-sp { flex: 1; }
.pb-mic { width: 33px; height: 33px; display: grid; place-items: center; color: #6d6d6b; border-radius: 8px; }
.pb-mic:hover { background: #f4f4f3; }
.pb-send { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; background: #1b1b1b; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.2); }
.pb-send:hover { background: #000; }
.sugs { position: relative; z-index: 1; max-width: 820px; margin: 22px auto 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sug { flex: none; white-space: nowrap; height: 30px; padding: 0 11px; border-radius: 15px; font-size: 12.5px; color: var(--ink-2); background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.sug:hover { box-shadow: 0 0 0 1px var(--rule-2); color: var(--ink); }

/* analyst answer (shared with LP) */
.an-q { display: flex; justify-content: flex-end; }
.an-q span { background: #f2f2f1; border-radius: 10px 10px 3px 10px; padding: 5px 10px; font-size: 13px; max-width: 82%; color: var(--ink-2); }
.an-status { display: flex; align-items: center; gap: 9px; margin-top: 10px; font: 12.5px/1.4 var(--mono); color: var(--mute); }
.an-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.an-card { display: grid; grid-template-columns: 1fr 230px; gap: 22px; align-items: start; margin-top: 8px; animation: rise .5s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.an-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.an-text b.num { font-weight: 500; color: var(--ink); }
.an-foot { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--mute); flex-wrap: wrap; }
.an-foot a { color: var(--ink); display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.an-foot a svg { width: 14px; height: 14px; }
.an-foot a:hover { color: var(--signal); }
.an-chart { width: 100%; height: auto; display: block; overflow: visible; }
.an-axis { stroke: #e4e4e2; }
.an-bar { fill: #d8d8d6; transform-box: fill-box; transform-origin: 50% 100%; animation: grow .6s var(--ease) var(--d, 0ms) both; }
.an-bar.on { fill: #1d1d1d; }
.an-bar.sig { fill: var(--signal); }
@keyframes grow { from { transform: scaleY(0); } }
.an-lbl { font: 10px var(--mono); fill: #8d8d8b; }
.an-val { font: 10px var(--mono); fill: var(--signal); }
.an-line { fill: none; stroke: #1d1d1d; stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s var(--ease) forwards; }
.an-line.fc { stroke: #a5a5a3; stroke-dasharray: 3 3; stroke-dashoffset: 0; animation: fadein .5s .7s both; }
.an-dot { fill: var(--signal); animation: fadein .3s .9s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { from { opacity: 0; } }
.an-rows { font-size: 13px; }
.an-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.an-row .num { font-size: 12.5px; }
.an-row .num.mute { color: var(--neg); }
.an-sugs { display: flex; flex-direction: column; gap: 5px; }
.an-sug { text-align: left; font-size: 12.5px; padding: 6px 9px; border-radius: 8px; background: #f4f4f3; color: var(--ink-2); }
.an-sug:hover { background: #ececeb; }

/* lists */
.alerts { list-style: none; margin: 0; padding: 0; }
.alert { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.alert:last-child { border-bottom: 0; }
.alert .a-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.alert .a-ic.sig { background: var(--signal); }
.alert .a-ic .ic { width: 16px; height: 16px; }
.alert b { font-weight: 500; font-size: 13.5px; display: block; }
.alert small { font-size: 12px; color: var(--mute); }
.alert .num { font-size: 13px; }
.alert:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2); }

/* tables */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 500; font-size: 12px; color: var(--mute); padding: 10px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; background: var(--paper); position: sticky; top: 0; z-index: 1; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl th button { display: inline-flex; align-items: center; gap: 4px; color: inherit; font-weight: 500; }
.tbl th button:hover { color: var(--ink); }
.tbl th button .ic { width: 12px; height: 12px; opacity: .4; }
.tbl th button.on { color: var(--ink); }
.tbl th button.on .ic { opacity: 1; }
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; white-space: nowrap; }
.tbl tbody tr { cursor: pointer; transition: background .12s; }
.tbl tbody tr:hover { background: #f2f2f1; }
.tbl tbody tr.sel { background: #fff4ed; }
.tbl td.first, .tbl th.first { padding-left: 28px; }
.tbl td.last, .tbl th.last { padding-right: 28px; }
.tbl .num { font-size: 13px; }
.tbl .desc { display: flex; flex-direction: column; line-height: 1.3; }
.tbl .desc small { color: var(--mute); font-size: 12px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.tbl .who { display: inline-flex; align-items: center; gap: 8px; }
.tbl .who img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #ddd; }
.chk { width: 16px; height: 16px; accent-color: #111; cursor: pointer; vertical-align: middle; }
.tbl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 28px 40px; font-size: 12.5px; color: var(--mute); flex-wrap: wrap; }
.empty { padding: 56px 24px; text-align: center; color: var(--mute); }
.empty b { display: block; color: var(--ink); font-weight: 550; font-size: 15px; margin-bottom: 4px; }
.empty .btn { margin-top: 14px; }

/* pills, tags */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: #ececeb; color: #4a4a48; white-space: nowrap; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.draft { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--mute); }
.pill.sent, .pill.viewed, .pill.scheduled, .pill.processing { background: #ececeb; color: #2f2f2e; }
.pill.overdue, .pill.approval, .pill.frozen { background: var(--signal-bg); color: #c2410c; }
.pill.paid, .pill.completed, .pill.connected { background: var(--pos-bg); color: #157a43; }
.pill.rejected { background: var(--neg-bg); color: var(--neg); }
.cat { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 9px; border-radius: 6px; font-size: 12.5px; background: #fff; box-shadow: 0 0 0 1px var(--rule); color: var(--ink-2); }
.cat:hover { box-shadow: 0 0 0 1px var(--rule-2); }
.cat .ic { width: 12px; height: 12px; color: var(--mute); }
.cat.none { color: #c2410c; box-shadow: 0 0 0 1px #f6cfb8; background: var(--signal-bg); }
.rc { width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--mute); }
.rc:hover { background: #ebebea; color: var(--ink); }
.rc.ok { color: var(--ink); }
.rc.miss { color: var(--signal); }
.rc .ic { width: 16px; height: 16px; }
.who { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.who img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #ddd; flex: none; }
.drawer:focus, .modal:focus, .pal:focus { outline: none; }
.ini { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; font: 600 11px var(--mono); background: #e9e9e8; color: #3b3b3a; flex: none; }

/* filter bar */
.fbar { display: flex; align-items: center; gap: 8px; padding: 12px 28px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.seg { display: inline-flex; background: #ececeb; border-radius: 8px; padding: 2px; gap: 2px; }
.seg button { height: 28px; padding: 0 10px; border-radius: 6px; font-size: 13px; color: var(--mute); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg button em { font-style: normal; font: 11px var(--mono); color: var(--mute); }
.field { height: 32px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px var(--rule); border: 0; padding: 0 10px; font-size: 13px; outline: none; }
.field:focus { box-shadow: 0 0 0 1px #9b9b99, 0 0 0 3px rgba(17,17,17,.06); }
select.field { padding-right: 26px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.5'/%3E%3C/svg%3E") right 7px center / 14px no-repeat; cursor: pointer; }
.search { position: relative; display: inline-flex; align-items: center; }
.search .ic { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--mute); pointer-events: none; }
.search .field { padding-left: 30px; width: 240px; }
.fbar .sp { flex: 1; }
.bulk { display: flex; align-items: center; gap: 10px; padding: 9px 28px; background: #1c1c1c; color: #fff; font-size: 13px; position: sticky; top: 0; z-index: 3; }
.bulk .btn-line { background: #2c2c2c; color: #fff; box-shadow: 0 0 0 1px #3a3a3a; }
.bulk .btn-line:hover { background: #383838; }

/* tabs */
.tabs { display: flex; gap: 2px; padding: 0 24px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { height: 42px; padding: 0 10px; font-size: 13.5px; color: var(--mute); position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); font-weight: 500; }
.tabs button.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--ink); border-radius: 1px; }
.tabs em { font-style: normal; font: 11px var(--mono); color: var(--mute); }

/* charts */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: #e9e9e7; }
.chart .ax { font: 10.5px var(--mono); fill: #8d8d8b; }
.chart .act { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.chart .base { fill: none; stroke: #a3a3a1; stroke-width: 1.6; stroke-dasharray: 4 4; }
.chart .scen { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linejoin: round; }
.chart .area { fill: url(#cg); }
.chart .today { stroke: #cfcfcd; stroke-dasharray: 2 3; }
.chart .tlab { font: 10.5px var(--mono); fill: #6f6f6d; }
.chart .bin { fill: #dcdcda; } .chart .bout { fill: #bdbdbb; }
.chart .bfc { opacity: .45; }
.chart .hb { fill: #1d1d1d; } .chart .hb2 { fill: #d4d4d2; }
.enter .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.2s var(--ease) .1s forwards; }
.enter .growy { transform-box: fill-box; transform-origin: 50% 100%; animation: grow .7s var(--ease) both; }
.enter .growx { transform-box: fill-box; transform-origin: 0 50%; animation: growx .7s var(--ease) both; }
@keyframes growx { from { transform: scaleX(0); } }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--mute); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 0; border-top: 2px solid var(--ink); }
.legend i.b { border-top: 2px dashed #a3a3a1; } .legend i.s { border-top-color: var(--signal); }
.legend i.sq { width: 9px; height: 9px; border: 0; border-radius: 2px; background: #dcdcda; } .legend i.sq2 { width: 9px; height: 9px; border: 0; border-radius: 2px; background: #bdbdbb; }

/* bars (horizontal) */
.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar { display: grid; grid-template-columns: 150px 1fr 110px; gap: 14px; align-items: center; font-size: 13px; }
.hbar .tr { height: 8px; background: #ececeb; border-radius: 4px; overflow: hidden; }
.hbar .tr i { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.hbar .num { text-align: right; font-size: 12.5px; }

/* accounts */
.acct { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.acct:last-child { border-bottom: 0; }
.acct .flag { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px var(--rule); }
.acct b { font-weight: 500; display: block; }
.acct small { color: var(--mute); font-size: 12px; }
.acct .r { text-align: right; display: flex; flex-direction: column; }
.acct .r b { font: 500 13.5px var(--mono); letter-spacing: -.02em; }

/* cards */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0; }
.ctile { padding: 22px 24px 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; }
.ctile:hover { background: #f3f3f2; }
.plastic { position: relative; aspect-ratio: 1.586; border-radius: 12px; padding: 14px 16px; color: #ededeb; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 16px 26px -18px rgba(0,0,0,.55); transition: filter .3s, opacity .3s; }
.plastic::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); pointer-events: none; }
.plastic.graphite { background: linear-gradient(135deg, #3b3b3b 0%, #1b1b1b 45%, #2d2d2d 72%, #141414 100%); }
.plastic.silver { background: linear-gradient(135deg, #d9d9d6 0%, #b5b5b2 40%, #cfcfcc 70%, #a9a9a6 100%); color: #232323; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 16px 26px -18px rgba(0,0,0,.45); }
.plastic.white { background: linear-gradient(135deg, #fbfbfa 0%, #ececea 55%, #f6f6f4 100%); color: #232323; box-shadow: inset 0 0 0 1px #e0e0de, 0 16px 26px -18px rgba(0,0,0,.35); }
.plastic.frozen { filter: grayscale(1) contrast(.85); opacity: .6; }
.pl-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.pl-top b { font-weight: 650; font-stretch: 112%; font-size: 13px; letter-spacing: -.01em; }
.pl-top small { font-size: 11px; opacity: .7; }
.pl-chip { width: 30px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #c9c9c6, #8f8f8c); position: relative; }
.pl-bot { display: flex; justify-content: space-between; align-items: flex-end; position: relative; font-size: 12px; }
.pl-bot .mono { font-size: 13px; letter-spacing: .02em; }
.pl-frz { position: absolute; inset: 0; display: grid; place-items: center; font: 500 12px var(--mono); letter-spacing: .08em; color: #fff; z-index: 2; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.cmeta { margin-top: 16px; }
.cmeta-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cmeta-h > b { font-weight: 550; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cmeta-h .num { font-size: 12.5px; color: var(--mute); white-space: nowrap; flex: none; }
.cmeta-h .num b { color: var(--ink); font-weight: 500; font-size: 12.5px; }
.lim { height: 6px; border-radius: 3px; background: #e9e9e8; margin: 10px 0; overflow: hidden; }
.lim i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.lim i.hi { background: var(--signal); }
.cmeta-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--mute); }
.cmeta-f .who { display: inline-flex; align-items: center; gap: 7px; }
.cmeta-f .who img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.sw { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #d5d5d3; flex: none; transition: background .2s; }
.sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.sw[aria-checked="true"] { background: var(--ink); }
.sw.sig[aria-checked="true"] { background: var(--signal-2); }
.sw[aria-checked="true"]::after { transform: translateX(14px); }
.swl { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }

/* FX routes */
.routes { background: #f1f1f0; border: 1px solid #f3d9ca; border-radius: 8px; padding: 16px 14px 6px; position: relative; overflow: hidden; }
.routes-h { display: flex; align-items: center; justify-content: space-between; }
.routes-t { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 15px; letter-spacing: -.03em; }
.routes-s { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; height: 38px; padding: 0 12px; border: 1px solid #dcdcda; border-radius: 9px; background: #f6f6f5; color: var(--mute); }
.routes-s input { border: 0; outline: 0; background: transparent; font-size: 14px; width: 100%; color: var(--ink); }
.routes-l { background: #f9f9f8; border-radius: 10px; padding: 2px 12px; }
.route { display: grid; grid-template-columns: 36px 1fr 64px auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #e7e7e5; width: 100%; text-align: left; }
.route:last-child { border-bottom: 0; }
.route:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2); }
.route .fl { width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #ececea; display: grid; place-items: center; }
.route .fl svg { width: 22px; height: 22px; }
.route b { display: block; font: 500 14px var(--mono); letter-spacing: -.03em; }
.route .r-s { font: 11.5px var(--mono); color: #77777a; }
.route .r-v { text-align: right; }
.route .r-d { font-size: 12px; color: #8b8b89; }
.route .r-d.dn i { color: var(--neg); } .route .r-d.up i { color: var(--pos); }
.route .r-d i { font-style: normal; font-weight: 600; margin-right: 3px; }
.spark { width: 64px; height: 24px; }
.spark path { fill: none; stroke: #1d1d1d; stroke-width: 1.3; }
.spark path.dn { stroke: var(--neg); } .spark path.up { stroke: var(--pos); }

/* steps (send money) */
.stepper { display: flex; gap: 6px; margin-bottom: 18px; }
.stepper span { flex: 1; height: 3px; border-radius: 2px; background: #e4e4e2; }
.stepper span.on { background: var(--ink); }
.rcp { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 9px; box-shadow: 0 0 0 1px var(--rule); background: #fff; width: 100%; text-align: left; margin-bottom: 8px; }
.rcp:hover { box-shadow: 0 0 0 1px var(--rule-2); }
.rcp.on { box-shadow: 0 0 0 1.5px var(--ink); }
.rcp svg.flag { width: 30px; height: 30px; border-radius: 50%; }
.rcp b { font-weight: 500; display: block; }
.rcp small { font: 11.5px var(--mono); color: var(--mute); }
.amt-box { border-radius: 11px; box-shadow: 0 0 0 1px var(--rule); background: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.amt-box label { font-size: 12px; color: var(--mute); display: block; }
.amt-box input { border: 0; outline: 0; font: 500 26px var(--mono); letter-spacing: -.05em; width: 100%; background: transparent; padding: 0; }
.amt-box .ccy-t { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.amt-box .ccy-t svg { width: 22px; height: 22px; }
.amt-mid { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; font-size: 12.5px; color: var(--mute); border-left: 1px dashed var(--rule-2); margin: 4px 0 4px 26px; }
.amt-mid div { display: flex; justify-content: space-between; }
.amt-mid .num { color: var(--ink-2); }
.lock { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 11px; background: var(--paper-2); margin: 14px 0; }
.ring { width: 54px; height: 54px; flex: none; position: relative; }
.ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring .bgc { stroke: #e2e2e0; }
.ring .fgc { stroke: var(--signal); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 500 13px var(--mono); }
.lock b { display: block; font-weight: 550; }
.lock small { color: var(--mute); font-size: 12.5px; }
.sumry { border-radius: 11px; box-shadow: 0 0 0 1px var(--rule); background: #fff; }
.sumry div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.sumry div:last-child { border-bottom: 0; }
.sumry span:first-child { color: var(--mute); }
.done-st { text-align: center; padding: 24px 0 8px; }
.done-st .okc { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; margin: 0 auto 14px; }
.done-st .okc .ic { width: 24px; height: 24px; }
.done-st b { font-size: 18px; font-weight: 550; display: block; }
.done-st p { color: var(--mute); margin: 6px 0 0; }

/* invoice paper */
.paper { background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px #e3e3e1, 0 18px 40px -30px rgba(0,0,0,.35); padding: 28px 28px 24px; font-size: 12.5px; color: var(--ink-2); }
.paper-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.paper-hd .brand { display: flex; align-items: center; gap: 8px; font-weight: 650; font-stretch: 108%; font-size: 15px; color: var(--ink); }
.paper-hd .lg { width: 22px; height: 22px; border-radius: 6px; background: #2b2b2a; display: grid; place-items: center; color: #fff; font-size: 11px; }
.paper-hd .r { text-align: right; }
.paper-hd .r b { display: block; font: 500 15px var(--mono); color: var(--ink); }
.paper-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 22px 0 18px; }
.paper-meta span { display: block; font-size: 11px; color: var(--mute); }
.paper-meta b { font-weight: 500; color: var(--ink); }
.paper table { width: 100%; border-collapse: collapse; }
.paper th { text-align: left; font-weight: 500; font-size: 11px; color: var(--mute); padding: 6px 0; border-bottom: 1px solid var(--rule); }
.paper td { padding: 8px 0; border-bottom: 1px dashed #e8e8e6; }
.paper th.r, .paper td.r { text-align: right; }
.paper td.num { font-size: 12px; }
.paper-tot { display: flex; justify-content: flex-end; margin-top: 12px; }
.paper-tot div { min-width: 200px; }
.paper-tot p { display: flex; justify-content: space-between; margin: 4px 0; }
.paper-tot p.t { font-size: 14px; color: var(--ink); font-weight: 600; border-top: 1px solid var(--ink); padding-top: 8px; margin-top: 8px; }
.paper-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 11.5px; color: var(--mute); }

/* forms */
.form { display: flex; flex-direction: column; gap: 14px; }
.fl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fl { display: flex; flex-direction: column; gap: 6px; }
.fl > span { font-size: 12.5px; color: var(--mute); }
.fl .field { height: 36px; width: 100%; }
textarea.field { height: auto; padding: 8px 10px; resize: vertical; min-height: 64px; line-height: 1.5; }
.items { display: flex; flex-direction: column; gap: 6px; }
.item { display: grid; grid-template-columns: 1fr 64px 96px 28px; gap: 6px; }
.item .field { height: 34px; width: 100%; min-width: 0; }
.item .field.num { text-align: right; }
.fl-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--paper-2); font-size: 13px; }

/* overlays */
.ov { position: fixed; inset: 0; z-index: 80; }
.ov-bg { position: absolute; inset: 0; background: rgba(15,15,15,.28); animation: fadein .2s both; }
.drawer { position: absolute; right: 0; top: 0; bottom: 0; width: min(520px, 100%); background: var(--paper); box-shadow: -1px 0 0 var(--rule), -30px 0 60px -30px rgba(0,0,0,.3); display: flex; flex-direction: column; animation: slidein .32s var(--ease) both; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.dr-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 16px 24px; border-bottom: 1px solid var(--rule); }
.dr-h h2 { margin: 0; font-size: 18px; font-weight: 550; letter-spacing: -.02em; }
.dr-h p { margin: 3px 0 0; font-size: 12.5px; color: var(--mute); }
.dr-b { flex: 1; overflow-y: auto; }
.dr-sec { padding: 18px 24px; border-bottom: 1px solid var(--rule); }
.dr-sec h3 { margin: 0 0 12px; font-size: 13px; font-weight: 550; }
.dr-f { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--rule); background: var(--paper); flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; font-size: 13.5px; align-items: center; }
.kv > span { color: var(--mute); font-size: 12.5px; }
.big-amt { font: 500 30px var(--mono); letter-spacing: -.05em; margin: 2px 0 0; }
.modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); max-height: calc(100% - 48px); background: var(--paper); border-radius: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 40px 80px -30px rgba(0,0,0,.45); display: flex; flex-direction: column; animation: pop .25s var(--ease) both; overflow: hidden; }
.modal.wide { width: min(1080px, calc(100% - 32px)); }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } }
.md-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 14px 22px; border-bottom: 1px solid var(--rule); }
.md-h h2 { margin: 0; font-size: 16px; font-weight: 550; }
.md-b { padding: 20px 22px; overflow-y: auto; }
.md-f { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 18px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.md-f .sp { flex: 1; }
.inv-split { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 0; flex: 1; overflow: hidden; }
.inv-split > .md-b { border-right: 1px solid var(--rule); }
.inv-prev { background: var(--paper-2); padding: 24px; overflow-y: auto; }
.inv-prev .lbl-p { font-size: 12px; color: var(--mute); margin-bottom: 10px; display: flex; justify-content: space-between; }

/* menus, popovers */
.menu-pop { position: fixed; z-index: 90; min-width: 220px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 16px 40px -12px rgba(0,0,0,.28); padding: 5px; animation: pop2 .16s var(--ease) both; }
@keyframes pop2 { from { opacity: 0; transform: translateY(-4px); } }
.menu-pop button, .menu-pop a { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; height: 34px; padding: 0 10px; border-radius: 6px; font-size: 13.5px; color: var(--ink-2); }
.menu-pop button:hover, .menu-pop a:hover, .menu-pop .hl { background: #f2f2f1; color: var(--ink); }
.menu-pop .lbl { flex: 1; }
.menu-pop hr { border: 0; border-top: 1px solid var(--rule); margin: 5px 2px; }
.menu-pop .mh { font-size: 11.5px; color: var(--mute-2); padding: 6px 10px 4px; }
.menu-pop .ariadne { margin: 6px 6px 4px; display: inline-block; }
.menu-pop .danger { color: var(--neg); }
.notif { width: 360px; padding: 0; }
.notif-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rule); font-weight: 550; }
.notif-h button { width: auto; height: auto; padding: 0; font-size: 12.5px; color: var(--mute); font-weight: 400; }
.notif-h button:hover { background: none; color: var(--ink); }
.notif-l { max-height: 380px; overflow-y: auto; padding: 4px; }
.notif-l button { height: auto; padding: 10px; align-items: flex-start; gap: 10px; }
.notif-l .nd { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; background: transparent; }
.notif-l .unread .nd { background: var(--signal); }
.notif-l span.t { flex: 1; font-size: 13px; line-height: 1.45; }
.notif-l small { display: block; color: var(--mute); font-size: 11.5px; margin-top: 2px; }

/* palette */
.pal { position: absolute; left: 50%; top: 12vh; transform: translateX(-50%); width: min(640px, calc(100% - 24px)); background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 40px 90px -30px rgba(0,0,0,.5); overflow: hidden; animation: pop3 .2s var(--ease) both; }
@keyframes pop3 { from { opacity: 0; transform: translate(-50%, -6px); } }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.pal-in input { flex: 1; height: 54px; border: 0; outline: 0; font-size: 16px; background: transparent; }
.pal-l { max-height: 420px; overflow-y: auto; padding: 6px; }
.pal-g { font-size: 11.5px; color: var(--mute-2); padding: 10px 10px 4px; }
.pal-i { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 8px; text-align: left; font-size: 14px; color: var(--ink-2); }
.pal-i .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-i small { color: var(--mute); font-size: 12px; }
.pal-i.on { background: #f2f2f1; color: var(--ink); }
.pal-i .ask { color: var(--signal); }
.pal-f { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--rule); font-size: 11.5px; color: var(--mute); background: var(--paper); }

/* toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 10px; background: #1b1b1b; color: #f2f2f1; font-size: 13.5px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.5); animation: tin .3s var(--ease) both; max-width: min(440px, calc(100vw - 24px)); }
.toast.out { animation: tout .25s both; }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }
@keyframes tout { to { opacity: 0; transform: translateY(6px); } }
.toast .ok { width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; flex: none; }
.toast .ok .ic { width: 12px; height: 12px; }
.toast button { color: #ff9a62; font-weight: 550; padding: 4px 8px; border-radius: 6px; }
.toast button:hover { background: #2c2c2c; }

/* tooltips */
[data-tip] { position: relative; }
.tip { position: fixed; z-index: 110; pointer-events: none; background: #1b1b1b; color: #f2f2f1; font-size: 12px; padding: 5px 8px; border-radius: 6px; white-space: pre; animation: fadein .12s both; }

/* settings */
.set { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100% - 100px); }
.set-nav { border-right: 1px solid var(--rule); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; }
.set-nav button { text-align: left; height: 34px; padding: 0 10px; border-radius: 7px; font-size: 13.5px; color: var(--ink-2); }
.set-nav button:hover { background: #efefee; }
.set-nav button.on { background: #fff; box-shadow: 0 0 0 1px var(--rule); color: var(--ink); font-weight: 500; }
.set-b { min-width: 0; }
.set-sec { padding: 22px 28px; border-bottom: 1px solid var(--rule); }
.set-sec h2 { margin: 0 0 4px; font-size: 15px; font-weight: 550; }
.set-sec > p { margin: 0 0 16px; color: var(--mute); font-size: 13px; }
.set-row { display: grid; grid-template-columns: 220px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.set-row:last-child { border-bottom: 0; }
.set-row > span:first-child { color: var(--mute); }
.inline { border: 0; background: transparent; padding: 4px 6px; margin: -4px -6px; border-radius: 6px; outline: none; font-size: 13.5px; width: 100%; max-width: 360px; }
.inline:hover { background: #efefee; }
.inline:focus { background: #fff; box-shadow: 0 0 0 1px #9b9b99; }
.integ { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.integ > div { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.integ .ini { width: 34px; height: 34px; }
.integ b { font-weight: 550; display: block; }
.integ small { color: var(--mute); font-size: 12px; }
.integ .grow { flex: 1; min-width: 0; }

/* reports */
.rep { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100% - 100px); }
.rep-l { border-right: 1px solid var(--rule); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.rep-l button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 8px; }
.rep-l button:hover { background: #efefee; }
.rep-l button.on { background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.rep-l b { font-weight: 500; font-size: 13.5px; }
.rep-l small { color: var(--mute); font-size: 12px; }
.rep-b { min-width: 0; }
.pl td.r, .pl th.r { text-align: right; }
.pl tr.sub td { font-weight: 600; background: #f3f3f2; }
.pl tr.tot td { font-weight: 600; border-top: 1px solid var(--ink); }
.pl tbody tr { cursor: default; }

/* cash flow */
.drivers { display: flex; flex-direction: column; gap: 10px; }
.drv { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.stepn { display: inline-flex; align-items: center; box-shadow: 0 0 0 1px var(--rule-2); border-radius: 7px; background: #fff; }
.stepn button { width: 28px; height: 30px; color: var(--mute); }
.stepn button:hover { color: var(--ink); }
.stepn input { width: 56px; height: 30px; border: 0; text-align: center; font: 500 13px var(--mono); outline: none; background: transparent; }
.scn { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.scn:last-child { border-bottom: 0; }
.scn span.t { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.35; }
.scn small { color: var(--mute); font-size: 12px; }
.cf-row.fc td:first-child { color: var(--mute); }
.tag-a { font: 10.5px var(--mono); color: var(--mute); margin-left: 6px; }

/* dropzone */
.drop { border: 1.5px dashed #cfcfcd; border-radius: 10px; padding: 26px 16px; text-align: center; color: var(--mute); font-size: 13px; cursor: pointer; transition: border-color .2s, background .2s; display: block; width: 100%; }
.drop:hover { border-color: #9b9b99; background: #f3f3f2; }
.drop b { color: var(--ink); font-weight: 550; }
.prog { height: 4px; border-radius: 2px; background: #e6e6e4; overflow: hidden; margin-top: 12px; }
.prog i { display: block; height: 100%; width: 0; background: var(--signal); transition: width 1s linear; }
.rcpt-img { position: relative; border-radius: 10px; overflow: hidden; background: #e9e9e8; aspect-ratio: 4 / 3; }
.rcpt-img img { width: 100%; height: 100%; object-fit: cover; }
.rcpt-img span { position: absolute; left: 10px; bottom: 10px; font-size: 12px; background: rgba(255,255,255,.95); padding: 5px 9px; border-radius: 7px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; padding: 7px 0; font-size: 13px; position: relative; }
.timeline li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #cfcfcd; margin-top: 5px; }
.timeline li.on::before { background: var(--ink); }
.timeline li.sig::before { background: var(--signal); }
.timeline li::after { content: ''; position: absolute; left: 3.5px; top: 20px; bottom: -6px; width: 1px; background: #e0e0de; }
.timeline li:last-child::after { display: none; }
.timeline small { color: var(--mute); font-size: 12px; }
.chain { display: inline-flex; align-items: center; }
.chain img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--paper); margin-left: -6px; }
.chain img:first-child { margin-left: 0; }
.chain img.wait { filter: grayscale(1); opacity: .5; }
.chain .ck { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; margin-left: -8px; margin-top: 14px; box-shadow: 0 0 0 2px var(--paper); }
.chain .ck .ic { width: 9px; height: 9px; }
.comment { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; }
.comment img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.comment small { color: var(--mute); font-size: 11.5px; }

/* responsive */
@media (max-width: 1199px) {
  :root { --side: 64px; }
  .side .lbl, .side .ws-t, .side .ws-chev, .side kbd, .side .cnt, .nav-h, .side .ariadne { display: none; }
  .side-top { align-items: center; padding: 12px 8px 8px; }
  .ws { justify-content: center; padding: 6px; width: auto; }
  .side-search { width: 40px; padding: 0; justify-content: center; }
  .nav { padding: 6px 8px; align-items: center; }
  .nav a { width: 44px; padding: 0; justify-content: center; }
  .nav-h { display: block; height: 1px; margin: 10px 8px; background: var(--rule); width: 30px; overflow: hidden; color: transparent; }
  .sync { justify-content: center; padding: 0; }
  .me { justify-content: center; padding: 6px; }
  .side-foot { align-items: center; }
  .r4 { grid-template-columns: 1fr 1fr; }
  .r4 > *:nth-child(3) { border-left: 0; }
  .r4 > *:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .r21, .r12 { grid-template-columns: 1fr; }
  .r21 > * + *, .r12 > * + * { border-left: 0; border-top: 1px solid var(--rule); }
  .inv-split { grid-template-columns: 1fr; overflow-y: auto; }
  .inv-split > .md-b { border-right: 0; border-bottom: 1px solid var(--rule); overflow: visible; }
  .inv-prev { overflow: visible; }
  .asof { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform .28s var(--ease); box-shadow: 20px 0 50px -20px rgba(0,0,0,.3); }
  .shell.nav-open .side { transform: none; }
  .side .lbl, .side .ws-t, .side .ws-chev, .side .cnt, .side .ariadne { display: revert; }
  .side .cnt:empty { display: none; }
  .side kbd { display: none; }
  .side-top { align-items: stretch; padding: 12px; }
  .ws { justify-content: flex-start; width: 100%; padding: 7px 8px; }
  .ws-t { display: flex !important; }
  .side-search { width: auto; padding: 0 8px 0 10px; justify-content: flex-start; }
  .side-search kbd { display: none; }
  .nav { padding: 6px 12px; align-items: stretch; }
  .nav a { width: auto; padding: 0 10px; justify-content: flex-start; height: 40px; }
  .nav-h { display: block; width: auto; height: auto; background: none; color: var(--mute-2); margin: 16px 10px 6px; }
  .sync { justify-content: flex-start; padding: 0 8px; }
  .me { justify-content: flex-start; }
  .me-t { display: flex !important; }
  .side-foot { align-items: stretch; }
  .side .ariadne { display: inline-block; align-self: flex-start; }
  .icon-btn.menu { display: grid; margin-left: -8px; }
  .top { padding: 0 12px 0 14px; gap: 6px; }
  .new-btn .lbl { display: none; }
  .new-btn { width: 34px; padding: 0; }
  .ph { padding: 20px 16px 16px; }
  .ph h1 { font-size: 23px; }
  .ph-a { width: 100%; }
  .cell, .kpi { padding: 16px; }
  .kpi > b { font-size: 22px; }
  .r2, .r3 { grid-template-columns: 1fr; }
  .r2 > * + *, .r3 > * + * { border-left: 0; border-top: 1px solid var(--rule); }
  .cmd { padding: 20px 12px 20px; }
  .cmd-meta h1 { font-size: 19px; }
  .pb { padding: 6px; border-radius: 15px; }
  .pb.answering .pb-stage { height: 398px; }
  .an-foot > span { display: none; }
  .an-card { grid-template-columns: 1fr; gap: 12px; }
  .an-chart { max-width: 260px; }
  .pb-seg button span, .pb-model span, .pb-model .chev { display: none; }
  .pb-seg button { padding: 0 8px; }
  .sugs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding: 0 12px; }
  .sugs::-webkit-scrollbar { display: none; }
  .fbar { padding: 10px 16px; }
  .search .field { width: 100%; }
  .search { flex: 1 1 100%; }
  .tbl td.first, .tbl th.first { padding-left: 16px; }
  .tbl td.last, .tbl th.last { padding-right: 16px; }
  .tbl-foot { padding: 12px 16px 32px; }
  .tabs { padding: 0 10px; }
  .hbar { grid-template-columns: 96px 1fr 84px; gap: 8px; }
  .drawer { width: 100%; top: auto; height: 92%; border-radius: 14px 14px 0 0; animation: slideup .32s var(--ease) both; }
  @keyframes slideup { from { transform: translateY(40px); opacity: 0; } }
  .modal, .modal.wide { width: 100%; max-height: 94%; top: auto; bottom: 0; left: 0; transform: none; border-radius: 14px 14px 0 0; animation: slideup .3s var(--ease) both; }
  .kv { grid-template-columns: 110px 1fr; }
  .set, .rep { grid-template-columns: 1fr; }
  .set-nav, .rep-l { border-right: 0; border-bottom: 1px solid var(--rule); flex-direction: row; overflow-x: auto; padding: 8px 10px; scrollbar-width: none; }
  .set-nav button { flex: none; }
  .rep-l button { flex: none; }
  .set-sec { padding: 18px 16px; }
  .set-row { grid-template-columns: 1fr; gap: 6px; }
  .notif { width: calc(100vw - 24px); }
  .toasts { left: 12px; right: 12px; align-items: stretch; bottom: 12px; }
  .cgrid { grid-template-columns: 1fr; }
  .ctile { border-right: 0; padding: 18px 16px; }
  .item { grid-template-columns: 1fr 52px 80px 28px; }
  .fl-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}