:root{
    --bg:#0d1117; --bg2:#161b22; --card:#1c2230; --line:#2a3243;
    --ink:#e9eef5; --muted:#8b97a8; --gold:#f5b441; --gold2:#ffd479;
    --good:#3fb950; --radius:18px; --shadow:0 10px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
    font-family:'Inter',system-ui,sans-serif; background:
        radial-gradient(1200px 600px at 50% -10%, #1d2740 0%, var(--bg) 55%);
    color:var(--ink); min-height:100vh; line-height:1.5;
    padding-bottom:env(safe-area-inset-bottom);
}
h1{font-family:'Fraunces',serif; font-weight:700; letter-spacing:-.01em}

/* Layout */
.topbar{display:flex; justify-content:space-between; align-items:center;
    padding:16px 20px; max-width:560px; margin:0 auto;}
.logo{font-family:'Fraunces',serif; font-weight:700; color:var(--ink); text-decoration:none; font-size:1.05rem}
.nav-links{display:flex; gap:16px; font-size:.9rem}
.nav-links a{color:var(--ink); text-decoration:none; opacity:.85}
.nav-links a:hover{opacity:1; color:var(--gold2)}
main{max-width:560px; margin:0 auto; padding:8px 16px 48px; display:flex; flex-direction:column; gap:16px}
main.auth{min-height:80vh; justify-content:center}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px; box-shadow:var(--shadow)}
.kicker{display:block; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem;
    color:var(--gold); font-weight:600; margin-bottom:12px}
.muted{color:var(--muted)} .small{font-size:.85rem} .you{font-size:.7rem;color:var(--gold);border:1px solid var(--gold);border-radius:6px;padding:1px 5px;margin-left:6px;vertical-align:middle}

/* Auth */
.auth-card{text-align:center; max-width:380px; margin:0 auto; width:100%}
.brand-mark{font-size:3rem; margin-bottom:6px}
.auth-card h1{font-size:1.7rem; margin-bottom:4px}
.stack{display:flex; flex-direction:column; gap:14px; text-align:left; margin:22px 0 8px}
label{font-size:.85rem; color:var(--muted); display:flex; flex-direction:column; gap:6px}
input{background:var(--bg2); border:1px solid var(--line); color:var(--ink);
    padding:13px 14px; border-radius:12px; font-size:1rem; width:100%}
input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,180,65,.15)}
.alert{background:rgba(248,81,73,.12); border:1px solid #f85149; color:#ffb4ae;
    padding:10px 14px; border-radius:12px; font-size:.88rem; margin-bottom:6px}

/* Buttons */
.btn{display:inline-block; text-align:center; border:none; cursor:pointer; text-decoration:none;
    font-weight:600; font-size:1rem; padding:13px 22px; border-radius:14px; transition:transform .08s, filter .2s;
    font-family:inherit}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold)); color:#3a2600; box-shadow:0 8px 24px rgba(245,180,65,.3)}
.btn-gold:hover{filter:brightness(1.05)}
.btn-big{font-size:1.2rem; padding:18px 28px; width:auto; min-width:220px; margin:6px auto}
.btn-outline{background:transparent; border:1px solid var(--line); color:var(--ink)}
.btn-ghost{background:var(--bg2); color:var(--muted); border:1px solid var(--line)}
.btn-ghost[disabled]{opacity:.7; cursor:not-allowed}
.btn-link{background:none; color:var(--gold2); padding:8px; font-size:.9rem}
.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 24px rgba(245,180,65,.3)}50%{box-shadow:0 8px 38px rgba(245,180,65,.65)}}

/* Hero / streak ring */
.hero{text-align:center}
.ring-wrap{position:relative; width:160px; height:160px; margin:4px auto 14px}
.ring{width:160px; height:160px; transform:rotate(-90deg)}
.ring-bg{fill:none; stroke:var(--line); stroke-width:10}
.ring-fg{fill:none; stroke:url(#g); stroke:var(--gold); stroke-width:10; stroke-linecap:round;
    transition:stroke-dashoffset 1s ease}
.ring-done .ring-fg{stroke:var(--gold2); filter:drop-shadow(0 0 8px rgba(255,212,121,.7))}
.ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.streak-num{font-family:'Fraunces',serif; font-size:3rem; font-weight:700; line-height:1; color:var(--gold2)}
.streak-label{font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em}
.greet{font-size:1.4rem; margin:6px 0 14px}
.checked-line{color:var(--good); font-size:1.05rem; margin:6px 0}
.checked-line strong{color:var(--gold2)}
.stat-row{display:flex; justify-content:center; gap:28px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.stat-row div{display:flex; flex-direction:column; gap:2px}
.stat-n{font-weight:700; font-size:1.1rem}
.stat-l{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}

/* Dua */
.dua-card{text-align:center}
.dua-ar{font-size:1.5rem; line-height:1.9; margin-bottom:8px; direction:rtl; font-family:serif}
.dua-en{color:var(--muted); font-style:italic}

/* Schedule */
.schedule{list-style:none; display:flex; flex-direction:column; gap:2px}
.schedule li{display:grid; grid-template-columns:48px 32px 1fr; align-items:center; gap:10px;
    padding:12px 0; border-bottom:1px solid var(--line)}
.schedule li:last-child{border-bottom:none}
.sched-time{font-weight:700; color:var(--gold); font-size:.9rem}
.sched-icon{font-size:1.3rem; text-align:center}
.sched-body{display:flex; flex-direction:column}
.sched-body strong{font-size:.98rem}
.sched-body em{font-size:.82rem; color:var(--muted); font-style:normal}
.card .btn-outline,.card .btn-link{margin-top:16px; width:100%}

/* Heatmap */
.heatmap{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cell{aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px;
    background:var(--bg2); color:var(--muted); font-size:.72rem; border:1px solid transparent}
.cell.pad{background:none}
.cell.on{background:linear-gradient(135deg,var(--gold2),var(--gold)); color:#3a2600; font-weight:700}
.cell.today{border-color:var(--gold)}

/* Leaderboard */
.board-title{font-size:1.4rem; margin-bottom:14px}
.board{width:100%; border-collapse:collapse; font-size:.92rem}
.board th{text-align:left; color:var(--muted); font-weight:500; font-size:.72rem;
    text-transform:uppercase; letter-spacing:.08em; padding:8px 6px; border-bottom:1px solid var(--line)}
.board td{padding:13px 6px; border-bottom:1px solid var(--line)}
.board .rank{color:var(--muted); font-weight:700}
.board .num{text-align:center; font-variant-numeric:tabular-nums}
.board tr.me{background:rgba(245,180,65,.08)}
.board tbody tr:first-child .rank{color:var(--gold2)}

/* Landing page */
.landing{padding-top:24px}
.lp-hero{text-align:center; padding:24px 8px 8px}
.lp-sun{font-size:3.4rem; display:block; margin-bottom:6px}
.lp-hero h1{font-size:2.4rem; line-height:1.05; margin-bottom:8px;
    background:linear-gradient(135deg,#fff,var(--gold2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lp-tag{color:var(--gold2); font-weight:600; font-size:1.05rem; margin-bottom:14px}
.lp-sub{color:var(--muted); max-width:440px; margin:0 auto 22px; font-size:1.02rem; line-height:1.6}
.lp-cta{display:flex; flex-direction:column; gap:10px; align-items:center}
.lp-cta .btn-big{width:100%; max-width:300px}
.lp-cta .btn-outline{width:100%; max-width:300px}

.lp-why{display:flex; flex-direction:column; gap:18px}
.why-item{display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center}
.why-item span{grid-row:1/3; font-size:1.8rem; text-align:center}
.why-item strong{font-size:1.02rem}
.why-item em{font-style:normal; color:var(--muted); font-size:.9rem}

.lp-close{text-align:center; padding:18px 8px 8px}
.lp-close h2{font-family:'Fraunces',serif; font-size:1.6rem; margin-bottom:6px}
.lp-close .lp-cta{margin-top:18px}

/* Footer */
.site-footer{text-align:center; color:var(--muted); font-size:.8rem; padding:24px 16px 40px}