:root {
  --ink: #173c2a;
  --muted: #6f8177;
  --paper: #f7f8f3;
  --card: #ffffff;
  --line: #e4e9e2;
  --green: #2f9d62;
  --cell: 12px;
  --gap: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.loading-screen,
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 18%, rgba(94, 178, 122, .14), transparent 30%),
    radial-gradient(circle at 84% 82%, rgba(218, 189, 118, .14), transparent 30%),
    #f5f7f1;
}
.loading-screen { align-content: center; gap: 14px; color: var(--muted); }
.loading-mark, .brand-mark, .wordmark-icon {
  display: grid;
  place-items: center;
  background: var(--green);
  color: white;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(47, 157, 98, .22);
}
.loading-mark { width: 52px; height: 52px; border-radius: 18px; font-size: 24px; }

.login-card {
  width: min(100%, 430px);
  padding: 44px;
  border: 1px solid rgba(25, 83, 52, .1);
  border-radius: 28px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 24px 70px rgba(38, 74, 54, .11);
  backdrop-filter: blur(14px);
}
.brand-mark { width: 48px; height: 48px; border-radius: 16px; margin-bottom: 14px; font-size: 22px; }
.brand-name { margin: 0 0 36px; font-size: 15px; font-weight: 750; letter-spacing: .12em; }
.login-card h1 { margin: 0; font-size: clamp(34px, 7vw, 44px); letter-spacing: -.045em; line-height: 1.12; }
.login-copy { margin: 13px 0 32px; color: var(--muted); line-height: 1.7; }
.login-card form { display: grid; gap: 10px; }
.login-card label { margin-top: 8px; color: #486052; font-size: 14px; font-weight: 650; }
.login-card input {
  width: 100%; height: 52px; padding: 0 16px;
  border: 1px solid #dce5dd; border-radius: 13px;
  outline: none; color: var(--ink); background: #fbfcfa;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.login-card input:focus { border-color: var(--green); background: white; box-shadow: 0 0 0 4px rgba(47, 157, 98, .1); }
.primary-button, .checkin-button {
  border: 0; border-radius: 13px; color: white; background: var(--green);
  font-weight: 750; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s;
}
.primary-button { height: 54px; margin-top: 16px; }
.primary-button:hover, .checkin-button:hover:not(:disabled) { transform: translateY(-1px); background: #278b56; box-shadow: 0 10px 24px rgba(47, 157, 98, .2); }
.primary-button:disabled, .checkin-button:disabled { cursor: default; opacity: .72; }
.form-error { margin: 4px 0 0; color: #b64242; font-size: 14px; }
.login-note { margin: 24px 0 0; color: #91a097; text-align: center; font-size: 12px; }

.dashboard-shell { min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  height: 72px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid rgba(28, 77, 49, .08);
  background: rgba(247, 248, 243, .86); backdrop-filter: blur(14px);
}
.wordmark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: .08em; }
.wordmark-icon { width: 30px; height: 30px; border-radius: 10px; font-size: 14px; box-shadow: none; }
.account-actions { display: flex; align-items: center; gap: 16px; }
.account-badge { display: inline-flex; align-items: center; gap: 7px; color: #50675a; font-size: 14px; }
.account-badge i { width: 8px; height: 8px; border-radius: 50%; background: #50b678; box-shadow: 0 0 0 4px #e1f2e7; }
.text-button { padding: 7px 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 14px; }
.text-button:hover { color: var(--ink); }
.dashboard-content { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 64px 0 28px; }

.hero-card {
  min-height: 440px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 52px;
  padding: 64px 72px; border-radius: 32px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, #174e33 0%, #216b45 58%, #2d8055 100%); color: white;
  box-shadow: 0 24px 60px rgba(26, 79, 50, .16);
}
.hero-card::after {
  content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -130px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,255,255,.025), 0 0 0 96px rgba(255,255,255,.018);
}
.hero-copy, .checkin-panel { position: relative; z-index: 1; }
.today-label { margin: 0 0 25px; color: #b9dac6; font-size: 14px; letter-spacing: .08em; }
.hero-copy h1 { margin: 0; font-size: clamp(43px, 5vw, 66px); line-height: 1.08; letter-spacing: -.055em; }
.hero-copy > p:last-child { max-width: 430px; margin: 27px 0 0; color: #cfe4d7; font-size: 16px; line-height: 1.8; }
.checkin-panel { display: grid; justify-items: center; padding: 36px; border: 1px solid rgba(255,255,255,.13); border-radius: 26px; background: rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.today-orb {
  width: 138px; height: 138px; display: grid; place-content: center; text-align: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(10, 51, 31, .24);
  box-shadow: inset 0 0 0 9px rgba(255,255,255,.035);
}
.today-orb span { font-size: 47px; line-height: 1; font-weight: 800; letter-spacing: -.06em; }
.today-orb small { margin-top: 10px; color: #c6e0d0; font-size: 13px; }
.today-orb.completed { background: #f3c969; color: #18472f; border-color: #f3d991; box-shadow: 0 16px 40px rgba(11, 41, 25, .18); }
.today-orb.completed small { color: #46654f; }
.checkin-button { width: 100%; height: 52px; margin-top: 28px; background: #f7d37f; color: #18472f; }
.checkin-button:hover:not(:disabled) { background: #ffe09a; }
.checkin-button:disabled { background: rgba(255,255,255,.16); color: #d5e8dc; }
.status-message { min-height: 20px; margin: 13px 0 0; color: #c9dfd1; text-align: center; font-size: 12px; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 22px 0; }
.stats-grid article { padding: 28px 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.stats-grid article > span { color: var(--muted); font-size: 13px; }
.stats-grid strong { display: block; margin: 12px 0 7px; color: var(--ink); font-size: 36px; line-height: 1; letter-spacing: -.05em; }
.stats-grid strong small { font-size: 15px; letter-spacing: 0; }
.stats-grid p { margin: 0; color: #93a098; font-size: 12px; }

.activity-card { padding: 36px 38px 40px; border: 1px solid var(--line); border-radius: 26px; background: var(--card); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 30px; }
.eyebrow { margin: 0 0 7px; color: var(--green); font-size: 12px; font-weight: 750; letter-spacing: .13em; }
.section-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.legend { display: flex; align-items: center; gap: 7px; color: #87958c; font-size: 11px; }
.graph-scroll { overflow-x: auto; padding: 2px 0 8px; scrollbar-width: thin; scrollbar-color: #d3ded6 transparent; }
.graph-layout { min-width: 884px; display: flex; gap: 12px; }
.weekday-labels { display: grid; grid-template-rows: repeat(7, var(--cell)); gap: var(--gap); padding-top: 27px; color: #94a299; font-size: 9px; line-height: var(--cell); }
.graph-content { flex: 1; }
.month-labels { height: 27px; display: grid; grid-template-columns: repeat(53, var(--cell)); column-gap: var(--gap); color: #89978e; font-size: 10px; }
.month-labels span { white-space: nowrap; }
.contribution-grid { display: grid; grid-template-rows: repeat(7, var(--cell)); grid-auto-flow: column; grid-auto-columns: var(--cell); gap: var(--gap); }
.day-cell { width: var(--cell); height: var(--cell); display: inline-block; border-radius: 3px; background: #edf0ec; box-shadow: inset 0 0 0 1px rgba(31, 67, 46, .035); }
.day-cell.checked { background: #43aa6f; box-shadow: inset 0 0 0 1px rgba(10, 83, 43, .08); }
.day-cell.future { opacity: .32; }
footer { padding: 30px 0 2px; color: #9aa69f; text-align: center; font-size: 12px; }

.logout-form { margin: 0; }
.checkin-form { width: 100%; }
.message-stack { position: fixed; z-index: 30; top: 84px; left: 50%; transform: translateX(-50%); width: min(92vw, 560px); }
.message { margin: 0; padding: 13px 18px; border: 1px solid #bfe2cb; border-radius: 14px; color: #1f6f43; background: rgba(239, 250, 243, .97); box-shadow: 0 12px 32px rgba(31, 91, 57, .12); text-align: center; font-size: 14px; }
.message.info { border-color: #dce4dd; color: #5c7063; background: rgba(250, 251, 248, .97); }

@media (max-width: 820px) {
  .dashboard-content { width: min(100% - 32px, 680px); padding-top: 32px; }
  .hero-card { grid-template-columns: 1fr; gap: 36px; padding: 44px; }
  .checkin-panel { grid-template-columns: auto 1fr; justify-items: stretch; align-items: center; gap: 20px; }
  .today-orb { width: 112px; height: 112px; grid-row: span 2; }
  .checkin-button { margin-top: 0; }
  .status-message { margin: 0; text-align: left; }
  .stats-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --cell: 11px; --gap: 3px; }
  .topbar { height: 64px; padding: 0 18px; }
  .account-badge { display: none; }
  .dashboard-content { width: min(100% - 24px, 500px); padding-top: 18px; }
  .hero-card { min-height: 0; padding: 34px 26px; border-radius: 25px; }
  .hero-copy h1 { font-size: 42px; }
  .hero-copy > p:last-child { margin-top: 20px; font-size: 14px; }
  .checkin-panel { grid-template-columns: 1fr; padding: 25px; }
  .today-orb { grid-row: auto; width: 108px; height: 108px; }
  .status-message { text-align: center; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stats-grid article { padding: 18px 14px; border-radius: 18px; }
  .stats-grid strong { font-size: 27px; }
  .stats-grid p { display: none; }
  .activity-card { padding: 26px 20px 30px; border-radius: 22px; }
  .section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 24px; }
  .login-card { padding: 34px 26px; border-radius: 24px; }
}

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