@font-face{font-family:YottaOnest;src:url('/fonts/onest.ttf') format('truetype');font-weight:100 900;font-display:swap}
.yt{--bg:#0b0b0b;--surface:#161616;--surface-2:#232323;--ink:#f2f2f2;--muted:#a6a6a6;--accent:#ffffff;--accent-ink:#0b0b0b;--warn:#ffffff;--late:#ffffff;background:var(--bg);color:var(--ink);color-scheme:dark;font-family:YottaOnest,sans-serif;font-size:16px;line-height:1.5;font-variant-numeric:tabular-nums;border-radius:8px;padding:24px;min-width:0}
.yt *{box-sizing:border-box}
.yt [hidden]{display:none!important}
.yt h1,.yt h2,.yt h3,.yt p{margin:0}
.yt h1{font:650 26px/1.25 YottaOnest,sans-serif;letter-spacing:-.025em}
.yt h2{font:600 19px/1.4 YottaOnest,sans-serif}
.yt h3{font:600 17px/1.4 YottaOnest,sans-serif;margin-bottom:12px}
.yt button,.yt input,.yt textarea,.yt select{font:inherit;letter-spacing:inherit}
.yt :is(button,input,select,textarea,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.yt-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.yt-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:10px 16px;border:1px solid var(--muted);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;text-align:center}
.yt-button:hover{background:var(--surface-2)}
.yt-button[data-yt=new]{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:650;white-space:nowrap}
.yt-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.yt-stat{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;background:var(--surface);border-radius:8px;min-width:0}
.yt-stat>span,.yt-stat small{color:var(--muted);font-size:15px}
.yt-stat strong{font-size:clamp(22px,2.4vw,32px);line-height:1.25;font-weight:600;white-space:nowrap}
.yt-stat small{white-space:nowrap}
.yt .yt-conversion{margin:16px 0 24px;color:var(--muted);font-size:15px}
.yt-tabs{display:flex;gap:8px;margin-bottom:24px}
.yt-tabs .yt-button{flex:1 1 0;min-width:0;max-width:160px}
.yt-tabs [aria-selected=true],.yt-chips [aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.yt-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.yt-column{min-width:0}
.yt-column>h2{display:flex;justify-content:space-between;gap:8px;margin-bottom:12px;font-size:16px}
.yt-column>h2 span{color:var(--muted)}
.yt-card{padding:16px;background:var(--surface);border-radius:8px;margin-bottom:12px;overflow-wrap:anywhere;cursor:pointer}
.yt-card:hover{background:var(--surface-2)}
.yt-card p{margin-top:10px;font-size:15px}
.yt-company{display:block;min-height:44px;min-width:44px;text-align:left;font-size:19px!important;font-weight:600!important;line-height:1.3!important;width:100%;border-radius:8px;color:var(--ink)}
.yt-muted{color:var(--muted)}
.yt .yt-late{color:var(--accent-ink);background:var(--ink);border-radius:6px;padding:4px 8px;font-weight:600}
.yt .yt-warn{color:var(--ink);font-weight:600}
.yt-tag{display:inline-block;font-size:15px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;margin-top:12px}
.yt-card>.yt-button{display:flex;width:100%;margin-top:16px}
.yt .yt-empty{padding:20px 0;color:var(--muted)}
.yt-lost-list{margin-top:24px}
.yt-lost-list summary{min-height:44px;padding:10px 0;cursor:pointer}
.yt-chips{display:none}
.yt-clients,.yt-partners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.yt-usage{margin-top:16px;font-size:15px;--yt-bar:#7a7a7a}
.yt-usage.yt-warn{--yt-bar:var(--warn)}
.yt-usage.yt-late{--yt-bar:var(--late)}
.yt-usage progress{display:block;appearance:none;width:100%;height:8px;margin-top:8px;border:0;border-radius:8px;overflow:hidden;background:var(--bg);accent-color:var(--yt-bar)}
.yt-usage progress::-webkit-progress-bar{background:var(--bg);border-radius:8px}
.yt-usage progress::-webkit-progress-value{background:var(--yt-bar);border-radius:8px}
.yt-usage progress::-moz-progress-bar{background:var(--yt-bar);border-radius:8px}
.yt-overlay{position:fixed;inset:0;z-index:35;background:#0008}
.yt-panel{position:absolute;right:0;top:0;bottom:0;width:440px;max-width:100%;overflow-y:auto;overscroll-behavior:contain;padding:24px 24px calc(24px + env(safe-area-inset-bottom));background:var(--bg);border-radius:8px 0 0 8px;animation:yt-enter 200ms ease-out}
.yt-panel.yt-settled{animation:none}
.yt-panel>.yt-header{position:sticky;top:-24px;background:var(--bg);padding:16px 0;z-index:1}
.yt-panel section{margin-top:24px}
.yt-field{display:flex;flex-direction:column;gap:8px;font-size:15px;margin-bottom:16px;color:var(--muted)}
.yt-field input,.yt-field select,.yt-field textarea{width:100%;min-width:0;min-height:44px;border:1px solid var(--muted);border-radius:8px;background:var(--surface);color:var(--ink);padding:10px 12px;font-size:16px}
.yt-field textarea{resize:vertical}
.yt-roles,.yt-payment{border:1px solid var(--muted);border-radius:8px;padding:12px;margin:16px 0}
.yt-roles legend,.yt-payment legend{padding:0 6px;color:var(--muted);font-size:15px}
.yt-roles label{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.yt-roles input{width:24px;height:24px;accent-color:var(--accent)}
.yt-actions{display:flex;justify-content:space-between;gap:16px;margin-top:24px}
.yt-actions [data-yt=delete]{color:var(--late)}
.yt-partner-form{max-width:440px;margin:20px 0;padding:16px;background:var(--surface);border-radius:8px}
@keyframes yt-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(max-width:999px){.yt-columns{display:block}.yt-column{display:none}.yt-column.yt-selected{display:block}.yt-chips{display:flex;overflow-x:auto;gap:8px;padding:4px 4px 12px;margin-bottom:12px}.yt-chips .yt-button{flex:none}.yt-lost-list{display:none}.yt-lost-list.yt-selected{display:block}.yt-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.yt{padding:16px}.yt h1{font-size:22px}.yt-header{gap:8px}.yt-stat{padding:12px}.yt-clients,.yt-partners{grid-template-columns:1fr}.yt-panel{width:100%;border-radius:0;padding-top:env(safe-area-inset-top,0px)}.yt-tabs{gap:8px}.yt-tabs .yt-button{padding:10px 6px;max-width:none}.yt-stat strong{font-size:20px}.yt-stat small{font-size:13px}}
@media(prefers-reduced-motion:reduce){.yt *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Standalone Yotta shell. */
:root{--bg:#0b0b0b;--surface:#161616;--surface-2:#232323;--ink:#f2f2f2;--muted:#a6a6a6;--accent:#ffffff;--warn:#ffffff;--late:#ffffff;color-scheme:dark;font-family:YottaOnest,sans-serif;background:var(--bg);color:var(--ink)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-size:16px;line-height:1.5}
[hidden]{display:none!important}
button,input{font:inherit}
a{color:var(--accent)}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:disabled{opacity:.55;cursor:wait}
.app-shell{max-width:1280px;margin:auto;padding:24px 32px 96px;min-width:0}
.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}
.app-header a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.brand{font-size:28px;font-weight:600;letter-spacing:-.04em;gap:10px;color:var(--ink)}
.brand span{font-size:16px;font-weight:400;letter-spacing:0;color:var(--muted)}
#logout{padding:8px}
#app>.yt{padding:0}
.loading{color:var(--muted)}
.login{max-width:380px;margin:clamp(48px,15vh,150px) auto 0}
.login h1{font-size:32px;font-weight:600;letter-spacing:-.04em;margin:0 0 32px}
.login button{width:100%;background:var(--accent);color:var(--bg);border-color:var(--accent)}
.login-error{color:var(--ink);font-weight:600;min-height:24px;margin:12px 0}
#save-status{font-size:12px;color:var(--muted);margin-top:32px;min-height:18px}
.app-toast{position:fixed;z-index:50;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:16px;padding:12px 16px;border:1px solid var(--muted);border-radius:8px;background:var(--surface-2);box-shadow:0 8px 32px #0004;overflow-wrap:anywhere}
.app-toast button{flex-shrink:0}
.yt-company{background:transparent;border:0;padding:0;cursor:pointer}
.yt-stat strong,.yt-stat small{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.yt-payment,.yt-roles{min-width:0}
.yt-panel{scroll-padding:88px 0 24px}
@media(max-width:600px){.app-shell{padding:16px 16px 96px}.app-header{margin-bottom:24px}.yt-header{flex-wrap:wrap}.yt-chips{flex-wrap:wrap;overflow:visible;padding:4px 0 12px}.yt-chips .yt-button{flex:1 1 auto;padding:10px}.app-toast{flex-wrap:wrap;gap:8px}.yt-panel>.yt-header{top:0}.yt-stat{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.yt .yt-usage.yt-late{background:none;color:var(--ink);padding:0;font-weight:400}
.yt .yt-usage.yt-late>span{background:var(--ink);color:var(--accent-ink);border-radius:4px;padding:2px 6px;font-weight:600}
.who{display:flex;gap:16px;align-items:center}
#who{color:var(--muted)}