:root {
  color-scheme: dark;
  --bg: #0d1413;
  --panel: rgba(25, 35, 33, 0.86);
  --panel-strong: #1a2523;
  --text: #f3f5ef;
  --muted: #99a6a0;
  --line: rgba(255, 255, 255, 0.075);
  --accent: #efb37c;
  --accent-deep: #d98a52;
  --green: #88b69f;
  --danger: #ef8f83;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 100% 0%, rgba(80, 129, 105, 0.13), transparent 33%),
    linear-gradient(180deg, #101918 0%, var(--bg) 65%);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }

.ambient {
  position: fixed;
  z-index: 0;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  filter: blur(90px);
  opacity: 0.13;
  pointer-events: none;
}
.ambient-one { top: 10%; right: -120px; background: var(--accent); }
.ambient-two { bottom: 10%; left: -140px; background: var(--green); }

.app-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  margin: 0 auto;
  padding: calc(22px + env(safe-area-inset-top)) 18px calc(112px + env(safe-area-inset-bottom));
}

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 7vw, 35px); font-weight: 500; letter-spacing: -0.035em; }
.avatar {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border: 1px solid rgba(239, 179, 124, 0.32);
  border-radius: 15px;
  color: var(--accent);
  background: rgba(239, 179, 124, 0.08);
  font-family: Georgia, serif;
  font-size: 22px;
}

.focus-card {
  overflow: hidden;
  position: relative;
  padding: 22px;
  border: 1px solid rgba(239, 179, 124, 0.18);
  border-radius: 25px;
  background:
    linear-gradient(145deg, rgba(239, 179, 124, 0.09), transparent 48%),
    var(--panel-strong);
  box-shadow: var(--shadow);
}
.focus-card::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  top: -90px;
  right: -60px;
  border: 1px solid rgba(239, 179, 124, 0.16);
  border-radius: 50%;
}
.focus-meta { display: flex; align-items: center; justify-content: space-between; }
.pill { display: inline-flex; align-items: center; gap: 8px; color: #dce6df; font-size: 12px; font-weight: 700; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(239,179,124,.09); }
.focus-time { color: var(--muted); font-size: 12px; }
.focus-card h2 { max-width: 90%; margin: 22px 0 9px; font-size: 24px; line-height: 1.12; letter-spacing: -0.03em; }
.focus-card > p { margin: 0; color: #bbc5c0; font-size: 14px; line-height: 1.5; }
.primary-button {
  width: 100%;
  margin: 20px 0 13px;
  padding: 14px 18px;
  border: 0;
  border-radius: 15px;
  color: #24170f;
  background: linear-gradient(135deg, #f4c79f, var(--accent));
  box-shadow: 0 10px 30px rgba(217, 138, 82, 0.15);
  font-weight: 800;
  cursor: pointer;
}
.primary-button:active, button:active { transform: scale(0.985); }
.why { padding-left: 12px; border-left: 2px solid rgba(239,179,124,.34); color: var(--muted) !important; font-size: 12px !important; }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 28px; }
.quick-card {
  display: flex;
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
}
.quick-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 12px; font-size: 17px; font-weight: 800; }
.study-icon { color: #c3d7cb; background: rgba(136,182,159,.12); }
.gym-icon { color: #f1c49b; background: rgba(239,179,124,.12); }
.quick-card b { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.quick-card i { color: var(--accent); font-style: normal; }
.quick-card small { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 12px; }
.section-heading h3 { margin: 0; font-size: 15px; }
.section-heading span { color: var(--muted); font-size: 11px; }
.plan-list, .subject-stack { display: grid; gap: 9px; }
.plan-item, .info-card, .subject-card, .metric-card, .quote-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}
.plan-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px; }
.plan-number { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: var(--accent); background: rgba(239,179,124,.09); font-size: 12px; font-weight: 800; }
.plan-item h4 { margin: 1px 0 5px; font-size: 14px; }
.plan-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.plan-item footer { display: flex; gap: 8px; margin-top: 9px; color: #c7d0cc; font-size: 10px; }

.view { display: none; animation: reveal .22s ease; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.wide { display: flex; align-items: center; justify-content: space-between; padding: 18px; }
.muted { margin: 0 0 6px; color: var(--muted); font-size: 11px; }
.wide h3 { margin: 0; }
.compact-button, .error-card button {
  padding: 9px 13px;
  border: 1px solid rgba(239,179,124,.25);
  border-radius: 11px;
  color: var(--accent);
  background: rgba(239,179,124,.08);
  font-size: 11px;
  font-weight: 700;
}
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.metric-card { padding: 18px; }
.metric-card small, .metric-card span { display: block; color: var(--muted); font-size: 10px; }
.metric-card strong { display: inline-block; margin: 8px 4px 2px 0; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.metric-card.accent strong { color: var(--accent); }
.notice { margin: 11px 2px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.subject-card { padding: 15px; color: var(--text); text-align: left; }
.subject-card b { display: block; font-size: 13px; }
.subject-card > span { display: block; height: 4px; margin: 10px 0 7px; border-radius: 9px; background: rgba(255,255,255,.06); }
.subject-card i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--accent)); }
.subject-card small { color: var(--muted); font-size: 10px; }
.quote-card { margin-top: 9px; padding: 20px; color: #dce3df; font-family: Georgia, serif; font-size: 18px; line-height: 1.4; }
.quote-card p { margin: 0; }

.error-card { margin-top: 18px; padding: 18px; border: 1px solid rgba(239,143,131,.2); border-radius: 18px; background: rgba(239,143,131,.07); }
.error-card p { color: var(--muted); font-size: 12px; }
.bottom-nav {
  position: fixed;
  z-index: 5;
  right: max(10px, calc((100vw - 600px) / 2));
  bottom: calc(9px + env(safe-area-inset-bottom));
  left: max(10px, calc((100vw - 600px) / 2));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(19, 28, 27, 0.93);
  box-shadow: 0 16px 50px rgba(0,0,0,.38);
  backdrop-filter: blur(18px);
}
.bottom-nav button { padding: 8px 3px 6px; border: 0; border-radius: 14px; color: #74807b; background: transparent; font-size: 9px; font-weight: 700; }
.bottom-nav button span { display: block; margin-bottom: 3px; font-size: 17px; font-weight: 400; }
.bottom-nav button.active { color: var(--accent); background: rgba(239,179,124,.08); }

@media (prefers-color-scheme: light) {
  :root { color-scheme: light; --bg: #f2f3ed; --panel: rgba(255,255,252,.82); --panel-strong: #fffdf7; --text: #14201d; --muted: #6f7d77; --line: rgba(20,32,29,.09); --shadow: 0 24px 70px rgba(33,50,45,.09); }
  body { background: radial-gradient(circle at 100% 0%, rgba(136,182,159,.17), transparent 35%), var(--bg); }
  .focus-card > p { color: #596a63; }
  .bottom-nav { background: rgba(255,255,252,.91); }
}

@media (max-width: 350px) {
  .quick-grid { grid-template-columns: 1fr; }
  .app-shell { padding-right: 13px; padding-left: 13px; }
}