@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --bg:#FBF6EC; --surface:#FFFFFF; --surface-2:#F3ECDC; --ink:#26313A; --ink-dim:#6B7680; --line:#E7DDC7;
  --primary:#1F8A70; --primary-ink:#F4FFF9; --secondary:#FF6B4A; --gold:#E8940C; --gold-bg:#FFF1D2;
  --accent:#6C5CE7; --danger:#E1503F; --ok-bg:#E6F5EE; --pending-bg:#FFF1D2;
  --shadow:0 1px 2px rgba(38,49,58,.06), 0 6px 16px -8px rgba(38,49,58,.18); --radius:18px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#10171B; --surface:#182226; --surface-2:#1F2B30; --ink:#EDEFEF; --ink-dim:#9AAAB0; --line:#2A363B;
    --primary:#35C79A; --primary-ink:#08211A; --secondary:#FF8A65; --gold:#FFC15E; --gold-bg:#3A2E12;
    --accent:#9D8CFF; --danger:#FF7A6B; --ok-bg:#123527; --pending-bg:#3A2E12;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -8px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:'Nunito',sans-serif;
  padding-inline:16px; padding-block:18px 100px;
}
h1,h2,h3,.display{font-family:'Baloo 2',sans-serif}
img{max-width:100%}
.wrap{max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:16px}
.hidden{display:none !important}

/* ---- profile select ---- */
.profile-screen{max-width:420px; margin:60px auto; text-align:center; display:flex; flex-direction:column; gap:18px}
.profile-screen h1{font-size:1.6rem; color:var(--primary)}
.profile-grid{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.profile-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px;
  box-shadow:var(--shadow); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:'Nunito'; font-weight:800; min-width:120px;
}
.profile-card .av{font-size:2.2rem}
.profile-card:hover{outline:2px solid var(--primary)}

/* ---- topbar ---- */
.topbar{
  background:linear-gradient(135deg, var(--primary), #14634F);
  color:var(--primary-ink); border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
@media (prefers-color-scheme: dark){ .topbar{ background:linear-gradient(135deg, #1E5F4E, #0E332A); } }
.topbar::after{
  content:""; position:absolute; right:-30px; top:-30px; width:140px; height:140px;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); border-radius:50%;
}
.topbar-row{display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1}
.hero{display:flex; align-items:center; gap:12px}
.avatar{
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:26px; flex:none;
  border:2px solid rgba(255,255,255,.5);
}
.hero-name{font-family:'Baloo 2'; font-weight:800; font-size:1.25rem; line-height:1.1}
.hero-sub{font-size:.82rem; opacity:.85; font-weight:700}
.mode-toggle, .link-btn{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); color:var(--primary-ink);
  border-radius:999px; padding:7px 13px; font-family:'Nunito'; font-weight:800; font-size:.78rem; cursor:pointer;
}
.xp-row{margin-top:14px; position:relative; z-index:1}
.xp-track{height:10px; border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden}
.xp-fill{height:100%; background:var(--gold); border-radius:999px; transition:width .4s ease}
.xp-label{display:flex; justify-content:space-between; font-size:.72rem; font-weight:800; margin-top:5px; opacity:.9}

.stat-row{display:flex; gap:10px; margin-top:14px; position:relative; z-index:1; flex-wrap:wrap}
.stat-pill{flex:1; min-width:90px; background:rgba(255,255,255,.14); border-radius:14px; padding:9px 10px; display:flex; align-items:center; gap:7px; font-weight:800}
.stat-pill .n{font-size:1.05rem; font-family:'Baloo 2'}
.stat-pill .l{font-size:.66rem; opacity:.85; display:block; font-weight:700}

.tabs{display:flex; gap:6px; background:var(--surface-2); padding:5px; border-radius:14px; overflow-x:auto}
.tab{flex:1; text-align:center; padding:9px 4px; border-radius:10px; border:none; background:transparent; color:var(--ink-dim); font-weight:800; font-family:'Nunito'; font-size:.8rem; cursor:pointer; white-space:nowrap}
.tab.active{background:var(--surface); color:var(--primary); box-shadow:var(--shadow)}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.card h2{margin:0 0 3px; font-size:1.05rem}
.muted{color:var(--ink-dim); font-size:.85rem; margin:0}

.task{display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:none}
.task-icon{width:42px; height:42px; border-radius:12px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:20px; flex:none}
.task-body{flex:1; min-width:0}
.task-name{font-weight:800; font-size:.94rem}
.task-meta{color:var(--ink-dim); font-weight:700; font-size:.74rem; display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.task-meta .xp{color:var(--accent)}
.task-meta .coins{color:var(--gold)}
.task-btn{flex:none; border:none; border-radius:12px; padding:9px 14px; font-weight:800; font-family:'Nunito'; font-size:.8rem; cursor:pointer; background:var(--primary); color:var(--primary-ink)}
.task-btn[disabled]{opacity:.5; cursor:not-allowed}
.badge{flex:none; font-size:.72rem; font-weight:800; padding:6px 10px; border-radius:999px}
.badge.pending{background:var(--pending-bg); color:var(--gold)}
.badge.approved{background:var(--ok-bg); color:var(--primary)}
.badge.rejected{background:var(--surface-2); color:var(--danger)}
.badge.type-bonus{background:var(--gold-bg); color:var(--gold)}
.badge.type-epica{background:#EFE9FF; color:var(--accent)}
@media (prefers-color-scheme: dark){ .badge.type-epica{background:#2A2340} }

.subtask-list{display:flex; flex-direction:column; gap:6px; margin-top:8px; width:100%}
.subtask-row{display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:700}
.subtask-row input{width:18px; height:18px}
.subtask-row.done{color:var(--ink-dim); text-decoration:line-through}

.goal{padding:12px 4px; border-bottom:1px solid var(--line)}
.goal:last-child{border-bottom:none}
.goal-top{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:7px}
.goal-name{font-weight:800; display:flex; gap:8px; align-items:center}
.goal-target{font-size:.78rem; color:var(--ink-dim); font-weight:700}
.bar-track{height:9px; background:var(--surface-2); border-radius:999px; overflow:hidden}
.bar-fill{height:100%; background:linear-gradient(90deg, var(--gold), var(--secondary)); border-radius:999px; transition:width .4s ease}

.ach-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px}
.ach-card{background:var(--surface-2); border-radius:14px; padding:12px; text-align:center; font-size:.78rem; font-weight:800}
.ach-card .ic{font-size:1.8rem; display:block; margin-bottom:4px}
.ach-card.locked{opacity:.4; filter:grayscale(1)}

.empty{padding:22px 6px; text-align:center; color:var(--ink-dim); font-size:.88rem}
.row{display:flex; gap:8px}
input[type=text], input[type=number], input[type=password], textarea{
  width:100%; padding:10px 11px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink); font-family:'Nunito'; font-size:.88rem; font-weight:700;
}
textarea{resize:vertical; min-height:64px}
label{font-size:.72rem; font-weight:800; color:var(--ink-dim); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.03em}
select{padding:9px 10px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font-family:'Nunito'; font-size:.82rem; font-weight:700}
.checkline{display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:700}
.checkline input{width:18px; height:18px}
.section-head{font-family:'Baloo 2'; font-weight:800; font-size:.98rem; margin-bottom:4px}
.field{flex:1}
.btn{border:none; border-radius:12px; padding:11px 16px; font-weight:800; font-family:'Nunito'; font-size:.85rem; cursor:pointer}
.btn-primary{background:var(--primary); color:var(--primary-ink)}
.btn-ghost{background:var(--surface-2); color:var(--ink)}
.btn-danger{background:transparent; color:var(--danger); border:1px solid var(--danger)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn-sm{padding:7px 11px; font-size:.76rem; border-radius:10px}

.pending-row{display:flex; align-items:center; gap:10px; padding:12px 4px; border-bottom:1px solid var(--line)}
.pending-row:last-child{border-bottom:none}
.icon-btn{width:38px;height:38px;border-radius:10px;border:none;font-size:16px;cursor:pointer;flex:none}
.icon-btn.ok{background:var(--ok-bg); color:var(--primary)}
.icon-btn.no{background:var(--surface-2); color:var(--danger)}

.overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50}
.modal{background:var(--surface); border-radius:var(--radius); padding:20px; width:100%; max-width:340px; box-shadow:var(--shadow); max-height:86vh; overflow-y:auto}
.modal h3{margin:0 0 4px}

.list-item{display:flex; align-items:center; gap:8px; padding:10px 4px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.list-item:last-child{border-bottom:none}
.list-item .grow{flex:1 1 130px}
.list-item .sm{width:60px; flex:none}

.child-select-row{display:flex; gap:8px; margin-bottom:4px; flex-wrap:wrap}
.child-chip{border:1px solid var(--line); background:var(--surface-2); border-radius:999px; padding:6px 12px; font-weight:800; font-size:.78rem; cursor:pointer}
.child-chip.active{background:var(--primary); color:var(--primary-ink); border-color:var(--primary)}

.cat-bar-row{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.cat-bar-label{width:120px; font-size:.76rem; font-weight:800; flex:none; display:flex; align-items:center; gap:4px}
.cat-bar-track{flex:1; height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden}
.cat-bar-fill{height:100%; border-radius:999px}
.cat-bar-n{width:24px; text-align:right; font-weight:800; font-size:.78rem; flex:none}

.footer-note{text-align:center; color:var(--ink-dim); font-size:.72rem; padding-top:4px}
.week-total{display:flex; align-items:baseline; gap:6px; margin:6px 0 14px}
.week-total .v{font-family:'Baloo 2'; font-size:1.7rem; color:var(--gold)}
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--bg);
  padding:10px 16px; border-radius:12px; font-weight:800; font-size:.82rem; z-index:60; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  max-width:calc(100vw - 32px); text-align:center;
}
.toast.show{opacity:1}

.loading-bar{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:70; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--primary), var(--gold), transparent);
  background-size:200% 100%; opacity:0; transition:opacity .15s ease;
}
.loading-bar.show{opacity:1; animation:loading-sweep 1s linear infinite}
@keyframes loading-sweep{ from{background-position:200% 0} to{background-position:-200% 0} }

@media (prefers-reduced-motion: no-preference){
  .card, .topbar, .profile-screen{ animation:card-in .28s ease both }
  .card:nth-child(2){animation-delay:.03s} .card:nth-child(3){animation-delay:.06s} .card:nth-child(4){animation-delay:.09s}
}
@keyframes card-in{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

.btn, .task-btn, .icon-btn, .tab, .mode-toggle, .profile-card{ transition:transform .12s ease, opacity .12s ease }
.btn:active, .task-btn:active, .icon-btn:active, .profile-card:active{ transform:scale(.96) }
.btn[disabled]:active, .task-btn[disabled]:active{ transform:none }
@media (prefers-reduced-motion: reduce){
  .card, .topbar, .profile-screen{ animation:none }
  .btn, .task-btn, .icon-btn, .tab, .mode-toggle, .profile-card{ transition:none }
}