@font-face{font-family:Syne;src:url('assets/fonts/syne-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Syne;src:url('assets/fonts/syne-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Syne;src:url('assets/fonts/syne-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Syne;src:url('assets/fonts/syne-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Syne;src:url('assets/fonts/syne-800.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('assets/fonts/dm-mono-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('assets/fonts/dm-mono-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#06080c;
  --bg-raised:#0a0d13;
  --surface:#0c1017;
  --surface-2:#10151e;
  --surface-3:#151b25;
  --surface-glass:rgba(12,16,23,.86);
  --text:#f2f4f8;
  --text-soft:#c5cad4;
  --muted:#7d8492;
  --muted-2:#505867;
  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.13);
  --primary:#ff365f;
  --primary-bright:#ff5778;
  --primary-soft:rgba(255,54,95,.12);
  --primary-faint:rgba(255,54,95,.055);
  --green:#52d99b;
  --green-soft:rgba(82,217,155,.12);
  --amber:#f3bd5b;
  --amber-soft:rgba(243,189,91,.12);
  --blue:#6a9eff;
  --blue-soft:rgba(106,158,255,.12);
  --purple:#a783ff;
  --shadow:0 24px 80px rgba(0,0,0,.34);
  --shadow-soft:0 10px 35px rgba(0,0,0,.2);
  --sidebar:246px;
  --topbar:76px;
  --radius:18px;
  --radius-sm:12px;
  --font:Syne,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

html[data-theme="light"]{
  color-scheme:light;
  --bg:#f1f2f5;
  --bg-raised:#f7f8fa;
  --surface:#fff;
  --surface-2:#f8f9fb;
  --surface-3:#eef0f4;
  --surface-glass:rgba(255,255,255,.88);
  --text:#12151c;
  --text-soft:#3c424d;
  --muted:#6c7380;
  --muted-2:#9ba1ab;
  --line:rgba(13,19,29,.08);
  --line-strong:rgba(13,19,29,.14);
  --primary:#df2049;
  --primary-bright:#f3355d;
  --primary-soft:rgba(223,32,73,.1);
  --primary-faint:rgba(223,32,73,.045);
  --green:#16885d;
  --green-soft:rgba(22,136,93,.1);
  --amber:#a66c00;
  --amber-soft:rgba(166,108,0,.1);
  --blue:#336fd6;
  --blue-soft:rgba(51,111,214,.1);
  --purple:#7657c8;
  --shadow:0 24px 70px rgba(31,38,51,.12);
  --shadow-soft:0 10px 30px rgba(31,38,51,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{min-width:320px;background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.55;overflow-x:hidden;transition:background .25s ease,color .25s ease}
body.modal-open{overflow:hidden}
button,input{font:inherit;color:inherit}
button{border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
img{max-width:100%;display:block}
::selection{background:var(--primary);color:#fff}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.is-hidden{display:none!important}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* Ambient background */
.ambient{position:fixed;border-radius:999px;filter:blur(90px);opacity:.12;pointer-events:none;z-index:0;transition:opacity .3s ease}
.ambient-one{width:500px;height:500px;background:var(--primary);right:-240px;top:-220px}
.ambient-two{width:380px;height:380px;background:#2844a5;left:-250px;bottom:-180px;opacity:.08}
.grid-noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 70%)}
html[data-theme="light"] .grid-noise{opacity:.5;background-image:linear-gradient(rgba(0,0,0,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.018) 1px,transparent 1px)}

/* Shared brand and controls */
.brand{display:inline-flex;align-items:center;gap:11px;position:relative;z-index:1}
.brand-mark{width:38px;height:38px;border:1px solid var(--line-strong);background:var(--surface-2);display:grid;place-items:center;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;box-shadow:inset 0 0 20px var(--primary-faint)}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;background:var(--primary)}
.brand-mark::before{width:11px;height:2px;left:-4px;top:7px}
.brand-mark::after{height:11px;width:2px;right:7px;bottom:-4px}
.brand-mark span{font-family:var(--mono);font-size:11px;font-weight:500;z-index:1}
.brand-mark i{position:absolute;height:60px;width:1px;background:var(--line-strong);transform:rotate(35deg)}
.brand-mark span:last-child{color:var(--primary)}
.brand-mark-large{width:64px;height:64px}
.brand-mark-large span{font-size:17px}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.brand-copy strong{font-size:13px;letter-spacing:.12em;font-weight:800}
.brand-copy small{font-family:var(--mono);font-size:8px;letter-spacing:.19em;color:var(--muted);margin-top:7px}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted);font-weight:500;text-transform:uppercase}
.eyebrow span{color:var(--primary);margin-right:8px}
.button{min-height:44px;border-radius:10px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.01em;transition:transform .2s var(--ease),border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}
.button svg{width:17px;height:17px}
.button:hover{transform:translateY(-2px)}
.button:active{transform:translateY(0)}
.button:disabled{opacity:.55;pointer-events:none}
.button-primary{background:var(--primary);color:#fff;box-shadow:0 10px 25px rgba(255,54,95,.18)}
.button-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.18),transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease)}
.button-primary:hover::before{transform:translateX(120%)}
.button-primary:hover{background:var(--primary-bright);box-shadow:0 14px 32px rgba(255,54,95,.26)}
.button-secondary{background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text-soft)}
.button-secondary:hover{border-color:rgba(255,54,95,.35);color:var(--text);background:var(--surface-3)}
.button-danger{background:var(--primary);color:#fff;box-shadow:0 10px 25px rgba(255,54,95,.2)}
.button-full{width:100%}
.icon-button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;transition:.2s ease}
.icon-button:hover{border-color:var(--line-strong);background:var(--surface-2);color:var(--text)}
.icon-button.small{width:34px;height:34px}
.icon-button.small svg{width:16px;height:16px}
.text-button{background:none;color:var(--primary);font-size:11px;font-weight:700;padding:2px;transition:color .2s ease}
.text-button:hover{color:var(--primary-bright)}

/* Boot */
.boot-screen{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .45s ease,visibility .45s ease}
.boot-screen.is-leaving{opacity:0;visibility:hidden}
.boot-copy{text-align:center;display:flex;flex-direction:column;gap:5px}
.boot-copy strong{font-size:12px;letter-spacing:.18em}
.boot-copy span{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--muted)}
.boot-track{width:150px;height:2px;background:var(--line);overflow:hidden}
.boot-track i{display:block;width:45%;height:100%;background:var(--primary);box-shadow:0 0 12px var(--primary);animation:bootSlide 1.1s ease-in-out infinite}
@keyframes bootSlide{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}

/* Authentication */
.auth-view{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(440px,.85fr);position:relative;z-index:2}
.auth-showcase{min-height:100vh;padding:38px clamp(38px,6vw,92px) 30px;display:flex;flex-direction:column;position:relative;overflow:hidden;border-right:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.018),transparent 55%)}
.auth-showcase::before{content:"";position:absolute;width:620px;height:620px;border:1px solid var(--line);border-radius:50%;left:-330px;top:18%;box-shadow:0 0 0 70px rgba(255,255,255,.008),0 0 0 140px rgba(255,255,255,.005)}
.auth-showcase::after{content:"";position:absolute;width:1px;height:40%;background:linear-gradient(transparent,var(--primary),transparent);right:-1px;top:28%;opacity:.8}
.auth-brand{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}
.secure-label{font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--muted);display:flex;align-items:center;gap:8px}
.secure-label span{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.auth-hero{position:relative;z-index:2;margin:auto 0 28px;max-width:720px;padding-top:70px}
.auth-hero h1{font-size:clamp(43px,5.4vw,82px);line-height:.96;letter-spacing:-.055em;font-weight:700;margin:18px 0 25px;max-width:750px}
.auth-hero h1 em,.view-heading h1 em{font-style:normal;color:var(--primary)}
.auth-hero>p:last-of-type{font-size:clamp(14px,1.25vw,17px);line-height:1.75;color:var(--muted);max-width:620px}
.auth-rules{margin-top:38px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:rgba(8,11,16,.45);backdrop-filter:blur(12px)}
html[data-theme="light"] .auth-rules{background:rgba(255,255,255,.55)}
.auth-rules>div{padding:16px 18px;border-right:1px solid var(--line);display:grid;grid-template-columns:1fr auto;align-items:end;gap:3px 10px}
.auth-rules>div:last-child{border-right:0}
.auth-rules span{font-family:var(--mono);font-size:7px;letter-spacing:.14em;color:var(--muted);grid-column:1/-1}
.auth-rules strong{font-size:22px;line-height:1;color:var(--text)}
.auth-rules small{font-size:9px;color:var(--muted);padding-bottom:1px;text-align:right}
.auth-preview{position:relative;z-index:2;width:min(620px,88%);margin:18px 0 25px auto;padding:20px 22px 17px;background:linear-gradient(145deg,var(--surface-2),var(--surface));border:1px solid var(--line-strong);box-shadow:var(--shadow);transform:perspective(900px) rotateY(-4deg) rotateX(1deg);transform-origin:right center}
.auth-preview::before{content:"";position:absolute;width:80px;height:2px;background:var(--primary);left:0;top:-1px;box-shadow:0 0 16px rgba(255,54,95,.65)}
.preview-topline{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--muted)}
.live-dot{color:var(--green);display:flex;align-items:center;gap:7px}
.live-dot::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.preview-main-stat{display:grid;grid-template-columns:1fr auto;align-items:end;margin-top:20px}
.preview-main-stat span{font-size:11px;color:var(--muted);grid-column:1}
.preview-main-stat strong{font-family:var(--mono);font-size:34px;letter-spacing:-.05em;grid-column:1;margin-top:2px}
.preview-main-stat small{font-family:var(--mono);font-size:8px;color:var(--green);grid-column:2;grid-row:2;text-align:right;margin-bottom:7px}
.preview-chart{height:62px;display:flex;align-items:flex-end;gap:5px;border-bottom:1px solid var(--line);margin:18px 0 12px;padding:0 5px}
.preview-chart i{height:var(--h);flex:1;background:linear-gradient(to top,var(--primary),rgba(255,54,95,.18));min-width:3px;border-radius:2px 2px 0 0;opacity:.82}
.preview-footer{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px;color:var(--muted)}
.preview-footer span{display:flex;align-items:center;gap:7px}.preview-footer span i{width:5px;height:5px;border-radius:50%;background:var(--green)}
.preview-footer b{font-weight:500;color:var(--text-soft)}
.auth-showcase-footer{position:relative;z-index:2;display:flex;gap:24px;font-family:var(--mono);font-size:7px;letter-spacing:.12em;color:var(--muted-2)}
.auth-showcase-footer span{display:flex;align-items:center;gap:8px}.auth-showcase-footer span:not(:last-child)::after{content:"";width:2px;height:2px;background:var(--primary);margin-left:16px}
.auth-panel-wrap{min-height:100vh;background:var(--bg-raised);display:flex;align-items:center;justify-content:center;padding:50px clamp(28px,5vw,72px);position:relative}
.auth-panel{width:min(100%,450px)}
.auth-mobile-brand{display:none;align-items:center;gap:11px;margin-bottom:34px}
.connection-note{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--muted);margin-bottom:27px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);flex:0 0 auto}
.connection-note.is-connected .status-dot{background:var(--green);box-shadow:0 0 8px var(--green)}
.connection-note.is-offline .status-dot{background:var(--primary);box-shadow:0 0 8px var(--primary)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:31px}
.auth-tab{height:44px;background:transparent;color:var(--muted);font-size:11px;font-weight:700;position:relative;transition:.2s ease}
.auth-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary);transform:scaleX(0);transition:transform .25s var(--ease)}
.auth-tab.is-active{color:var(--text)}.auth-tab.is-active::after{transform:scaleX(1)}
.form-alert{padding:11px 13px;border-radius:9px;background:var(--primary-soft);border:1px solid rgba(255,54,95,.22);color:var(--primary-bright);font-size:11px;line-height:1.5;margin-bottom:17px}
.form-alert.is-success{background:var(--green-soft);border-color:rgba(82,217,155,.22);color:var(--green)}
.auth-form{display:flex;flex-direction:column;gap:17px}
.form-heading{margin-bottom:5px}
.form-heading h2{font-size:27px;letter-spacing:-.035em;line-height:1.15;margin:8px 0 7px}
.form-heading>p:last-child{font-size:12px;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:7px;font-size:10px;font-weight:600;color:var(--text-soft)}
.field-label-row{display:flex;align-items:center;justify-content:space-between}
.input-shell{height:48px;border:1px solid var(--line-strong);background:var(--surface);display:flex;align-items:center;border-radius:9px;transition:.2s ease;position:relative}
.input-shell:focus-within{border-color:rgba(255,54,95,.62);box-shadow:0 0 0 3px var(--primary-soft)}
.input-shell>svg{width:16px;height:16px;margin-left:15px;color:var(--muted);flex:0 0 auto}
.input-shell input{height:100%;width:100%;border:0;outline:0;background:transparent;padding:0 14px;font-size:12px;color:var(--text)}
.input-shell input::placeholder{color:var(--muted-2)}
.input-shell.is-readonly{opacity:.72;background:var(--surface-2)}
.password-toggle{width:45px;height:45px;display:grid;place-items:center;background:transparent;color:var(--muted);flex:0 0 auto}
.password-toggle svg{width:16px;height:16px}
.check-row{display:grid;grid-template-columns:17px 1fr;gap:9px;align-items:start;font-size:9px;color:var(--muted);cursor:pointer;line-height:1.5}
.check-row input{position:absolute;opacity:0;pointer-events:none}
.custom-check{width:16px;height:16px;border:1px solid var(--line-strong);border-radius:4px;display:grid;place-items:center;background:var(--surface)}
.custom-check svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(.5);transition:.2s ease}
.check-row input:checked+.custom-check{background:var(--primary);border-color:var(--primary)}
.check-row input:checked+.custom-check svg{opacity:1;transform:scale(1)}
.password-meter{display:grid;grid-template-columns:68px 1fr;gap:10px;align-items:center;margin-top:-7px}
.password-meter::before{content:"";height:3px;background:var(--surface-3);border-radius:4px;grid-column:1;grid-row:1}
.password-meter i{height:3px;width:0;background:var(--primary);border-radius:4px;grid-column:1;grid-row:1;transition:.25s ease}
.password-meter span{font-family:var(--mono);font-size:7px;color:var(--muted)}
.auth-separator{height:42px;display:flex;align-items:center;gap:12px;color:var(--muted-2);font-family:var(--mono);font-size:7px;letter-spacing:.1em;margin-top:6px}
.auth-separator::before,.auth-separator::after{content:"";height:1px;background:var(--line);flex:1}
.auth-alt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.google-icon{fill:currentColor;stroke:none}
.auth-fineprint{display:flex;gap:9px;color:var(--muted);font-size:8px;line-height:1.55;margin-top:20px}
.auth-fineprint svg{width:14px;height:14px;color:var(--green);flex:0 0 auto}
.auth-copyright{position:absolute;bottom:18px;font-family:var(--mono);font-size:7px;letter-spacing:.09em;color:var(--muted-2);display:flex;align-items:center;gap:7px}.auth-copyright i{width:2px;height:2px;background:var(--primary)}

/* App shell */
.app-shell{min-height:100vh;position:relative;z-index:2}
.sidebar{width:var(--sidebar);position:fixed;inset:0 auto 0 0;background:rgba(8,11,16,.96);border-right:1px solid var(--line);z-index:80;display:flex;flex-direction:column;padding:25px 18px 18px;backdrop-filter:blur(20px)}
html[data-theme="light"] .sidebar{background:rgba(250,250,252,.94)}
.sidebar::after{content:"";position:absolute;width:2px;height:70px;right:-1px;top:126px;background:linear-gradient(transparent,var(--primary),transparent);opacity:.7}
.sidebar-brand{padding:0 8px 23px;border-bottom:1px solid var(--line)}
.main-nav{display:flex;flex-direction:column;gap:5px;padding:25px 0}
.nav-caption{font-family:var(--mono);font-size:7px;letter-spacing:.16em;color:var(--muted-2);padding:0 12px 8px}
.nav-link{height:46px;border-radius:9px;background:transparent;color:var(--muted);display:grid;grid-template-columns:23px 1fr 4px;gap:10px;align-items:center;padding:0 12px;text-align:left;font-size:11px;font-weight:600;position:relative;transition:.2s ease}
.nav-link svg{width:17px;height:17px}.nav-link>i{width:4px;height:4px;border-radius:50%;background:var(--primary);opacity:0;box-shadow:0 0 8px var(--primary)}
.nav-link:hover{background:var(--surface-2);color:var(--text-soft)}
.nav-link.is-active{background:var(--primary-soft);color:var(--text)}.nav-link.is-active>svg{color:var(--primary)}.nav-link.is-active>i{opacity:1}
.sidebar-rate-card{margin-top:auto;border:1px solid var(--line);background:var(--surface);padding:15px;border-radius:12px;position:relative;overflow:hidden}
.sidebar-rate-card::after{content:"";position:absolute;width:50px;height:50px;border:1px solid var(--primary);opacity:.15;border-radius:50%;right:-20px;top:-20px}
.rate-icon{width:30px;height:30px;border-radius:8px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;margin-bottom:13px}.rate-icon svg{width:15px;height:15px}
.sidebar-rate-card>span{display:block;font-family:var(--mono);font-size:7px;letter-spacing:.12em;color:var(--muted)}
.sidebar-rate-card>strong{display:block;font-family:var(--mono);font-size:19px;margin-top:4px}.sidebar-rate-card>strong small{font-family:var(--font);font-size:9px;color:var(--muted);font-weight:500}
.sidebar-rate-card>p{font-size:8px;color:var(--muted);margin-top:5px}
.sidebar-profile{margin-top:13px;background:transparent;border-top:1px solid var(--line);padding:15px 5px 0;display:grid;grid-template-columns:36px 1fr 16px;align-items:center;gap:9px;text-align:left;width:100%;color:var(--text)}
.avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#8d1937);display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:#fff;font-weight:500;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sidebar-profile-copy{min-width:0;display:flex;flex-direction:column}.sidebar-profile-copy strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-profile-copy small{font-family:var(--mono);font-size:7px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.sidebar-profile>svg{width:14px;height:14px;color:var(--muted)}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:70;backdrop-filter:blur(4px)}
.app-main{margin-left:var(--sidebar);min-height:100vh;display:flex;flex-direction:column}
.topbar{height:var(--topbar);position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);background:var(--surface-glass);backdrop-filter:blur(22px);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,3.2vw,46px)}
.topbar-left,.topbar-right{display:flex;align-items:center}.topbar-left{gap:14px}.topbar-right{gap:9px}
.page-identity{display:flex;flex-direction:column}.page-identity span{font-family:var(--mono);font-size:7px;letter-spacing:.14em;color:var(--muted)}.page-identity strong{font-size:13px;margin-top:2px}
.mobile-menu-button{display:none}
.sync-status{height:34px;border:1px solid var(--line);border-radius:99px;padding:0 12px;display:flex;align-items:center;gap:7px;color:var(--green);font-family:var(--mono);font-size:7px;letter-spacing:.06em;background:var(--surface)}
.sync-status svg{width:14px;height:14px}.sync-status.is-saving{color:var(--amber)}.sync-status.is-offline{color:var(--primary)}
.month-switcher{height:40px;border:1px solid var(--line);background:var(--surface);border-radius:10px;display:grid;grid-template-columns:36px minmax(126px,150px) 36px;align-items:center;overflow:hidden}
.month-shift{height:100%;background:transparent;color:var(--muted);display:grid;place-items:center;transition:.2s ease}.month-shift:hover{color:var(--text);background:var(--surface-2)}.month-shift svg{width:15px;height:15px}
.month-picker-label{height:100%;display:grid;place-items:center;border-left:1px solid var(--line);border-right:1px solid var(--line);position:relative;cursor:pointer;font-size:9px;font-weight:700;text-align:center}
.month-picker-label input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}
.top-avatar{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#811630);display:grid;place-items:center;color:#fff;font-family:var(--mono);font-size:9px;position:relative}.top-avatar i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--green);border:2px solid var(--surface);right:-2px;bottom:-2px}
.demo-banner{min-height:40px;padding:8px clamp(20px,3.2vw,46px);background:var(--amber-soft);border-bottom:1px solid rgba(243,189,91,.18);display:flex;align-items:center;justify-content:space-between;color:var(--amber);font-size:9px}
.demo-banner>div{display:flex;align-items:center;gap:9px}.demo-banner svg{width:14px;height:14px}.demo-banner .text-button{color:var(--amber)}
.view-stage{flex:1;width:100%;max-width:1680px;margin:0 auto;padding:clamp(30px,4vw,52px) clamp(20px,3.2vw,46px) 55px}
.app-view{display:none;animation:viewIn .42s var(--ease)}.app-view.is-active{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.view-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:31px}
.view-heading h1{font-size:clamp(30px,3.1vw,49px);line-height:1.04;letter-spacing:-.045em;margin:11px 0 10px;font-weight:700}.view-heading>div>p:last-child{font-size:12px;color:var(--muted);max-width:660px}
.view-heading-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto}

/* Cards and overview */
.panel,.metric-card{background:linear-gradient(145deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:14px}
.metric-card{min-height:166px;padding:19px 20px 16px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .25s var(--ease),border-color .2s ease}
.metric-card::after{content:"";position:absolute;width:100px;height:100px;border:1px solid var(--line);border-radius:50%;right:-62px;top:-60px}
.metric-card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.metric-card.metric-primary{background:linear-gradient(145deg,rgba(255,54,95,.14),var(--surface) 58%);border-color:rgba(255,54,95,.18)}
.metric-top{display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center}
.metric-icon{width:28px;height:28px;border-radius:8px;background:var(--surface-3);display:grid;place-items:center;color:var(--muted)}.metric-primary .metric-icon{background:var(--primary-soft);color:var(--primary)}.metric-icon svg{width:14px;height:14px}
.metric-label,.metric-index{font-family:var(--mono);font-size:7px;letter-spacing:.11em;color:var(--muted)}.metric-index{color:var(--muted-2)}
.metric-card>strong{font-family:var(--mono);font-size:clamp(25px,2.3vw,36px);letter-spacing:-.055em;line-height:1;margin:19px 0 18px}
.metric-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:7px;color:var(--muted);font-size:8px}.metric-bottom span{display:flex;align-items:center;gap:5px}.metric-bottom b{color:var(--text-soft)}.metric-bottom small{font-family:var(--mono);font-size:7px;text-align:right}
.status-mark{width:5px;height:5px;border-radius:50%;background:var(--blue);display:inline-block}.status-mark.status-good{background:var(--green);box-shadow:0 0 7px rgba(82,217,155,.5)}.status-mark.status-danger{background:var(--primary);box-shadow:0 0 7px rgba(255,54,95,.5)}
.inline-action{background:none;color:var(--primary);display:flex;align-items:center;gap:4px;font-size:8px}.inline-action svg{width:12px;height:12px}
.metric-card.is-due{border-color:rgba(255,54,95,.24);background:linear-gradient(145deg,rgba(255,54,95,.12),var(--surface) 58%)}.metric-card.is-due .metric-icon{color:var(--primary);background:var(--primary-soft)}
.overview-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-bottom:14px}.panel{padding:21px}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.panel-kicker{display:block;font-family:var(--mono);font-size:7px;letter-spacing:.12em;color:var(--muted);margin-bottom:4px}.panel-heading h2{font-size:16px;letter-spacing:-.025em}.panel-note{font-family:var(--mono);font-size:7px;color:var(--muted)}
.progress-panel{min-height:320px}.progress-content{display:grid;grid-template-columns:180px 1fr;gap:30px;align-items:center}
.meal-ring{width:168px;height:168px;position:relative;display:grid;place-items:center}.meal-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.meal-ring circle{fill:none;stroke-width:9}.ring-track{stroke:var(--surface-3)}.ring-value{stroke:var(--primary);stroke-linecap:round;stroke-dasharray:389.56;stroke-dashoffset:389.56;filter:drop-shadow(0 0 5px rgba(255,54,95,.25));transition:stroke-dashoffset .7s var(--ease)}
.meal-ring>div{text-align:center;display:flex;flex-direction:column}.meal-ring strong{font-family:var(--mono);font-size:25px;letter-spacing:-.05em}.meal-ring span{font-size:8px;color:var(--muted);margin-top:2px}
.slot-breakdown{display:flex;flex-direction:column}.slot-breakdown>div{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid var(--line)}.slot-breakdown>div:last-child{border-bottom:0}.slot-breakdown span:not(.slot-dot){font-size:9px;color:var(--muted)}.slot-breakdown strong{font-family:var(--mono);font-size:12px}.slot-breakdown small{grid-column:2;font-size:7px;color:var(--muted-2);margin-top:-8px}.slot-dot{width:6px;height:6px;border-radius:50%}.slot-dot.breakfast{background:var(--amber)}.slot-dot.lunch{background:var(--primary)}.slot-dot.dinner{background:var(--purple)}
.advance-usage{border-top:1px solid var(--line);margin-top:19px;padding-top:15px}.advance-usage>div:first-child{display:flex;justify-content:space-between;font-size:8px;color:var(--muted);margin-bottom:8px}.advance-usage strong{font-family:var(--mono);font-size:7px;color:var(--text-soft)}.progress-track{height:4px;background:var(--surface-3);border-radius:5px;overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--green),var(--amber),var(--primary));border-radius:5px;transition:width .6s var(--ease)}
.selected-day-panel{min-height:320px}.day-stepper{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.day-stepper button{width:31px;height:30px;background:var(--surface-2);color:var(--muted);display:grid;place-items:center}.day-stepper button+button{border-left:1px solid var(--line)}.day-stepper button:hover{color:var(--text)}.day-stepper svg{width:13px;height:13px}
.selected-date-line{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:-11px;margin-bottom:15px}.date-badge{font-family:var(--mono);font-size:6px;letter-spacing:.12em;color:var(--primary);background:var(--primary-soft);padding:4px 7px;border-radius:20px}
.selected-day-toggles{display:flex;flex-direction:column;gap:7px}.selected-meal-toggle{width:100%;height:49px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;display:grid;grid-template-columns:31px 1fr auto 32px;align-items:center;gap:9px;padding:0 10px;color:var(--muted);text-align:left;transition:.2s ease}.selected-meal-toggle:hover{border-color:var(--line-strong)}.selected-meal-toggle.is-on{background:var(--primary-soft);border-color:rgba(255,54,95,.22);color:var(--text)}.selected-meal-toggle .meal-mini-icon{width:29px;height:29px;border-radius:7px;background:var(--surface-3);display:grid;place-items:center}.selected-meal-toggle.is-on .meal-mini-icon{color:var(--primary);background:rgba(255,54,95,.13)}.selected-meal-toggle svg{width:14px;height:14px}.selected-meal-toggle>span:nth-child(2){display:flex;flex-direction:column}.selected-meal-toggle strong{font-size:9px}.selected-meal-toggle small{font-family:var(--mono);font-size:7px;color:var(--muted)}.selected-meal-toggle>em{font-family:var(--mono);font-size:8px;font-style:normal}.toggle-box{width:25px;height:25px;border-radius:7px;border:1px solid var(--line-strong);display:grid;place-items:center}.toggle-box svg{opacity:0;transform:scale(.6);transition:.2s ease}.is-on .toggle-box{background:var(--primary);border-color:var(--primary);color:#fff}.is-on .toggle-box svg{opacity:1;transform:scale(1)}
.selected-day-total{display:flex;justify-content:space-between;align-items:center;padding-top:14px;margin-top:14px;border-top:1px solid var(--line);font-size:8px;color:var(--muted)}.selected-day-total strong{display:flex;align-items:center;gap:10px}.selected-day-total b{font-family:var(--mono);font-size:8px;color:var(--text-soft)}.selected-day-total em{font-family:var(--mono);font-size:12px;color:var(--primary);font-style:normal}
.activity-panel{min-height:290px}.trend-badge{font-family:var(--mono);font-size:7px;color:var(--green);padding:5px 8px;background:var(--green-soft);border-radius:20px}.line-chart{height:176px;position:relative;border-bottom:1px solid var(--line);background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 33.33%;overflow:hidden}.line-chart svg,.insights-chart svg{width:100%;height:100%;overflow:visible}.line-chart .area,.insights-chart .area{fill:url(#chartGradient)}.line-chart .chart-line,.insights-chart .chart-line{fill:none;stroke:var(--primary);stroke-width:2;vector-effect:non-scaling-stroke}.line-chart .chart-dot,.insights-chart .chart-dot{fill:var(--surface);stroke:var(--primary);stroke-width:2}.line-chart .chart-guide,.insights-chart .chart-guide{stroke:var(--line);stroke-dasharray:3 5;vector-effect:non-scaling-stroke}.line-chart .empty-chart-label,.insights-chart .empty-chart-label{fill:var(--muted);font-family:var(--mono);font-size:8px;text-anchor:middle}
.chart-axis{display:flex;justify-content:space-between;color:var(--muted-2);font-family:var(--mono);font-size:7px;padding-top:8px}
.quick-actions-panel{min-height:290px}.quick-action-list{display:flex;flex-direction:column}.quick-action-list>button{height:65px;background:transparent;display:grid;grid-template-columns:38px 1fr 15px;align-items:center;gap:11px;text-align:left;border-bottom:1px solid var(--line);color:var(--text);transition:.2s ease}.quick-action-list>button:last-child{border-bottom:0}.quick-action-list>button:hover{transform:translateX(4px)}.quick-action-list>button>svg{width:14px;height:14px;color:var(--muted)}.quick-icon{width:36px;height:36px;border-radius:9px;background:var(--surface-3);color:var(--primary);display:grid;place-items:center}.quick-icon svg{width:16px;height:16px}.quick-action-list>button>span:nth-child(2){display:flex;flex-direction:column}.quick-action-list strong{font-size:9px}.quick-action-list small{font-size:7px;color:var(--muted);margin-top:2px}
.recent-panel{padding-bottom:8px}.arrow-link{display:flex;align-items:center;gap:4px}.arrow-link svg{width:13px;height:13px}.recent-list{display:flex;flex-direction:column}.recent-row{min-height:62px;display:grid;grid-template-columns:45px minmax(110px,1fr) repeat(3,minmax(80px,.7fr)) minmax(80px,.65fr);align-items:center;gap:12px;border-top:1px solid var(--line);font-size:9px}.recent-date{width:38px;height:38px;border:1px solid var(--line);border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center}.recent-date strong{font-family:var(--mono);font-size:12px}.recent-date small{font-family:var(--mono);font-size:6px;color:var(--muted)}.recent-day-name{display:flex;flex-direction:column}.recent-day-name strong{font-size:9px}.recent-day-name small{font-size:7px;color:var(--muted)}.recent-slot{display:flex;align-items:center;gap:6px;color:var(--muted)}.recent-slot i{width:5px;height:5px;border-radius:50%;background:var(--muted-2)}.recent-slot.is-on{color:var(--text-soft)}.recent-slot.is-on i{background:var(--green)}.recent-total{text-align:right}.recent-total strong{font-family:var(--mono);display:block;color:var(--text)}.recent-total small{font-family:var(--mono);color:var(--muted)}.empty-state{padding:36px 15px;text-align:center;color:var(--muted)}.empty-state svg{margin:0 auto 11px;color:var(--muted-2)}.empty-state strong{display:block;color:var(--text-soft);font-size:11px}.empty-state p{font-size:8px;margin-top:3px}

/* Calendar */
.calendar-toolbar{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}
.calendar-filter{display:flex;align-items:center;gap:5px}.filter-chip{height:31px;border-radius:8px;padding:0 11px;background:transparent;color:var(--muted);font-size:8px;font-weight:600;display:flex;align-items:center;gap:6px;transition:.2s ease}.filter-chip span{font-family:var(--mono);font-size:6px;background:var(--surface-3);padding:2px 5px;border-radius:10px}.filter-chip:hover{color:var(--text-soft)}.filter-chip.is-active{background:var(--primary-soft);color:var(--primary)}
.calendar-legend{display:flex;align-items:center;gap:15px;font-size:7px;color:var(--muted)}.calendar-legend span{display:flex;align-items:center;gap:6px}.legend-dot{width:6px;height:6px;border-radius:50%;display:inline-block}.legend-dot.special{background:var(--amber)}.legend-dot.today{background:transparent;border:1px solid var(--primary)}.legend-dot.selected{background:var(--green)}
.calendar-panel{padding:0;overflow:hidden}.calendar-panel-heading{height:80px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.calendar-panel-heading>div:first-child span{font-family:var(--mono);font-size:7px;letter-spacing:.14em;color:var(--primary)}.calendar-panel-heading h2{font-size:17px;margin-top:2px}.calendar-summary-inline{display:flex;align-items:center;gap:17px}.calendar-summary-inline>i{width:1px;height:28px;background:var(--line)}.calendar-summary-inline>span{display:flex;flex-direction:column;text-align:right}.calendar-summary-inline small{font-family:var(--mono);font-size:6px;color:var(--muted)}.calendar-summary-inline strong{font-family:var(--mono);font-size:12px}
.weekday-row{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line);background:var(--surface-2)}.weekday-row span{height:34px;display:grid;place-items:center;border-right:1px solid var(--line);font-family:var(--mono);font-size:7px;letter-spacing:.1em;color:var(--muted)}.weekday-row span:last-child{border-right:0}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--line);gap:1px}
.day-placeholder{min-height:193px;background:var(--surface-2);padding:14px 11px;display:flex;align-items:flex-start;gap:7px;color:var(--muted-2);position:relative;overflow:hidden}.day-placeholder::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 12px,var(--line) 12px 13px);opacity:.24}.day-placeholder strong{font-family:var(--mono);font-size:13px;font-weight:400}.day-placeholder span{font-family:var(--mono);font-size:6px;margin-top:4px}
.day-card{min-height:193px;background:var(--surface);padding:12px 10px 10px;display:flex;flex-direction:column;position:relative;transition:background .2s ease;min-width:0}.day-card:hover{background:var(--surface-2)}.day-card.is-today{box-shadow:inset 0 0 0 1px var(--primary)}.day-card.is-today::before{content:"";position:absolute;top:0;left:15%;right:15%;height:2px;background:var(--primary);box-shadow:0 0 9px var(--primary)}.day-card.is-future{opacity:.68}.day-card.is-filter-hidden{display:none}
.day-card-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}.day-number{display:flex;align-items:center;gap:7px;background:transparent;color:inherit;padding:0;text-align:left}.day-number strong{font-family:var(--mono);font-size:15px}.day-number span{font-family:var(--mono);font-size:6px;color:var(--muted)}.day-total-badge{font-family:var(--mono);font-size:7px;color:var(--muted);padding:3px 5px;border-radius:5px;background:var(--surface-3)}.day-card.has-meals .day-total-badge{color:var(--green);background:var(--green-soft)}
.special-rule{height:20px;margin-top:-4px;margin-bottom:7px;color:var(--amber);font-family:var(--mono);font-size:6px;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.special-rule svg{width:10px;height:10px;flex:0 0 auto}.special-rule.is-none{visibility:hidden}
.day-meals{display:flex;flex-direction:column;gap:4px}.day-meal-toggle{height:33px;width:100%;border:1px solid transparent;border-radius:7px;background:var(--surface-2);padding:0 7px;display:grid;grid-template-columns:18px 1fr auto 16px;align-items:center;gap:4px;color:var(--muted);text-align:left;transition:.17s ease}.day-meal-toggle:hover{border-color:var(--line-strong);color:var(--text-soft)}.day-meal-toggle.is-on{background:var(--primary-soft);border-color:rgba(255,54,95,.17);color:var(--text)}.day-meal-toggle>svg{width:13px;height:13px}.day-meal-toggle>span{font-size:7px;font-weight:600;white-space:nowrap}.day-meal-toggle>small{font-family:var(--mono);font-size:6px;color:var(--muted)}.day-check{width:14px;height:14px;border:1px solid var(--line-strong);border-radius:4px;display:grid;place-items:center}.day-check svg{width:9px;height:9px;opacity:0}.day-meal-toggle.is-on .day-check{background:var(--primary);border-color:var(--primary);color:#fff}.day-meal-toggle.is-on .day-check svg{opacity:1}
.day-card-footer{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-family:var(--mono);font-size:6px;color:var(--muted)}.day-card-footer strong{font-size:8px;color:var(--text-soft)}
.calendar-empty{padding:80px 20px;text-align:center}.calendar-empty svg{margin:0 auto 13px;color:var(--muted-2)}.calendar-empty h3{font-size:14px}.calendar-empty p{font-size:9px;color:var(--muted);margin-top:4px}

/* Insights */
.insight-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin-bottom:14px}.insight-strip article{padding:18px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column}.insight-strip article:last-child{border-right:0}.insight-strip span{font-family:var(--mono);font-size:7px;letter-spacing:.1em;color:var(--muted)}.insight-strip strong{font-family:var(--mono);font-size:21px;margin:9px 0 2px;letter-spacing:-.04em}.insight-strip small{font-size:7px;color:var(--muted)}
.insights-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.trajectory-panel{min-height:370px}.chart-legend{font-family:var(--mono);font-size:7px;color:var(--muted)}.chart-legend span{display:flex;align-items:center;gap:6px}.chart-legend i{width:14px;height:2px;background:var(--primary)}.insights-chart{height:235px;background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 25%;border-bottom:1px solid var(--line);position:relative}.chart-footer-stat{display:flex;align-items:baseline;gap:12px;padding-top:14px}.chart-footer-stat span{font-family:var(--mono);font-size:7px;color:var(--muted)}.chart-footer-stat strong{font-family:var(--mono);font-size:17px}.chart-footer-stat small{font-size:7px;color:var(--muted)}
.slot-analysis-panel{min-height:370px}.slot-donut{display:grid;grid-template-columns:160px 1fr;gap:25px;align-items:center;padding-top:14px}.slot-donut-visual{width:155px;height:155px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--surface-3) 0 100%);position:relative;transition:background .4s ease}.slot-donut-visual::after{content:"";position:absolute;width:105px;height:105px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1px var(--line)}.slot-donut-visual>div{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column}.slot-donut-visual strong{font-family:var(--mono);font-size:22px}.slot-donut-visual span{font-size:7px;color:var(--muted)}.slot-donut-legend{display:flex;flex-direction:column}.slot-legend-row{display:grid;grid-template-columns:7px 1fr auto;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}.slot-legend-row:last-child{border-bottom:0}.slot-legend-row i{width:6px;height:6px;border-radius:50%}.slot-legend-row span{font-size:8px;color:var(--muted)}.slot-legend-row strong{font-family:var(--mono);font-size:9px}
.weekday-panel{grid-column:1;min-height:340px}.weekday-bars{height:240px;display:grid;grid-template-columns:repeat(7,1fr);gap:12px;align-items:end;padding:5px 8px 0}.weekday-bar{height:100%;display:grid;grid-template-rows:1fr auto;gap:9px;align-items:end;text-align:center}.weekday-bar-track{height:100%;border-bottom:1px solid var(--line);position:relative;display:flex;align-items:flex-end;justify-content:center;background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 33.33%}.weekday-bar-track i{width:min(30px,65%);height:var(--bar-height);min-height:2px;background:linear-gradient(to top,var(--primary),rgba(255,54,95,.25));border-radius:5px 5px 0 0;transition:height .6s var(--ease);position:relative}.weekday-bar-track i::before{content:attr(data-value);position:absolute;left:50%;top:-20px;transform:translateX(-50%);font-family:var(--mono);font-size:7px;color:var(--text-soft)}.weekday-bar>span{font-family:var(--mono);font-size:7px;color:var(--muted)}
.rulebook-panel{grid-column:2;min-height:340px}.locked-pill{font-family:var(--mono);font-size:6px;color:var(--green);background:var(--green-soft);border-radius:20px;padding:5px 8px;display:flex;align-items:center;gap:5px}.locked-pill svg{width:10px;height:10px}.rule-list{display:flex;flex-direction:column}.rule-list>div{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;min-height:54px;border-bottom:1px solid var(--line)}.rule-symbol{width:30px;height:30px;border-radius:8px;background:var(--surface-3);color:var(--primary);display:grid;place-items:center}.rule-symbol svg{width:14px;height:14px}.rule-list>div>span:nth-child(2){display:flex;flex-direction:column}.rule-list strong{font-size:8px}.rule-list small{font-size:6px;color:var(--muted);margin-top:2px}.rule-list b{font-family:var(--mono);font-size:8px;color:var(--text-soft)}.rule-formula{margin-top:15px;background:var(--surface-3);border-radius:9px;padding:12px;display:grid;grid-template-columns:auto 1fr;gap:4px 10px}.rule-formula span{font-family:var(--mono);font-size:6px;color:var(--primary)}.rule-formula code{font-family:var(--mono);font-size:8px;text-align:right}.rule-formula small{grid-column:1/-1;font-size:6px;color:var(--muted)}

/* Settings */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.settings-card{padding:22px}.settings-card-heading{display:flex;align-items:center;gap:12px;padding-bottom:18px;margin-bottom:19px;border-bottom:1px solid var(--line)}.settings-icon{width:38px;height:38px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.settings-icon svg{width:17px;height:17px}.settings-card-heading h2{font-size:14px}.settings-card-heading p{font-size:8px;color:var(--muted);margin-top:2px}.settings-form{display:flex;flex-direction:column;gap:14px}.settings-form .button{align-self:flex-end}.account-meta{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:7px;color:var(--muted)}.verification-badge{display:flex;align-items:center;gap:5px;color:var(--green)}.verification-badge svg{width:12px;height:12px}
.setting-row{min-height:67px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line)}.setting-row:last-child{border-bottom:0}.setting-row>div:first-child{display:flex;flex-direction:column}.setting-row strong{font-size:9px}.setting-row small{font-size:7px;color:var(--muted);margin-top:2px}.setting-value{font-family:var(--mono);font-size:8px;color:var(--muted)}.theme-segment{height:34px;padding:3px;background:var(--surface-3);border-radius:8px;display:flex}.theme-segment button{background:transparent;border-radius:6px;padding:0 10px;font-size:7px;color:var(--muted)}.theme-segment button.is-active{background:var(--surface);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.14)}
.locked-settings{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.locked-settings>div{min-height:104px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:12px;display:flex;flex-direction:column;position:relative}.locked-settings span{font-size:7px;color:var(--muted)}.locked-settings strong{font-family:var(--mono);font-size:11px;margin:13px 0 1px}.locked-settings small{font-size:6px;color:var(--muted)}.locked-settings svg{width:11px;height:11px;position:absolute;right:9px;top:9px;color:var(--muted-2)}
.data-actions{display:flex;flex-direction:column}.data-actions>button{min-height:62px;background:transparent;display:grid;grid-template-columns:38px 1fr 18px;gap:11px;align-items:center;text-align:left;border-bottom:1px solid var(--line);color:var(--text)}.data-actions>button:last-child{border-bottom:0}.data-action-icon{width:35px;height:35px;border-radius:9px;background:var(--surface-3);color:var(--primary);display:grid;place-items:center}.data-action-icon svg{width:15px;height:15px}.data-actions>button>span:nth-child(2){display:flex;flex-direction:column}.data-actions strong{font-size:8px}.data-actions small{font-size:6px;color:var(--muted);margin-top:2px}.data-actions>button>svg{width:14px;height:14px;color:var(--muted)}.data-actions .danger-action .data-action-icon,.data-actions .danger-action>svg{color:var(--primary)}
.security-list{list-style:none;display:flex;flex-direction:column;gap:14px}.security-list li{display:grid;grid-template-columns:21px 1fr;gap:9px}.security-list li>svg{width:18px;height:18px;padding:4px;border-radius:50%;color:var(--green);background:var(--green-soft)}.security-list span{display:flex;flex-direction:column}.security-list strong{font-size:8px}.security-list small{font-size:6px;color:var(--muted);margin-top:2px}.project-status{display:flex;align-items:center;gap:9px;margin-top:17px;padding:11px;border-radius:9px;background:var(--surface-3)}.project-status>span{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}.project-status.is-connected>span{background:var(--green);box-shadow:0 0 8px var(--green)}.project-status.is-offline>span{background:var(--primary);box-shadow:0 0 8px var(--primary)}.project-status>div{display:flex;flex-direction:column}.project-status strong{font-size:8px}.project-status small{font-family:var(--mono);font-size:6px;color:var(--muted)}
.session-settings-card{align-self:start}.app-footer{margin:0 clamp(20px,3.2vw,46px);min-height:55px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--muted-2);font-family:var(--mono);font-size:6px;letter-spacing:.1em}.app-footer span{display:flex;align-items:center;gap:8px}.app-footer i{width:2px;height:2px;background:var(--primary)}
.mobile-bottom-nav{display:none}

/* Popover and modal */
.account-popover{position:fixed;right:28px;top:66px;width:235px;background:var(--surface);border:1px solid var(--line-strong);border-radius:13px;box-shadow:var(--shadow);z-index:120;padding:10px;animation:popoverIn .22s var(--ease)}
@keyframes popoverIn{from{opacity:0;transform:translateY(-7px) scale(.97)}to{opacity:1;transform:none}}
.popover-user{padding:8px;display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center}.popover-user>div{min-width:0;display:flex;flex-direction:column}.popover-user strong{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popover-user small{font-family:var(--mono);font-size:7px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popover-separator{height:1px;background:var(--line);margin:7px 0}.account-popover>button{height:38px;width:100%;background:transparent;border-radius:8px;display:flex;align-items:center;gap:9px;padding:0 9px;color:var(--muted);font-size:8px;text-align:left}.account-popover>button:hover{background:var(--surface-2);color:var(--text)}.account-popover>button svg{width:14px;height:14px}.account-popover>button.popover-danger{color:var(--primary)}
.modal-layer{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(2,4,7,.76);backdrop-filter:blur(7px)}.modal-card{width:min(100%,480px);max-height:calc(100vh - 40px);overflow:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;padding:30px;position:relative;z-index:1;box-shadow:var(--shadow);animation:modalIn .3s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modal-close{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:8px;background:var(--surface-2);color:var(--muted);display:grid;place-items:center}.modal-close svg{width:15px;height:15px}.modal-icon{width:44px;height:44px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;margin-bottom:18px}.modal-icon svg{width:20px;height:20px}.modal-icon.danger{background:var(--primary-soft)}.modal-card h2{font-size:23px;letter-spacing:-.04em;margin:8px 0}.modal-card>p:not(.eyebrow){font-size:10px;color:var(--muted);line-height:1.6;margin-bottom:21px}.modal-card form{display:flex;flex-direction:column;gap:16px}.amount-field .input-shell>b{font-family:var(--mono);font-size:18px;color:var(--primary);margin-left:15px}.amount-field input{font-family:var(--mono);font-size:18px}.field>small{font-size:7px;color:var(--muted);font-weight:400}.advance-preview{background:var(--surface-2);border-radius:9px;padding:12px;display:flex;align-items:center;justify-content:space-between;font-size:8px;color:var(--muted)}.advance-preview strong{font-family:var(--mono);font-size:9px;color:var(--text)}.modal-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:3px}.quick-fill-options{display:flex;flex-direction:column}.quick-fill-options>button{min-height:67px;background:transparent;display:grid;grid-template-columns:40px 1fr 15px;align-items:center;gap:11px;border-top:1px solid var(--line);text-align:left;color:var(--text);transition:.2s ease}.quick-fill-options>button:hover{padding-left:5px}.quick-fill-options>button>svg{width:14px;height:14px;color:var(--muted)}.bulk-icon{width:38px;height:38px;border-radius:9px;background:var(--surface-3);color:var(--primary);display:grid;place-items:center}.bulk-icon svg{width:16px;height:16px}.quick-fill-options>button>span:nth-child(2){display:flex;flex-direction:column}.quick-fill-options strong{font-size:9px}.quick-fill-options small{font-size:7px;color:var(--muted);margin-top:2px}.quick-fill-options .bulk-clear .bulk-icon{color:var(--primary)}.confirm-card{width:min(100%,430px)}
.toast-region{position:fixed;z-index:1000;right:22px;bottom:22px;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{width:min(355px,calc(100vw - 40px));min-height:58px;border:1px solid var(--line-strong);background:var(--surface);box-shadow:var(--shadow);border-radius:11px;padding:12px 14px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;animation:toastIn .3s var(--ease);pointer-events:auto}.toast.is-leaving{animation:toastOut .25s ease forwards}.toast-icon{width:28px;height:28px;border-radius:8px;background:var(--green-soft);color:var(--green);display:grid;place-items:center}.toast.is-error .toast-icon{background:var(--primary-soft);color:var(--primary)}.toast-icon svg{width:14px;height:14px}.toast>span:nth-child(2){display:flex;flex-direction:column}.toast strong{font-size:8px}.toast small{font-size:7px;color:var(--muted);margin-top:1px}.toast button{background:transparent;color:var(--primary);font-size:7px;font-weight:700;padding:7px}.toast-progress{position:absolute;height:2px;background:var(--primary);left:10px;right:10px;bottom:0;transform-origin:left;animation:toastProgress 4s linear forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(15px)}to{opacity:1;transform:none}}@keyframes toastOut{to{opacity:0;transform:translateX(15px)}}@keyframes toastProgress{to{transform:scaleX(0)}}

/* Loading and pending states */
.is-pending{pointer-events:none;opacity:.65}.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:skeleton 1.3s infinite}@keyframes skeleton{to{background-position:-200% 0}}

/* Responsive */
@media (max-width:1300px){
  :root{--sidebar:220px}
  .metric-card{padding:17px}.metric-bottom{align-items:flex-end;flex-direction:column-reverse}.metric-bottom span{align-self:flex-start}.metric-bottom small{align-self:flex-end;margin-top:-13px}
  .progress-content{grid-template-columns:155px 1fr;gap:18px}.meal-ring{width:145px;height:145px}
  .day-card{padding:10px 7px;min-height:188px}.day-meal-toggle{padding:0 5px;grid-template-columns:15px 1fr auto 14px}.day-meal-toggle>span{font-size:6px}.day-meal-toggle>small{font-size:5.5px}
  .slot-donut{grid-template-columns:140px 1fr;gap:15px}.slot-donut-visual{width:135px;height:135px}.slot-donut-visual::after{width:91px;height:91px}
}
@media (max-width:1100px){
  .auth-view{grid-template-columns:1fr 440px}.auth-showcase{padding-left:40px;padding-right:40px}.auth-rules>div{padding:13px 10px}.auth-preview{width:94%}
  .metric-grid{grid-template-columns:repeat(2,1fr)}.metric-card{min-height:150px}.metric-bottom{flex-direction:row;align-items:center}.metric-bottom small{align-self:auto;margin:0}
  .calendar-grid{grid-template-columns:repeat(4,1fr)}.weekday-row{display:none}.day-card{min-height:192px}.day-placeholder{display:none}
  .insight-strip{grid-template-columns:repeat(2,1fr)}.insight-strip article:nth-child(2){border-right:0}.insight-strip article:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .locked-settings{grid-template-columns:1fr}.locked-settings>div{min-height:78px}.settings-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--sidebar:246px}
  .auth-view{display:block}.auth-showcase{display:none}.auth-panel-wrap{padding:45px 25px}.auth-mobile-brand{display:flex}.auth-copyright{position:fixed}
  .sidebar{transform:translateX(-105%);transition:transform .3s var(--ease);box-shadow:var(--shadow)}.sidebar.is-open{transform:none}.sidebar-backdrop.is-open{display:block}
  .app-main{margin-left:0}.mobile-menu-button{display:grid}.topbar{padding:0 18px}.page-identity{display:none}
  .view-stage{padding-left:18px;padding-right:18px}.app-footer{margin-left:18px;margin-right:18px}
  .account-popover{right:18px}
}
@media (max-width:720px){
  :root{--topbar:66px;--radius:15px}
  body{padding-bottom:66px}
  .topbar{gap:8px}.topbar-right{gap:6px}.sync-status{display:none}.month-switcher{grid-template-columns:32px minmax(100px,128px) 32px;height:38px}.topbar .icon-button:not(.mobile-menu-button){display:none}.top-avatar{width:36px;height:36px}
  .demo-banner{padding:9px 16px}.demo-banner>div{align-items:flex-start}.demo-banner .text-button{white-space:nowrap}
  .view-stage{padding:29px 14px 35px}.view-heading{display:block;margin-bottom:24px}.view-heading h1{font-size:34px}.view-heading-actions{margin-top:18px}.view-heading-actions .button{flex:1}
  .metric-grid{gap:9px;margin-bottom:9px}.metric-card{min-height:145px;padding:15px}.metric-card>strong{font-size:25px}.metric-bottom{align-items:flex-start;flex-direction:column-reverse}.metric-bottom small{align-self:flex-start;margin:0}.metric-index{display:none}
  .overview-grid{grid-template-columns:1fr;gap:9px;margin-bottom:9px}.panel{padding:17px}.progress-panel,.selected-day-panel,.activity-panel,.quick-actions-panel{min-height:unset}
  .recent-panel{display:none}.progress-content{grid-template-columns:140px 1fr}.meal-ring{width:135px;height:135px}.slot-breakdown>div{padding:9px 0}
  .selected-day-toggles{gap:6px}.activity-panel{min-height:270px}
  .calendar-toolbar{display:block}.calendar-filter{overflow:auto;padding-bottom:4px}.filter-chip{white-space:nowrap}.calendar-legend{display:none}.calendar-panel-heading{height:73px;padding:0 15px}
  .calendar-grid{grid-template-columns:repeat(2,1fr)}.day-card{min-height:194px}
  .insight-strip{grid-template-columns:1fr 1fr}.insight-strip article{padding:15px}.insight-strip strong{font-size:17px}.insights-grid{grid-template-columns:1fr;gap:9px}.weekday-panel,.rulebook-panel{grid-column:1}.trajectory-panel,.slot-analysis-panel{min-height:unset}.slot-donut{justify-content:center}.weekday-bars{gap:5px;padding-left:0;padding-right:0}
  .settings-grid{gap:9px}.settings-card{padding:17px}.setting-row{align-items:flex-start;flex-direction:column;padding:13px 0}.theme-segment{width:100%}.theme-segment button{flex:1}.settings-form .button{width:100%}
  .app-footer{display:none}.mobile-bottom-nav{display:grid;position:fixed;z-index:75;left:0;right:0;bottom:0;height:66px;padding-bottom:env(safe-area-inset-bottom);grid-template-columns:repeat(4,1fr);background:var(--surface-glass);border-top:1px solid var(--line);backdrop-filter:blur(20px)}.mobile-bottom-nav button{background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:7px;position:relative}.mobile-bottom-nav button svg{width:17px;height:17px}.mobile-bottom-nav button.is-active{color:var(--primary)}.mobile-bottom-nav button.is-active::before{content:"";position:absolute;top:-1px;width:28px;height:2px;background:var(--primary);box-shadow:0 0 8px var(--primary)}
  .toast-region{right:10px;bottom:77px}.modal-card{padding:24px 19px}.modal-actions .button{flex:1}
}
@media (max-width:480px){
  .auth-panel-wrap{align-items:flex-start;padding:28px 18px 60px}.auth-mobile-brand{margin-bottom:29px}.auth-panel{max-width:none}.form-heading h2{font-size:24px}.auth-alt-grid{grid-template-columns:1fr}.auth-copyright{position:absolute;bottom:14px;text-align:center}
  .metric-grid{grid-template-columns:1fr 1fr}.metric-card{min-height:137px;padding:13px}.metric-card>strong{font-size:22px;margin:16px 0}.metric-label{font-size:6px}.metric-icon{width:25px;height:25px}.metric-top{grid-template-columns:25px 1fr}.metric-bottom{font-size:7px}.metric-bottom small{font-size:6px}.metric-bottom span{white-space:nowrap}.inline-action{font-size:7px}
  .progress-content{grid-template-columns:1fr;justify-items:center;gap:12px}.slot-breakdown{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.slot-breakdown>div{grid-template-columns:7px 1fr;padding:9px 6px;border:1px solid var(--line);border-radius:8px}.slot-breakdown strong{grid-column:1/-1;font-size:11px}.slot-breakdown small{grid-column:1/-1;margin:0}.slot-breakdown span:not(.slot-dot){font-size:7px}
  .calendar-grid{grid-template-columns:1fr}.day-card{min-height:188px;padding:12px 14px}.day-meal-toggle{grid-template-columns:20px 1fr auto 18px}.day-meal-toggle>span{font-size:7px}.day-meal-toggle>small{font-size:6px}.calendar-summary-inline{gap:10px}.calendar-summary-inline>span:first-child{display:none}.calendar-summary-inline>i{display:none}
  .insight-strip{grid-template-columns:1fr}.insight-strip article{border-right:0!important;border-bottom:1px solid var(--line)}.insight-strip article:last-child{border-bottom:0}.slot-donut{grid-template-columns:125px 1fr;gap:10px}.slot-donut-visual{width:120px;height:120px}.slot-donut-visual::after{width:81px;height:81px}.weekday-bars{height:210px}.weekday-bar-track i{width:60%}
  .locked-settings{grid-template-columns:1fr}.account-meta{align-items:flex-start;flex-direction:column;gap:5px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}