:root{--bg:#0a0a0f;--card:#13131a;--input:#1a1a24;--border:#2a2a3a;--text:#eeeef0;--text2:#8888a0;--text3:#55556a;--accent:#ff6b35;--accent-g:rgba(255,107,53,0.15);--green:#00e676;--green-g:rgba(0,230,118,0.15);--red:#ff4757;--red-g:rgba(255,71,87,0.15);--warn:#ffa502;--purple:#e056fd;--water:#4fc3f7;--font:'Outfit',sans-serif;--mono:'JetBrains Mono',monospace;--r:12px}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}a{color:var(--accent);text-decoration:none}input,select,textarea{font-family:var(--font)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* Layout */
.app{display:flex;min-height:100vh}.sidebar{width:260px;background:var(--card);border-right:1px solid var(--border);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:100;transition:transform .3s}.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99}.main{flex:1;margin-left:260px;min-height:100vh}.page{padding:24px;max-width:800px;margin:0 auto;display:none}.page.active{display:block}.topbar{display:none;position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--border);padding:12px 16px;z-index:50;align-items:center;gap:12px}.hamburger{font-size:22px;cursor:pointer;color:var(--text);background:none;border:none;padding:4px}
@media(max-width:768px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.sidebar-overlay.open{display:block}.main{margin-left:0}.topbar{display:flex}.page{padding:16px}}

/* Sidebar */
.sb-profile{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;cursor:pointer}.sb-profile:hover{background:rgba(255,255,255,.02)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:16px;overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover}
.nav-item{display:flex;align-items:center;padding:10px 16px;margin:2px 8px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text);transition:.2s}.nav-item:hover{background:rgba(255,255,255,.03)}.nav-item.active{background:var(--accent-g);color:var(--accent);font-weight:700}.nav-item.active::before{content:'';width:3px;height:18px;background:var(--accent);border-radius:2px;margin-right:10px}
.nav-sep{height:1px;background:var(--border);margin:8px 16px}.nav-footer{margin-top:auto;padding:16px;border-top:1px solid var(--border);text-align:center}.nav-logout{font-size:13px;color:var(--red);font-weight:600;cursor:pointer;padding:8px;margin-top:8px;display:block;background:none;border:none}

/* Components */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border:none;border-radius:8px;font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;transition:.2s}.btn:hover{opacity:.85}.btn-p{background:var(--accent);color:#fff}.btn-s{background:var(--card);color:var(--text);border:1px solid var(--border)}.btn-d{background:var(--red);color:#fff}.btn-sm{padding:6px 14px;font-size:12px}.btn-full{width:100%}.btn-water{border-color:rgba(79,195,247,.4);color:var(--water)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px;transition:border-color .2s}.card-click{cursor:pointer}.card-click:hover{border-color:rgba(255,255,255,.15)}
.input-group{margin-bottom:14px}.input-group label{display:block;font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.input-group input,.input-group textarea,.input-group select{width:100%;padding:10px 14px;background:var(--input);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;outline:none}.input-group input:focus,.input-group textarea:focus{border-color:var(--accent)}.input-row{display:flex;gap:12px}.input-row>.input-group{flex:1}
.sec-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.sec-title{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.empty{text-align:center;padding:40px;color:var(--text3)}.empty-title{font-size:16px;font-weight:600;margin-top:8px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;margin-bottom:20px}.stat-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;text-align:center}.stat-num{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--accent)}.stat-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;margin-top:4px}
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-80px);background:var(--card);border:1px solid var(--green);color:var(--green);padding:10px 24px;border-radius:8px;font-size:14px;font-weight:600;z-index:300;transition:.3s}.toast.show{transform:translateX(-50%) translateY(0)}.toast.err{border-color:var(--red);color:var(--red)}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:flex-end;justify-content:center;z-index:200}.modal-bg.active{display:flex}.modal-box{background:var(--card);border:1px solid var(--border);border-radius:16px 16px 0 0;padding:24px;width:100%;max-width:500px;max-height:80vh;overflow-y:auto}
.back-btn{display:inline-flex;align-items:center;gap:6px;color:var(--text2);font-size:14px;cursor:pointer;margin-bottom:16px;background:none;border:none;font-family:var(--font)}.back-btn:hover{color:var(--text)}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-box{width:100%;max-width:380px;text-align:center}.login-box h1{font-size:32px;font-weight:900;color:var(--accent);margin-bottom:8px}.login-box p{color:var(--text2);margin-bottom:24px}.login-box .input-group{text-align:left}.login-tabs{display:flex;gap:8px;margin-bottom:20px}.login-tab{flex:1;padding:10px;border-radius:8px;background:var(--card);border:1px solid var(--border);text-align:center;cursor:pointer;font-weight:600;color:var(--text2)}.login-tab.active{border-color:var(--accent);color:var(--accent);background:var(--accent-g)}.login-error{color:var(--red);font-size:13px;margin-bottom:12px}

/* Ring */
.ring-wrap{position:relative;width:140px;height:140px;margin:16px auto}.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.ring-num{font-family:var(--mono);font-size:26px;font-weight:700}.ring-sub{font-family:var(--mono);font-size:12px;color:var(--text3)}.ring-lbl{font-size:10px;color:var(--text2);margin-top:3px}

/* Pills */
.pills{display:flex;gap:8px;margin-bottom:16px}.pill{flex:1;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px;text-align:center}.pill-val{font-family:var(--mono);font-size:14px;font-weight:700}.pill-lbl{font-size:9px;color:var(--text2);text-transform:uppercase;margin-top:2px}.pill-bar{width:100%;height:3px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden}.pill-fill{height:3px;border-radius:2px}

/* Water */
.water-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:16px;display:flex;align-items:center;gap:14px}.water-btns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.water-btn{padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:var(--input);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--mono)}.water-btn:hover{border-color:var(--water);color:var(--water)}

/* Meal */
.meal-actions{display:flex;gap:8px;margin-top:10px;border-top:1px solid var(--border);padding-top:10px}.meal-act{flex:1;padding:8px;border-radius:6px;text-align:center;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--input);color:var(--accent)}.meal-act:hover{border-color:var(--accent)}.meal-act.del{border-color:rgba(255,71,87,.3);background:rgba(255,71,87,.08);color:var(--red)}

/* History */
.hist-row{display:flex;gap:8px;align-items:stretch;margin-bottom:8px}.hist-row .card{flex:1;margin-bottom:0}.hist-del{width:34px;background:var(--red);border-radius:var(--r);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:18px;font-weight:700}.hist-stats{display:flex;gap:12px;font-size:13px;color:var(--text2);flex-wrap:wrap}.hist-stats b{color:var(--text);font-family:var(--mono)}.hist-rating{font-size:11px;background:var(--input);padding:2px 8px;border-radius:10px}.hist-note{font-size:12px;color:var(--text3);font-style:italic;margin-top:6px}

/* Exercise card */
.ex-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.ex-badge{width:24px;height:24px;border-radius:12px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;font-family:var(--mono)}.ex-name{font-weight:700;flex:1}.ex-meta{font-family:var(--mono);font-size:11px;color:var(--text3)}
.set-tbl{width:100%;border-collapse:collapse}.set-tbl th{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;text-align:center;padding:6px}.set-tbl td{padding:4px}.set-tbl input{width:100%;background:var(--input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:14px;font-family:var(--mono);padding:8px 6px;text-align:center;outline:none}.set-tbl input:focus{border-color:var(--accent)}
.check-btn{width:36px;height:36px;border-radius:18px;border:2px solid var(--border);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:none;color:var(--text3);font-weight:700;font-size:14px}.check-btn.done{border-color:var(--green);background:var(--green-g);color:var(--green)}

/* Period selector */
.period-row{display:flex;gap:8px;margin-bottom:16px}.period-btn{flex:1;padding:8px;border-radius:8px;background:var(--card);border:1px solid var(--border);text-align:center;cursor:pointer;font-weight:600;font-size:14px;color:var(--text2)}.period-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-g)}

/* Group card */
.group-card{border-left:3px solid var(--accent);cursor:pointer}.group-card:hover{border-color:rgba(255,255,255,.15);border-left-color:var(--accent)}

/* Photo modal */
.photo-modal{position:fixed;inset:0;background:rgba(0,0,0,.95);display:none;align-items:center;justify-content:center;z-index:250;cursor:pointer}.photo-modal.active{display:flex}.photo-modal img{max-width:90%;max-height:80%;object-fit:contain;border-radius:8px}