/* iDev × client: shared design system.
   iDev "Liquid Glass retina ice" is the frame (chrome, panels, controls);
   the client (Coffee Crush) is the subject (serif headlines, blush, espresso, latte). */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Young Serif";src:url(/assets/fonts/young-serif.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Yellowtail";src:url(/assets/fonts/yellowtail.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  /* iDev */
  --deep:#060809; --ink:#10161A; --ink2:#1A232A; --ice:#ECF4FA; --ice2:#F6FAFD; --sky:#9EC2DD; --sky-deep:#5691BE; --sky-ink:#2F6C9A;
  --steel:#5B6B78; --steel2:#8597A6; --hair:rgba(16,22,26,.09); --hair2:rgba(16,22,26,.14);
  /* client (overridden per client from config) */
  --esp:#24150F; --esp2:#341F16; --cream:#F7EEE3; --paper:#FFFAF4; --blush:#F4C9CB; --rose:#9E5A62; --green:#0F8A5F;
  /* type */
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --disp:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --serif:"Young Serif",Georgia,serif;
  --script:"Yellowtail","Brush Script MT",cursive;
  /* glass */
  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.8);
  --glass-dark:rgba(18,26,33,.55);
  --spec:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55);
  --spec-dark:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.07);
  --lift:0 1px 2px rgba(16,22,26,.05), 0 8px 24px -8px rgba(30,60,90,.16), 0 30px 60px -30px rgba(30,60,90,.22);
  --lift-dark:0 20px 60px -20px rgba(0,0,0,.6);
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px;
  --gut:clamp(16px,4vw,40px); --max:1160px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--ui);font-size:16px;line-height:1.55;color:var(--ink);background:var(--ice);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-feature-settings:"cv11","ss01"}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.1}
p{margin:0 0 1em}
:focus-visible{outline:2.5px solid var(--sky-deep);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
[hidden]{display:none!important}

/* ambient ice canvas with soft blue orbs */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(120% 80% at 50% -10%,#F8FBFE 0%,var(--ice) 55%,#E4EEF6 100%)}
.ambient::before,.ambient::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.ambient::before{width:520px;height:520px;left:-140px;top:-120px;background:radial-gradient(circle,#CFE2F1 0%,rgba(207,226,241,0) 70%)}
.ambient::after{width:620px;height:620px;right:-200px;bottom:-220px;background:radial-gradient(circle,#BCD6EA 0%,rgba(188,214,234,0) 70%)}
.ambient i{position:absolute;width:360px;height:360px;right:12%;top:30%;border-radius:50%;background:radial-gradient(circle,rgba(244,201,203,.45),rgba(244,201,203,0) 70%);filter:blur(50px)}

/* glass panels */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border-radius:var(--r-lg);box-shadow:var(--spec),var(--lift);position:relative}
.glass-strong{background:var(--glass-strong)}
.glass-dark{background:var(--glass-dark);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border-radius:var(--r-lg);box-shadow:var(--spec-dark),var(--lift-dark);color:var(--ice)}

/* top bar: iDev × Client */
.bar{position:sticky;top:0;z-index:40;padding:10px 0;transition:background-color .3s,box-shadow .3s}
.bar .wrap{display:flex;align-items:center;gap:12px;min-height:48px}
.bar.is-stuck{background:rgba(236,244,250,.72);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);box-shadow:0 1px 0 var(--hair)}
.bar.on-dark.is-stuck{background:rgba(6,8,9,.6);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.cobrand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;color:inherit}
.cobrand .idmark{width:30px;height:30px;border-radius:9px;background:#0B1014 url(/assets/logo-mark.png) center/78% no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 2px 8px rgba(6,8,9,.25)}
.cobrand .x{font-size:13px;color:var(--steel2);font-weight:500}
.cobrand .bh{width:30px;height:30px}
.cobrand .names{display:flex;flex-direction:column;line-height:1.05}
.cobrand .names b{font-weight:650;font-size:14.5px;letter-spacing:-.01em}
.cobrand .names small{font-size:12px;color:var(--steel);font-weight:500}
.on-dark .cobrand .names small{color:#93A5B4}
.bar .spacer{flex:1}
.bar .ctx{font-size:13px;font-weight:550;color:var(--steel)}
.on-dark .bar .ctx,.bar.on-dark .ctx{color:#9FB2C2}

/* buttons */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 22px;border-radius:999px;border:0;font-weight:600;font-size:15.5px;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s,background-color .2s,opacity .2s;-webkit-tap-highlight-color:transparent;position:relative}
.btn:active{transform:scale(.975)}
.btn svg{width:18px;height:18px;flex:none}
.btn-sky{background:linear-gradient(180deg,#B5D3EA 0%,var(--sky) 55%,#8DB6D5 100%);color:#061019;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(47,108,154,.25),0 8px 22px -8px rgba(86,145,190,.65)}
.btn-sky:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(47,108,154,.25),0 12px 28px -8px rgba(86,145,190,.8)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -10px rgba(16,22,26,.6)}
.btn-ink:hover{background:#1B252C}
.btn-glass{background:rgba(255,255,255,.55);color:var(--ink);box-shadow:var(--spec),0 4px 14px -6px rgba(30,60,90,.2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-glass:hover{background:rgba(255,255,255,.75)}
.btn-ghost-dark{background:rgba(255,255,255,.07);color:var(--ice);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.12)}
.btn-blush{background:var(--blush);color:var(--esp);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.btn-lg{--h:56px;font-size:16.5px;padding:0 28px}
.btn-sm{--h:40px;font-size:14px;padding:0 16px}
.btn-block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none}
.btn .spin{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.link{color:var(--sky-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(47,108,154,.35)}
.link:hover{text-decoration-color:currentColor}
.textbtn{background:none;border:0;padding:8px 4px;color:var(--sky-ink);font-weight:600;min-height:44px}

/* pills */
.pill{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:4px 12px 4px 6px;border-radius:999px;font-size:13px;font-weight:550;background:rgba(255,255,255,.6);box-shadow:var(--spec)}
.pill.dark{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#D6E3EE}
.pill .av{width:22px;height:22px;border-radius:50%;background:var(--esp);display:grid;place-items:center}
.pill .av svg{width:15px;height:15px}
.testmode{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:6px;background:#FFE8C2;color:#7A4A00;font-size:11.5px;font-weight:700;letter-spacing:.01em}
.testmode::before{content:"";width:6px;height:6px;border-radius:50%;background:#E08A00}
.status{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--hair);color:var(--steel)}
.status.ok{background:rgba(15,138,95,.12);color:#0A6B49}
.status.due{background:rgba(86,145,190,.14);color:var(--sky-ink)}
.status.warn{background:#FFF1D6;color:#7A4A00}
.status.bad{background:#FDE3E3;color:#A12828}

/* forms */
.field{display:grid;gap:7px;margin:0 0 16px}
.field>label,.lbl{font-size:13.5px;font-weight:600;color:#31404B}
.hint{font-size:12.5px;color:var(--steel);margin:0}
.input,.select,.textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--hair2);background:rgba(255,255,255,.85);font-size:16px;line-height:1.3;transition:border-color .15s,box-shadow .15s,background-color .15s;-webkit-appearance:none;appearance:none}
.textarea{min-height:110px;resize:vertical;line-height:1.5}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B6B78' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.input:hover,.select:hover,.textarea:hover{border-color:rgba(16,22,26,.24)}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--sky-deep);box-shadow:0 0 0 4px rgba(158,194,221,.45);background:#fff}
.input.is-bad,.select.is-bad{border-color:#D44;box-shadow:0 0 0 4px rgba(221,68,68,.12)}
.err{font-size:13px;color:#B42318;font-weight:550;margin:0;min-height:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.row2.stack{grid-template-columns:1fr}}

/* switch */
.switch{position:relative;display:inline-flex;width:52px;height:32px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:#CAD5DE;transition:background-color .25s;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2),inset 0 -1px 0 rgba(0,0,0,.04);transition:transform .3s var(--spring)}
.switch input:checked+span{background:var(--green)}
.switch input:checked+span::after{transform:translateX(20px)}
.switch input:focus-visible+span{outline:2.5px solid var(--sky-deep);outline-offset:3px}

/* checkbox */
.check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;min-height:44px;padding:4px 0}
.check input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:1px 0 0;border-radius:7px;border:1.5px solid #9FB0BD;background:#fff;flex:none;display:grid;place-items:center;transition:background-color .15s,border-color .15s;cursor:pointer}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{content:"";width:11px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--hair2);background:rgba(255,255,255,.7);font-size:14.5px;font-weight:550;transition:all .18s var(--ease)}
.chip:hover{background:#fff}
.chip[aria-pressed="true"]{background:var(--esp);border-color:var(--esp);color:var(--cream)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:200;transform:translate(-50%,20px);opacity:0;padding:12px 18px;border-radius:999px;background:rgba(16,22,26,.92);color:#fff;font-size:14.5px;font-weight:550;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transition:all .35s var(--ease);pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* modal sheet */
.sheet{border:0;padding:0;background:transparent;max-width:min(640px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 32px);color:var(--ink)}
.sheet::backdrop{background:rgba(6,8,9,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet[open]{animation:sheetin .45s var(--ease)}
@keyframes sheetin{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.sheet-in{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);border-radius:24px;box-shadow:var(--spec),0 40px 80px -20px rgba(6,8,9,.5);overflow:auto;max-height:calc(100dvh - 32px)}
.sheet-head{display:flex;align-items:center;gap:12px;padding:20px 22px 0}
.sheet-head h2{font-size:20px;flex:1}
.x-btn{width:40px;height:40px;border-radius:50%;border:0;background:var(--hair);display:grid;place-items:center;flex:none}
.x-btn:hover{background:var(--hair2)}
.x-btn svg{width:16px;height:16px}

/* skeleton + error states */
.state{display:grid;place-items:center;min-height:60vh;text-align:center;padding:40px var(--gut)}
.state h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,5vw,40px);margin:18px 0 10px;letter-spacing:-.01em}
.state p{color:var(--steel);max-width:44ch;margin:0 auto 22px}
.state .state-mark{width:56px;height:56px;margin:auto}
.loader{width:44px;height:44px;border-radius:50%;border:3px solid rgba(86,145,190,.2);border-top-color:var(--sky-deep);animation:spin .9s linear infinite}

/* the bean-heart */
.beanheart{display:block}
.footer{padding:40px 0 calc(40px + env(safe-area-inset-bottom));font-size:13px;color:var(--steel)}
.footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.footer a{color:inherit}

/* sign-in card */
.signin{display:grid;place-items:center;min-height:calc(100vh - 80px);padding-top:24px;padding-bottom:40px}
.si-card{width:100%;max-width:420px;padding:30px;border-radius:var(--r-xl);text-align:center}
.si-mark{width:96px;height:96px;margin:0 auto 12px}
.si-card h1{font-family:var(--serif);font-weight:400;font-size:30px;color:var(--esp);margin:0 0 6px}
.si-sub{color:var(--steel);margin:0 0 22px}
.si-card form{text-align:left}
.si-magic{margin-top:10px}
.si-help{margin-top:16px}