*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* The Blues Agency brand: electric blue + neutral black + white */
  --blue:#0F00FF;--blue-soft:rgba(15,0,255,.14);
  --navy:#09090b;--navy2:#141417;--navy3:#1c1c20;--navy4:#26262c;
  --white:#fff;--muted:rgba(255,255,255,.52);--muted2:rgba(255,255,255,.22);
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.04);--card2:rgba(255,255,255,.08);
  --font:'Inter',system-ui,sans-serif;
  --font-brand:'Outfit','Inter',system-ui,sans-serif;
  --r:8px;--r2:12px;--r3:16px;--r4:20px;
  --bar-bg:rgba(9,9,11,.92);
}
:root[data-theme="light"]{
  --blue-soft:rgba(15,0,255,.1);
  --navy:#f4f5f7;--navy2:#ffffff;--navy3:#eef0f3;--navy4:#e5e7ec;
  --white:#0a0a0b;--muted:rgba(10,10,11,.58);--muted2:rgba(10,10,11,.24);
  --border:rgba(10,10,11,.1);--border2:rgba(10,10,11,.16);
  --card:rgba(10,10,11,.035);--card2:rgba(10,10,11,.07);
  --bar-bg:rgba(255,255,255,.9);
}
html,body{height:100%;background:var(--navy);color:var(--white);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font-family:var(--font);cursor:pointer}input,select,textarea{font-family:var(--font)}
#app{display:flex;flex-direction:column;min-height:100vh}

/* ── Topbar ── */
.topbar{position:sticky;top:0;z-index:200;background:var(--bar-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--border2);height:56px;display:flex;align-items:center;padding:0 24px;gap:16px}
.topbar-brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;cursor:pointer;letter-spacing:-.01em;font-family:var(--font-brand)}
.brand-icon{width:32px;height:32px;border-radius:9px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.05em}
.brand-mark{display:inline-flex;flex-shrink:0;line-height:0}
.brand-mark svg{width:100%;height:100%;display:block}
.topbar-nav{display:flex;gap:2px;flex:1}
.nav-btn{background:none;border:none;color:var(--muted);padding:6px 14px;border-radius:var(--r);font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px;transition:all .15s}
.nav-btn:hover{background:var(--card2);color:var(--white)}
.nav-btn.active{background:var(--card2);color:var(--white)}
.nav-btn i{font-size:16px}
.topbar-right{display:flex;align-items:center;gap:10px}
.user-chip{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--border2);border-radius:24px;padding:4px 12px 4px 4px;cursor:pointer;font-size:13px;transition:border-color .15s}
.user-chip:hover{border-color:rgba(15,0,255,.5)}

/* ── Notifications ── */
.bell-wrap{position:relative}
.bell-btn{position:relative;background:var(--card2);border:1px solid var(--border2);color:var(--muted);width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .15s}
.nav-btn[draggable=true]{cursor:pointer}
.nav-btn.nav-dragging{opacity:.45;outline:2px dashed var(--blue);outline-offset:-2px}
.tab-hint{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 24px;font-size:12px;color:var(--muted);background:var(--card);border-bottom:1px solid var(--border)}
.tab-hint i{color:var(--blue)}
.tab-hint-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;display:flex}
.tab-hint-x:hover{color:var(--white)}
.tk-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tk-toggle{display:inline-flex;border:1px solid var(--border2);border-radius:var(--r);overflow:hidden}
.tk-tg{background:var(--card2);border:none;color:var(--muted);padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer}
.tk-tg.active{background:var(--grad-blue);color:#fff}
.tk-group{margin-bottom:18px;border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;background:var(--card)}
.tk-group-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;font-size:14px;font-weight:600;border-bottom:1px solid var(--border);background:var(--card2)}
.tk-parent{font-size:11px;font-weight:500;color:var(--muted)}
.tk-subteam{margin-top:14px}
.tk-subteam-head{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px 2px;display:flex;align-items:center;gap:8px}
.tk-subteam-head::before{content:"";width:4px;height:13px;border-radius:2px;background:var(--grad-blue)}
.heat-subhead{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px 2px}
.gantt-legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-bottom:10px}
.gantt-legend i{font-size:14px;vertical-align:-2px}
.gantt-ms{position:absolute;top:50%;width:18px;height:18px;transform:translateY(-50%) rotate(45deg);border-radius:3px;cursor:pointer;z-index:3;box-shadow:0 0 0 2px var(--navy2)}
.gantt-ms-label{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;font-weight:500;white-space:nowrap;color:var(--white);z-index:3}
.ms-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--white);height:46px;cursor:pointer}
.ms-toggle input{width:16px;height:16px;cursor:pointer}
#f-depends{height:auto;min-height:46px;padding:6px}
#f-depends option{padding:3px 6px}
.tk-subteam-head{justify-content:flex-start}
.add-member-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--border2);color:var(--blue);font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;cursor:pointer;text-transform:none;letter-spacing:0;transition:all .15s}
.add-member-btn:hover{border-color:var(--blue);background:var(--blue-soft)}
.team-card{position:relative}
.member-del{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;border:1px solid var(--border2);background:var(--card2);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;opacity:0;transition:opacity .15s,color .15s,border-color .15s}
.team-card:hover .member-del{opacity:1}
.member-del:hover{color:#f87171;border-color:#dc2626;background:rgba(220,38,38,.1)}
.tk-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--border);cursor:pointer;transition:background .12s}
.tk-row:first-child{border-top:none}
.tk-row:hover{background:var(--card2)}
.tk-pill{font-size:10px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.tk-main{flex:1;min-width:0}
.tk-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-sub{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-who{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0;min-width:120px}
.tk-due{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0;min-width:90px;text-align:right}
@media(max-width:700px){.tk-who{display:none}.tk-due{min-width:auto}}
.topbar-export{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--r);border:1px solid var(--border2);background:var(--card2);color:var(--white);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.topbar-export i{font-size:16px;color:var(--blue)}
.topbar-export:hover{border-color:var(--blue);background:var(--blue-soft)}
@media(max-width:700px){.topbar-export span{display:none}.topbar-export{padding:0 10px}}
.theme-toggle{position:relative;width:38px;height:38px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--border2);color:#fff;background:linear-gradient(135deg,var(--blue),#5b3bff);box-shadow:0 4px 14px rgba(15,0,255,.32);transition:transform .2s,box-shadow .2s,filter .2s}
.theme-toggle:hover{transform:translateY(-1px) rotate(-12deg);box-shadow:0 7px 20px rgba(15,0,255,.45);filter:brightness(1.08)}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle i{transition:transform .3s}
.theme-toggle:hover i{transform:rotate(12deg)}
:root[data-theme="light"] .theme-toggle{background:linear-gradient(135deg,#1a1530,#0a0a0b);box-shadow:0 4px 14px rgba(10,10,11,.25)}
.bell-btn:hover{color:var(--white);border-color:rgba(15,0,255,.5)}
.bell-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;background:#ef4444;color:#fff;border-radius:10px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--navy)}
.notif-panel{position:absolute;top:46px;right:0;width:360px;max-width:calc(100vw - 32px);background:var(--navy2);border:1px solid var(--border2);border-radius:var(--r3);box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:600;overflow:hidden}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);font-size:14px;font-weight:600}
.notif-markall{background:none;border:none;color:var(--blue);font-size:12px;cursor:pointer;font-weight:500}
.notif-markall:hover{text-decoration:underline}
.announce-box{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--navy);display:flex;flex-direction:column;gap:8px}
.announce-label{font-size:12px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px}
.announce-select{width:100%}
.announce-text{width:100%;resize:vertical;min-height:40px;background:var(--navy2);border:1px solid var(--border2);border-radius:var(--r2);color:var(--text);font:inherit;font-size:13px;padding:8px 10px;box-sizing:border-box}
.announce-text:focus{outline:none;border-color:var(--blue)}
.announce-send{align-self:flex-end;background:var(--blue);color:#fff;border:none;border-radius:var(--r2);padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.announce-send:hover{filter:brightness(1.08)}
.notif-list{max-height:420px;overflow-y:auto}
.notif-empty{padding:32px 16px;text-align:center;color:var(--muted);font-size:13px}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s;position:relative}
.notif-item:hover{background:var(--card2)}
.notif-item.unread{background:rgba(15,0,255,.06)}
.notif-item.unread:hover{background:rgba(15,0,255,.1)}
.notif-avatar{position:relative;flex-shrink:0}
.notif-type-icon{position:absolute;bottom:-3px;right:-3px;font-size:11px;background:var(--navy2);border-radius:50%;padding:2px;color:var(--blue)}
.notif-body{flex:1;min-width:0}
.notif-text{font-size:13px;line-height:1.45}
.notif-meta{font-size:11px;color:var(--muted);margin-top:3px}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:6px}

/* ── Login page ── */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy);padding:20px}
.login-box{background:var(--navy2);border:1px solid var(--border2);border-radius:var(--r4);padding:36px;width:100%;max-width:380px}
.splash{text-align:center}
.splash-spinner{width:28px;height:28px;margin:0 auto;border:3px solid var(--border2);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.login-logo{text-align:center;margin-bottom:28px}
.blues-wordmark{display:inline-grid;grid-template-columns:repeat(3,1fr);gap:1px 3px;margin:0 auto 18px;color:var(--blue);font-family:var(--font-brand);font-weight:800;font-size:42px;line-height:1}
.blues-wordmark span{display:flex;align-items:center;justify-content:center;width:.74em;height:.86em}
.blues-wordmark .bw-tri{padding:.07em}
.blues-wordmark .bw-tri svg{width:100%;height:100%;display:block}
.login-title{font-family:var(--font-brand);font-size:22px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.login-sub{font-size:13px;color:var(--muted)}
.auth-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#fca5a5;padding:10px 14px;border-radius:var(--r);font-size:13px;margin-bottom:16px}
.auth-success{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#86efac;padding:10px 14px;border-radius:var(--r);font-size:13px;margin-bottom:16px}
.auth-link{color:var(--blue);text-decoration:none;cursor:pointer;font-weight:500}
.auth-link:hover{text-decoration:underline}

/* Logout button */
.btn-logout{background:none;border:1px solid var(--border2);color:var(--muted);width:34px;height:34px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s}
.btn-logout:hover{color:#f87171;border-color:rgba(248,113,113,.4)}

/* ── Page ── */
.page{padding:24px;display:none;animation:fadeUp .2s ease}
.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Hero ── */
.overview-hero{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:28px;gap:16px}
.overview-hero>*:first-child{justify-self:start}
.overview-hero .hero-search{justify-self:center}
.overview-hero>*:last-child{justify-self:end}
@media(max-width:760px){.overview-hero{grid-template-columns:1fr;gap:12px}.overview-hero .hero-search,.overview-hero>*:first-child,.overview-hero>*:last-child{justify-self:stretch}}
.hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.export-wrap{position:relative}
.export-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;background:var(--navy2);border:1px solid var(--border2);border-radius:var(--r3);box-shadow:var(--shadow-lg,0 12px 40px rgba(0,0,0,.5));padding:6px;z-index:500;display:none;flex-direction:column;gap:2px}
.export-menu.open{display:flex}
.export-menu-head{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 12px 4px}
.dash-embed{border:1px solid var(--border2);border-radius:var(--r3);overflow:hidden;background:#fff;height:calc(100vh - 250px);min-height:480px}
.dash-embed iframe{width:100%;height:100%;border:0;display:block}
.mb-subtabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.mb-subtab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;border:1px solid var(--border2);background:var(--card);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.mb-subtab:hover{color:var(--white);border-color:var(--border)}
.mb-subtab.active{background:var(--grad-blue);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(15,0,255,.3)}
.mb-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);background:var(--navy2)}
.mb-placeholder i{font-size:46px;color:var(--blue);opacity:.7}
.mb-ph-title{font-size:17px;font-weight:700;color:var(--white)}
.mb-ph-sub{font-size:13px}
.export-menu button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;color:var(--white);padding:10px 12px;border-radius:var(--r2);cursor:pointer;text-align:left;font-size:14px}
.export-menu button:hover{background:var(--card2)}
.export-menu button i{font-size:20px;color:var(--blue);flex-shrink:0}
.export-menu button div{display:flex;flex-direction:column;line-height:1.25}
.export-menu button b{font-weight:600}
.export-menu button span{font-size:11px;color:var(--muted)}
.hero-greeting{font-family:var(--font-brand);font-size:22px;font-weight:700;letter-spacing:-.02em}
.hero-sub{font-size:13px;color:var(--muted);margin-top:3px}

/* ── Stat cards ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:32px}
.stat-card{border-radius:var(--r3);padding:20px;position:relative;overflow:hidden;transition:transform .2s}
.stat-card:hover{transform:translateY(-2px)}
.stat-card::before{content:'';position:absolute;inset:0;opacity:.12;border-radius:inherit}
.stat-blue{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.2)}
.stat-red{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2)}
.stat-amber{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.2)}
.stat-green{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.2)}
.stat-icon{font-size:20px;margin-bottom:10px}
.stat-blue .stat-icon{color:#60a5fa}.stat-red .stat-icon{color:#f87171}.stat-amber .stat-icon{color:#fbbf24}.stat-green .stat-icon{color:#34d399}
.stat-val{font-size:36px;font-weight:700;letter-spacing:-.04em;line-height:1}
.stat-blue .stat-val{color:#60a5fa}.stat-red .stat-val{color:#f87171}.stat-amber .stat-val{color:#fbbf24}.stat-green .stat-val{color:#34d399}
.stat-label{font-size:12px;color:var(--muted);margin-top:6px;font-weight:500}

/* ── Section header ── */
.section-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.section-count{font-size:11px;background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:2px 8px;color:var(--muted)}

/* ── Client grid ── */
.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:8px}
.client-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r3);padding:16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.client-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .2s;transform-origin:left}
.client-card:hover{border-color:var(--border2);background:var(--card2);transform:translateY(-1px)}
.client-card:hover::after{transform:scaleX(1)}
.client-card-active{border-color:rgba(15,0,255,.3);background:rgba(15,0,255,.06)}
.client-card-active::after{transform:scaleX(1)}
.client-card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.client-initial{width:32px;height:32px;border-radius:var(--r);background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.has-logo{position:relative;overflow:hidden;background:#fff !important;box-shadow:none !important;color:var(--blue)}
.has-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.cl-chip{display:inline-block;width:16px;height:16px;border-radius:4px;overflow:hidden;background:#fff;vertical-align:-3px}
.cl-chip img{width:100%;height:100%;object-fit:cover;display:block}
.client-card-name{font-size:14px;font-weight:600;flex:1;line-height:1.2}
.overdue-dot{width:7px;height:7px;border-radius:50%;background:#f87171;flex-shrink:0;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.client-progress-bar{height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;margin-bottom:8px}
.client-progress-fill{height:100%;background:var(--blue);border-radius:2px;transition:width .4s ease}
.client-card-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.client-card[draggable=true]{cursor:grab}
.client-card[draggable=true]:active{cursor:grabbing}
.client-card-archived{opacity:.55;filter:grayscale(.4)}
.client-card-actions{display:flex;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.cc-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:600;padding:6px 8px;border-radius:var(--r2);border:1px solid var(--border2);background:var(--navy2);color:var(--muted);cursor:pointer;transition:all .15s}
.cc-archive:hover{border-color:#d97706;color:#f59e0b;background:rgba(217,119,6,.1)}
.cc-delete:hover{border-color:#dc2626;color:#f87171;background:rgba(220,38,38,.1)}
.client-page-header .cc-btn{flex:none;padding:9px 14px;font-size:13px}
.drop-zone{min-height:64px;border-radius:var(--r3);transition:background .15s,box-shadow .15s}
.drop-zone.drop-hover{background:rgba(15,0,255,.06);box-shadow:inset 0 0 0 2px var(--blue)}
.drop-empty{grid-column:1/-1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;border:1px dashed var(--border2);border-radius:var(--r3);padding:18px;opacity:.7}
.add-client-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--blue),#5b3bff);color:#fff;border:none;border-radius:var(--r3);padding:12px 22px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(15,0,255,.35);transition:transform .15s,box-shadow .15s,filter .15s}
.add-client-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,0,255,.45);filter:brightness(1.06)}
.add-client-btn:active{transform:translateY(0)}
.add-client-btn i{font-size:18px}

/* ── Client page header ── */
.client-page-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.client-page-title{display:flex;align-items:center;gap:12px;flex:1}
.client-page-initial{width:40px;height:40px;border-radius:var(--r2);background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.back-btn{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-size:13px;padding:6px 10px;border-radius:var(--r);transition:all .15s;flex-shrink:0}
.back-btn:hover{color:var(--white);background:var(--card2)}
.page-title{font-family:var(--font-brand);font-size:20px;font-weight:700;letter-spacing:-.01em}
.filter-select{background:var(--card2);border:1px solid var(--border2);color:var(--white);padding:7px 12px;border-radius:var(--r);font-size:12px;cursor:pointer;appearance:none}
.filter-select option{background:#1c1c20}

/* ── Task list ── */
.task-list{display:flex;flex-direction:column;gap:8px}
.task-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;transition:border-color .15s}
.task-card:hover{border-color:var(--border2)}
.task-card.expanded{border-color:rgba(15,0,255,.4)}
.task-card-header{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;user-select:none;transition:background .15s}
.task-card-header:hover{background:var(--card2)}
.task-expand-icon{color:var(--muted);font-size:16px;flex-shrink:0;transition:transform .2s}
.task-card.expanded .task-expand-icon{transform:rotate(90deg)}
.task-title-block{flex:1;min-width:0}
.task-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-done{text-decoration:line-through;color:var(--muted)}
.task-meta-row{display:flex;gap:12px;margin-top:4px;flex-wrap:wrap}
.task-meta-item{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px}
.task-meta-item i{font-size:12px}
.task-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.status-pill{font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;white-space:nowrap}
.priority-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.prio-Urgent{background:#ef4444}.prio-High{background:#f97316}.prio-Normal{background:#6366f1}.prio-Low{background:#64748b}
.overdue-tag{font-size:10px;font-weight:700;color:#f87171;background:rgba(248,113,113,.1);padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em}
.task-edit-btn{background:none;border:none;color:var(--muted);padding:4px;border-radius:var(--r);font-size:14px;transition:all .15s}
.task-edit-btn:hover{color:var(--white);background:var(--card2)}

/* ── Task body ── */
.task-body{display:none;padding:0 16px 16px;border-top:1px solid var(--border)}
.task-card.expanded .task-body{display:block}
.task-body-section{margin-top:16px}
.task-body-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:16px}
.field-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;font-weight:600;display:flex;align-items:center;gap:5px}
.field-label i{font-size:13px}
.field-val{font-size:13px}
.collab-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}

/* Task description */
.task-desc-text{font-size:13px;color:rgba(255,255,255,.8);line-height:1.7;white-space:pre-wrap;word-break:break-word}
.task-link{color:#60a5fa;text-decoration:underline;text-underline-offset:2px}
.task-link:hover{color:#93c5fd}

/* Status changer */
.status-changer{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.status-option{border:1px solid var(--border2);background:none;color:var(--muted);padding:5px 12px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.04em}
.status-option:hover{border-color:rgba(255,255,255,.3);color:var(--white)}
.status-option.current{border-color:var(--blue);color:var(--white);background:rgba(15,0,255,.25)}

/* ── Subtasks ── */
.subtasks-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.subtask-row{display:flex;align-items:center;gap:10px;background:var(--navy3);border-radius:var(--r);padding:8px 12px}
.subtask-check{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border2);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.subtask-check.done{background:#22c55e;border-color:#22c55e}
.subtask-main{flex:1;display:flex;flex-direction:column;gap:3px;cursor:pointer;min-width:0}
.subtask-text{font-size:13px}
.subtask-text.done{text-decoration:line-through;color:var(--muted)}
.subtask-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.subtask-assignee{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.subtask-status{font-size:11px;font-weight:600}
.subtask-due{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
.subtask-open{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:2px;border-radius:4px;transition:color .15s;line-height:1;opacity:0}
.subtask-row:hover .subtask-open{opacity:1}
.subtask-open:hover{color:var(--blue)}
.subtask-del{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:2px;border-radius:4px;transition:color .15s;line-height:1}
.subtask-del:hover{color:#f87171}
.st-parent{padding:2px 24px 0;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.st-parent strong{color:var(--white);font-weight:600}
.st-section{margin-top:16px}
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
#st-desc{min-height:110px}
.add-subtask-row{display:flex;gap:8px;margin-top:8px}
.add-subtask-input{flex:1;background:var(--navy3);border:1px solid var(--border2);color:var(--white);padding:7px 12px;border-radius:var(--r);font-size:13px}
.add-subtask-input:focus{outline:none;border-color:var(--blue)}
.btn-add-sub{background:var(--blue);border:none;color:#fff;width:32px;height:32px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:14px;transition:opacity .15s}
.btn-add-sub:hover{opacity:.85}

/* ── Comments ── */
.comments-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.comment-item{display:flex;gap:10px}
.comment-bubble{flex:1;background:var(--navy3);border-radius:var(--r2);padding:10px 14px}
.comment-header{display:flex;justify-content:space-between;margin-bottom:4px}
.comment-author{font-size:12px;font-weight:600}
.comment-time{font-size:11px;color:var(--muted)}
.comment-text{font-size:13px;color:rgba(255,255,255,.85);line-height:1.5;word-break:break-word}
.comment-input-row{display:flex;gap:8px;margin-top:10px;align-items:flex-end}
.comment-send-btn{background:var(--blue);border:none;color:#fff;padding:9px 16px;border-radius:var(--r);font-size:13px;display:flex;align-items:center;gap:6px;transition:opacity .15s;flex-shrink:0}
.comment-send-btn:hover{opacity:.85}
.mention-wrap{position:relative;flex:1}
.mention-dropdown{position:absolute;bottom:100%;left:0;right:0;background:var(--navy2);border:1px solid var(--border2);border-radius:var(--r2);overflow:hidden;z-index:100;margin-bottom:4px;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.mention-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px;transition:background .1s}
.mention-item:hover{background:var(--card2)}
.mention-tag{color:#60a5fa;font-weight:600;background:rgba(96,165,250,.15);padding:1px 6px;border-radius:4px;display:inline}

/* Rich input */
.rich-input{background:var(--navy3);border:1px solid var(--border2);color:var(--white);padding:10px 14px;border-radius:var(--r);font-size:13px;line-height:1.6;min-height:38px;max-height:300px;overflow-y:auto;word-break:break-word;white-space:pre-wrap}
.rich-input:focus{outline:none;border-color:var(--blue)}
.rich-input:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none}

/* Task actions */
.task-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.btn-icon{background:var(--card2);border:1px solid var(--border);color:var(--muted);padding:6px 12px;border-radius:var(--r);font-size:13px;display:flex;align-items:center;gap:5px;transition:all .15s}
.btn-icon:hover{color:var(--white);border-color:var(--border2)}
.btn-icon.danger:hover{color:#f87171;border-color:rgba(248,113,113,.4)}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:500;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--navy2);border:1px solid var(--border2);border-radius:var(--r4);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;transform:scale(.97) translateY(8px);transition:transform .2s}
.modal-overlay.open .modal-box{transform:scale(1) translateY(0)}
.modal-wide{max-width:900px}

.modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px 0;gap:12px}
.modal-title-row{display:flex;align-items:center;gap:12px;flex:1}
.modal-icon{width:32px;height:32px;border-radius:var(--r);background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.modal-title-input{flex:1;background:none;border:none;color:var(--white);font-size:18px;font-weight:600;padding:0;letter-spacing:-.02em}
.modal-title-input:focus{outline:none}
.modal-title-input::placeholder{color:var(--muted)}
.modal-close{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px;border-radius:var(--r);transition:all .15s;flex-shrink:0;margin-top:2px}
.modal-close:hover{color:var(--white);background:var(--card2)}

.modal-body-grid{display:grid;grid-template-columns:1fr 280px;gap:0;padding:16px 24px}
@media(max-width:700px){.modal-body-grid{grid-template-columns:1fr}}
.modal-main{padding-right:20px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:16px}
@media(max-width:700px){.modal-main{padding-right:0;border-right:none}}
.modal-sidebar{padding-left:20px;display:flex;flex-direction:column;gap:14px}
@media(max-width:700px){.modal-sidebar{padding-left:0;border-top:1px solid var(--border);padding-top:16px}}

.modal-comments-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}

.sidebar-group{}
.sidebar-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600;margin-bottom:6px}

.status-btn-group{display:flex;flex-direction:column;gap:4px}
.status-option-sm{border:1px solid var(--border2);background:none;color:var(--muted);padding:5px 10px;border-radius:var(--r);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;text-align:left;text-transform:uppercase;letter-spacing:.04em}
.status-option-sm:hover{border-color:rgba(255,255,255,.25);color:var(--white)}
.status-option-sm.active{color:var(--white)}

.collabs-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.collab-chip{display:flex;align-items:center;gap:5px;background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:3px 8px 3px 4px;font-size:12px}
.collab-chip button{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;padding:0;line-height:1}
.collab-chip button:hover{color:#f87171}

.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.form-label i{font-size:14px}
.form-input,.form-select{width:100%;background:var(--navy3);border:1px solid var(--border2);color:var(--white);padding:8px 12px;border-radius:var(--r);font-size:13px}
.form-input:focus,.form-select:focus{outline:none;border-color:var(--blue)}
.form-select option{background:#1c1c20}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 24px 20px;border-top:1px solid var(--border)}

/* ── Buttons ── */
.btn-primary{background:var(--blue);border:none;color:#fff;padding:8px 18px;border-radius:var(--r);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:opacity .15s}
.btn-primary:hover{opacity:.85}
.btn-primary.btn-lg{padding:10px 22px;font-size:14px}
.btn-ghost{background:none;border:1px solid var(--border2);color:var(--muted);padding:8px 16px;border-radius:var(--r);font-size:13px;transition:all .15s}
.btn-ghost:hover{border-color:var(--border);color:var(--white)}

/* ── User modal ── */
.user-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.user-option{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:10px 12px;cursor:pointer;transition:all .15s}
.user-option:hover{border-color:var(--blue);background:var(--card2)}
.user-option.selected{border-color:var(--blue);background:rgba(15,0,255,.12)}

/* ── Team ── */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.team-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r3);padding:18px}
.team-card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.team-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.ts{background:var(--navy3);border-radius:var(--r);padding:8px 4px;position:relative}
.ts.has-dd{cursor:pointer}
.ts-val{font-size:20px;font-weight:700}.ts-lbl{font-size:10px;color:var(--muted);margin-top:2px}
.ts-dd{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,-6px);width:max(220px,100%);background:var(--navy2);border:1px solid var(--border2);border-radius:var(--r2);box-shadow:var(--shadow-lg,0 12px 40px rgba(0,0,0,.5));padding:6px;max-height:300px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s;z-index:70;text-align:left}
.ts.has-dd:hover .ts-dd,.ts.open .ts-dd{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ts.has-dd:hover,.ts.open{z-index:71}
.ts-dd-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:var(--r);cursor:pointer}
.ts-dd-item:hover{background:var(--card2)}
.ts-dd-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.ts-dd-client{color:var(--muted);font-size:11px}
.ts-dd-meta{font-size:10px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.ts-dd-empty{font-size:12px;color:var(--muted);padding:8px;text-align:center}
.ts-dd-more{font-size:11px;color:var(--blue);padding:6px;text-align:center}
.bar-track{background:rgba(255,255,255,.08);border-radius:4px;height:4px;overflow:hidden}
.bar-fill{height:4px;background:var(--blue);border-radius:4px;transition:width .6s ease}

/* ── Avatar ── */
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;letter-spacing:.02em}

/* ── Empty ── */
.empty-state{text-align:center;padding:48px 20px;color:var(--muted)}
.empty-state i{font-size:36px;display:block;margin-bottom:12px}

/* ── Toast ── */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:9999}
.toast{background:var(--blue);color:#fff;padding:10px 18px;border-radius:var(--r2);font-size:13px;margin-top:8px;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

/* Team lead card */
.team-card-lead{border-color:rgba(15,0,255,.35);background:rgba(15,0,255,.06)}
.lead-badge{font-size:10px;font-weight:700;background:var(--blue);color:#fff;padding:2px 7px;border-radius:20px;margin-left:6px;vertical-align:middle;letter-spacing:.03em}

/* Team summary card */
.team-summary-card{background:var(--navy3);border:1px solid var(--border2);border-radius:var(--r2);padding:14px 16px;margin-bottom:4px}

/* ── View toggle ── */
.view-toggle{display:flex;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r);padding:3px;gap:2px}
.view-toggle-btn{background:none;border:none;color:var(--muted);padding:5px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s}
.view-toggle-btn:hover{color:var(--white)}
.view-toggle-btn.active{background:var(--navy3);color:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.3)}

/* ── Board view ── */
.board-view{display:flex;gap:14px;overflow-x:auto;padding-bottom:16px;align-items:flex-start}
.board-col{min-width:240px;max-width:260px;flex-shrink:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;transition:border-color .15s,background .15s}
.board-col.drag-over{border-color:var(--blue);background:rgba(79,109,255,.07)}
.board-col-header{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.board-col-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.board-col-count{font-size:11px;background:var(--card2);border-radius:20px;padding:2px 8px;color:var(--muted)}
.board-col-body{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:80px}
.board-card{background:var(--navy2);border:1px solid var(--border2);border-radius:var(--r2);padding:12px;cursor:pointer;transition:all .15s}
.board-card:hover{border-color:var(--blue);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.board-card.dragging{opacity:.4;transform:scale(.97)}
.board-card-name{font-size:13px;font-weight:500;line-height:1.4;margin-bottom:6px}
.board-card-desc{font-size:11px;color:var(--muted);margin-bottom:8px;line-height:1.4}
.board-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap}
.board-add-btn{background:none;border:1px dashed var(--border2);color:var(--muted);width:100%;padding:8px;border-radius:var(--r);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .15s;margin-top:4px}
.board-add-btn:hover{border-color:var(--blue);color:var(--white)}

/* ── Timeline / Gantt ── */
.gantt{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r3);background:var(--card)}
.gantt-head{display:flex;position:sticky;top:0;z-index:3;background:var(--card2);border-bottom:1px solid var(--border)}
.gantt-corner{position:sticky;left:0;z-index:4;background:var(--card2);display:flex;align-items:flex-end;padding:8px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-right:1px solid var(--border)}
.gantt-head-days{display:flex}
.gantt-daycell{width:36px;min-width:36px;text-align:center;padding:5px 0;border-left:1px solid var(--border)}
.gantt-daycell.weekend{background:rgba(255,255,255,.025)}
.gantt-month{font-size:9px;color:var(--muted);font-weight:600;height:12px;line-height:12px;text-transform:uppercase}
.gantt-dow{font-size:9px;color:var(--muted);margin-top:2px}
.gantt-daynum{font-size:11px;color:var(--white);font-weight:500}
.gantt-daycell.today .gantt-daynum{color:#fff;background:var(--blue);border-radius:50%;width:18px;height:18px;line-height:18px;margin:0 auto;display:block}
.gantt-daycell.today .gantt-dow,.gantt-daycell.today .gantt-month{color:var(--blue)}
.gantt-row{display:flex;border-top:1px solid var(--border);min-height:56px}
.gantt-label{position:sticky;left:0;z-index:2;background:var(--card);display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 12px;cursor:pointer;border-right:1px solid var(--border)}
.gantt-label:hover{background:var(--card2)}
.gantt-label-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt-label-sub{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.gantt-track{position:relative}
.gantt-bar{position:absolute;top:13px;height:32px;border-radius:7px;cursor:pointer;display:flex;align-items:center;padding:0 10px;overflow:hidden;transition:filter .15s,transform .15s}
.gantt-bar:hover{filter:brightness(1.15);transform:translateY(-1px)}
.gantt-bar.milestone{border-radius:7px;opacity:.85;border:1px dashed rgba(255,255,255,.4)}
.gantt-bar-label{font-size:12px;color:#fff;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt-due-cap{position:absolute;right:0;top:0;bottom:0;width:5px;background:rgba(255,255,255,.85);border-radius:0 7px 7px 0}
.gantt-due-cap.over{background:#f87171}
.gantt-due-flag{position:absolute;top:0;height:58px;display:flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--white);white-space:nowrap;pointer-events:none}
.gantt-due-flag i{font-size:11px;color:var(--blue)}
.gantt-due-flag.over,.gantt-due-flag.over i{color:#f87171}
.gantt-today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--blue);opacity:.45;z-index:1;pointer-events:none}
.gantt-undated{margin-top:12px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;padding:0 4px}

/* ── My Work ── */
.mw-section{margin-bottom:24px}
.mw-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.mw-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mw-count{background:var(--card2);border-radius:20px;padding:1px 9px;font-size:11px;color:var(--muted);font-weight:600}
.mw-list{display:flex;flex-direction:column;gap:8px}
.mw-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:12px 14px;cursor:pointer;transition:all .15s}
.mw-item:hover{border-color:var(--blue);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.25)}
.mw-item-main{flex:1;min-width:0}
.mw-item-name{font-size:14px;font-weight:500;line-height:1.35;margin-bottom:3px}
.mw-item-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}
.mw-item-meta span{display:inline-flex;align-items:center;gap:4px}
.mw-item-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.mw-due{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.mw-done-note{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:8px}
@media(max-width:600px){.mw-item-right{flex-direction:column;align-items:flex-end;gap:4px}}
.review-stage{margin-top:8px}

/* ── Client-page hover stat boxes ── */
.cstat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
@media(max-width:700px){.cstat-grid{grid-template-columns:repeat(2,1fr)}}
.cstat-card{position:relative;border-radius:var(--r3);padding:16px;cursor:default;transition:transform .15s}
.cstat-card:hover{transform:translateY(-2px);z-index:50}
.cstat-top{display:flex;align-items:center;justify-content:space-between}
.cstat-icon{font-size:18px}
.cstat-val{font-size:26px;font-weight:700;letter-spacing:-.02em}
.cstat-label{font-size:12px;color:var(--muted);margin-top:4px}
.cstat-blue .cstat-icon,.stat-blue .cstat-icon,.stat-blue .cstat-val{color:#60a5fa}
.stat-red .cstat-icon,.stat-red .cstat-val{color:#f87171}
.stat-amber .cstat-icon,.stat-amber .cstat-val{color:#fbbf24}
.stat-green .cstat-icon,.stat-green .cstat-val{color:#34d399}
.cstat-dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;width:max(320px,100%);background:var(--navy2);border:1px solid var(--border2);border-radius:var(--r2);box-shadow:0 12px 40px rgba(0,0,0,.5);padding:6px;max-height:380px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:60}
.cstat-card:hover .cstat-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.cstat-dd-head{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 10px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.cstat-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:var(--r);cursor:pointer;transition:background .12s}
.cstat-item:hover{background:var(--card2)}
.cstat-item-main{min-width:0;flex:1}
.cstat-item-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cstat-item-sub{display:flex;align-items:center;gap:10px;margin-top:3px}
.cstat-who{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);white-space:nowrap}
.cstat-due{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);white-space:nowrap}
.cstat-due i{font-size:12px}
.cstat-pill{font-size:10px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.cstat-empty{padding:14px 10px;text-align:center;font-size:12px;color:var(--muted)}
.cstat-more{padding:6px 10px;font-size:11px;color:var(--muted);text-align:center}
.cstat-grid > .cstat-card:nth-child(n+3) .cstat-dropdown{left:auto;right:0}
@media(max-width:700px){.cstat-dropdown,.cstat-grid > .cstat-card:nth-child(n+3) .cstat-dropdown{left:0;right:0;width:auto;min-width:0}}

/* ── Stat card dropdown ── */
.stat-card{position:relative;cursor:pointer}
.stat-dropdown{display:none;position:absolute;top:calc(100% - 2px);left:0;right:auto;width:max(340px,100%);background:var(--navy2);border:1px solid var(--border2);border-radius:var(--r2);z-index:300;box-shadow:0 12px 40px rgba(0,0,0,.5);max-height:380px;overflow-y:auto;padding:6px}
.stat-dropdown.open,.stat-card:hover .stat-dropdown{display:block;animation:fadeUp .15s ease}
.stat-grid > .stat-card:nth-child(n+3) .stat-dropdown{left:auto;right:0}
@media(max-width:700px){.stat-dropdown,.stat-grid > .stat-card:nth-child(n+3) .stat-dropdown{left:0;right:0;width:auto}}
.stat-dd-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.stat-dd-item:last-child{border-bottom:none}
.stat-dd-item:hover{background:var(--card2)}
.stat-dd-name{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-dd-client{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.stat-dd-empty{padding:14px;font-size:13px;color:var(--muted);text-align:center}
.stat-dd-more{padding:8px 14px;font-size:12px;color:var(--muted);text-align:center;border-top:1px solid var(--border)}

/* Inline select in task body */
.inline-select{background:var(--navy3);border:1px solid var(--border2);color:var(--white);padding:5px 10px;border-radius:var(--r);font-size:13px;cursor:pointer;width:100%}
.inline-select:focus{outline:none;border-color:var(--blue)}
.inline-select option{background:#1c1c20}

/* Comment edit button */
.comment-edit-btn{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:2px 4px;border-radius:4px;transition:color .15s;line-height:1}
.comment-edit-btn:hover{color:var(--white)}
/* tap-to-toggle for client stat boxes (touch devices have no hover) */
.cstat-card.open{transform:translateY(-2px);z-index:50}
.cstat-card.open .cstat-dropdown{opacity:1;visibility:visible;transform:translateY(0)}

@media(max-width:700px){
  /* Prevent iOS auto-zoom on focus */
  input,select,textarea,.form-input,.form-select,.modal-title-input,.add-subtask-input{font-size:16px}
}

@media(max-width:600px){
  /* Top bar: just brand + actions. Nav moves to a bottom tab bar. */
  .topbar{padding:0 14px;gap:8px;height:56px}
  .topbar-right{gap:6px;margin-left:auto}
  .user-chip span{display:none}
  .user-chip{padding:3px}
  .bell-btn{width:34px;height:34px}
  .notif-panel{width:calc(100vw - 24px);right:-44px}

  /* Bottom tab bar — reuses .topbar-nav buttons */
  #app{padding-bottom:72px}
  .topbar-nav{position:fixed;bottom:0;left:0;right:0;flex:none;display:flex;justify-content:space-around;gap:0;
    background:var(--bar-bg);backdrop-filter:blur(16px);border-top:1px solid var(--border2);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:300}
  .nav-btn{flex:1;flex-direction:column;gap:3px;padding:4px;font-size:10.5px;font-weight:500;border-radius:var(--r2);color:var(--muted)}
  .nav-btn i{font-size:21px}
  .nav-btn.active{background:none;color:var(--blue)}
  .nav-btn.active i{color:var(--blue)}

  /* Page rhythm */
  .page{padding:14px}
  .overview-hero{margin-bottom:18px}
  .hero-greeting{font-size:18px}
  .hero-sub{font-size:12px}
  .page-title{font-size:18px}
  .btn-primary.btn-lg{padding:9px 16px;font-size:13px}

  /* Grids */
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}
  .stat-card{padding:14px}
  .stat-val{font-size:24px}
  .client-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:1fr}
  .user-grid{grid-template-columns:1fr}

  /* Client page header + controls stack cleanly */
  .client-page-header{gap:10px;margin-bottom:16px}
  .client-page-header > div:last-child{width:100%;justify-content:flex-start}
  .view-toggle{flex:1;justify-content:space-between}
  .filter-select{flex:1}
  .cstat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .cstat-card{padding:13px}
  .cstat-val{font-size:22px}

  /* Modals — near full-screen, lighter padding */
  .modal-overlay{padding:0;align-items:flex-end}
  .modal-box{max-width:100%;max-height:94vh;border-radius:var(--r4) var(--r4) 0 0;border-bottom:none}
  .modal-header{padding:16px 16px 0}
  .modal-body-grid{padding:14px 16px;gap:14px}
  .modal-footer{padding:12px 16px 16px;flex-wrap:wrap}
  .modal-footer .btn-primary,.modal-footer .btn-ghost{flex:1;justify-content:center}
  .modal-title-input,#detail-title{font-size:16px}

  /* My Work rows */
  .mw-item{padding:11px 12px;gap:10px}
  .mw-item-name{font-size:13px}

  /* Keep toasts above the bottom tab bar */
  #toast-container{bottom:84px;right:14px;left:14px}
  .toast{text-align:center}
}

/* ── Reports board ── */
.reports-board{flex-direction:column;overflow-x:visible}
.reports-board .board-col{max-width:none;width:100%;min-width:0}
.reports-board .board-col-body{gap:8px}
.rep-card{display:flex;align-items:flex-start;gap:4px;background:var(--navy2);border:1px solid var(--border2);border-radius:var(--r2);padding:4px 4px 4px 4px}
.rep-card:hover{border-color:var(--blue)}
.rep-card-link{flex:1;min-width:0;display:block;padding:8px;color:var(--white)}
.rep-card-title{font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px;line-height:1.35}
.rep-card-title i{color:var(--blue);font-size:14px;flex-shrink:0}
.rep-card-meta{font-size:11px;color:var(--muted);margin-top:3px}
.rep-del{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:6px;border-radius:var(--r);flex-shrink:0;transition:color .15s}
.rep-del:hover{color:#f87171}
.rep-add-col{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding-top:10px;border-top:1px dashed var(--border2)}
.rep-add-btn{width:100%;justify-content:center}
.rep-reminder{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.rep-rem-label{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.rep-reminder .form-select{width:auto;flex:1;font-size:12px;padding:5px 8px}
.rep-rem-date{width:100%;font-size:12px;padding:5px 8px;color-scheme:dark}
:root[data-theme="light"] .rep-rem-date{color-scheme:light}
.rep-rem-next{font-size:11px;color:var(--blue);white-space:nowrap}

/* ════════ Visual polish ════════ */
:root{
  --shadow:0 1px 2px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.22);
  --shadow-lg:0 14px 38px rgba(0,0,0,.5);
  --grad-blue:linear-gradient(135deg,#4b3bff 0%,#0F00FF 100%);
  --glow:0 0 0 3px rgba(15,0,255,.18);
}
:root[data-theme="light"]{
  --shadow:0 1px 2px rgba(16,19,42,.06),0 2px 8px rgba(16,19,42,.07);
  --shadow-lg:0 18px 44px rgba(16,19,42,.16);
  --glow:0 0 0 3px rgba(15,0,255,.12);
}

/* Background depth */
body{
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(75,59,255,.14), transparent 60%),
    radial-gradient(860px 480px at -8% 6%, rgba(15,0,255,.10), transparent 55%),
    var(--navy);
  background-attachment:fixed;
}
:root[data-theme="light"] body{
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(75,59,255,.08), transparent 60%),
    radial-gradient(860px 480px at -8% 6%, rgba(15,0,255,.05), transparent 55%),
    var(--navy);
  background-attachment:fixed;
}

/* Custom scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted2)}
*::-webkit-scrollbar-track{background:transparent}

/* Cards: subtle gradient surface + depth + smoother hover */
.client-card,.task-card,.team-card,.mw-item,.board-col,.rep-card,.user-option{
  background:linear-gradient(180deg,var(--card2),var(--card));
  box-shadow:var(--shadow);
}
.cstat-card{box-shadow:var(--shadow)}
.client-card{border-radius:var(--r3)}
.client-card:hover,.mw-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat-card{box-shadow:var(--shadow);border-radius:var(--r4)}
.stat-card:hover{box-shadow:var(--shadow-lg)}

/* Accent bar on section eyebrows */
.section-eyebrow{position:relative;padding-left:13px}
.section-eyebrow::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:13px;border-radius:2px;background:var(--grad-blue)}

/* Brand + identity chips: gradient + glow */
.brand-icon,.client-initial,.client-page-initial{background:var(--grad-blue);box-shadow:0 3px 10px rgba(15,0,255,.4)}
.avatar{font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.28)}

/* Primary buttons: gradient + lift */
.btn-primary,.btn-add-sub,.comment-send-btn{background:var(--grad-blue);box-shadow:0 4px 14px rgba(15,0,255,.32);transition:transform .15s,box-shadow .15s,filter .15s}
.btn-primary:hover,.btn-add-sub:hover,.comment-send-btn:hover{opacity:1;filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 7px 20px rgba(15,0,255,.45)}
.btn-primary:active,.btn-add-sub:active,.comment-send-btn:active{transform:translateY(0)}

/* Progress + bars: gradient fill */
.client-progress-fill,.bar-fill{background:var(--grad-blue)}

/* Inputs: focus glow */
.form-input:focus,.form-select:focus,.rich-input:focus,.add-subtask-input:focus,.filter-select:focus,.modal-title-input:focus{box-shadow:var(--glow)}

/* Board headers + columns refined */
.board-col{border-radius:var(--r3)}
.board-col-header{background:linear-gradient(180deg,var(--card2),transparent)}

/* Modal + panels: stronger elevation */
.modal-box,.notif-panel,.cstat-dropdown,.mention-dropdown{box-shadow:var(--shadow-lg)}

/* Status pills + tags: a touch of polish */
.status-pill{box-shadow:var(--shadow)}
.nav-btn.active{box-shadow:var(--shadow)}

/* Hero greeting: tighter, brighter */
.hero-greeting{font-size:24px}

/* ── Status dropdown ── */
.status-select{width:100%;border:1.5px solid var(--border2);border-radius:var(--r);padding:9px 12px;font-size:13px;font-weight:600;cursor:pointer;appearance:none;background-repeat:no-repeat;background-position:right 10px center;background-size:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");padding-right:30px}
.status-select:focus{outline:none;box-shadow:var(--glow)}
.status-select option{background:var(--navy2);color:var(--white)}

/* ── Task due line under status ── */
.task-right-stack{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.task-due-line{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}

/* ── SLA cards ── */
.sla-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.sla-card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--border);border-radius:var(--r3);padding:18px;box-shadow:var(--shadow)}
.sla-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;margin-bottom:14px}
.sla-target{font-size:11px;font-weight:600;color:var(--blue);background:rgba(15,0,255,.1);padding:3px 10px;border-radius:20px}
.sla-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.sla-val{font-size:22px;font-weight:700;letter-spacing:-.02em}
.sla-lbl{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.3}
.sla-foot{font-size:11px;color:var(--muted);margin-top:12px}

/* ── Review steps + type chip ── */
.review-steps{margin-top:10px;display:flex;flex-direction:column;gap:10px;padding:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--r2)}
.review-step .sidebar-label{margin-bottom:5px}
.type-chip{display:inline-block;font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px}

/* ── Workload Heatmap ── */
.heat-legend{display:flex;gap:16px;font-size:11px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
.heat-legend span{display:inline-flex;align-items:center;gap:6px}
.heat-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.heat-dot.green{background:#34d399}.heat-dot.yellow{background:#fbbf24}.heat-dot.red{background:#f87171}
.heat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.heat-cell{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r2);border:1px solid var(--border);box-shadow:var(--shadow)}
.heat-green{background:linear-gradient(180deg,rgba(52,211,153,.14),rgba(52,211,153,.05));border-color:rgba(52,211,153,.3)}
.heat-yellow{background:linear-gradient(180deg,rgba(251,191,36,.14),rgba(251,191,36,.05));border-color:rgba(251,191,36,.3)}
.heat-red{background:linear-gradient(180deg,rgba(248,113,113,.16),rgba(248,113,113,.06));border-color:rgba(248,113,113,.35)}
.heat-info{flex:1;min-width:0}
.heat-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heat-sub{font-size:11px;color:var(--muted);margin-top:2px}
.heat-count{font-size:22px;font-weight:700;letter-spacing:-.02em}
.heat-green .heat-count{color:#34d399}.heat-yellow .heat-count{color:#fbbf24}.heat-red .heat-count{color:#f87171}

/* ── Priority score chip ── */
.pscore{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;letter-spacing:.02em;white-space:nowrap}
.pscore-green{background:rgba(52,211,153,.15);color:#34d399}
.pscore-yellow{background:rgba(251,191,36,.15);color:#fbbf24}
.pscore-red{background:rgba(248,113,113,.16);color:#f87171}

/* ── Digital Asset Library ── */
.asset-add{display:grid;grid-template-columns:1fr 1fr 1.4fr 1.6fr auto;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--r3);padding:14px;margin-bottom:14px}
@media(max-width:820px){.asset-add{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.asset-add{grid-template-columns:1fr}}
.asset-search{margin-bottom:18px;max-width:420px}
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.asset-card{position:relative;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--border);border-radius:var(--r3);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,border-color .15s}
.asset-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--blue)}
.asset-link{display:block;padding:14px;color:var(--white)}
.asset-cat{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--blue);background:rgba(15,0,255,.1);padding:3px 9px;border-radius:20px;margin-bottom:10px}
.asset-title{font-size:14px;font-weight:600;line-height:1.35;display:flex;align-items:flex-start;gap:6px}
.asset-title i{color:var(--blue);font-size:15px;flex-shrink:0;margin-top:2px}
.asset-client{font-size:12px;color:var(--muted);margin-top:6px}
.asset-del{position:absolute;top:8px;right:8px}

/* ── Bigger, more readable task UI ── */
.task-name{font-size:16px;font-weight:600}
.task-due-line{font-size:13px;font-weight:600}
#f-desc{min-height:180px}
#st-desc{min-height:150px}
.subtask-row{padding:11px 14px;gap:12px}
.subtask-text{font-size:14px}
.subtask-check{width:18px;height:18px}
.comment-textarea{min-height:66px}
.comments-list,.modal-comments-list{max-height:300px}
.comment-text{font-size:13.5px}
.detail-due-big{font-size:14px;font-weight:700}

.asset-section{margin-bottom:22px}

/* ── Reordered task window (single column) ── */
.modal-body-stack{padding:16px 24px;display:flex;flex-direction:column;gap:18px}
.modal-body-stack .form-group{margin:0;display:flex;flex-direction:column;gap:6px}
.tf-grid{display:grid;gap:14px;align-items:start}
.tf-2{grid-template-columns:repeat(2,1fr)}
.tf-3{grid-template-columns:repeat(3,1fr)}
.tf-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.tf-3,.tf-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.tf-2,.tf-3,.tf-4{grid-template-columns:1fr}}
.modal-body-stack #f-desc{min-height:200px}

/* ── Task window polish ── */
.modal-wide{max-width:780px}
.tf-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r3);padding:18px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.modal-body-stack .form-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.modal-body-stack .form-select,.modal-body-stack .form-input{padding:10px 12px;border-radius:var(--r)}
.modal-body-stack .status-select{padding:10px 12px}
.modal-header .modal-title-input{font-size:20px}
/* subtask open arrow always visible + clearer click affordance */
.subtask-open{opacity:1}
.subtask-main:hover .subtask-text{color:var(--blue)}

/* ── Project risk banner (#17) ── */
.risk-banner{border-radius:var(--r3);padding:14px 16px;margin-bottom:18px;border:1px solid var(--border)}
.risk-title{font-size:14px;font-weight:700}
.risk-line{font-size:12.5px;color:var(--muted);margin-top:4px}
.risk-green{background:linear-gradient(180deg,rgba(52,211,153,.12),rgba(52,211,153,.04));border-color:rgba(52,211,153,.3)}
.risk-yellow{background:linear-gradient(180deg,rgba(251,191,36,.12),rgba(251,191,36,.04));border-color:rgba(251,191,36,.3)}
.risk-red{background:linear-gradient(180deg,rgba(248,113,113,.14),rgba(248,113,113,.05));border-color:rgba(248,113,113,.35)}
.risk-neutral{background:var(--card);border-color:var(--border2)}

/* ── Uniform task-window fields (match the Status box) ── */
.modal-body-stack .form-select,
.modal-body-stack .form-input,
.modal-body-stack .status-select{
  height:46px;width:100%;padding:0 12px;font-size:14px;font-weight:500;
  border:1.5px solid var(--border2);border-radius:var(--r);background:var(--navy3);
  appearance:none;-webkit-appearance:none;
}
.modal-body-stack .status-select{font-weight:600}
/* dropdown chevron for all selects in the task window */
.modal-body-stack .form-select{
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.modal-body-stack .tf-grid{align-items:end}
.modal-body-stack .form-group{justify-content:flex-end}
/* time-tracking pair fills the row height */
.modal-body-stack .form-group > div[style*="flex"]{height:46px}
.modal-body-stack .form-group > div[style*="flex"] .form-input{height:46px}
.collabs-list:empty{display:none}

/* ── Much bigger due date on the task card ── */
.task-due-line{
  font-size:15px;font-weight:700;color:var(--white);
  background:var(--card2);border:1px solid var(--border2);
  padding:6px 12px;border-radius:var(--r);display:inline-flex;align-items:center;gap:6px
}
.task-due-line i{font-size:16px;color:var(--blue)}

.avatar-img{position:relative;overflow:hidden}
.avatar-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ── Analytics panel (per-client + agency-wide) ───────────────────────────── */
.analytics-panel{margin:22px 0 14px;border:1px solid var(--border2);border-radius:16px;background:var(--card);overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.analytics-toggle{width:100%;display:flex;align-items:center;gap:12px;border:none;color:var(--white);font-size:14px;font-weight:700;padding:15px 18px;cursor:pointer;font-family:inherit;background:linear-gradient(100deg,var(--blue-soft),transparent 70%)}
.an-tg-icon{width:30px;height:30px;border-radius:9px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;box-shadow:0 3px 10px rgba(15,0,255,.4)}
.an-tg-title{letter-spacing:-.01em}
.an-tg-meta{color:var(--muted);font-weight:500;font-size:12px;background:var(--card2);padding:3px 10px;border-radius:20px;border:1px solid var(--border)}
.an-chev{margin-left:auto;color:var(--muted);font-size:18px}
.analytics-panel.open .analytics-toggle{border-bottom:1px solid var(--border)}
.analytics-body{padding:18px;animation:anFade .35s ease}
@keyframes anFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.an-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.an-grid{grid-template-columns:1fr}}
.an-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;background:var(--card2);padding:16px 18px;transition:border-color .18s,box-shadow .18s}
.an-card:hover{border-color:var(--border2);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.an-title{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:10px;letter-spacing:.07em;text-transform:uppercase}
.an-plot{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:172px}
.an-plot>*{width:100%}
.an-insight{margin-top:12px;padding-top:11px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);font-weight:600;display:flex;gap:7px;align-items:center;line-height:1.4}
.an-insight i{color:var(--blue);font-size:15px;flex:none}
.an-insight.pinned{color:var(--white)}
.an-tip{position:fixed;z-index:99999;pointer-events:none;display:none;background:rgba(8,8,12,.97);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:8px 11px;font-size:12px;line-height:1.55;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:220px}
.an-tip b{font-weight:700}
.an-seg{cursor:pointer;transition:opacity .15s,stroke-width .15s}
.an-seg:hover{opacity:.82;stroke-width:25}
.an-barg{cursor:pointer}
.an-barg:hover rect[fill^="#"]{opacity:.82}
.an-leg{cursor:pointer;border-radius:7px;padding:2px 4px;margin:-2px -4px;transition:background .15s}
.an-leg:hover{background:var(--card)}
.an-donut circle[fill="transparent"]{cursor:pointer}
.an-svg{width:100%;height:auto;display:block;overflow:visible}
.an-empty{color:var(--muted);font-size:13px;padding:20px 0;text-align:center}
.an-axis{font-size:9px;fill:var(--muted);font-weight:600}
.an-axis2{font-size:11px;font-weight:800;fill:var(--white)}
.an-axis-l{font-size:12px;fill:var(--muted);font-weight:600}
.an-sub{font-size:12px;color:var(--white);margin-top:10px;text-align:center;font-weight:600}
.an-mini-legend{display:flex;gap:16px;justify-content:center;margin-top:10px;font-size:11px;color:var(--muted);font-weight:600}
.an-mini-legend span{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.an-donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.an-donut{width:160px;height:160px;flex:none;filter:drop-shadow(0 4px 12px rgba(0,0,0,.22))}
.an-donut-num{font-size:34px;font-weight:800;fill:var(--white)}
.an-donut-lbl{font-size:11px;fill:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.an-legend{display:flex;flex-direction:column;gap:9px;min-width:130px}
.an-leg{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);font-weight:500}
.an-leg span{width:11px;height:11px;border-radius:4px;flex:none}
.an-leg b{color:var(--white);margin-left:auto;padding-left:12px;font-size:13px}

/* Community Management sub-category chip */
.cm-cat-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#0d9488;background:rgba(13,148,136,.14);border:1px solid rgba(13,148,136,.4);border-radius:20px;padding:2px 9px;margin-bottom:8px;letter-spacing:.01em}
.cm-cat-chip i{font-size:12px}

/* Deliverable link field */
.req-note{font-size:10px;font-weight:600;color:#f59e0b;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.35);border-radius:20px;padding:1px 8px;margin-left:8px;text-transform:none;letter-spacing:0}
.deliverable-link{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-size:13px;font-weight:600;word-break:break-all;text-decoration:none}
.deliverable-link:hover{text-decoration:underline}
.deliverable-missing{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#f59e0b}

/* ── Global search ────────────────────────────────────────────────────────── */
.hero-search{position:relative;display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--border2);border-radius:22px;padding:0 14px;height:40px;width:420px;max-width:100%;transition:border-color .18s}
.hero-search:focus-within{border-color:var(--blue)}
.hero-search>i{color:var(--muted);font-size:17px;flex:none}
.hero-search input{flex:1;background:none;border:none;outline:none;color:var(--white);font-size:14px;font-family:inherit;min-width:0}
.hero-search input::placeholder{color:var(--muted)}
.global-search-results{position:absolute;top:46px;left:0;width:420px;max-width:90vw;max-height:60vh;overflow-y:auto;background:var(--bar-bg,#0a0a0b);border:1px solid var(--border2);border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.5);display:none;z-index:300;padding:6px}
.global-search-results.open{display:block}
.gs-group{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
.gs-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;transition:background .12s}
.gs-item:hover{background:var(--card2)}
.gs-ava{width:28px;height:28px;flex:none}
.gs-dot{width:9px;height:9px;border-radius:50%;flex:none;margin:0 9px}
.gs-main{min-width:0;flex:1}
.gs-title{font-size:13px;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-empty{padding:18px;text-align:center;color:var(--muted);font-size:13px}
@media(max-width:640px){.hero-search{order:3;max-width:none;width:100%;flex-basis:100%}.global-search-results{width:100%}}
/* Notification head actions */
.notif-head-actions{display:flex;gap:6px}
.notif-clearall{background:none;border:none;color:#f87171;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:7px;font-family:inherit}
.notif-clearall:hover{background:rgba(248,113,113,.12)}
.notif-markall{display:flex;align-items:center;gap:4px}

/* ── Built-in calendar ────────────────────────────────────────────────────── */
.cal-wrap{border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden}
.cal-head{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border)}
.cal-month{font-size:16px;font-weight:700;color:var(--white)}
.cal-sub{font-size:12px;color:var(--muted)}
.cal-nav{margin-left:auto;display:flex;gap:6px}
.cal-nav button{background:var(--card2);border:1px solid var(--border2);color:var(--white);height:32px;min-width:32px;padding:0 12px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;display:flex;align-items:center;justify-content:center}
.cal-nav button:hover{border-color:var(--blue)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-wdrow{border-bottom:1px solid var(--border)}
.cal-wd{padding:8px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;text-align:left}
.cal-cell{min-height:104px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:6px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-cell:nth-child(7n){border-right:none}
.cal-empty{background:repeating-linear-gradient(45deg,transparent,transparent 6px,var(--card2) 6px,var(--card2) 7px);opacity:.4}
.cal-date{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:2px}
.cal-today{background:var(--blue-soft)}
.cal-today .cal-date{color:var(--blue);font-weight:800}
.cal-chip{font-size:11px;line-height:1.3;padding:3px 6px;border-radius:5px;background:var(--card2);border-left:3px solid var(--blue);color:var(--white);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-chip:hover{background:var(--card)}
.cal-chip.cal-late{background:rgba(248,113,113,.14)}
.cal-more{font-size:10px;color:var(--muted);padding:1px 6px}
@media(max-width:640px){.cal-cell{min-height:70px}.cal-chip{font-size:10px}}

/* Global search — left placement + member insight drill-down */
.global-search-results{left:0;right:auto}
.gs-back{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;padding:8px 10px;font-family:inherit}
.gs-mhead{display:flex;align-items:center;gap:12px;padding:6px 10px 12px;border-bottom:1px solid var(--border)}
.gs-mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 10px}
.gs-mstats>div{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center}
.gs-mstats b{display:block;font-size:20px;font-weight:800;color:var(--white)}
.gs-mstats span{font-size:11px;color:var(--muted)}

/* ── Insights hub ─────────────────────────────────────────────────────────── */
.ins-summary{border:1px solid var(--border2);border-radius:14px;background:linear-gradient(120deg,var(--blue-soft),transparent 60%);padding:16px 18px;margin-bottom:6px}
.ins-summary-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ins-ai-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;background:var(--blue);padding:4px 11px;border-radius:20px}
.ins-summary-sub{font-size:11px;color:var(--muted)}
.ins-summary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.ins-summary-list li{font-size:13.5px;color:var(--white);line-height:1.5}
.ins-metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
@media(max-width:760px){.ins-metric-row{grid-template-columns:repeat(2,1fr)}}
.ins-metric{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.ins-metric-val{font-size:26px;font-weight:800;color:var(--white);line-height:1.1}
.ins-metric-lbl{font-size:12px;color:var(--white);font-weight:600;margin-top:4px}
.ins-metric-sub{font-size:11px;color:var(--muted);margin-top:2px}
.ins-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:760px){.ins-grid{grid-template-columns:1fr}}
.ins-card{border:1px solid var(--border);border-radius:14px;background:var(--card);padding:16px 18px}
.ins-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:13px;font-weight:700;color:var(--white)}
.ins-card-sub{font-size:11px;color:var(--muted);font-weight:500}
.ins-hbars{display:flex;flex-direction:column;gap:9px}
.ins-hbar{display:grid;grid-template-columns:120px 1fr 64px;align-items:center;gap:10px}
.ins-hbar-lbl{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-hbar-track{height:14px;background:var(--card2);border-radius:7px;overflow:hidden}
.ins-hbar-fill{height:100%;border-radius:7px;transition:width .3s}
.ins-hbar-val{font-size:12px;font-weight:700;color:var(--white);text-align:right}
.ins-bigpct{text-align:center;padding:20px 0}
.ins-bigpct-val{font-size:46px;font-weight:800}
.ins-bigpct-lbl{font-size:12px;color:var(--muted);margin-top:4px}
.ins-empty{color:var(--muted);font-size:13px;padding:18px 0;text-align:center}
.ins-note{margin-top:14px;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 14px}
.ins-note i{color:var(--blue);flex:none;font-size:15px}

/* Pipeline lens */
.pl-stages{display:flex;gap:4px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px}
.pl-stage{flex:1;min-width:54px;text-align:center;padding:7px 4px;border-radius:9px;background:var(--card2);border:1px solid var(--border)}
.pl-stage-day{font-size:13px;font-weight:800;color:var(--white)}
.pl-stage-name{font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap}
.pl-now{background:var(--blue);border-color:var(--blue)}
.pl-now .pl-stage-day,.pl-now .pl-stage-name{color:#fff}
.pl-clients{display:flex;flex-direction:column;gap:6px}
.pl-client{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;background:var(--card2);border:1px solid var(--border);cursor:pointer;transition:border-color .15s}
.pl-client:hover{border-color:var(--blue)}
.pl-cname{font-size:13px;font-weight:600;color:var(--white);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-sub{font-size:11px;color:var(--muted);white-space:nowrap}
.pl-chip{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
.pl-ok{background:rgba(52,211,153,.16);color:#34d399}
.pl-behind{background:rgba(248,113,113,.16);color:#f87171}
.pl-clear{background:var(--card);color:var(--muted)}

/* ── Ask Flow assistant ───────────────────────────────────────────────────── */
.ask-fab{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;border:none;background:var(--blue);color:#fff;font-size:24px;cursor:pointer;box-shadow:0 8px 26px rgba(15,0,255,.5);z-index:400;display:flex;align-items:center;justify-content:center;transition:transform .18s}
.ask-fab:hover{transform:scale(1.06)}
.ask-fab.open{transform:scale(.9);opacity:.85}
.ask-panel{position:fixed;right:22px;bottom:88px;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 130px);background:var(--bar-bg,#0a0a0b);border:1px solid var(--border2);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.55);z-index:400;display:flex;flex-direction:column;overflow:hidden}
.ask-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);background:linear-gradient(100deg,var(--blue-soft),transparent 70%)}
.ask-title{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--white)}
.ask-dot{width:26px;height:26px;border-radius:8px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.ask-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;display:flex}
.ask-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.ask-msg{display:flex;gap:8px;max-width:100%}
.ask-user{justify-content:flex-end}
.ask-ava{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.ask-bubble{font-size:13.5px;line-height:1.55;padding:10px 13px;border-radius:13px;max-width:78%}
.ask-user .ask-bubble{background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.ask-assistant .ask-bubble{background:var(--card2);color:var(--white);border:1px solid var(--border);border-bottom-left-radius:4px}
.ask-warn .ask-bubble{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35)}
.ask-welcome{text-align:center;padding:18px 10px;margin:auto 0}
.ask-welcome-icon{width:46px;height:46px;border-radius:14px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 12px}
.ask-welcome-title{font-size:15px;font-weight:700;color:var(--white)}
.ask-welcome-sub{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.ask-chip{background:var(--card2);border:1px solid var(--border2);color:var(--white);font-size:12px;padding:7px 12px;border-radius:18px;cursor:pointer;font-family:inherit;transition:border-color .15s}
.ask-chip:hover{border-color:var(--blue)}
.ask-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}
.ask-input-row input{flex:1;background:var(--card2);border:1px solid var(--border2);border-radius:22px;padding:0 14px;height:40px;color:var(--white);font-size:13.5px;font-family:inherit;outline:none}
.ask-input-row input:focus{border-color:var(--blue)}
.ask-send{width:40px;height:40px;border-radius:50%;border:none;background:var(--blue);color:#fff;cursor:pointer;font-size:17px;flex:none;display:flex;align-items:center;justify-content:center}
.ask-typing{display:inline-flex;gap:4px;align-items:center;height:14px}
.ask-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:askblink 1.2s infinite}
.ask-typing i:nth-child(2){animation-delay:.2s}.ask-typing i:nth-child(3){animation-delay:.4s}
@keyframes askblink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media(max-width:520px){.ask-panel{right:10px;left:10px;width:auto;bottom:84px}}

/* ── Sunday Stand-up modal ────────────────────────────────────────────────── */
.standup-box{max-width:760px;width:calc(100vw - 40px);max-height:88vh;display:flex;flex-direction:column}
.standup-title{display:flex;align-items:center;gap:12px}
.su-icon{width:34px;height:34px;border-radius:10px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.su-h{font-size:16px;font-weight:700;color:var(--white)}
.su-sub{font-size:12px;color:var(--muted)}
.standup-body{flex:1;overflow-y:auto;padding:18px 20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.su-loading,.su-warn{color:var(--muted);font-size:14px;padding:24px 0;text-align:center}
.su-warn{color:#f59e0b}
.su-content h2{font-size:18px;color:var(--white);margin:6px 0 10px}
.su-content h3{font-size:15px;color:var(--blue);margin:18px 0 6px;border-bottom:1px solid var(--border);padding-bottom:5px}
.su-content h4{font-size:13px;color:var(--white);margin:12px 0 4px;font-weight:700}
.su-content p{font-size:13.5px;color:var(--muted);margin:7px 0;line-height:1.6}
.su-content ul{margin:6px 0 10px 18px}
.su-content li{font-size:13.5px;color:var(--white);margin:4px 0;line-height:1.5}
.su-content b{color:var(--white)}
.standup-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px}

/* Weekly Tasks preview (inside stand-up modal) */
.wk-sec{margin-bottom:20px}
.wk-h{font-size:14px;font-weight:700;color:var(--white);margin-bottom:10px}
.wk-gridwrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px}
.wk-grid{border-collapse:collapse;width:100%;min-width:680px}
.wk-grid th{background:var(--blue);color:#fff;font-size:10px;padding:6px 5px;text-align:center;position:sticky;top:0}
.wk-grid td{border:1px solid var(--border);padding:5px;font-size:10px;color:var(--muted);vertical-align:top;min-width:90px}
.wk-grid td.wk-day{background:var(--card2);color:var(--white);font-weight:700;white-space:nowrap;min-width:60px}
.wk-cell{margin:2px 0;color:var(--white)} .wk-cell b{color:var(--blue)}
.wk-dash{color:var(--muted2)}
.wk-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:640px){.wk-two{grid-template-columns:1fr}}
.wk-sub2{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}
.wk-bar{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:12px}
.wk-bar span{width:80px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-bar .wk-track{flex:1;height:12px;background:var(--card2);border-radius:6px;overflow:hidden}
.wk-bar .wk-fill{height:100%;background:var(--blue);border-radius:6px}
.wk-bar b{color:var(--white);width:24px;text-align:right}
.wk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
@media(max-width:640px){.wk-stats{grid-template-columns:repeat(2,1fr)}}
.wk-stat{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center}
.wk-stat b{display:block;font-size:26px;font-weight:800;color:var(--blue)} .wk-stat span{font-size:11px;color:var(--muted)}

/* ── "Install Flow" banner (mobile) ── */
.install-banner{
  position:fixed;left:10px;right:10px;
  bottom:calc(78px + env(safe-area-inset-bottom));z-index:500;
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:16px;
  background:var(--bar-bg);backdrop-filter:blur(20px);
  border:1px solid var(--border2);box-shadow:0 12px 34px rgba(0,0,0,.45);
  transform:translateY(140%);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;
}
.install-banner.show{transform:translateY(0);opacity:1}
.install-icon{width:34px;height:34px;flex-shrink:0}
.install-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.3}
.install-text b{font-size:14px;font-weight:700}
.install-text span{font-size:12px;color:var(--muted)}
.install-text span i{font-size:14px;vertical-align:-2px;color:var(--blue)}
.install-go{flex-shrink:0;background:var(--blue);color:#fff;border:none;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer}
.install-x{flex-shrink:0;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;display:flex;padding:2px}
.install-x:hover{color:var(--white)}

/* ── Mobile web-app: bottom tab bar + native feel ── */
.topbar{padding-top:env(safe-area-inset-top)}
@media(max-width:760px){
  /* Compact, app-like topbar */
  .topbar{height:auto;min-height:54px;padding:env(safe-area-inset-top) 14px 0;gap:8px}
  .topbar-brand span{font-size:16px}
  .topbar-right{gap:7px}
  .user-chip{padding:4px;border-radius:50%}
  .user-chip > span:last-child{display:none}     /* hide the name, keep avatar */
  .tab-hint{display:none}                          /* drag-to-reorder is desktop-only */

  /* The nav becomes a fixed bottom tab bar */
  .topbar-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:350;flex:none;
    background:var(--bar-bg);backdrop-filter:blur(20px);
    border-top:1px solid var(--border2);
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    gap:2px;justify-content:space-between;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .topbar-nav::-webkit-scrollbar{display:none}
  .nav-btn{
    flex:1 0 auto;flex-direction:column;gap:3px;min-width:60px;
    padding:5px 8px;font-size:10px;font-weight:600;border-radius:13px;
    line-height:1.1;white-space:nowrap;
  }
  .nav-btn i{font-size:21px}
  .nav-btn:hover{background:none;color:var(--muted)}
  .nav-btn.active{color:var(--blue);background:var(--blue-soft)}
  .nav-btn.active i{transform:translateY(-1px)}

  /* Keep page content clear of the bottom bar */
  #app{padding-bottom:calc(66px + env(safe-area-inset-bottom))}

  /* Float the Ask button above the bottom bar */
  .ask-fab{bottom:calc(80px + env(safe-area-inset-bottom));right:16px;width:50px;height:50px;font-size:22px}
  .ask-panel{bottom:calc(140px + env(safe-area-inset-bottom))!important}
}
.wk-high{font-size:12.5px;color:var(--muted);line-height:1.6} .wk-high b{color:var(--white)}