/* Original meadow JPEG background + existing React Bits GlassSurface buttons. */
:root {
  --bg:#14172d; --card:rgba(20,25,47,.48); --surface:rgba(20,25,47,.5);
  --line:rgba(226,226,255,.19); --text:#faf8ff; --muted:#d2d4e8;
  --blue:#c7d5ff; --teal:#ddedca; --amber:#f3dda5;
}
html { min-height:100%; background:#14172d; }
body { min-height:100vh; min-height:100dvh; background:transparent; position:relative; }
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(12,13,35,.38),rgba(18,21,43,.24) 52%,rgba(9,15,24,.51)),url("assets/meadow-original.jpg") center center / cover no-repeat;
}
.shell { position:relative; }
.topbar { border-color:var(--line); }
.brand-icon { background:rgba(219,223,255,.12); border-color:#eeefff45; color:#f5edc6; backdrop-filter:blur(12px); }
.intro h1,.page-heading h1,.clock { text-shadow:0 2px 22px #06081985; }
.intro h1 span { color:#ece6fa; }
.intro p,.page-heading p,.pool-count,.phase-line,.timer-hint,.sound-bar,.local-note,.daily-quote>span,.daily-quote small { color:var(--muted); }
.pool-count strong,.daily-quote p { color:#fff9e8; }
.topic-card,.panel,.library-card,.reference,.complete-task,.empty,.daily-quote {
  background:linear-gradient(135deg,rgba(35,38,65,.58),rgba(16,24,43,.48));
  border:1px solid var(--line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 #ffffff0d,0 14px 40px #060a161a;
}
.topic-card { border-color:#e1d9ff4a; }
.topic-card.rolling { border-color:#f5e3ae9c; }
.card-number { color:#ebdba41c; }
.topic-card p,.reference-body,.library-card p,.draw-history li,.form-field,.setting-check { color:#e0e1ef; }
.timer-panel { background:rgba(13,21,38,.28); border:1px solid var(--line); border-radius:18px; padding:25px 12px 20px; }
.daily-quote { border-radius:16px; margin-bottom:20px; padding:28px 16px; }
.daily-quote p { text-shadow:0 1px 9px #11182d80; }
.local-note { padding-bottom:24px; margin-bottom:0; }
.mini-date,.calendar-legend,.draw-history small,.library-card-bottom,.reference summary span,.empty small { color:#c9cce0; }
.complete-task b { color:#e3efcf; }
.complete-task small,.reference-body small { color:#c5d3d3; }
.goal-progress { background:#e9e5ff24; }
.goal-progress i { background:linear-gradient(90deg,#c8d7ef,#e4e9ae); }
input,select,textarea { background:rgba(15,21,42,.64); border-color:#e3e0ff38; color:var(--text); }
input::placeholder,textarea::placeholder { color:#bfc1d6; }
select option { background:#22273e; color:#f5f4ff; }
.modal { background:rgba(8,12,29,.6); backdrop-filter:blur(9px); }
.modal-card { background:linear-gradient(145deg,rgba(37,40,68,.94),rgba(18,29,45,.95)); border-color:#e7dfff45; backdrop-filter:blur(24px); }
.glass-definitions { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
/* Backdrop alone is refracted: the native button label/focus/click target stays sharp. */
button.glass-surface,.file-button.glass-surface {
  --glass-tint:rgba(224,227,255,.07);
  position:relative; isolation:isolate; overflow:hidden; border-radius:14px;
  border:1px solid rgba(244,243,255,.26); color:#f9f7ff;
  background:linear-gradient(140deg,rgba(255,255,255,.13),rgba(255,255,255,.025) 48%,rgba(232,234,255,.07)),var(--glass-tint);
  -webkit-backdrop-filter:blur(12px) saturate(1.4) brightness(1.04);
  backdrop-filter:blur(12px) saturate(1.4) brightness(1.04);
  box-shadow:inset 0 1px 0 #ffffff5c,inset 0 -1px 0 #ffffff14,inset 1px 0 5px #ffffff14,0 4px 16px #090d241f,0 8px 24px #090d2414;
  text-shadow:0 1px 3px #080d2a60;
  transition:background .2s,border-color .2s,box-shadow .2s,opacity .2s;
}
button.glass-surface--svg,.file-button.glass-surface--svg {
  -webkit-backdrop-filter:var(--glass-filter,blur(12px)) saturate(1.25);
  backdrop-filter:var(--glass-filter,blur(12px)) saturate(1.25);
}
.glass-surface::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:linear-gradient(135deg,#ffffff12,transparent 42%,transparent 64%,#ffffff08);
}
button.glass-surface:hover:not(:disabled),.file-button.glass-surface:hover {
  filter:none; border-color:#f9f3ff80; background-color:#ffffff12;
  box-shadow:inset 0 1px 0 #ffffff7a,inset 0 0 12px #ffffff14,0 8px 26px #080d2926;
}
button.glass-surface:active:not(:disabled) { background-color:#ffffff1c; }
button.glass-surface:focus-visible,.file-button.glass-surface:focus-within { outline:2px solid #f6e7b4; outline-offset:4px; }
button.glass-surface:disabled { opacity:.42; cursor:default; }
button.glass-surface:is(.primary,.blue) { --glass-tint:rgba(140,172,249,.26); border-color:#d6e0ff80; color:#fff; }
button.glass-surface.amber { --glass-tint:rgba(234,198,123,.23); color:#fff5da; }
button.glass-surface:is(.active,.selected),button.glass-surface[aria-pressed=true] { --glass-tint:rgba(222,225,251,.21); border-color:#f4e6b79c; color:#fff7db; }
button.glass-surface.danger { color:#ffd0cc; }
button.glass-surface.link { padding:4px 10px; border-radius:10px; }
button.glass-surface.topic-link { padding:7px 12px; margin-left:-1px; max-width:100%; }
button.glass-surface.calendar-day { padding:5px 1px; border-radius:9px; --glass-tint:rgba(202,209,255,.025); }
button.glass-surface.calendar-day.selected { --glass-tint:rgba(207,216,255,.21); }
.calendar-day.is-today>span { color:#fff0bc; }
.emoji-picker button.glass-surface { min-width:46px; padding:7px 4px; }
.emoji-picker small { color:#d7d9e8; }
.collected-card.glass-surface { --glass-tint:rgba(45,62,84,.47); text-align:left; }
.collected-card.glass-surface p,.collected-card.glass-surface>small { color:#d5d9e8; }
.topbar nav { border-color:var(--line); }
.stage-steps { color:#bcc7dc; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  button.glass-surface,.file-button.glass-surface { background:rgba(44,48,74,.9); }
  .topic-card,.panel,.library-card,.reference,.complete-task,.daily-quote { background:rgba(22,29,49,.9); }
}
@media(max-width:460px) {
  body::before { background-position:center,58% center; }
  .timer-panel { padding:18px 8px 20px; }
  .topbar nav button.glass-surface { padding:9px 10px; }
  button.glass-surface.link { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { button.glass-surface,.file-button.glass-surface { transition:none; } }