:root {
  --forest: #173f35;
  --forest-2: #0f3028;
  --forest-soft: #2d594d;
  --ivory: #f7f0e3;
  --paper: #fffdf8;
  --paper-2: #f1e7d7;
  --gold: #b58a3a;
  --gold-soft: #d4bd86;
  --burgundy: #7e2e35;
  --ink: #28231d;
  --muted: #796f63;
  --line: rgba(57, 47, 36, .14);
  --shadow: 0 18px 60px rgba(36, 30, 23, .09);
  --shadow-soft: 0 8px 30px rgba(36, 30, 23, .07);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  --font: "Noto Sans Thai", "IBM Plex Sans Thai", "Leelawadee UI", Tahoma, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ivory); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(181, 138, 58, .08), transparent 28rem),
    linear-gradient(180deg, #faf5ec 0%, var(--ivory) 100%);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  z-index: 9999;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1,h2,h3,p { margin-top: 0; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  color: var(--ink);
  padding: 11px 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(23,63,53,.48);
  box-shadow: 0 0 0 4px rgba(23,63,53,.08);
  background: #fff;
}
input::placeholder, textarea::placeholder { color: #a69b8f; }
label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; color: #514940; }

.hidden { display: none !important; }
.eyebrow, .micro-label, .brand-kicker {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--forest);
}
.burgundy { color: var(--burgundy) !important; }

.primary-btn, .secondary-btn, .danger-btn, .compact-btn {
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.primary-btn { background: var(--forest); color: #fffdf8; box-shadow: 0 8px 22px rgba(23,63,53,.18); }
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(23,63,53,.24); }
.primary-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.secondary-btn { background: var(--paper); color: var(--forest); border-color: rgba(23,63,53,.18); }
.secondary-btn:hover { background: #fff; }
.danger-btn { background: #fff8f7; color: var(--burgundy); border-color: rgba(126,46,53,.18); }
.compact-btn { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.full { width: 100%; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(86px + var(--safe-bottom));
  transform: translate(-50%, 18px);
  z-index: 10000;
  max-width: min(90vw, 420px);
  background: var(--forest-2);
  color: white;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.fatal {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 32px;
  text-align: center;
}
.fatal strong { color: var(--burgundy); font-size: 22px; }
.fatal span { color: var(--muted); }

/* brand */
.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 54px; height: 54px; flex: 0 0 auto; }
.brand-lockup.compact .brand-mark { width: 42px; height: 42px; }
.brand-title { margin-top: 3px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 800; line-height: 1; color: var(--forest); letter-spacing: .015em; }
.brand-lockup.compact .brand-title { font-size: 16px; }
.brand-lockup.compact .brand-kicker { font-size: 8px; max-width: 270px; }

/* landing */
.landing-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  min-height: 100vh;
  padding: 20px 0 34px;
  display: grid;
  gap: 18px;
  align-items: start;
}
.landing-hero, .auth-panel {
  border: 1px solid rgba(95,72,42,.11);
  box-shadow: var(--shadow);
}
.landing-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 24px;
  background:
    linear-gradient(rgba(255,253,248,.94), rgba(255,253,248,.96)),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(181,138,58,.04) 31px 32px),
    var(--paper);
}
.landing-hero::after {
  content: "H7";
  position: absolute;
  top: 102px;
  right: -16px;
  font: 800 150px/1 Georgia, serif;
  color: rgba(23,63,53,.035);
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 1; margin: 48px 0 30px; max-width: 680px; }
.hero-copy h1 {
  margin: 10px 0 16px;
  font-size: clamp(34px, 8vw, 68px);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--forest);
  font-weight: 850;
}
.hero-copy p { max-width: 650px; color: #655b50; font-size: 16px; line-height: 1.75; }
.event-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 22px;
}
.event-meta-row span, .event-meta-row b { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.64); font-size: 11px; }
.event-meta-row span { color: var(--muted); letter-spacing: .06em; }
.event-meta-row b { color: var(--burgundy); }
.mini-timeline { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; display: grid; gap: 13px; }
.mini-date { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: start; }
.mini-date:not(:last-child)::after { content:""; position:absolute; left:5px; top:13px; bottom:-14px; width:1px; background: rgba(181,138,58,.35); }
.mini-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); margin-top: 4px; box-shadow: 0 0 0 4px rgba(181,138,58,.11); }
.mini-date.main .mini-dot { background: var(--burgundy); box-shadow: 0 0 0 4px rgba(126,46,53,.1); }
.mini-date div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mini-date b { font-size: 14px; color: var(--forest); }
.mini-date small { color: var(--muted); }
.faculty-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.faculty-chip { border: 1px solid var(--line); background: rgba(255,255,255,.55); border-radius: 14px; padding: 11px 12px; min-width: 0; }
.faculty-chip strong { display:block; color:var(--gold); font-family: Georgia,serif; font-size: 16px; }
.faculty-chip span { display:block; margin-top:2px; font-size:11px; color:var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-rules { display: grid; gap: 9px; margin-top: 20px; }
.landing-rules > div { display: grid; grid-template-columns: 34px 1fr; gap: 3px 10px; border-radius: 16px; background: var(--forest); color: #fff; padding: 13px 14px; }
.landing-rules strong { grid-row: 1 / span 2; color: var(--gold-soft); font-family: Georgia,serif; font-size: 18px; }
.landing-rules span { font-weight: 800; font-size: 13px; }
.landing-rules small { opacity:.7; font-size: 11px; }

.auth-panel { border-radius: var(--radius-xl); background: rgba(255,253,248,.9); padding: 15px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; background:var(--paper-2); padding:4px; border-radius:999px; }
.auth-tabs button { border:0; background:transparent; border-radius:999px; min-height:40px; color:var(--muted); font-weight:800; }
.auth-tabs button.active { background:var(--paper); color:var(--forest); box-shadow:var(--shadow-soft); }
.auth-form { padding: 22px 8px 8px; display:grid; gap:15px; }
.auth-heading h2 { margin:6px 0 5px; color:var(--forest); font-size:27px; letter-spacing:-.02em; }
.auth-heading p { color:var(--muted); font-size:13px; line-height:1.55; margin-bottom:6px; }
.segmented { display:flex; border-radius:999px; padding:4px; background:var(--paper-2); }
.segmented label { flex:1; display:block; }
.segmented input { position:absolute; opacity:0; pointer-events:none; }
.segmented label span, .segmented button { display:flex; align-items:center; justify-content:center; min-height:40px; padding:7px 12px; border:0; border-radius:999px; background:transparent; color:var(--muted); font-weight:800; font-size:12px; cursor:pointer; }
.segmented input:checked + span, .segmented button.active { background:var(--paper); color:var(--forest); box-shadow:0 3px 12px rgba(40,35,29,.08); }
.segmented.compact { width: max-content; max-width:100%; }
.form-note { font-size:11px; color:var(--muted); text-align:center; }
.projector-link { display:block; text-align:center; padding:12px 8px 5px; color:var(--burgundy); font-size:12px; font-weight:800; }

/* app shell */
.app-shell { max-width: 880px; margin: 0 auto; min-height:100vh; background:rgba(247,240,227,.5); }
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 76px;
  padding: max(12px, env(safe-area-inset-top)) 18px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:rgba(250,245,236,.91);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(95,72,42,.09);
}
.topbar-actions { display:flex; align-items:center; gap:7px; }
.edition { display:none; color:var(--muted); font-size:9px; letter-spacing:.08em; font-weight:700; }
.icon-link { border:1px solid rgba(126,46,53,.2); border-radius:999px; padding:7px 9px; color:var(--burgundy); font-size:10px; font-weight:900; letter-spacing:.08em; }
.app-main { padding: 24px 16px 118px; }
.page-heading { margin-bottom: 21px; }
.page-heading h1 { margin:6px 0 4px; color:var(--forest); font-size:clamp(31px,8vw,45px); line-height:1.08; letter-spacing:-.035em; }
.page-heading p { color:var(--muted); font-size:13px; line-height:1.55; max-width:620px; }
.paper-card { border:1px solid rgba(95,72,42,.12); background:rgba(255,253,248,.88); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); }

.bottom-nav {
  position:fixed;
  z-index:50;
  left:50%;
  bottom:max(10px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(calc(100% - 22px), 720px);
  height:72px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding:6px;
  border:1px solid rgba(95,72,42,.12);
  border-radius:25px;
  background:rgba(255,253,248,.94);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(40,35,29,.17);
}
.bottom-nav button { border:0; border-radius:19px; background:transparent; color:#8d8276; display:grid; place-items:center; align-content:center; gap:2px; min-width:0; }
.bottom-nav button span { font-size:19px; line-height:1; }
.bottom-nav button small { font-size:9px; font-weight:800; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.bottom-nav button.active { background:rgba(23,63,53,.09); color:var(--forest); }

/* Passport */
.passport-card {
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(181,138,58,.28);
  background:
    linear-gradient(145deg, rgba(255,253,248,.98), rgba(244,234,215,.92)),
    var(--paper);
  box-shadow:var(--shadow);
  padding:20px;
}
.passport-card::before { content:""; position:absolute; inset:9px; border:1px solid rgba(181,138,58,.28); border-radius:19px; pointer-events:none; }
.passport-card::after { content:"H7"; position:absolute; right:-8px; top:82px; font:800 112px/1 Georgia,serif; color:rgba(181,138,58,.075); transform:rotate(-8deg); pointer-events:none; }
.passport-topline { position:relative; z-index:1; display:flex; justify-content:space-between; gap:14px; font-size:8px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.passport-identity { position:relative; z-index:1; display:grid; grid-template-columns:58px 1fr; gap:14px; align-items:center; padding:24px 0 18px; }
.avatar-seal { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--forest); color:#fff; border:3px double var(--gold-soft); font:800 26px/1 Georgia,serif; }
.passport-label { color:var(--burgundy); font-size:9px; letter-spacing:.1em; font-weight:900; }
.passport-identity h2 { margin:3px 0 2px; font-size:25px; color:var(--forest); line-height:1.1; }
.passport-identity p { margin:0; color:var(--muted); font-size:12px; }
.passport-code-row { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid rgba(181,138,58,.25); border-bottom:1px solid rgba(181,138,58,.25); }
.passport-code-row span { display:block; font-size:8px; color:var(--muted); letter-spacing:.1em; }
.passport-code-row strong { display:block; margin-top:2px; font:800 20px/1.2 Georgia,serif; color:var(--burgundy); letter-spacing:.05em; }
.passport-code-row small { color:var(--forest); font-weight:800; font-size:10px; text-align:right; }
.passport-stats { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); margin-top:16px; }
.passport-stats > div { padding:8px 10px; border-right:1px solid var(--line); }
.passport-stats > div:last-child { border-right:0; }
.passport-stats strong { display:block; color:var(--forest); font:800 clamp(20px,6vw,29px)/1 Georgia,serif; }
.passport-stats span { display:block; margin-top:4px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.progress-card { margin-top:16px; position:relative; z-index:1; }
.progress-card > div:first-child { display:flex; justify-content:space-between; gap:10px; font-size:10px; color:var(--muted); margin-bottom:7px; }
.progress-track { height:7px; background:rgba(23,63,53,.1); border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--forest),var(--gold)); border-radius:inherit; }
.next-card { position:relative; z-index:1; margin-top:20px; border-radius:17px; background:var(--forest); color:#fff; padding:14px; }
.next-card > span { display:block; margin-bottom:10px; color:var(--gold-soft); font-size:8px; font-weight:900; letter-spacing:.12em; }
.mission-line { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; }
.mission-badge { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); font-weight:900; }
.mission-line h3 { margin:0 0 2px; font-size:14px; line-height:1.3; }
.mission-line p { margin:0 0 3px; font-size:10px; opacity:.72; line-height:1.35; }
.mission-line small { font-size:9px; opacity:.6; }
.mission-line > b { color:var(--gold-soft); font:800 16px/1 Georgia,serif; }
.complete-state { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.complete-state span { opacity:.7; font-size:11px; }
.qr-card { margin-top:15px; padding:17px; display:grid; grid-template-columns:1fr 120px; gap:14px; align-items:center; }
.qr-copy h3 { margin:4px 0; color:var(--forest); font-size:16px; }
.qr-copy p { margin:0 0 10px; color:var(--muted); font-size:10px; line-height:1.45; }
.qr-copy .secondary-btn { min-height:38px; font-size:10px; padding:7px 10px; }
.qr-box { min-height:112px; padding:8px; display:grid; place-items:center; border:1px dashed rgba(181,138,58,.45); border-radius:14px; background:#fff; color:var(--forest); font-weight:900; }
.qr-box svg, .qr-box img { width:100%; height:auto; }
.qr-fallback { text-align:center; display:grid; gap:3px; }
.qr-fallback small { font-size:8px; color:var(--muted); }

/* Stamps */
.filter-bar { display:grid; gap:10px; margin-bottom:17px; }
.filter-pills { display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.filter-pills::-webkit-scrollbar { display:none; }
.filter-pills button { white-space:nowrap; border:1px solid var(--line); background:rgba(255,253,248,.8); color:var(--muted); border-radius:999px; padding:8px 12px; font-size:11px; font-weight:800; }
.filter-pills button.active { background:var(--forest); color:#fff; border-color:var(--forest); }
.stamp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.stamp-card { min-width:0; border:1px solid rgba(95,72,42,.12); background:rgba(255,253,248,.86); border-radius:19px; padding:15px 13px; box-shadow:var(--shadow-soft); }
.stamp-card.collected { border-color:rgba(23,63,53,.26); background:linear-gradient(145deg,#fffdf8,#f1f0e6); }
.stamp-card.unrevealed { border-style:dashed; }
.stamp-emblem { position:relative; margin:0 auto 12px; width:68px; height:68px; display:grid; place-items:center; border:1px dashed rgba(181,138,58,.55); background:var(--ivory); color:var(--forest); font:800 19px/1 Georgia,serif; clip-path:polygon(8% 0,92% 0,100% 8%,100% 92%,92% 100%,8% 100%,0 92%,0 8%); }
.stamp-emblem::after { content:""; position:absolute; inset:8px; border:1px solid rgba(181,138,58,.32); }
.stamp-emblem i { position:absolute; right:-4px; top:-4px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--forest); color:white; font-style:normal; font-size:12px; box-shadow:0 4px 10px rgba(23,63,53,.2); }
.stamp-meta { display:flex; justify-content:space-between; gap:6px; color:var(--burgundy); font-size:8px; font-weight:900; letter-spacing:.05em; }
.stamp-copy h3 { margin:7px 0 5px; font-size:14px; line-height:1.38; color:var(--ink); overflow-wrap:anywhere; }
.stamp-copy p { margin:0 0 7px; color:var(--muted); font-size:10px; line-height:1.42; }
.stamp-copy small { display:block; color:#978b7d; font-size:8.5px; line-height:1.4; }
.empty-state { grid-column:1/-1; min-height:140px; display:grid; place-items:center; text-align:center; border:1px dashed var(--line); border-radius:20px; color:var(--muted); background:rgba(255,255,255,.35); }
.empty-state.small { min-height:70px; }

/* Schedule */
.schedule-list { display:grid; gap:0; }
.schedule-day { display:grid; grid-template-columns:36px 1fr; gap:8px; }
.date-rail { position:relative; display:flex; flex-direction:column; align-items:center; }
.date-rail span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(181,138,58,.35); color:var(--gold); background:var(--ivory); font:800 11px/1 Georgia,serif; z-index:1; }
.date-rail i { width:1px; flex:1; background:rgba(181,138,58,.28); min-height:30px; }
.schedule-day:last-child .date-rail i { background:transparent; }
.schedule-day.main-day .date-rail span { background:var(--burgundy); border-color:var(--burgundy); color:#fff; }
.schedule-content { padding:2px 0 25px; }
.schedule-date h2 { margin:4px 0 12px; color:var(--forest); font-size:20px; }
.schedule-cards { display:grid; gap:8px; }
.schedule-card { display:grid; grid-template-columns:36px 1fr auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:16px; background:rgba(255,253,248,.8); padding:11px; min-width:0; }
.schedule-icon { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:rgba(23,63,53,.07); color:var(--forest); font:800 12px/1 Georgia,serif; }
.schedule-card h3 { margin:0 0 2px; font-size:12px; line-height:1.35; }
.schedule-card p { margin:0 0 3px; color:var(--muted); font-size:9px; line-height:1.38; }
.schedule-card small { display:block; color:#968a7d; font-size:8px; line-height:1.4; }
.schedule-card > b { color:var(--gold); font:800 13px/1 Georgia,serif; }

/* Rankings */
.ranking-toolbar { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:12px; }
.ranking-toolbar .secondary-btn { min-height:40px; padding:8px 12px; font-size:10px; }
.leaderboard-card { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:rgba(255,253,248,.82); box-shadow:var(--shadow-soft); }
.ranking-row { display:grid; grid-template-columns:34px 42px 1fr auto; gap:9px; align-items:center; min-height:70px; padding:9px 12px; border-bottom:1px solid var(--line); }
.ranking-row:last-child { border-bottom:0; }
.ranking-row.top { background:linear-gradient(90deg,rgba(181,138,58,.1),rgba(255,255,255,.15)); }
.rank-no { color:var(--muted); font:800 13px/1 Georgia,serif; text-align:center; }
.top-1 .rank-no { color:var(--gold); font-size:17px; }
.rank-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--ivory); color:var(--forest); font:800 13px/1 Georgia,serif; }
.top-1 .rank-avatar { border-color:rgba(181,138,58,.5); box-shadow:inset 0 0 0 3px rgba(181,138,58,.08); }
.rank-name { min-width:0; }
.rank-name b { display:block; color:var(--ink); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-name span { display:block; margin-top:2px; color:var(--muted); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-points { text-align:right; }
.rank-points strong { display:block; color:var(--forest); font:800 18px/1 Georgia,serif; }
.rank-points small { display:block; margin-top:2px; color:var(--gold); font-size:7px; letter-spacing:.1em; }

/* Profile */
.profile-grid { display:grid; gap:11px; }
.profile-card { display:flex; align-items:center; gap:14px; padding:17px; }
.profile-avatar { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--forest); color:white; border:3px double var(--gold-soft); font:800 24px/1 Georgia,serif; flex:0 0 auto; }
.profile-card h2 { margin:0 0 3px; color:var(--forest); font-size:20px; }
.profile-card p { margin:0 0 2px; color:var(--burgundy); font:800 12px/1.2 Georgia,serif; letter-spacing:.05em; }
.profile-card span { color:var(--muted); font-size:10px; }
.rules-card, .log-card { padding:17px; }
.rule { display:grid; grid-template-columns:67px 1fr; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.rule:last-child { border-bottom:0; padding-bottom:0; }
.rule b { color:var(--burgundy); font-size:11px; }
.rule span { color:var(--muted); font-size:10px; line-height:1.45; }
.log-row { display:grid; grid-template-columns:28px 1fr auto; gap:9px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.log-row:last-child { border-bottom:0; }
.log-row > span { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:rgba(23,63,53,.07); color:var(--forest); font-size:10px; font-weight:900; }
.log-row b { display:block; font-size:10px; }
.log-row small { display:block; color:var(--muted); font-size:8px; }
.log-row strong { color:var(--forest); font:800 13px/1 Georgia,serif; }
.log-row strong.negative { color:var(--burgundy); }
.profile-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
.social-footer { text-align:center; margin:18px auto 0; color:var(--muted); font-size:9px; line-height:1.5; }

/* Admin */
.admin-shell { min-height:100vh; background:#f5efe5; }
.admin-header {
  position:sticky; top:0; z-index:60;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  min-height:68px; padding:10px 18px;
  background:rgba(15,48,40,.97); color:white;
  box-shadow:0 8px 30px rgba(15,48,40,.16);
}
.admin-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.admin-brand img { width:40px; height:40px; filter:brightness(0) invert(1); }
.admin-brand span { display:block; max-width:420px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:rgba(255,255,255,.55); font-size:8px; letter-spacing:.08em; }
.admin-brand b { display:block; font-family:Georgia,serif; letter-spacing:.08em; font-size:15px; }
.admin-header-actions { display:flex; align-items:center; gap:6px; }
.admin-header-actions a, .admin-header-actions button { border:1px solid rgba(255,255,255,.16); border-radius:999px; color:white; background:transparent; padding:7px 10px; font-size:9px; font-weight:800; }
.admin-tabs { position:sticky; top:68px; z-index:55; display:flex; gap:4px; padding:8px 16px; background:rgba(247,240,227,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); overflow-x:auto; }
.admin-tabs button { border:0; border-radius:999px; background:transparent; color:var(--muted); padding:8px 13px; font-size:11px; font-weight:800; white-space:nowrap; }
.admin-tabs button.active { background:var(--forest); color:white; }
.admin-main { max-width:1180px; margin:0 auto; padding:22px 16px 42px; }
.admin-grid { display:grid; gap:14px; }
.admin-panel { border:1px solid var(--line); border-radius:22px; background:rgba(255,253,248,.9); box-shadow:var(--shadow-soft); padding:17px; }
.panel-heading { margin-bottom:14px; }
.panel-heading.spread { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.panel-heading h2 { margin:4px 0 2px; color:var(--forest); font-size:19px; }
.panel-heading p { margin:0; color:var(--muted); font-size:10px; line-height:1.45; }
.large-select { min-height:56px; color:var(--forest); font-weight:800; }
.scanner-heading { margin-top:20px; }
.qr-reader { min-height:270px; overflow:hidden; border-radius:18px; border:1px dashed rgba(23,63,53,.28); background:#ece9df; display:grid; place-items:center; }
.qr-reader video { border-radius:16px; }
.scanner-placeholder { color:rgba(23,63,53,.35); font:800 28px/1 Georgia,serif; letter-spacing:.08em; }
.scanner-actions { display:grid; grid-template-columns:1.2fr .8fr; gap:8px; margin-top:10px; }
.manual-scan { display:grid; grid-template-columns:1fr auto; gap:7px; margin-top:9px; }
.manual-scan .secondary-btn { border-radius:14px; }
.empty-preview { min-height:360px; display:grid; place-content:center; justify-items:center; text-align:center; gap:8px; color:var(--muted); padding:20px; }
.empty-preview b { color:var(--forest); }
.empty-preview span { max-width:280px; font-size:10px; line-height:1.45; }
.scan-target { width:80px; height:80px; display:grid; place-items:center; border-radius:24px; border:1px dashed rgba(181,138,58,.45); color:var(--gold); font-size:40px; }
.preview-card { display:grid; gap:12px; }
.preview-pass { padding:15px; border-radius:18px; background:var(--forest); color:white; }
.preview-pass span { display:block; color:var(--gold-soft); font:800 10px/1 Georgia,serif; letter-spacing:.1em; }
.preview-pass b { display:block; margin:7px 0 2px; font-size:21px; }
.preview-pass small { color:rgba(255,255,255,.55); }
.preview-score { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.preview-score > div { padding:13px; border:1px solid var(--line); border-radius:15px; text-align:center; background:var(--ivory); }
.preview-score strong { display:block; color:var(--forest); font:800 23px/1 Georgia,serif; }
.preview-score span { display:block; margin-top:4px; color:var(--muted); font-size:8px; letter-spacing:.08em; }
.award-summary { display:grid; grid-template-columns:1fr auto; gap:2px 8px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.award-summary span { grid-column:1/-1; color:var(--muted); font-size:8px; letter-spacing:.08em; }
.award-summary b { font-size:12px; }
.award-summary strong { color:var(--gold); font:800 16px/1 Georgia,serif; }
.already-box, .warning-box, .error-box { border-radius:14px; padding:11px 12px; font-size:10px; line-height:1.45; }
.already-box { background:rgba(23,63,53,.08); color:var(--forest); }
.warning-box { background:rgba(181,138,58,.12); color:#7c5b1e; }
.error-box { background:rgba(126,46,53,.09); color:var(--burgundy); }
.bonus-box { border-top:1px solid var(--line); padding-top:12px; }
.bonus-box > div:nth-child(2) { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.bonus-box button { border:1px solid var(--line); border-radius:999px; background:var(--paper); padding:7px 10px; color:var(--forest); font-weight:800; font-size:9px; }
.custom-bonus { display:grid; grid-template-columns:90px 1fr auto; gap:6px; }
.custom-bonus input { min-height:40px; font-size:10px; }
.custom-bonus button { border-radius:12px; }

.admin-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:16px; }
.admin-table { width:100%; border-collapse:collapse; min-width:650px; }
.admin-table th, .admin-table td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); font-size:10px; }
.admin-table th { color:var(--muted); background:#f2eadf; font-size:8px; letter-spacing:.06em; }
.admin-table tr:last-child td { border-bottom:0; }
.admin-table code { color:var(--burgundy); font-weight:800; }
.admin-table button, .search-inline button { border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--forest); padding:7px 10px; font-weight:800; font-size:9px; }
.search-inline { display:grid; grid-template-columns:minmax(130px,230px) auto; gap:6px; }
.search-inline input { min-height:38px; }
.people-preview { margin-top:16px; max-width:560px; }

.activity-admin-list { display:grid; gap:8px; }
.activity-admin-card { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:16px; padding:11px; background:#fffdf9; }
.activity-admin-card.disabled { opacity:.5; }
.activity-admin-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:rgba(23,63,53,.07); color:var(--forest); font:800 11px/1 Georgia,serif; }
.activity-admin-main { min-width:0; }
.activity-admin-main h3 { margin:3px 0 2px; font-size:12px; }
.activity-admin-main p { margin:0; color:var(--muted); font-size:9px; line-height:1.4; }
.activity-admin-meta { display:flex; gap:7px; flex-wrap:wrap; color:var(--burgundy); font-size:8px; }
.activity-admin-status { display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.status-chip { border-radius:999px; background:var(--paper-2); color:var(--muted); padding:4px 7px; font-size:7px; font-weight:800; }
.status-chip.on { background:rgba(23,63,53,.09); color:var(--forest); }
.activity-admin-card > button { border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--forest); padding:7px 10px; font-size:9px; font-weight:800; }

.editor-backdrop { position:fixed; inset:0; z-index:90; background:rgba(20,18,15,.52); display:grid; place-items:end center; padding-top:30px; }
.activity-editor { width:min(800px,100%); max-height:92vh; overflow:auto; padding:18px; border-radius:24px 24px 0 0; background:var(--paper); box-shadow:0 -20px 70px rgba(0,0,0,.22); }
.activity-editor h2 { color:var(--forest); margin:5px 0 15px; }
.editor-grid { display:grid; gap:11px; }
.span-2 { grid-column:1/-1; }
.toggle-grid { display:flex; flex-wrap:wrap; gap:8px 15px; }
.toggle-grid label, .host-checks label { display:flex; align-items:center; gap:7px; color:var(--ink); font-weight:700; font-size:10px; }
.toggle-grid input, .host-checks input { width:18px; min-height:18px; height:18px; }
.host-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:10px; border:1px solid var(--line); border-radius:14px; }
.editor-actions { position:sticky; bottom:-18px; display:flex; justify-content:flex-end; gap:7px; margin:15px -18px -18px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,253,248,.96); border-top:1px solid var(--line); }
.icon-close { border:0; background:transparent; color:var(--muted); font-size:20px; }

.admin-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.admin-stat-grid > div { border:1px solid var(--line); border-radius:16px; background:var(--ivory); padding:15px; }
.admin-stat-grid strong { display:block; color:var(--forest); font:800 25px/1 Georgia,serif; }
.admin-stat-grid span { display:block; color:var(--muted); margin-top:5px; font-size:9px; }
.launch-checks { display:grid; gap:8px; margin-top:14px; }
.launch-checks > div { border:1px solid var(--line); border-radius:14px; padding:11px; font-size:10px; color:var(--muted); }
.launch-checks b { color:var(--forest); }

.admin-login-shell { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 20%,rgba(181,138,58,.1),transparent 24rem),var(--ivory); }
.admin-login-card { width:min(440px,100%); border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow); border-radius:28px; padding:26px; text-align:center; }
.admin-logo { width:68px; margin:0 auto 15px; }
.admin-login-card h1 { color:var(--forest); font-family:Georgia,serif; font-size:30px; margin:7px 0 8px; }
.admin-login-card > p { color:var(--muted); font-size:11px; line-height:1.5; }
.admin-login-card form { display:grid; gap:13px; text-align:left; margin:20px 0 13px; }
.admin-login-card > a { color:var(--burgundy); font-size:10px; font-weight:800; }

/* Projector */
.projector-screen {
  min-height:100vh;
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% -10%, rgba(181,138,58,.2), transparent 36%),
    linear-gradient(135deg,#102f28 0%,#173f35 52%,#0c2922 100%);
  color:#fffaf0;
  padding:2.2vh 2.4vw 1.8vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:1.8vh;
}
.projector-header { display:flex; justify-content:space-between; align-items:center; gap:2vw; }
.projector-brand { display:flex; align-items:center; gap:1vw; }
.projector-brand img { width:clamp(48px,4.5vw,82px); height:auto; filter:brightness(0) invert(1); }
.projector-brand span { display:block; color:rgba(255,250,240,.5); font-size:clamp(8px,.7vw,14px); letter-spacing:.1em; }
.projector-brand h1 { margin:.25vh 0 0; font:800 clamp(20px,2vw,38px)/1 Georgia,serif; letter-spacing:.05em; }
.projector-live { display:flex; align-items:center; gap:.55vw; border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.06); padding:.6vh .9vw; }
.projector-live i { width:.65vw; height:.65vw; min-width:8px; min-height:8px; border-radius:50%; background:#d9ad62; box-shadow:0 0 0 .35vw rgba(217,173,98,.12); animation:pulse 1.5s infinite; }
.projector-live span { color:#d9ad62; font-size:clamp(9px,.75vw,14px); font-weight:900; letter-spacing:.12em; }
.projector-live b { color:rgba(255,255,255,.58); font-size:clamp(8px,.7vw,13px); }
@keyframes pulse { 50% { box-shadow:0 0 0 .55vw rgba(217,173,98,0); } }
.projector-layout { display:grid; grid-template-columns:minmax(0,1.85fr) minmax(320px,.78fr); gap:1.6vw; min-height:0; }
.projector-main, .projector-side { min-height:0; }
.projector-main { display:grid; grid-template-rows:auto 1fr auto; gap:1.3vh; }
.projector-title h2 { margin:.3vh 0 0; color:#fffaf0; font:800 clamp(32px,4.3vw,78px)/.94 Georgia,serif; letter-spacing:-.035em; }
.projector-title p { margin:.75vh 0 0; color:rgba(255,255,255,.53); font-size:clamp(9px,.8vw,15px); }
.projector-title .micro-label { color:#d4bd86; font-size:clamp(8px,.65vw,12px); }
.podium-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1vw; align-items:stretch; min-height:0; }
.podium-card { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.11); border-radius:1.4vw; background:rgba(255,255,255,.055); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:1.4vw; }
.podium-card::after { content:""; position:absolute; width:12vw; height:12vw; border:1px solid rgba(212,189,134,.1); border-radius:50%; right:-5vw; bottom:-6vw; }
.podium-card.rank-1 { background:linear-gradient(145deg,rgba(181,138,58,.24),rgba(255,255,255,.06)); border-color:rgba(212,189,134,.34); transform:translateY(-.5vh); }
.podium-rank { position:absolute; top:1vw; left:1vw; color:#d4bd86; font:800 clamp(15px,1.4vw,26px)/1 Georgia,serif; }
.podium-code { width:clamp(52px,5vw,94px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; border:2px solid rgba(212,189,134,.6); color:#f2d99e; font:800 clamp(17px,1.8vw,34px)/1 Georgia,serif; margin-bottom:1vh; }
.podium-card h2 { max-width:95%; margin:0; color:#fff; font-size:clamp(13px,1.25vw,24px); line-height:1.25; }
.podium-card > strong { margin-top:1.2vh; color:#f2d99e; font:800 clamp(34px,4vw,74px)/.9 Georgia,serif; }
.podium-card > span { margin-top:.6vh; color:rgba(255,255,255,.5); font-size:clamp(8px,.65vw,12px); letter-spacing:.15em; }
.podium-card > small { margin-top:1.2vh; color:rgba(255,255,255,.48); font-size:clamp(8px,.65vw,12px); }
.projector-lower { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6vw; }
.projector-rank-row { display:grid; grid-template-columns:2.4vw 3.6vw 1fr auto auto; gap:.55vw; align-items:center; border-top:1px solid rgba(255,255,255,.1); padding:.65vh .35vw; min-width:0; }
.projector-rank-row span { color:rgba(255,255,255,.42); font:800 clamp(9px,.8vw,15px)/1 Georgia,serif; }
.projector-rank-row b { color:#d4bd86; font:800 clamp(10px,.8vw,16px)/1 Georgia,serif; }
.projector-rank-row div { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:rgba(255,255,255,.8); font-size:clamp(9px,.75vw,14px); }
.projector-rank-row strong { font:800 clamp(14px,1.4vw,26px)/1 Georgia,serif; }
.projector-rank-row small { color:rgba(255,255,255,.4); font-size:clamp(7px,.5vw,10px); }
.projector-side { border:1px solid rgba(255,255,255,.1); border-radius:1.4vw; background:rgba(0,0,0,.09); padding:1.2vw; display:grid; grid-template-rows:auto 1fr auto; }
.projector-side-head { display:flex; justify-content:space-between; gap:1vw; align-items:center; padding-bottom:1vh; border-bottom:1px solid rgba(255,255,255,.1); }
.projector-side-head span { color:#d4bd86; font-size:clamp(8px,.65vw,12px); letter-spacing:.09em; }
.projector-side-head b { font-family:Georgia,serif; font-size:clamp(11px,.9vw,17px); }
.projector-individuals { overflow:hidden; }
.projector-ind-row { display:grid; grid-template-columns:1.8vw 2.4vw 1fr auto; gap:.55vw; align-items:center; min-height:7.5vh; border-bottom:1px solid rgba(255,255,255,.08); }
.projector-ind-row > span { color:rgba(255,255,255,.38); font:800 clamp(8px,.7vw,13px)/1 Georgia,serif; }
.projector-ind-row i { width:2.4vw; min-width:28px; max-width:46px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.08); color:#d4bd86; font:800 clamp(9px,.75vw,14px)/1 Georgia,serif; font-style:normal; }
.projector-ind-row div { min-width:0; }
.projector-ind-row b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:clamp(9px,.8vw,15px); }
.projector-ind-row small { display:block; color:rgba(255,255,255,.42); font-size:clamp(7px,.58vw,11px); margin-top:2px; }
.projector-ind-row strong { color:#f0d799; font:800 clamp(13px,1.15vw,22px)/1 Georgia,serif; }
.projector-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.5vw; padding-top:1vh; }
.projector-stats > div { border:1px solid rgba(255,255,255,.09); border-radius:.65vw; padding:.65vw; text-align:center; }
.projector-stats strong { display:block; color:#f0d799; font:800 clamp(15px,1.5vw,28px)/1 Georgia,serif; }
.projector-stats span { display:block; color:rgba(255,255,255,.38); font-size:clamp(7px,.53vw,10px); margin-top:.35vh; }
.projector-footer { display:flex; justify-content:space-between; align-items:center; gap:2vw; border-top:1px solid rgba(255,255,255,.1); padding-top:1vh; color:rgba(255,255,255,.55); font-size:clamp(8px,.68vw,13px); }
.projector-footer strong { color:#d4bd86; }
.projector-footer div { display:flex; gap:.5vw; }
.projector-footer button, .projector-footer a { border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.04); color:#fff; padding:.55vh .7vw; font-size:clamp(7px,.55vw,10px); font-weight:800; }
.projector-empty { min-height:40vh; display:grid; place-items:center; color:rgba(255,255,255,.4); }

/* Responsive */
@media (min-width: 700px) {
  .landing-shell { padding:34px 0; }
  .faculty-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .landing-rules { grid-template-columns:repeat(3,1fr); }
  .landing-rules > div { grid-template-columns:32px 1fr; }
  .stamp-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .profile-grid { grid-template-columns:1fr 1fr; }
  .profile-card { grid-column:1/-1; }
  .edition { display:inline; }
  .editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .host-checks { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .admin-stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (min-width: 940px) {
  .landing-shell { grid-template-columns:minmax(0,1.55fr) minmax(350px,.75fr); align-items:center; }
  .landing-hero { padding:34px; }
  .auth-panel { position:sticky; top:28px; padding:18px; }
  .hero-copy { margin:60px 0 36px; }
  .faculty-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .faculty-chip { text-align:center; padding:10px 5px; }
  .faculty-chip span { font-size:8px; }
  .scanner-grid { grid-template-columns:1.2fr .8fr; }
  .qr-reader { min-height:390px; }
  .admin-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .projector-screen { min-width:0; min-height:100vh; overflow:auto; padding:16px; display:block; }
  .projector-header { margin-bottom:22px; }
  .projector-layout { display:grid; grid-template-columns:1fr; }
  .podium-grid { min-height:420px; }
  .podium-card { border-radius:18px; }
  .podium-rank { top:12px; left:12px; }
  .projector-lower { grid-template-columns:1fr; }
  .projector-rank-row { grid-template-columns:34px 52px 1fr auto auto; padding:9px 4px; }
  .projector-side { margin-top:16px; border-radius:18px; padding:14px; }
  .projector-ind-row { grid-template-columns:30px 40px 1fr auto; min-height:62px; }
  .projector-ind-row i { width:40px; }
  .projector-stats > div { border-radius:10px; padding:10px 5px; }
  .projector-footer { margin-top:18px; padding-top:12px; flex-wrap:wrap; }
}

@media (max-width: 430px) {
  .landing-shell { width:min(100% - 18px,1180px); }
  .landing-hero { padding:19px; border-radius:24px; }
  .auth-panel { border-radius:24px; }
  .hero-copy { margin-top:38px; }
  .hero-copy h1 { font-size:35px; }
  .brand-title { font-size:18px; }
  .brand-kicker { font-size:8px; }
  .brand-mark { width:48px; height:48px; }
  .app-main { padding-left:12px; padding-right:12px; }
  .app-topbar { padding-left:13px; padding-right:13px; }
  .passport-card { padding:17px; }
  .qr-card { grid-template-columns:1fr 105px; padding:14px; }
  .stamp-grid { gap:8px; }
  .stamp-card { padding:13px 10px; }
  .stamp-copy h3 { font-size:12px; }
  .activity-admin-card { grid-template-columns:36px 1fr auto; padding:9px; }
  .activity-admin-icon { width:36px; height:36px; }
  .custom-bonus { grid-template-columns:78px 1fr; }
  .custom-bonus button { grid-column:1/-1; }
  .panel-heading.spread { display:grid; }
  .search-inline { width:100%; grid-template-columns:1fr auto; }
  .profile-actions { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}


/* =========================================================
   ม่วนสุข มาเช่ · COTTAGE CORE / ENCHANTED FOREST
   peaceful · green · cozy · earth-tone pastel
   ========================================================= */
:root {
  --forest: #557553;
  --forest-2: #3f6045;
  --forest-soft: #7fa078;
  --ivory: #f7f7ed;
  --paper: #fffdf4;
  --paper-2: #eef3e6;
  --gold: #d8bd79;
  --gold-soft: #f0e5b6;
  --burgundy: #9e826e;
  --ink: #334034;
  --muted: #7c8173;
  --line: rgba(71, 97, 67, .14);
  --shadow: 0 22px 70px rgba(77, 101, 70, .12);
  --shadow-soft: 0 10px 32px rgba(77, 101, 70, .09);
  --sage: #a9cda2;
  --sage-2: #84ad7f;
  --taupe: #ae9786;
  --cream: #efe6b9;
  --blue: #b7c7d3;
  --deep-green: #4f7754;
}
html { background: var(--ivory); }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 2%, rgba(241,216,147,.25), transparent 18rem),
    radial-gradient(circle at 94% 10%, rgba(169,205,162,.28), transparent 22rem),
    linear-gradient(180deg,#f7faf0 0%,#f3f5e9 48%,#f8f5ea 100%);
}
body::before {
  opacity: .20;
  background-image:
    radial-gradient(circle, rgba(90,117,82,.10) 0 1px, transparent 1.2px),
    linear-gradient(90deg, rgba(90,117,82,.025) 1px, transparent 1px),
    linear-gradient(rgba(90,117,82,.025) 1px, transparent 1px);
  background-size: 18px 18px, 42px 42px, 42px 42px;
  mix-blend-mode: multiply;
}
.eyebrow,.micro-label,.brand-kicker { color: #718d68; letter-spacing:.16em; }
.brand-title {
  font-family: Georgia,"Times New Roman",serif;
  text-transform:none;
  letter-spacing:.02em;
  color:#567453;
  font-size:23px;
  font-weight:700;
}
.brand-lockup.compact .brand-title { font-size:17px; }
.brand-mark { filter: drop-shadow(0 8px 16px rgba(73,104,68,.13)); }
.primary-btn {
  background: linear-gradient(135deg,#577a56,#779c70);
  color:#fffdf4;
  box-shadow:0 10px 24px rgba(78,115,75,.20);
}
.primary-btn:hover { box-shadow:0 14px 30px rgba(78,115,75,.25); }
.secondary-btn {
  background:#fffdf5;
  color:#557553;
  border-color:rgba(85,117,83,.20);
}
.danger-btn { color:#936a62; background:#fff8f2; border-color:rgba(147,106,98,.18); }
input,select,textarea { background:rgba(255,254,247,.94); border-color:rgba(85,117,83,.17); color:#384537; }
input:focus,select:focus,textarea:focus { border-color:rgba(85,117,83,.55); box-shadow:0 0 0 4px rgba(85,117,83,.10); }
input::placeholder,textarea::placeholder { color:#a1a798; }
.toast { background:#476447; color:#fffdf3; }

/* landing */
.enchanted-landing { width:min(1240px,calc(100% - 28px)); gap:20px; }
.landing-hero,.auth-panel,.paper-card,.card,.admin-panel,.projector-main,.projector-side {
  border-color:rgba(78,111,74,.13) !important;
  box-shadow:var(--shadow-soft);
}
.cottage-hero {
  position:relative;
  overflow:hidden;
  border-radius:34px;
  padding:24px;
  background:
    radial-gradient(circle at 14% 0%,rgba(255,235,172,.22),transparent 17rem),
    linear-gradient(180deg,rgba(250,253,242,.98),rgba(235,243,224,.98));
}
.cottage-hero::before {
  content:"✦  ENCHANTED FOREST";
  position:absolute;
  top:22px;right:24px;
  color:#708a67;
  font-size:10px;font-weight:800;letter-spacing:.18em;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,246,.72);
  border:1px solid rgba(90,120,82,.14);
  z-index:3;
}
.cottage-hero::after { content:""; display:none; }
.cottage-hero-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); gap:26px; align-items:center; margin-top:34px; }
.cottage-copy { margin:0; max-width:none; }
.cottage-copy h1 {
  color:#537250;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(44px,7vw,80px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:700;
  margin:12px 0 18px;
}
.cottage-copy p { color:#66715f; font-size:17px; line-height:1.75; max-width:640px; }
.hero-forest-art img { width:100%; border-radius:28px; box-shadow:0 18px 46px rgba(71,100,67,.16); border:1px solid rgba(255,255,255,.7); }
.key-message {
  display:inline-flex; align-items:center; justify-content:center;
  margin:6px 0 18px; padding:10px 18px; border-radius:999px;
  background:#f1e7b7; color:#60745b; font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:18px;
}
.key-message.mini { margin:12px 0 0; font-size:15px; padding:8px 14px; }
.landing-journey-strip { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:5px 0 18px; }
.landing-stage { display:flex; align-items:center; gap:6px; color:#687862; font-size:12px; }
.landing-stage span { width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#edf3e7;border:1px solid rgba(83,114,80,.12); }
.landing-stage b { font-weight:800; }
.landing-stage i { font-style:normal;color:#a0ad94;margin:0 3px; }
.mood-palette { margin-top:24px; display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:22px; background:rgba(255,255,248,.68); border:1px solid rgba(85,117,83,.11); }
.swatch { width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(48,63,45,.18); }
.swatch.s1{background:#a9cda2}.swatch.s2{background:#ae9786}.swatch.s3{background:#efe6b9}.swatch.s4{background:#b7c7d3}.swatch.s5{background:#4f7754}
.mood-palette div { display:grid; gap:2px; margin-left:4px; }
.mood-palette b { font-family:Georgia,serif;color:#5b7155;font-size:15px; }
.mood-palette small { color:#87907f;font-size:11px; }
.faculty-chip { background:rgba(255,254,247,.75); border-color:rgba(78,111,74,.12) !important; border-radius:18px; }
.faculty-chip strong { color:#587653; }
.cottage-auth { border-radius:34px; background:linear-gradient(180deg,#fffdf6,#f1f5e8); position:relative; overflow:hidden; }
.auth-backpack { width:120px; margin:0 auto -4px; }
.auth-backpack img { width:100%; }
.auth-tabs { background:#e8eee2; }
.auth-tabs button.active { background:#678961; color:#fffdf4; box-shadow:0 6px 14px rgba(86,119,82,.18); }
.projector-link { color:#658060; }
.event-meta-row span,.event-meta-row b { background:rgba(255,254,247,.72); border-color:rgba(80,111,74,.14); }
.event-meta-row b { color:#607d5c; }

/* app chrome */
.enchanted-shell { background:transparent; }
.enchanted-topbar { background:rgba(248,250,239,.88) !important; border-bottom:1px solid rgba(79,113,75,.11) !important; backdrop-filter:blur(18px); }
.edition { color:#7b8c74 !important; background:#f2f5e9 !important; border-color:rgba(81,113,77,.11) !important; }
.icon-link { color:#5d7959 !important; border-color:rgba(81,113,77,.15) !important; background:#fffdf6 !important; }
.enchanted-heading h1 { color:#52704f; font-family:Georgia,"Times New Roman",serif; font-weight:700; letter-spacing:-.035em; }
.enchanted-heading p { color:#788072; }
.bottom-nav.enchanted-nav { background:rgba(255,254,247,.92); border:1px solid rgba(83,116,79,.13); box-shadow:0 18px 42px rgba(69,93,65,.14); }
.enchanted-nav button { color:#8a9383; }
.enchanted-nav button.active { background:#e1eddb !important; color:#527350 !important; }
.paper-card { background:linear-gradient(180deg,rgba(255,254,247,.98),rgba(246,248,237,.98)); border:1px solid rgba(82,115,78,.12); }
.progress-track { background:#e0e8d8; }
.progress-fill { background:linear-gradient(90deg,#7fa578,#b8c98c); }

/* journey dashboard */
.traveler-card { display:grid; grid-template-columns:1fr 260px; overflow:hidden; min-height:310px; padding:0; position:relative; background:linear-gradient(135deg,#5d825b 0%,#7fa277 58%,#9db28d 100%); color:#fffdf4; }
.traveler-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 5%,rgba(255,249,198,.25),transparent 18rem),linear-gradient(120deg,rgba(255,255,255,.08),transparent 35%); }
.traveler-copy { position:relative; z-index:1; padding:28px; display:grid; align-content:center; gap:18px; }
.traveler-card .micro-label { color:#edf4df; }
.traveler-name-row { display:flex; justify-content:space-between; gap:15px; align-items:center; }
.traveler-name-row h2 { font-size:34px; margin:0; color:#fffdf4; letter-spacing:-.035em; }
.traveler-name-row p { margin:4px 0 0; color:rgba(255,255,245,.78); }
.explorer-avatar { width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,244,.88);color:#5a7757;font-size:22px;font-weight:900; }
.explorer-title { display:flex; align-items:center; gap:12px; }
.explorer-title>span { width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,246,.14);font-size:26px;border:1px solid rgba(255,255,255,.18); }
.explorer-title small { display:block;font-size:10px;letter-spacing:.14em;color:#e7f0df;font-weight:800; }
.explorer-title strong { display:block;font-family:Georgia,serif;font-size:26px;margin-top:2px; }
.explorer-title p { margin:2px 0 0;font-size:12px;color:rgba(255,255,245,.75); }
.traveler-backpack { position:relative; z-index:1; display:grid;place-items:center;padding:22px;background:rgba(255,255,245,.09);border-left:1px solid rgba(255,255,255,.13); }
.traveler-backpack img { width:190px;max-height:245px;object-fit:contain; }
.backpack-score { position:absolute; right:18px; bottom:18px; background:rgba(255,253,240,.92); color:#587154; border-radius:18px;padding:10px 14px;display:grid;text-align:center;box-shadow:0 10px 24px rgba(55,75,52,.16); }
.backpack-score b{font-size:24px}.backpack-score span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.trail-card { padding:22px; }
.card-title-row h3 { color:#536f50; }
.journey-track { display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:22px 0 18px; }
.journey-node { position:relative;display:grid;justify-items:center;gap:5px;color:#9aa391;text-align:center;z-index:1; }
.journey-node>span { width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#edf0e7;border:1px solid rgba(85,112,80,.10);font-size:23px;filter:grayscale(.65);opacity:.62; }
.journey-node>b { font-size:12px; }
.journey-node>small { font-size:9px; }
.journey-node>i { position:absolute;top:25px;left:calc(50% + 28px);width:calc(100% - 56px);height:2px;background:#d8e0d2;z-index:-1; }
.journey-node.reached { color:#5b7957; }
.journey-node.reached>span { background:#dfead8;border-color:#b8cdb0;filter:none;opacity:1;box-shadow:0 5px 16px rgba(70,105,67,.10); }
.journey-node.reached>i { background:#a4bc99; }
.journey-node.current>span { box-shadow:0 0 0 7px rgba(238,225,174,.45),0 7px 20px rgba(74,103,69,.16);transform:translateY(-2px); }
.trail-note { margin:10px 0 0;color:#87917f;font-size:12px; }
.journey-lower { align-items:stretch; }
.enchanted-card,.philosophy-card { padding:20px; }
.philosophy-card h3,.next-card h3 { color:#557352; }
.philosophy-card p,.next-card p { color:#7d8476;line-height:1.6; }
.mission-badge { background:#e3eddc !important;color:#557452 !important; }
.activity-action { margin-top:14px;padding:10px 12px;border-radius:16px;font-size:12px;font-weight:750;display:flex;justify-content:space-between;gap:12px;align-items:center; }
.collected-action { background:#e0edda;color:#557451; }
.locked-action { background:#efeee7;color:#8f9288; }
.staff-action { background:#e8eef2;color:#6d7d84; }
.claim-btn { margin-top:14px;width:100%;border:0;border-radius:16px;padding:12px 14px;background:linear-gradient(135deg,#e8dca4,#f1e8ba);color:#587151;font-weight:900;display:flex;justify-content:space-between;align-items:center;box-shadow:0 7px 18px rgba(119,111,69,.12); }
.claim-btn:hover { transform:translateY(-1px); }
.claim-btn:disabled { opacity:.6;cursor:wait; }
.forest-qr { background:linear-gradient(135deg,#fffdf4,#eef4e6); }
.qr-box { background:#fffef8 !important; border-color:rgba(81,115,77,.15) !important; }

/* backpack */
.backpack-showcase { display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);align-items:center;gap:20px;padding:26px;overflow:hidden; }
.big-backpack-wrap { position:relative;display:grid;place-items:center;min-height:360px;background:radial-gradient(circle at center,#f3efc8 0%,#edf3df 48%,transparent 70%);border-radius:28px; }
.big-backpack-wrap img { width:min(320px,90%);max-height:355px; }
.backpack-spark { position:absolute;color:#e5cd83;font-size:30px;animation:floatSpark 3.5s ease-in-out infinite; }.s-a{left:15%;top:16%}.s-b{right:15%;bottom:20%;animation-delay:1.2s}
@keyframes floatSpark{50%{transform:translateY(-8px) rotate(8deg);opacity:.65}}
.backpack-profile { padding:10px 18px; }
.backpack-profile h2 { color:#52714f;font-family:Georgia,serif;font-size:34px;margin:6px 0 10px; }
.title-pill { display:inline-flex;padding:8px 13px;border-radius:999px;background:#e4eddc;color:#577554;font-weight:850; }
.big-points { margin:20px 0 12px;font-size:48px;font-weight:900;color:#567350;letter-spacing:-.05em; }
.big-points span { font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#98a08f; }
.backpack-profile p { color:#8d9586;margin:8px 0 0; }.backpack-profile>strong{display:block;margin-top:16px;color:#71846b;font-family:Georgia,serif;}
.section-inline-head { display:flex;align-items:end;justify-content:space-between;gap:12px;margin:28px 0 13px; }
.section-inline-head h2 { color:#52714f;margin:3px 0 0;font-family:Georgia,serif;font-size:25px; }
.section-inline-head>span { color:#87927f;font-weight:800; }
.badge-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.badge-card { padding:18px;border-radius:24px;display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#fffdf5,#f1f5e7);border:1px solid rgba(83,115,79,.12);box-shadow:var(--shadow-soft); }
.badge-icon { width:64px;height:64px;flex:0 0 64px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:#e2ecd9;border:1px dashed #a9c29f; }
.badge-card h3 { margin:0;color:#557252; }.badge-card p{margin:4px 0 8px;color:#838b7c;font-size:12px;}.badge-card span{font-size:9px;letter-spacing:.14em;font-weight:900;color:#6e8968}
.badge-card.locked { filter:saturate(.55);opacity:.52; }.badge-card.locked .badge-icon{background:#ecece6}.badge-card.locked span{color:#999b94}
.title-ladder { padding:22px; }
.title-steps { display:grid;grid-template-columns:repeat(5,1fr);gap:10px; }
.title-step { border:1px solid rgba(82,114,78,.10);border-radius:18px;padding:14px 10px;display:flex;align-items:center;gap:10px;background:#f5f6ef; }
.title-step>span{font-size:22px}.title-step b{display:block;color:#697a64}.title-step small{display:block;color:#9aa094;font-size:10px;margin-top:2px}.title-step.active{background:#e1edd9;border-color:#adc7a4;box-shadow:0 7px 18px rgba(79,111,75,.10)}
.collected-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.collected-item { display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:#fffdf5;border:1px solid rgba(82,114,78,.10); }
.collected-item>span{width:45px;height:45px;border-radius:15px;display:grid;place-items:center;background:#eef3e7;font-size:21px}.collected-item b{display:block;color:#5b7357}.collected-item small{display:block;color:#959c8d;margin-top:3px;font-size:10px}

/* map */
.map-hero { display:grid;grid-template-columns:minmax(320px,1.2fr) minmax(260px,.8fr);gap:22px;align-items:center;padding:20px;overflow:hidden; }
.map-hero img { width:100%;border-radius:23px;border:1px solid rgba(80,112,76,.10); }
.map-hero h2 { color:#52714f;font-family:Georgia,serif;font-size:26px;line-height:1.35; }.map-hero p{color:#7d8577;line-height:1.65}
.map-filters { margin:18px 0; }.filter-pills button{background:#fffdf5;color:#7d8977;border:1px solid rgba(81,114,77,.10)}.filter-pills button.active{background:#63815e;color:#fffdf4}
.trail-missions { display:grid;gap:0; }
.trail-mission { display:grid;grid-template-columns:52px 1fr;gap:10px;position:relative; }
.trail-rail { display:grid;justify-items:center;grid-template-rows:42px 1fr; }
.trail-rail>span { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#dbe8d4;color:#5d7a59;font-weight:900;font-size:11px;border:4px solid #f5f7ed;box-shadow:0 0 0 1px rgba(81,112,77,.12);z-index:1; }
.trail-rail>i { width:2px;height:100%;background:#c4d2bd;min-height:26px; }
.trail-mission:last-child .trail-rail>i { background:linear-gradient(#c4d2bd,transparent); }
.trail-mission.done .trail-rail>span { background:#72966c;color:white; }
.trail-stop { margin-bottom:14px;padding:17px; }
.trail-stop-top { display:flex;gap:14px;align-items:flex-start; }.activity-icon{background:#edf3e6;color:#587555}.trail-stop-copy{flex:1;min-width:0}.trail-stop-copy h3{color:#567252;margin:4px 0 5px}.trail-stop-copy p{color:#7f8779;margin:0 0 5px}.trail-stop-copy small{color:#999f93}.stamp-meta span{color:#809477}.stamp-meta b{color:#6c8566}
.trail-mission.mystery .trail-stop { filter:saturate(.65);opacity:.68; }

/* rankings/profile */
.forest-leaderboard { background:linear-gradient(180deg,#fffdf5,#f2f6e9);border-color:rgba(80,113,76,.12); }
.ranking-row { border-bottom-color:rgba(83,113,78,.10); }.rank-avatar{background:#e9f0e3;color:#587453;border-color:#d6e2d0}.rank-points strong{color:#557452}.rank-sub,.rank-name span{color:#92998c}
.profile-card,.rules-card,.log-card,.source-idea-card { background:linear-gradient(180deg,#fffdf5,#f3f6ea); }
.profile-avatar { background:#dfead8;color:#587454; }.profile-card h2{color:#52714f}.rule b{color:#5d7658}.source-idea-card{padding:20px;margin-top:16px}.source-idea-card h3{color:#557352;margin:5px 0 8px}.source-idea-card p{color:#7d8576;line-height:1.65}
.social-footer { color:#8f9888; }

/* subtle claim animation */
.points-pop::after { content:"+ POINTS ✦"; position:fixed; z-index:20000; left:50%; top:44%; transform:translate(-50%,-50%); padding:14px 20px;border-radius:999px;background:#f0e1a8;color:#557250;font-weight:950;box-shadow:0 20px 50px rgba(79,101,68,.18);animation:pointsPop .75s ease both;pointer-events:none; }
@keyframes pointsPop{0%{opacity:0;transform:translate(-50%,-20%) scale(.8)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}

/* admin + projector re-theme */
.admin-shell,.admin-wrap { background:transparent; }.admin-header,.admin-topbar{background:rgba(248,250,239,.92)!important;border-color:rgba(79,112,75,.12)!important}.admin-panel{background:linear-gradient(180deg,#fffdf5,#f3f6ea)}.panel-heading h2{color:#52714f}.activity-admin-icon{background:#e4eddc;color:#567552}.status-chip.on{background:#dfead9!important;color:#557452!important}.compact-btn,.search-inline button,.activity-admin-status button,.icon-close{background:#5e7d59;color:#fffdf4}
.projector-screen { background:radial-gradient(circle at 8% 0%,rgba(239,215,147,.22),transparent 24rem),linear-gradient(180deg,#eef5e6,#e3ecd9); }
.projector-header,.projector-footer { background:linear-gradient(135deg,#4b6d4b,#6f9169)!important;color:#fffdf4; }.projector-brand h1{color:#fffdf4}.projector-main,.projector-side,.podium-card,.projector-rank-row,.projector-ind-row{background:linear-gradient(180deg,#fffdf5,#f2f6e9)!important;border-color:rgba(80,112,76,.12)!important}.projector-title h2{color:#52714f}.podium-card.rank-1{background:linear-gradient(180deg,#fff9dc,#f0e6b8)!important}.projector-rank-row strong,.projector-ind-row strong{color:#557452}.projector-side-head span{color:#758d6d}

@media (max-width: 900px) {
  .cottage-hero-grid { grid-template-columns:1fr; }.hero-forest-art{order:-1;margin-top:30px}.hero-forest-art img{max-height:400px;object-fit:cover}.cottage-copy h1{font-size:clamp(42px,11vw,68px)}
  .traveler-card { grid-template-columns:1fr 210px; }.traveler-backpack img{width:160px}
  .map-hero { grid-template-columns:1fr; }.badge-grid{grid-template-columns:1fr}.title-steps{grid-template-columns:repeat(5,minmax(115px,1fr));overflow:auto;padding-bottom:4px}
}
@media (max-width: 650px) {
  .cottage-hero { padding:18px; }.cottage-hero::before{top:16px;right:16px;font-size:8px}.cottage-hero-grid{margin-top:42px}.hero-forest-art img{border-radius:22px}.mood-palette{flex-wrap:wrap}.swatch{width:28px;height:28px}.mood-palette div{width:100%;margin-left:0;margin-top:4px}
  .traveler-card { grid-template-columns:1fr; }.traveler-backpack{border-left:0;border-top:1px solid rgba(255,255,255,.13);min-height:220px}.traveler-backpack img{width:175px}.traveler-copy{padding:22px}.traveler-name-row h2{font-size:29px}
  .journey-track { grid-template-columns:repeat(5,minmax(78px,1fr));overflow-x:auto;padding:8px 2px 12px; }.journey-node>span{width:46px;height:46px}.journey-node>i{top:22px;left:calc(50% + 25px);width:calc(100% - 50px)}
  .backpack-showcase { grid-template-columns:1fr;padding:18px}.big-backpack-wrap{min-height:290px}.big-backpack-wrap img{max-height:300px}.backpack-profile{text-align:center}.backpack-profile .progress-track{max-width:400px;margin:0 auto}.big-points{font-size:42px}.badge-grid{grid-template-columns:1fr}.collected-grid{grid-template-columns:1fr}
  .map-hero { padding:14px }.trail-mission{grid-template-columns:42px 1fr}.trail-stop-top{gap:10px}.activity-icon{width:44px;height:44px;flex:0 0 44px}
}
.big-backpack-wrap .explorer-character { position:absolute; left:5%; bottom:18px; width:34%; max-height:290px; object-fit:contain; z-index:1; }
.big-backpack-wrap .backpack-main-art { width:min(300px,68%); max-height:355px; object-fit:contain; transform:translateX(15%); z-index:2; position:relative; }
.sample-point-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:13px; }
.sample-point-grid span { padding:10px 12px; border-radius:14px; background:#eef3e6; color:#667760; font-size:12px; display:flex; justify-content:space-between; gap:8px; }
.sample-point-grid b { color:#567451; }
.theme-example-note { font-size:11px; color:#9aa091 !important; margin:10px 0 0 !important; }
@media (max-width:650px){.big-backpack-wrap .explorer-character{left:1%;width:36%;}.big-backpack-wrap .backpack-main-art{width:72%;transform:translateX(13%)}.sample-point-grid{grid-template-columns:repeat(2,1fr)}}


/* =========================================================
   V4 FINAL POLISH · EDITORIAL COTTAGE / ENCHANTED FOREST
   restrained, tactile, spacious, mobile-first
   ========================================================= */
:root {
  --font: "Noto Sans Thai", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Noto Serif Thai", Georgia, "Times New Roman", serif;
  --forest: #536f55;
  --forest-2: #3f5c46;
  --forest-soft: #819c7c;
  --ivory: #f6f6ec;
  --paper: #fffef8;
  --paper-2: #eef2e7;
  --gold: #cfb66f;
  --gold-soft: #eee2ae;
  --ink: #30382f;
  --muted: #737b70;
  --line: rgba(70, 94, 68, .13);
  --shadow: 0 22px 64px rgba(65, 88, 62, .10);
  --shadow-soft: 0 10px 28px rgba(65, 88, 62, .075);
  --shadow-float: 0 28px 70px rgba(58, 78, 55, .16);
}
body {
  font-family: var(--font);
  background:
    radial-gradient(circle at 12% -2%, rgba(234, 217, 157, .19), transparent 22rem),
    radial-gradient(circle at 96% 5%, rgba(159, 194, 151, .20), transparent 24rem),
    linear-gradient(180deg, #f8faf2 0%, #f2f5e9 50%, #f8f6ee 100%);
}
body::before {
  opacity: .11;
  background-image:
    radial-gradient(circle, rgba(82,105,77,.09) 0 1px, transparent 1.1px);
  background-size: 20px 20px;
}
h1,h2,h3 { text-wrap: balance; }
button, input, select, textarea { font-family: var(--font); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(106, 142, 101, .22);
  outline-offset: 2px;
}
.eyebrow,.micro-label,.brand-kicker {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: .17em;
  font-weight: 800;
}
.brand-title,
.enchanted-heading h1,
.section-inline-head h2,
.map-hero h2,
.backpack-profile h2,
.admin-login-card h1 {
  font-family: var(--serif);
}
.brand-title { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.primary-btn,.secondary-btn,.danger-btn { min-height: 50px; }
.primary-btn {
  background: linear-gradient(135deg, #536f55, #759271);
  box-shadow: 0 9px 22px rgba(77, 111, 74, .17);
}
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(77, 111, 74, .21); }
.secondary-btn:hover { transform: translateY(-1px); }
.paper-card { border-radius: 24px; }

/* loader */
.initial-loader {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: #587254;
}
.initial-loader img { width: 76px; height: 76px; margin-bottom: 10px; filter: drop-shadow(0 12px 24px rgba(75,101,70,.12)); }
.initial-loader span { font-size: 9px; letter-spacing: .22em; font-weight: 800; color: #8b9883; }
.initial-loader b { font-family: var(--serif); font-size: 27px; }
.initial-loader i {
  width: 86px; height: 3px; margin-top: 12px; border-radius: 99px; overflow: hidden;
  background: #dfe8d8; position: relative;
}
.initial-loader i::after {
  content: ""; position: absolute; inset: 0; width: 38%; border-radius: inherit;
  background: #789674; animation: loaderTrail 1.25s ease-in-out infinite;
}
@keyframes loaderTrail { 0%{transform:translateX(-110%)} 100%{transform:translateX(300%)} }

/* refined landing */
.refined-landing {
  width: min(1260px, calc(100% - 32px));
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  gap: 22px;
  padding: 24px 0 42px;
}
.refined-hero {
  padding: 26px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 82% 12%, rgba(247,232,176,.20), transparent 20rem),
    linear-gradient(180deg, rgba(252,254,246,.99), rgba(236,243,225,.985));
  border: 1px solid rgba(78,108,75,.12);
  box-shadow: var(--shadow);
}
.refined-hero::before { display: none; }
.hero-topline {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  position:relative; z-index:2;
}
.forest-edition {
  display:inline-flex; align-items:center; min-height:34px; padding:7px 12px;
  border-radius:999px; border:1px solid rgba(84,111,80,.13);
  background:rgba(255,255,248,.62); color:#82907b;
  font-size:9px; font-weight:800; letter-spacing:.18em; white-space:nowrap;
}
.refined-hero-grid {
  grid-template-columns:minmax(0, .92fr) minmax(390px, 1.08fr);
  gap:34px; margin-top:38px;
}
.refined-copy h1 {
  font-family:var(--serif);
  font-size:clamp(45px, 5.9vw, 74px);
  line-height:1.05; font-weight:600; letter-spacing:-.05em;
  color:#4f6a51; margin:10px 0 18px;
}
.refined-copy p {
  max-width:590px; color:#687267; font-size:16px; line-height:1.82;
}
.hero-manifesto {
  margin:22px 0 18px; padding:14px 0 15px;
  border-top:1px solid rgba(80,109,76,.13); border-bottom:1px solid rgba(80,109,76,.13);
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.hero-manifesto span {
  font-family:var(--serif); color:#5f765c; font-size:18px; font-weight:600;
}
.hero-manifesto small { color:#899187; font-size:11px; }
.landing-journey-strip { margin:18px 0; gap:3px; }
.landing-stage { gap:5px; font-size:11px; }
.landing-stage span {
  width:28px;height:28px;background:rgba(255,255,248,.72);
  border-color:rgba(82,112,78,.12); font-size:13px;
}
.landing-stage i { color:#a6b19f; }
.event-facts {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:20px;
}
.event-facts > div {
  padding:11px 12px; border-radius:16px;
  background:rgba(255,255,248,.58); border:1px solid rgba(79,108,76,.10);
  min-width:0;
}
.event-facts span { display:block; font-size:8px; letter-spacing:.14em; font-weight:800; color:#92a08b; }
.event-facts b { display:block; margin-top:4px; font-size:11px; color:#5b7157; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.hero-visual-stack { position:relative; }
.refined-forest-art { position:relative; }
.refined-forest-art img {
  aspect-ratio: 1.16 / 1; object-fit:cover; border-radius:30px;
  box-shadow: var(--shadow-float);
  border: 1px solid rgba(255,255,255,.72);
}
.field-card {
  position:absolute; padding:10px 13px; border-radius:15px;
  background:rgba(255,254,246,.88); backdrop-filter:blur(10px);
  border:1px solid rgba(76,105,72,.11); box-shadow:0 10px 26px rgba(55,79,53,.10);
  max-width:220px;
}
.field-card span { display:block; font-size:8px; letter-spacing:.16em; color:#92a08b; font-weight:800; }
.field-card b { display:block; margin-top:3px; color:#567052; font-family:var(--serif); font-size:13px; }
.field-card-top { top:16px; left:-14px; }
.field-card-bottom { right:-10px; bottom:18px; }

.journey-principles {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin-top:26px; padding-top:22px; border-top:1px solid rgba(80,109,76,.12);
}
.journey-principles article {
  display:grid; grid-template-columns:32px 1fr; gap:10px;
  padding:13px; border-radius:17px; background:rgba(255,255,248,.56);
  border:1px solid rgba(80,109,76,.09);
}
.journey-principles article>span { font-family:var(--serif); color:#b09a61; font-size:15px; }
.journey-principles b { display:block; color:#566f53; font-size:12px; }
.journey-principles small { display:block; color:#899186; font-size:10px; line-height:1.45; margin-top:3px; }

.landing-faculty-section { margin-top:22px; }
.mini-section-head { display:flex; justify-content:space-between; gap:12px; align-items:end; margin-bottom:10px; }
.mini-section-head span { color:#667d61; font-size:9px; letter-spacing:.15em; font-weight:800; }
.mini-section-head small { color:#949c91; font-size:9px; text-align:right; }
.refined-landing .faculty-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:0; }
.refined-landing .faculty-chip { padding:10px 11px; border-radius:15px; background:rgba(255,254,247,.64); }
.refined-landing .faculty-chip strong { font-family:var(--font); font-size:12px; color:#5a7556; }
.refined-landing .faculty-chip span { font-size:9px; }

/* refined auth */
.refined-auth {
  position:sticky; top:20px; align-self:start;
  padding:16px; border-radius:30px;
  background:linear-gradient(180deg,rgba(255,254,248,.98),rgba(242,246,234,.98));
  border:1px solid rgba(79,109,75,.12);
  box-shadow: var(--shadow);
}
.auth-passport-head {
  display:grid; grid-template-columns:76px 1fr; align-items:center; gap:12px;
  padding:8px 8px 15px;
}
.auth-passport-head .auth-backpack { width:72px; margin:0; }
.auth-passport-head span { display:block; font-size:8px; letter-spacing:.17em; color:#98a18f; font-weight:800; }
.auth-passport-head b { display:block; margin-top:3px; font-family:var(--serif); color:#587253; font-size:18px; font-weight:600; }
.auth-passport-head small { display:block; margin-top:2px; color:#9aa195; font-size:9px; }
.refined-auth .auth-tabs { margin-bottom:4px; }
.refined-form { padding-top:4px; }
.refined-form .auth-heading h2 { font-family:var(--serif); color:#526e50; font-size:25px; font-weight:600; line-height:1.25; }
.refined-form .auth-heading p { color:#858e80; line-height:1.55; }
.refined-form label { color:#677061; font-size:11px; }
.refined-form input,.refined-form select { border-radius:13px; min-height:49px; }
.auth-trust-note {
  display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:12px 3px 0;
}
.auth-trust-note span {
  min-width:0; padding:8px 7px; text-align:center; border-radius:12px;
  background:#eef3e8; color:#8b9585; font-size:8px; line-height:1.35;
}
.refined-auth .projector-link {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; padding:11px 12px; border-top:1px solid rgba(81,109,77,.10);
  font-size:10px;
}

/* application shell */
.refined-topbar {
  min-height:68px; padding:12px 18px !important;
  background:rgba(248,250,241,.92) !important;
}
.refined-topbar .brand-mark { width:38px; height:38px; }
.refined-topbar .brand-title { font-size:15px; }
.refined-topbar .brand-kicker { font-size:7px; }
.icon-link { display:inline-flex; align-items:center; gap:6px; }
.live-dot { width:6px;height:6px;border-radius:50%;background:#7aa075;box-shadow:0 0 0 4px rgba(122,160,117,.12); }
.refined-main { max-width:1100px; padding-top:30px; }
.enchanted-heading { margin-bottom:20px; }
.enchanted-heading h1 { font-size:clamp(34px,6vw,50px); font-weight:600; line-height:1.16; }
.enchanted-heading p { max-width:760px; font-size:13px; line-height:1.65; }
.refined-nav { border-radius:22px; padding:6px; }
.refined-nav button { border-radius:16px; min-height:52px; }
.refined-nav button span { font-size:17px; font-family:var(--serif); font-weight:600; }
.refined-nav button small { margin-top:3px; font-size:9px; }
.refined-nav button.active { box-shadow:inset 0 0 0 1px rgba(80,111,76,.08); }

/* journey */
.refined-traveler {
  grid-template-columns:minmax(0,1fr) 270px;
  min-height:330px;
  background:
    radial-gradient(circle at 83% 8%, rgba(246,233,176,.20), transparent 17rem),
    linear-gradient(135deg,#557653 0%,#73936e 58%,#91aa86 100%);
  box-shadow:0 20px 52px rgba(61,91,59,.18);
}
.refined-traveler::after {
  content:""; position:absolute; inset:18px; border:1px solid rgba(255,255,244,.15); border-radius:19px; pointer-events:none;
}
.traveler-meta-line { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.traveler-meta-line>span:last-child { font-size:9px; letter-spacing:.12em; color:rgba(255,255,245,.62); font-weight:700; }
.refined-traveler .traveler-copy { padding:34px; gap:18px; }
.refined-traveler .traveler-name-row h2 { font-family:var(--serif); font-size:36px; font-weight:600; }
.traveler-mini-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(255,255,255,.14); border-radius:16px; overflow:hidden;
  margin-top:4px;
}
.traveler-mini-stats div { padding:12px 10px; background:rgba(255,255,255,.05); }
.traveler-mini-stats strong { display:block; font-size:18px; color:#fffef7; }
.traveler-mini-stats span { display:block; margin-top:2px; font-size:7px; letter-spacing:.13em; color:rgba(255,255,245,.66); font-weight:800; }
.refined-backpack-panel { min-width:0; }
.refined-backpack-panel img { width:195px; filter:drop-shadow(0 16px 24px rgba(45,68,44,.12)); }
.refined-backpack-panel .backpack-score { right:20px; bottom:20px; min-width:90px; border-radius:15px; }
.refined-backpack-panel .backpack-score b { font-size:21px; }

.refined-trail { padding:22px; margin-top:16px; }
.milestone-chip {
  min-width:96px; padding:8px 11px; border-radius:14px; text-align:right;
  background:#edf2e6; border:1px solid rgba(80,108,76,.09);
}
.milestone-chip span { display:block; font-size:7px; letter-spacing:.14em; color:#97a08f; font-weight:800; }
.milestone-chip b { display:block; margin-top:2px; color:#60785c; font-size:12px; }
.progress-caption { display:flex; justify-content:space-between; gap:10px; margin:13px 2px 7px; color:#899287; font-size:9px; font-weight:700; }
.journey-content-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr); gap:14px; margin-top:14px; }
.refined-next,.refined-guide { padding:20px; }
.section-kicker-row { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.section-kicker-row>span:last-child { color:#929b8e; font-size:9px; }
.refined-mission { margin-top:12px; }
.refined-mission .mission-badge { width:50px;height:50px;border-radius:16px; }
.refined-guide h3 { font-family:var(--serif); font-size:22px; color:#557151; font-weight:600; margin:8px 0; }
.refined-guide p { color:#7f877a; font-size:12px; line-height:1.65; }
.guide-points { display:grid; gap:8px; margin-top:13px; }
.guide-points span { display:flex; align-items:center; gap:8px; color:#7d8778; font-size:10px; }
.guide-points i { width:6px;height:6px;border-radius:50%;background:#8eaa87; }
.refined-qr { margin-top:14px; padding:20px; }
.refined-qr .qr-copy h3 { font-family:var(--serif); font-size:21px; color:#567052; }

/* backpack */
.refined-backpack-showcase { border-radius:28px; }
.refined-big-backpack { overflow:hidden; }
.refined-big-backpack::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 40%);
}
.backpack-field-label {
  position:absolute; left:18px; top:16px; z-index:5;
  font-size:8px; letter-spacing:.16em; font-weight:800; color:#7c8d75;
  background:rgba(255,254,246,.72); border:1px solid rgba(82,113,77,.09);
  padding:7px 10px; border-radius:999px;
}
.refined-backpack-profile h2 { font-size:38px; font-weight:600; }
.refined-backpack-profile .title-pill { font-size:11px; }
.next-unlock {
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  margin-top:14px; padding:10px 12px; border-radius:14px;
  background:#eef3e8;
}
.next-unlock span { font-size:7px; letter-spacing:.14em; color:#93a08c; font-weight:800; }
.next-unlock b { color:#60765c; font-size:11px; }
.share-journey-btn { margin-top:12px; width:100%; }
.refined-badges .badge-card { position:relative; overflow:hidden; padding:17px; }
.badge-index { position:absolute; top:10px; right:12px; font-family:var(--serif); font-size:11px; color:#b1b8aa; }
.refined-badges .badge-icon { width:58px;height:58px;flex-basis:58px; font-size:27px; }
.refined-title-ladder { margin-top:14px; }
.refined-title-ladder .title-step { position:relative; padding-top:28px; }
.refined-title-ladder .title-step em {
  position:absolute; top:8px; left:10px; font-style:normal; color:#adb4a7; font-size:8px; letter-spacing:.1em;
}
.refined-collected .collected-item { position:relative; padding-left:14px; }
.refined-collected .collected-item>em { font-style:normal; color:#aab1a5; font-size:8px; letter-spacing:.1em; }
.elegant-empty { display:grid; gap:4px; }
.elegant-empty b { color:#647960; }
.elegant-empty span { color:#949b90; font-size:10px; }

/* map */
.refined-map-hero { grid-template-columns:minmax(330px,1.1fr) minmax(280px,.9fr); padding:18px; }
.map-art-wrap { position:relative; }
.map-art-wrap>span {
  position:absolute; bottom:12px; right:12px; padding:7px 10px; border-radius:999px;
  background:rgba(255,254,246,.86); border:1px solid rgba(78,108,74,.10);
  color:#75866e; font-size:8px; letter-spacing:.12em; font-weight:800;
}
.refined-map-hero h2 { font-size:25px; font-weight:600; }
.map-legend { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:14px; }
.map-legend span { display:flex; align-items:center; gap:6px; color:#8a9385; font-size:9px; }
.map-legend i { width:8px;height:8px;border-radius:50%; }
.map-legend .done { background:#789674; }.map-legend .todo{background:#d3dfcc}.map-legend .locked{background:#c8c5bb}
.refined-filters { position:sticky; top:74px; z-index:20; padding:8px 0; background:linear-gradient(180deg,rgba(246,248,239,.96),rgba(246,248,239,.80),transparent); }
.refined-filters button { min-height:38px; padding:8px 13px; }
.refined-trail-list .trail-stop { transition:transform .18s ease, box-shadow .18s ease; }
.refined-trail-list .trail-stop:hover { transform:translateY(-1px); box-shadow:0 14px 32px rgba(71,95,67,.10); }
.activity-action { margin-top:13px; border-radius:13px; }
.activity-action b { font-size:8px; letter-spacing:.12em; }
.refined-claim { border-radius:14px; }

/* rankings */
.forest-leaderboard { overflow:hidden; border-radius:24px; }
.ranking-row { min-height:72px; }
.ranking-row.top { background:linear-gradient(90deg,rgba(239,244,232,.85),rgba(255,254,248,.78)); }
.ranking-row.top-1 { background:linear-gradient(90deg,rgba(245,236,196,.68),rgba(255,254,248,.84)); }
.rank-no { font-family:var(--serif); font-size:14px; color:#9aa294; }
.rank-avatar { border-radius:14px; }

/* profile */
.refined-profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.refined-profile-card { position:relative; grid-template-columns:60px 1fr auto; align-items:center; }
.refined-profile-card .profile-avatar { width:60px;height:60px; }
.refined-profile-card h2 { font-family:var(--serif); font-weight:600; }
.profile-level {
  display:grid; justify-items:center; gap:2px; padding:9px 11px; border-radius:14px;
  background:#edf3e7; color:#637b5f; font-size:18px;
}
.profile-level span { font-size:8px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.event-guide-card { padding:20px; }
.event-guide-date { margin:10px 0 12px; padding:14px; border-radius:16px; background:#edf3e7; }
.event-guide-date span { display:block; font-size:8px; letter-spacing:.14em; color:#93a08d; font-weight:800; }
.event-guide-date b { display:block; margin-top:3px; font-family:var(--serif); color:#5a7356; font-size:20px; }
.event-guide-row { display:flex; justify-content:space-between; gap:16px; padding:10px 2px; border-bottom:1px solid rgba(79,108,75,.09); }
.event-guide-row:last-child { border-bottom:0; }
.event-guide-row span { color:#979f93; font-size:10px; }
.event-guide-row b { color:#63765f; font-size:10px; text-align:right; }
.privacy-card {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:14px; padding:20px;
}
.privacy-card h3 { font-family:var(--serif); color:#567052; font-size:20px; margin:7px 0 5px; }
.privacy-card p { color:#858d80; font-size:11px; margin:0; }
.privacy-actions { display:flex; gap:8px; flex:0 0 auto; }

/* modal */
.modal-backdrop {
  position:fixed; inset:0; z-index:20000; display:grid; place-items:center;
  padding:20px; background:rgba(38,48,36,.28); backdrop-filter:blur(8px);
}
.claim-modal {
  width:min(440px,100%); padding:24px; border-radius:26px;
  background:linear-gradient(180deg,#fffef8,#f3f6ea);
  border:1px solid rgba(78,108,74,.14); box-shadow:0 30px 90px rgba(45,62,43,.22);
  text-align:center;
}
.claim-modal-icon {
  width:70px;height:70px;border-radius:22px;display:grid;place-items:center;
  margin:14px auto 12px;background:#e9f0e3;font-size:30px;border:1px dashed #b8cab1;
}
.claim-modal h3 { margin:0; font-family:var(--serif); font-size:23px; color:#557151; font-weight:600; }
.claim-modal p { margin:10px auto 18px; max-width:350px; color:#7d8678; font-size:12px; line-height:1.65; }
.claim-modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* admin refinement */
.admin-online {
  display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid rgba(88,123,83,.13);
  border-radius:999px;color:#63815e;font-size:8px;font-weight:900;letter-spacing:.12em;background:#eff5ea;
}
.admin-online i { width:6px;height:6px;border-radius:50%;background:#7aa175;box-shadow:0 0 0 4px rgba(122,161,117,.10); }
.admin-header { background:rgba(249,251,243,.96)!important; color:#4f6950!important; box-shadow:0 8px 24px rgba(72,96,68,.08); }
.admin-brand img { filter:none; }
.admin-brand span { color:#8c9786; }
.admin-brand b { color:#536e52; }
.admin-header-actions a,.admin-header-actions button { color:#5e785b; border-color:rgba(81,111,77,.14); background:#fffef8; }
.admin-main { padding-top:26px; }
.admin-panel { border-radius:22px; }

/* projector refinement */
.projector-screen {
  background:
    radial-gradient(circle at 7% -5%, rgba(238,216,150,.18), transparent 23rem),
    linear-gradient(180deg,#edf4e6,#e5eddd);
}
.projector-header,.projector-footer {
  background:linear-gradient(135deg,#456346,#627f5f)!important;
}
.projector-main,.projector-side { box-shadow:0 18px 46px rgba(64,87,61,.10); }
.podium-card { border-radius:22px!important; }
.podium-card.rank-1 { box-shadow:0 16px 34px rgba(139,121,67,.10); }

/* error */
.refined-fatal img { width:72px; margin:0 auto 8px; }
.refined-fatal button { margin:12px auto 0; }

/* tablet + mobile */
@media (max-width: 1040px) {
  .refined-landing { grid-template-columns:1fr; max-width:880px; }
  .refined-auth { position:relative; top:auto; }
  .refined-hero-grid { grid-template-columns:1fr 1fr; }
  .refined-landing .faculty-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 820px) {
  .refined-hero-grid { grid-template-columns:1fr; }
  .hero-visual-stack { order:-1; margin-top:18px; }
  .refined-forest-art img { max-height:390px; }
  .refined-copy h1 { font-size:clamp(42px,11vw,66px); }
  .journey-principles { grid-template-columns:1fr; }
  .refined-landing .faculty-grid { grid-template-columns:repeat(2,1fr); }
  .event-facts { grid-template-columns:1fr; }
  .journey-content-grid { grid-template-columns:1fr; }
  .refined-profile-grid { grid-template-columns:1fr; }
  .privacy-card { align-items:flex-start; flex-direction:column; }
  .privacy-actions { width:100%; }
  .privacy-actions>* { flex:1; }
}
@media (max-width: 650px) {
  body { background:linear-gradient(180deg,#f7f9f1,#f1f5e9 60%,#f7f4ec); }
  .refined-landing { width:min(100% - 18px, 620px); padding-top:9px; gap:10px; }
  .refined-hero { padding:15px; border-radius:24px; }
  .hero-topline { align-items:flex-start; }
  .forest-edition { font-size:7px; padding:6px 8px; }
  .refined-hero-grid { margin-top:22px; gap:18px; }
  .field-card-top { left:10px; top:10px; }
  .field-card-bottom { right:10px; bottom:10px; }
  .field-card { padding:8px 10px; max-width:185px; }
  .field-card b { font-size:11px; }
  .refined-copy h1 { font-size:42px; margin:9px 0 14px; }
  .refined-copy p { font-size:14px; line-height:1.75; }
  .hero-manifesto { margin:17px 0 14px; }
  .hero-manifesto span { font-size:16px; }
  .event-facts { gap:6px; }
  .mini-section-head { display:grid; }
  .mini-section-head small { text-align:left; }
  .refined-auth { padding:13px; border-radius:24px; }
  .auth-passport-head { grid-template-columns:64px 1fr; padding-bottom:12px; }
  .auth-passport-head .auth-backpack { width:62px; }
  .auth-trust-note { grid-template-columns:1fr; }

  .refined-main { padding:22px 12px 105px; }
  .refined-topbar { padding:10px 12px!important; }
  .refined-topbar .edition { display:none; }
  .enchanted-heading { margin-bottom:16px; }
  .enchanted-heading h1 { font-size:34px; }
  .enchanted-heading p { font-size:11px; }

  .refined-traveler { grid-template-columns:1fr; min-height:0; border-radius:24px; }
  .refined-traveler .traveler-copy { padding:22px; }
  .refined-traveler .traveler-name-row h2 { font-size:30px; }
  .refined-traveler::after { inset:11px; border-radius:18px; }
  .traveler-mini-stats { margin-top:2px; }
  .refined-backpack-panel { min-height:210px; border-left:0; border-top:1px solid rgba(255,255,255,.13); }
  .refined-backpack-panel img { width:165px; }
  .refined-backpack-panel .backpack-score { right:15px; bottom:15px; }
  .refined-trail { padding:16px; }
  .card-title-row { align-items:flex-start; }
  .card-title-row h3 { font-size:15px; }
  .milestone-chip { min-width:82px; }
  .journey-track { grid-template-columns:repeat(5,minmax(74px,1fr)); }
  .refined-next,.refined-guide { padding:16px; }

  .refined-backpack-showcase { padding:14px; }
  .refined-big-backpack { min-height:275px; }
  .refined-backpack-profile { padding:5px 8px 10px; }
  .refined-backpack-profile h2 { font-size:31px; }
  .refined-badges { gap:9px; }
  .refined-badges .badge-card { padding:14px; }
  .refined-title-ladder { padding:15px; }
  .refined-collected .collected-item { padding:12px; }

  .refined-map-hero { padding:12px; }
  .refined-map-hero h2 { font-size:21px; }
  .refined-filters { top:60px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .refined-filters::-webkit-scrollbar { display:none; }
  .trail-stop { padding:14px; }

  .ranking-row { grid-template-columns:38px 42px 1fr auto; padding:12px 10px; gap:8px; }
  .rank-avatar { width:40px;height:40px; }
  .rank-name b { font-size:11px; }
  .rank-name span { font-size:8px; }
  .rank-points strong { font-size:16px; }

  .refined-profile-card { grid-template-columns:50px 1fr auto; padding:15px; }
  .refined-profile-card .profile-avatar { width:50px;height:50px; }
  .profile-level { padding:7px 8px; }
  .event-guide-card,.privacy-card { padding:16px; }

  .claim-modal { padding:20px; border-radius:22px; }
  .claim-modal-actions { grid-template-columns:1fr; }
  .modal-backdrop { padding:14px; }

  .refined-nav { width:min(calc(100% - 18px), 620px); bottom:max(9px,env(safe-area-inset-bottom)); }
}
@media (hover:none) {
  .primary-btn:hover,.secondary-btn:hover,.refined-trail-list .trail-stop:hover { transform:none; }
}


/* =========================================================
   V5 META BLANK + LARGER TYPE
   ========================================================= */
html { font-size: 17px; }
body { font-size: 16px; }

.refined-copy p { font-size: 17px; line-height: 1.9; }
.refined-form .auth-heading h2 { font-size: 27px; }
.refined-form .auth-heading p { font-size: 14px; }
.refined-form label { font-size: 12px; }
.refined-form input,
.refined-form select { font-size: 15px; }
.primary-btn,
.secondary-btn,
.danger-btn { font-size: 15px; }

.event-facts { gap: 10px; }
.event-facts > div { padding: 14px 14px; border-radius: 18px; }
.event-facts span { font-size: 9px; letter-spacing: .18em; }
.event-facts b { font-size: 13px; min-height: 1.3em; }
.meta-blank {
  color: #aab4a4 !important;
  font-size: 16px !important;
  letter-spacing: .02em;
}

.mini-section-head span { font-size: 10px; }
.mini-section-head small { font-size: 10px; }
.refined-landing .faculty-chip strong { font-size: 13px; }
.refined-landing .faculty-chip span { font-size: 10px; }

.enchanted-heading p { font-size: 14px; }
.card-title-row h3 { font-size: 21px; }
.refined-guide h3 { font-size: 24px; }
.refined-guide p { font-size: 13px; }
.refined-qr .qr-copy h3 { font-size: 22px; }
.refined-map-hero h2 { font-size: 27px; }
.rank-name b { font-size: 13px; }
.rank-name span { font-size: 10px; }
.event-guide-row span,
.event-guide-row b,
.privacy-card p,
.guide-points span,
.elegant-empty span { font-size: 11px; }

@media (max-width: 650px) {
  html { font-size: 16px; }
  .refined-copy p { font-size: 15px; }
  .event-facts > div { padding: 12px; }
  .event-facts span { font-size: 8px; }
  .event-facts b { font-size: 14px; }
  .meta-blank { font-size: 15px !important; }
  .refined-form .auth-heading h2 { font-size: 28px; }
  .refined-form .auth-heading p { font-size: 13px; }
  .refined-form label { font-size: 12px; }
  .enchanted-heading p { font-size: 12px; }
  .card-title-row h3 { font-size: 16px; }
  .rank-name b { font-size: 12px; }
  .rank-name span { font-size: 9px; }
}


/* =========================================================
   V6 LUXURY REFINEMENT
   Same cottagecore theme, more editorial / premium / readable
   ========================================================= */
:root {
  --forest: #5a7657;
  --forest-2: #456146;
  --forest-soft: #89a183;
  --ivory: #f8f7f0;
  --paper: #fffef9;
  --paper-2: #f1f4e8;
  --gold: #d1b879;
  --gold-soft: #f2e6b8;
  --ink: #2d372d;
  --muted: #6f786d;
  --line: rgba(83, 108, 80, .11);
  --shadow: 0 24px 72px rgba(70, 90, 66, .10);
  --shadow-soft: 0 12px 30px rgba(70, 90, 66, .075);
  --shadow-float: 0 28px 80px rgba(58, 76, 55, .14);
}

.refined-hero,
.refined-auth,
.paper-card,
.faculty-chip,
.landing-rules > div {
  backdrop-filter: blur(10px);
}

.refined-hero {
  background:
    radial-gradient(circle at 84% 10%, rgba(244,231,184,.22), transparent 18rem),
    radial-gradient(circle at 10% 0%, rgba(183,212,171,.12), transparent 20rem),
    linear-gradient(180deg, rgba(253,254,249,.99), rgba(240,245,231,.988));
  box-shadow: 0 26px 76px rgba(70, 90, 66, .11);
}

.brand-title,
.refined-copy h1,
.refined-form .auth-heading h2,
.refined-guide h3,
.refined-qr .qr-copy h3,
.refined-backpack-profile h2,
.enchanted-heading h1,
.event-guide-date b,
.claim-modal h3,
.privacy-card h3 {
  letter-spacing: -0.02em;
}

.refined-copy h1 {
  color: #4f6e51;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.refined-copy p,
.enchanted-heading p,
.refined-guide p,
.event-guide-row span,
.event-guide-row b,
.privacy-card p,
.guide-points span,
.rule span,
.rank-name span,
.mini-section-head small,
.form-note {
  color: #707a6e;
}

.event-facts > div,
.field-card,
.journey-principles article,
.refined-landing .faculty-chip,
.next-unlock,
.event-guide-date,
.auth-trust-note span {
  background: rgba(255,255,249,.76);
  border: 1px solid rgba(92,119,88,.10);
}

.event-facts > div {
  box-shadow: 0 8px 20px rgba(81,103,76,.04);
}
.event-facts span {
  color: #8a9684;
}
.event-facts b {
  color: #5c735a;
  font-weight: 700;
}
.meta-blank {
  color: #7f8d79 !important;
  font-family: var(--serif);
  font-weight: 600;
}

.refined-auth {
  background: linear-gradient(180deg, rgba(255,254,248,.985), rgba(244,247,237,.985));
  box-shadow: 0 24px 72px rgba(70, 90, 66, .10);
}
.auth-passport-head b {
  color: #597356;
}
.refined-form .auth-heading h2 {
  color: #546f52;
}
.refined-form input,
.refined-form select {
  background: rgba(255,255,252,.95);
  border-color: rgba(89,116,85,.12);
}
.refined-form input::placeholder {
  color: #a0aa9d;
}

.primary-btn {
  background: linear-gradient(135deg, #5a7657, #789373);
  box-shadow: 0 12px 26px rgba(79, 112, 76, .17);
}
.secondary-btn {
  background: linear-gradient(180deg, #fffefb, #f6f7ef);
  border-color: rgba(88,116,84,.11);
}
.danger-btn {
  background: linear-gradient(135deg, #b56464, #a85757);
}

.refined-traveler {
  background:
    radial-gradient(circle at 80% 10%, rgba(243,229,176,.16), transparent 17rem),
    linear-gradient(135deg, #577553 0%, #73916f 58%, #98b28f 100%);
  box-shadow: 0 22px 56px rgba(61,91,59,.18);
}
.refined-traveler .traveler-name-row h2,
.backpack-profile h2,
.event-guide-date b {
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

.mission-line,
.collected-item,
.ranking-row,
.title-step,
.badge-card,
.profile-level,
.log-row,
.rule {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mission-line:hover,
.collected-item:hover,
.badge-card:hover,
.title-step:hover,
.rule:hover {
  transform: translateY(-1px);
}

.refined-trail,
.refined-next,
.refined-guide,
.refined-qr,
.refined-map-hero,
.refined-profile-card,
.event-guide-card,
.privacy-card,
.refined-log,
.title-ladder {
  box-shadow: 0 14px 34px rgba(77,101,73,.05);
}

.card-title-row h3,
.refined-map-hero h2,
.refined-guide h3,
.privacy-card h3 {
  color: #587055;
}

.refined-filters button.active,
.auth-tabs button.active,
.segment button.active,
.nav-btn.active,
.status-chip.on,
.points-badge,
.mission-badge {
  background: linear-gradient(180deg, #f5edcf, #eadfae) !important;
  color: #6d6a47 !important;
  border-color: rgba(204,182,113,.20) !important;
}

.bottom-nav {
  background: rgba(255,255,251,.92);
  border: 1px solid rgba(91,116,86,.10);
  box-shadow: 0 18px 40px rgba(63,82,59,.10);
}
.refined-nav button.active {
  background: rgba(255,251,239,.92);
}

.claim-modal {
  background: linear-gradient(180deg, #fffef9, #f4f7ec);
}
.claim-modal-icon {
  background: linear-gradient(180deg, #edf4e7, #e7f0de);
}

.projector-header,
.projector-footer {
  background: linear-gradient(135deg, #4c684d, #6c8968) !important;
}

.admin-header {
  background: rgba(250,251,245,.96) !important;
}

/* more readable type hierarchy */
.refined-copy p { max-width: 630px; }
.traveler-mini-stats strong { font-size: 19px; }
.traveler-mini-stats span { font-size: 8px; }
.card-title-row h3 { font-size: 22px; }
.refined-guide h3 { font-size: 25px; }
.refined-guide p { font-size: 13.5px; line-height: 1.72; }
.refined-qr .qr-copy h3 { font-size: 23px; }
.rank-points strong { font-size: 20px; }
.privacy-card h3 { font-size: 22px; }

@media (max-width: 650px) {
  .refined-copy h1 { font-size: 44px; }
  .event-facts b {
    font-size: 15px;
    line-height: 1.35;
  }
  .meta-blank {
    font-size: 15px !important;
  }
  .refined-guide h3 { font-size: 22px; }
  .refined-qr .qr-copy h3 { font-size: 21px; }
  .privacy-card h3 { font-size: 20px; }
}


/* =========================================================
   V7 EDITORIAL FINAL
   Premium magazine / field-journal polish
   ========================================================= */
:root{--lux-paper:#fbfaf4;--lux-forest:#506c52;--lux-forest-deep:#38513d;--lux-sage:#93a98e;--lux-gold:#c7ad6b;--lux-gold-soft:#eadfba;--lux-ink:#2d352d;--lux-muted:#778074;}
body{background:radial-gradient(circle at 12% -3%,rgba(231,216,168,.20),transparent 26rem),radial-gradient(circle at 94% 2%,rgba(159,190,151,.18),transparent 25rem),linear-gradient(180deg,#fafaf4 0%,#f1f5e9 52%,#f9f6ef 100%);}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 75%);}
.refined-hero,.refined-auth,.paper-card{border-color:rgba(82,108,79,.10);}
.refined-hero{position:relative;overflow:hidden;box-shadow:0 34px 90px rgba(66,87,63,.11);}
.refined-hero::after{content:"";position:absolute;inset:14px;border:1px solid rgba(197,173,107,.15);border-radius:26px;pointer-events:none;}
.hero-topline{position:relative;padding-top:18px;}
.editorial-folio{position:absolute;top:-2px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;color:#9ba392;font-size:7px;font-weight:800;letter-spacing:.18em;white-space:nowrap;}
.editorial-folio i{width:24px;height:1px;background:linear-gradient(90deg,transparent,#c6b37a,transparent);}
.refined-copy .eyebrow{color:#a59569;}
.refined-copy h1{font-size:clamp(48px,6vw,78px);line-height:1.01;letter-spacing:-.055em;color:#4c684f;}
.refined-copy p{font-size:17px;line-height:1.92;color:#687267;}
.editorial-quote{display:grid;grid-template-columns:26px 1fr;gap:8px;margin:18px 0 20px;padding:14px 16px;border-left:1px solid rgba(194,171,106,.55);background:linear-gradient(90deg,rgba(250,246,230,.65),transparent);}
.editorial-quote>span{font-family:Georgia,serif;font-size:38px;line-height:.9;color:#b69b58;}
.editorial-quote p{margin:0;font-family:var(--serif);font-size:15px;line-height:1.7;color:#63715f;}
.cover-label{position:absolute;left:18px;top:18px;z-index:6;padding:8px 10px;border-radius:999px;background:rgba(250,249,242,.84);border:1px solid rgba(191,170,107,.18);color:#8f8059;font-size:7px;font-weight:900;letter-spacing:.18em;backdrop-filter:blur(10px);}
.refined-forest-art img{box-shadow:0 30px 70px rgba(59,79,57,.14),0 0 0 1px rgba(255,255,255,.64);}
.field-card{border-color:rgba(196,173,108,.15);}.field-card span{color:#9c8b60;}.field-card b{color:#516d50;}
.hero-manifesto{border-color:rgba(191,169,105,.20);}.hero-manifesto span{color:#526d50;}.hero-manifesto small{color:#8f978a;}
.journey-principles article{box-shadow:0 8px 22px rgba(68,92,65,.04);}.journey-principles article>span{color:#b39858;}.journey-principles b{font-family:var(--serif);font-weight:600;font-size:13px;}.journey-principles small{font-size:10.5px;line-height:1.6;}
.event-facts>div{min-height:74px;display:flex;flex-direction:column;justify-content:center;}.event-facts span{color:#96885f;font-size:9px;}.event-facts b,.meta-blank{font-family:var(--serif);font-size:15px!important;font-weight:600;color:#506a50!important;}
.refined-auth{box-shadow:0 32px 80px rgba(69,90,65,.105);}.auth-passport-head{border-bottom:1px solid rgba(196,173,108,.13);}.auth-passport-head b{font-size:20px;}.auth-passport-head span{color:#9f8b55;}.refined-form .auth-heading h2{font-size:29px;}.refined-form .auth-heading p{font-size:14px;line-height:1.7;}.refined-form input,.refined-form select{border-color:rgba(83,111,80,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.primary-btn{background:linear-gradient(135deg,#4d684e,#6f8d6b);border:1px solid rgba(255,255,255,.12);}.secondary-btn{border-color:rgba(184,160,96,.14);}
.refined-topbar{border-bottom:1px solid rgba(188,166,106,.12);}.refined-topbar .edition{font-family:var(--serif);color:#788677;}
.enchanted-heading h1{font-size:clamp(38px,6vw,54px);color:#4c684f;}.enchanted-heading p{color:#707a6e;font-size:14px;}
.refined-traveler{background:radial-gradient(circle at 80% 8%,rgba(235,218,164,.15),transparent 16rem),linear-gradient(135deg,#526f52 0%,#6e8a69 54%,#96ad8c 100%);}.refined-traveler::after{border-color:rgba(245,229,185,.17);}.traveler-meta-line .micro-label,.refined-traveler .traveler-meta-line>span:last-child{color:rgba(255,246,218,.7);}.traveler-mini-stats{border:1px solid rgba(255,255,255,.09);}.traveler-mini-stats strong{font-family:var(--serif);font-size:21px;}
.refined-trail,.refined-next,.refined-guide,.refined-qr,.refined-map-hero,.refined-profile-card,.event-guide-card,.privacy-card,.refined-log,.title-ladder{box-shadow:0 18px 42px rgba(70,92,66,.055),inset 0 1px 0 rgba(255,255,255,.78);}
.milestone-chip{border-color:rgba(190,166,101,.16);background:linear-gradient(180deg,#f5f1e2,#edf2e8);}.milestone-chip span{color:#9b8a5c;}
.refined-guide .micro-label,.refined-qr .micro-label,.event-guide-card .micro-label,.privacy-card .micro-label,.badge-section .micro-label,.collected-section .micro-label{color:#a08d57;}
.refined-guide h3,.refined-qr .qr-copy h3,.privacy-card h3{font-size:25px;line-height:1.35;}
.badge-card.unlocked{border-color:rgba(194,170,103,.20);background:radial-gradient(circle at 85% 12%,rgba(240,225,174,.22),transparent 8rem),linear-gradient(180deg,#fffef8,#f5f6ec);}.badge-card.locked{opacity:.72;}.badge-index{color:#b49d60;}.title-step.active{border-color:rgba(194,170,103,.21);background:linear-gradient(180deg,#fbf7e8,#f2f5ea);}
.refined-map-hero{border-color:rgba(190,165,100,.14);}.map-art-wrap>span{color:#8e805a;}.refined-filters{backdrop-filter:blur(12px);}.refined-filters button.active{box-shadow:inset 0 0 0 1px rgba(189,164,100,.10);}
.ranking-row.top-1{background:linear-gradient(90deg,rgba(245,237,206,.76),rgba(255,254,248,.90));}.ranking-row.top-2{background:linear-gradient(90deg,rgba(231,236,224,.76),rgba(255,254,248,.90));}.ranking-row.top-3{background:linear-gradient(90deg,rgba(238,228,212,.70),rgba(255,254,248,.90));}.rank-no{color:#a48950;}
.event-guide-date{background:linear-gradient(180deg,#f8f3e3,#eef3e8);border-color:rgba(189,165,100,.14);}.event-guide-row{border-color:rgba(190,165,100,.10);}
.bottom-nav{border-color:rgba(190,165,100,.14);}.claim-modal{border-color:rgba(190,165,100,.16);box-shadow:0 36px 100px rgba(44,60,42,.22);}.claim-modal .micro-label{color:#9d8953;}
.admin-header{border-bottom:1px solid rgba(190,165,100,.12);}.admin-panel{box-shadow:0 16px 36px rgba(69,91,65,.06);}.admin-online{border-color:rgba(190,165,100,.14);background:#f7f3e5;color:#7a6d49;}
.projector-screen{background:radial-gradient(circle at 8% -5%,rgba(238,220,165,.18),transparent 24rem),linear-gradient(180deg,#eef3e7,#e7eee0);}.projector-header,.projector-footer{background:linear-gradient(135deg,#456046,#607b5d)!important;}.projector-main,.projector-side{border:1px solid rgba(190,165,100,.11);}
p,small,span,label,input,select,button{text-rendering:optimizeLegibility;}.refined-form label,.event-guide-row span,.event-guide-row b,.privacy-card p,.guide-points span,.rank-name span,.form-note{font-size:11.5px;}.mini-section-head small{font-size:10.5px;line-height:1.5;}
@media (max-width:650px){.editorial-folio{display:none;}.refined-copy h1{font-size:45px;}.refined-copy p{font-size:15.5px;}.editorial-quote{grid-template-columns:22px 1fr;padding:12px 13px;}.editorial-quote p{font-size:13.5px;}.cover-label{font-size:6.5px;left:12px;top:12px;}.event-facts>div{min-height:66px;}.event-facts b,.meta-blank{font-size:15px!important;}.refined-form .auth-heading h2{font-size:29px;}.enchanted-heading h1{font-size:36px;}.refined-guide h3,.refined-qr .qr-copy h3,.privacy-card h3{font-size:22px;}}


/* =========================================================
   V8 ANALYTICS + FEEDBACK
   ========================================================= */

/* User feedback */
.feedback-section { margin-top: 18px; }
.feedback-section .section-inline-head p {
  margin: 5px 0 0;
  color: #7d8679;
  font-size: 11.5px;
  line-height: 1.6;
}
.feedback-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:12px;
}
.feedback-card { padding:20px; }
.feedback-card h3 {
  margin:7px 0 3px;
  font-family:var(--serif);
  color:#536e52;
  font-size:21px;
  font-weight:600;
}
.feedback-card>p { margin:0 0 12px; color:#8a9286; font-size:11px; }
.feedback-card label {
  display:grid;
  gap:6px;
  margin-top:13px;
  color:#667261;
  font-size:11px;
  font-weight:700;
}
.feedback-card label>span { color:#9ba296; font-weight:500; }
.feedback-card textarea,
.feedback-card select {
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(84,111,80,.13);
  border-radius:14px;
  background:#fffefa;
  padding:12px 13px;
  color:#344034;
  resize:vertical;
  font:inherit;
}
.feedback-card .primary-btn { width:100%; margin-top:14px; }
.feedback-card>small { display:block; margin-top:9px; color:#9aa195; line-height:1.5; }
.star-picker {
  display:flex;
  gap:5px;
  margin:9px 0 3px;
}
.star-picker label { margin:0; cursor:pointer; }
.star-picker input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.star-picker span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:13px;
  border:1px solid rgba(191,167,101,.14);
  background:#fbfaf3;
  color:#d6cba7;
  font-size:22px;
  transition:.16s ease;
}
.star-picker input:checked + span,
.star-picker label:has(input:checked) ~ label span { }
.star-picker label:has(input:checked) span {
  background:linear-gradient(180deg,#f5e8b9,#eadb9f);
  color:#8b7840;
  box-shadow:0 7px 18px rgba(160,137,70,.12);
}
.star-picker label:hover span { transform:translateY(-1px); color:#aa914b; }
.feedback-history,
.feedback-empty {
  display:grid;
  gap:3px;
  margin-top:12px;
  padding:11px 12px;
  border-radius:13px;
  background:#f0f4e9;
  color:#72806d;
  font-size:10px;
}
.feedback-history b { color:#60755d; }

/* Admin analytics */
.analytics-shell { display:grid; gap:16px; }
.analytics-heading { margin-bottom:0; }
.analytics-stat-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.analytics-stat-grid article {
  min-height:116px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg,#fffef9,#f3f6eb);
  border:1px solid rgba(82,108,79,.11);
  box-shadow:0 14px 34px rgba(70,92,66,.055);
}
.analytics-stat-grid span {
  color:#9a8959;
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
}
.analytics-stat-grid strong {
  margin-top:5px;
  color:#4f6b50;
  font-family:var(--serif);
  font-size:31px;
  font-weight:600;
}
.analytics-stat-grid small {
  margin-top:5px;
  color:#879083;
  font-size:9px;
  line-height:1.45;
}
.analytics-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:14px;
}
.analytics-table td:first-child { min-width:250px; }
.analytics-table td:first-child b { display:block; color:#536b51; }
.analytics-table td:first-child small { display:block; margin-top:3px; color:#9ba196; font-size:8px; }
.satisfaction-panel { min-width:0; }
.rating-bars { display:grid; gap:12px; margin-top:15px; }
.rating-bar {
  display:grid;
  grid-template-columns:42px 1fr 34px;
  gap:10px;
  align-items:center;
}
.rating-bar>span { color:#7c704d; font-size:10px; font-weight:800; }
.rating-bar i {
  height:10px;
  overflow:hidden;
  border-radius:99px;
  background:#edf1e8;
}
.rating-bar i b {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#d6c181,#9fb090);
}
.rating-bar>strong { text-align:right; color:#667761; font-size:11px; }
.compact-analytics-table td,
.compact-analytics-table th { white-space:nowrap; }
.faculty-analytics-list { display:grid; gap:1px; margin-top:12px; }
.faculty-analytics-list>div {
  display:grid;
  grid-template-columns:1fr 74px 90px;
  gap:8px;
  align-items:center;
  padding:10px 3px;
  border-bottom:1px solid rgba(84,111,80,.08);
}
.faculty-analytics-list span { display:flex; align-items:center; gap:8px; color:#737d70; font-size:9px; }
.faculty-analytics-list span b {
  min-width:35px;
  color:#506b50;
  font-family:var(--serif);
  font-size:14px;
}
.faculty-analytics-list strong { color:#526d51; text-align:right; font-size:14px; }
.faculty-analytics-list strong small { margin-left:3px; color:#9aa295; font-size:7px; font-weight:500; }
.faculty-analytics-list em { color:#938052; text-align:right; font-size:9px; font-style:normal; }
.feedback-admin-list { display:grid; gap:9px; margin-top:12px; }
.feedback-admin-list article {
  display:grid;
  grid-template-columns:minmax(220px,.38fr) 1fr;
  gap:18px;
  padding:14px;
  border-radius:15px;
  background:#fafaf4;
  border:1px solid rgba(84,111,80,.08);
}
.feedback-admin-list article>div { display:grid; align-content:start; gap:3px; }
.feedback-admin-list article>div>span { color:#ae9149; letter-spacing:.08em; }
.feedback-admin-list article b { color:#567052; font-size:11px; }
.feedback-admin-list article small { color:#9aa195; font-size:8px; }
.feedback-admin-list article p {
  margin:0;
  color:#6c7769;
  font-size:11px;
  line-height:1.65;
}
.analytics-privacy-note {
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:13px;
  padding:11px 13px;
  border-radius:13px;
  background:#eef3e8;
}
.analytics-privacy-note b { color:#60755d; font-size:9px; white-space:nowrap; }
.analytics-privacy-note span { color:#879183; font-size:8px; line-height:1.5; }
.analytics-loading { padding:30px; text-align:center; color:#6c7d68; }

@media (max-width:900px) {
  .analytics-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .analytics-grid { grid-template-columns:1fr; }
}
@media (max-width:650px) {
  .feedback-grid { grid-template-columns:1fr; }
  .feedback-card { padding:16px; }
  .star-picker span { width:38px; height:38px; font-size:20px; }
  .analytics-stat-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .analytics-stat-grid article { min-height:100px; padding:14px; }
  .analytics-stat-grid strong { font-size:25px; }
  .feedback-admin-list article { grid-template-columns:1fr; gap:7px; }
  .analytics-heading { align-items:flex-start; }
  .faculty-analytics-list>div { grid-template-columns:1fr 60px 70px; }
}


/* =========================================================
   V10 ADMIN ANALYTICS VISIBILITY FIX
   ========================================================= */
.admin-tabs{
  flex-wrap:wrap !important;
  overflow-x:visible !important;
  row-gap:7px !important;
}
.admin-tabs button{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.admin-tabs button[data-admin-tab="analytics"]{
  border:1px solid rgba(185,160,92,.24);
  background:linear-gradient(180deg,#fbf5df,#f1e7bf);
  color:#655d3d;
  box-shadow:0 7px 18px rgba(156,132,67,.08);
}
.admin-tabs button[data-admin-tab="analytics"].active{
  background:linear-gradient(135deg,#506c52,#6f8b6a) !important;
  color:white !important;
  border-color:transparent;
}
.admin-tab-dot{
  font-size:8px;
  color:#aa9454;
}
.admin-tabs button.active .admin-tab-dot{color:#f1dfaa;}

@media(max-width:650px){
  .admin-tabs{
    position:sticky;
    top:64px;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:8px 10px !important;
  }
  .admin-tabs button{
    justify-content:center;
    min-height:42px;
    padding:8px 9px !important;
  }
  .admin-tabs button:last-child{
    grid-column:1/-1;
  }
}