/* Deltalog app stylesheet: shared by every app screen. Same look as the website: black page, #0F0F0F cards with a soft inner glow. */
body{margin:0;background:#000}
.k{--bg:#000;--surface:#0F0F0F;--raised:#171717;--hover:#1F1F1F;--border:rgba(255,255,255,.08);--border-2:rgba(255,255,255,.15);--text:#FFF;--text-2:#C2C2C2;--muted:#969696;--accent:#22D3EE;--accent-ink:#67E8F9;--accent-fill:#0B78B5;--accent-soft:rgba(34,211,238,.13);--on-accent:#FFF;--profit:#22C55E;--profit-ink:#4ADE80;--profit-soft:rgba(34,197,94,.14);--loss:#EF4444;--loss-ink:#F87171;--loss-soft:rgba(239,68,68,.14);--warn:#F59E0B;--warn-ink:#FBBF24;--warn-soft:rgba(245,158,11,.14);--info:#38BDF8;--info-ink:#7DD3FC;--info-soft:rgba(56,189,248,.12);--grid:rgba(255,255,255,.06);--glow:inset 0 1px 20px rgba(255,255,255,.07);--shadow:0 30px 60px -20px rgba(0,0,0,.9),inset 0 1px 20px rgba(255,255,255,.07);--btn:linear-gradient(135deg,#0B78B5 0%,#2563EB 100%);position:relative;isolation:isolate;overflow-x:clip;min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-feature-settings:"tnum" 1,"cv11" 1;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;line-height:1.45;font-size:14px}
.k.light{--bg:#F5F7FA;--surface:#FFF;--raised:#F0F3F7;--hover:#E8EDF3;--border:#DDE3EA;--border-2:#C6D0DC;--text:#0E1621;--text-2:#334155;--muted:#556273;--accent:#0891B2;--accent-ink:#0E7490;--accent-soft:rgba(8,145,178,.10);--profit:#16A34A;--profit-ink:#15803D;--profit-soft:rgba(22,163,74,.10);--loss:#DC2626;--loss-ink:#B91C1C;--loss-soft:rgba(220,38,38,.08);--warn:#D97706;--warn-ink:#B45309;--warn-soft:rgba(217,119,6,.12);--info:#0284C7;--info-ink:#0369A1;--info-soft:rgba(2,132,199,.10);--grid:#E9EDF2;--glow:inset 0 0 0 1px #DDE3EA;--shadow:0 12px 32px rgba(15,23,42,.14)}
.k.cb{--profit:#3B82F6;--profit-ink:#60A5FA;--profit-soft:rgba(59,130,246,.16);--loss:#F97316;--loss-ink:#FB923C;--loss-soft:rgba(249,115,22,.16);--warn:#FACC15;--warn-ink:#FDE047;--warn-soft:rgba(250,204,21,.14);--btn:#0E7490}
.k.light.cb{--profit:#2563EB;--profit-ink:#1D4ED8;--profit-soft:rgba(37,99,235,.10);--loss:#EA580C;--loss-ink:#C2410C;--loss-soft:rgba(234,88,12,.10);--warn:#CA8A04;--warn-ink:#854D0E;--warn-soft:rgba(202,138,4,.14)}
.k *{box-sizing:border-box}
.k button,.k input,.k select,.k textarea{font:inherit;color:inherit}
.k button{cursor:pointer}
.k button:disabled{cursor:not-allowed;opacity:.5}
.k :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.k a{color:var(--accent-ink)}.k a:hover{color:var(--text)}
.k::before{content:"";position:absolute;z-index:-1;top:-260px;right:-200px;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.16) 0%,rgba(34,211,238,.06) 40%,transparent 70%);pointer-events:none;animation:dl-drift 24s ease-in-out infinite alternate}
.k::after{content:"";position:absolute;z-index:-1;top:0;left:0;width:100%;height:620px;background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/72px 72px;-webkit-mask-image:radial-gradient(ellipse 50% 80% at 60% 0%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 50% 80% at 60% 0%,#000 10%,transparent 70%);pointer-events:none}
.k.light::before,.k.light::after{opacity:.5}
.dl-l{color:#67E8F9}.dl-o{color:#22D3EE}.dl-g{color:#0EA5E9}.dl-t{color:#67E8F9}
.k.light .dl-l{color:#0891B2}.k.light .dl-o{color:#0284C7}.k.light .dl-g{color:#2563EB}.k.light .dl-t{color:#0369A1}

/* layout */
.app{display:flex;flex-wrap:wrap;align-items:stretch}
.side{flex:1 1 240px;margin:16px 0 16px 16px;padding:16px 12px;border-radius:20px;background:var(--surface);box-shadow:var(--glow);display:flex;flex-direction:column;gap:20px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px;color:var(--text);text-decoration:none}
.k .brand:hover{color:var(--text)}
.brand-n{font-size:19px;font-weight:700;letter-spacing:-.02em}
.nav-g{display:flex;flex-direction:column;gap:2px}
.nav-h{padding:0 10px 6px;font-size:12px;font-weight:500;color:var(--muted)}
.k a.nv{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:10px;color:var(--text-2);font-size:14px;font-weight:500;text-decoration:none;transition:background-color .2s,color .2s}
.k a.nv:hover{background:var(--raised);color:var(--text)}
.k a.nv[aria-current="page"]{background:var(--raised);color:var(--text);box-shadow:inset 2px 0 0 var(--accent),inset 0 1px 12px rgba(255,255,255,.07)}
.nv svg{flex:none;transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}
.nv:hover svg{transform:translateX(2px) scale(1.12)}
.nv[aria-current="page"] svg{color:var(--accent-ink);filter:drop-shadow(0 0 6px rgba(34,211,238,.6))}
.nv-b{margin-left:auto;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:10px;background:var(--raised);color:var(--muted);font-size:12px;font-weight:600}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.col{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}
.top{position:relative;margin:16px 32px 0;padding:8px 12px 8px 16px;border-radius:20px;background:var(--surface);box-shadow:var(--glow);display:flex;flex-wrap:wrap;align-items:center;gap:12px;overflow-x:clip}
.top::after{content:"";position:absolute;left:24px;right:24px;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,#22D3EE 45%,#2563EB 60%,transparent);transform:translateX(-110%);animation:dl-sweep 1.6s .1s cubic-bezier(.6,0,.2,1) forwards;pointer-events:none}
.main{width:100%;max-width:1440px;padding:20px 32px 48px;display:flex;flex-direction:column;gap:16px}
.ph{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.ph-t{display:flex;flex-direction:column;gap:4px}
.h1{margin:0;font-size:26px;font-weight:500;letter-spacing:-.035em;background:linear-gradient(100deg,var(--text) 0%,var(--text) 40%,#9C9C9C 50%,var(--text) 60%,var(--text) 100%);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:dl-shine 2.4s .45s cubic-bezier(.4,0,.2,1) backwards}
.lead{margin:0;font-size:14px;color:var(--muted);text-wrap:pretty}
.row{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.stack{display:flex;flex-direction:column;gap:16px}
.kg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr));gap:16px}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px}

/* cards */
.card{position:relative;min-width:0;background:var(--surface);border-radius:18px;box-shadow:var(--glow);padding:16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.main .card:hover{box-shadow:inset 0 1px 26px rgba(255,255,255,.1),0 30px 60px -36px rgba(34,211,238,.45)}
.k.light .main .card:hover{box-shadow:inset 0 0 0 1px var(--border-2),0 14px 34px -20px rgba(14,165,233,.45)}
.card.p0{padding:0;gap:0}
.card.warn{box-shadow:var(--glow),inset 0 0 0 1px var(--warn)}
.card.bad{box-shadow:var(--glow),inset 0 0 0 1px var(--loss)}
.card.good{box-shadow:var(--glow),inset 0 0 0 1px rgba(34,211,238,.45)}
.ch{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.ch-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.h2{margin:0;font-size:16px;font-weight:500;letter-spacing:-.015em}
.h3{margin:0;font-size:20px;font-weight:500;letter-spacing:-.02em}
.sub{font-size:12px;color:var(--muted)}
.t2{color:var(--text-2)}.mut{color:var(--muted)}.pos{color:var(--profit-ink)}.neg{color:var(--loss-ink)}.wrn{color:var(--warn-ink)}.acc{color:var(--accent-ink)}
.sep{border-top:1px solid var(--border)}
.inset{padding:12px;border-radius:12px;background:var(--raised)}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--raised);font-size:13px;color:var(--text-2)}
.note.info{background:var(--info-soft);color:var(--text)}
.note.warn{background:var(--warn-soft);color:var(--text)}
.note.bad{background:var(--loss-soft);color:var(--text)}
.note svg{flex:none;margin-top:1px}

/* kpi */
.kpi{gap:6px}
.kpi-l{margin:0;font-size:12px;font-weight:500;color:var(--muted)}
.kpi-v{font-size:26px;font-weight:500;letter-spacing:-.035em;line-height:1.2;animation:dl-num .9s cubic-bezier(.2,.8,.2,1) .25s backwards}
.kpi-s{font-size:12px;color:var(--muted)}
.n{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;border:1px solid var(--border);background:var(--raised);font-size:12px;color:var(--muted);white-space:nowrap}
.prov{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;border:1px dashed var(--border-2);font-size:12px;font-weight:500;color:var(--text-2);white-space:nowrap}

/* buttons */
.k .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--glow);color:var(--text);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .2s,box-shadow .25s}
.k .btn:hover{background:var(--hover);color:var(--text)}
.k .btn:active{transform:scale(.98)}
.k .btn-p{position:relative;overflow:hidden;border:0;background:var(--btn);color:var(--on-accent);box-shadow:inset 0 1px 20px rgba(255,255,255,.14),0 12px 30px -14px rgba(37,99,235,.8)}
.k .btn-p:hover{background:var(--btn);color:var(--on-accent);transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px 20px rgba(255,255,255,.2),0 16px 36px -12px rgba(37,99,235,.95)}
.k .btn-p::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-120%);animation:dl-glint 5s ease-in-out 1.4s infinite;pointer-events:none}
.k .btn-d{border-color:var(--loss);background:var(--loss-soft);color:var(--text)}
.k .btn-d:hover{background:var(--loss-soft);filter:brightness(1.15)}
.k .btn-l{height:auto;padding:0;border:0;background:transparent;box-shadow:none;color:var(--accent-ink);font-weight:600}
.k .btn-l:hover{background:transparent;color:var(--text)}
.k .btn-lg{height:44px;padding:0 18px;font-size:15px}
.k .btn-sm{height:32px;padding:0 10px;font-size:13px}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;background:rgba(255,255,255,.18);font-size:12px;color:#FFF}

/* forms */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.lbl{font-size:13px;font-weight:600}
.hint{font-size:12px;color:var(--muted)}
.k .inp{width:100%;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);font-size:14px;color:var(--text)}
.k textarea.inp{height:auto;min-height:72px;padding:10px 12px;line-height:1.45;resize:vertical}
.k .inp::placeholder{color:var(--muted)}
.k .inp.err{border-color:var(--loss)}
.seg{display:flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.k .seg button{flex:1 1 0;min-width:0;height:32px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font-size:13px;font-weight:600;white-space:nowrap}
.k .seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px rgba(34,211,238,.35)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.k .chips button{height:32px;padding:0 12px;border:1px solid var(--border);border-radius:16px;background:var(--bg);color:var(--text-2);font-size:13px;font-weight:500}
.k .chips button[aria-pressed="true"]{border-color:rgba(34,211,238,.45);background:var(--accent-soft);color:var(--accent-ink)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap}
.kind{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 6px;border-radius:5px;font-size:12px;font-weight:600;white-space:nowrap}
.pnl{display:inline-flex;align-items:center;justify-content:center;min-width:76px;height:24px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap}
.grade{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;font-size:12px;font-weight:700}

/* tables */
.tw{overflow-x:auto}
.tr{display:grid;gap:12px;align-items:center;min-height:48px;padding:6px 16px;border-top:1px solid var(--border);color:var(--text);text-decoration:none;font-size:14px}
.k a.tr{color:var(--text)}
.k a.tr:hover,.k button.tr:hover{background:var(--raised);color:var(--text);box-shadow:inset 3px 0 0 0 var(--accent)}
.k button.tr{width:100%;border:0;border-top:1px solid var(--border);background:transparent;text-align:left}
.th{min-height:34px;font-size:12px;font-weight:500;color:var(--muted);background:var(--bg)}
.r{text-align:right;justify-self:end}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.stk{display:flex;flex-direction:column;line-height:1.25;min-width:0}

/* meters and bars */
.meter{position:relative;height:10px;border-radius:5px;background:var(--raised);overflow:hidden}
.meter>span{position:absolute;left:0;top:0;bottom:0;border-radius:5px;transform-origin:left center;animation:dl-grow 1.1s cubic-bezier(.2,.7,.2,1) .3s backwards}
.hbar{display:block;height:6px;border-radius:3px;transform-origin:left center;animation:dl-grow 1s cubic-bezier(.2,.7,.2,1) .35s backwards}
.vbar{transform-origin:50% 100%;animation:dl-rise .9s cubic-bezier(.2,.8,.2,1) .35s backwards}

/* empty state */
.empty{align-items:center;text-align:center;gap:14px;padding:44px 28px}
.empty-i{width:56px;height:56px;border-radius:16px;background:var(--accent-soft);display:inline-flex;align-items:center;justify-content:center;color:var(--accent-ink);animation:dl-float 4.5s ease-in-out .8s infinite}
.empty p{margin:0;max-width:560px;font-size:14px;color:var(--text-2);text-wrap:pretty}
.steps{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;text-align:left}
.steps li{display:flex;gap:10px;align-items:flex-start;width:250px;padding:12px;border-radius:12px;background:var(--raised);font-size:13px}
.dot{flex:none;width:24px;height:24px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--bg);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border-2)}
.dot.on{background:var(--profit-soft);color:var(--profit-ink);box-shadow:none}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,.9fr);gap:6px}
.cell{min-height:62px;padding:6px 8px;border-radius:10px;display:flex;flex-direction:column;justify-content:space-between;gap:2px;min-width:0;animation:dl-cell .55s cubic-bezier(.2,.8,.2,1) backwards}

/* toast and dialogs */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:10px 14px;border-radius:12px;background:var(--raised);box-shadow:var(--shadow);font-size:14px;color:var(--text);animation:dl-pop .35s cubic-bezier(.2,.8,.2,1)}
.pop{position:absolute;z-index:40;padding:6px;border-radius:14px;background:var(--raised);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;animation:dl-pop .25s cubic-bezier(.2,.8,.2,1)}
.k .opt{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 8px;border:0;border-radius:10px;background:transparent;text-align:left;color:var(--text);text-decoration:none}
.k .opt:hover{background:var(--hover);color:var(--text)}

/* phone screens */
.m{height:100vh;min-height:600px;display:flex;flex-direction:column;overflow:hidden}
.m-status{flex:none;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 28px;font-size:15px;font-weight:600}
.m-top{flex:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px}
.m-h1{margin:0;font-size:20px;font-weight:500;letter-spacing:-.03em}
.m-main{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 20px;display:flex;flex-direction:column;gap:12px}
.m-tabs{flex:none;display:grid;grid-template-columns:repeat(5,1fr);height:74px;margin:0 12px 10px;padding:6px 4px 8px;border-radius:22px;background:var(--surface);box-shadow:var(--glow)}
.k .m-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:500;text-decoration:none}
.k .m-tab[aria-current="page"]{color:var(--accent-ink);font-weight:600}
.m-log{width:48px;height:48px;border-radius:24px;background:var(--btn);color:#FFF;display:inline-flex;align-items:center;justify-content:center;animation:dl-breathe 2.8s ease-in-out infinite}

/* motion */
.main>*,.m-main>*{animation:dl-up .6s cubic-bezier(.2,.7,.2,1) backwards}
.main>:nth-child(2),.m-main>:nth-child(2){animation-delay:.06s}.main>:nth-child(3),.m-main>:nth-child(3){animation-delay:.12s}.main>:nth-child(4),.m-main>:nth-child(4){animation-delay:.18s}.main>:nth-child(5),.m-main>:nth-child(5){animation-delay:.24s}.main>:nth-child(n+6),.m-main>:nth-child(n+6){animation-delay:.3s}
.side .nav-g>*{animation:dl-slide .5s cubic-bezier(.2,.8,.2,1) backwards}
.side .nav-g:nth-of-type(2)>*{animation-delay:.08s}.side .nav-g:nth-of-type(3)>*{animation-delay:.16s}.side .nav-g:nth-of-type(4)>*{animation-delay:.24s}
.draw{stroke-dasharray:6000;stroke-dashoffset:6000;animation:dl-draw 1.8s cubic-bezier(.45,0,.2,1) .2s forwards}
.fade{animation:dl-fade 1s ease .6s backwards}
.brand svg rect+rect{transform-box:fill-box;transform-origin:center;animation:dl-bar .55s cubic-bezier(.2,.9,.3,1.25) backwards}
.brand svg rect:nth-child(5){animation-delay:.07s}.brand svg rect:nth-child(4){animation-delay:.14s}.brand svg rect:nth-child(3){animation-delay:.21s}.brand svg rect:nth-child(2){animation-delay:.28s}
@keyframes dl-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dl-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes dl-rise{from{transform:scaleY(0)}to{transform:none}}
@keyframes dl-draw{to{stroke-dashoffset:0}}
@keyframes dl-num{from{opacity:0;filter:blur(8px);transform:translateY(6px)}to{opacity:1;filter:none;transform:none}}
@keyframes dl-fade{from{opacity:0}to{opacity:1}}
@keyframes dl-pop{from{opacity:0;translate:0 10px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes dl-slide{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes dl-cell{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes dl-bar{from{opacity:0;transform:scaleX(.15)}to{opacity:1;transform:none}}
@keyframes dl-glint{0%{transform:translateX(-120%)}28%,100%{transform:translateX(120%)}}
@keyframes dl-sweep{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes dl-shine{from{background-position:100% 0}to{background-position:0 0}}
@keyframes dl-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-140px,90px) scale(1.18)}}
@keyframes dl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes dl-breathe{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,0),0 8px 20px -6px rgba(37,99,235,.55)}50%{box-shadow:0 0 0 8px rgba(34,211,238,.14),0 10px 26px -4px rgba(37,99,235,.7)}}
@media (max-width:760px){.side{margin:12px 12px 0}.top{margin:12px 12px 0}.main{padding:16px 12px 40px}}
@media (prefers-reduced-motion:reduce){.k *,.k::before,.k::after,.k *::before,.k *::after{animation:none !important;transition:none !important}.draw{stroke-dashoffset:0}}
