/* Nagamon — base: tokens, reset, type, buttons, chips, cards, tables */
:root{
  --canvas:#EFEFED;
  --surface:#FCFCFB;
  --surface-2:#F6F6F4;
  --surface-3:#E8E8E5;
  --ink:#121212;
  --ink-soft:#3D3D3D;
  --muted:#4F4F4C;
  --quiet:#8E8E89;
  --line:rgba(18,18,18,0.08);
  --line-soft:rgba(18,18,18,0.045);
  --rust:#B1412A;
  --ember:#FF5C3D;
  --mint:#8FE3C4;
  --mint-deep:#1B5E4A;
  --mint-wash:#D5EEE4;
  --loss-wash:rgba(177,65,42,.10);
  --radius-control:999px;
  --radius-card:22px;
  --radius-inner:14px;
  --shadow-card:0 1px 0 rgba(18,18,18,.04);
  --shadow-float:0 24px 60px -30px rgba(18,18,18,.35);
  --font:'Urbanist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;font-weight:500;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-weight:600;letter-spacing:-0.035em;line-height:1.1}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}
::selection{background:var(--mint);color:var(--ink)}

.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i-sm{width:16px;height:16px}
.i-xs{width:14px;height:14px}
.i-fill{fill:currentColor;stroke:none}

.num{font-variant-numeric:tabular-nums;letter-spacing:-0.03em}
.muted{color:var(--muted)}
.quiet{color:var(--quiet)}
.small{font-size:13px}
.tiny{font-size:11.5px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:0}
.row{display:flex;align-items:center;gap:12px}
.row-b{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stack{display:flex;flex-direction:column;gap:12px}
.grow{flex:1;min-width:0}
.wrap{flex-wrap:wrap}
.right{margin-left:auto}
.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hide{display:none!important}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:var(--radius-control);font-weight:600;font-size:14px;letter-spacing:-0.01em;white-space:nowrap;border:1px solid transparent;transition:background .15s,transform .15s,border-color .15s,color .15s}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-soft)}
.btn-ghost{border-color:var(--line);background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--surface);border-color:rgba(18,18,18,.18)}
.btn-ember{background:var(--ember);color:var(--ink)}
.btn-ember:hover{background:#ff7155}
.btn-mint{background:var(--mint);color:var(--ink)}
.btn-danger{border-color:var(--rust);color:var(--rust);background:transparent}
.btn-danger:hover{background:var(--loss-wash)}
.btn-sm{height:32px;padding:0 14px;font-size:13px}
.btn-lg{height:52px;padding:0 28px;font-size:16px}
.btn-block{width:100%}
.btn-icon{width:34px;height:34px;padding:0;border-radius:50%}
.btn[disabled]{opacity:.5;pointer-events:none}
.link{font-weight:600;border-bottom:1px solid var(--line);padding-bottom:1px}
.link:hover{border-color:var(--ink)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--radius-control);font-size:12px;font-weight:600;letter-spacing:-0.005em;white-space:nowrap;background:var(--surface-3);color:var(--muted)}
.chip-gain{background:var(--mint-wash);color:var(--mint-deep)}
.chip-loss{background:var(--loss-wash);color:var(--rust)}
.chip-ink{background:var(--ink);color:#fff}
.chip-line{background:transparent;border:1px solid var(--line);color:var(--muted)}
.chip-dash{background:transparent;border:1px dashed rgba(18,18,18,.25);color:var(--muted)}
.card-dark .chip-gain{background:rgba(143,227,196,.16);color:var(--mint)}
.card-dark .chip-loss{background:rgba(255,92,61,.16);color:var(--ember)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--quiet);flex:none;display:inline-block}
.dot-fb{background:var(--ink)}
.dot-ig{background:var(--ember)}
.dot-tt{background:var(--mint-deep)}
.dot-on{background:var(--mint-deep)}
.dot-off{background:var(--quiet)}
.dot-warn{background:var(--rust)}

/* cards */
.card{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);border:1px solid var(--line-soft);padding:22px}
.card-2{background:var(--surface-3);border-color:transparent}
.card-inset{background:var(--surface-2);border-radius:var(--radius-inner);padding:14px}
.card-dark{background:var(--ink);color:#fff;border-color:transparent}
.card-dark .quiet,.card-dark .muted{color:rgba(255,255,255,.58)}
.card-title{font-size:16px;font-weight:600;letter-spacing:-0.02em}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.hr{height:1px;background:var(--line);border:0;margin:0}
.hr-dash{border:0;border-top:1px dashed var(--line);margin:0}

/* segmented + switch */
.seg{display:inline-flex;background:var(--surface-3);border-radius:var(--radius-control);padding:4px;gap:2px}
.seg button{height:32px;padding:0 15px;border-radius:var(--radius-control);font-size:13px;font-weight:600;color:var(--muted);transition:background .15s,color .15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(18,18,18,.08)}
.switch{position:relative;width:40px;height:24px;border-radius:var(--radius-control);background:var(--surface-3);transition:background .2s;flex:none;border:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(18,18,18,.25);transition:transform .2s}
.switch[aria-checked="true"]{background:var(--ink)}
.switch[aria-checked="true"]::after{transform:translateX(16px);background:var(--mint)}

/* fields */
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.label{font-size:12px;font-weight:600;color:var(--muted)}
.input,.textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-inner);padding:0 16px;height:48px;font-size:15px;font-weight:500;transition:border-color .15s}
.textarea{height:auto;min-height:110px;padding:14px 16px;resize:vertical;line-height:1.5}
.input:focus,.textarea:focus{outline:0;border-color:var(--ink)}
.input::placeholder,.textarea::placeholder{color:var(--quiet)}
.pill{height:34px;padding:0 14px;border-radius:var(--radius-control);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted);background:transparent;display:inline-flex;align-items:center;gap:6px}
.pill:hover{border-color:rgba(18,18,18,.25)}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--quiet);text-align:left;padding:0 12px 12px;white-space:nowrap}
.tbl td{padding:13px 12px;border-top:1px solid var(--line-soft);vertical-align:middle}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl .r{text-align:right}
.tbl tfoot td{background:var(--ink);color:#fff;font-weight:600;border-top:0}
.tbl tfoot td:first-child{border-radius:14px 0 0 14px}
.tbl tfoot td:last-child{border-radius:0 14px 14px 0}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* tooltips */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:10px;white-space:nowrap;z-index:50;pointer-events:none;letter-spacing:0}

/* progress / bars */
.bar{height:6px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:6px;background:var(--ink)}
.bar-mint>i{background:var(--mint-deep)}
.card-dark .bar{background:rgba(255,255,255,.14)}
.card-dark .bar>i{background:var(--mint)}

/* posters: abstract typographic thumbnails */
.poster{position:relative;container-type:inline-size;overflow:hidden;border-radius:14px;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:space-between;padding:9%;gap:2%;color:#fff;background:var(--ink)}
.poster::before{content:"";position:absolute;right:-18cqw;top:-18cqw;width:62cqw;height:62cqw;border-radius:50%;background:rgba(255,255,255,.10)}
.poster::after{content:"";position:absolute;left:-10cqw;bottom:-24cqw;width:70cqw;height:70cqw;border-radius:50%;border:1.5cqw solid rgba(255,255,255,.14)}
.poster>*{position:relative;z-index:1}
.poster .k{font-size:6cqw;font-weight:600;letter-spacing:.02em;opacity:.8}
.poster .h{font-size:15cqw;font-weight:700;letter-spacing:-0.045em;line-height:.95;display:block;max-width:80%}
.poster .m{font-size:5.4cqw;font-weight:600;display:flex;align-items:center;gap:2cqw;opacity:.9}
.poster .m::before{content:"";width:5cqw;height:5cqw;border-radius:30%;background:currentColor}
.poster.r45{aspect-ratio:4/5}
.poster.r916{aspect-ratio:9/16}
.poster.r169{aspect-ratio:16/9}
.p-ink{background:var(--ink);color:var(--mint)}
.p-mint{background:var(--mint);color:var(--ink)}
.p-mint::before{background:rgba(255,255,255,.35)}
.p-mint::after{border-color:rgba(18,18,18,.12)}
.p-ember{background:linear-gradient(150deg,var(--ember),var(--rust));color:#fff}
.p-sand{background:var(--surface-3);color:var(--ink)}
.p-sand::before{background:var(--ember);opacity:.9}
.p-sand::after{border-color:rgba(18,18,18,.12)}
.p-green{background:linear-gradient(160deg,var(--mint-deep),var(--ink));color:var(--mint-wash)}
.p-split{background:linear-gradient(135deg,var(--ink) 52%,var(--rust) 52%);color:#fff}
.p-wash{background:linear-gradient(160deg,var(--mint-wash),var(--mint));color:var(--mint-deep)}
.p-wash::before{background:rgba(255,255,255,.4)}
.p-wash::after{border-color:rgba(27,94,74,.2)}

/* skeleton */
.skel{border-radius:14px;aspect-ratio:1/1;background:linear-gradient(100deg,var(--surface-3) 30%,var(--surface-2) 50%,var(--surface-3) 70%);background-size:220% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-120% 0}}

/* toast + overlays */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--radius-control);font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:200;box-shadow:var(--shadow-float);display:flex;gap:10px;align-items:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
.overlay{position:fixed;inset:0;background:rgba(18,18,18,.38);display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;z-index:150}
.overlay.open{display:flex}
.overlay.center{align-items:center;padding-top:16px}
.panel{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-float);width:100%;max-width:560px;padding:24px;max-height:80vh;overflow:auto}
.search-box{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:10px}
.search-box input{flex:1;border:0;background:transparent;font-size:18px;font-weight:500;outline:0;letter-spacing:-0.01em}
.search-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;font-weight:600;font-size:14px}
.search-item:hover,.search-item:focus-visible{background:var(--surface-2)}
.kbd{font-size:11px;font-weight:600;border:1px solid var(--line);border-radius:7px;padding:2px 7px;color:var(--quiet);background:var(--surface-2)}