@font-face{font-family:Manrope;src:url('/assets/manrope-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/manrope-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/manrope-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/manrope-800.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --bg:#f3f7f6;
  --surface:#fff;
  --ink:#102625;
  --muted:#526763;
  --accent:#0b5f59;
  --accent-soft:#ddebe8;
  --focus:#5aa49b;
  --near-black:#111817;
  --success:#177264;
  --warning:#9a5b00;
  --error:#b42318;
  --line:#d7e3e0;
  --shadow-sm:0 3px 8px rgba(16,38,37,.08);
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --ease:cubic-bezier(.16,1,.3,1);
  --z-sticky:20;
  --z-toast:50;
}

*,*::before,*::after{box-sizing:border-box}
html{font-family:Manrope,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-size:1rem;line-height:1.55;text-rendering:optimizeLegibility}
button,input,textarea,select{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:0;border-radius:12px;padding:.8rem 1.1rem;font-weight:700;text-decoration:none;cursor:pointer;transition:transform 160ms var(--ease),background-color 160ms var(--ease),color 160ms var(--ease),border-color 160ms var(--ease)}
.button:active{transform:scale(.97)}
.button-primary{background:var(--accent);color:#fff}
.button-primary:hover{background:#084e49}
.button-secondary{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.button-secondary:hover{border-color:var(--focus);color:var(--accent)}
.button-disabled{background:#e4e9e7;color:#596561;cursor:not-allowed}

.ring-mark{width:38px;height:38px;position:relative;display:inline-grid;place-items:center;flex:0 0 auto}
.ring-mark i{position:absolute;border:2px solid currentColor;border-radius:50%}
.ring-mark i:nth-child(1){width:34px;height:34px}
.ring-mark i:nth-child(2){width:24px;height:24px}
.ring-mark i:nth-child(3){width:13px;height:13px}

/* Public landing */
.public-page{--accent:var(--client-accent,#0b5f59);min-height:100svh;background:var(--surface)}
.public-header{height:72px;display:flex;align-items:center;max-width:1180px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem);background:var(--surface)}
.co-brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;min-width:0}
.co-brand img,.client-monogram{width:44px;height:44px;border-radius:50%;object-fit:cover}
.client-monogram{display:grid;place-items:center;background:var(--accent);color:#fff;font-size:1.1rem;font-weight:800}
.co-brand strong{font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-brand>span:last-child{color:var(--muted);font-weight:600}
.public-hero{min-height:min(76svh,760px);position:relative;display:flex;align-items:center;background-image:linear-gradient(90deg,rgba(5,19,18,.86) 0%,rgba(5,19,18,.56) 48%,rgba(5,19,18,.08) 82%),var(--hero-image);background-size:cover;background-position:center;overflow:hidden}
.public-hero::after{content:"";position:absolute;left:50%;bottom:-84px;width:220px;height:220px;border:1px solid rgba(90,164,155,.65);border-radius:50%;box-shadow:0 0 0 20px rgba(90,164,155,.16),0 0 0 42px rgba(90,164,155,.1);pointer-events:none}
.hero-content{position:relative;z-index:1;width:min(1180px,100%);margin:0 auto;padding:clamp(3rem,8vw,6rem) clamp(1.25rem,5vw,4rem);color:#fff}
.hero-content h1{max-width:14ch;margin:0;font-size:clamp(2.55rem,6vw,4.65rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.hero-content p{max-width:42ch;margin:var(--space-5) 0 0;color:#e5efec;font-size:clamp(1rem,2vw,1.18rem);line-height:1.65;text-wrap:pretty}
.hero-action{margin-top:var(--space-6)}
.hero-cta-button{background:var(--accent);color:#fff;padding-inline:1.4rem}
.hero-cta-button:hover{filter:brightness(.9)}
.coffee-section{max-width:1180px;margin:0 auto;padding:clamp(4.5rem,9vw,7rem) clamp(1.25rem,5vw,4rem)}
.section-heading{max-width:44rem;margin-bottom:clamp(3rem,6vw,4.5rem)}
.section-heading h2,.download-section h2{margin:0;font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.section-heading p{max-width:42ch;margin:var(--space-4) 0 0;color:var(--muted);text-wrap:pretty}
.coffee-list{display:grid}
.coffee-entry{display:grid;grid-template-columns:minmax(300px,.95fr) minmax(340px,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.coffee-entry+.coffee-entry{margin-top:clamp(3rem,5vw,4rem);padding-top:clamp(3rem,5vw,4rem);border-top:1px solid var(--line)}
.coffee-entry>img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--accent-soft)}
.coffee-entry:nth-child(even)>img{grid-column:2}
.coffee-entry:nth-child(even) .coffee-copy{grid-column:1;grid-row:1}
.coffee-copy{min-width:0;padding-block:var(--space-2)}
.origin{margin:0 0 var(--space-2);color:var(--accent);font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.coffee-copy h3{margin:0;font-size:clamp(1.35rem,2.8vw,2.15rem);line-height:1.14;letter-spacing:-.025em;text-wrap:balance}
.coffee-copy dl{display:grid;gap:var(--space-2);margin:var(--space-5) 0}
.coffee-copy dl div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--space-3)}
.coffee-copy dt{color:var(--accent);font-weight:700}
.coffee-copy dd{margin:0;color:var(--ink)}
.available-button{min-height:44px;border:0;border-radius:12px;background:var(--accent-soft);color:var(--accent);padding:.75rem 1rem;font-weight:800;cursor:pointer;transition:background-color 160ms var(--ease),transform 160ms var(--ease)}
.available-button:hover{background:#c8dfda}
.available-button:active{transform:scale(.98)}
.beangeek-guide{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--accent-soft);border-radius:14px;color:var(--accent);animation:guide-in 220ms var(--ease)}
.beangeek-guide .ring-mark{width:34px;height:34px}
.beangeek-guide p{margin:0;color:var(--ink)}
.beangeek-guide a{min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--accent);border-radius:10px;padding:.65rem .9rem;font-weight:800;text-decoration:none}
.download-section{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);width:min(calc(100% - 2rem),1080px);margin:0 auto clamp(4rem,8vw,6rem);padding:clamp(2rem,5vw,3.5rem);background:var(--accent-soft);border-radius:16px}
.download-section p{max-width:42ch;margin:var(--space-3) 0 0;color:var(--muted)}
.app-store-button{min-height:54px;display:inline-flex;align-items:center;gap:.7rem;border-radius:12px;background:var(--near-black);color:#fff;padding:.9rem 1.2rem;font-weight:800;text-decoration:none;white-space:nowrap}
.app-store-symbol{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:1.35rem;line-height:1}
.public-footer{display:flex;justify-content:center;padding:var(--space-6);border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.public-footer a{text-decoration:none}

/* Login and portal home */
.portal-brand{display:inline-flex;align-items:center;gap:.65rem;font-weight:800;text-decoration:none}
.auth-layout{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr)}
.auth-brand{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(2rem,6vw,5rem);background:var(--accent);color:#fff}
.auth-brand>div{max-width:48rem}
.auth-brand p{color:#cce0dc;font-weight:700}
.auth-brand h1{max-width:13ch;margin:var(--space-4) 0 0;font-size:clamp(2.8rem,6vw,5.5rem);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.auth-panel{display:flex;flex-direction:column;justify-content:center;gap:var(--space-7);padding:clamp(2rem,7vw,6rem);background:var(--surface)}
.auth-kicker{margin:0;color:var(--accent);font-weight:800}
.auth-panel h2{margin:var(--space-2) 0 0;font-size:2.1rem;line-height:1.15;letter-spacing:-.03em}
.auth-panel>div>p:last-child{color:var(--muted)}
.auth-panel form{display:grid;gap:var(--space-5);max-width:30rem}
label{display:grid;gap:.45rem;color:var(--ink);font-size:.86rem;font-weight:700}
input,textarea,select{width:100%;min-height:46px;border:1px solid #bdceca;border-radius:10px;background:var(--surface);color:var(--ink);padding:.72rem .82rem;transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)}
textarea{min-height:92px;resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:#60716d;opacity:1}
input:focus,textarea:focus,select:focus{border-color:var(--focus);box-shadow:0 0 0 3px #d6ebe7;outline:0}
.form-message{min-height:1.5rem;margin:0;color:var(--error);font-size:.9rem}
.portal-home,.not-found{min-height:100svh;display:grid;place-items:center;padding:var(--space-6)}
.portal-home{position:relative;overflow:hidden;place-items:center start;padding:clamp(2rem,8vw,7rem);background:var(--surface)}
.portal-home::after{content:"";position:absolute;right:clamp(-9rem,-7vw,-4rem);bottom:clamp(-8rem,-5vw,-3rem);width:clamp(16rem,34vw,34rem);aspect-ratio:1;border:1px solid var(--focus);border-radius:50%;box-shadow:0 0 0 clamp(2rem,5vw,5rem) rgba(90,164,155,.14),0 0 0 clamp(4rem,10vw,10rem) rgba(90,164,155,.07);pointer-events:none}
.portal-home-copy{position:relative;z-index:1;max-width:60rem}
.portal-home h1{max-width:13ch;margin:clamp(4rem,9vw,7rem) 0 var(--space-5);font-size:clamp(3rem,8vw,6rem);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.portal-home p{max-width:55ch;color:var(--muted);font-size:1.15rem}
.not-found{align-content:center;gap:var(--space-4);text-align:center}

/* Admin */
.admin-loading{min-height:100svh;display:grid;place-content:center;gap:var(--space-4);text-align:center;color:var(--muted)}
.loading-mark{display:flex;align-items:center;justify-content:center;gap:var(--space-3);color:var(--ink);font-weight:800}
.admin-shell{min-height:100svh;display:grid;grid-template-columns:250px minmax(0,1fr);background:var(--bg)}
.admin-sidebar{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;padding:var(--space-5);background:#092f2d;color:#fff}
.admin-sidebar .portal-brand{margin-bottom:var(--space-7)}
.admin-nav{display:grid;gap:var(--space-2)}
.admin-nav button{min-height:44px;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:10px;background:transparent;color:#d9e8e5;padding:.7rem .8rem;font-weight:700;text-align:left;cursor:pointer}
.admin-nav button[aria-current="page"]{background:#0b5f59;color:#fff}
.landing-count{min-width:1.7rem;border-radius:999px;background:#174e4a;padding:.15rem .45rem;text-align:center;font-size:.75rem}
.admin-user{display:flex;align-items:center;gap:var(--space-3);margin-top:auto;padding-top:var(--space-5);border-top:1px solid #35615d}
.user-avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#0f766e;font-weight:800}
.admin-user button{margin-left:auto;border:0;background:transparent;color:#d9e8e5;text-decoration:underline;cursor:pointer}
.admin-main{min-width:0}
.admin-topbar{position:sticky;top:0;z-index:var(--z-sticky);min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line);background:rgba(243,247,246,.96)}
.admin-title{min-width:0}
.admin-title h1{margin:0;font-size:1.55rem;line-height:1.2;letter-spacing:-.025em}
.admin-title p{margin:.2rem 0 0;color:var(--muted);font-size:.88rem}
.status-badge{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;background:#eef2f1;color:var(--muted);padding:.35rem .65rem;font-size:.78rem;font-weight:700}
.status-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#87948f}
.status-badge.published{background:#d8f3ee;color:var(--success)}
.status-badge.published::before{background:var(--success)}
.admin-actions{display:flex;gap:var(--space-2)}
.admin-layout{display:grid;grid-template-columns:minmax(500px,1fr) minmax(330px,420px);align-items:start;min-height:calc(100svh - 76px)}
.editor-column{min-width:0;padding:var(--space-6)}
.editor-empty{min-height:60svh;display:grid;place-items:center;text-align:center;color:var(--muted)}
.editor-empty>div{max-width:32rem}
.editor-empty h2{color:var(--ink);font-size:1.8rem;letter-spacing:-.03em}
.landing-picker{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.landing-picker select{max-width:22rem}
.text-button{min-height:44px;border:0;background:transparent;color:var(--accent);font-weight:800;cursor:pointer}
.editor-form{display:grid;gap:var(--space-7)}
.form-section{display:grid;grid-template-columns:160px minmax(0,1fr);gap:var(--space-6);padding-bottom:var(--space-7);border-bottom:1px solid var(--line)}
.form-section-title h2{margin:0;font-size:1.05rem;line-height:1.3}
.form-section-title p{margin:var(--space-2) 0 0;color:var(--muted);font-size:.84rem}
.form-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.field-full{grid-column:1/-1}
.field-hint{color:var(--muted);font-size:.76rem;font-weight:500}
.color-field{display:grid;grid-template-columns:46px minmax(0,1fr);gap:var(--space-2)}
.color-field input[type="color"]{height:46px;padding:4px;cursor:pointer}
.upload-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2);align-items:end}
.upload-button{position:relative;overflow:hidden}
.upload-button input{position:absolute;inset:0;opacity:0;cursor:pointer}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:46px}
.switch{position:relative;width:48px;height:28px;flex:0 0 auto}
.switch input{position:absolute;opacity:0}
.switch span{position:absolute;inset:0;border-radius:999px;background:#b6c3c0;cursor:pointer;transition:background-color 160ms var(--ease)}
.switch span::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform 160ms var(--ease)}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(20px)}
.coffee-editor-list{display:grid;gap:var(--space-3)}
.coffee-editor{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.coffee-editor summary{min-height:66px;display:grid;grid-template-columns:auto 52px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);cursor:pointer;list-style:none}
.coffee-editor summary::-webkit-details-marker{display:none}
.coffee-editor summary img{width:52px;height:52px;border-radius:9px;object-fit:cover;background:var(--accent-soft)}
.drag-controls{display:grid;gap:2px}
.drag-controls button{width:30px;height:26px;border:0;border-radius:6px;background:#edf3f1;color:var(--accent);cursor:pointer}
.coffee-summary-copy{min-width:0}
.coffee-summary-copy strong,.coffee-summary-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coffee-summary-copy span{color:var(--muted);font-size:.78rem}
.coffee-editor-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);padding:var(--space-4);border-top:1px solid var(--line)}
.coffee-remove{justify-self:start;color:var(--error)}
.preview-column{position:sticky;top:76px;height:calc(100svh - 76px);overflow:auto;padding:var(--space-6);border-left:1px solid var(--line);background:#edf3f1}
.preview-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);color:var(--muted);font-size:.82rem;font-weight:700}
.phone-frame{width:min(100%,360px);min-height:650px;margin:0 auto;border:9px solid #102625;border-radius:42px;background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.phone-bar{height:26px;display:grid;place-items:center;background:#102625;color:#fff;font-size:.65rem}
.phone-content{background:var(--surface)}
.preview-hero{min-height:290px;display:flex;align-items:flex-end;padding:var(--space-5);background-size:cover;background-position:center;position:relative;color:#fff}
.preview-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,19,18,.85),rgba(5,19,18,.12))}
.preview-hero>div{position:relative;z-index:1}
.preview-hero h2{margin:0;font-size:1.65rem;line-height:1.08;letter-spacing:-.03em}
.preview-hero p{margin:var(--space-2) 0 var(--space-4);font-size:.78rem;color:#e4eeec}
.preview-hero span{display:inline-flex;border-radius:9px;background:var(--accent);padding:.55rem .75rem;font-size:.72rem;font-weight:800}
.preview-coffees{padding:var(--space-4)}
.preview-coffees h3{margin:0 0 var(--space-4);font-size:1.05rem}
.preview-coffee{display:grid;grid-template-columns:70px minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--line)}
.preview-coffee img{width:70px;height:70px;border-radius:9px;object-fit:cover;background:var(--accent-soft)}
.preview-coffee strong,.preview-coffee small{display:block}
.preview-coffee strong{font-size:.82rem}
.preview-coffee small{margin-top:.25rem;color:var(--muted);font-size:.68rem}
.preview-empty{padding:var(--space-6);text-align:center;color:var(--muted);font-size:.8rem}
.toast{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:var(--z-toast);max-width:25rem;border-radius:12px;background:var(--near-black);color:#fff;padding:.85rem 1rem;box-shadow:var(--shadow-sm);animation:toast-in 180ms var(--ease)}
.toast.error{background:#7a271a}

@keyframes guide-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:1050px){
  .admin-layout{grid-template-columns:minmax(0,1fr)}
  .preview-column{position:relative;top:auto;height:auto;border-left:0;border-top:1px solid var(--line)}
  .phone-frame{min-height:580px}
}

@media (max-width:760px){
  .public-header{height:64px}
  .co-brand{gap:.45rem}
  .co-brand{width:100%;font-size:.9rem}
  .co-brand strong{min-width:0}
  .public-hero{min-height:75svh;align-items:flex-end;background-image:linear-gradient(0deg,rgba(5,19,18,.9) 0%,rgba(5,19,18,.4) 62%,rgba(5,19,18,.12) 100%),var(--hero-image);background-position:center}
  .hero-content{padding-bottom:var(--space-7)}
  .hero-content h1{font-size:clamp(2.55rem,13vw,4.4rem)}
  .hero-action{width:100%}
  .coffee-entry{grid-template-columns:1fr;gap:var(--space-5);align-items:start}
  .coffee-entry:nth-child(even)>img,.coffee-entry:nth-child(even) .coffee-copy{grid-column:auto;grid-row:auto}
  .coffee-entry>img{width:100%;aspect-ratio:4/3}
  .coffee-copy{padding:0}
  .coffee-copy h3{font-size:clamp(1.45rem,7vw,2rem)}
  .available-button{width:100%;font-size:.86rem}
  .beangeek-guide{grid-template-columns:auto minmax(0,1fr)}
  .beangeek-guide a{grid-column:1/-1;justify-content:center}
  .download-section{display:grid;border-radius:14px}
  .app-store-button{justify-content:center}
  .portal-home{place-items:center;padding:var(--space-5)}
  .portal-home::after{right:-9rem;bottom:-5rem}
  .portal-home h1{margin-top:clamp(3rem,14vw,5rem);font-size:clamp(2.8rem,14vw,4.5rem)}
  .auth-layout{grid-template-columns:1fr}
  .auth-brand{min-height:44svh;gap:var(--space-7)}
  .auth-brand h1{font-size:clamp(2.35rem,11vw,4rem)}
  .admin-shell{grid-template-columns:1fr}
  .admin-sidebar{position:relative;height:auto;display:grid;grid-template-columns:1fr auto;align-items:center;padding:var(--space-3) var(--space-4)}
  .admin-sidebar .portal-brand{margin:0}
  .admin-nav{display:none}
  .admin-user{margin:0;padding:0;border:0}
  .admin-user .user-avatar,.admin-user span{display:none}
  .admin-topbar{top:0;padding:var(--space-3) var(--space-4);align-items:flex-start}
  .admin-title p{display:none}
  .admin-actions{display:grid}
  .admin-actions .button{font-size:.8rem;padding:.55rem .7rem}
  .admin-layout{min-height:auto}
  .editor-column{padding:var(--space-4)}
  .form-section{grid-template-columns:1fr;gap:var(--space-4)}
  .form-fields,.coffee-editor-body{grid-template-columns:1fr}
  .preview-column{padding:var(--space-5) var(--space-3)}
}

@media (max-width:430px){
  .coffee-section{padding-inline:var(--space-4)}
  .coffee-copy dl{font-size:.85rem}
  .origin{font-size:.74rem}
  .phone-frame{width:100%;border-width:7px;border-radius:34px}
  .landing-picker{align-items:stretch;flex-direction:column}
  .landing-picker select{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}