:root {
  --navy: #0a2540;
  --navy-deep: #061a30;
  --teal: #00c2cb;
  --teal-bright: #19e3d6;
  --accent: #2dd4bf;
  --ink: #0f1f33;
  --muted: #5b7088;
  --line: #e3e9f0;
  --bg: #f5f8fb;
  --card: #ffffff;
  --ok: #16a34a;
  --shadow: 0 20px 60px rgba(10, 37, 64, 0.12);
  --radius: 22px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: radial-gradient(
      1200px 700px at 15% -10%,
      rgba(0, 194, 203, 0.12),
      transparent 60%
    ),
    radial-gradient(
      1000px 800px at 110% 10%,
      rgba(45, 212, 191, 0.1),
      transparent 55%
    ),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------------- layout */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand .mark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--navy), #11385f);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(10, 37, 64, 0.25);
}
.brand .mark svg {
  width: 26px;
  height: 26px;
}
.brand .name {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 20px;
  color: var(--navy);
}
.brand .name span {
  color: var(--teal);
}
.brand .sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.topbar .event-pill {
  background: var(--navy);
  color: #cfeef0;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px 48px;
}

.card {
  width: 100%;
  max-width: 760px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(227, 233, 240, 0.9);
  padding: 44px 48px;
  animation: rise 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 800;
  color: var(--teal);
  margin-bottom: 10px;
}
h1 {
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  color: var(--navy);
}
.lead {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 28px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ forms */
label.field,
.field {
  display: block;
  margin-bottom: 22px;
}
.field > .q {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.field > .q .num {
  color: var(--teal);
  font-weight: 800;
}
.hint {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

input[type="text"],
input[type="search"],
select {
  width: 100%;
  font-family: var(--font);
  font-size: 18px;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fbfdff;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235b7088' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
  cursor: pointer;
}
input:focus,
select:focus {
  outline: none;
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 194, 203, 0.16);
}

/* multi-select chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  border: 1.5px solid var(--line);
  background: #fbfdff;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chip:active {
  transform: scale(0.97);
}
.chip.selected {
  background: linear-gradient(135deg, var(--navy), #15436e);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 8px 18px rgba(10, 37, 64, 0.22);
}
.chip .tick {
  width: 16px;
  height: 16px;
  display: none;
}
.chip.selected .tick {
  display: inline-block;
}

/* buttons */
.btn {
  font-family: var(--font);
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  padding: 17px 28px;
  border-radius: 14px;
  transition: transform 0.12s, box-shadow 0.15s, opacity 0.15s;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.btn-primary {
  background: linear-gradient(135deg, var(--teal), var(--accent));
  color: #04222a;
  box-shadow: 0 12px 26px rgba(0, 194, 203, 0.35);
  width: 100%;
}
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--line);
}
.btn-dark {
  background: var(--navy);
  color: #fff;
  width: 100%;
}

.row {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.row .btn {
  flex: 1;
}

/* search results */
.results {
  margin-top: 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.results .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
}
.results .item:last-child {
  border-bottom: none;
}
.results .item:hover {
  background: #f2fbfc;
}
.results .item .nm {
  font-weight: 600;
  font-size: 16px;
}
.results .item .id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: var(--teal);
  background: rgba(0, 194, 203, 0.1);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 14px;
}
.results .empty {
  padding: 16px 18px;
  color: var(--muted);
  font-size: 15px;
}

.idbadge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 194, 203, 0.1);
  border: 1px solid rgba(0, 194, 203, 0.3);
  color: var(--navy);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 24px;
}
.idbadge b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--teal);
}

/* progress */
.progress {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
}
.progress .seg {
  height: 6px;
  flex: 1;
  border-radius: 999px;
  background: var(--line);
}
.progress .seg.on {
  background: linear-gradient(90deg, var(--teal), var(--accent));
}

/* success / QR */
.success {
  text-align: center;
}
.success .check {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--accent));
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  box-shadow: 0 14px 30px rgba(0, 194, 203, 0.4);
  animation: pop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.qrwrap {
  margin: 26px auto 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  display: inline-block;
  box-shadow: var(--shadow);
}
.qrwrap img {
  display: block;
  width: 260px;
  height: 260px;
}
.qrcap {
  color: var(--muted);
  font-size: 15px;
  margin-top: 14px;
  font-weight: 500;
}
.qrcap a {
  color: var(--teal);
  font-weight: 700;
  word-break: break-all;
}

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  padding: 18px;
}
.foot-admin {
  margin-left: auto;
}
.foot a {
  color: var(--muted);
}

.hidden {
  display: none !important;
}

/* iPad / responsive */
@media (max-width: 820px) {
  .card {
    padding: 34px 28px;
  }
  h1 {
    font-size: 28px;
  }
  .topbar {
    padding: 18px 22px;
  }
}
@media (max-width: 540px) {
  .topbar .event-pill {
    display: none;
  }
}

/* ----------------------------------------------------------------- admin */
.admin-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
}
.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 8px 24px rgba(10, 37, 64, 0.06);
}
.stat .n {
  font-size: 34px;
  font-weight: 800;
  color: var(--navy);
}
.stat .l {
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(10, 37, 64, 0.06);
  font-size: 14px;
}
th,
td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  background: var(--navy);
  color: #cfe8ea;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
tr:hover td {
  background: #f7fbfc;
}
td .tag {
  display: inline-block;
  background: rgba(0, 194, 203, 0.12);
  color: #0a6b71;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
  margin: 2px 3px 2px 0;
}
.login-card {
  max-width: 420px;
  margin: 12vh auto 0;
}

/* ===================================================================
   KIOSK — animated dramatic hero
   =================================================================== */
body.kiosk {
  background: #05101f;
  color: #eaf2fb;
  overflow-x: hidden;
}

/* full-screen FX layers behind the app */
#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.aurora {
  position: fixed;
  inset: -20% -20% -20% -20%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(8px);
}
.aurora .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.aurora .b1 {
  width: 60vmax;
  height: 60vmax;
  left: -10vmax;
  top: -18vmax;
  background: radial-gradient(circle at 30% 30%, #00c2cb, transparent 70%);
  animation: drift1 22s ease-in-out infinite;
}
.aurora .b2 {
  width: 55vmax;
  height: 55vmax;
  right: -12vmax;
  top: -10vmax;
  background: radial-gradient(circle at 60% 40%, #2dd4bf, transparent 70%);
  animation: drift2 26s ease-in-out infinite;
}
.aurora .b3 {
  width: 50vmax;
  height: 50vmax;
  left: 20vmax;
  bottom: -22vmax;
  background: radial-gradient(circle at 50% 50%, #1d6fff, transparent 70%);
  animation: drift3 30s ease-in-out infinite;
  opacity: 0.4;
}
.aurora .b4 {
  width: 40vmax;
  height: 40vmax;
  right: 10vmax;
  bottom: -16vmax;
  background: radial-gradient(circle at 40% 60%, #19e3d6, transparent 70%);
  animation: drift1 24s ease-in-out infinite reverse;
}
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vmax, 6vmax) scale(1.15); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-7vmax, 9vmax) scale(1.1); }
}
@keyframes drift3 {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  50% { transform: translate(6vmax, -8vmax) scale(0.9); }
}
/* subtle moving grid + vignette overlay */
body.kiosk::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% -10%, transparent 55%, rgba(2, 8, 18, 0.85) 100%),
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 46px 100%;
  animation: gridpan 18s linear infinite;
}
@keyframes gridpan {
  from { background-position: 50% 0, 0 0, 0 0; }
  to { background-position: 50% 0, 0 46px, 46px 0; }
}

.kiosk .app { position: relative; z-index: 2; }

/* topbar recolor for dark hero */
.kiosk .brand .name { color: #fff; }
.kiosk .brand .sub { color: #8fb6c9; }
.kiosk .brand .mark {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 10px 34px rgba(0,194,203,0.4);
}
.kiosk .event-pill {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #d3f6f8;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.kiosk .foot { color: #6f879e; }
.kiosk .foot a { color: #9fd0d4; }

/* the cards glow on the dark hero */
.kiosk .card {
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 60px rgba(0, 194, 203, 0.12);
}

/* hero headline — animated gradient shimmer */
.kiosk #step-login h1,
.kiosk #step-done h1 {
  background: linear-gradient(100deg, #0a2540 0%, #0a2540 30%, #00c2cb 50%, #0a2540 70%, #0a2540 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite,
    rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes shimmer {
  to { background-position: -220% center; }
}

/* entrance for the login card bits */
.reveal { opacity: 0; transform: translateY(16px); animation: rise 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
.reveal.d1 { animation-delay: 0.05s; }
.reveal.d2 { animation-delay: 0.13s; }
.reveal.d3 { animation-delay: 0.22s; }
.reveal.d4 { animation-delay: 0.32s; }

/* floating brand chevrons */
.chev-motif {
  display: inline-flex;
  gap: 4px;
  color: var(--teal);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -2px;
  animation: chevPulse 1.8s ease-in-out infinite;
}
@keyframes chevPulse {
  0%, 100% { opacity: 0.55; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
}

/* ===================================================================
   MATERIALS — big horizontal cards
   =================================================================== */
#step-done.card { max-width: 900px; }
.materials {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 26px 0 8px;
}
.mcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f7fbfd);
  border-radius: 20px;
  padding: 22px 24px;
  cursor: pointer;
  overflow: hidden;
  font-family: var(--font);
  transition: transform 0.18s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.18s, border-color 0.18s;
}
.mcard:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 194, 203, 0.5);
  box-shadow: 0 18px 40px rgba(10, 37, 64, 0.16);
}
.mcard:active { transform: translateY(-1px) scale(0.995); }
.mcard .mc-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--teal), var(--accent));
}
.mcard.g2 .mc-accent { background: linear-gradient(180deg, #1d6fff, #19e3d6); }
.mcard.g3 .mc-accent { background: linear-gradient(180deg, #7c5cff, #19e3d6); }
.mcard.g4 .mc-accent { background: linear-gradient(180deg, #ff8a3d, #ffd24d); }
.mcard .mc-ic {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(0, 194, 203, 0.12);
  color: #0a6b71;
}
.mcard.g2 .mc-ic { background: rgba(29,111,255,0.12); color: #1d6fff; }
.mcard.g3 .mc-ic { background: rgba(124,92,255,0.12); color: #7c5cff; }
.mcard.g4 .mc-ic { background: rgba(255,138,61,0.14); color: #e9760f; }
.mcard .mc-ic svg { width: 28px; height: 28px; }
.mc-body { flex: 1; min-width: 0; }
.mc-no {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--teal);
}
.mcard.g2 .mc-no { color: #1d6fff; }
.mcard.g3 .mc-no { color: #7c5cff; }
.mcard.g4 .mc-no { color: #e9760f; }
.mc-title {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 2px 0 3px;
}
.mc-en { display: block; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.mc-go {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy);
  color: #fff;
  font-size: 18px;
  transition: transform 0.18s;
}
.mcard:hover .mc-go { transform: translateX(4px); }
.mc-badge {
  position: absolute;
  top: 14px; right: 16px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0,194,203,0.14);
  color: #0a6b71;
}
.mc-badge.soon { background: rgba(91,112,136,0.16); color: var(--muted); }
.mcard.is-soon { opacity: 0.82; }

/* ===================================================================
   MATERIAL VIEWER — glass back button
   =================================================================== */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #0b1726;
  display: flex;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.viewer iframe {
  border: none;
  width: 100%;
  height: 100%;
  background: #fff;
}
.glass-back {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 1010;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  padding: 13px 22px 13px 18px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(20, 40, 64, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition: transform 0.15s, background 0.15s;
}
.glass-back:hover { background: rgba(30, 56, 86, 0.6); transform: translateX(-2px); }
.glass-back:active { transform: scale(0.97); }
.glass-back svg { width: 18px; height: 18px; }
.coming {
  margin: auto;
  text-align: center;
  color: #cfe0ee;
  padding: 40px;
}
.coming .big { font-size: 30px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.coming .sm { font-size: 16px; color: #8fb6c9; }
.coming .ic {
  width: 86px; height: 86px; margin: 0 auto 22px;
  border-radius: 24px; display: grid; place-items: center;
  background: rgba(0,194,203,0.14); color: var(--teal);
}

@media (max-width: 700px) {
  .mc-en { display: none; }
  .mcard { padding: 18px 18px; gap: 14px; }
  .mc-title { font-size: 17px; }
}

/* ===================================================================
   Capricorn brand logo + site QR/link
   =================================================================== */
.brand .logo {
  height: 30px;
  width: auto;
  display: block;
  color: var(--navy); /* CAPRICORN wordmark uses currentColor */
}
.brand .brand-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1.5px solid var(--line);
}
/* on the dark kiosk hero the wordmark + tagline go light */
.kiosk .brand .logo { color: #ffffff; }
.kiosk .brand .brand-tag {
  color: #9fc6d3;
  border-left-color: rgba(255, 255, 255, 0.22);
}

/* site CTA: QR + link, sits inside the (white) login card */
.site-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f6fbfc);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.site-cta:hover {
  border-color: rgba(0, 194, 203, 0.55);
  box-shadow: 0 10px 26px rgba(10, 37, 64, 0.1);
  transform: translateY(-2px);
}
.site-cta:active { transform: translateY(0); }
.site-qr {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: #fff;
  flex: 0 0 auto;
}
.site-cta-text { flex: 1; min-width: 0; line-height: 1.3; }
.site-cta-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.site-cta-link {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  margin-top: 2px;
}
.site-cta-arrow {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--muted);
}
.site-cta:hover .site-cta-arrow { color: var(--teal); }

.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* Fix: white cards must use dark text even though the kiosk body is light-on-dark.
   Any element inside a card without an explicit color (e.g. search-result names)
   was inheriting the light body color and disappearing on white. */
.kiosk .card { color: var(--ink); }
.results .item .nm { color: var(--ink); }

/* ===================================================================
   Landing background — amped up, eye-catching
   =================================================================== */
/* rotating conic light beams behind everything */
.beams {
  position: fixed;
  left: 50%;
  top: 38%;
  width: 170vmax;
  height: 170vmax;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0, 194, 203, 0.16) 14deg,
    transparent 32deg,
    transparent 90deg,
    rgba(45, 212, 191, 0.13) 104deg,
    transparent 124deg,
    transparent 180deg,
    rgba(29, 111, 255, 0.12) 196deg,
    transparent 218deg,
    transparent 280deg,
    rgba(25, 227, 214, 0.14) 296deg,
    transparent 316deg,
    transparent 360deg
  );
  filter: blur(28px);
  opacity: 0.9;
  mix-blend-mode: screen;
  animation: spinBeams 34s linear infinite;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, #000 38%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 0%, #000 38%, transparent 72%);
}
@keyframes spinBeams {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* brighter, livelier aurora */
body.kiosk .aurora .blob { opacity: 0.72; filter: blur(64px); }
.aurora .b1 { animation-duration: 16s; }
.aurora .b2 { animation-duration: 19s; }
.aurora .b3 { opacity: 0.55; animation-duration: 22s; }
.aurora .b4 { animation-duration: 17s; }
.aurora .b5 {
  width: 34vmax; height: 34vmax;
  left: 38vmax; top: 30vmax;
  background: radial-gradient(circle at 50% 50%, #36e0e6, transparent 70%);
  opacity: 0.5;
  animation: drift2 14s ease-in-out infinite;
}

/* breathing glow halo behind the card */
.stage::before {
  content: "";
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 194, 203, 0.28), transparent 65%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  animation: pulseGlow 5.5s ease-in-out infinite;
}
.kiosk .stage { position: relative; }
@keyframes pulseGlow {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 0.85; transform: scale(1.08); }
}
.kiosk .stage .card { position: relative; z-index: 2; }

/* ===================================================================
   HUB — main menu (glass cards floating on the animated hero)
   =================================================================== */
.hub { width: 100%; max-width: 1020px; }
.hub-head { text-align: center; margin-bottom: 26px; }
.hub-title {
  font-size: 40px; margin: 4px 0 6px; color: #fff; letter-spacing: -0.02em;
  background: linear-gradient(100deg,#fff 30%,#19e3d6 50%,#fff 70%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: shimmer 6s linear infinite;
}
.hub-sub { color: #9fc6d3; font-size: 15px; font-weight: 500; margin: 0; }

/* hero 与 chat 横跨两列置于顶部；下方六张卡组成 2 列 × 3 行，
   左列为材料卡（intro / course / opc），右列为跳转链接（cal / prod / turtle）。
   六张卡都是 .hub-grid 的直接子元素——不再用 wrapper div，避免某一列塌成单格堆叠。 */
.hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "hero   hero"
    "chat   chat"
    "intro  cal"
    "course prod"
    "opc    turtle";
  gap: 18px;
  align-items: stretch;
}
.hub-grid .g-intro  { grid-area: intro; }
.hub-grid .g-course { grid-area: course; }
.hub-grid .g-opc    { grid-area: opc; }
.hub-grid .g-chat   { grid-area: chat; grid-column: 1 / -1; }
.hub-grid .g-cal    { grid-area: cal; }
.hub-grid .g-prod   { grid-area: prod; }
.hub-grid .g-turtle { grid-area: turtle; }
.hubcard {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  text-align: left; cursor: pointer; overflow: hidden;
  font-family: var(--font);
  padding: 22px 24px;
  border-radius: 22px;
  color: #eaf4f8;
  background: rgba(18, 38, 60, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s, border-color 0.2s;
}
.hubcard:hover {
  transform: translateY(-4px);
  border-color: rgba(25, 227, 214, 0.5);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(0, 194, 203, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.hubcard:active { transform: translateY(-1px) scale(0.995); }

/* gradient edge accent that lights on hover */
.hubcard::before {
  content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1px;
  background: linear-gradient(135deg, rgba(25,227,214,0.5), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.hubcard:hover::before { opacity: 1; }

.hc-ic {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; color: #04222a;
  background: linear-gradient(140deg, var(--teal-bright), var(--accent));
  box-shadow: 0 8px 22px rgba(0, 194, 203, 0.4);
}
.hc-ic svg { width: 28px; height: 28px; }
.hc-text { flex: 1; min-width: 0; }
.hc-title { display: block; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.hc-sub { display: block; font-size: 13px; color: #9fc1cf; font-weight: 500; margin-top: 3px; }
.hc-tag {
  position: absolute; top: 14px; right: 16px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.06em; padding: 3px 9px; border-radius: 999px;
  background: rgba(25,227,214,0.18); color: #aef6f0;
}
.hc-arrow {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #04222a;
  background: rgba(255,255,255,0.9); transition: transform 0.2s;
}
.hc-arrow svg { width: 20px; height: 20px; }

/* per-card icon gradients */
.hubcard.g-intro .hc-ic { background: linear-gradient(140deg,#19e3d6,#2dd4bf); }
.hubcard.g-cal .hc-ic { background: linear-gradient(140deg,#34c3ff,#19e3d6); box-shadow:0 8px 22px rgba(52,195,255,0.4); }
.hubcard.g-course .hc-ic { background: linear-gradient(140deg,#7c5cff,#34c3ff); box-shadow:0 8px 22px rgba(124,92,255,0.4); }
.hubcard.g-opc .hc-ic { background: linear-gradient(140deg,#ff8a3d,#ffd24d); box-shadow:0 8px 22px rgba(255,138,61,0.4); }
.hubcard.g-prod .hc-ic { background: linear-gradient(140deg,#ff5da2,#ff8a3d); box-shadow:0 8px 22px rgba(255,93,162,0.4); }
.hubcard.g-fb .hc-ic { background: linear-gradient(140deg,#19e3d6,#7c5cff); box-shadow:0 8px 22px rgba(124,92,255,0.35); }
.hubcard.g-chat .hc-ic { background: linear-gradient(140deg,#19e3d6,#34c3ff); box-shadow:0 8px 22px rgba(25,227,214,0.4); }
/* AI 客服 — full-width CTA card, a touch brighter than the glass cards */
.hubcard.g-chat {
  background: linear-gradient(120deg, rgba(25,227,214,0.16), rgba(52,195,255,0.12));
  border-color: rgba(25,227,214,0.36);
}
.hubcard.g-chat .hc-arrow { background: rgba(255,255,255,0.92); }
.hubcard.g-chat:hover .hc-arrow { transform: translateX(4px); }

/* hero check-in — spans full width across the top, vibrant */
.hubcard.hero {
  grid-area: hero;
  grid-column: 1 / -1;
  padding: 30px 32px;
  background: linear-gradient(120deg, rgba(0,194,203,0.92), rgba(45,212,191,0.92));
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 24px 60px rgba(0, 194, 203, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.4);
  color: #04222a;
}
.hubcard.hero:hover { transform: translateY(-4px); box-shadow: 0 30px 80px rgba(0,194,203,0.6); }
.hubcard.hero .hc-ic { width: 64px; height: 64px; background: rgba(255,255,255,0.92); color: #06606a; box-shadow: 0 10px 26px rgba(0,0,0,0.18); }
.hubcard.hero .hc-ic svg { width: 32px; height: 32px; }
.hubcard.hero .hc-title { font-size: 27px; color: #04222a; }
.hubcard.hero .hc-sub { font-size: 15px; color: #064c52; font-weight: 600; }
.hubcard.hero:hover .hc-arrow { transform: translateX(5px); }
.hubcard.hero .hc-arrow { background: #04222a; color: #fff; width: 50px; height: 50px; }
/* moving sheen on the hero */
.hc-shine {
  position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-18deg); animation: sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen { 0% { left: -60%; } 55%,100% { left: 130%; } }

/* step back button (login / calendar / feedback) */
.step-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-weight: 700; font-size: 14px;
  color: var(--muted); background: transparent; border: none; cursor: pointer;
  padding: 0; margin-bottom: 16px;
}
.step-back:hover { color: var(--teal-d, var(--teal)); }

.card.wide { max-width: 960px; }

/* ===================================================================
   CALENDAR / agenda
   =================================================================== */
.cal-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; }
.cal { }
.cal-month { font-weight: 800; font-size: 18px; color: var(--navy); margin-bottom: 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); padding: 4px 0; text-transform: uppercase; letter-spacing: 0.04em; }
.cal-cell {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--ink); position: relative;
}
.cal-cell.empty { background: transparent; }
.cal-cell.has {
  background: linear-gradient(140deg, var(--teal), var(--accent));
  color: #04222a; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,194,203,0.35);
}
.cal-cell.has::after {
  content: ""; position: absolute; bottom: 5px; width: 5px; height: 5px;
  border-radius: 50%; background: #04222a;
}
.agenda { display: flex; flex-direction: column; gap: 14px; }
.ev {
  display: flex; gap: 16px; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: 16px; background: linear-gradient(180deg,#fff,#f7fbfd);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ev.featured { border-color: rgba(0,194,203,0.5); box-shadow: 0 10px 26px rgba(0,194,203,0.14); }
.ev .ev-date {
  flex: 0 0 auto; width: 58px; text-align: center; border-radius: 12px;
  background: var(--navy); color: #fff; padding: 8px 0; align-self: flex-start;
}
.ev .ev-d { font-size: 22px; font-weight: 800; line-height: 1; }
.ev .ev-mo { font-size: 11px; font-weight: 700; color: #9fd0d4; text-transform: uppercase; margin-top: 3px; }
.ev .ev-body { flex: 1; min-width: 0; }
.ev .ev-tag { display: inline-block; font-size: 11px; font-weight: 800; color: var(--teal-d, #0a6b71); background: rgba(0,194,203,0.12); padding: 2px 9px; border-radius: 999px; margin-bottom: 5px; }
.ev .ev-title { font-size: 17px; font-weight: 800; color: var(--navy); }
.ev .ev-meta { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.ev .ev-desc { font-size: 13.5px; color: #3f5160; margin-top: 6px; line-height: 1.5; }

/* ===================================================================
   FEEDBACK
   =================================================================== */
textarea {
  width: 100%; font-family: var(--font); font-size: 17px; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: 14px; background: #fbfdff;
  color: var(--ink); resize: vertical; transition: border-color 0.15s, box-shadow 0.15s;
}
textarea:focus { outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px rgba(0,194,203,0.16); }
.stars { display: flex; gap: 8px; }
.star {
  width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #fbfdff; cursor: pointer; display: grid; place-items: center;
  color: #c7d2dd; transition: all 0.12s;
}
.star svg { width: 26px; height: 26px; }
.star:hover, .star.on { color: #ffb020; border-color: #ffd98a; background: #fffaf0; transform: scale(1.04); }
.fb-done { padding: 10px 0; }

@media (max-width: 760px) {
  .hub-grid { grid-template-columns: 1fr; grid-template-areas: none; }
  .hub-grid > .hubcard { grid-area: auto; grid-column: auto; }
  .cal-layout { grid-template-columns: 1fr; }
  .hub-title { font-size: 30px; }
}

/* full-width hub card (e.g. AI 小白课程) */
.hubcard.span2 { grid-column: 1 / -1; }
.hubcard.g-turtle .hc-ic {
  background: linear-gradient(140deg, #34d399, #19e3d6);
  box-shadow: 0 8px 22px rgba(52, 211, 153, 0.4);
}
.hubcard .hc-arrow {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #04222a;
  background: rgba(255, 255, 255, 0.9); transition: transform 0.2s;
}
.hubcard .hc-arrow svg { width: 20px; height: 20px; }
.hubcard:hover .hc-arrow { transform: translateX(4px); }

/* --------------------------------------------------- check-in celebration */
/* A giant seal slams down (盖章) when a guest finishes check-in, then the
   overlay fades to reveal the success card behind it. Triggered from app.js
   via .go (start) and .out (fade away). */
.stampfx {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.stampfx.hidden { display: none; }
.stampfx.out { opacity: 0; }

.stampfx-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 120% at 50% 50%,
    rgba(4, 18, 26, 0.62),
    rgba(4, 12, 20, 0.88)
  );
  backdrop-filter: blur(3px);
  opacity: 0;
}
.stampfx.go .stampfx-scrim { animation: stampScrim 0.3s ease-out both; }
@keyframes stampScrim { from { opacity: 0; } to { opacity: 1; } }

/* impact flash */
.stampfx-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(160, 250, 255, 0.85),
    rgba(160, 250, 255, 0) 70%
  );
  opacity: 0;
}
.stampfx.go .stampfx-flash {
  animation: stampFlash 0.5s 0.46s ease-out both;
}
@keyframes stampFlash {
  0% { opacity: 0; }
  14% { opacity: 0.55; }
  100% { opacity: 0; }
}

/* shockwave rings expanding from the impact point */
.stampfx-stage {
  position: relative;
  width: min(74vmin, 520px);
  height: min(74vmin, 520px);
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
}
.stampfx.go .stampfx-stage {
  animation: stampShake 0.55s 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes stampShake {
  0% { transform: scale(1.07); }
  14% { transform: scale(0.97) translateX(4px) rotate(0.7deg); }
  28% { transform: translateX(-6px) rotate(-0.8deg); }
  42% { transform: translateX(5px) rotate(0.5deg); }
  58% { transform: translateX(-3px); }
  76% { transform: translateX(2px); }
  100% { transform: scale(1) translateX(0) rotate(0); }
}

.stampfx-ring {
  position: absolute;
  width: 64%;
  height: 64%;
  border-radius: 50%;
  border: 4px solid rgba(25, 227, 214, 0.85);
  opacity: 0;
  transform: scale(0.3);
}
.stampfx.go .stampfx-ring { animation: stampRing 0.75s 0.48s ease-out both; }
.stampfx-ring.r2 {
  border-width: 2px;
  border-color: rgba(138, 247, 255, 0.7);
}
.stampfx.go .stampfx-ring.r2 { animation: stampRing 0.85s 0.56s ease-out both; }
@keyframes stampRing {
  0% { opacity: 0; transform: scale(0.3); }
  12% { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1.9); }
}

/* the seal itself — drops in from above, big, then locks at scale 1 */
.stampfx-seal {
  position: relative;
  width: 100%;
  height: 100%;
  color: #19e3d6;
  opacity: 0;
  filter: drop-shadow(0 0 26px rgba(25, 227, 214, 0.55))
    drop-shadow(0 10px 40px rgba(0, 0, 0, 0.45));
  transform: translateY(-16vh) scale(3.6) rotate(-24deg);
}
.stampfx.go .stampfx-seal {
  animation: stampDrop 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}
@keyframes stampDrop {
  0% {
    opacity: 0;
    transform: translateY(-16vh) scale(3.6) rotate(-24deg);
    filter: blur(7px) drop-shadow(0 0 26px rgba(25, 227, 214, 0.55));
  }
  35% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(-8deg);
    filter: blur(0) drop-shadow(0 0 26px rgba(25, 227, 214, 0.55))
      drop-shadow(0 10px 40px rgba(0, 0, 0, 0.45));
  }
}

/* seal artwork */
.stampfx-seal .seal-ink { stroke: #19e3d6; }
.stampfx-seal .seal-text { fill: #19e3d6; }
.stampfx-seal .seal-arc {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 2px;
}
.stampfx-seal .seal-star { font-size: 20px; dominant-baseline: middle; text-anchor: middle; }
.stampfx-seal .seal-chev {
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 3px;
  text-anchor: middle;
}
.stampfx-seal .seal-cn {
  font-weight: 800;
  font-size: 56px;
  letter-spacing: 4px;
  text-anchor: middle;
}
.stampfx-seal .seal-en {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 5px;
  text-anchor: middle;
}

/* confetti + dust particles (positioned by app.js via the Web Animations API) */
.stampfx-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stampfx-burst .pcl {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 2px;
  will-change: transform, opacity;
}
.stampfx-burst .pcl.dust {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8af7ff;
  box-shadow: 0 0 8px rgba(138, 247, 255, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .stampfx.go .stampfx-seal,
  .stampfx.go .stampfx-stage,
  .stampfx.go .stampfx-ring,
  .stampfx.go .stampfx-flash {
    animation-duration: 0.2s;
    animation-delay: 0s;
  }
}

/* ===================================================================
   AI 客服 — chat screen
   =================================================================== */
.chat-card { display: flex; flex-direction: column; max-width: 640px; }
.chat-lead { margin-bottom: 14px; }

.chat-window {
  flex: 1;
  min-height: 300px;
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #f7fafc;
  -webkit-overflow-scrolling: touch;
}

.msg { display: flex; }
.msg.user { justify-content: flex-end; }
.msg .bubble {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 15.5px;
  line-height: 1.55;
  white-space: normal;
  word-break: break-word;
}
.msg.bot .bubble {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.msg.user .bubble {
  background: linear-gradient(135deg, var(--teal), var(--accent));
  color: #04222a;
  font-weight: 600;
  border-bottom-right-radius: 5px;
}
.msg .bubble a { color: var(--teal-d, var(--teal)); font-weight: 600; }
.msg.user .bubble a { color: #04343a; text-decoration: underline; }

/* typing indicator */
.bubble.typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.bubble.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted);
  animation: chatDot 1.2s infinite ease-in-out;
}
.bubble.typing span:nth-child(2) { animation-delay: 0.2s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* quick-prompt chips */
.chat-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.chat-chip {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal-d, var(--teal));
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(0, 194, 203, 0.08);
  border: 1.5px solid rgba(0, 194, 203, 0.32);
  transition: background 0.15s, transform 0.1s;
}
.chat-chip:hover { background: rgba(0, 194, 203, 0.16); }
.chat-chip:active { transform: scale(0.96); }

/* input row */
.chat-input {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.chat-input input {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-input input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 194, 203, 0.15);
}
.chat-send {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #04222a;
  background: linear-gradient(135deg, var(--teal), var(--accent));
  box-shadow: 0 8px 22px rgba(0, 194, 203, 0.32);
  transition: transform 0.12s, opacity 0.15s;
}
.chat-send:hover { transform: translateY(-2px); }
.chat-send:active { transform: scale(0.95); }
.chat-send:disabled { opacity: 0.5; cursor: default; transform: none; }
.chat-send svg { width: 22px; height: 22px; }

.chat-disclaimer {
  margin: 10px 2px 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}