/* White + cranberry theme. Optics are progressive; readable content stays solid. */
:root {
  --bg: #f7f7f8;
  --card: #fff;
  --surface: #fff;
  --hover: #fcf8f9;
  --accent: #c83244;
  --accent-deep: #a72335;
  --accent-weak: rgba(200, 50, 68, .09);
  --danger: #bd283b;
  --danger-weak: rgba(189, 40, 59, .08);
  --glass: rgba(255, 255, 255, .40);
  --glass-rim: rgba(255, 255, 255, .92);
  --glass-inner: rgba(255, 255, 255, .65);
  --glass-shade: rgba(98, 30, 43, .11);
  --sh-glass: 0 2px 5px rgba(72, 22, 32, .06), 0 14px 42px rgba(72, 22, 32, .12);
  --sh-cta: 0 3px 7px rgba(150, 25, 45, .10), 0 10px 24px rgba(150, 25, 45, .15);
}
body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 5% 4%, rgba(218, 78, 96, .065), transparent 42%), radial-gradient(ellipse at 88% 100%, rgba(218, 78, 96, .09), transparent 42%);
  background-attachment: fixed;
}
.home-due strong { color: var(--accent); }
.home-focus { background: linear-gradient(155deg, #fff 62%, #fff5f6); }
.home-start { box-shadow: var(--sh-cta); }
.home-date { color: var(--text-2); }
.home-exam-days strong { color: var(--accent-deep); }
.login-mark { background: var(--accent-weak); }
.account-link { border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .7); box-shadow: 0 1px 3px rgba(72,22,32,.04), 0 5px 16px rgba(72,22,32,.04); }
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .account-link { backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
}
/* Separate optics from labels: distortion affects the backdrop, never the text. */
#tabbar.glass-shell {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-inner), inset 0 -1px 0 var(--glass-shade), var(--sh-glass);
  overflow: hidden;
  --shine-x: 25%;
  --shine-y: 0%;
}
.glass-optics {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: rgba(255, 255, 255, .85);
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .glass-optics {
    background: linear-gradient(155deg, rgba(255,255,255,.52), rgba(255,255,255,.22) 52%, rgba(255,250,251,.38));
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
  }
}
#tabbar.glass-shell::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at var(--shine-x) var(--shine-y), rgba(255,255,255,.72), transparent 60%);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.9), inset -1px -1px 1px rgba(255,255,255,.50), inset 0 -4px 9px rgba(142,61,77,.035);
}
#tabbar.glass-shell button, #tabbar.glass-shell .brand { position: relative; z-index: 3; }
#tabbar.glass-shell button.active { background: transparent; color: var(--accent-deep); }
#tabbar.glass-shell button:not(.active):hover { background: rgba(255,255,255,.4); }
.glass-selection {
  position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none;
  border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(242,186,195,.37));
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px rgba(164,39,58,.09), 0 2px 4px rgba(82,28,39,.06), 0 5px 12px rgba(82,28,39,.045);
}
.glass-selection[hidden] { display: none; }
#tabbar.glass-ready .glass-selection { transition: transform .36s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1), height .28s cubic-bezier(.2,.8,.2,1); }
#tabbar.glass-pressed .glass-selection { background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(242,186,195,.52)); }
@media (min-width: 900px) {
  #tabbar.glass-shell { left: 12px; top: 16px; bottom: 16px; width: 184px; padding: 14px 8px; border-radius: var(--r-hero); }
  #tabbar.glass-shell .brand { display: flex; align-items: center; gap: 8px; font-size: 15px; padding: 12px 8px 24px; margin-bottom: 10px; border-bottom: 1px solid var(--hairline); }
  #tabbar.glass-shell .brand::before { content: '6'; display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--accent); color: #fff; font-size: 19px; font-weight: 650; }
  #tabbar.glass-shell button { padding: 12px; gap: 10px; }
  .glass-selection { border-radius: var(--r-thumb); }
}
@media (prefers-reduced-motion: reduce) {
  #tabbar.glass-ready .glass-selection { transition: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body { background-image: none; }
  #tabbar.glass-shell { background: var(--surface); border-color: var(--faint); }
  .glass-optics { background: var(--surface); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #tabbar.glass-shell::after { display: none; }
  .glass-selection { background: var(--accent-weak); box-shadow: none; border-color: var(--accent); }
  .account-link { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}