@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#080d18;--panel:#101827;--panel2:#151f31;--line:#263349;
  --text:#f4f7fb;--muted:#9ba8ba;--gold:#f4c95d;--green:#62d59b;
  --blue:#6ea8fe;--danger:#ff6f7d;--shadow:0 18px 50px rgba(0,0,0,.24);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at top,#17233a 0,#080d18 48%);color:var(--text);font-family:Vazirmatn,system-ui,sans-serif}
body.light{--bg:#eef2f7;--panel:#fff;--panel2:#f5f7fa;--line:#d8dee8;--text:#182132;--muted:#667085;--shadow:0 12px 30px rgba(15,23,42,.12);background:#eef2f7}
button,input{font:inherit}
button{cursor:pointer}
.app{max-width:1000px;margin:auto;padding:18px 14px 35px}
.hero,.date-panel,.progress-card,.quest,.boss,.goal,.stat,.chart-card,.save-card{background:linear-gradient(145deg,var(--panel),var(--panel2));border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px}
.hero{padding:24px;margin-bottom:14px}
.hero-top{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.eyebrow{font-size:.74rem;color:var(--muted);letter-spacing:.04em}
h1{margin:5px 0;font-size:clamp(1.8rem,7vw,3rem);letter-spacing:.03em}
h1 span{color:var(--gold)}
.hero p{margin:0;color:var(--muted)}
.icon-btn,.date-arrow,.modal-close{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:14px}
.icon-btn{width:45px;height:45px;font-size:1.2rem}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.hero-stats div{padding:13px;border:1px solid var(--line);border-radius:16px;background:#ffffff05}
.hero-stats strong{display:block;margin-top:4px;color:var(--gold);font-size:1.1rem}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.tab{border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:12px 7px;border-radius:14px;font-weight:700}
.tab.active{color:var(--text);border-color:var(--gold);box-shadow:0 0 0 1px #f4c95d33 inset}
.date-panel{padding:15px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.date-main{display:flex;align-items:center;gap:12px}
.date-arrow{width:42px;height:42px;font-size:1.6rem}
.date-label{font-size:.72rem;color:var(--muted)}
.date-main h2{margin:2px 0;font-size:1.15rem}
.date-main p{margin:0;color:var(--muted);font-size:.8rem}
.date-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.soft-btn,.primary-btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:12px;padding:9px 12px}
.primary-btn{background:var(--gold);border-color:var(--gold);color:#17130a;font-weight:800}
input[type=date]{color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:8px}
.tab-panel{display:none}
.tab-panel.active{display:block}
.section-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin:20px 2px 12px}
.section-head h2{margin:4px 0 0;font-size:1.35rem}
.progress-card{padding:16px;margin-bottom:12px}
.progress-head{display:flex;justify-content:space-between;color:var(--muted);font-size:.86rem}
.progress-head strong{color:var(--gold)}
.bar{height:10px;background:#ffffff0b;border-radius:999px;overflow:hidden;margin-top:10px}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--green));transition:.25s}
.quest-list,.boss-list,.goal-list{display:grid;gap:10px}
.quest{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px}
.check{appearance:none;width:26px;height:26px;border:2px solid var(--line);border-radius:9px;background:transparent;position:relative}
.check:checked{background:var(--green);border-color:var(--green)}
.check:checked:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#092015;font-weight:900}
.quest.done{opacity:.7}
.quest.done .quest-title{text-decoration:line-through}
.quest-icon{font-size:1.5rem}
.quest-title{font-weight:800}
.quest-sub{color:var(--muted);font-size:.82rem;margin-top:3px;line-height:1.5}
.xp{color:var(--gold);font-weight:800;white-space:nowrap}
.details-btn{border:1px solid var(--line);background:transparent;color:var(--text);padding:7px 10px;border-radius:10px;font-size:.78rem}
.quest-actions{display:flex;align-items:center;gap:8px}
.boss,.goal{padding:16px}
.boss{cursor:pointer;transition:.15s}
.boss:hover{border-color:var(--gold);transform:translateY(-1px)}
.boss:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.boss-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.boss h3{margin:0;font-size:1rem}
.difficulty{color:var(--gold)}
.boss p,.goal p{color:var(--muted);line-height:1.7;margin:8px 0}
.goal strong{display:block;font-size:1rem}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{padding:15px}
.stat span{display:block;color:var(--muted);font-size:.76rem}
.stat strong{display:block;font-size:1.4rem;margin-top:5px;color:var(--gold)}
.chart-card{padding:16px;margin-top:12px}
.chart-head{display:flex;justify-content:space-between;gap:10px;align-items:end}
.chart-head h3{margin:4px 0}
.chart-head>span{color:var(--muted);font-size:.78rem}
#progressChart{width:100%;height:260px;display:block;margin-top:10px}
.save-card{padding:16px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.save-card p{margin:5px 0 0;color:var(--muted);font-size:.8rem}
footer{text-align:center;color:var(--muted);font-size:.72rem;padding:25px 0}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#111827;color:#fff;border:1px solid var(--line);padding:11px 15px;border-radius:13px;transition:.2s;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{display:none;position:fixed;inset:0;z-index:100}
.modal.open{display:block}
.modal-shade{position:absolute;inset:0;background:#0009;backdrop-filter:blur(4px)}
.modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,560px);max-height:82vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:23px;box-shadow:0 25px 80px #0009}
.modal-close{position:absolute;top:12px;left:12px;width:36px;height:36px;font-size:1.4rem}
.modal-icon{font-size:2rem}
.modal-card h2{margin:6px 0}
.modal-card>p{color:var(--muted);line-height:1.8}
.modal-steps{display:grid;gap:8px;margin-top:14px}
.modal-step{padding:11px;border:1px solid var(--line);border-radius:13px;background:#ffffff05;line-height:1.6}
@media(max-width:700px){
  .app{padding:10px 9px 28px}
  .hero{padding:18px}
  .tabs{gap:5px}.tab{font-size:.72rem;padding:11px 4px}
  .date-panel{display:block}.date-main{justify-content:space-between}.date-actions{margin-top:12px;justify-content:center}
  .date-actions input{width:100%}
  .quest{grid-template-columns:auto 1fr}.quest-actions{grid-column:2;justify-content:space-between}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .save-card{align-items:stretch;flex-direction:column}
}
@media(max-width:430px){.hero-stats{gap:6px}.hero-stats div{padding:10px}.hero-stats small{font-size:.62rem}.hero-stats strong{font-size:.95rem}}

/* ===== V7 Stats / Motion Upgrade ===== */
.section-note,.chart-hint,.chart-modal-note{color:var(--muted);margin:.35rem 0 0;font-size:.88rem;line-height:1.8}
.day-summary-card{background:linear-gradient(145deg,var(--panel),var(--panel2));border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px;padding:16px;margin:14px 0}
.day-summary-top{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.day-summary-top>div{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:16px;padding:12px}
.day-summary-top span{display:block;color:var(--muted);font-size:.78rem}
.day-summary-top strong{display:block;margin-top:5px;font-size:1rem}
.day-summary-list{display:grid;gap:7px}
.day-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);border-radius:13px;padding:9px 11px;color:var(--muted)}
.day-row.done{color:var(--text);background:rgba(98,213,155,.07);border-color:rgba(98,213,155,.28)}
.day-row b{white-space:nowrap;color:var(--gold)}
.chart-clickable{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.chart-clickable:hover{transform:translateY(-2px)}
.chart-clickable canvas{display:block;width:100%;height:300px}
.chart-modal-card{width:min(980px,94vw);max-height:92vh;overflow:auto}
.chart-tools{display:flex;gap:8px;justify-content:flex-start;margin:8px 0}
.large-chart-wrap{min-height:520px;overflow:auto;border:1px solid var(--line);border-radius:18px;padding:8px;background:rgba(0,0,0,.08)}
#chartLarge{width:100%;height:520px;display:block}
@media(max-width:600px){
  .day-summary-top{grid-template-columns:1fr}
  .day-row{font-size:.84rem}
  .chart-clickable canvas{height:300px}
}

/* ===== V8 long-term level system ===== */
.level-card{
  margin:16px 0;
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  box-shadow:0 14px 40px rgba(0,0,0,.16);
}
.level-card-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.level-card h3{font-size:34px;margin:3px 0}
.level-card-top>strong{font-size:20px}
.level-progress{height:10px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin:14px 0 9px}
.level-progress span{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#d59a4a,#f0c36b)}
.level-note{font-size:12px;opacity:.72;line-height:1.8;margin:0}
.level-roadmap{display:grid;gap:8px;margin-top:14px}
.level-tier{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.045);font-size:12px}
.level-tier strong{min-width:75px}
.level-tier span{opacity:.7;text-align:left}
.level-tier.active{outline:1px solid rgba(240,195,107,.55);background:rgba(240,195,107,.10)}
body.light .level-card{background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(240,240,240,.85));border-color:rgba(0,0,0,.08)}
@media(max-width:520px){
 .level-card-top{align-items:center}
 .level-card h3{font-size:30px}
 .level-tier{display:block}
 .level-tier span{display:block;margin-top:4px}
}

.v9-roadmap{margin:18px 0;padding:18px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
#v9-level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:14px}
.v9-level{padding:12px 4px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.07);color:inherit;font-weight:800}
.v9-level:active{transform:scale(.96)}
#v9-level-detail{margin-top:14px;padding:16px;border-radius:18px;background:rgba(0,0,0,.16);line-height:1.8}

/* FINAL E→SS interactive roadmap */
.level-roadmap-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 10px}
.level-nav-btn{width:44px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:inherit;font-size:20px;font-weight:900}
.level-tier-name{font-size:25px;font-weight:900;letter-spacing:2px}
.level-roadmap-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.level-chip{min-height:60px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.055);color:inherit;cursor:pointer;padding:8px 3px;transition:.18s}
.level-chip strong{display:block;font-size:15px}
.level-chip small{display:block;margin-top:5px;font-size:9px;opacity:.68}
.level-chip.current{border-color:rgba(240,195,107,.85);box-shadow:0 0 0 2px rgba(240,195,107,.12)}
.level-chip.done{background:rgba(53,184,143,.13);border-color:rgba(53,184,143,.48)}
.level-chip:active{transform:scale(.95)}
.level-details-panel{margin-top:12px;padding:16px;border-radius:18px;background:rgba(0,0,0,.13);border:1px solid rgba(255,255,255,.1);line-height:1.8}
.level-details-empty{color:var(--muted,#9ba8ba);font-size:12px}
.level-detail-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.level-detail-head h3{font-size:30px;margin:4px 0}
.level-detail-head>strong{font-size:12px}
.level-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.level-detail-grid>div{padding:10px;border-radius:12px;background:rgba(255,255,255,.055)}
.level-detail-grid span{display:block;color:var(--muted,#9ba8ba);font-size:10px}
.level-detail-grid b{display:block;margin-top:3px}
.level-detail-section{margin-top:15px}
.level-detail-section h4{margin:0 0 8px}
.detail-pills{display:flex;flex-wrap:wrap;gap:7px}
.detail-pill{display:inline-block;padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.06);font-size:10px}
.level-history-row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);padding:8px 0;font-size:11px}
@media(min-width:650px){.level-roadmap-grid{grid-template-columns:repeat(10,minmax(0,1fr))!important}}
@media(max-width:420px){.level-roadmap-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}.level-detail-head{align-items:flex-start}.level-detail-grid{grid-template-columns:1fr 1fr}}

.lifetime-level{padding:18px;margin-bottom:14px;border-radius:20px}
.lifetime-label{font-size:11px;letter-spacing:2px;color:#9ca7ba}
.lifetime-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:7px}
.lifetime-row strong{font-size:42px}.lifetime-row span{font-weight:bold;color:#8bd8c5}
.lifetime-bar{height:9px;background:#252c39;border-radius:99px;overflow:hidden;margin:13px 0 8px}
.lifetime-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#7c5cff,#19d3ae);transition:.5s}
.motivation-btn{width:100%;margin:18px 0 8px;padding:14px;border-radius:14px;border:1px solid #343d4e;background:#171d28;color:inherit;font-weight:bold}
.motivation-list{display:grid;gap:12px}.quote{padding:20px;border-radius:18px;border:1px solid #293244;background:#151a23;line-height:2;text-align:center}
.light .quote{background:#fff}.reward-box{text-align:center}.reward-icon{font-size:48px}
.reward-input{width:100%;padding:13px;border-radius:12px;border:1px solid #394254;background:#10151e;color:inherit;margin:12px 0}
.reward-save{width:100%;padding:13px;border:0;border-radius:12px;background:#19b98d;color:#07130f;font-weight:bold}

.clickable-lifetime{cursor:pointer}
.lifetime-level{margin:18px 0;border-radius:20px}
.lifetime-row{display:flex;align-items:baseline;justify-content:space-between;margin:8px 0}
.lifetime-row strong{font-size:40px}
.history-list{display:grid;gap:8px;margin-top:16px;max-height:45vh;overflow:auto}
.history-item{display:flex;justify-content:space-between;padding:10px 12px;border-radius:12px;background:rgba(127,127,127,.08)}

.level-switcher{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding:8px;border-radius:16px;background:rgba(127,127,127,.08)}
.level-switcher strong{font-size:18px;letter-spacing:1px}
.tier-arrow{min-width:44px;min-height:40px;border:1px solid rgba(127,127,127,.22);border-radius:12px;background:rgba(127,127,127,.08);color:inherit;font-size:18px}
.level-roadmap{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:10px}
.level-chip{border:1px solid rgba(127,127,127,.2);background:rgba(127,127,127,.06);border-radius:10px;padding:9px 3px;color:inherit;font-weight:700}
.level-chip.current{outline:2px solid rgba(120,100,255,.55);background:rgba(120,100,255,.13)}
.level-chip.done{opacity:.72}
.level-chip .check{font-size:10px}
.motivation-nav{display:flex;gap:8px;justify-content:center;margin-bottom:15px}
.motivation-nav .tier-arrow{padding:8px 13px}
@media(max-width:380px){.level-roadmap{grid-template-columns:repeat(4,1fr)}}

/* Fantasy spring-like tier arrows */
.level-switcher{display:flex;align-items:center;justify-content:center;gap:18px;margin:16px 0 12px}
.tier-arrow{
  width:58px!important;height:58px!important;min-width:58px;
  border-radius:20px!important;border:1px solid rgba(126,224,191,.45)!important;
  background:linear-gradient(145deg,rgba(126,224,191,.20),rgba(124,92,255,.22))!important;
  color:#fff!important;font-size:34px!important;line-height:1;
  font-weight:900;cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.18),0 0 18px rgba(126,224,191,.12);
  transition:transform .18s ease,box-shadow .18s ease;
}
.tier-arrow:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.22),0 0 24px rgba(126,224,191,.22)}
.tier-arrow:active{transform:scale(.94)}
.tier-arrow:first-child{border-radius:22px 14px 22px 14px!important}
.tier-arrow:last-child{border-radius:14px 22px 14px 22px!important}
#tierName{font-size:28px;min-width:70px;text-align:center}