:root{
  --pink:#EC1868;
  --magenta:#B23D96;
  --purple:#8C6FC4;
  --blue:#5A8FDB;
  --grad: linear-gradient(120deg, var(--pink) 0%, var(--magenta) 45%, var(--purple) 70%, var(--blue) 100%);
  --ink:#201A35;
  --ink-soft:#6b6480;
  --bg:#F5F4FA;
  --surface:#FFFFFF;
  --line:#E7E4F2;
  --success:#1FAE73;
  --warning:#F0A93A;
  --danger:#E5484D;
  --radius:16px;
  --shadow: 0 6px 24px rgba(32,26,53,0.08);
}
#adroit-app, #adroit-app *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
#adroit-app{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
}
#adroit-app h1,#adroit-app h2,#adroit-app h3,#adroit-app .display{font-family:'Poppins',sans-serif;}
#adroit-app button{font-family:inherit; cursor:pointer;}
#adroit-app ::-webkit-scrollbar{width:6px;height:6px;}
#adroit-app ::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;}

/* ---------- APP SHELL ---------- */
#adroit-app{display:flex;}

.shell{width:100%; min-height:100vh; display:flex;}

/* Sidebar (desktop) */
.sidebar{
  width:250px; flex-shrink:0; background:var(--surface);
  border-right:1px solid var(--line); padding:22px 16px;
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:4px;
}
.brand{display:flex; align-items:center; gap:10px; padding:4px 8px 22px 8px;}
.brand img{width:34px;height:34px;}
.brand .name{font-family:'Poppins'; font-weight:700; font-size:15px; letter-spacing:.2px;}
.brand .name span{display:block; font-size:10px; font-weight:600; color:var(--ink-soft); letter-spacing:1.5px;}

.navitem{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px;
  color:var(--ink-soft); font-weight:600; font-size:13.5px; border:none; background:none;
  text-align:left; width:100%;
}
.navitem svg{width:19px;height:19px; flex-shrink:0;}
.navitem.active{ background: linear-gradient(120deg, rgba(236,24,104,0.1), rgba(90,143,219,0.12)); color:var(--pink); }
.navitem:not(.active):hover{background:#F7F6FB; color:var(--ink);}

.sidebar-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line);}
.mini-profile{display:flex; align-items:center; gap:10px; padding:8px;}
.avatar{width:36px;height:36px;border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;}
.mini-profile .who{font-size:12.5px; font-weight:600; line-height:1.3;}
.mini-profile .who small{display:block; color:var(--ink-soft); font-weight:500; font-size:11px;}
.logout-btn{border:none;background:none;color:var(--ink-soft); margin-left:auto; padding:6px;}

/* Main column */
.main{flex:1; min-width:0; display:flex; flex-direction:column;}

.topbar{
  position:sticky; top:0; z-index:20; background:rgba(245,244,250,0.86); backdrop-filter:blur(10px);
  display:flex; align-items:center; gap:12px; padding:16px 24px; border-bottom:1px solid var(--line);
}
.topbar h1{font-size:19px; margin:0; font-weight:700;}
.topbar .sub{font-size:12.5px; color:var(--ink-soft); margin-top:1px;}
.top-actions{margin-left:auto; display:flex; align-items:center; gap:10px;}
.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line); background:var(--surface); display:flex;align-items:center;justify-content:center; position:relative; color:var(--ink-soft);}
.icon-btn svg{width:18px;height:18px;}
.dot{position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--pink); border:1.5px solid var(--surface);}
.menu-btn{display:none;}

.content{padding:22px 24px 100px 24px; flex:1;}
.page{display:none; animation:fadeIn .25s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* Cards / grid helpers */
.grid{display:grid; gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);}
.card h3{margin:0 0 12px 0; font-size:14.5px; font-weight:700;}
.card .foot-link{font-size:12px; color:var(--pink); font-weight:700; text-decoration:none;}

.stat-card{padding:18px;}
.stat-card .icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center; margin-bottom:10px;}
.stat-card .icon svg{width:19px;height:19px;color:#fff;}
.stat-card .num{font-family:'Poppins'; font-size:24px; font-weight:700;}
.stat-card .label{font-size:12px; color:var(--ink-soft); font-weight:600; margin-top:2px;}

.pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:20px;}
.pill.ok{background:rgba(31,174,115,0.12); color:var(--success);}
.pill.warn{background:rgba(240,169,58,0.14); color:#B87707;}
.pill.bad{background:rgba(229,72,77,0.12); color:var(--danger);}
.pill.info{background:rgba(90,143,219,0.13); color:#3E6FB8;}

.btn{border:none; border-radius:11px; padding:10px 16px; font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:7px;}
.btn-primary{background:var(--grad); color:#fff;}
.btn-ghost{background:var(--surface); border:1px solid var(--line); color:var(--ink);}
.btn-sm{padding:7px 12px; font-size:12px; border-radius:9px;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; color:var(--ink-soft); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; padding:10px 8px; border-bottom:1px solid var(--line);}
td{padding:12px 8px; border-bottom:1px solid var(--line);}
tr:last-child td{border-bottom:none;}

input,select,textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  font-family:inherit; font-size:13.5px; background:#FBFAFD; color:var(--ink);
}
label{font-size:12px; font-weight:700; color:var(--ink-soft); display:block; margin-bottom:6px;}
.field{margin-bottom:14px;}

/* ---------- MOBILE BOTTOM NAV ---------- */
.bottomnav{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:30;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:8px 4px calc(8px + env(safe-area-inset-bottom)) 4px;
  justify-content:space-around;
}
.bn-item{display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; color:var(--ink-soft); font-size:10px; font-weight:700; padding:4px 6px; flex:1;}
.bn-item svg{width:20px;height:20px;}
.bn-item.active{color:var(--pink);}
.bn-more{position:relative;}

/* Mobile drawer (all modules) */
.drawer-overlay{display:none; position:fixed; inset:0; background:rgba(20,16,32,0.45); z-index:40;}
.drawer{position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-radius:22px 22px 0 0; z-index:41; padding:18px 18px calc(18px + env(safe-area-inset-bottom)) 18px; max-height:78vh; overflow-y:auto;}
.drawer h3{margin:0 0 14px 0;}
.drawer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.drawer-grid button{display:flex; flex-direction:column; align-items:center; gap:7px; background:#F7F6FB; border:none; border-radius:14px; padding:14px 8px; font-size:11px; font-weight:700; color:var(--ink);}
.drawer-grid .di{width:38px;height:38px;border-radius:11px; display:flex;align-items:center;justify-content:center;}
.drawer-grid .di svg{width:18px;height:18px;color:#fff;}

@media(max-width:900px){
  .sidebar{display:none;}
  .content{padding:16px 16px 90px 16px;}
  .topbar{padding:14px 16px;}
  .bottomnav{display:flex;}
  .menu-btn{display:flex;}
}

/* Feed / Timeline */
.feed-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
.feed-item:last-child{border-bottom:none;}
.feed-item .avatar{width:38px;height:38px;font-size:12px;}
.feed-item .body{flex:1;}
.feed-item .meta{font-size:11px; color:var(--ink-soft); margin-top:3px;}
.tag-announce{background:rgba(236,24,104,0.1); color:var(--pink);}
.tag-bday{background:rgba(240,169,58,0.14); color:#B87707;}
.tag-work{background:rgba(90,143,219,0.13); color:#3E6FB8;}

/* Kanban (PMS) */
.kanban{display:flex; gap:14px; overflow-x:auto; padding-bottom:8px;}
.kcol{min-width:260px; background:#F7F6FB; border-radius:16px; padding:12px; flex-shrink:0;}
.kcol h4{margin:2px 6px 12px 6px; font-size:12.5px; display:flex; align-items:center; gap:8px;}
.kcol h4 .count{background:var(--surface); border-radius:20px; padding:1px 8px; font-size:11px; color:var(--ink-soft);}
.kcard{background:var(--surface); border-radius:12px; padding:12px; margin-bottom:10px; box-shadow:var(--shadow); cursor:grab;}
.kcard .title{font-size:12.5px; font-weight:700; margin-bottom:8px;}
.kcard .proj{font-size:10.5px; color:var(--purple); font-weight:700; margin-bottom:6px;}
.kcard .footrow{display:flex; align-items:center; justify-content:space-between; margin-top:8px;}
.kcard .avatars{display:flex;}
.kcard .avatars .avatar{width:22px;height:22px; font-size:9px; border:2px solid var(--surface); margin-left:-8px;}
.kcard .avatars .avatar:first-child{margin-left:0;}
.kcard.dragging{opacity:.4;}
.kcol.dragover{outline:2px dashed var(--pink); outline-offset:-4px;}

/* Progress bar */
.pbar{height:7px; border-radius:20px; background:var(--line); overflow:hidden;}
.pbar > div{height:100%; background:var(--grad); border-radius:20px;}

/* Tabs */
.tabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap;}
.tab{padding:8px 14px; border-radius:10px; border:1px solid var(--line); background:var(--surface); font-size:12.5px; font-weight:700; color:var(--ink-soft);}
.tab.active{background:var(--ink); color:#fff; border-color:var(--ink);}

.toast{position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 18px; border-radius:12px; font-size:12.5px; font-weight:600; z-index:60; opacity:0; transition:.25s; pointer-events:none;}
.toast.show{opacity:1; bottom:100px;}
@media(min-width:901px){.toast{bottom:24px;} .toast.show{bottom:34px;}}

.empty{text-align:center; padding:40px 10px; color:var(--ink-soft);}
.empty svg{width:44px;height:44px; margin-bottom:10px; opacity:.5;}

.section-title{display:flex; align-items:center; justify-content:space-between; margin:26px 0 14px 0;}
.section-title h2{font-size:16px; margin:0;}
.hide-first .section-title:first-child{margin-top:0;}

/* ---------- LOGIN WALL (logged-out visitors) ---------- */
.adroit-login-wall{
  min-height:60vh; display:flex; align-items:center; justify-content:center; padding:40px 20px;
  background: radial-gradient(circle at 20% 20%, rgba(236,24,104,0.10), transparent 45%),
              radial-gradient(circle at 85% 80%, rgba(90,143,219,0.14), transparent 45%), var(--bg);
  border-radius:20px;
}
.adroit-login-card{width:100%; max-width:380px; background:var(--surface); border-radius:22px; padding:34px 30px; box-shadow:0 20px 60px rgba(32,26,53,0.14); text-align:center; font-family:'Inter',sans-serif;}
.adroit-login-card .adroit-brand-mark{width:52px;height:52px;border-radius:14px;margin:0 auto 14px auto;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;}
.adroit-login-card h2{margin:2px 0 8px 0; font-size:19px; color:var(--ink); font-family:'Poppins',sans-serif;}
.adroit-login-card p{color:var(--ink-soft); font-size:13px; margin:0 0 20px 0;}
.adroit-btn{display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:11px; padding:11px 20px; font-weight:700; font-size:13.5px; text-decoration:none; cursor:pointer;}
.adroit-btn-primary{background:var(--grad); color:#fff;}

/* Loading skeleton */
.adroit-loading{padding:60px 20px; text-align:center; color:var(--ink-soft); font-size:13px;}