:root{
  --bg:#0E0E10; --card:#1C1C1F; --card2:#17171A; --line:#26262B; --track:#2E2E33;
  --txt:#F2F2F2; --mut:#A1A1AA; --mut2:#71717A; --dash:#52525B;
  --ok:#FF3EA5; --bad:#A3E89A; --warn:rgba(163,232,154,.45); --agua:#7DD3FC;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:Poppins,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
body{min-height:100vh}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--ok)}
.loading{padding:40vh 20px 0;text-align:center;color:var(--mut)}
.wrap{max-width:480px;margin:0 auto;padding-bottom:calc(96px + var(--safe-b))}
.muted{color:var(--mut)} .small{font-size:12px}

/* topo */
.top{padding:24px 20px 12px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.top .data{font-size:13px;color:var(--mut)}
h1{margin:0;font-size:26px;font-weight:700}
h2{margin:0;font-size:15px;font-weight:600}
.ring-card{margin:4px 20px 16px;padding:14px 16px;background:var(--card);border-radius:16px;display:flex;align-items:center;gap:14px}
.ring-card b{font-size:15px;font-weight:600;display:block}

/* categorias */
.cats{display:flex;flex-direction:column;gap:12px;padding:0 20px}
.cat{background:var(--card2);border-radius:18px;overflow:hidden}
.cat-head{width:100%;min-height:56px;padding:14px 16px;border:none;background:var(--card);display:flex;align-items:center;gap:12px;text-align:left}
.cat-head .nome{flex:1;font-size:16px;font-weight:600}
.cat-head .pct{font-size:13px;font-weight:600}
.cat-head .chev{display:flex;transition:transform .2s}
.cat.aberta .chev{transform:rotate(180deg)}
.dot{width:10px;height:10px;border-radius:5px;flex:none}
.cat-body{display:none;flex-direction:column;gap:1px;background:var(--line)}
.cat.aberta .cat-body{display:flex}
.hab{background:var(--card2);padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.hab-row{display:flex;align-items:center;gap:12px}
.hab-nome{flex:1;min-width:0;display:flex;flex-direction:column;background:none;border:none;padding:0;text-align:left}
.hab-nome span:first-child{font-size:15px}
.hab-nome .sub{font-size:12px;color:var(--mut)}
.dias{display:flex;gap:6px}
.bola{width:44px;height:44px;border-radius:22px;border:none;font-size:10px;font-weight:700;line-height:1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0}
.bola.done{background:var(--ok);color:#0E0E10}
.bola.miss{background:var(--bad);color:#1A0A07}
.bola.open{background:transparent;border:1.5px dashed var(--dash);color:#D4D4D8}
.bola.off{background:transparent;border:1px solid var(--line);color:var(--mut2);cursor:default}
.btn-out{min-height:36px;padding:0 12px;border-radius:10px;border:1px solid #3A3A40;background:transparent;font-size:13px;white-space:nowrap}
.btn-main{min-height:44px;padding:0 18px;border-radius:12px;border:none;background:var(--ok);color:#0E0E10;font-weight:600}
.btn-ghost{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid #3A3A40;background:transparent}
.btn-danger{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--bad);background:transparent;color:var(--bad)}
.chip{min-height:32px;padding:6px 12px;border-radius:16px;font-size:12px;font-weight:600;border:1.5px solid var(--dash);background:transparent;color:#D4D4D8;white-space:nowrap}
.chip.done{background:var(--ok);border-color:var(--ok);color:#0E0E10}
.chip.pend{border-color:var(--bad);color:var(--bad)}
.peso-row{display:flex;align-items:center;gap:12px}
.peso-row .val{font-size:24px;font-weight:700}
.tag{font-size:13px;border-radius:10px;padding:2px 8px;font-weight:600}
.tag.ok{background:var(--ok);color:#0E0E10} .tag.bad{background:var(--bad);color:#1A0A07}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ref{min-height:44px;border-radius:12px;border:none;font-size:12px;font-weight:600;padding:0 2px}
.ref.done{background:var(--ok);color:#0E0E10}
.ref.miss{background:var(--bad);color:#1A0A07}
.ref.open{background:transparent;border:1.5px dashed var(--dash);color:#D4D4D8;font-weight:500}
.mini-dias{display:flex;gap:6px}
.mini{min-height:30px;padding:0 10px;border-radius:15px;border:1px solid var(--line);background:transparent;color:var(--mut);font-size:11px;font-weight:600}
.mini.sel{background:var(--track);color:var(--txt);border-color:var(--track)}
.bar{flex:1;height:10px;border-radius:5px;background:var(--track);overflow:hidden}
.bar>div{height:10px;border-radius:5px}

/* nav */
nav.bottom{position:fixed;left:0;right:0;bottom:0;height:calc(76px + var(--safe-b));padding-bottom:var(--safe-b);border-top:1px solid var(--line);background:#141416;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));z-index:5}
nav.bottom a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--mut);text-decoration:none;font-size:11px}
nav.bottom a.sel{color:var(--ok);font-weight:600}
@media (min-width:520px){nav.bottom{left:50%;width:480px;transform:translateX(-50%);border-left:1px solid var(--line);border-right:1px solid var(--line)}}

/* cartões genéricos */
.card{margin:0 16px;background:var(--card);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.stack{display:flex;flex-direction:column;gap:14px}
.row-between{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.grid2{margin:0 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi{background:var(--card);border-radius:14px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.kpi .n{font-size:30px;font-weight:700}
.seg{margin:0 16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;background:var(--card);border-radius:12px;padding:4px}
.seg button{min-height:36px;border:none;border-radius:9px;background:transparent;color:var(--mut);font-size:12px}
.seg button.sel{background:var(--track);color:var(--txt);font-weight:600}
.back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--txt);background:none;border:none}
.sbar{display:flex;align-items:center;gap:8px}
.sbar>div{height:14px;border-radius:4px;background:var(--ok);min-width:6px}
.sbar span{font-size:12px;font-weight:600;color:var(--ok);white-space:nowrap}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .w{font-size:10px;color:var(--mut);text-align:center}
.cal .d{height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border:none;background:transparent;padding:0}
.cal .d.done{background:var(--ok);color:#0E0E10}
.cal .d.miss{background:var(--bad);color:#1A0A07}
.cal .d.part{background:var(--warn);color:#1A0E05}
.cal .d.open{border:1.5px dashed var(--ok);color:var(--txt)}
.cal .d.fut{border:1px solid var(--track);color:var(--dash)}
.cal .d.nada{border:1px solid var(--track);color:var(--mut)}
.meta-li{min-height:40px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt);background:none;border:none;padding:0;width:100%;text-align:left}
.meta-li .nm{flex:1;font-size:13px}
.empty{color:var(--mut);font-size:13px}

/* ajustes */
.aj-cat{margin:0 16px;background:var(--card);border-radius:16px;overflow:hidden}
.aj-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;background:var(--card)}
.aj-head .nm{flex:1;font-weight:600}
.aj-hab{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 16px;border-top:1px solid var(--line);background:var(--card2)}
.aj-hab .nm{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px}
.aj-hab .nm .small{color:var(--mut)}
.ico{width:40px;height:40px;border-radius:10px;border:none;background:transparent;color:var(--mut);display:flex;align-items:center;justify-content:center;padding:0}
.ico:disabled{opacity:.25;cursor:default}
.arquivado{opacity:.55}

/* modal */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet{width:100%;max-width:480px;max-height:90vh;overflow:auto;background:var(--card);border-radius:20px 20px 0 0;padding:20px 20px calc(20px + var(--safe-b));display:flex;flex-direction:column;gap:14px}
@media (min-width:520px){.ov{align-items:center}.sheet{border-radius:20px}}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mut)}
label.f input,label.f select{min-height:46px;border-radius:12px;border:1px solid #3A3A40;background:var(--bg);padding:0 12px;color:var(--txt);font-size:16px}
label.f input[type=color]{padding:4px;width:80px}
label.ck{display:flex;align-items:center;gap:10px;font-size:14px;min-height:44px}
label.ck input{width:20px;height:20px}
.btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* login */
.login{max-width:380px;margin:0 auto;padding:18vh 24px 40px;display:flex;flex-direction:column;gap:14px}
.erro{color:var(--bad);font-size:13px;min-height:18px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + var(--safe-b));background:#2E2E33;color:var(--txt);padding:10px 16px;border-radius:12px;font-size:13px;z-index:30}