@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Outfit:wght@300;400;500;600&display=swap');

/* ═══════════════════════════════════════
   COHAB — DESIGN SYSTEM
═══════════════════════════════════════ */
:root {
  --accent:       var(--ca, #6366f1);
  --accent-h:     var(--ca-h, #818cf8);
  --accent-pale:  var(--ca-pale, rgba(99,102,241,.14));
  --accent2:      var(--ca2, #06d6a0);
  --accent2-pale: var(--ca2-pale, rgba(6,214,160,.12));
  --red:   #ef4444; --red-pale:  rgba(239,68,68,.13);
  --yellow:#f59e0b; --yellow-pale:rgba(245,158,11,.13);
  --orange:#f97316; --orange-pale:rgba(249,115,22,.13);
  --green: #22c55e; --green-pale: rgba(34,197,94,.13);
  --blue:  #3b82f6; --blue-pale:  rgba(59,130,246,.13);
  --pink:  #ec4899; --pink-pale:  rgba(236,72,153,.13);
  --r:14px; --rs:10px; --rx:6px; --rxx:4px;
  --fw:260px; --fd:'Syne',sans-serif; --fb:'Outfit',sans-serif;
  --tr:.18s cubic-bezier(.4,0,.2,1);
}

body,body.dark {
  --bg0:#0a0c12; --bg1:#0f1117; --bg2:#161b27; --bg3:#1e2235;
  --card:#1e2235; --card2:#252b40; --input:#161b27;
  --border:#2d3454; --border2:#3d4574;
  --t1:#e8eaf6; --t2:#8892b0; --t3:#4a5180;
  --sh:0 4px 24px rgba(0,0,0,.45); --sh-lg:0 12px 48px rgba(0,0,0,.6);
  --sh-glow:0 0 32px rgba(99,102,241,.18);
}
body.light {
  --bg0:#eef0f8; --bg1:#f4f6fb; --bg2:#fff; --bg3:#f8f9fe;
  --card:#fff; --card2:#f4f6fb; --input:#eef0f8;
  --border:#e2e6f0; --border2:#cdd4e8;
  --t1:#1a1f36; --t2:#5a6280; --t3:#9ba3bf;
  --sh:0 4px 16px rgba(0,0,0,.07); --sh-lg:0 12px 40px rgba(0,0,0,.12);
  --sh-glow:0 0 24px rgba(99,102,241,.12);
  --accent-pale:rgba(99,102,241,.1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{font-family:var(--fb);background:var(--bg1);color:var(--t1);min-height:100vh;font-size:15px;line-height:1.6;overflow-x:hidden;transition:background .3s,color .3s}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}
img{max-width:100%;border-radius:var(--rx)}
a{color:var(--accent);text-decoration:none}
input[type=color]{-webkit-appearance:none;border:none;padding:0;cursor:pointer;border-radius:var(--rx);overflow:hidden}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--rx)}

/* ── AUTH ── */
#authScreen{display:flex;align-items:center;justify-content:center;min-height:100vh;position:relative;overflow:hidden}
.auth-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 15% 50%,rgba(99,102,241,.12),transparent 55%),radial-gradient(ellipse at 85% 20%,rgba(6,214,160,.08),transparent 50%);pointer-events:none}
.auth-wrap{position:relative;z-index:1;display:flex;gap:3rem;align-items:center;max-width:900px;width:95%;padding:1rem}
.auth-brand{flex:1;display:none}
@media(min-width:700px){.auth-brand{display:block}}
.auth-brand-logo{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem}
.auth-brand-logo img{width:52px;height:52px}
.auth-brand-name{font-family:var(--fd);font-size:2.2rem;font-weight:800;letter-spacing:-1px}
.auth-brand-name span{color:var(--accent)}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.auth-brand-tagline{font-size:1rem;color:var(--t2);margin-bottom:2rem;line-height:1.5}
.auth-feature{display:flex;align-items:center;gap:.75rem;margin-bottom:.8rem;color:var(--t2);font-size:.9rem}
.auth-feature-icon{font-size:1.2rem;width:32px;text-align:center}
.auth-box{background:var(--card);border:1.5px solid var(--border);border-radius:20px;padding:2rem;width:380px;max-width:100%;box-shadow:var(--sh-lg),var(--sh-glow);animation:fadeUp .4s ease both}
.auth-box-logo{display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem}
.auth-box-logo img{width:36px;height:36px}
.auth-box-name{font-family:var(--fd);font-size:1.5rem;font-weight:800;letter-spacing:-.5px}
.auth-box-name span{color:var(--accent)}
.auth-tabs{display:flex;background:var(--bg3);border-radius:var(--rs);padding:3px;gap:3px;margin-bottom:1.6rem;border:1.5px solid var(--border)}
.auth-tab{flex:1;padding:.5rem;border-radius:8px;border:none;background:none;color:var(--t2);cursor:pointer;font-family:var(--fb);font-size:.9rem;font-weight:500;transition:all var(--tr)}
.auth-tab.on{background:var(--accent);color:#fff}
.auth-avatar-row{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1rem}
.av-btn{font-size:1.5rem;background:var(--bg3);border:2px solid var(--border);border-radius:50%;width:46px;height:46px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--tr);flex-shrink:0}
.av-btn.on{border-color:var(--accent);background:var(--accent-pale)}
.av-upload{font-size:.7rem;font-family:var(--fb)}
.remember-row{display:flex;align-items:center;gap:.6rem;margin:.6rem 0;font-size:.88rem;color:var(--t2);cursor:pointer}
.remember-row input{accent-color:var(--accent);cursor:pointer}

/* ── APP SHELL ── */
#app{display:none;height:100vh;overflow:hidden}
#app.on{display:flex}
.sidebar{width:var(--fw);background:var(--bg0);border-right:1.5px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:50;overflow:hidden;transition:transform var(--tr),background .3s}
.sidebar-top{padding:1rem .75rem .5rem;flex-shrink:0;position:relative}
.sidebar-logo{display:flex;align-items:center;gap:.6rem;padding:.3rem .5rem;margin-bottom:.5rem}
.sidebar-logo img{width:28px;height:28px}
.sidebar-logo-name{font-family:var(--fd);font-size:1.2rem;font-weight:800;letter-spacing:-.5px}
.sidebar-logo-name span{color:var(--accent)}
.dorm-selector{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;background:var(--accent-pale);border:1px solid rgba(99,102,241,.25);border-radius:var(--rs);cursor:pointer;margin-bottom:.5rem;transition:all var(--tr)}
.dorm-selector:hover{background:rgba(99,102,241,.2)}
.dorm-icon{font-size:1.2rem;flex-shrink:0}
.dorm-name{font-weight:600;font-size:.88rem;color:var(--accent-h);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dorm-chevron{font-size:.85rem;color:var(--t2);padding:.25rem .4rem;border-radius:var(--rx);transition:background var(--tr);cursor:pointer;flex-shrink:0;margin-left:auto}
.dorm-chevron:hover{background:rgba(99,102,241,.25)}
.sidebar-scroll{flex:1;overflow-y:auto;padding:0 .5rem .5rem}
.sb-section{padding:.5rem .3rem .2rem .8rem;font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);display:flex;align-items:center;justify-content:space-between}
.sb-add{background:none;border:none;cursor:pointer;color:var(--t3);font-size:.85rem;padding:2px 4px;border-radius:4px;transition:all var(--tr)}
.sb-add:hover{color:var(--t1);background:var(--bg3)}
.nav-it{display:flex;align-items:center;gap:.65rem;padding:.52rem .9rem;border-radius:var(--rs);margin:1px 0;cursor:pointer;color:var(--t2);font-size:.88rem;font-weight:500;transition:all var(--tr);position:relative;user-select:none}
.nav-it:hover{background:var(--bg3);color:var(--t1)}
.nav-it.on{background:var(--accent-pale);color:var(--accent-h)}
.nav-it.on::before{content:'';position:absolute;left:-.5rem;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--accent);border-radius:99px}
.nav-icon{font-size:.95rem;width:18px;text-align:center;flex-shrink:0}
.nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-badge{background:var(--accent);color:#fff;font-size:.65rem;font-weight:700;padding:1px 6px;border-radius:99px;min-width:16px;text-align:center;flex-shrink:0}
.nav-badge.red{background:var(--red)}
.dm-item{display:flex;align-items:center;gap:.65rem;padding:.45rem .9rem;border-radius:var(--rs);cursor:pointer;transition:all var(--tr)}
.dm-item:hover{background:var(--bg3)}
.dm-av{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--accent-pale);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;overflow:hidden}
.dm-name{font-size:.87rem;color:var(--t2);flex:1}
.dm-unread{background:var(--red);color:#fff;font-size:.65rem;font-weight:700;padding:1px 5px;border-radius:99px}
.sidebar-user{flex-shrink:0;border-top:1.5px solid var(--border);padding:.8rem .75rem;display:flex;align-items:center;gap:.65rem;cursor:pointer;transition:background var(--tr)}
.sidebar-user:hover{background:var(--bg2)}
.user-av{width:34px;height:34px;border-radius:50%;background:var(--accent-pale);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;overflow:hidden;object-fit:cover}
.user-name{font-weight:600;font-size:.87rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-xp{font-size:.72rem;color:var(--yellow)}
.sidebar-actions{display:flex;gap:.3rem;flex-shrink:0}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--t3);font-size:1rem;width:28px;height:28px;border-radius:var(--rx);display:flex;align-items:center;justify-content:center;transition:all var(--tr)}
.icon-btn:hover{color:var(--t1);background:var(--bg3)}

/* ── MAIN ── */
.main{margin-left:var(--fw);flex:1;height:100vh;overflow:hidden;display:flex;flex-direction:column;background:var(--bg1);transition:background .3s}
.top-bar{height:52px;border-bottom:1.5px solid var(--border);padding:0 1.5rem;display:flex;align-items:center;gap:1rem;flex-shrink:0;background:var(--bg1);transition:background .3s}
.top-bar-title{font-family:var(--fd);font-weight:700;font-size:1rem;display:flex;align-items:center;gap:.5rem}
.top-bar-actions{display:flex;gap:.4rem;margin-left:auto;align-items:center}
.search-bar{display:flex;align-items:center;gap:.5rem;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--rs);padding:.35rem .9rem;font-size:.87rem;color:var(--t2);cursor:pointer;transition:all var(--tr)}
.search-bar:hover{border-color:var(--border2)}
.page-content{flex:1;overflow-y:auto;padding:1.5rem}
.page-content.noPad{padding:0}
.page{display:none}
.page.on{display:block;animation:fadeUp .25s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── PAGE HEADER ── */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.ph-title{font-family:var(--fd);font-size:1.6rem;font-weight:800;letter-spacing:-.5px}
.ph-sub{color:var(--t2);font-size:.85rem;margin-top:.15rem}
.ph-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

/* ── CARDS ── */
.card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);padding:1.3rem;box-shadow:var(--sh);transition:background .3s,border-color .3s}
.card-title{font-family:var(--fd);font-size:.92rem;font-weight:700;margin-bottom:.9rem;display:flex;align-items:center;gap:.45rem;color:var(--t1)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.9rem;margin-bottom:1.4rem}
.stat-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);padding:1.1rem 1.3rem;position:relative;overflow:hidden;transition:transform var(--tr),box-shadow var(--tr),background .3s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r) var(--r) 0 0}
.stat-card.indigo::before{background:var(--accent)}.stat-card.green::before{background:var(--green)}
.stat-card.red::before{background:var(--red)}.stat-card.yellow::before{background:var(--yellow)}
.stat-card.teal::before{background:var(--accent2)}.stat-card.blue::before{background:var(--blue)}
.stat-val{font-family:var(--fd);font-size:1.75rem;font-weight:800;letter-spacing:-1px;line-height:1}
.stat-lbl{color:var(--t2);font-size:.78rem;margin-top:.3rem}
.stat-ico{position:absolute;right:1rem;top:1rem;font-size:1.4rem;opacity:.18}

/* ── GRID ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.g-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:var(--rs);border:none;cursor:pointer;font-family:var(--fb);font-size:.88rem;font-weight:600;transition:all var(--tr);white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 4px 14px rgba(99,102,241,.35)}
.btn-teal{background:var(--accent2);color:#0a0c12}.btn-teal:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--bg3);color:var(--t1);border:1.5px solid var(--border)}.btn-ghost:hover{background:var(--card2);border-color:var(--border2)}
.btn-danger{background:var(--red-pale);color:var(--red);border:1.5px solid rgba(239,68,68,.25)}.btn-danger:hover{background:rgba(239,68,68,.2)}
.btn-success{background:var(--green-pale);color:var(--green);border:1.5px solid rgba(34,197,94,.25)}.btn-success:hover{background:rgba(34,197,94,.22)}
.btn-warn{background:var(--yellow-pale);color:var(--yellow);border:1.5px solid rgba(245,158,11,.25)}.btn-warn:hover{background:rgba(245,158,11,.22)}
.btn-sm{padding:.32rem .7rem;font-size:.8rem}
.btn-xs{padding:.2rem .5rem;font-size:.74rem;border-radius:var(--rx)}
.btn-icon{padding:.42rem;border-radius:var(--rx);aspect-ratio:1}

/* ── FORM ── */
.inp,.sel,.ta{width:100%;background:var(--input);border:1.5px solid var(--border);border-radius:var(--rs);padding:.6rem .9rem;color:var(--t1);font-family:var(--fb);font-size:.9rem;outline:none;transition:border-color var(--tr),background .3s}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--accent)}
.inp::placeholder{color:var(--t3)}
.lbl{display:block;font-size:.75rem;font-weight:600;color:var(--t2);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.06em}
.fg{margin-bottom:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.sel{cursor:pointer;-webkit-appearance:none}.sel option{background:var(--card)}
.ta{resize:vertical;min-height:80px}
.inp-with-btn{display:flex;gap:.5rem}
.inp-with-btn .inp{flex:1}
.color-swatch{width:36px;height:36px;border-radius:var(--rx);border:2px solid var(--border);cursor:pointer;flex-shrink:0}
.checkbox-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}
.checkbox-chip{display:flex;align-items:center;gap:.35rem;background:var(--bg3);padding:.3rem .7rem;border-radius:var(--rx);cursor:pointer;font-size:.85rem;border:1.5px solid var(--border);transition:all var(--tr);user-select:none}
.checkbox-chip.on{background:var(--accent-pale);border-color:rgba(99,102,241,.4);color:var(--accent-h)}
.checkbox-chip input{display:none}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:99px}
.b-purple{background:var(--accent-pale);color:var(--accent-h)}
.b-teal{background:var(--accent2-pale);color:var(--accent2)}
.b-green{background:var(--green-pale);color:var(--green)}
.b-red{background:var(--red-pale);color:var(--red)}
.b-yellow{background:var(--yellow-pale);color:var(--yellow)}
.b-blue{background:var(--blue-pale);color:var(--blue)}
.b-orange{background:var(--orange-pale);color:var(--orange)}
.b-pink{background:var(--pink-pale);color:var(--pink)}

/* ── TABS ── */
.tabs{display:flex;gap:.25rem;margin-bottom:1.4rem;background:var(--bg3);padding:3px;border-radius:var(--rs);width:fit-content;border:1.5px solid var(--border)}
.tab-btn{padding:.44rem .95rem;border-radius:8px;border:none;cursor:pointer;font-family:var(--fb);font-size:.85rem;font-weight:600;color:var(--t2);background:none;transition:all var(--tr)}
.tab-btn.on{background:var(--accent);color:#fff}

/* ── PROGRESS ── */
.prog-wrap{margin:.4rem 0 .2rem}
.prog-lbl{display:flex;justify-content:space-between;font-size:.78rem;color:var(--t2);margin-bottom:.3rem}
.prog-bar{height:7px;background:var(--bg3);border-radius:99px;overflow:hidden}
.prog-fill{height:100%;border-radius:99px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.xp-bar-fill{background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* ── DIVIDER ── */
.divider{border:none;border-top:1.5px solid var(--border);margin:1.1rem 0}

/* ── TASK ITEMS ── */
.task-it{display:flex;align-items:flex-start;gap:.8rem;padding:.8rem 1rem;border:1.5px solid var(--border);border-radius:var(--rs);background:var(--card2);margin-bottom:.45rem;transition:all var(--tr)}
.task-it:hover{border-color:var(--border2);background:var(--card)}
.task-check{width:20px;height:20px;border-radius:5px;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;font-size:.75rem;transition:all var(--tr);margin-top:2px}
.task-check.on{background:var(--accent);border-color:var(--accent);color:#fff}
.task-body{flex:1;min-width:0}
.task-title{font-weight:500;font-size:.92rem}
.task-meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.35rem;align-items:center}
.xp-chip{font-size:.72rem;font-weight:700;background:var(--yellow-pale);color:var(--yellow);border-radius:99px;padding:1px 7px}
.overdue-chip{font-size:.72rem;font-weight:700;background:var(--red-pale);color:var(--red);border-radius:99px;padding:1px 7px}
.assignees{display:flex;gap:-4px}
.assignee-av{width:22px;height:22px;border-radius:50%;background:var(--accent-pale);border:2px solid var(--card2);display:flex;align-items:center;justify-content:center;font-size:.7rem;margin-left:-4px;flex-shrink:0;overflow:hidden;object-fit:cover}
.assignee-av:first-child{margin-left:0}

/* ── TASK BOARD (no "Kanban" name) ── */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start}
.board-col{background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r);padding:.9rem;min-height:280px;transition:all var(--tr)}
.board-col.over{border-color:var(--accent);background:var(--accent-pale)}
.board-col-hd{display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem;padding-bottom:.75rem;border-bottom:1.5px solid var(--border)}
.board-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.board-col-name{font-family:var(--fd);font-weight:700;font-size:.9rem;flex:1}
.board-cnt{background:var(--bg2);color:var(--t2);font-size:.72rem;font-weight:700;padding:1px 7px;border-radius:99px;border:1.5px solid var(--border)}
.board-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--rs);padding:.85rem;margin-bottom:.5rem;cursor:grab;transition:all var(--tr);box-shadow:var(--sh);user-select:none}
.board-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--sh-lg)}
.board-card.dragging{opacity:.35;cursor:grabbing}
.board-card-title{font-weight:600;font-size:.9rem;margin-bottom:.5rem}
.board-card-meta{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.board-card-actions{display:flex;gap:.3rem;margin-top:.55rem;padding-top:.5rem;border-top:1px solid var(--border)}

/* ── BILLS ── */
.bill-it{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.1rem;border:1.5px solid var(--border);border-radius:var(--rs);background:var(--card2);margin-bottom:.5rem;transition:all var(--tr)}
.bill-it:hover{border-color:var(--border2)}
.bill-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;background:var(--bg3)}
.bill-title{font-weight:600;font-size:.92rem}
.bill-sub{font-size:.77rem;color:var(--t2);margin-top:.1rem}
.bill-amt{margin-left:auto;font-family:var(--fd);font-size:1.1rem;font-weight:800}
.bill-pp{font-size:.76rem;color:var(--t2);text-align:right;margin-top:.1rem}
.debt-it{display:flex;align-items:center;gap:.75rem;background:var(--card2);border:1.5px solid var(--border);border-radius:var(--rs);padding:.65rem .9rem;margin-bottom:.45rem}
.debt-amt{font-family:var(--fd);font-weight:800}.debt-amt.owe{color:var(--red)}.debt-amt.owed{color:var(--green)}
.settle-btn{background:var(--green-pale);color:var(--green);border:1.5px solid rgba(34,197,94,.25);border-radius:var(--rx);padding:.25rem .65rem;font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--fb);transition:all var(--tr)}
.settle-btn:hover{background:rgba(34,197,94,.22)}

/* ── SHOPPING ── */
.shop-it{display:flex;align-items:center;gap:.7rem;padding:.65rem .85rem;border-radius:var(--rs);margin-bottom:.32rem;background:var(--card2);border:1.5px solid var(--border);transition:all var(--tr)}
.shop-it .av-img,.shop-it .av-em{width:24px!important;height:24px!important;font-size:.85rem!important;flex-shrink:0}
.shop-it.done{opacity:.45}.shop-it.done .shop-name{text-decoration:line-through}
.shop-chk{width:19px;height:19px;border-radius:4px;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:.72rem;transition:all var(--tr)}
.shop-chk.on{background:var(--accent2);border-color:var(--accent2);color:#0a0c12}
.shop-name{flex:1;font-size:.9rem}
.shop-cat{font-size:.7rem;padding:1px 7px;border-radius:99px;background:var(--bg3);color:var(--t2);white-space:nowrap}

/* ── FRIDGE ── */
.fridge-it{padding:.85rem 1rem;border-radius:var(--rs);background:var(--card2);border:1.5px solid var(--border);margin-bottom:.45rem;display:flex;align-items:center;gap:.75rem;transition:all var(--tr)}
.fridge-it:hover{border-color:var(--border2)}
.exp-badge{font-size:.72rem;font-weight:600;padding:2px 7px;border-radius:99px;white-space:nowrap}
.exp-ok{background:var(--green-pale);color:var(--green)}.exp-soon{background:var(--yellow-pale);color:var(--yellow)}.exp-bad{background:var(--red-pale);color:var(--red)}

/* ── LEADERBOARD ── */
.lb-it{display:flex;align-items:center;gap:.85rem;padding:.8rem .95rem;border-radius:var(--rs);margin-bottom:.45rem;background:var(--card2);border:1.5px solid var(--border);transition:all var(--tr)}
.lb-it.me{border-color:rgba(99,102,241,.4);background:var(--accent-pale)}
.lb-rank{font-family:var(--fd);font-size:1.1rem;font-weight:800;width:26px;text-align:center;flex-shrink:0}
.lb-rank.gold{color:var(--yellow)}.lb-rank.silver{color:#bcc6d4}.lb-rank.bronze{color:#cd7f32}
.lb-name{flex:1;font-weight:600;font-size:.9rem}
.lb-xp{font-family:var(--fd);font-weight:800;color:var(--yellow);font-size:.9rem}

/* ── CHAT ── */
.chat-layout{display:flex;flex-direction:column;height:calc(100vh - 52px)}
.chat-messages{flex:1;overflow-y:auto;padding:1rem 1.5rem;display:flex;flex-direction:column;gap:.15rem}
.msg-group{display:flex;gap:.75rem;padding:.35rem 0;align-items:flex-start}
.msg-group:hover .msg-actions{opacity:1}
.msg-av{width:36px;height:36px;border-radius:50%;background:var(--accent-pale);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;overflow:hidden;object-fit:cover;margin-top:2px}
.msg-body{flex:1;min-width:0}
.msg-header{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.15rem}
.msg-author{font-weight:700;font-size:.9rem}
.msg-ts{font-size:.72rem;color:var(--t3)}
.msg-edited{font-size:.7rem;color:var(--t3);font-style:italic}
.msg-text{font-size:.92rem;line-height:1.55;word-break:break-word;color:var(--t1)}
.msg-text.deleted{color:var(--t3);font-style:italic}
.msg-image{max-width:320px;border-radius:var(--rs);margin-top:.4rem;cursor:pointer;border:1.5px solid var(--border)}
.msg-reactions{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.35rem}
.reaction-chip{display:flex;align-items:center;gap:.25rem;background:var(--bg3);border:1.5px solid var(--border);border-radius:99px;padding:2px 8px;font-size:.82rem;cursor:pointer;transition:all var(--tr)}
.reaction-chip:hover{border-color:var(--accent)}.reaction-chip.mine{background:var(--accent-pale);border-color:rgba(99,102,241,.4)}
.msg-actions{display:flex;gap:.2rem;opacity:0;position:absolute;right:.5rem;top:-.3rem;background:var(--card);border:1.5px solid var(--border);border-radius:var(--rs);padding:.2rem .3rem;box-shadow:var(--sh);transition:opacity var(--tr);z-index:10}
.msg-group{position:relative}
.chat-input-area{border-top:1.5px solid var(--border);padding:.85rem 1.5rem;background:var(--bg1);flex-shrink:0}
.chat-input-wrap{display:flex;gap:.6rem;align-items:flex-end;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r);padding:.5rem .75rem;transition:border-color var(--tr)}
.chat-input-wrap:focus-within{border-color:var(--accent)}
.chat-input{flex:1;background:none;border:none;outline:none;color:var(--t1);font-family:var(--fb);font-size:.92rem;resize:none;max-height:120px;line-height:1.5}
.chat-input::placeholder{color:var(--t3)}
.chat-actions{display:flex;gap:.2rem;align-items:flex-end;flex-shrink:0}
.chat-search{padding:.85rem 1.5rem;border-bottom:1.5px solid var(--border);background:var(--bg2)}

/* ── POLL (Discord-style) ── */
.poll-msg{background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--rs);padding:1rem 1.1rem;margin-top:.4rem;max-width:420px}
.poll-q{font-weight:700;font-size:.95rem;margin-bottom:.8rem}
.poll-options{display:flex;flex-direction:column;gap:.4rem}
.poll-opt{position:relative;display:flex;align-items:center;gap:.65rem;padding:.55rem .8rem;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--rx);cursor:pointer;overflow:hidden;transition:all var(--tr)}
.poll-opt:hover{border-color:var(--accent)}.poll-opt.voted{border-color:var(--accent)}
.poll-opt-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent-pale);transition:width .5s ease;pointer-events:none}
.poll-opt-label{position:relative;z-index:1;flex:1;font-size:.88rem}
.poll-opt-pct{position:relative;z-index:1;font-size:.78rem;color:var(--t2);font-weight:600;min-width:35px;text-align:right}
.poll-opt-check{position:relative;z-index:1;font-size:.8rem;color:var(--accent);flex-shrink:0}
.poll-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.7rem;font-size:.76rem;color:var(--t3)}

/* ── BUDGET ── */
.bud-cat{display:flex;align-items:center;gap:.75rem;padding:.7rem .95rem;background:var(--card2);border:1.5px solid var(--border);border-radius:var(--rs);margin-bottom:.45rem;transition:all var(--tr)}
.bud-cat:hover{border-color:var(--border2)}
.bud-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.bud-cat-name{flex:1;font-weight:500;font-size:.88rem}
.bud-bars{flex:2;display:flex;flex-direction:column;gap:3px}
.bud-bar-row{display:flex;align-items:center;gap:5px}
.bud-bar-lbl{font-size:.64rem;color:var(--t3);width:36px;text-align:right}
.bud-bar{flex:1;height:4px;background:var(--bg3);border-radius:99px;overflow:hidden}
.bud-bar-fill{height:100%;border-radius:99px;transition:width .6s ease}
.bud-amt{font-weight:700;font-size:.85rem;min-width:58px;text-align:right}
.insight{display:flex;align-items:flex-start;gap:.7rem;padding:.8rem 1rem;border-radius:var(--rs);margin-bottom:.5rem;border:1.5px solid transparent}
.insight.up{background:var(--red-pale);border-color:rgba(239,68,68,.18)}
.insight.down{background:var(--green-pale);border-color:rgba(34,197,94,.18)}
.insight.neutral{background:var(--blue-pale);border-color:rgba(59,130,246,.18)}
.insight-icon{font-size:1.2rem;flex-shrink:0;margin-top:.1rem}
.insight-title{font-weight:700;font-size:.88rem;margin-bottom:.12rem}
.insight-text{font-size:.84rem;line-height:1.45}

/* ── CALENDAR ── */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:.8rem}
.cal-day-hd{font-size:.68rem;font-weight:700;color:var(--t3);padding:3px;text-transform:uppercase;letter-spacing:.05em}
.cal-day{padding:5px 3px;border-radius:6px;cursor:pointer;position:relative;min-height:32px;display:flex;align-items:flex-start;justify-content:center;transition:background .15s;line-height:1}
.cal-day:hover{background:var(--bg3)}.cal-day.today{background:var(--accent-pale);border:1.5px solid var(--accent);font-weight:700;color:var(--accent-h)}
.cal-day.other-month{opacity:.3}
.cal-dot-row{display:flex;gap:2px;position:absolute;bottom:2px;left:50%;transform:translateX(-50%)}
.cal-dot{width:4px;height:4px;border-radius:50%}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.cal-month{font-family:var(--fd);font-weight:700;font-size:1rem}
.event-it{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;background:var(--card2);border:1.5px solid var(--border);border-radius:var(--rs);margin-bottom:.4rem}

/* ── PROFILE ── */
.profile-header{display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.profile-av-wrap{position:relative;flex-shrink:0}
.profile-av{width:96px;height:96px;border-radius:50%;background:var(--accent-pale);border:3px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:2.5rem;overflow:hidden;object-fit:cover}
.profile-av-edit{position:absolute;bottom:0;right:0;background:var(--accent);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.8rem;border:2px solid var(--bg1)}
.profile-info{flex:1}
.profile-display{font-family:var(--fd);font-size:1.7rem;font-weight:800;letter-spacing:-.5px}
.profile-username{color:var(--t2);font-size:.88rem;margin-top:.1rem}
.profile-bio{color:var(--t2);font-size:.9rem;margin-top:.5rem;line-height:1.5}
.profile-stats-row{display:flex;gap:1.2rem;margin-top:.8rem;flex-wrap:wrap}
.profile-stat{text-align:center}
.profile-stat-val{font-family:var(--fd);font-size:1.2rem;font-weight:800}
.profile-stat-lbl{font-size:.72rem;color:var(--t2)}
.ach-card{display:flex;align-items:center;gap:.75rem;padding:.65rem .9rem;background:var(--card2);border:1.5px solid var(--border);border-radius:var(--rs);margin-bottom:.4rem}
.ach-locked{opacity:.35;filter:grayscale(1)}

/* ── LOG CHANNEL ── */
.log-it{display:flex;align-items:flex-start;gap:.7rem;padding:.6rem .8rem;border-left:3px solid var(--border);margin-bottom:.3rem;border-radius:0 var(--rx) var(--rx) 0;background:var(--card2);font-size:.85rem}
.log-it.task{border-left-color:var(--accent)}.log-it.bill{border-left-color:var(--yellow)}.log-it.chat{border-left-color:var(--accent2)}.log-it.join{border-left-color:var(--green)}.log-it.leave{border-left-color:var(--red)}
.log-ts{font-size:.72rem;color:var(--t3);white-space:nowrap;flex-shrink:0;margin-top:.15rem}

/* ── ANNOUNCEMENT / STATUS ── */
.ann-it{display:flex;align-items:flex-start;gap:.8rem;padding:.9rem 1.1rem;border-radius:var(--rs);margin-bottom:.5rem;border:1.5px solid var(--border);background:var(--card2)}

/* ── ROTATION ── */
.rot-it{display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;background:var(--card2);border:1.5px solid var(--border);border-radius:var(--rs);margin-bottom:.45rem}

/* ── SETTINGS ── */
.settings-section{margin-bottom:1.8rem}
.settings-section-title{font-family:var(--fd);font-weight:700;font-size:1rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;color:var(--t1)}
.settings-row{display:flex;align-items:center;gap:.9rem;padding:.75rem 1rem;background:var(--card2);border:1.5px solid var(--border);border-radius:var(--rs);margin-bottom:.4rem}
.settings-row-label{flex:1}
.settings-row-title{font-weight:600;font-size:.9rem}
.settings-row-sub{font-size:.8rem;color:var(--t2);margin-top:.1rem}
.toggle-wrap{display:flex;align-items:center;gap:.6rem}
.toggle{position:relative;width:42px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-sl{position:absolute;inset:0;background:var(--border2);border-radius:99px;cursor:pointer;transition:all .3s}
.toggle-sl::before{content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:all .3s}
.toggle input:checked+.toggle-sl{background:var(--accent)}
.toggle input:checked+.toggle-sl::before{transform:translateX(20px)}
.wall-item{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;background:var(--card2);border:1.5px solid var(--border);border-radius:var(--rs);margin-bottom:.35rem;cursor:default}
.wall-drag{cursor:grab;color:var(--t3);font-size:.85rem}
.wall-icon-inp{width:36px;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--rx);padding:.25rem .3rem;text-align:center;font-size:1rem;color:var(--t1);outline:none}
.wall-name-inp{flex:1;background:none;border:none;outline:none;font-family:var(--fb);font-size:.9rem;color:var(--t1)}
.color-picker-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.preset-color{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all var(--tr)}
.preset-color.on,.preset-color:hover{border-color:var(--t1);transform:scale(1.1)}

/* ── NOTIFICATIONS ── */
.notif-panel{position:fixed;top:52px;right:1rem;width:320px;max-height:480px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-lg);z-index:100;overflow:hidden;display:none;animation:fadeUp .2s ease both}
.notif-panel.on{display:flex;flex-direction:column}
.notif-hd{padding:.8rem 1rem;border-bottom:1.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-family:var(--fd);font-weight:700;font-size:.92rem}
.notif-list{flex:1;overflow-y:auto}
.notif-it{display:flex;align-items:flex-start;gap:.65rem;padding:.7rem 1rem;border-bottom:1.5px solid var(--border);cursor:pointer;transition:background var(--tr)}
.notif-it:hover{background:var(--bg3)}
.notif-it.unread{background:var(--accent-pale)}
.notif-icon{font-size:1.1rem;flex-shrink:0;margin-top:.1rem}
.notif-text{font-size:.85rem;line-height:1.4}.notif-time{font-size:.72rem;color:var(--t3);margin-top:.15rem}

/* ── DORM SETTINGS ── */
.member-it{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;background:var(--card2);border:1.5px solid var(--border);border-radius:var(--rs);margin-bottom:.4rem}
.member-it-av{width:36px;height:36px;border-radius:50%;background:var(--accent-pale);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;overflow:hidden;object-fit:cover;flex-shrink:0}
.code-display{font-family:monospace;font-size:1.4rem;letter-spacing:.15em;font-weight:700;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--rs);padding:.6rem 1.2rem;text-align:center;color:var(--accent-h);cursor:pointer}
.code-display:hover{border-color:var(--accent)}

/* ── MODALS ── */
.modal-ov{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:1rem}
.modal-ov.on{display:flex}
.modal{background:var(--card);border:1.5px solid var(--border2);border-radius:20px;padding:1.8rem;width:480px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--sh-lg);animation:fadeUp .22s ease both;position:relative}
.modal-title{font-family:var(--fd);font-size:1.2rem;font-weight:800;margin-bottom:1.4rem}
.modal-close{position:absolute;top:.9rem;right:1.1rem;background:var(--bg3);border:1.5px solid var(--border);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);font-size:.95rem;transition:all var(--tr)}
.modal-close:hover{background:var(--red-pale);color:var(--red);border-color:rgba(239,68,68,.3)}
.modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.3rem}

/* ── EMPTY STATES ── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center}
.empty-icon{font-size:3rem;margin-bottom:.8rem;opacity:.7}
.empty-title{font-family:var(--fd);font-size:1.05rem;font-weight:700;margin-bottom:.35rem}
.empty-sub{color:var(--t2);font-size:.86rem;max-width:240px;line-height:1.5;margin-bottom:1.1rem}

/* ── TOAST ── */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;background:var(--card);border:1.5px solid var(--border2);border-radius:var(--rs);padding:.8rem 1.3rem;font-weight:600;font-size:.88rem;box-shadow:var(--sh-lg);animation:fadeUp .3s ease,toastOut .3s ease 2.5s forwards;display:flex;align-items:center;gap:.5rem;max-width:300px}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}

/* ── MOBILE HEADER ── */
.mobile-hd{display:none;background:var(--bg1);border-bottom:1.5px solid var(--border);padding:.8rem 1rem;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;flex-shrink:0}
.mobile-logo{font-family:var(--fd);font-size:1.1rem;font-weight:800}
.mobile-logo span{color:var(--accent)}
.hamburger{background:none;border:none;color:var(--t1);font-size:1.3rem;cursor:pointer}

/* ── SCROLLABLE CONTENT WRAPPER ── */
.scroll-content{flex:1;overflow-y:auto}

/* ── REACT EMOJI PICKER ── */
.emoji-picker{display:flex;gap:.3rem;flex-wrap:wrap;padding:.5rem;background:var(--card);border:1.5px solid var(--border);border-radius:var(--rs);box-shadow:var(--sh);position:absolute;z-index:50;bottom:100%;right:0}
.emoji-pick-btn{font-size:1.1rem;cursor:pointer;padding:2px 4px;border-radius:4px;border:none;background:none;transition:background var(--tr)}
.emoji-pick-btn:hover{background:var(--bg3)}

/* ── DORM PICKER DROPDOWN ── */
.dorm-dropdown{position:absolute;top:calc(100% - .3rem);left:.5rem;right:.5rem;background:var(--card);border:1.5px solid var(--border);border-radius:var(--rs);box-shadow:var(--sh-lg);z-index:60;overflow:hidden;animation:fadeUp .18s ease both;display:none}
.dorm-dropdown.on{display:block}
.dorm-dd-it{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;cursor:pointer;transition:background var(--tr);font-size:.9rem}
.dorm-dd-it:hover{background:var(--bg3)}
.dorm-dd-it.active{background:var(--accent-pale);color:var(--accent-h)}

/* ── RESPONSIVE ── */
@media(max-width:900px){.board{grid-template-columns:1fr}.g3{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
  :root{--fw:0px}
  .sidebar{transform:translateX(-260px);width:260px;--fw:260px}
  .sidebar.open{transform:translateX(0);box-shadow:var(--sh-lg)}
  .main{margin-left:0}
  .mobile-hd{display:flex}
  .page-content{padding:1rem}
  .g2,.g3{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .auth-wrap{flex-direction:column;justify-content:center}
  .auth-brand{display:none}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .board{grid-template-columns:1fr}
  .modal{padding:1.3rem}
}


/* ─── SAVINGS LOG / UNDO BAR ─── */
#undoBar { display:none; }
#undoBar.visible { display:flex !important; animation: fadeUp .25s ease; }

/* ─── REACT PICKER ─── */
.reaction-chip.add-react { cursor:pointer; }
.reaction-chip.add-react:hover { opacity:1 !important; background:var(--bg3); }

/* ─── FLAT PHOTO PREVIEW ─── */
#dormPhotoPreview img { border-radius: var(--r); }

/* ─── ACHIEVEMENTS TIERS ─── */
.ach-card { padding:.5rem .7rem; }

/* ─── NOTIF ITEM ─── */
.notif-it { display:flex; align-items:flex-start; gap:.6rem; }
.notif-it > div:first-child { flex-shrink:0; }

/* ─── BUDGET IMPROVEMENTS ─── */
#budBarChart { min-height:180px; }
#budTrendChart { min-height:160px; }

/* ─── CALENDAR HEX INPUT ─── */
#evtColorHex:focus { border-color:var(--ca); }

/* ── XP SHOP ── */
.xp-shop-card {
  background: var(--card2);
  border: 1.5px solid var(--border);
  border-radius: var(--rs);
  padding: .9rem .7rem;
  text-align: center;
  transition: all var(--tr);
}
.xp-shop-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--sh); }
.xp-shop-card.owned { border-color: rgba(6,214,160,.4); background: var(--accent2-pale); }
.xp-shop-emoji { font-size: 2rem; margin-bottom: .4rem; }
.xp-shop-name { font-size: .8rem; font-weight: 600; color: var(--t1); margin-bottom: .25rem; }
.xp-shop-cost { font-size: .75rem; color: var(--yellow); font-weight: 700; margin-bottom: .3rem; }

/* ── TIMER WIDGET ── */
#timerWidget { animation: fadeUp .3s ease; }
#timerDisplay { transition: color .3s; }

/* ── MEMBER RENAME INLINE ── */
.member-it { flex-wrap: wrap; }
.member-it > div:last-child { flex-wrap: wrap; }

/* ── PAYPAL QR ── */
#paypalQrImg img { box-shadow: var(--sh); }

/* ── Payment QR Box ── */
#paymentQrBox:hover { border-color: var(--accent); }
#paymentQrBox:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-pale); }
#paymentQrCard { transition: box-shadow .2s; }

/* ── Custom SVG Avatars in XP Shop ── */
.xp-shop-card .xp-shop-emoji svg { width: 48px; height: 48px; border-radius: 50%; }