/* Genika Cafe — shared brand styles for the customer-facing portal */
:root{
  --bg:#FBF6EC; --panel:#FFFFFF; --panel-2:#F3EAD8; --cream:#F3EAD8;
  --ink:#2A1C11; --ink-soft:#6B5843; --dark:#2A1C11;
  --line:#E4D6BC; --line-strong:#D2BE93;
  --amber:#B0611F; --amber-dark:#8A4A18; --amber-ink:#8A4A18; --amber-wash:#F3E1C4; --amber-light:#E8A25C;
  --plum:#4B2438; --plum-dark:#341829; --plum-ink:#6E3450; --plum-wash:#EADAE1;
  --good:#3C6B4A; --good-wash:#DCEBE0;
  --bad:#A3342A; --bad-wash:#F6E1DE;
  --shadow: 0 1px 2px rgba(42,28,17,.06), 0 12px 30px -14px rgba(42,28,17,.28);
  --radius: 14px;
  font-size: 16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17110C; --panel:#251C15; --panel-2:#33261A; --cream:#33261A;
    --ink:#F5EBDA; --ink-soft:#CBB093; --dark:#F5EBDA;
    --line:#42311F; --line-strong:#5C4530;
    --amber:#B0611F; --amber-dark:#8A4A18; --amber-ink:#F0B87A; --amber-wash:#3A2A18; --amber-light:#E8A25C;
    --plum:#4B2438; --plum-dark:#341829; --plum-ink:#E7C3D3; --plum-wash:#33212B;
    --good:#7FB58C; --good-wash:#1E2E22;
    --bad:#E28A80; --bad-wash:#3A2320;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.6);
  }
}
/* explicit theme picker (floating gear panel) -- these apply regardless of
   system color-scheme preference, unlike the @media block above.
   NOTE: --amber/--plum (and their -dark hover variants) are solid FILL
   colors -- every usage (.btn-amber, .btn-plum, badges, the login-page
   gradient, the splash screen) puts white text or a white glow on top of
   them, so they must stay deep/saturated in every theme. --amber-ink/
   --plum-ink are the separate "text sitting directly on the dark page"
   role and are what actually lightens here. Earlier this block lightened
   --amber/--plum themselves to the same values as their -ink twins, which
   is what made buttons go washed-out/low-contrast in dark mode. */
:root[data-theme="dark"]{
  --bg:#17110C; --panel:#251C15; --panel-2:#33261A; --cream:#33261A;
  --ink:#F5EBDA; --ink-soft:#CBB093; --dark:#F5EBDA;
  --line:#42311F; --line-strong:#5C4530;
  --amber:#B0611F; --amber-dark:#8A4A18; --amber-ink:#F0B87A; --amber-wash:#3A2A18; --amber-light:#E8A25C;
  --plum:#4B2438; --plum-dark:#341829; --plum-ink:#E7C3D3; --plum-wash:#33212B;
  --good:#7FB58C; --good-wash:#1E2E22;
  --bad:#E28A80; --bad-wash:#3A2320;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.6);
}
:root[data-theme="green"]{
  --bg:#F3F7F0; --panel:#FFFFFF; --panel-2:#E7F0E1; --cream:#E7F0E1;
  --ink:#1E2B1A; --ink-soft:#5B6E52; --dark:#1E2B1A;
  --line:#D3E3C9; --line-strong:#B8D1A8;
  --amber:#3C6B4A; --amber-dark:#2E5138; --amber-ink:#2E5138; --amber-wash:#DCEBE0; --amber-light:#6FA982;
  --plum:#245C42; --plum-dark:#173D2B; --plum-ink:#245C42; --plum-wash:#D7E9DC;
  --good:#3C6B4A; --good-wash:#DCEBE0;
  --bad:#A3342A; --bad-wash:#F6E1DE;
}
:root[data-theme="blue"]{
  --bg:#F1F5FA; --panel:#FFFFFF; --panel-2:#E3EBF5; --cream:#E3EBF5;
  --ink:#1B2733; --ink-soft:#54677A; --dark:#1B2733;
  --line:#CFDCEA; --line-strong:#AFC5DC;
  --amber:#2D6CB0; --amber-dark:#1F4E85; --amber-ink:#1F4E85; --amber-wash:#DCE9F6; --amber-light:#6CA3D9;
  --plum:#1B4870; --plum-dark:#123253; --plum-ink:#1B4870; --plum-wash:#D6E4F0;
  --good:#2E6B45; --good-wash:#DCEBE0;
  --bad:#A3342A; --bad-wash:#F6E1DE;
}
:root[data-theme="multi"]{
  --bg:#FFF8F0; --panel:#FFFFFF; --panel-2:#FDEEE0; --cream:#FDEEE0;
  --ink:#2B1B2E; --ink-soft:#6B5570; --dark:#2B1B2E;
  --line:#F0DCE8; --line-strong:#E0BFD6;
  --amber:#E0457A; --amber-dark:#B9315F; --amber-ink:#B9315F; --amber-wash:#FCE0EA; --amber-light:#F080A6;
  --plum:#6A3FB0; --plum-dark:#4E2C87; --plum-ink:#6A3FB0; --plum-wash:#EAE0F7;
  --good:#2E9E6B; --good-wash:#DFF3E8;
  --bad:#D23A3A; --bad-wash:#FBE1E1;
}
[data-theme="multi"] .btn-amber, [data-theme="multi"] .gk-cart-btn, [data-theme="multi"] .btn-plum{
  background: linear-gradient(135deg, #E0457A, #F0A24E 55%, #6A3FB0); border:none;
}
[data-theme="multi"] .logo .dot, [data-theme="multi"] .gk-logo .dot, [data-theme="multi"] .eyebrow::before, [data-theme="multi"] .gk-kicker::before{
  background: linear-gradient(135deg, #E0457A, #F0A24E 55%, #6A3FB0);
}
/* Animated themes -- Coffee (the default) and Evergreen. Cards stay solid for
   readability; page, section bands, nav and footer are see-through (the
   --glass-* colours) so the bean + steam layer (.gk-ambient, near the end of
   this file) shows on every page. */
:root[data-theme="coffee"]{
  /* dark roast, caramel crema, latte foam */
  --bg:#160E09; --panel:#25170E; --panel-2:#311F13; --cream:rgba(58,37,23,.55);
  --ink:#F6E7D2; --ink-soft:#CDB49A; --dark:#120B07;
  --line:rgba(214,170,120,.16); --line-strong:rgba(214,170,120,.30);
  --amber:#C27A3A; --amber-dark:#8E5225; --amber-ink:#F2BE84; --amber-wash:rgba(194,122,58,.18); --amber-light:#E8A25C;
  --plum:#6B3420; --plum-dark:#4A2214; --plum-ink:#EDBFA6; --plum-wash:rgba(120,58,34,.28);
  --good:#8FC79B; --good-wash:rgba(84,150,100,.18);
  --bad:#EE9A8E; --bad-wash:rgba(176,64,48,.22);
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 16px 34px -16px rgba(0,0,0,.75);
  --glass-nav:rgba(20,12,8,.74); --glass-foot:rgba(36,23,14,.72); --glass-tab:rgba(28,18,11,.84);
  --glow-1:rgba(194,122,58,.16); --glow-2:rgba(120,58,34,.2); --select:rgba(194,122,58,.45);
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(198,126,62,.20), transparent 62%),
    radial-gradient(900px 560px at 108% 108%, rgba(132,66,34,.24), transparent 60%),
    #160E09;
  background-attachment:fixed;
}
:root[data-theme="evergreen"]{
  /* classic coffeehouse green: deep house green, accent-green buttons, warm neutral text, gold highlights */
  --bg:#0F2A23; --panel:#16362D; --panel-2:#1D4238; --cream:rgba(30,66,56,.5);
  --ink:#F2F0EB; --ink-soft:#B7CDC3; --dark:#0B201A;
  --line:rgba(212,233,226,.14); --line-strong:rgba(212,233,226,.28);
  --amber:#00754A; --amber-dark:#005A38; --amber-ink:#D9B46A; --amber-wash:rgba(0,117,74,.24); --amber-light:#4FB386;
  --plum:#1E3932; --plum-dark:#13261F; --plum-ink:#D4E9E2; --plum-wash:rgba(212,233,226,.08);
  --good:#7BD3A6; --good-wash:rgba(0,117,74,.24);
  --bad:#F2A091; --bad-wash:rgba(180,60,50,.24);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 34px -16px rgba(0,0,0,.7);
  --glass-nav:rgba(10,30,24,.76); --glass-foot:rgba(18,46,38,.74); --glass-tab:rgba(14,38,31,.86);
  --glow-1:rgba(0,117,74,.24); --glow-2:rgba(203,162,88,.12); --select:rgba(0,117,74,.5);
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(0,138,88,.26), transparent 62%),
    radial-gradient(900px 560px at 108% 108%, rgba(203,162,88,.12), transparent 60%),
    #0F2A23;
  background-attachment:fixed;
}
:is([data-theme="coffee"], [data-theme="evergreen"]) body{ background:transparent; }
:is([data-theme="coffee"], [data-theme="evergreen"]) ::selection{ background:var(--select); color:#fff; }
/* the home hero art is painted orange -- recolour it to the theme's greens, keeping its beans, steam and cup */
[data-theme="evergreen"] .gk-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:color;
  background:linear-gradient(160deg, #00754A, #1E3932);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* Frappe's website CSS sets html,body{height:100%} and makes body a flex column.
   A screen-high body puts its bottom padding (the room kept clear of the tab bar)
   at the screen's edge rather than after the content, so the body has to grow
   with its content. */
body{
  height:auto; min-height:100%;
  font-family:"Source Sans 3", -apple-system, sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55;
}
h1,h2,h3,h4{font-family:"Fraunces","Georgia",serif; font-weight:600; color:var(--ink); margin:0 0 .4em;}
.mono{font-family:"IBM Plex Mono", monospace; letter-spacing:.04em;}
a{color:inherit;}
img{max-width:100%; display:block;}
.container{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ---------- Top Nav ---------- */
/* safe-area insets: the installed app runs edge to edge (viewport-fit=cover, set by the head boot script) */
.gk-nav{position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top, 0px);}
.gk-nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1120px; margin:0 auto; gap:16px;}
.gk-logo{display:flex; align-items:center; gap:9px; font-family:"Fraunces",serif; font-weight:700; font-size:1.25rem; color:var(--ink); text-decoration:none;}
.gk-logo .dot{width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg, var(--amber), var(--plum));}
.gk-links{display:flex; align-items:center; gap:6px; font-weight:600; font-size:.9rem;}
.gk-links a{text-decoration:none; color:var(--ink-soft); padding:8px 14px; border-radius:20px;}
.gk-user-chip{ display:inline-flex; align-items:center; gap:8px; padding:4px 6px; }
.gk-user-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid var(--line); }
.gk-user-name{ color:var(--ink); font-weight:600; padding:8px 4px; font-size:.88rem; white-space:nowrap; }
.gk-links a:hover{color:var(--ink); background:var(--panel-2);}
.gk-cart-btn{position:relative; background:var(--ink); color:var(--bg); border:none; border-radius:20px; padding:9px 18px; font-weight:700; cursor:pointer; font-size:.88rem; display:inline-flex; align-items:center; gap:8px;}
.gk-cart-count{background:var(--amber); color:#fff; font-family:"IBM Plex Mono",monospace; font-size:.7rem; border-radius:50%; width:19px; height:19px; display:flex; align-items:center; justify-content:center; font-weight:700;}
.gk-burger{display:none;}
.gk-nav-right{ display:flex; align-items:center; gap:10px; }

@media (max-width:760px){
  .gk-user-name{ display:none; }
  .gk-user-avatar{ width:34px; height:34px; }
  .gk-links{display:none;}
  .gk-burger{display:block;}
}

/* ---------- Mobile app-style bottom tab bar ---------- */
.gk-tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--panel); border-top:1px solid var(--line);
  box-shadow:0 -4px 16px rgba(0,0,0,.06);
  padding:0 env(safe-area-inset-right, 0px) max(6px, env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px);
}
.gk-tabbar-inner{ display:flex; }
.gk-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 8px; background:none; border:none; cursor:pointer;
  color:var(--ink-soft); font-size:.68rem; font-weight:600; text-decoration:none;
  position:relative;
}
.gk-tab svg{ width:22px; height:22px; }
.gk-tab.active{ color:var(--amber-ink); }
/* phones keep :hover after a tap -- without these, Frappe's black link hover sticks on the tapped tab */
.gk-tab:hover{ color:var(--ink-soft); text-decoration:none; }
.gk-tab.active:hover{ color:var(--amber-ink); }
.gk-tab .gk-tab-badge{
  position:absolute; top:4px; right:calc(50% - 20px); background:var(--amber); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-size:.6rem; min-width:15px; height:15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
@media (max-width:760px){
  .gk-tabbar{ display:block; }
  /* the tab bar is ~64px; the rest is breathing room so the last thing on a page never sits against it */
  body:has(#gk-tabbar){ padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
  body:has(#gk-tabbar) .toast{ bottom:calc(78px + env(safe-area-inset-bottom, 0px)); }
  .gk-footer{ display:none; }
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:999px;
  padding:13px 26px; font-weight:700; font-size:.95rem; cursor:pointer; text-decoration:none;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease, color .15s ease;}
/* glows follow each theme's own button colour (they were fixed orange, even under green or blue buttons) */
.btn-amber{background:linear-gradient(135deg, var(--amber), var(--amber-dark)); color:#fff;
  box-shadow:0 10px 22px -10px rgba(176,97,31,.55); box-shadow:0 10px 22px -10px color-mix(in srgb, var(--amber) 60%, transparent);}
.btn-amber:hover{background:linear-gradient(135deg, var(--amber-dark), var(--amber-dark)); transform:translateY(-1px);}
.btn-plum{background:linear-gradient(135deg, var(--plum), var(--plum-dark)); color:#fff;
  box-shadow:0 10px 22px -10px rgba(75,36,56,.55); box-shadow:0 10px 22px -10px color-mix(in srgb, var(--plum) 60%, transparent);}
.btn-plum:hover{background:linear-gradient(135deg, var(--plum-dark), var(--plum-dark)); transform:translateY(-1px);}
.btn-outline{background:transparent; border:2px solid currentColor; color:inherit;}
/* a tint of the button's own text colour, so it shows on light and dark backgrounds alike */
.btn-outline:hover{background:rgba(255,255,255,.12); background:color-mix(in srgb, currentColor 12%, transparent);}

/* Frappe's website CSS restyles every .btn and link, in every theme: .btn:hover
   turns text grey (#525252), .btn:active forces a grey background and dark
   text with !important, .btn:focus swaps our glow for a grey ring, and a:hover
   makes links black and underlined. On our filled buttons and dark themes that
   meant dark text on a dark fill. Pin our own colours for every state. */
.btn:hover, .btn:focus{text-decoration:none;}
.btn:focus-visible{outline:3px solid var(--amber-light); outline-offset:2px;}
.btn.btn-amber:hover, .btn.btn-amber:focus, .btn.btn-plum:hover, .btn.btn-plum:focus{color:#fff;}
.btn.btn-amber:focus{box-shadow:0 10px 22px -10px color-mix(in srgb, var(--amber) 60%, transparent);}
.btn.btn-plum:focus{box-shadow:0 10px 22px -10px color-mix(in srgb, var(--plum) 60%, transparent);}
.btn.btn-amber:active{color:#fff !important; background:var(--amber-dark) !important; box-shadow:none !important; transform:translateY(0);}
.btn.btn-plum:active{color:#fff !important; background:var(--plum-dark) !important; box-shadow:none !important; transform:translateY(0);}
.btn.btn-outline:hover, .btn.btn-outline:focus{color:inherit; box-shadow:none;}
.btn.btn-outline:active{color:inherit !important; background:color-mix(in srgb, currentColor 18%, transparent) !important; box-shadow:none !important;}
/* links keep their own colour on hover instead of going black */
a:hover{color:inherit;}
.gk-logo:hover{color:var(--ink); text-decoration:none;}
.dp-link:hover{color:inherit; text-decoration:none;}
.acct-row:hover{color:var(--ink); text-decoration:none;}
.acct-btn:hover{color:var(--ink); text-decoration:none;}
.acct-btn.primary:hover{color:#fff;}
.acct-btn.danger:hover{color:var(--bad);}
.btn-dark{background:var(--ink); color:var(--bg);}
.btn-dark:hover{opacity:.9;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
/* Frappe's website CSS has .btn:not(.btn-md):not(.btn-lg){padding:4px 8px}, which
   outranks .btn above and squashed every button on the site to a sliver. */
body .btn:not(.btn-md):not(.btn-lg){padding:13px 26px;}

/* ---------- Hero ---------- */
.gk-hero{position:relative; min-height:60vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden;
  background:linear-gradient(180deg, rgba(42,28,17,.2), rgba(30,18,10,.82)), var(--dark) center/cover no-repeat;}
.gk-hero-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.6;}
.gk-hero-inner{position:relative; z-index:2; padding:60px 24px; max-width:1120px; margin:0 auto; width:100%;}
.gk-kicker{
  font-family:"IBM Plex Mono",monospace; letter-spacing:.09em; text-transform:uppercase; font-size:.72rem;
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); border-radius:20px; padding:5px 12px;
}
.gk-kicker::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--amber-light);}
.gk-hero h1{color:#fff; font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.08; max-width:16ch;}
.gk-hero p{max-width:560px; font-size:1.08rem; opacity:.92;}
.gk-hero-ctas{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}

/* ---------- Home page density (scoped to .gk-home so other pages keep their spacing) ---------- */
.gk-home .gk-hero{min-height:clamp(340px, 46vh, 440px);}
.gk-home .gk-hero-inner{padding:44px 24px;}
.gk-home .section{padding:48px 24px;}
.gk-home .section-head{margin-bottom:24px;}
.gk-home #gk-category-grid{grid-template-columns:repeat(5,1fr); gap:14px;}
.gk-home .gk-cat-img{height:120px;}
.gk-home .about-wrap img{height:300px;}
@media (max-width:900px){
  .gk-home #gk-category-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:600px){
  .gk-home .gk-hero{min-height:0;}
  .gk-home .gk-hero-inner{padding:28px 16px 26px;}
  .gk-home .gk-hero h1{font-size:2rem;}
  .gk-home .gk-hero p{font-size:.98rem; margin-bottom:0;}
  .gk-home .gk-hero-ctas{margin-top:16px;}
  /* sections and their .container each added 24px a side -- 48px of a 390px screen */
  .gk-home .section{padding:28px 0;}
  .gk-home .container, .gk-home .section > .section-head{padding:0 16px;}
  .gk-home .section-head{margin-bottom:16px;}
  .gk-home .section h2{font-size:1.5rem;}
  .gk-home .daypart-strip{gap:12px;}
  .gk-home .dp-card-img{height:110px;}
  .gk-home .dp-card.has-img .dp-card-body{padding:12px 16px 14px;}
  .gk-home .dp-go{margin-top:8px;}
  .gk-home #gk-category-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .gk-home .gk-cat-img{height:90px;}
  .gk-home #gk-category-grid .gallery-cap{padding:8px 10px; font-size:.85rem;}
  .gk-home .about-wrap{gap:18px;}
  .gk-home .about-wrap img{height:200px;}
  .gk-home .feature-grid{gap:10px;}
  .gk-home .feature{padding:14px 16px;}
}

/* ---------- Sections ---------- */
.section{padding:64px 24px;}
.section-tight{padding:36px 24px;}
.section-head{max-width:640px; margin:0 auto 36px;}
.section-head.left{margin:0 0 36px;}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem;
  color:var(--amber-ink); font-weight:600; display:inline-flex; align-items:center; gap:8px; margin-bottom:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:5px 12px;
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--amber);}

/* ---------- Day-part strip / features (home) ---------- */
.daypart-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.dp-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); overflow:hidden;}
.dp-card.has-img{padding:0;}
.dp-card-img{width:100%; height:130px; object-fit:cover; display:block;}
.dp-card.has-img .dp-card-body{padding:18px 20px 20px;}
.dp-card .tag{font-family:"IBM Plex Mono",monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--amber-ink);}
.dp-card h3{font-size:1.15rem; margin:6px 0 8px;}
.dp-card p{font-size:.87rem; color:var(--ink-soft); margin:0;}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.feature{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.feature h3{font-size:.98rem; margin-bottom:6px;}
.feature p{font-size:.85rem; color:var(--ink-soft); margin:0;}
@media (max-width:800px){.daypart-strip,.feature-grid{grid-template-columns:1fr;}}

/* ---------- Cards / Grid ---------- */
.grid{display:grid; gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.gallery-card img{width:100%; height:220px; object-fit:cover;}
.gallery-cap{padding:10px 14px; font-size:.85rem; color:var(--ink-soft);}

.menu-item-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; gap:14px; align-items:flex-start;}
.menu-item-card img{width:88px; height:88px; object-fit:cover; border-radius:12px; flex-shrink:0; background:var(--panel-2);}
.menu-item-info{flex:1;}
.menu-item-info h4{margin:0 0 4px; font-size:1.02rem;}
.menu-item-desc{font-size:.85rem; color:var(--ink-soft); margin:0 0 10px;}
.menu-item-row{display:flex; align-items:center; justify-content:space-between;}
.price-tag{font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--amber-ink); font-variant-numeric:tabular-nums;}
.qty-add{display:flex; align-items:center; gap:8px;}
.qty-add button{width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong); background:var(--panel-2); cursor:pointer; font-weight:700; color:var(--ink);}
.badge{display:inline-block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:6px; background:var(--amber-wash); color:var(--amber-ink); margin-left:8px;}
.category-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px;}
.cat-tab{padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:var(--panel); cursor:pointer; font-weight:600; font-size:.85rem; color:var(--ink-soft);}
.cat-tab.active{background:var(--ink); color:var(--bg); border-color:var(--ink);}

/* ---------- Order layout (menu page) ---------- */
.order-layout{display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start;}
.greet-line{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--amber-ink); margin-bottom:6px; display:block;}
.order-summary{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; position:sticky; top:84px; box-shadow:var(--shadow);}
.order-summary h3{font-size:.95rem; margin-bottom:12px;}
.os-empty{font-size:.85rem; color:var(--ink-soft); margin:0;}
.os-line{display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:8px; gap:8px;}
.os-line .qty{font-family:"IBM Plex Mono",monospace; color:var(--ink-soft);}
.os-total{display:flex; justify-content:space-between; font-weight:700; padding-top:12px; margin-top:6px; border-top:1px solid var(--line); font-family:"IBM Plex Mono",monospace;}
@media (max-width:900px){.order-layout{grid-template-columns:1fr;} .order-summary{display:none;}}

/* Menu page on phones: app-style density. Categories become an even grid of
   equal-width buttons instead of wrapping into ragged rows, and each item
   card lines up -- fixed image, two-line description, price + Add pinned
   to the bottom edge of the image. */
@media (max-width:600px){
  .section-tight.menu-hero{padding:18px 0 16px;}
  .menu-hero > .container{padding:0 16px;}
  .menu-hero h1{font-size:1.7rem;}
  .menu-hero p{font-size:.9rem;}
  .section.menu-main{padding:14px 0 24px;}
  .menu-main > .container{padding:0 16px;}
  .menu-main .greet-line{margin-bottom:10px;}
  .menu-main .category-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px;}
  .menu-main .cat-tab{
    display:flex; align-items:center; justify-content:center; min-height:44px; padding:6px 8px;
    border-radius:12px; font-size:.8rem; line-height:1.15; text-align:center;
  }
  .menu-main .grid-2{gap:10px;}
  .menu-main .menu-item-card{padding:12px; gap:12px; align-items:stretch;}
  .menu-main .menu-item-card img{width:80px; height:80px;}
  .menu-main .menu-item-info{display:flex; flex-direction:column; min-height:80px; min-width:0;}
  .menu-main .menu-item-info h4{font-size:.98rem;}
  .menu-main .menu-item-desc{
    font-size:.82rem; margin:0 0 8px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .menu-main .menu-item-row{margin-top:auto;}
}
/* Room at the end of the page so the floating "View cart" bar never covers the last items. */
@media (max-width:900px){ body:has(.gk-cartbar.show){ padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width:760px){ body:has(#gk-tabbar):has(.gk-cartbar.show){ padding-bottom:calc(164px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Cart Drawer ---------- */
.gk-overlay{position:fixed; inset:0; background:rgba(20,14,9,.45); z-index:200; opacity:0; pointer-events:none; transition:opacity .2s;}
.gk-overlay.open{opacity:1; pointer-events:auto;}
.gk-drawer{position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:var(--bg);
  z-index:201; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column;}
/* shadow only while open -- parked off-screen it showed as a dark strip down every page's right edge */
.gk-drawer.open{transform:translateX(0); box-shadow:-12px 0 40px rgba(0,0,0,.2);}
.gk-drawer-head{padding:calc(18px + env(safe-area-inset-top, 0px)) 22px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.gk-drawer-body{flex:1; overflow-y:auto; padding:12px 22px;}
.gk-drawer-foot{padding:18px 22px calc(22px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line);}
.cart-line{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--line);}
.cart-line:last-child{border-bottom:none;}
.cart-line .name{font-weight:600; font-size:.95rem;}
.cart-line .meta{font-size:.78rem; color:var(--ink-soft);}
.totals-row{display:flex; justify-content:space-between; font-size:.9rem; margin-bottom:6px; color:var(--ink-soft);}
.totals-row.total{font-weight:700; font-size:1.05rem; margin-top:8px; padding-top:10px; border-top:1px solid var(--line); color:var(--ink); font-family:"IBM Plex Mono",monospace;}
.close-x{background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--ink-soft); line-height:1;}

/* ---------- Checkout modal ---------- */
/* z-index above the cart overlay/toast (200) and below the persistent
   offline banner (300) -- a modal dialog must always sit above a transient
   toast, never the other way around (confirmed broken on a small screen:
   the "added to cart" toast floated on top of an open Checkout dialog). The
   background is also darker than the cart drawer's own overlay since this
   app's base theme already runs dark/warm-toned -- at the old .5 opacity
   the dimming was barely perceptible, so background content (nav tabs,
   buttons) stayed fully readable and tappable-looking behind a modal that
   only covered part of a short screen. */
.modal-overlay{position:fixed; inset:0; background:rgba(12,8,5,.78); z-index:220; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:calc(40px + env(safe-area-inset-top, 0px)) 16px calc(40px + env(safe-area-inset-bottom, 0px));}
.modal-overlay.open{display:flex;}
.modal-overlay .modal{display:block; position:relative; top:auto; left:auto; height:auto; z-index:auto; background:var(--bg); border-radius:18px; max-width:640px; width:100%; box-shadow:var(--shadow); overflow:hidden;}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--line);}
.modal-head h3{margin:0;}
.modal-body{padding:24px;}
.checkout-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
@media (max-width:560px){.checkout-grid{grid-template-columns:1fr;}}
.co-summary{background:var(--panel-2); border-radius:12px; padding:14px 16px; margin-bottom:16px;}
.confirm-box{text-align:center; padding:16px 6px 4px;}
.confirm-box .num{font-family:"IBM Plex Mono",monospace; font-size:2.1rem; font-weight:700; color:var(--amber-ink); margin:10px 0;}
.confirm-box p{color:var(--ink-soft); font-size:.92rem;}

/* ---------- Forms ---------- */
.form-field{margin-bottom:16px;}
.form-field label{display:block; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; color:var(--ink-soft); font-family:"IBM Plex Mono",monospace;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line-strong); border-radius:9px; font-size:.95rem; font-family:inherit; background:var(--panel); color:var(--ink);}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:2px solid var(--amber-light); border-color:var(--amber);}
.form-field input:disabled{opacity:.6;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}

/* ---------- Misc ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
.pill-new{background:var(--amber-wash); color:var(--amber-ink);}
.pill-progress{background:var(--plum-wash); color:var(--plum-ink);}
.pill-ready{background:var(--good-wash); color:var(--good);}
.pill-completed{background:var(--panel-2); color:var(--ink-soft);}
.pill-cancelled{background:var(--bad-wash); color:var(--bad);}
.pill-paid{background:var(--good-wash); color:var(--good);}
.pill-pending{background:var(--amber-wash); color:var(--amber-ink);}
.empty-state{text-align:center; padding:60px 20px; color:var(--ink-soft);}
.toast{position:fixed; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg);
  padding:11px 22px; border-radius:24px; font-weight:600; font-size:.88rem; z-index:200; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; box-shadow:var(--shadow);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Auth pages (/login, /update-password) -- a small card instead of
   Frappe's full-page login. Everything is built on the theme variables, and
   the header band runs --amber -> --plum, so it re-colours with each theme
   (amber/plum, green, blue, multi) automatically. ---------- */
.gk-auth-page [hidden]{display:none !important;}
/* flex-shrink:0 -- the page body is a fixed-height flex column that would squeeze
   this to the screen height and clip a long form. margin:auto on the card centres
   it while still letting a form taller than the screen scroll. */
.gk-auth-page{
  flex-shrink:0; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:32px 16px;
  background:
    radial-gradient(60% 50% at 12% 8%, var(--amber-wash), transparent 70%),
    radial-gradient(55% 45% at 92% 96%, var(--plum-wash), transparent 70%),
    var(--bg);
}
.gk-auth-card{
  width:100%; max-width:400px; margin:auto; background:var(--panel); border:1px solid var(--line); border-radius:26px;
  overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 30px 60px -28px rgba(0,0,0,.45);
}
.gk-auth-hero{
  position:relative; text-align:center; padding:30px 24px 22px;
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(160deg, var(--amber) 0%, var(--plum) 100%);
}
.gk-auth-back{
  position:absolute; top:14px; left:14px; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.18);
  transition:background .15s ease;
}
.gk-auth-back:hover{background:rgba(255,255,255,.3); color:#fff;}
.gk-auth-back svg{width:18px; height:18px;}
.gk-auth-logo{height:74px; width:auto; margin:0 auto; filter:brightness(0) invert(1);}
.gk-auth-greet{margin:10px 0 0; font-family:"Fraunces",serif; font-style:italic; font-size:1.02rem; color:rgba(255,255,255,.9);}
.gk-auth-body{padding:22px 24px 26px;}

.gk-auth-tabs{display:flex; gap:4px; padding:4px; margin-bottom:18px; background:var(--panel-2); border-radius:999px;}
.gk-auth-tab{
  flex:1; border:none; background:none; border-radius:999px; padding:9px 0; cursor:pointer;
  font:inherit; font-weight:700; font-size:.88rem; color:var(--ink-soft); transition:background .15s ease, color .15s ease;
}
.gk-auth-tab.active{background:var(--ink); color:var(--bg);}

.gk-auth-panel{display:flex; flex-direction:column; gap:12px;}
.gk-auth-title{font-size:1.35rem; margin:0;}
.gk-auth-lede{margin:-4px 0 2px; font-size:.9rem; color:var(--ink-soft);}
.gk-auth-input{
  width:100%; padding:14px 16px; border-radius:14px; border:1.5px solid transparent; outline:none;
  background:var(--panel-2); color:var(--ink); font:inherit; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.gk-auth-input::placeholder{color:var(--ink-soft); opacity:.8;}
.gk-auth-input:focus{border-color:var(--amber); background:var(--panel); box-shadow:0 0 0 4px var(--amber-wash);}
/* Chrome paints autofilled fields light blue, which clashes with every theme
   (and autofill is the normal case once a password is saved). */
.gk-auth-input:-webkit-autofill, .gk-auth-input:-webkit-autofill:hover{
  -webkit-text-fill-color:var(--ink); caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 60px var(--panel-2) inset; box-shadow:0 0 0 60px var(--panel-2) inset;
}
.gk-auth-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 60px var(--panel) inset, 0 0 0 4px var(--amber-wash);
  box-shadow:0 0 0 60px var(--panel) inset, 0 0 0 4px var(--amber-wash);
}
.gk-auth-pw{position:relative;}
.gk-auth-pw .gk-auth-input{padding-right:50px;}
.gk-auth-eye{
  position:absolute; top:50%; right:8px; transform:translateY(-50%); width:36px; height:36px; border:none; border-radius:10px;
  background:none; color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.gk-auth-eye:hover{color:var(--ink);}
.gk-auth-eye svg{width:20px; height:20px;}
.gk-auth-eye .gk-eye-off, .gk-auth-eye.is-on .gk-eye-on{display:none;}
.gk-auth-eye.is-on .gk-eye-off{display:block;}

.gk-auth-row-end{display:flex; justify-content:flex-end; margin:-4px 0 0;}
.gk-auth-link{font-size:.86rem; font-weight:700; color:var(--amber-ink); text-decoration:none;}
.gk-auth-link:hover{color:var(--amber-ink); text-decoration:underline;}
.gk-auth-error{color:var(--bad); background:var(--bad-wash); border-radius:12px; padding:10px 13px; font-size:.86rem;}
.gk-auth-note{display:flex; flex-direction:column; gap:10px; background:var(--amber-wash); color:var(--ink); border-radius:14px; padding:13px 14px; font-size:.88rem; line-height:1.45;}
.gk-auth-note p{margin:0;}
.gk-auth-note strong{word-break:break-all;}
.gk-auth-note .gk-auth-alt{background:var(--panel); border-color:var(--line); padding:10px 14px; font-size:.86rem;}
/* Frappe's website CSS forces .btn:not(.btn-md):not(.btn-lg){padding:4px 8px},
   which outranks the plain .btn padding above -- hence the extra selectors. */
.gk-auth-page .gk-auth-body .btn.gk-auth-submit{padding:14px 26px; font-size:1rem; margin-top:2px;}
.gk-auth-or{display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em;}
.gk-auth-or::before, .gk-auth-or::after{content:""; flex:1; height:1px; background:var(--line);}
.gk-auth-alt{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 18px; border-radius:999px;
  border:1.5px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer;
  font:inherit; font-weight:700; font-size:.92rem; transition:background .15s ease;
}
.gk-auth-alt:hover{background:var(--panel-2); color:var(--ink); text-decoration:none;}
.gk-auth-alt:disabled{opacity:.6; cursor:not-allowed;}
.gk-auth-alt svg{width:18px; height:18px;}
.gk-auth-more{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:2px 0;
  cursor:pointer; font:inherit; font-size:.88rem; font-weight:700; color:var(--amber-ink);
}
.gk-auth-more span{font-weight:400; color:var(--ink-soft);}
.gk-auth-extra{display:flex; flex-direction:column; gap:12px;}
.gk-auth-label{font-size:.82rem; font-weight:600; color:var(--ink-soft); margin:2px 0 -6px;}
.gk-auth-bday{display:flex; gap:8px;}
.gk-auth-bday select:first-of-type{flex:2;}
.gk-auth-bday select:last-of-type{flex:1;}
.gk-auth-fine{margin:2px 0 0; text-align:center; font-size:.88rem; color:var(--ink-soft);}
.gk-auth-hint{margin:-6px 0 0; font-size:.82rem; color:var(--ink-soft);}
.gk-auth-hint.is-good{color:var(--good);}
.gk-auth-done{align-items:center; text-align:center;}
.gk-auth-done-icon{width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--amber-wash); color:var(--amber-ink);}
.gk-auth-done-icon svg{width:26px; height:26px;}
.gk-auth-honeypot{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;}
a.gk-auth-alt{text-decoration:none;}
.gk-message-body pre{text-align:left; white-space:pre-wrap; max-height:40vh; overflow:auto; font-size:.72rem; background:var(--panel-2); padding:10px; border-radius:10px;}
.gk-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* The site chrome genika.js mounts on every page (refresh button, bottom tab
   bar, install banner, cart drawer -- whose off-screen shadow otherwise shows
   as a dark strip down the right edge) doesn't belong on a sign-in screen. */
body:has(.gk-auth-page) .gk-controls,
body:has(.gk-auth-page) .gk-tabbar,
body:has(.gk-auth-page) .gk-pwa-banner,
body:has(.gk-auth-page) .gk-drawer,
body:has(.gk-auth-page) .gk-overlay{display:none !important;}
body:has(.gk-auth-page){padding-bottom:0 !important;}

/* Phones: full-screen, native-app style -- header band on top, form below. */
@media (max-width:560px){
  .gk-auth-page{padding:0; align-items:stretch; background:var(--panel);}
  .gk-auth-card{max-width:none; min-height:100vh; min-height:100dvh; border:none; border-radius:0; box-shadow:none; overflow:visible;}
  .gk-auth-hero{padding:calc(40px + env(safe-area-inset-top, 0px)) 24px 28px; border-radius:0 0 28px 28px;}
  .gk-auth-back{top:calc(14px + env(safe-area-inset-top, 0px));}
  .gk-auth-body{padding:26px 22px calc(28px + env(safe-area-inset-bottom, 0px));}
}
/* short phones: a slimmer header leaves more of the screen for the form */
@media (max-width:560px) and (max-height:740px){
  .gk-auth-hero{padding:calc(20px + env(safe-area-inset-top, 0px)) 24px 16px;}
  .gk-auth-logo{height:54px;}
  .gk-auth-greet{margin-top:6px; font-size:.95rem;}
  .gk-auth-body{padding-top:18px;}
  .gk-auth-tabs{margin-bottom:14px;}
}

.gk-footer{background:var(--panel-2); color:var(--ink); border-top:1px solid var(--line); padding:32px 24px 22px; margin-top:60px;}
.gk-footer-inner{max-width:1120px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:10px 0;}
.gk-footer a{color:var(--ink-soft); text-decoration:none; font-size:.88rem;}
.gk-footer a:hover{color:var(--amber-ink);}
.gk-footer-links{display:flex; gap:20px; flex-wrap:wrap; font-weight:600;}
.gk-socials{ display:flex; gap:10px; }
.gk-social{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--ink) !important; }
.gk-social svg{ width:17px; height:17px; }
.gk-social:hover{ background:var(--amber-wash); }
.gk-footer-meta{border-top:1px solid var(--line); font-size:.82rem; color:var(--ink-soft);}
.gk-footer-address{font-weight:600; color:var(--ink) !important; text-decoration:underline; text-underline-offset:2px;}
.gk-address-link{color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:2px;}
.gk-address-link:hover{color:var(--amber-ink);}
.gk-footer-copyright{max-width:1120px; margin:14px auto 0; text-align:center; font-size:.76rem; color:var(--ink-soft); opacity:.85;}

.about-wrap{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;}
@media (max-width:800px){.about-wrap{grid-template-columns:1fr;}}
.about-wrap img{border-radius:var(--radius); box-shadow:var(--shadow); width:100%; height:340px; object-fit:cover;}

/* ---------- Login / Signup / Forgot Password (split-screen coffee theme) ---------- */
body.gk-login-page{ background:var(--bg); }
body.gk-login-page .page-content-wrapper{ position:relative; background:transparent; }
body.gk-login-page .page-breadcrumbs{ display:none; }
body.gk-login-page > nav.navbar{ display:none; }
body.gk-login-page footer.web-footer{ display:none; }
body.gk-login-page main.container{ max-width:100%; padding:0 24px; }

/* The section (.for-login / .for-signup / .for-forgot / .for-login-with-email-link /
   .for-reset-password) becomes the card itself -- a two-pane grid: a
   branded hero pane (the section's own existing .page-card-head) and a
   wide form pane (.page-card). No DOM changes, just layout.
   IMPORTANT: no !important here on .for-login/.for-signup/.for-forgot/
   .for-login-with-email-link -- login.bundle.js shows/hides those four via a plain
   (non-important) inline style to switch between them, and an !important
   display here would defeat that and show all four stacked at once.
   .for-reset-password is the one exception: it's the only section on its
   page (nothing to show/hide), and needs !important solely to beat
   Bootstrap's ".d-block{display:block!important}" utility class that
   ships on that element. */
body.gk-login-page section.for-login,
body.gk-login-page section.for-signup,
body.gk-login-page section.for-forgot,
body.gk-login-page section.for-login-with-email-link,
body.gk-login-page section.for-reset-password{
  grid-template-columns:minmax(260px,1fr) minmax(340px,1.3fr);
  grid-template-rows:1fr auto; max-width:960px; margin:5vh auto; min-height:min(78vh, 640px);
  border-radius:28px; overflow:hidden; background:var(--panel);
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 50px 100px -30px rgba(0,0,0,.5);
}
body.gk-login-page section.for-login,
body.gk-login-page section.for-signup,
body.gk-login-page section.for-forgot,
body.gk-login-page section.for-login-with-email-link{
  display:grid;
}
body.gk-login-page section.for-reset-password{
  display:grid !important;
}

/* ---- Left pane: brand hero (reuses the site's hero gradient + ember canvas) ---- */
body.gk-login-page .page-card-head{
  grid-column:1; grid-row:1 / -1; position:relative; overflow:hidden;
  background:
    radial-gradient(130% 140% at 20% 0%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(165deg, var(--amber) 0%, var(--plum) 100%);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  text-align:left; padding:48px 40px;
}
body.gk-login-page .page-card-head .gk-login-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; pointer-events:none; }
body.gk-login-page .page-card-head .app-logo{
  position:relative; width:80px; height:80px; border-radius:22px; object-fit:cover;
  box-shadow:0 20px 40px -12px rgba(0,0,0,.45);
}
body.gk-login-page .page-card-head h4, body.gk-login-page .reset-password-heading{
  position:relative; font-family:"Fraunces",serif; color:#fff !important; font-size:2rem; line-height:1.15;
  margin-top:22px; font-weight:600; text-align:left;
}
body.gk-login-page .page-card-head::after{
  content:"Order ahead, reserve a table, and request office catering \2014 all from one account.";
  position:relative; display:block; color:rgba(255,255,255,.85); font-size:.98rem; line-height:1.5;
  max-width:280px; margin-top:16px; text-align:left;
}

/* ---- Right pane: the actual form, wide and airy ---- */
body.gk-login-page .page-card{
  grid-column:2; grid-row:1; align-self:center; width:100%;
  background:transparent !important; backdrop-filter:none !important; border:none !important; box-shadow:none !important;
  max-width:420px !important; margin:0 auto !important; padding:48px 44px !important;
}
body.gk-login-page .page-card-body{ padding:0 0 6px; }
body.gk-login-page .page-card-actions{ padding:6px 0 0; }
body.gk-login-page .sign-up-message{ grid-column:2; grid-row:2; text-align:center; padding:0 44px 40px; font-size:.88rem; color:var(--ink-soft); }

/* de-Bootstrap the inputs: drop the icon-in-field pattern, go wide and tall. */
body.gk-login-page .field-icon, body.gk-login-page .toggle-password{ display:none; }
body.gk-login-page .email-field, body.gk-login-page .password-field{ position:relative; }
body.gk-login-page .form-group{ margin-bottom:16px; }
body.gk-login-page .form-control{
  width:100% !important; border:1.5px solid var(--line-strong) !important; border-radius:12px !important;
  background:var(--bg) !important; color:var(--ink) !important; padding:16px 18px !important;
  font-size:1.02rem; height:auto; box-shadow:none !important;
}
body.gk-login-page .form-control::placeholder{ color:var(--ink-soft); opacity:.7; }
body.gk-login-page .form-control:focus{ outline:none; border-color:var(--amber) !important; box-shadow:0 0 0 4px var(--amber-wash) !important; }

body.gk-login-page .forgot-password-message{ text-align:right; margin:2px 0 4px; }
body.gk-login-page .forgot-password-message a{ font-size:.85rem; font-weight:600; }

body.gk-login-page .btn-login, body.gk-login-page .btn-forgot, body.gk-login-page .btn-update,
body.gk-login-page #gk-signup-btn, body.gk-login-page .btn-login-with-email-link{
  background:var(--amber); border:none !important; border-radius:999px !important; font-weight:700;
  padding:16px 0 !important; line-height:1.3 !important;
  letter-spacing:.02em; font-size:1rem !important; box-shadow:0 14px 26px -10px rgba(176,97,31,.6);
  transition:background .15s ease, transform .15s ease; color:#fff;
}
body.gk-login-page .btn-login:hover, body.gk-login-page .btn-forgot:hover, body.gk-login-page .btn-update:hover,
body.gk-login-page #gk-signup-btn:hover, body.gk-login-page .btn-login-with-email-link:hover{
  background:var(--amber-dark); transform:translateY(-1px);
}
body.gk-login-page .btn-update:disabled{ background:var(--line-strong); box-shadow:none; transform:none; }

body.gk-login-page .login-divider{ display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:.78rem; margin:18px 0; }
body.gk-login-page .login-divider::before, body.gk-login-page .login-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

body.gk-login-page .btn-login-option{
  background:var(--panel-2); border:1.5px solid var(--line-strong) !important; border-radius:999px !important; color:var(--ink);
  font-weight:600; padding:14px 0 !important; line-height:1.3 !important; font-size:.92rem !important;
}
body.gk-login-page .btn-login-option:hover{ background:var(--panel-2); }

body.gk-login-page .for-login a, body.gk-login-page .for-signup a, body.gk-login-page .for-forgot a,
body.gk-login-page .for-reset-password a{ color:var(--amber-ink); }

@media (max-width:820px){
  body.gk-login-page section[class^="for-"]{ grid-template-columns:1fr; margin:0; border-radius:0; min-height:100vh; }
  body.gk-login-page .page-card-head{ grid-column:1; grid-row:1; align-items:center; text-align:center; padding:44px 28px 36px; }
  body.gk-login-page .page-card-head h4, body.gk-login-page .page-card-head::after{ text-align:center; margin-left:auto; margin-right:auto; }
  body.gk-login-page .page-card{ grid-column:1; grid-row:2; padding:36px 28px !important; }
  body.gk-login-page .sign-up-message{ grid-column:1; grid-row:3; }
}
body.gk-login-page .sign-up-message{ font-size:.88rem; color:var(--ink-soft); margin-top:18px; }
body.gk-login-page .indicator.gray{ background:var(--ink-soft); }
body.gk-login-page .password-strength-message, body.gk-login-page .password-mismatch-message{ color:var(--ink-soft); }

/* ---------- Floating settings / theme switcher ---------- */
.gk-controls{position:fixed; top:calc(74px + env(safe-area-inset-top, 0px)); right:16px; z-index:110; display:flex; flex-direction:column; gap:8px; align-items:flex-end;}
body.gk-login-page .gk-controls{ top:16px; }
.gk-ctrl-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  box-shadow:var(--shadow); cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease;
}
.gk-ctrl-btn:hover{ transform:rotate(12deg); }
.gk-ctrl-btn.gk-refresh:hover{ transform:rotate(180deg); }
.gk-theme-panel{
  position:absolute; top:48px; right:0; width:230px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; display:none;
  max-height:calc(100vh - 90px); overflow-y:auto;
}
@media (max-width:600px){ .gk-theme-panel{ max-height:calc(100vh - 110px); } }
.gk-theme-panel.open{ display:block; }
.gk-theme-panel-title{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:10px; }
.gk-theme-swatches{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:6px; }
.gk-swatch{ width:32px; height:32px; border-radius:50%; border:2px solid var(--line); cursor:pointer; padding:0; }
.gk-swatch.active{ border-color:var(--ink); }
.gk-swatch[data-swatch="coffee"]{ background:radial-gradient(circle at 34% 30%, #D69657 0 16%, #7A4421 46%, #24140A 100%); }
.gk-swatch[data-swatch="evergreen"]{ background:radial-gradient(circle at 34% 30%, #D9B46A 0 15%, #00754A 44%, #0F2A23 100%); }
.gk-swatch[data-swatch="light"]{ background:#FBF6EC; }
.gk-swatch[data-swatch="dark"]{ background:#1B140F; }
.gk-swatch[data-swatch="green"]{ background:#3C6B4A; }
.gk-swatch[data-swatch="blue"]{ background:#2D6CB0; }
.gk-swatch[data-swatch="multi"]{ background:linear-gradient(135deg, #E0457A, #F0A24E 55%, #6A3FB0); }
.gk-panel-row{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.gk-panel-label{ font-family:"IBM Plex Mono",monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:2px; }
.gk-avatar-edit{ position:relative; display:inline-block; cursor:pointer; }
.gk-avatar-lg{ width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid var(--panel); box-shadow:var(--shadow); background:var(--panel-2); transition:opacity .15s ease; }
.gk-avatar-edit-badge{
  position:absolute; right:-2px; bottom:-2px; width:30px; height:30px; border-radius:50%;
  background:var(--amber); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; border:2px solid var(--bg);
}
.gk-panel-row a, .gk-panel-row button{
  display:block; width:100%; text-align:left; background:none; border:none; padding:6px 0; cursor:pointer;
  font-size:.85rem; font-weight:600; color:var(--ink); text-decoration:none;
}
.gk-panel-row a:hover, .gk-panel-row button:hover{ color:var(--amber-ink); }

.gk-hp{ position:absolute; left:-9999px; top:-9999px; width:0; height:0; opacity:0; overflow:hidden; }

/* ---------- Staff Orders board (/kitchen) ---------- */
.ops-banner{ background:var(--ink); color:var(--bg); padding:10px 24px; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:12px; }
.section.kboard-section{ padding-top:32px; }
.kboard-section .section-head{ margin-bottom:18px; }
/* stretch: every column spans the board's full height, so a card dragged from
   far down a long column can still be dropped on a short one beside it */
.kanban{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; align-items:stretch; }
.kcol{ background:var(--panel-2); border-radius:var(--radius); padding:14px; min-height:200px; border:2px solid transparent; transition:border-color .12s ease, background .12s ease; }
.kcol h4{ display:flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:12px; }
.kcount{ min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--panel); color:var(--ink); font-size:10.5px; display:inline-flex; align-items:center; justify-content:center; }
.kcount:empty{ display:none; }
.kcol-over{ border-color:var(--amber); background:var(--amber-wash); }
.kcard{
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow);
  cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.kcard .kid{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--amber-ink); font-weight:600; }
.kcard .kmeta{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.kcard ul{ margin:6px 0 8px; padding-left:16px; font-size:12.5px; }
.kcard-actions{ display:flex; gap:8px; margin-top:4px; }
.kcard-btn{ flex:1; width:100%; background:var(--ink); color:var(--bg); border:none; border-radius:8px; padding:9px; font-size:12px; font-weight:700; cursor:pointer; }
.kcard-btn:hover{ background:var(--amber-ink); }
.kcard-btn-pay{ background:var(--amber); color:#fff; }
.kcard-btn-pay:hover{ background:var(--amber-dark); color:#fff; }
.kcard-edit{ background:transparent; border:1.5px solid var(--line-strong); color:var(--ink); border-radius:8px; padding:7px 14px; font-size:12px; font-weight:700; cursor:pointer; }
.kcard-edit:hover{ background:var(--panel-2); }
.kempty{ font-size:12.5px; color:var(--ink-soft); text-align:center; padding:16px 0; }
.kcard-top{ display:flex; align-items:center; justify-content:space-between; }
.kpay{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:99px; font-weight:700; white-space:nowrap; }
.kpay-paid{ background:var(--good-wash); color:var(--good); }
.kpay-unpaid{ background:var(--bad-wash); color:var(--bad); }
.kphone{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.ktotal{ font-weight:700; color:var(--ink); margin-left:4px; }
.knote{ background:rgba(200,140,30,.12); color:var(--amber-ink); border-radius:6px; padding:5px 8px; font-size:11.5px; margin-bottom:8px; }
/* Completed: a compact list -- customer and total, tap for the details */
.krow{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; margin-bottom:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; font-size:13px; cursor:pointer;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.krow:hover{ border-color:var(--line-strong); }
.krow-name{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.krow-total{ flex:none; font-family:"IBM Plex Mono",monospace; font-weight:700; }
.kdragging{ opacity:.35; }
.kghost{ position:fixed; left:0; top:0; z-index:1000; margin:0; pointer-events:none; opacity:.95; box-shadow:0 18px 40px rgba(0,0,0,.35); }
body.kboard-dragging, body.kboard-dragging *{ cursor:grabbing !important; }
/* order details / edit */
.modal-overlay .modal.kmodal{ max-width:520px; }
.kmodal-meta{ font-size:.85rem; color:var(--ink-soft); margin:-6px 0 14px; }
.kmodal-section{ padding:14px 0; border-top:1px solid var(--line); }
.kmodal-meta + .kmodal-section{ border-top:none; padding-top:0; }
.kmodal-label{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:8px; }
.kseg-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.kseg{ border:1.5px solid var(--line-strong); background:transparent; color:var(--ink); border-radius:10px; padding:9px 4px; font-size:.78rem; font-weight:700; line-height:1.2; cursor:pointer; }
.kseg.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.kpay-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kpay-btn{ border:1.5px solid var(--line-strong); border-radius:10px; padding:12px; background:var(--panel-2); color:var(--ink); font-weight:700; font-size:.92rem; cursor:pointer; }
.kpay-btn.is-confirm{ background:var(--amber); border-color:var(--amber); color:#fff; }
.kpay-btn:disabled{ opacity:.6; cursor:wait; }
.kpaid-line{ display:flex; align-items:center; gap:10px; font-size:.9rem; }
.kmodal-alert{ margin:0 0 10px; padding:9px 12px; border-radius:10px; background:var(--bad-wash); color:var(--bad); font-size:.85rem; }
.kmodal-hint{ margin:8px 0 0; font-size:.8rem; color:var(--ink-soft); }
.kmodal-items{ list-style:none; margin:0 0 8px; padding:0; }
.kmodal-items li{ display:flex; flex-direction:column; padding:6px 0; border-bottom:1px dashed var(--line); font-size:.92rem; }
.kmodal-items li em{ font-size:.8rem; color:var(--ink-soft); }
.kmodal-totals{ font-size:.85rem; color:var(--ink-soft); }
.kmodal-totals strong{ color:var(--ink); }
.kmodal-email{ margin:-8px 0 14px; font-size:.85rem; color:var(--ink-soft); }
@media (max-width:1100px){ .kanban{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){
  .kanban{ grid-template-columns:1fr; }
  .section.kboard-section{ padding:20px 0 32px; }
  .kboard-section > .container{ padding:0 12px; }
}

.status-banner{padding:16px 20px; border-radius:var(--radius); background:var(--amber-wash); color:var(--amber-ink); margin-bottom:20px; font-size:.9rem;}

/* ---------- Admin dashboard (/admin) ---------- */
.container.admin-wide{ max-width:none; padding:0; }
.admin-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.admin-stat-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important; }
.tdetail{ margin-top:10px; padding:12px 14px; background:var(--panel-2); border-radius:10px; font-size:.82rem; }
.tdetail table{ width:100%; border-collapse:collapse; }
.tdetail td, .tdetail th{ text-align:left; padding:4px 8px 4px 0; font-weight:500; }
.tdetail th{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; text-transform:uppercase; color:var(--ink-soft); }
.admin-sidebar{
  display:flex; flex-direction:column; gap:2px; position:sticky; top:90px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:8px; box-shadow:var(--shadow);
}
.admin-tab{
  padding:11px 14px; border:none; border-radius:9px; text-align:left;
  background:none; cursor:pointer; font-weight:600; font-size:.87rem; color:var(--ink-soft);
}
.admin-tab.active{ color:var(--ink); background:var(--amber-wash); }
.admin-tab:hover:not(.active){ background:var(--panel-2); color:var(--ink); }
.admin-content{ min-width:0; }
.admin-panel{ min-height:200px; }
.admin-hamburger{
  display:none; flex-direction:column; justify-content:center; gap:4px; width:44px; height:44px;
  border:1.5px solid var(--line-strong); border-radius:10px; background:var(--panel); cursor:pointer;
  margin-bottom:14px; padding:0; align-items:center;
}
.admin-hamburger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.admin-hamburger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.admin-hamburger.open span:nth-child(2){ opacity:0; }
.admin-hamburger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:900px){
  .admin-layout{ grid-template-columns:1fr; }
  .admin-hamburger{ display:flex; }
  .admin-sidebar{
    display:none; position:absolute; z-index:40; left:8vw; right:8vw; margin-top:-8px;
    box-shadow:0 20px 50px -15px rgba(0,0,0,.35);
  }
  .admin-sidebar.open{ display:flex; }
}
.admin-stat{ cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.admin-stat:hover{ transform:translateY(-2px); box-shadow:0 8px 20px -8px rgba(0,0,0,.25); }
.admin-stat.admin-stat-static{ cursor:default; }
.admin-stat.admin-stat-static:hover{ transform:none; box-shadow:var(--shadow); }
.admin-section-title{ font-size:1.02rem; font-weight:700; margin-bottom:14px; }
.admin-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
.admin-stat{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); }
.admin-stat .num{ font-family:"IBM Plex Mono",monospace; font-size:1.7rem; font-weight:700; color:var(--ink); }
.admin-stat .label{ font-size:.78rem; color:var(--ink-soft); margin-top:4px; }
.arow{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  margin-bottom:10px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
}
.arow-main{ flex:1; min-width:220px; }
.arow-id{ font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--amber-ink); font-weight:700; }
.arow-name{ font-weight:700; margin-top:3px; }
.arow-meta{ font-size:.8rem; color:var(--ink-soft); margin-top:2px; }
.arow-actions{ display:flex; gap:8px; align-items:center; }
.arow-actions select{ padding:8px 10px; border-radius:8px; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); font-size:.82rem; }
.staff-badge{
  display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.64rem; text-transform:uppercase;
  letter-spacing:.03em; padding:2px 9px; border-radius:99px; background:var(--plum-wash); color:var(--plum-ink);
  font-weight:700; margin-bottom:4px;
}

/* ---------- Rewards (/rewards) ---------- */
.reward-card{ padding:20px 22px; margin-bottom:16px; }
.reward-card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.reward-progress-bar{ height:10px; border-radius:999px; background:var(--panel-2); overflow:hidden; }
.reward-progress-fill{ height:100%; background:linear-gradient(90deg, var(--amber), var(--amber-dark)); border-radius:999px; transition:width .3s ease; }
.reward-progress-label{ display:flex; justify-content:space-between; margin-top:8px; font-size:.82rem; color:var(--ink-soft); }
/* ---------- Brewing loader ----------
   Every .spinner on the site: genika.js (Genika.upgradeSpinners) fills it
   with a mug that brews -- coffee rises, crema sloshes, steam curls up -- in
   the theme's colours. The launch splash uses the same mug, larger. */
.spinner{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:28px auto; min-height:112px; }
.gk-brew{ position:relative; display:block; width:84px; height:88px; animation:gk-brew-bob 2.8s ease-in-out infinite; }
.gk-brew-cup{
  position:absolute; left:12px; bottom:12px; width:54px; height:44px; box-sizing:border-box; overflow:hidden;
  border:3.5px solid var(--amber-ink); border-radius:5px 5px 20px 20px;
  background:color-mix(in srgb, var(--panel-2) 60%, transparent);
}
.gk-brew-coffee{
  position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(180deg, var(--amber), var(--amber-dark));
  animation:gk-brew-fill 3s cubic-bezier(.5,.05,.3,1) infinite;
}
.gk-brew-coffee::before{ /* crema */
  content:""; position:absolute; left:-12%; right:-12%; top:-3px; height:7px; border-radius:50%;
  background:var(--amber-light); opacity:.9; animation:gk-brew-slosh 1.3s ease-in-out infinite alternate;
}
.gk-brew-handle{
  position:absolute; left:63px; bottom:22px; width:15px; height:19px; box-sizing:border-box;
  border:3.5px solid var(--amber-ink); border-left:none; border-radius:0 11px 11px 0;
}
.gk-brew-saucer{ position:absolute; left:4px; bottom:4px; width:72px; height:6px; border-radius:6px; background:var(--amber-ink); opacity:.45; }
.gk-brew-steam{ position:absolute; left:20px; bottom:58px; width:44px; height:30px; }
.gk-brew-steam i{
  position:absolute; bottom:0; width:7px; height:22px; border-radius:7px; background:var(--ink-soft);
  filter:blur(2.5px); opacity:0; animation:gk-brew-steam 2.4s ease-in-out infinite;
}
.gk-brew-steam i:nth-child(1){ left:4px; animation-delay:.1s; }
.gk-brew-steam i:nth-child(2){ left:18px; animation-delay:.9s; }
.gk-brew-steam i:nth-child(3){ left:32px; animation-delay:1.6s; }
.gk-brew-label{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
@keyframes gk-brew-fill{ 0%{ height:0; } 60%{ height:76%; } 85%{ height:76%; } 100%{ height:0; } }
@keyframes gk-brew-slosh{ from{ transform:rotate(-5deg); } to{ transform:rotate(5deg); } }
@keyframes gk-brew-steam{
  0%{ transform:translate(0,6px) scale(.6,.5); opacity:0; }
  30%{ opacity:.6; }
  60%{ transform:translate(-3px,-12px) scale(1,1); }
  100%{ transform:translate(3px,-30px) scale(1.25,1.3); opacity:0; }
}
@keyframes gk-brew-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }
/* still scene for reduce-motion: a full cup with steam, not an empty one */
@media (prefers-reduced-motion: reduce){ .gk-brew-coffee{ height:70%; } .gk-brew-steam i{ opacity:.45; } }

/* ---------- App launch splash (home page; every launch of the installed app) ---------- */
.gk-splash{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--amber) 30%, transparent), transparent 60%),
    radial-gradient(90% 70% at 50% 110%, color-mix(in srgb, var(--plum) 45%, transparent), transparent 60%),
    var(--bg);
  transition:opacity .55s ease, transform .55s ease;
}
.gk-splash-hide{ opacity:0; transform:scale(1.04); pointer-events:none; }
.gk-splash-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; animation:gk-splash-in .6s cubic-bezier(.2,.8,.2,1) both; }
.gk-splash .gk-brew{ zoom:1.7; }
/* the line-art wordmark, recoloured to each theme's text colour */
.gk-splash-logo{
  width:170px; height:116px; background:var(--ink);
  -webkit-mask:url("/assets/genika_cafe/images/about/logo.png") center/contain no-repeat;
  mask:url("/assets/genika_cafe/images/about/logo.png") center/contain no-repeat;
}
.gk-splash-tag{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.gk-splash-bar{ position:relative; width:150px; height:3px; border-radius:3px; overflow:hidden; background:color-mix(in srgb, var(--ink) 14%, transparent); }
.gk-splash-bar::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:40%; border-radius:3px;
  background:linear-gradient(90deg, var(--amber-light), var(--amber)); animation:gk-splash-bar 1.4s ease-in-out infinite;
}
@keyframes gk-splash-bar{ from{ transform:translateX(-100%); } to{ transform:translateX(250%); } }
@keyframes gk-splash-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* Login/reset/signup pages: swap Frappe's default favicon-brand mark for the
   same splash mark while the auth pages boot, so the stock "F" logo never
   flashes during login/logout redirects. genika.js injects #gk-auth-splash
   into these pages the same way it injects the theme canvas. */
.gk-auth-splash{ position:fixed; inset:0; z-index:9999; background:var(--plum-dark); display:flex; align-items:center; justify-content:center; }
.gk-auth-splash .gk-splash-inner{ color:#F6EEDD; }

/* ---------- Training (/training) ---------- */
.tr-tabs{ display:flex; gap:6px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.tr-tab{ padding:10px 18px; border:none; background:none; cursor:pointer; font-weight:700; font-size:.9rem; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tr-tab.active{ color:var(--ink); border-bottom-color:var(--amber); }
.quiz-q{ padding:14px 0; border-bottom:1px solid var(--line); }
.quiz-qtext{ font-weight:700; margin-bottom:8px; }
.quiz-opt{ display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:6px; cursor:pointer; background:var(--panel); }
.quiz-opt:hover{ border-color:var(--amber); }
.quiz-opt input{ width:17px; height:17px; }
.quiz-q + .quiz-q{ }
#quiz-card .btn{ margin-top:18px; }

/* ---------- Admin > Printer ---------- */
.print-opt{ padding:12px 0; border-top:1px solid var(--line); }
.print-opt:first-of-type{ border-top:none; }
.print-opt p{ margin:6px 0; font-size:.85rem; color:var(--ink-soft); }
.print-code{ background:var(--panel-2); padding:10px 12px; border-radius:8px; font-size:.75rem; overflow-x:auto; margin:6px 0; }
.print-opt code{ background:var(--panel-2); padding:1px 5px; border-radius:4px; font-size:.78rem; }

/* Profile photo ringed by a gear: one control for the avatar and settings */
.gk-profile-wrap{ position:relative; display:flex; align-items:center; gap:8px; }
.gk-profile-btn{ position:relative; width:46px; height:46px; padding:0; border:0; background:none; cursor:pointer; flex:none; }
.gk-gear-ring{ position:absolute; inset:0; pointer-events:none; transition:transform .6s ease; }
.gk-gear-ring::before, .gk-gear-ring::after{ content:""; position:absolute; border-radius:50%; }
.gk-gear-ring::before{ inset:0; background:repeating-conic-gradient(var(--amber) 0 11.25deg, transparent 11.25deg 22.5deg);
  -webkit-mask:radial-gradient(circle, transparent 0 19px, #000 19.5px); mask:radial-gradient(circle, transparent 0 19px, #000 19.5px); }
.gk-gear-ring::after{ inset:3px; background:var(--amber);
  -webkit-mask:radial-gradient(circle, transparent 0 17px, #000 17.5px); mask:radial-gradient(circle, transparent 0 17px, #000 17.5px); }
.gk-profile-btn:hover .gk-gear-ring, .gk-profile-btn:focus-visible .gk-gear-ring{ transform:rotate(45deg); }
.gk-profile-btn .gk-user-avatar{ position:absolute; top:7px; left:7px; width:32px; height:32px; border:0; display:block; background:var(--panel-2); }
.gk-profile-wrap .gk-theme-panel{ top:54px; z-index:120; }

/* On-page payment (Square card form + wallets) */
.pay-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; font-size:1.05rem; }
.pay-total strong{ font-family:"Fraunces",serif; font-size:1.5rem; }
.pay-wallets{ display:grid; gap:10px; margin-bottom:6px; }
.pay-wallet-slot{ min-height:0; }
.pay-apple{ height:44px; border:0; border-radius:6px; cursor:pointer; -webkit-appearance:-apple-pay-button; -apple-pay-button-type:pay; -apple-pay-button-style:black; width:100%; }
.pay-or{ display:flex; align-items:center; gap:10px; margin:12px 0; color:var(--ink-soft); font-size:.8rem; }
.pay-or::before, .pay-or::after{ content:""; flex:1; height:1px; background:var(--line); }
.pay-card{ margin-bottom:14px; min-height:90px; }
.pay-error{ color:var(--bad); margin-top:10px; font-weight:600; min-height:1.2em; }
.pay-fine{ color:var(--ink-soft); font-size:.78rem; margin:10px 0 0; text-align:center; }
.pay-fine a{ color:var(--ink-soft); text-decoration:underline; }
.gk-tab-avatar{ width:26px; height:26px; border-radius:50%; object-fit:cover; border:2px solid var(--amber); }
.gk-tab.has-avatar svg{ display:none; }
.gk-tab.active .gk-tab-avatar{ border-color:var(--amber-ink); }
.cart-thumb{ width:54px; height:54px; border-radius:12px; object-fit:cover; flex:none; background:var(--panel-2); }
.gk-cartbar{ display:none; position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:99; align-items:center; gap:12px;
  background:var(--amber); color:#fff; border:0; border-radius:28px; padding:13px 20px; font:inherit; font-weight:700; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.28); }
.gk-cartbar-label{ flex:1; text-align:left; }
/* --amber-dark, not --amber-ink: the latter is a light "text on dark page" colour in the dark themes, unreadable on this white dot */
.gk-cartbar-count{ background:#fff; color:var(--amber-dark); border-radius:50%; min-width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",monospace; font-size:.8rem; }
@media (max-width:900px){ .gk-cartbar.show{ display:flex; } }
@media (max-width:760px){ .gk-cartbar{ bottom:calc(78px + env(safe-area-inset-bottom, 0px)); } }
body:has(.gk-cartbar.show) .toast{ bottom:calc(150px + env(safe-area-inset-bottom, 0px)); }
.bday-claim{ display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--amber); border-radius:12px; padding:12px 14px; margin-bottom:12px; cursor:pointer; }
.bday-claim input{ width:18px; height:18px; flex:none; }
.bday-card{ border-color:var(--amber); margin-bottom:18px; }
.promo-row{ display:flex; gap:8px; margin:12px 0 6px; }
.promo-row input{ flex:1; min-width:0; text-transform:uppercase; background:var(--panel-2); color:var(--ink); border:1px solid var(--line-strong, var(--line)); border-radius:12px; padding:12px 14px; font:inherit; }
.promo-msg{ font-size:.85rem; min-height:1.1em; margin-bottom:8px; }
.promo-msg.ok{ color:var(--ok, #3C6B4A); font-weight:600; }
.promo-msg.bad{ color:var(--bad); font-weight:600; }
.promo-chip{ display:block; width:100%; text-align:left; background:var(--panel-2); border:1px dashed var(--amber); border-radius:12px; padding:10px 12px; margin-bottom:10px; font:inherit; font-size:.85rem; color:var(--ink); cursor:pointer; }
.dp-link{ display:block; color:inherit; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.dp-link:hover, .dp-link:focus-visible{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.25); }
.dp-go{ display:inline-block; margin-top:12px; font-weight:700; font-size:.85rem; color:var(--amber-ink); }

/* ---------- Install banner (Android/Chrome native prompt + iOS instructions) ---------- */
.gk-pwa-banner{ position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:98; display:flex; align-items:center; gap:12px;
  max-width:460px; margin:0 auto; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:18px;
  padding:12px 14px; box-shadow:0 8px 28px rgba(0,0,0,.28); }
.gk-pwa-banner-icon{ width:40px; height:40px; border-radius:11px; flex:none; }
.gk-pwa-banner-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:.82rem; line-height:1.3; }
.gk-pwa-banner-text strong{ font-size:.9rem; }
.gk-pwa-banner-text span{ color:var(--ink-soft); display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.gk-ios-share-icon{ width:15px; height:15px; vertical-align:-3px; }
.gk-pwa-banner-cta{ flex:none; background:var(--amber); color:#fff; border:0; border-radius:14px; padding:9px 16px; font-weight:700; font-size:.82rem; cursor:pointer; }
.gk-pwa-banner-x{ flex:none; background:none; border:0; color:var(--ink-soft); font-size:1.3rem; line-height:1; cursor:pointer; padding:2px 4px; }
@media (max-width:760px){ .gk-pwa-banner{ bottom:calc(78px + env(safe-area-inset-bottom, 0px)); } }
body:has(.gk-cartbar.show) .gk-pwa-banner{ bottom:calc(146px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Offline / connectivity banner ---------- */
.gk-offline-banner{ position:fixed; top:0; left:0; right:0; z-index:300; text-align:center; padding:8px 14px;
  background:var(--ink); color:var(--bg); font-size:.8rem; font-weight:600; letter-spacing:.01em;
  padding-top:calc(8px + env(safe-area-inset-top, 0px)); }
.gk-offline-banner.gk-offline-banner-ok{ background:var(--good); color:#fff; }
.ck-offline-note{ color:var(--bad); font-size:.82rem; font-weight:600; margin:-4px 0 12px; text-align:center; }

/* ---------- While a modal/cart drawer is open: lock the background page
   and hide the bottom chrome instead of leaving it visible-but-dimmed and
   still technically reachable (found on a small screen: the tab bar, "View
   cart" bar and install banner all stayed fully visible, cluttered, under
   an open Checkout dialog). The offline banner is excluded -- a live
   connectivity notice should never be hidden by an open dialog. ---------- */
body.gk-overlay-open{ overflow:hidden; }
body.gk-overlay-open .gk-tabbar,
body.gk-overlay-open .gk-cartbar,
body.gk-overlay-open .gk-pwa-banner,
body.gk-overlay-open .gk-controls{ display:none !important; }

/* ---------- Animated themes: beans tumbling up the page + steam rising ----------
   One fixed layer behind all content (genika.js Genika.renderAmbient), shown
   only under the Coffee and Evergreen themes. Only transform/opacity animate,
   so it stays on the GPU; phones get fewer pieces; "reduce motion" gets a
   still scene. */
.gk-ambient{ display:none; position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
:is([data-theme="coffee"], [data-theme="evergreen"]) .gk-ambient{ display:block; }
.gk-bean{
  position:absolute; left:var(--x); bottom:-70px; width:var(--s); height:calc(var(--s) * 1.36);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 54'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23a46a3a'/%3E%3Cstop offset='.5' stop-color='%23633a1e'/%3E%3Cstop offset='1' stop-color='%232c170a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='20' cy='27' rx='17' ry='24' fill='url(%23b)'/%3E%3Cpath d='M22 5c-9 11 7 23-2 44' fill='none' stroke='%231a0d05' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M23.5 6.5c-8 10.5 7 22.5-1.5 41' fill='none' stroke='%23e8b98a' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0; will-change:transform, opacity;
  animation:gk-bean-fly var(--d) linear var(--delay) infinite;
}
.gk-bean.far{ filter:blur(1.6px); }
@keyframes gk-bean-fly{
  0%{ transform:translate3d(0,0,0) rotate(var(--r)); opacity:0; }
  10%{ opacity:var(--o); }
  85%{ opacity:var(--o); }
  100%{ transform:translate3d(var(--dx), calc(-100vh - 140px), 0) rotate(calc(var(--r) + 300deg)); opacity:0; }
}
.gk-wisp{
  position:absolute; left:var(--x); bottom:-8vh; width:120px; height:var(--h); margin-left:-60px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 300' preserveAspectRatio='none'%3E%3Cpath d='M30 300C8 255 52 220 30 175S8 95 32 50 44 12 30 0' fill='none' stroke='%23f6e7d2' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M38 300C16 258 58 222 37 178S16 100 38 58' fill='none' stroke='%23f6e7d2' stroke-opacity='.6' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M23 300C3 262 45 226 25 182S4 104 27 64' fill='none' stroke='%23f6e7d2' stroke-opacity='.45' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  filter:blur(10px); opacity:0; transform-origin:50% 100%; will-change:transform, opacity;
  animation:gk-steam var(--d) ease-in-out var(--delay) infinite;
}
@keyframes gk-steam{
  0%{ transform:translate3d(0,0,0) scale(.55,.6) skewX(0deg); opacity:0; }
  18%{ opacity:var(--o); }
  55%{ transform:translate3d(-12px,-32vh,0) scale(1,1) skewX(7deg); }
  82%{ opacity:calc(var(--o) * .55); }
  100%{ transform:translate3d(14px,-64vh,0) scale(1.5,1.25) skewX(-8deg); opacity:0; }
}
@media (max-width:600px){ .gk-ambient .xtra{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .gk-bean{ animation:none; opacity:var(--o); transform:translateY(calc(-1 * var(--y))) rotate(var(--r)); }
  .gk-wisp{ display:none; }
}
/* see-through chrome so the scene reads on every page */
:is([data-theme="coffee"], [data-theme="evergreen"]) .gk-nav{ background:var(--glass-nav); -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%); }
:is([data-theme="coffee"], [data-theme="evergreen"]) .gk-footer{ background:var(--glass-foot); }
:is([data-theme="coffee"], [data-theme="evergreen"]) .gk-tabbar{ background:var(--glass-tab); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
:is([data-theme="coffee"], [data-theme="evergreen"]) .gk-auth-page{
  background:radial-gradient(60% 50% at 12% 8%, var(--glow-1), transparent 70%), radial-gradient(55% 45% at 92% 96%, var(--glow-2), transparent 70%);
}

/* ---------- Rewards page ---------- */
.rw-page{ padding:22px 0 48px; }
.rw-wrap{ max-width:760px; }
/* always a deep roast tinted by the theme's accent, so the light text reads in every theme */
.rw-hero{
  position:relative; overflow:hidden; isolation:isolate; border-radius:22px; padding:22px 22px 18px; color:#FFF8EE;
  background:
    radial-gradient(120% 110% at 100% 0%, color-mix(in srgb, var(--amber) 55%, transparent), transparent 62%),
    linear-gradient(150deg, color-mix(in srgb, var(--amber-dark) 70%, #120a05), color-mix(in srgb, var(--amber-dark) 28%, #0b0603));
  box-shadow:var(--shadow);
}
.rw-hero::before{ content:""; position:absolute; z-index:-1; right:60px; top:-64px; width:124px; height:124px; border-radius:50%; background:rgba(255,255,255,.05); }
.rw-hero::after{ content:""; position:absolute; z-index:-1; right:-48px; bottom:-74px; width:214px; height:214px; border-radius:50%; border:30px solid rgba(255,255,255,.06); }
.rw-hero strong{ color:#fff; }
.rw-hero-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.rw-kicker{ font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.8; }
.rw-points{ font-family:"IBM Plex Mono",monospace; font-size:clamp(2.5rem, 10vw, 3.3rem); font-weight:700; line-height:1.05; letter-spacing:-.02em; margin-top:2px; }
.rw-title{ color:inherit; font-size:clamp(1.65rem, 6vw, 2.2rem); margin:6px 0 8px; }
.rw-sub{ margin:0 0 16px; opacity:.92; max-width:520px; }
.rw-ctas{ display:flex; gap:10px; flex-wrap:wrap; }
.rw-track{ margin-top:16px; }
.rw-bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden; }
.rw-bar span{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #FFD58A, #FFB54D); transition:width .7s cubic-bezier(.2,.8,.2,1); }
.rw-track-note{ display:flex; justify-content:space-between; gap:6px 12px; flex-wrap:wrap; margin-top:8px; font-size:.8rem; opacity:.9; }
.rw-track-top{ margin-top:14px; }
.rw-hero-foot{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); font-size:.82rem; opacity:.85; }

.rw-tier{ flex:none; display:inline-block; padding:5px 12px; border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.rw-tier-bronze{ background:linear-gradient(135deg, #D59A66, #8E5730); color:#fff; }
.rw-tier-silver{ background:linear-gradient(135deg, #F1F4F7, #A2AEB9); color:#25303A; }
.rw-tier-gold{ background:linear-gradient(135deg, #FFE6A3, #D29A2B); color:#3A2604; }

.rw-section{ margin:22px 0; }
.rw-section-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
.rw-section-head h2, .rw-history summary h2{ font-size:1.12rem; margin:0; }
.rw-link, .rw-link:hover{ font-size:.85rem; font-weight:700; color:var(--amber-ink); text-decoration:none; }
.rw-fine{ font-size:.78rem; color:var(--ink-soft); }
.rw-section > .rw-fine{ margin:8px 2px 0; }
.rw-list{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.rw-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-top:1px solid var(--line); transition:background .3s; }
.rw-list > .rw-row:first-child{ border-top:0; }
.rw-main{ flex:1; min-width:0; }
.rw-row-title{ font-weight:700; color:var(--ink); line-height:1.3; }
.rw-row-label{ font-size:.82rem; font-weight:600; color:var(--amber-ink); margin-top:2px; }
.rw-row-desc{ font-size:.82rem; color:var(--ink-soft); margin-top:3px; }
.rw-act{ flex:none; }
.rw-cost{ flex:none; width:58px; height:58px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; background:var(--amber-wash); color:var(--amber-ink); }
.rw-cost strong{ font-family:"IBM Plex Mono",monospace; font-size:1rem; }
.rw-cost span{ font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; }
.rw-ready .rw-cost{ background:linear-gradient(135deg, var(--amber), var(--amber-dark)); color:#fff; }
.rw-bar.rw-bar-thin{ height:5px; margin-top:9px; max-width:220px; background:var(--panel-2); }
.rw-bar-thin span{ background:linear-gradient(90deg, var(--amber-light), var(--amber)); }
.rw-need{ font-size:.78rem; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
body .btn.rw-sm:not(.btn-md):not(.btn-lg){ padding:9px 16px; border-radius:999px; font-size:.85rem; font-weight:700; }
.btn.rw-redeem{ min-width:100px; }
.btn.btn-amber.rw-armed, .btn.btn-amber.rw-armed:hover{ background:var(--ink); color:var(--bg); box-shadow:none; }
.rw-code{ flex:none; font:700 .82rem/1 "IBM Plex Mono",monospace; letter-spacing:.06em; padding:10px 12px; border-radius:10px; border:1.5px dashed var(--amber); background:var(--amber-wash); color:var(--amber-ink); cursor:pointer; }
.rw-code:hover{ border-style:solid; }
.rw-row.rw-new{ animation:rw-new 2.4s ease; }
@keyframes rw-new{ 0%, 30%{ background:var(--amber-wash); } 100%{ background:transparent; } }

.rw-stampcard{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:12px; }
.rw-stampcard-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.rw-count{ font:700 .85rem "IBM Plex Mono",monospace; color:var(--amber-ink); }
.rw-stamps{ display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 12px; }
.rw-stamp{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px dashed var(--line-strong); color:var(--line-strong); }
.rw-stamp svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.rw-stamp.on{ border:0; background:linear-gradient(135deg, var(--amber), var(--amber-dark)); color:#fff; animation:rw-stamp .4s cubic-bezier(.3,1.6,.5,1) both; }
.rw-stamp.on svg{ fill:rgba(255,255,255,.25); }
.rw-stamp-free{ font-size:.55rem; font-weight:800; letter-spacing:.06em; color:var(--ink-soft); }
.rw-stamp-free.on{ background:linear-gradient(135deg, #FFE6A3, #D29A2B); color:#3A2604; }
@keyframes rw-stamp{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }

.rw-tiers{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.rw-tierbox{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 12px; text-align:center; }
.rw-tierbox.current{ border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-wash); }
.rw-tierbox-from{ font-size:.78rem; color:var(--ink-soft); margin-top:10px; }
.rw-tierbox-mult{ font-size:.85rem; font-weight:700; color:var(--ink); margin-top:2px; }

.rw-history summary{ display:flex; justify-content:space-between; align-items:baseline; cursor:pointer; list-style:none; margin-bottom:10px; }
.rw-history summary::-webkit-details-marker{ display:none; }
.rw-history[open] summary .rw-link{ visibility:hidden; }
.rw-pts{ flex:none; font:700 .95rem "IBM Plex Mono",monospace; }
.rw-pts.plus{ color:var(--good); }
.rw-pts.minus{ color:var(--ink-soft); }

.rw-bday{ display:flex; gap:14px; align-items:flex-start; background:var(--panel); border:1px solid var(--amber); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; }
.rw-bday-icon{ flex:none; width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; background:var(--amber-wash); }
.rw-bday-act{ margin-top:12px; }

@media (max-width:480px){
  .rw-page{ padding-top:12px; }
  .rw-wrap{ padding:0 14px; }
  .rw-hero{ padding:20px 18px 16px; border-radius:20px; }
  .rw-row{ gap:12px; padding:13px 14px; }
  .rw-cost{ width:52px; height:52px; border-radius:14px; }
  /* the button drops under the text so titles get the full width */
  .rw-reward{ display:grid; grid-template-columns:52px 1fr; align-items:start; row-gap:10px; }
  .rw-reward .rw-act{ grid-column:2; }
  .rw-stamp{ width:34px; height:34px; }
  .rw-stamps{ gap:6px; }
  .rw-tiers{ gap:8px; }
  .rw-tierbox{ padding:12px 6px; }
}
@media (prefers-reduced-motion: reduce){
  .rw-stamp.on, .rw-row.rw-new{ animation:none; }
}
/* admin > Rewards */
.rwa-check{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin:0 0 12px; color:var(--ink); }
.rwa-check input{ width:17px; height:17px; margin-top:2px; flex:none; accent-color:var(--amber); }
.rwa-check small{ display:block; font-size:.8rem; color:var(--ink-soft); margin-top:2px; }
.btn.rwa-mini{ color:var(--ink); border-color:var(--line-strong); font-size:.75rem; }
body .btn.rwa-mini:not(.btn-md):not(.btn-lg){ padding:7px 12px; }