:root{
  --bg:#020d07;--surface:#041109;--surface2:#071a0e;--surface3:#0c2314;
  --border:rgba(3,114,62,0.18);--border2:rgba(3,114,62,0.32);
  --text:#e8f5ec;--text2:#6b9b78;--text3:#2f5a3a;
  --pre:#03723E;--pre-dim:rgba(3,114,62,0.14);--pre-bd:rgba(3,114,62,0.32);
  --con:#D12027;--con-dim:rgba(209,32,39,0.12);--con-bd:rgba(209,32,39,0.30);
  --done:#E2E438;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Cormorant Garamond',serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(3,114,62,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(3,114,62,0.06) 1px,transparent 1px);background-size:44px 44px;pointer-events:none;z-index:0}

/* ── LOGIN ── */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:200;background:var(--bg)}
.lcard{background:var(--surface);border:1px solid var(--border2);border-radius:18px;padding:52px 44px;width:400px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.7)}
.lcard::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,#E2E438,transparent)}
.llogo{display:flex;justify-content:center;margin-bottom:12px}
.llogo img{height:80px;width:auto}
.lsub{font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--text3);letter-spacing:3px;text-transform:uppercase;margin-bottom:44px;text-align:center}
.flbl{display:block;font-family:'Cormorant Garamond',serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text2);margin-bottom:8px}
.fin{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:9px;padding:12px 16px;color:var(--text);font-family:'Cormorant Garamond',serif;font-size:15px;outline:none;transition:border-color .2s;margin-bottom:16px}
.fin:focus{border-color:var(--pre)}.fin::placeholder{color:var(--text3)}
.rem{display:flex;align-items:center;gap:9px;margin-bottom:28px;cursor:pointer;user-select:none}
.rem input{accent-color:var(--pre);width:15px;height:15px;cursor:pointer}
.rem span{font-size:14px;color:var(--text2)}
.btnl{width:100%;background:var(--pre);color:#fff;border:none;border-radius:9px;padding:14px;font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:700;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:opacity .2s,transform .1s}
.btnl:hover{opacity:.85}.btnl:active{transform:scale(.99)}
.lerr{color:#f87171;font-size:13px;margin-top:10px;display:none;text-align:center}

/* ── DASHBOARD SHELL ── */
#dash{display:none;position:relative;z-index:1;min-height:100vh}
.hdr{background:var(--surface);border-bottom:1px solid var(--border);padding:0 32px;height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:sticky;top:0;z-index:100;backdrop-filter:blur(10px);overflow:visible}
.hl{display:flex;align-items:center;gap:14px;padding-left:80px;min-width:0;overflow:hidden}
.hlogo{position:absolute;left:32px;top:0;z-index:101}
.hlogo img{height:84px;width:auto;display:block}
.htitle{font-family:'EB Garamond',serif;font-size:25px;letter-spacing:4px;text-transform:uppercase;color:var(--text3);text-align:center;justify-self:center;align-self:center;font-weight:bolder}
.hright{display:flex;align-items:center;gap:10px;justify-self:end;align-self:center}
.huser{font-size:14px;color:var(--text2)}
.hbtn{background:none;border:1px solid var(--border2);border-radius:7px;padding:6px 14px;color:var(--text3);font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s}
.hbtn:hover{color:var(--text);border-color:var(--text2)}
.hbtn.active{color:var(--pre);border-color:var(--pre-bd);background:var(--pre-dim)}
.tgpill{flex:1;min-width:0;margin-right:20px;white-space:nowrap;overflow:hidden}
.tgscroll{display:inline-block;background:rgba(3,114,62,0.20);color:#4ade80;border:1px solid rgba(3,114,62,0.40);border-radius:5px;padding:4px 10px;font-family:'Cormorant Garamond',serif;font-size:12px;font-weight:600;letter-spacing:1.5px;margin:0 12px}

/* ── FLOATING VIEW PANEL ── */
.view-wrap{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;display:flex;align-items:center}
.view-tab{writing-mode:vertical-rl;transform:rotate(180deg);padding:28px 7px;background:var(--surface2);border:1px solid var(--border2);border-right:none;border-radius:0 8px 8px 0;font-family:'Cormorant Garamond',serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--text3);cursor:pointer;user-select:none;transition:color .2s,background .2s,opacity .2s}
.view-wrap.open .view-tab{opacity:0;pointer-events:none}
.view-panel{position:absolute;right:100%;top:50%;transform:translateY(-50%) translateX(220px);opacity:0;pointer-events:none;background:var(--surface2);border:1px solid var(--border2);border-right:none;border-radius:12px 0 0 12px;padding:14px 0;width:210px;box-shadow:-6px 0 32px rgba(0,0,0,.5);transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .22s}
.view-wrap.open .view-panel{transform:translateY(-50%) translateX(0);opacity:1;pointer-events:auto}
.vptitle{font-family:'Cormorant Garamond',serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);padding:4px 16px 3px}
.vprow{display:flex;align-items:center;gap:10px;padding:6px 16px;cursor:pointer;font-size:13px;color:var(--text2);transition:background .15s}
.vprow:hover{background:var(--surface3);color:var(--text)}
.vprow input{accent-color:var(--pre);cursor:pointer;flex-shrink:0}
.vpsep{height:1px;background:var(--border);margin:6px 0}

/* ── SIDEBAR ── */
.sidebar{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;width:192px;max-height:calc(100vh - 80px);overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-right:none;border-radius:12px 0 0 12px;padding:10px 0}
.sb-sec{font-family:'Cormorant Garamond',serif;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text3);padding:6px 14px 3px}
.sb-sep{height:1px;background:var(--border);margin:8px 0}
.sb-emp{padding:3px 12px;cursor:default}
.sb-emp-row{display:flex;align-items:center;gap:6px}
.sb-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.sb-dot.in{background:#4ade80;box-shadow:0 0 4px rgba(74,222,128,.45)}
.sb-dot.out{background:var(--text3)}
.sb-name{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-role{font-size:9px;color:var(--text3);padding-left:11px;letter-spacing:.3px;margin-top:1px}
.sb-tbl{width:100%;border-collapse:collapse}
.sb-tbl td{padding:4px 8px;font-size:11px;color:var(--text2);vertical-align:middle}
.sb-tbl tr:nth-child(odd) td{background:rgba(3,114,62,0.04)}
.sb-tbl td:nth-child(2){color:var(--text);font-family:'Cormorant Garamond',serif;font-weight:700;font-size:15px;text-align:right;padding-right:4px;line-height:1}
.sb-tbl td:nth-child(3){color:var(--text3);font-size:9px;letter-spacing:.4px;text-transform:uppercase}

/* ── MAIN CONTAINER ── */
.main{padding:20px 24px;margin-right:200px;transition:padding .25s}
.main.wide{padding:20px 24px}

/* ── STAT CARDS ── */
.stats{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.sc{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:16px 20px;position:relative;overflow:hidden;flex:1;min-width:140px}
.sc:hover{border-color:var(--border2)}
.sc::after{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.sc.s0::after{background:var(--text3)}.sc.s1::after{background:var(--pre)}.sc.s2::after{background:var(--con)}.sc.s3::after{background:var(--done)}
.sn{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:700;line-height:1;margin-bottom:3px}
.sl{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text2)}
.sn.c1{color:var(--pre)}.sn.c2{color:var(--con)}.sn.c3{color:var(--done)}

/* ── TABS ── */
.tabs{display:flex;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:4px;width:fit-content;margin-bottom:20px}
.tab{padding:6px 18px;border-radius:8px;font-family:'Cormorant Garamond',serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border:none;background:none;color:var(--text3);transition:all .2s}
.tab:hover{color:var(--text)}.tab.on{color:var(--text);background:var(--surface2)}

/* ── PROJECT CARD GRID ── */
/* TV layout: minmax(300px,1fr) = 5 cols at 1920px  |  reduce to 260px for 6 cols */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}

/* ── PROJECT CARD ── */
.pc{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;cursor:pointer;container-type:inline-size}
.pc:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(0,0,0,0.6);border-color:var(--border2)}
.cst{height:3px}
.cst.pre{background:linear-gradient(90deg,#03723E,#04c45a)}
.cst.con{background:linear-gradient(90deg,#D12027,#A66D29)}

/* ── V4 CARD LAYOUT — full-width ring, names embedded in bands ── */
.cn{font-family:'Cormorant Garamond',serif;font-size:clamp(13px,5cqw,18px);font-weight:700;letter-spacing:.3px;line-height:1.25;padding:0;color:var(--text);border-bottom:none;white-space:nowrap;overflow:hidden}
.v3hd{padding:8px 14px 7px;border-bottom:1px solid var(--border)}
.v3hd .client{width:100%;margin-bottom:0;white-space:nowrap;overflow:hidden}
.v3ring{position:relative;padding:32px 10px 4px}
.v3ring-pb{position:absolute;top:6px;left:14px;z-index:1}
.v3ring svg{width:100%;height:auto;display:block}
.v3ring-ov{position:absolute;top:10px;right:14px;z-index:1;text-align:right}
.v3ring-ov .rcp{font-family:'Cormorant Garamond',serif;font-size:clamp(14px,8cqw,32px);font-weight:700;line-height:1;color:var(--text);display:block}
.v3ring-ov .rcl{font-size:clamp(7px,2.2cqw,10px);letter-spacing:2px;text-transform:uppercase;color:var(--text3);display:block}
.v3ft{padding:7px 14px 10px;border-top:1px solid var(--border);display:flex;align-items:flex-start;gap:6px}

/* Phase badge */
.pb{font-family:'Cormorant Garamond',serif;font-size:clamp(7px,2.5cqw,10px);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:3px 9px;border-radius:20px;white-space:nowrap}
.pb.pre{background:var(--pre-dim);color:#4ade80;border:1px solid var(--pre-bd)}
.pb.con{background:var(--con-dim);color:var(--con);border:1px solid var(--con-bd)}

/* Client */
.client{font-family:'Cormorant Garamond',serif;font-size:clamp(9px,2.8cqw,11px);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:8px}
.client span{color:var(--text2)}

/* Status */
.sd{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:3px;animation:pulse 2.5s ease-in-out infinite}
.sd.active{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.5)}
.sd.hold{background:var(--con);box-shadow:0 0 5px rgba(209,32,39,.4)}
.sd.block{background:#f87171;box-shadow:0 0 5px rgba(248,113,113,.4)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.stxt{font-size:13px;color:var(--text2);flex:1;line-height:1.3;overflow:hidden;white-space:nowrap}
.txs{display:inline-block;white-space:nowrap}
.supd{font-size:10px;color:var(--text3);white-space:nowrap;flex-shrink:0}

/* ── DETAIL PANEL ── */
#panel{position:fixed;top:0;right:0;bottom:0;width:400px;background:var(--surface2);border-left:1px solid var(--border2);z-index:150;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:0}
#panel.open{transform:translateX(0)}
#ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:140;opacity:0;pointer-events:none;transition:opacity .3s}
#ov.open{opacity:1;pointer-events:all}
.panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 0;gap:8px}
.pcls{background:none;border:1px solid var(--border2);border-radius:7px;padding:6px 12px;color:var(--text2);cursor:pointer;font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:1.5px;transition:all .2s}
.pcls:hover{color:var(--text);border-color:var(--text2)}
.pedit-btn{background:none;border:1px solid var(--pre-bd);border-radius:7px;padding:6px 14px;color:var(--pre);cursor:pointer;font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:1.5px;transition:all .2s}
.pedit-btn:hover{background:var(--pre-dim)}
#panel-view{padding:8px 28px 40px}
#panel-edit{padding:8px 28px 40px}

/* ── EDIT INPUTS ── */
.edit-input{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:10px 12px;color:var(--text);font-family:'Cormorant Garamond',serif;font-size:14px;outline:none;transition:border-color .2s;margin-bottom:10px}
.edit-input:focus{border-color:var(--pre)}
.edit-input::placeholder{color:var(--text3)}
select.edit-input{cursor:pointer}
.ef{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.efl{font-size:12px;color:var(--text2);width:110px;flex-shrink:0;letter-spacing:.3px}
.eslider{flex:1;accent-color:var(--pre);cursor:pointer;height:4px}
.epct{font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:700;width:36px;text-align:right;flex-shrink:0}
.edit-section-lbl{font-family:'Cormorant Garamond',serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin:16px 0 8px}
.edit-actions{display:flex;gap:10px;margin-top:20px}
.edit-save-btn{flex:1;background:var(--pre);color:#fff;border:none;border-radius:9px;padding:12px;font-family:'Cormorant Garamond',serif;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:opacity .2s}
.edit-save-btn:hover{opacity:.85}
.edit-cancel-btn{background:none;border:1px solid var(--border2);border-radius:9px;padding:12px 20px;color:var(--text2);font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s}
.edit-cancel-btn:hover{border-color:var(--text2);color:var(--text)}
.edit-err{font-size:12px;color:#f87171;margin-top:8px;min-height:18px}
.edit-log-row{display:flex;gap:8px;align-items:flex-start}
.edit-log-ico{width:52px;flex-shrink:0}

/* ── PROFILE OVERLAY ── */
#profile-overlay{position:fixed;inset:0;background:var(--bg);z-index:200;display:none;flex-direction:column;overflow-y:auto}
#profile-overlay.open{display:flex}
.po-hdr{padding:28px 32px 20px;border-bottom:1px solid var(--border)}
.po-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;display:none;margin-top:16px;border:2px solid var(--border2)}
.po-name{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:700;margin-top:12px;clear:both}
.po-meta{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-top:4px}
.po-meta span{color:var(--pre);border:1px solid var(--pre-bd);border-radius:20px;padding:2px 10px;margin-left:8px}
.po-body{padding:24px 32px 48px;flex:1}
.po-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.po-card-name{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:700;margin-bottom:2px}
.po-card-meta{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3)}

/* ── CREATE PROJECT OVERLAY ── */
#create-overlay{position:fixed;inset:0;background:var(--bg);z-index:200;display:none;flex-direction:column;overflow-y:auto}
#create-overlay.open{display:flex}
.co-hdr{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1}
.co-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.co-body{padding:28px 32px 60px;max-width:720px}
.co-section{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid var(--border)}
.co-section:last-child{border-bottom:none}
.co-lbl{display:block;font-family:'Cormorant Garamond',serif;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);margin-bottom:6px}
.co-row{margin-bottom:4px}
.co-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:4px}

/* ── USERNAME CLICKABLE ── */
#huser{cursor:pointer;transition:color .2s}
#huser:hover{color:var(--text)}
.pnm{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;margin-bottom:4px;margin-top:10px;line-height:1.2}
.pclient{font-family:'Cormorant Garamond',serif;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.pclient span{color:var(--text2)}
.pph{font-size:12px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-bottom:24px}
.psec{font-family:'Cormorant Garamond',serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:12px;margin-top:22px}
.ptl{display:flex;align-items:center;margin-bottom:6px}
.pstep{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}
.pstep:not(:last-child)::after{content:'';position:absolute;top:10px;left:50%;width:100%;height:1px;background:var(--border2)}
.psd{width:20px;height:20px;border-radius:50%;border:2px solid var(--border2);background:var(--surface);z-index:1;position:relative}
.psd.dn{background:var(--done);border-color:var(--done)}
.psd.cu{background:var(--pre);border-color:var(--pre);box-shadow:0 0 0 4px var(--pre-dim)}
.psd.cc{background:var(--con);border-color:var(--con);box-shadow:0 0 0 4px var(--con-dim)}
.psl{font-size:10px;color:var(--text3);letter-spacing:1px;text-align:center;margin-top:6px;text-transform:uppercase}
.br{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.brl{font-size:12px;color:var(--text2);width:100px;flex-shrink:0}
.brt{flex:1;height:10px;background:rgba(3,114,62,0.10);border-radius:5px;overflow:hidden}
.brf{height:100%;border-radius:5px}
.brp{font-family:'Cormorant Garamond',serif;font-size:12px;font-weight:700;width:32px;text-align:right;color:var(--text2)}
.li{padding:10px 0;border-bottom:1px solid var(--border);display:flex;gap:10px}
.li:last-child{border-bottom:none}
.lic{font-size:14px;flex-shrink:0;margin-top:1px}
.lim{font-size:13px;color:var(--text);line-height:1.4}
.lit{font-size:11px;color:var(--text3);margin-top:3px}
.tm{display:flex;gap:5px;align-items:baseline}
.tr{font-family:'Cormorant Garamond',serif;font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);flex-shrink:0;width:52px}
.tn{font-size:13px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;flex:1}

/* ── ANIMATIONS ── */
.mq{animation:mq-scroll 10s ease-in-out infinite}
@keyframes mq-scroll{
  0%,20%{transform:translateX(0)}
  70%,90%{transform:translateX(var(--mq,0px))}
  100%{transform:translateX(0)}
}
@keyframes fi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pc{animation:fi .3s ease both}
.pc:nth-child(2){animation-delay:.05s}.pc:nth-child(3){animation-delay:.10s}.pc:nth-child(4){animation-delay:.15s}
.pc:nth-child(5){animation-delay:.20s}.pc:nth-child(6){animation-delay:.25s}

/* ── FILTER DROPDOWN (mobile only) ── */
.filter-sel{display:none}

/* ── VIEW CLOSE BUTTON (mobile only) ── */
.vpclose{display:none}

/* ── NAV: 2-ROW LAYOUT — logo + right span both rows, title/dept stack in center ── */
@media(max-width:1499px){
  .hdr{grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;height:auto;padding:0}
  .hlogo{position:relative;left:auto;top:auto;transform:none;grid-column:1;grid-row:1/3;display:flex;align-items:center;justify-content:center;padding:12px 18px;z-index:2}
  .hlogo img{height:76px}
  .htitle{grid-column:2;grid-row:1;font-size:24px;font-weight:700;letter-spacing:4px;text-align:center;align-self:end;padding:10px 0 2px}
  .hright{grid-column:3;grid-row:1/3;padding:0 20px;justify-self:end;align-self:center;gap:0;z-index:2;flex-direction:column;align-items:flex-end}
  .huser{font-size:14px;color:var(--text2);letter-spacing:1px;font-weight:500}
  .hbtn{background:none;border:none;border-top:1px solid var(--border);border-radius:0;padding:5px 0 0;font-size:10px;letter-spacing:2.5px;color:var(--con);width:auto;height:auto;margin-top:5px}
  .hl{grid-column:2;grid-row:2;justify-content:center;padding:0 0 10px;min-width:0;overflow:visible}
  .tgpill{flex:none;margin-right:0}
  .tgscroll{background:none;border:none;color:var(--text3);font-size:11px;letter-spacing:1.5px;padding:0;margin:0}
}

/* ── TABLET: filter tabs → dropdown ── */
@media(max-width:780px){
  .tabs{display:none}
  .filter-sel{display:block;width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;color:var(--text);font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:1px;margin-bottom:14px;outline:none;cursor:pointer}
}

/* ── MOBILE: phone-specific extras ── */
@media(max-width:600px){
  /* Login */
  .lcard{width:min(400px,calc(100vw - 32px));padding:40px 24px}

  /* Main — full width, no sidebar push */
  .main{padding:12px;margin-right:0}

  /* Stats — 4 in one row */
  .stats{gap:6px}
  .sc{flex:0 0 calc(25% - 5px);min-width:0;padding:10px 8px}
  .sn{font-size:22px}
  .sl{font-size:8px;letter-spacing:1px}

  /* Nav — smaller sizes on phone */
  .hlogo img{height:40px}
  .hlogo{padding:8px 10px}
  .htitle{font-size:15px;letter-spacing:2px;padding:8px 0 2px}
  .hright{padding:0 10px;gap:6px}
  .huser{font-size:11px}
  .hbtn{font-size:10px;padding:5px 10px;letter-spacing:1.5px}
  .hl{padding:0 0 8px}

  /* VIEW — full-height fixed drawer, flush with right edge */
  .view-panel{position:fixed;top:0;right:0;bottom:0;width:min(280px,85vw);transform:translateX(110%);border-radius:0;border-right:none;padding-top:44px}
  .view-wrap.open .view-panel{transform:translateX(0)}
  .vpclose{display:flex;position:absolute;top:8px;right:10px;background:none;border:1px solid var(--border2);border-radius:6px;color:var(--text2);width:26px;height:26px;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .2s}

  /* Cards — single column */
  .grid{grid-template-columns:1fr}

  /* Sidebar — stacks below cards */
  .sidebar{position:static;width:100%;max-height:none;border-radius:12px;border-right:1px solid var(--border);margin-top:16px;transform:none}

  /* Detail panel — full screen */
  #panel{width:100%}
}