@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&family=Rajdhani:wght@500;600;700&family=Vazirmatn:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  --bg: #02050c;
  --surface: rgba(5, 14, 29, .9);
  --surface-2: rgba(9, 24, 46, .84);
  --surface-3: #0b1a2e;
  --border: rgba(102, 205, 255, .18);
  --border-strong: rgba(104, 221, 255, .48);
  --text: #edfaff;
  --text-2: #c3dce8;
  --muted: #9fbac8;
  --cyan: #68dcff;
  --cyan-hot: #b5f2ff;
  --violet: #7b72ff;
  --green: #52e5ad;
  --red: #ff6682;
  --amber: #f3c86a;
  --radius: 5px;
  --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: Rajdhani, Inter, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --glow: 0 0 24px rgba(55, 169, 255, .12), inset 0 0 30px rgba(40, 145, 255, .035);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body {
  min-height: 100%; margin: 0; color: var(--text); font-family: var(--font);
  background:
    radial-gradient(circle at 50% 10%, rgba(53, 126, 255, .13), transparent 32%),
    linear-gradient(rgba(2, 5, 12, .9), rgba(2, 5, 12, .97)),
    url("./assets/system-backdrop.png") center top / cover fixed,
    var(--bg);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22;
  background-image:
    linear-gradient(rgba(87, 198, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 198, 255, .035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 50% 35%, black, transparent 82%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .12;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(95, 210, 255, .08) 5px);
}
button,input,select,textarea { font: inherit; }
button { border: 0; }
[hidden] { display: none !important; }
a { color: inherit; }
::selection { color: #02101a; background: var(--cyan); }

/* Authentication — cinematic, but still a normal usable form */
.auth-screen { position: relative; display: grid; min-height: 100vh; place-items: center; overflow: hidden; padding: 24px; }
.auth-backdrop { position: absolute; inset: 0; background: url("./assets/system-backdrop.png") center / cover; opacity: .48; filter: saturate(.8) hue-rotate(8deg); }
.auth-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(67, 190, 255, .13), transparent 28%), linear-gradient(90deg, rgba(2,5,12,.94), rgba(2,5,12,.48), rgba(2,5,12,.94)), linear-gradient(0deg, var(--bg), transparent 52%, rgba(2,5,12,.82)); }
.auth-window { position: relative; width: min(470px,100%); padding: 34px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: linear-gradient(145deg, rgba(9,27,53,.93), rgba(3,10,24,.95)); box-shadow: 0 0 0 1px rgba(92,205,255,.07), 0 0 55px rgba(42,162,255,.18), 0 30px 90px rgba(0,0,0,.68), inset 0 0 50px rgba(57,157,255,.06); backdrop-filter: blur(19px); clip-path: polygon(0 14px,14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px)); }
.auth-window::before,.auth-window::after { content: ""; position: absolute; width: 56px; height: 56px; pointer-events: none; }
.auth-window::before { top: 8px; left: 8px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.auth-window::after { right: 8px; bottom: 8px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); }
.auth-logo,.brand-icon { display: grid; place-items: center; color: var(--cyan-hot); border: 1px solid var(--border-strong); background: linear-gradient(145deg,rgba(83,195,255,.14),rgba(102,88,255,.13)); box-shadow: 0 0 22px rgba(74,190,255,.25), inset 0 0 18px rgba(74,190,255,.08); font-family: var(--mono); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.auth-logo { width: 58px; height: 58px; margin: 0 auto 22px; font-size: 1rem; }
.auth-heading { text-align: center; }
.auth-heading h1 { margin: 5px 0 7px; font: 700 2.25rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 22px rgba(104,220,255,.35); }
.auth-heading p { margin: 0 auto 25px; max-width: 340px; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.eyebrow { color: var(--cyan); font: 500 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.access-form,.settings-form { display: grid; gap: 16px; }
.auth-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px; border: 1px solid var(--border); background: rgba(1,7,17,.6); }
.mode-tab { min-height: 39px; color: var(--muted); background: transparent; cursor: pointer; font-size: .82rem; font-weight: 500; }
.mode-tab.active { color: #03101a; background: linear-gradient(90deg,var(--cyan),var(--cyan-hot)); box-shadow: 0 0 18px rgba(78,198,255,.22); }
.access-form label,.settings-form label { display: grid; gap: 7px; }
.access-form label>span,.settings-form label>span,.proof-field>span { color: var(--text-2); font-size: .77rem; font-weight: 500; }
input,select,textarea { width: 100%; border: 1px solid var(--border); border-radius: 3px; color: var(--text); background: rgba(1,7,18,.72); outline: none; transition: border-color .15s,box-shadow .15s,background .15s; }
input,select { min-height: 43px; padding: 0 12px; }
textarea { padding: 11px 12px; resize: vertical; line-height: 1.5; }
input:focus,select:focus,textarea:focus { border-color: var(--cyan); background: rgba(3,13,29,.9); box-shadow: 0 0 0 3px rgba(90,211,255,.1), inset 0 0 18px rgba(65,182,255,.04); }
.form-note,.auth-message { margin: 0; font-size: .77rem; line-height: 1.5; }
.form-note { color: var(--muted); }.auth-message { min-height: 18px; color: var(--green); }.auth-message.error { color: var(--red); }

/* Controls */
.button,.icon-text-button,.quiet-button,.danger-button,.close-button { cursor: pointer; transition: background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s; }
.button { min-height: 40px; padding: 0 16px; border-radius: 3px; font-size: .81rem; font-weight: 600; }
.primary-button { color: #02111b; background: linear-gradient(90deg,var(--cyan),#9eeaff); box-shadow: 0 0 21px rgba(73,190,255,.2); clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.primary-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 29px rgba(73,190,255,.4); }
.secondary-button { border: 1px solid var(--border-strong); color: var(--cyan-hot); background: rgba(62,166,255,.07); }
.secondary-button:hover { border-color: var(--cyan); background: rgba(62,166,255,.13); box-shadow: 0 0 18px rgba(59,174,255,.12); }
.button:disabled { cursor: not-allowed; color: #526775; border-color: var(--border); background: rgba(80,105,120,.09); box-shadow: none; transform: none; }
.full-button,.auth-submit { width: 100%; }
.icon-text-button,.quiet-button { min-height: 35px; padding: 0 11px; color: var(--text-2); background: transparent; font-size: .79rem; }
.icon-text-button { border: 1px solid var(--border); border-radius: 3px; background: rgba(72,175,255,.045); }
.icon-text-button:hover,.quiet-button:hover { color: var(--cyan-hot); border-color: var(--border-strong); background: rgba(72,175,255,.09); }
:where(button,a,input,textarea,select,summary):focus-visible { outline:2px solid var(--cyan-hot); outline-offset:3px; box-shadow:0 0 0 5px rgba(104,220,255,.12); }

/* App shell */
.topbar { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 68px; padding: 0 max(24px,calc((100vw - 1200px)/2)); border-bottom: 1px solid var(--border); background: rgba(2,7,16,.88); box-shadow: 0 10px 35px rgba(0,0,0,.3), inset 0 -1px rgba(92,204,255,.05); backdrop-filter: blur(18px); }
.brand { display: inline-flex; width: max-content; align-items: center; gap: 11px; color: var(--text); text-decoration: none; font: 700 1rem var(--display); letter-spacing: .08em; text-transform: uppercase; }
.brand-icon { width: 34px; height: 34px; font: 500 .66rem var(--mono); }
.main-nav { display: flex; align-self: stretch; }
.main-nav a { position: relative; display: grid; place-items: center; padding: 0 17px; color: var(--muted); text-decoration: none; font-size: .78rem; font-weight: 500; }
.main-nav a::after { content: ""; position: absolute; right: 14px; bottom: 0; left: 14px; height: 2px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); opacity: 0; }
.main-nav a:hover,.main-nav a.active { color: var(--cyan-hot); }.main-nav a.active::after { opacity: 1; }
.account-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.status-badge,.plan-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border: 1px solid var(--border); border-radius: 2px; color: var(--muted); background: rgba(61,165,255,.045); font: 500 .65rem var(--mono); text-transform: uppercase; }
.status-badge::before { content: ""; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px currentColor; }
.status-badge.complete { border-color: rgba(82,229,173,.3); color: var(--green); background: rgba(82,229,173,.06); }
.status-badge.complete::before { background: var(--green); }.status-badge.disabled { color: var(--red); }.plan-badge { color: #c6c2ff; border-color: rgba(123,114,255,.34); background: rgba(123,114,255,.09); }

.dashboard { width: min(1200px,calc(100% - 40px)); margin: 0 auto; padding: 42px 0 64px; }
.view-page { min-height: calc(100vh - 146px); }
.view-page.panel { min-height: auto; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 26px; }
.page-heading h1 { margin: 6px 0 5px; font: 700 clamp(2rem,4vw,2.8rem)/1 var(--display); letter-spacing: .015em; text-transform: uppercase; text-shadow: 0 0 22px rgba(88,202,255,.22); }
.page-heading p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.reset-compact { position: relative; min-width: 164px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: linear-gradient(135deg,rgba(27,78,130,.16),rgba(3,12,27,.74)); box-shadow: var(--glow); }
.reset-compact::before { content: ""; position: absolute; top: -1px; left: 18px; width: 36px; height: 2px; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.reset-compact span,.reset-compact strong { display: block; }.reset-compact span { color: var(--muted); font: 500 .62rem var(--mono); text-transform: uppercase; }.reset-compact strong { margin-top: 5px; color: var(--cyan-hot); font: 500 1.02rem var(--mono); text-shadow: 0 0 10px rgba(100,220,255,.4); }

.summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; margin-bottom: 18px; }
.summary-card { position: relative; overflow: hidden; padding: 16px 17px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg,rgba(12,34,63,.72),rgba(3,11,25,.82)); box-shadow: var(--glow); }
.summary-card::before { content: ""; position: absolute; top: 0; left: 0; width: 34%; height: 1px; background: linear-gradient(90deg,var(--cyan),transparent); box-shadow: 0 0 8px var(--cyan); }
.summary-card::after { content: ""; position: absolute; right: -22px; bottom: -28px; width: 72px; height: 72px; border: 1px solid rgba(95,204,255,.08); transform: rotate(45deg); }
.summary-card>span,.summary-card>small,.summary-card>strong { position: relative; z-index: 1; display: block; }.summary-card>span { color: var(--muted); font: 500 .64rem var(--mono); text-transform: uppercase; }.summary-card>strong { margin: 9px 0 3px; color: var(--cyan-hot); font: 600 1.65rem var(--display); letter-spacing: .01em; }.summary-card>strong b { font: inherit; }.summary-card>small { color: #8ba8b7; font-size: .7rem; }

.content-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 18px; align-items: start; }
.panel { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg,rgba(8,24,46,.88),rgba(3,11,25,.92)); box-shadow: 0 20px 55px rgba(0,0,0,.33),var(--glow); backdrop-filter: blur(13px); }
.panel::before,.panel::after { content: ""; position: absolute; width: 34px; height: 34px; pointer-events: none; }
.panel::before { top: -1px; left: -1px; border-top: 2px solid rgba(104,220,255,.62); border-left: 2px solid rgba(104,220,255,.62); }
.panel::after { right: -1px; bottom: -1px; border-right: 2px solid rgba(104,220,255,.45); border-bottom: 2px solid rgba(104,220,255,.45); }
.workout-panel { padding: 25px; border-color: rgba(104,220,255,.28); }
.panel-header { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.panel-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.panel-header h2 { margin: 6px 0 0; font: 700 1.42rem/1.15 var(--display); letter-spacing: .025em; text-transform: uppercase; }
.workout-brief { margin: 9px 0 20px; color: var(--muted); font-size: .87rem; line-height: 1.55; }
.progress-overview { margin-bottom: 17px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 3px; background: linear-gradient(90deg,rgba(76,174,255,.09),rgba(2,9,22,.6)); }
.progress-copy { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }.progress-copy strong { color: var(--cyan-hot); font: 600 1.2rem var(--mono); text-shadow: 0 0 10px rgba(105,221,255,.3); }.progress-copy span { color: var(--muted); font-size: .75rem; }
.overall-track,.goal-progress-track { overflow: hidden; background: rgba(102,213,255,.09); }.overall-track { height: 5px; margin-top: 10px; }.overall-track i,.goal-progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--violet),var(--cyan),var(--green)); box-shadow: 0 0 9px rgba(104,220,255,.4); transition: width .25s; }
.completion-receipt { position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:14px 18px; align-items:center; overflow:hidden; margin:0 0 17px; padding:18px; border:1px solid rgba(82,229,173,.38); background:radial-gradient(circle at 8% 50%,rgba(82,229,173,.16),transparent 28%),linear-gradient(120deg,rgba(16,69,74,.42),rgba(3,13,29,.94) 62%,rgba(106,91,255,.1)); box-shadow:inset 0 0 34px rgba(82,229,173,.055),0 0 28px rgba(82,229,173,.08); clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); }
.completion-receipt::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 32%,rgba(144,255,227,.07) 48%,transparent 62%); transform:translateX(-100%); animation:clearanceSweep 3.8s ease-in-out infinite; }
.completion-sigil { position:relative; display:grid; width:62px; height:62px; place-items:center; border:1px solid rgba(82,229,173,.55); color:#baffea; background:rgba(82,229,173,.08); box-shadow:0 0 25px rgba(82,229,173,.22),inset 0 0 16px rgba(82,229,173,.08); transform:rotate(45deg); }
.completion-sigil::before { content:""; position:absolute; inset:-7px; border:1px solid rgba(104,220,255,.2); animation:sigilPulse 2.4s ease-in-out infinite; }
.completion-sigil span { font:700 1.5rem var(--display); transform:rotate(-45deg); }
.completion-copy { min-width:0; }.completion-copy h3 { margin:4px 0 3px; color:#dffef5; font:700 1.13rem var(--display); }.completion-copy p { margin:0; max-width:52ch; color:#a9c9c4; font-size:.76rem; line-height:1.5; }
.completion-reward-grid { display:grid; grid-template-columns:repeat(2,minmax(94px,1fr)); gap:8px; margin:0; }.completion-reward-grid div { padding:9px 11px; border:1px solid rgba(104,220,255,.16); background:rgba(3,13,28,.5); }.completion-reward-grid dt { color:var(--muted); font-size:.64rem; }.completion-reward-grid dd { margin:4px 0 0; color:var(--green); font:600 .79rem var(--mono); white-space:nowrap; }.completion-reward-grid dd bdi { unicode-bidi:isolate; }
.receipt-link { position:relative; z-index:1; display:inline-flex; grid-column:2/-1; width:max-content; min-height:36px; align-items:center; color:var(--cyan-hot); font-size:.74rem; text-underline-offset:4px; }
.is-complete .progress-overview { border-color:rgba(82,229,173,.25); background:linear-gradient(90deg,rgba(82,229,173,.1),rgba(2,9,22,.6)); }
@keyframes clearanceSweep { 0%,55%{transform:translateX(-110%)} 85%,100%{transform:translateX(110%)} }
@keyframes sigilPulse { 0%,100%{opacity:.35;transform:scale(.94)} 50%{opacity:.8;transform:scale(1.05)} }
.goal-list { display: grid; gap: 9px; }
.goal-card { position: relative; display: grid; grid-template-columns: 160px minmax(0,1fr) 190px; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 3px; background: linear-gradient(105deg,rgba(57,146,231,.08),rgba(2,9,22,.72)); }
.goal-card.complete { border-color: rgba(82,229,173,.34); background: linear-gradient(105deg,rgba(49,205,154,.08),rgba(2,9,22,.72)); }
.goal-media { width: 160px; height:auto; aspect-ratio:9/13; overflow:hidden; border: 1px solid rgba(100,214,255,.3); background:#020814; box-shadow: 0 0 22px rgba(44,160,255,.16); clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.goal-media img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; filter:saturate(.92) contrast(1.08) brightness(1.08); }
.goal-body { min-width: 0; display: contents; }.goal-main { min-width: 0; }.goal-line { display: flex; justify-content: space-between; gap: 12px; align-items: center; }.goal-name { font: 600 .92rem var(--display); letter-spacing: .02em; text-transform: uppercase; }.goal-counter { color: var(--cyan-hot); font: 500 .69rem var(--mono); white-space: nowrap; }.goal-progress-track { height: 4px; margin: 8px 0 7px; }.goal-main p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.goal-input-label { display: grid; gap: 6px; color: var(--muted); font-size: .7rem; }
.goal-control { display: grid; grid-template-columns: 46px minmax(0,1fr) 46px; }
.goal-control button { min-height: 38px; cursor: pointer; border: 1px solid var(--border); color: var(--cyan-hot); background: rgba(64,173,255,.07); font: 600 .7rem var(--mono); }
.goal-control button:first-child { border-right: 0; }
.goal-control button:last-child { border-left: 0; }
.goal-control button:hover:not(:disabled) { border-color: var(--border-strong); background: rgba(64,173,255,.15); }
.goal-control button:disabled { cursor: not-allowed; color: #526775; }
.goal-input-label input { min-width: 0; min-height: 38px; padding: 0 4px; border-radius: 0; color: var(--cyan-hot); text-align: center; font-family: var(--mono); appearance: textfield; }
.goal-input-label input::-webkit-inner-spin-button { appearance: none; }
.goal-quick-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; }
.goal-quick-controls input[type="range"] { min-height:44px; padding:0 4px; border:0; accent-color:var(--cyan); cursor:pointer; }
.goal-quick-controls input[type="range"]::-webkit-slider-thumb { width:20px; height:20px; }
.goal-quick-controls button { min-height:44px; padding:0 14px; cursor:pointer; border:1px solid rgba(82,229,173,.55); color:#03130d; background:linear-gradient(90deg,var(--green),#a3f5d5); box-shadow:0 0 16px rgba(82,229,173,.14); font-size:.7rem; font-weight:700; }
.goal-quick-controls button:hover { border-color:#b8ffe4; background:linear-gradient(90deg,#71efbd,#c1ffe7); box-shadow:0 0 22px rgba(82,229,173,.26); }
.goal-cleared-mark { display:flex; align-items:center; justify-content:flex-start; gap:9px; min-height:45px; padding:7px 10px; border:1px solid rgba(82,229,173,.25); color:var(--green); background:linear-gradient(90deg,rgba(82,229,173,.09),rgba(82,229,173,.025)); }
.goal-cleared-mark>span { display:grid; width:28px; height:28px; flex:0 0 28px; place-items:center; border:1px solid rgba(82,229,173,.55); background:rgba(82,229,173,.12); box-shadow:0 0 12px rgba(82,229,173,.18); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); font-weight:700; }
.goal-cleared-mark div { display:grid; gap:1px; }.goal-cleared-mark strong { font-size:.7rem; }.goal-cleared-mark small { color:#9ed5c7; font:500 .61rem var(--mono); white-space:nowrap; }
.guidance-panel { margin-top: 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }.guidance-panel summary { display: flex; justify-content: space-between; padding: 13px 2px; cursor: pointer; color: var(--text-2); font-size: .77rem; }.guidance-panel summary::marker { color: var(--cyan); }.guidance-panel summary span { color: var(--cyan); font: 500 .61rem var(--mono); text-transform: uppercase; }.step-list { display: grid; gap: 7px; margin: 0; padding: 0 25px 14px 30px; color: var(--muted); font-size: .77rem; line-height: 1.45; }.step-list li::marker { color: var(--cyan); }
.proof-field { display: block; margin-top: 15px; }.proof-field span { display: flex; justify-content: space-between; }.proof-field small { color: var(--muted); font-weight: 400; }.proof-field textarea { margin-top: 7px; min-height: 65px; }
.action-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }.completion-status { margin-left: auto; color: var(--muted); font-size: .71rem; }

.plan-panel { padding: 20px; }
.plan-list { margin: 17px 0 0; }.plan-list div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); }.plan-list dt,.plan-list dd { margin: 0; font-size: .75rem; }.plan-list dt { color: var(--muted); }.plan-list dd { max-width: 55%; color: var(--cyan-hot); text-align: right; }
.plan-note { margin: 16px 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.history-panel { margin-top: 0; padding: 21px; overflow:hidden; }
.ledger-list { position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; margin-top:18px; padding:4px 0 2px; }
.timeline-day { position:relative; min-width:0; padding:0 9px 14px; text-align:center; }
.timeline-heading { display:grid; gap:2px; min-height:38px; }
.timeline-heading span { color:var(--text-2); font-size:.72rem; font-weight:600; }
.timeline-heading small { color:var(--muted); font:500 .61rem var(--mono); }
.timeline-node { position:relative; height:28px; margin:3px -9px 8px; }
.timeline-node::before { content:""; position:absolute; top:13px; right:0; left:0; height:1px; background:linear-gradient(90deg,var(--border),var(--border-strong),var(--border)); }
.timeline-node i { position:absolute; z-index:1; top:8px; left:50%; width:11px; height:11px; border:2px solid #2c5369; background:#071526; box-shadow:0 0 0 4px rgba(4,14,30,.9); transform:translateX(-50%) rotate(45deg); }
.timeline-day strong,.timeline-state { display:block; overflow:hidden; text-overflow:ellipsis; }
.timeline-day strong { min-height:36px; color:var(--text-2); font:600 .75rem/1.35 var(--display); }
.timeline-day.idle strong { color:#829eac; font-weight:500; }
.timeline-state { margin-top:5px; color:var(--muted); font-size:.65rem; }
.timeline-day p { margin:7px 0 0; color:var(--muted); font-size:.66rem; line-height:1.4; }
.timeline-day.complete .timeline-node i { border-color:var(--green); background:var(--green); box-shadow:0 0 0 4px rgba(4,14,30,.9),0 0 16px rgba(82,229,173,.75); }
.timeline-day.complete .timeline-state { color:var(--green); }
.timeline-day.pending .timeline-node i { border-color:var(--amber); box-shadow:0 0 0 4px rgba(4,14,30,.9),0 0 13px rgba(255,194,107,.4); }
.timeline-day.pending .timeline-state { color:var(--amber); }
.timeline-day.missed .timeline-node i { border-color:#56707e; background:#132431; }
.timeline-day.today { margin:-4px 4px 0; padding-top:4px; border:1px solid rgba(104,220,255,.24); background:linear-gradient(180deg,rgba(71,174,255,.09),transparent); clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.timeline-day.today .timeline-heading span { color:var(--cyan-hot); }
.empty { grid-column:1/-1; padding:24px; color:var(--muted); text-align:center; }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.billboard-panel{margin-top:0;padding:22px}.billboard-panel .panel-header p{margin:7px 0 0;color:var(--muted);font-size:.75rem}.billboard-state{min-height:24px;margin:12px 0;color:var(--muted)}.billboard-podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:10px;margin:22px 0}.podium-place{display:grid;gap:5px;min-height:126px;padding:18px;border:1px solid var(--border);background:linear-gradient(145deg,rgba(87,67,190,.14),rgba(16,35,55,.75));text-align:center;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.podium-place.place-1{min-height:162px;border-color:rgba(104,220,255,.55)}.podium-place>span{color:var(--cyan);font:700 1.4rem var(--display)}.podium-place strong{font:700 1.05rem var(--display)}.podium-place small{color:var(--muted)}.podium-place[aria-current="true"],.current-hunter{background:rgba(104,220,255,.1)}.billboard-table-wrap{overflow:auto;border:1px solid var(--border)}.billboard-table-wrap table{width:100%;border-collapse:collapse}.billboard-table-wrap th,.billboard-table-wrap td{padding:12px;border-bottom:1px solid var(--border);text-align:left;font-size:.76rem;white-space:nowrap}.billboard-table-wrap thead th{color:var(--muted);font-size:.67rem;text-transform:uppercase}.own-rank-card{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:15px;border:1px solid var(--cyan);background:rgba(104,220,255,.08)}.own-rank-card span,.own-rank-card small{color:var(--muted)}.billboard-pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:13px;color:var(--muted);font-size:.72rem}.billboard-pagination button{min-height:44px;padding:0 14px;border:1px solid var(--border);color:var(--text-2);background:rgba(63,167,255,.05)}html[dir="rtl"] .billboard-panel .billboard-table-wrap th,html[dir="rtl"] .billboard-panel .billboard-table-wrap td{text-align:right}

/* Settings */
.dialog-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(0,2,8,.82); backdrop-filter: blur(7px); }
.settings-dialog { position: relative; width: min(520px,100%); max-height: calc(100vh - 40px); overflow: auto; padding: 25px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: linear-gradient(145deg,#0a1b34,#030b1c); box-shadow: 0 0 45px rgba(49,166,255,.2),0 25px 90px rgba(0,0,0,.7),inset 0 0 35px rgba(60,165,255,.05); clip-path: polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px)); }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }.dialog-header h2 { margin: 5px 0 0; font: 700 1.6rem var(--display); text-transform: uppercase; }.close-button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--border); border-radius: 2px; color: var(--muted); background: rgba(63,167,255,.05); font-size: 1.25rem; }.close-button:hover { color: var(--cyan-hot); border-color: var(--border-strong); background: rgba(63,167,255,.1); }
.signed-in-copy { margin: 5px 0 0; color: var(--muted); font-size: .71rem; }.settings-form label>small { color: var(--muted); font-size: .69rem; line-height: 1.4; }.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 5px; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--border); }.danger-zone strong { font-size: .79rem; font-weight: 500; }.danger-zone p { margin: 4px 0 0; color: var(--muted); font-size: .69rem; line-height: 1.4; }.danger-button { min-height: 34px; padding: 0 10px; border: 1px solid rgba(255,102,130,.28); border-radius: 2px; color: var(--red); background: rgba(255,102,130,.06); font-size: .71rem; white-space: nowrap; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 80; max-width: min(360px,calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 3px; color: var(--text); background: rgba(5,17,35,.97); box-shadow: 0 0 30px rgba(52,175,255,.2),0 12px 40px rgba(0,0,0,.55); font-size: .77rem; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .18s; }.toast.visible { opacity: 1; transform: none; }

@media(max-width:900px){.topbar{grid-template-columns:1fr auto;backdrop-filter:none}.main-nav{position:fixed;right:12px;bottom:12px;left:12px;z-index:70;display:grid;grid-template-columns:repeat(3,1fr);min-height:58px;border:1px solid var(--border-strong);border-radius:8px;background:rgba(5,17,35,.96);box-shadow:0 18px 50px rgba(0,0,0,.55);backdrop-filter:blur(18px)}.main-nav a{min-height:56px;padding:0 10px}.main-nav a::after{right:18px;bottom:5px;left:18px}.dashboard{padding-bottom:96px}.content-grid{grid-template-columns:1fr}.summary-grid{grid-template-columns:repeat(2,1fr)}.ledger-list{grid-template-columns:repeat(7,minmax(132px,1fr));overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px}.timeline-day{scroll-snap-align:start}}
@media(max-width:640px){body::before{background-size:38px 38px}.topbar{min-height:64px;padding:0 14px}.icon-text-button,.quiet-button{min-height:44px;padding-inline:12px}.button{min-height:46px}.dashboard{width:min(100% - 24px,560px);padding:28px 0 96px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading h1{font-size:2rem}.reset-compact{width:100%}.summary-grid{grid-template-columns:1fr 1fr}.summary-card{padding:13px}.summary-card>strong{font-size:1.35rem}.workout-panel{padding:16px}.panel-header{gap:12px}.panel-badges{max-width:130px}.goal-card{grid-template-columns:58px minmax(0,1fr)}.goal-card img{width:58px;height:68px}.goal-input-label{grid-column:1/-1;grid-template-columns:1fr minmax(170px,210px);align-items:center}.goal-control{grid-template-columns:44px minmax(0,1fr) 44px}.goal-control button,.goal-input-label input{min-height:44px}.plan-list{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.plan-list div{align-items:flex-start;flex-direction:column;gap:4px}.plan-list dd{max-width:100%;text-align:left}.goal-line{align-items:flex-start;flex-direction:column;gap:5px}.action-row{align-items:stretch;flex-direction:column}.completion-status{margin:2px 0 0;text-align:center}.dialog-actions .button{flex:1}.danger-zone{align-items:flex-start;flex-direction:column}.danger-button{width:100%}}
@media(max-width:400px){.brand>span:last-child{display:none}.account-actions{gap:3px}.auth-window{padding:27px 20px}.page-heading h1{font-size:1.78rem}}

/* Language and bidirectional layout */
.auth-toolbar { display:flex; justify-content:flex-end; margin-bottom:4px; }
.language-switch { display:inline-grid; grid-template-columns:1fr 1fr; overflow:hidden; padding:2px; border:1px solid var(--border); border-radius:3px; background:rgba(1,7,18,.7); direction:ltr; }
.language-switch button { min-width:34px; min-height:30px; cursor:pointer; border-radius:2px; color:var(--muted); background:transparent; font:600 .68rem var(--font); transition:.15s; }
.language-switch button:hover { color:var(--cyan-hot); }
.language-switch button.active { color:#02111b; background:var(--cyan); box-shadow:0 0 12px rgba(104,220,255,.3); }
.settings-language-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-5px 0 18px; padding:10px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); color:var(--text-2); font-size:.78rem; }
::placeholder { color:#8aa8b8; opacity:1; }
.settings-form label>small,.danger-zone p { color:#a7beca; font-size:.76rem; }
.goal-control,#resetCountdown,#currentReminderTime,input[type="number"],input[type="time"] { direction:ltr; }
html[dir="rtl"] body { font-family:"Vazirmatn",Tahoma,sans-serif; line-height:1.65; }
html[dir="rtl"] .auth-heading h1,
html[dir="rtl"] .page-heading h1,
html[dir="rtl"] .panel-header h2,
html[dir="rtl"] .goal-name,
html[dir="rtl"] .ledger-title,
html[dir="rtl"] .dialog-header h2 { font-family:"Vazirmatn",Tahoma,sans-serif; letter-spacing:0; }
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .status-badge,
html[dir="rtl"] .plan-badge,
html[dir="rtl"] .summary-card>span,
html[dir="rtl"] .reset-compact span,
html[dir="rtl"] .timeline-state,
html[dir="rtl"] .completion-copy h3,
html[dir="rtl"] .goal-cleared-mark strong { font-family:"Vazirmatn",Tahoma,sans-serif; letter-spacing:0; }
html[dir="rtl"] .brand { direction:ltr; }
html[dir="rtl"] .goal-counter { direction:rtl; unicode-bidi:isolate; }
html[dir="rtl"] .progress-copy strong { direction:ltr; unicode-bidi:isolate; }
html[dir="rtl"] .plan-list dd { text-align:left; }
html[dir="rtl"] .proof-field span { flex-direction:row; }
html[dir="rtl"] .toast { right:auto; left:20px; }

/* Practical mobile interaction polish */
@media(max-width:640px){
  .topbar { min-height:64px; grid-template-columns:minmax(0,1fr) auto !important; gap:12px; }
  .topbar .language-switch button { min-width:36px; min-height:40px; }
  .account-actions { min-width:0; }
  .icon-text-button,.quiet-button { min-height:44px; padding-inline:12px; }
  .button { min-height:46px; }
  .completion-receipt { grid-template-columns:52px minmax(0,1fr); gap:13px; padding:16px; }
  .completion-sigil { width:46px; height:46px; }
  .completion-reward-grid,.receipt-link { grid-column:1/-1; }
  .completion-reward-grid { width:100%; }
  .receipt-link { min-height:44px; }
  .goal-card { grid-template-columns:1fr; gap:14px; padding:14px; }
  .goal-media { width:min(100%,240px); height:auto; aspect-ratio:9/13; justify-self:center; }
  .goal-media img { width:100%; height:100%; }
  .goal-body { display:grid; gap:14px; }
  .goal-input-label { grid-column:1/-1; grid-template-columns:1fr; }
  .goal-cleared-mark { grid-column:1/-1; }
  .goal-control { grid-template-columns:44px minmax(0,1fr) 44px; }
  .goal-control button,.goal-input-label input { min-height:44px; }
  .plan-list { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
  .plan-list div { align-items:flex-start; flex-direction:column; gap:4px; }
  .plan-list dd { max-width:100%; text-align:left; }
  .history-panel { padding-inline:16px; }
  .billboard-panel{padding:16px}.billboard-podium{grid-template-columns:1fr}.podium-place,.podium-place.place-1{min-height:100px}.own-rank-card{align-items:flex-start;flex-direction:column}.billboard-pagination{justify-content:space-between}.billboard-pagination button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}