:root {
  --ui-bg: #f3f6f4;
  --ui-surface: #ffffff;
  --ui-surface-soft: #edf3f0;
  --ui-ink: #17231f;
  --ui-text: #34443e;
  --ui-muted: #71807a;
  --ui-line: #dbe4df;
  --ui-line-strong: #c5d2cc;
  --ui-primary: #1d6b5a;
  --ui-primary-dark: #155044;
  --ui-primary-soft: #dff0ea;
  --ui-coral: #dc654b;
  --ui-coral-dark: #b84834;
  --ui-gold: #c79238;
  --ui-danger: #c74646;
  --ui-success: #26845d;
  --ui-shadow-sm: 0 1px 2px rgba(23, 35, 31, .05), 0 5px 16px rgba(23, 35, 31, .04);
  --ui-shadow-md: 0 14px 36px rgba(23, 35, 31, .11);
  --ui-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ui-smooth: cubic-bezier(.16, 1, .3, 1);
}

html[data-theme="dark"] {
  --ui-bg: #101513;
  --ui-surface: #18201d;
  --ui-surface-soft: #202b27;
  --ui-ink: #f0f5f2;
  --ui-text: #cad5d0;
  --ui-muted: #8c9b95;
  --ui-line: #2b3833;
  --ui-line-strong: #3a4b44;
  --ui-primary: #66c0aa;
  --ui-primary-dark: #87d7c4;
  --ui-primary-soft: #1d3e35;
  --ui-coral: #ef836a;
  --ui-coral-dark: #f2a18e;
  --ui-gold: #e1b45f;
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .18), 0 8px 20px rgba(0, 0, 0, .13);
  --ui-shadow-md: 0 18px 44px rgba(0, 0, 0, .3);
}

html { background: var(--ui-bg); }
body { accent-color: var(--ui-primary); }
button, input, select, textarea { font: inherit; }
button, .btn, a { -webkit-tap-highlight-color: transparent; }

/* Public event listing */
body.site-page {
  --bg: var(--ui-bg);
  --bg2: var(--ui-surface-soft);
  --bg-card: var(--ui-surface);
  --bg-card-h: #fbfdfc;
  --bg-input: var(--ui-surface);
  --bg-chip: var(--ui-surface-soft);
  --tea: var(--ui-primary);
  --tea-light: var(--ui-primary);
  --tea-dim: #52766d;
  --tea-glow: rgba(29, 107, 90, .14);
  --tea-glow-s: rgba(29, 107, 90, .07);
  --text: var(--ui-text);
  --text-dim: var(--ui-muted);
  --text-muted: #98a49f;
  --text-bright: var(--ui-ink);
  --border: var(--ui-line);
  --border-l: var(--ui-line-strong);
  --shadow: rgba(23, 35, 31, .14);
  --ctrl-bg: rgba(243, 246, 244, .9);
  color: var(--ui-text);
  background: var(--ui-bg);
  font-family: "Nunito Sans", system-ui, sans-serif;
}

html[data-theme="dark"] body.site-page {
  --bg: var(--ui-bg);
  --bg2: #141b18;
  --bg-card: var(--ui-surface);
  --bg-card-h: #1d2824;
  --bg-input: #18211d;
  --bg-chip: #202b27;
  --tea: var(--ui-primary);
  --tea-light: var(--ui-primary);
  --tea-dim: #82a69d;
  --tea-glow: rgba(102, 192, 170, .17);
  --tea-glow-s: rgba(102, 192, 170, .08);
  --text: var(--ui-text);
  --text-dim: var(--ui-muted);
  --text-muted: #66766f;
  --text-bright: var(--ui-ink);
  --border: var(--ui-line);
  --border-l: var(--ui-line-strong);
  --shadow: rgba(0, 0, 0, .35);
  --ctrl-bg: rgba(16, 21, 19, .91);
}

body.site-page::before {
  opacity: .72;
  background-image:
    radial-gradient(circle at 18px 18px, transparent 0 9px, rgba(199, 146, 56, .055) 9.5px 10.5px, transparent 11px),
    linear-gradient(135deg, transparent 0 49%, rgba(29, 107, 90, .022) 49.5% 50.5%, transparent 51% 100%);
  background-size: 112px 112px, 56px 56px;
  mask-image: none;
}

body.site-page .hdr {
  padding: 20px 0 15px;
  background: rgba(255, 255, 255, .54);
  border-bottom: 1px solid rgba(219, 228, 223, .72);
}
html[data-theme="dark"] body.site-page .hdr { background: rgba(16, 21, 19, .56); }
body.site-page .hdr-in { max-width: 1280px; }
body.site-page .logo-row {
  gap: 11px;
  margin-bottom: 4px;
  color: inherit;
  text-decoration: none;
}
body.site-page .logo-cup {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  color: #62a33d;
  isolation: isolate;
}
body.site-page .logo-cup::before { content: none; }
body.site-page .brand-cup-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 4px 5px rgba(23, 35, 31, .1));
}
body.site-page .brand-cup-art {
  transform-box: fill-box;
  transform-origin: 50% 70%;
  transition: transform .48s var(--ui-spring), filter .28s ease;
}
body.site-page .brand-cup-fill,
body.site-page .brand-rim {
  fill: #fffdf8;
  stroke: #62a33d;
  stroke-width: 4;
  stroke-linejoin: round;
}
body.site-page .brand-rim { transform-origin: center; }
body.site-page .brand-coffee-line {
  fill: none;
  stroke: #df7a2d;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 58;
  animation: teeatr-coffee 4.8s ease-in-out infinite;
}
body.site-page .brand-handle {
  fill: none;
  stroke: #62a33d;
  stroke-width: 6;
  stroke-linecap: round;
}
body.site-page .brand-cup-letter {
  fill: #df7a2d;
  font: 700 40px/1 "Playfair Display", Georgia, serif;
}
body.site-page .brand-saucer {
  fill: none;
  stroke: #74a942;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 105;
  animation: teeatr-saucer 5.6s ease-in-out infinite;
}
body.site-page .brand-leaf {
  transform-box: fill-box;
  transform-origin: 8% 74%;
  animation: teeatr-leaf 4.6s ease-in-out infinite;
}
body.site-page .brand-leaf-fill { fill: #5f9638; }
body.site-page .brand-leaf-vein {
  fill: none;
  stroke: #eff8e8;
  stroke-width: 2.5;
  stroke-linecap: round;
}
body.site-page .brand-steam { color: #62a33d; }
body.site-page .brand-steam path {
  transform-box: fill-box;
  transform-origin: center bottom;
  stroke-dasharray: 38;
  animation: teeatr-steam-rise 3.2s ease-in-out infinite;
}
body.site-page .brand-steam-two { animation-delay: -1.45s !important; }
@keyframes teeatr-steam-rise {
  0% { opacity: 0; stroke-dashoffset: 38; transform: translate3d(0, 7px, 0) scaleY(.72); }
  34% { opacity: .78; stroke-dashoffset: 10; }
  68% { opacity: .48; stroke-dashoffset: 0; transform: translate3d(2px, -2px, 0) scaleY(1); }
  100% { opacity: 0; stroke-dashoffset: -10; transform: translate3d(-1px, -8px, 0) scaleY(.86); }
}
@keyframes teeatr-coffee {
  0%, 100% { stroke-dashoffset: 0; opacity: .92; transform: scaleX(1); }
  48% { stroke-dashoffset: 7; opacity: 1; transform: scaleX(.92); }
}
@keyframes teeatr-saucer {
  0%, 78%, 100% { stroke-dashoffset: 0; opacity: 1; }
  88% { stroke-dashoffset: 12; opacity: .72; }
}
@keyframes teeatr-leaf {
  0%, 72%, 100% { transform: rotate(0deg) scale(1); }
  82% { transform: rotate(-7deg) scale(1.04); }
  90% { transform: rotate(3deg) scale(.99); }
}
@media (hover: hover) and (pointer: fine) {
  body.site-page .logo-row:hover .brand-cup-art {
    transform: translateY(-2px) rotate(-2deg) scale(1.035);
    filter: drop-shadow(0 7px 7px rgba(29, 107, 90, .16));
  }
  body.site-page .logo-row:hover .brand-steam path { animation-duration: 2.1s; }
}
body.site-page h1 { font-size: 34px; letter-spacing: 0; }
body.site-page h1 .brand-ee { color: var(--ui-coral); }
body.site-page .sub { margin-top: 5px; color: var(--ui-muted); letter-spacing: .025em; }
body.site-page .hdr-divider { margin-top: 7px; }
body.site-page .hdr-divider::before,
body.site-page .hdr-divider::after { background: var(--ui-line-strong); }
body.site-page .hdr-divider-dot { background: var(--ui-primary); }

body.site-page .header-tools { gap: 7px; }
body.site-page .theme-toggle,
body.site-page .about-close {
  border-color: var(--ui-line);
  background: var(--ui-surface);
  color: var(--ui-primary);
  box-shadow: var(--ui-shadow-sm);
  transition: transform .34s var(--ui-spring), border-color .2s, box-shadow .2s, color .2s;
}
body.site-page .about-close {
  transform: none;
  transition: border-color .2s, box-shadow .2s, color .2s, background .2s;
}
@media (hover: hover) and (pointer: fine) {
  body.site-page .theme-toggle:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: var(--ui-primary);
    box-shadow: 0 9px 22px rgba(29, 107, 90, .13);
  }
  body.site-page .about-close:hover {
    transform: none;
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft);
    box-shadow: 0 7px 18px rgba(29, 107, 90, .12);
  }
}
body.site-page .theme-toggle:active { transform: translateY(1px) scale(.92); }
body.site-page .about-close:active { transform: none; box-shadow: inset 0 1px 3px rgba(29, 107, 90, .16); }

body.site-page .mobile-tip-in {
  border-color: rgba(29, 107, 90, .18);
  background: var(--ui-primary-soft);
  color: var(--ui-primary-dark);
}

body.site-page .ctrl {
  padding: 11px 0;
  border-color: var(--ui-line);
  background: var(--ctrl-bg);
  box-shadow: 0 1px 0 rgba(255,255,255,.65);
}
body.site-page .ctrl.scrolled { box-shadow: 0 14px 38px rgba(23, 35, 31, .12); }
body.site-page .ctrl-in { max-width: 1280px; gap: 9px; }
body.site-page .dg label,
body.site-page .fg label { color: var(--ui-muted); letter-spacing: .07em; }
body.site-page .date-proxy,
body.site-page input[type="search"],
body.site-page select {
  border-color: var(--ui-line-strong);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 1px 2px rgba(23,35,31,.03);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ui-smooth);
}
body.site-page .date-proxy:hover,
body.site-page input[type="search"]:hover,
body.site-page select:hover { border-color: #9eb7ae; }
body.site-page .date-proxy:focus-visible,
body.site-page input[type="search"]:focus,
body.site-page select:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 4px rgba(29, 107, 90, .11);
}
body.site-page .qd { gap: 5px; }
body.site-page .qb {
  border-color: var(--ui-line-strong);
  border-radius: 7px;
  background: transparent;
  color: var(--ui-muted);
  transition: transform .32s var(--ui-spring), color .18s, border-color .18s, background .18s, box-shadow .18s;
}
body.site-page .qb.on {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
  box-shadow: 0 5px 13px rgba(29, 107, 90, .2);
}
@media (hover: hover) and (pointer: fine) {
  body.site-page .qb:not(.on):hover {
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft);
    color: var(--ui-primary-dark);
    transform: translateY(-2px);
  }
}
body.site-page .sb,
body.site-page .about-actions a:first-child,
body.site-page .ad-pop a {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ui-primary-dark);
  border-radius: 8px;
  background: var(--ui-primary);
  color: #fff;
  box-shadow: 0 4px 0 var(--ui-primary-dark), 0 10px 20px rgba(29,107,90,.14);
  transition: transform .08s ease, box-shadow .08s ease, background .18s;
}
body.site-page .sb:hover,
body.site-page .about-actions a:first-child:hover { background: #247967; }
body.site-page .sb:active,
body.site-page .about-actions a:first-child:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ui-primary-dark), 0 5px 12px rgba(29,107,90,.12);
}
body.site-page .rb {
  border-color: var(--ui-line-strong);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-primary);
  box-shadow: var(--ui-shadow-sm);
}

body.site-page .main { max-width: 1280px; padding-top: 22px; }
body.site-page .dh {
  gap: 14px;
  margin-bottom: 14px;
  padding: 0 2px 11px;
  border-color: var(--ui-line);
}
body.site-page .dd {
  color: var(--ui-coral);
  font-size: 38px;
}
body.site-page .dw { color: var(--ui-ink); }
body.site-page .dc {
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-muted);
  box-shadow: 0 1px 2px rgba(23,35,31,.03);
}
body.site-page .eg { gap: 14px; }
body.site-page .ec {
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
  transition: transform .46s var(--ui-spring), box-shadow .28s var(--ui-smooth), border-color .2s, background .2s;
}
body.site-page .ec::before {
  height: 3px;
  opacity: 1;
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-coral), var(--ui-gold));
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform .45s var(--ui-smooth);
}
@media (hover: hover) and (pointer: fine) {
  body.site-page .ec:hover {
    transform: translateY(-5px);
    border-color: #b9cbc3;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-md);
  }
  body.site-page .ec:hover::before { transform: scaleX(1); }
  body.site-page .ec:hover .ei { transform: scale(1.055); filter: saturate(1.08) contrast(1.02); }
}
body.site-page .ec:active { transform: translateY(1px) scale(.985); }
body.site-page .ei,
body.site-page .ep {
  border-radius: 6px;
  border: 1px solid rgba(23, 35, 31, .08);
}
body.site-page .ei { transition: transform .65s var(--ui-smooth), filter .35s; }
body.site-page .en { color: var(--ui-ink); letter-spacing: 0; }
body.site-page .cat-tag {
  border-color: var(--ui-line);
  background: var(--ui-surface-soft);
  color: var(--ui-primary-dark);
}
body.site-page .ev { border-radius: 5px; box-shadow: none; }
body.site-page .eb { border-color: var(--ui-line); }
body.site-page .etm { color: var(--ui-primary-dark); }
body.site-page .epr { color: var(--ui-text); }
body.site-page .ear {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  background: var(--ui-surface-soft);
  color: var(--ui-primary);
  transition: transform .4s var(--ui-spring), color .2s, background .2s;
}
body.site-page .ec:hover .ear { transform: translate(2px,-2px) rotate(7deg); background: var(--ui-primary); color: #fff; }

body.site-page .about-layer { background: rgba(15, 25, 21, .46); }
body.site-page .about-pop,
body.site-page .ad-pop {
  border-color: var(--ui-line);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: 0 28px 90px rgba(16, 38, 30, .24);
  animation: ui-pop .5s var(--ui-spring) both;
}
body.site-page .about-pop h2,
body.site-page .ad-pop h3 { color: var(--ui-ink); }
body.site-page .about-actions a:not(:first-child) { border-radius: 8px; border-color: var(--ui-line-strong); }
body.site-page .ad-x { background: var(--ui-surface-soft); color: var(--ui-ink); border-color: var(--ui-line); }
body.site-page .err-b { border-color: rgba(199,70,70,.28); background: #fff0f0; color: #a33d3d; }
body.site-page .seo-blurb,
body.site-page .footer { color: var(--ui-muted); }
body.site-page .seo-blurb h2 { color: var(--ui-text); letter-spacing: .04em; }
body.site-page .footer { border-color: var(--ui-line); background: rgba(255,255,255,.42); }
body.site-page .footer a { color: var(--ui-primary); position: relative; }
body.site-page .footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--ui-coral);
  transition: right .3s var(--ui-smooth);
}
body.site-page .footer a:hover::after { right: 0; }

/* Admin, authentication and compact utility pages */
body.admin-page,
body.auth-page,
body.form-page {
  --bg: var(--ui-bg);
  --card: var(--ui-surface);
  --card2: var(--ui-surface-soft);
  --line: var(--ui-line);
  --tea: var(--ui-primary);
  --text: var(--ui-ink);
  --muted: var(--ui-muted);
  --ok: var(--ui-success);
  --bad: var(--ui-danger);
  --warn: var(--ui-gold);
  color-scheme: light;
  background-color: var(--ui-bg);
  background-image:
    linear-gradient(rgba(29,107,90,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,107,90,.025) 1px, transparent 1px);
  background-size: 38px 38px;
  color: var(--ui-text);
  font-family: "Nunito Sans", system-ui, sans-serif;
}
body.admin-page .side {
  background: rgba(255,255,255,.92);
  border-color: var(--ui-line);
  box-shadow: 8px 0 30px rgba(23,35,31,.035);
}
body.admin-page .brand,
body.form-page .brand,
body.auth-page h1 {
  color: var(--ui-ink);
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: 0;
}
body.admin-page .brand span,
body.form-page .brand span,
body.auth-page h1 span { color: var(--ui-coral); }
body.admin-page .nav { gap: 4px; }
body.admin-page .nav a {
  position: relative;
  border-radius: 7px;
  color: var(--ui-muted);
  transition: transform .3s var(--ui-spring), color .18s, background .18s;
}
body.admin-page .nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--ui-coral);
  transform: scaleY(0);
  transition: transform .32s var(--ui-spring);
}
body.admin-page .nav a.on {
  background: var(--ui-primary-soft);
  color: var(--ui-primary-dark);
  font-weight: 800;
}
body.admin-page .nav a.on::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) {
  body.admin-page .nav a:hover { background: var(--ui-surface-soft); color: var(--ui-primary-dark); transform: translateX(3px); }
}
body.admin-page .main { max-width: 1460px; padding: 28px 32px 60px; }
body.admin-page .top h1 { margin: 0; color: var(--ui-ink); font: 700 30px/1.15 "Playfair Display", Georgia, serif; }
body.admin-page .panel,
body.admin-page .stat,
body.form-page .card,
body.auth-page .card {
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-sm);
}
body.admin-page .panel { padding: 20px; }
body.admin-page .panel h2 { color: var(--ui-ink); margin-top: 0; }
body.admin-page .stat {
  position: relative;
  overflow: hidden;
  padding: 17px;
  transition: transform .42s var(--ui-spring), box-shadow .25s, border-color .2s;
}
body.admin-page .stat::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--ui-primary);
}
body.admin-page .stat:nth-child(3n+2)::after { background: var(--ui-coral); }
body.admin-page .stat:nth-child(3n)::after { background: var(--ui-gold); }
body.admin-page .stat b { color: var(--ui-primary); font-family: "Playfair Display", Georgia, serif; }
body.admin-page .stat:nth-child(3n+2) b { color: var(--ui-coral-dark); }
@media (hover: hover) and (pointer: fine) {
  body.admin-page .stat:hover { transform: translateY(-4px); border-color: var(--ui-line-strong); box-shadow: var(--ui-shadow-md); }
}
body.admin-page .btn,
body.form-page .btn,
body.auth-page .btn {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ui-primary-dark);
  border-radius: 7px;
  background: var(--ui-primary);
  color: #fff;
  box-shadow: 0 3px 0 var(--ui-primary-dark);
  transition: transform .08s ease, box-shadow .08s ease, background .18s;
}
body.admin-page .btn:active,
body.form-page .btn:active,
body.auth-page .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ui-primary-dark); }
body.admin-page .btn.ghost,
body.form-page .btn.ghost {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface);
  color: var(--ui-primary-dark);
  box-shadow: 0 2px 0 var(--ui-line-strong);
}
body.admin-page .btn.danger { border-color: #dfb1b1; color: var(--ui-danger); }
body.admin-page input,
body.admin-page select,
body.admin-page textarea,
body.form-page input,
body.form-page textarea,
body.auth-page input {
  border: 1px solid var(--ui-line-strong);
  border-radius: 7px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: inset 0 1px 2px rgba(23,35,31,.035);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
body.admin-page input:focus,
body.admin-page select:focus,
body.admin-page textarea:focus,
body.form-page input:focus,
body.form-page textarea:focus,
body.auth-page input:focus {
  outline: 0;
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 4px rgba(29,107,90,.11);
}
body.admin-page th { color: var(--ui-primary-dark); background: var(--ui-surface-soft); }
body.admin-page th,
body.admin-page td { border-color: var(--ui-line); }
body.admin-page tbody tr { transition: background .18s; }
body.admin-page tbody tr:hover { background: #f5faf7; }
body.admin-page pre { border-color: var(--ui-line); border-radius: 7px; background: #18231f; color: #b9eadc; }
body.admin-page code { color: var(--ui-primary-dark); }
body.admin-page .pills a { border-color: var(--ui-line-strong); border-radius: 7px; color: var(--ui-muted); }
body.admin-page .pills a.on { background: var(--ui-primary); color: #fff; }
body.admin-page .bar { background: var(--ui-surface-soft); }
body.admin-page .bar span { background: var(--ui-primary); }
body.admin-page .admin-burger {
  border-color: var(--ui-line-strong);
  border-radius: 7px;
  background: var(--ui-surface);
  color: var(--ui-primary-dark);
  box-shadow: var(--ui-shadow-md);
}
body.admin-page .admin-burger i { background: var(--ui-primary); }
body.admin-page .nav-backdrop { background: rgba(17,34,28,.42); backdrop-filter: blur(4px); }

body.form-page { padding: 26px 18px 54px; }
body.form-page .wrap { max-width: 760px; }
body.form-page .brand { margin-top: 18px; font-size: 42px; }
body.form-page .card { padding: 24px; }
body.form-page label,
body.admin-page label,
body.auth-page label { color: var(--ui-muted); letter-spacing: .05em; }
body.form-page .flash,
body.admin-page .flash,
body.auth-page .bad { border-radius: 7px; }
body.form-page .flash.ok,
body.admin-page .flash.ok { border-color: #a8d8c4; background: #eaf8f1; color: #1d6749; }
body.form-page .flash.bad,
body.admin-page .flash.bad,
body.auth-page .bad { border-color: #e3b0b0; background: #fff0f0; color: #9e3c3c; }
body.auth-page { padding: 18px; }
body.auth-page .card { width: min(430px,100%); padding: 26px; }

/* Motion helpers */
.ui-ripple-host { position: relative !important; overflow: hidden !important; }
.ui-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255,255,255,.46);
  pointer-events: none;
  transform: scale(0);
  animation: ui-ripple .62s ease-out forwards;
}
.ui-reveal { opacity: 0; transform: translateY(14px); }
.ui-reveal.ui-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s var(--ui-smooth), transform .58s var(--ui-spring);
}
@keyframes ui-ripple { to { transform: scale(18); opacity: 0; } }
@keyframes ui-pop {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  body.admin-page .main { padding: 18px 14px 52px; }
  body.admin-page .side { background: var(--ui-surface); }
}

@media (max-width: 768px) {
  body.site-page .hdr { padding: 16px 0 12px; }
  body.site-page .hdr-in,
  body.site-page .main { padding-left: 12px; padding-right: 12px; }
  body.site-page h1 { font-size: 27px; }
  body.site-page .ctrl { padding: 9px 0; }
  body.site-page .main { padding-top: 16px; }
  body.site-page .eg { gap: 9px; }
  body.site-page .ec { border-radius: 8px; }
  body.site-page .et { padding: 8px 8px 0; }
  body.site-page .eb { padding: 7px 8px 9px; }
  body.site-page .dd { font-size: 29px; }
}

@media (max-width: 1180px) and (orientation: landscape) {
  body.site-page .hdr { padding: 7px 0 5px; }
  body.site-page .logo-row { margin-bottom: 0; }
  body.site-page .logo-cup { width: 38px; height: 38px; flex-basis: 38px; }
  body.site-page .brand-steam path { animation-duration: 3.6s; }
  body.site-page h1 { font-size: 23px; }
  body.site-page .sub,
  body.site-page .hdr-divider { display: none; }
  body.site-page .ctrl { padding: 6px 0; }
  body.site-page .ctrl-in {
    grid-template-columns: minmax(0, 34fr) minmax(0, 48fr) minmax(0, 18fr);
  }
}

@media (max-width: 480px) {
  body.site-page .hdr { padding-top: 12px; }
  body.site-page .logo-cup { width: 43px; height: 43px; flex-basis: 43px; }
  body.site-page h1 { font-size: 23px; }
  body.site-page .header-tools { right: 12px; gap: 5px; }
  body.site-page .theme-toggle { width: 33px; height: 33px; }
  body.site-page .ctrl-in { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.site-page .dates-row,
  body.site-page .qd,
  body.site-page .ctrl-actions { grid-column: 1 / -1; }
  body.site-page .fg.search-fg { grid-column: 1; }
  body.site-page .fg.cat-fg { grid-column: 2; }
  body.site-page input[type="search"],
  body.site-page select { min-width: 0; text-overflow: ellipsis; }
  body.site-page .qb { padding-inline: 10px; }
  body.site-page .dh { gap: 9px; }
  body.site-page .dd { font-size: 26px; min-width: 36px; }
  body.site-page .dc { padding-inline: 8px; font-size: 10px; }
  body.site-page .about-pop { border-radius: 8px; }
  body.form-page { padding: 16px 12px 40px; }
  body.form-page .card { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  body.site-page .brand-steam path,
  body.site-page .brand-coffee-line,
  body.site-page .brand-saucer,
  body.site-page .brand-leaf { animation: none; opacity: 1; }
  body.site-page .brand-cup-art { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-reveal,
  .ui-reveal.ui-visible { opacity: 1; transform: none; transition: none; }
  .ui-ripple { display: none; }
}
