/* assets/css/app.css — NexDrive shared styles — Light / Dark theme */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── DARK (default) ─── */
:root {
  --bg:         #0a0e1a;
  --bg2:        #0f1424;
  --surface:    rgba(255,255,255,0.04);
  --surface2:   rgba(255,255,255,0.08);
  --surface3:   rgba(255,255,255,0.13);
  --border:     rgba(255,255,255,0.08);
  --bhi:        rgba(255,255,255,0.15);
  --sb-bg:      rgba(10,14,26,0.94);
  --dd-bg:      #0d1020;
  --modal-bg:   #0f1424;
  --card-bg:    rgba(255,255,255,0.04);
  --input-bg:   rgba(255,255,255,0.05);
  --scroll:     rgba(255,255,255,0.10);
  --canvas-op:  1;
  --text:       #e8eaf6;
  --muted:      rgba(200,205,230,0.46);
  --blue:  #4361ee; --sky: #00b4d8; --teal: #06d6a0; --amber: #ffb703; --rose: #ef476f;
  --font: 'Plus Jakarta Sans',sans-serif;
  --mono: 'JetBrains Mono',monospace;
  --r: 16px; --rs: 10px;
}

/* ─── LIGHT ─── */
html.light {
  --bg:         #f0f2f8;
  --bg2:        #ffffff;
  --surface:    #ffffff;
  --surface2:   #f4f5fb;
  --surface3:   #eceef6;
  --border:     rgba(67,97,238,0.12);
  --bhi:        rgba(67,97,238,0.24);
  --sb-bg:      #ffffff;
  --dd-bg:      #ffffff;
  --modal-bg:   #ffffff;
  --card-bg:    #ffffff;
  --input-bg:   #f4f5fb;
  --scroll:     rgba(67,97,238,0.14);
  --canvas-op:  0;
  --text:       #1a1d2e;
  --muted:      rgba(60,70,110,0.50);
}

/* ─── BASE ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow-x:hidden;transition:background .3s,color .3s;}
body::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--canvas-op);transition:opacity .3s;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");}
a{color:inherit;text-decoration:none;}button{cursor:pointer;}
::-webkit-scrollbar{width:5px;height:5px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px;}

/* ─── Animations ─── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
.fade-up{animation:fadeUp .4s ease both;}.fade-in{animation:fadeIn .3s ease both;}
.d1{animation-delay:.07s}.d2{animation-delay:.14s}.d3{animation-delay:.21s}.d4{animation-delay:.28s}

/* ─── Theme toggle ─── */
.theme-toggle{
  width:36px;height:36px;border-radius:50%;
  background:var(--surface2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:17px;transition:all .2s;flex-shrink:0;
  user-select:none;
}
.theme-toggle:hover{background:var(--surface3);border-color:var(--bhi);transform:rotate(18deg);}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 20px;border:none;border-radius:var(--rs);font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap;}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;box-shadow:0 6px 20px rgba(67,97,238,.28);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(67,97,238,.42);}
.btn-success{background:linear-gradient(135deg,#059669,var(--teal));color:#fff;}
.btn-success:hover{transform:translateY(-1px);}
.btn-danger{background:rgba(239,71,111,.1);border:1px solid rgba(239,71,111,.28);color:var(--rose);}
.btn-danger:hover{background:rgba(239,71,111,.2);}
.btn-ghost{background:var(--surface2);border:1px solid var(--border);color:var(--muted);}
.btn-ghost:hover{background:var(--surface3);color:var(--text);border-color:var(--bhi);}
.btn-sm{padding:7px 14px;font-size:12px;}.btn-lg{padding:14px 28px;font-size:15px;}.btn-full{width:100%;}

/* ─── Forms ─── */
.f-group{margin-bottom:14px;position:relative;}
.f-label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.i-wrap{position:relative;display:flex;align-items:center;}
.i-icon{position:absolute;left:13px;font-size:15px;pointer-events:none;opacity:.45;}
.f-input{width:100%;padding:12px 13px 12px 40px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-family:var(--font);font-size:14px;outline:none;transition:all .2s;}
.f-input:focus{border-color:var(--blue);background:rgba(67,97,238,.05);box-shadow:0 0 0 3px rgba(67,97,238,.12);}
.f-input::placeholder{color:var(--muted);opacity:.65;}
.f-input.no-icon{padding-left:13px;}
.f-input.valid{border-color:rgba(6,214,160,.5);}
.f-input.invalid{border-color:rgba(239,71,111,.4);}
.f-err{font-size:11px;color:var(--rose);margin-top:4px;display:none;}.f-err.show{display:block;}
.f-hint{font-size:11px;color:var(--muted);margin-top:4px;}
.toggle-pw{position:absolute;right:12px;background:none;border:none;color:var(--muted);font-size:15px;transition:color .2s;}
.toggle-pw:hover{color:var(--text);}
.f-select{width:100%;padding:12px 13px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-family:var(--font);font-size:14px;outline:none;transition:all .2s;appearance:none;cursor:pointer;}
.f-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(67,97,238,.12);}
.f-select option{background:var(--bg2);color:var(--text);}

/* ─── Alerts ─── */
.alert{padding:12px 15px;border-radius:var(--rs);font-size:13px;margin-bottom:15px;display:flex;align-items:flex-start;gap:9px;animation:fadeUp .3s ease;line-height:1.5;}
.alert.ok  {background:rgba(6,214,160,.07); border:1px solid rgba(6,214,160,.22); color:var(--teal);}
.alert.err {background:rgba(239,71,111,.07);border:1px solid rgba(239,71,111,.22);color:var(--rose);}
.alert.info{background:rgba(67,97,238,.07); border:1px solid rgba(67,97,238,.22); color:var(--blue);}
.alert.warn{background:rgba(255,183,3,.07); border:1px solid rgba(255,183,3,.22); color:#b07d00;}
html:not(.light) .alert.warn{color:var(--amber);}
html:not(.light) .alert.info{color:#7b9cff;}

/* ─── Badges ─── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.04em;white-space:nowrap;}
.badge-blue    {background:rgba(67,97,238,.12); color:var(--blue);}
.badge-teal    {background:rgba(6,214,160,.12); color:#059669;}
.badge-rose    {background:rgba(239,71,111,.12);color:var(--rose);}
.badge-amber   {background:rgba(255,183,3,.12); color:#b07d00;}
.badge-muted   {background:var(--surface2);     color:var(--muted);}
.badge-image   {background:rgba(0,180,216,.12); color:#007fa3;}
.badge-video   {background:rgba(67,97,238,.12); color:var(--blue);}
.badge-document{background:rgba(6,214,160,.12); color:#059669;}
.badge-other   {background:rgba(255,183,3,.12); color:#b07d00;}
html:not(.light) .badge-blue    {color:#7b9cff;}
html:not(.light) .badge-teal    {color:var(--teal);}
html:not(.light) .badge-amber   {color:var(--amber);}
html:not(.light) .badge-image   {color:var(--sky);}
html:not(.light) .badge-video   {color:#7b9cff;}
html:not(.light) .badge-document{color:var(--teal);}
html:not(.light) .badge-other   {color:var(--amber);}

/* ─── Modals ─── */
.modal-wrap{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px;}
.modal-wrap.open{display:flex;}
.modal{background:var(--modal-bg);border:1px solid var(--border);border-radius:20px;padding:30px;width:100%;max-width:420px;animation:fadeUp .25s ease;box-shadow:0 24px 60px rgba(0,0,0,.3);}
html.light .modal{box-shadow:0 12px 40px rgba(67,97,238,.1);}
.modal-lg{max-width:580px;}
.modal h3{font-size:17px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:9px;}
.modal-actions{display:flex;gap:10px;margin-top:18px;}
.flash-bar{padding:12px 16px;border-radius:var(--rs);font-size:13px;margin-bottom:18px;display:flex;align-items:center;gap:10px;animation:fadeUp .3s ease;}
.flash-bar.ok {background:rgba(6,214,160,.08); border:1px solid rgba(6,214,160,.22); color:#059669;}
.flash-bar.err{background:rgba(239,71,111,.08);border:1px solid rgba(239,71,111,.22);color:var(--rose);}
html:not(.light) .flash-bar.ok{color:var(--teal);}

/* ─── Canvas & app shell ─── */
#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none !important;user-select:none;opacity:var(--canvas-op);transition:opacity .3s;}
.app{position:relative;z-index:2;display:flex;min-height:100vh;isolation:isolate;}

/* ─── Sidebar ─── */
.sidebar{width:248px;flex-shrink:0;background:var(--sb-bg);border-right:1px solid var(--border);backdrop-filter:blur(24px);display:flex;flex-direction:column;padding:22px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;transition:background .3s,border-color .3s;}
html.light .sidebar{box-shadow:2px 0 14px rgba(67,97,238,.06);}
.s-brand{display:flex;align-items:center;gap:10px;padding:0 8px;margin-bottom:28px;text-decoration:none;}
.s-brand-ic{width:36px;height:36px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,var(--blue),var(--sky));display:flex;align-items:center;justify-content:center;font-size:18px;}
.s-brand-nm{font-size:19px;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--blue),var(--sky));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.s-company{margin:0 8px 20px;padding:10px 12px;background:rgba(67,97,238,.08);border:1px solid rgba(67,97,238,.16);border-radius:10px;}
.s-company-name{font-size:12px;font-weight:600;color:var(--text);}
.s-company-domain{font-size:11px;color:var(--muted);margin-top:2px;}
.nav-sec{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 10px;margin:16px 0 6px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--rs);color:var(--muted);font-size:13px;font-weight:500;text-decoration:none;transition:all .18s;position:relative;cursor:pointer;}
.nav-item:hover{background:var(--surface2);color:var(--text);}
.nav-item.on{color:var(--blue);background:rgba(67,97,238,.1);border:1px solid rgba(67,97,238,.18);}
html:not(.light) .nav-item.on{background:linear-gradient(135deg,rgba(67,97,238,.2),rgba(0,180,216,.1));color:var(--text);border-color:rgba(67,97,238,.25);}
.nav-item.on::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:2px;background:linear-gradient(var(--blue),var(--sky));}
.nav-ic{font-size:15px;width:20px;text-align:center;}
.nav-badge{margin-left:auto;background:var(--rose);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:99px;}
.s-storage{margin-top:auto;padding:13px;background:var(--surface2);border:1px solid var(--border);border-radius:14px;}
.s-sto-row{display:flex;justify-content:space-between;font-size:11px;margin-bottom:7px;}
.s-sto-lbl{color:var(--muted);}.s-sto-val{font-weight:600;font-size:11px;}
.s-bar{height:4px;background:var(--surface3);border-radius:99px;overflow:hidden;margin-bottom:10px;}
.s-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--sky));transition:width 1s ease;}
.s-fill.warn{background:linear-gradient(90deg,var(--amber),var(--rose));}

/* ─── Main / Topbar ─── */
.main{flex:1;min-width:0;padding:28px 32px;overflow-y:auto;position:relative;z-index:3;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;position:relative;z-index:10000;}
.tb-title h1{font-size:20px;font-weight:700;letter-spacing:-.02em;}
.tb-title p{color:var(--muted);font-size:12px;margin-top:2px;}
.tb-right{display:flex;align-items:center;gap:10px;position:relative;z-index:10000;}
.search-bar{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:99px;padding:8px 15px;width:200px;transition:all .2s;}
.search-bar:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(67,97,238,.12);width:240px;}
.search-bar input{background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:13px;width:100%;}
.search-bar input::placeholder{color:var(--muted);}

/* ─── Avatar dropdown ─── */
.av-wrap{position:relative;z-index:10000;isolation:isolate;}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--sky));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;cursor:pointer;border:2px solid var(--border);transition:border-color .2s;user-select:none;color:#fff;}
.avatar:hover,.avatar.open{border-color:var(--blue);}
.dd{position:absolute;right:0;top:calc(100% + 10px);width:230px;background:var(--dd-bg);border:1px solid var(--bhi);border-radius:16px;padding:8px;box-shadow:0 24px 60px rgba(0,0,0,.18);z-index:10000;display:none;pointer-events:auto;isolation:isolate;}
html:not(.light) .dd{box-shadow:0 24px 60px rgba(0,0,0,.85);}
.dd.open{display:block;animation:fadeUp .2s ease;}
.dd-head{padding:10px 12px 9px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.dd-name{font-weight:600;font-size:13px;color:var(--text);}
.dd-email{color:var(--muted);font-size:11px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dd-role{display:inline-flex;margin-top:5px;}
.dd-item{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:9px;font-size:13px;font-weight:500;color:var(--text);text-decoration:none;transition:background .15s;cursor:pointer;pointer-events:auto;}
.dd-item:hover{background:var(--surface2);}
.dd-item.danger{color:var(--rose);}.dd-item.danger:hover{background:rgba(239,71,111,.07);}
.dd-ic{font-size:14px;width:18px;text-align:center;pointer-events:none;}
.dd-sep{height:1px;background:var(--border);margin:4px 0;}

/* ─── Stats grid ─── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
.stat-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r);padding:16px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.stat-card.s1::after{background:linear-gradient(90deg,var(--blue),var(--sky));}
.stat-card.s2::after{background:linear-gradient(90deg,var(--rose),#FF8E4D);}
.stat-card.s3::after{background:linear-gradient(90deg,var(--teal),var(--sky));}
.stat-card.s4::after{background:linear-gradient(90deg,var(--amber),var(--rose));}
.stat-card:hover{background:var(--surface2);transform:translateY(-3px);box-shadow:0 10px 32px rgba(67,97,238,.08);}
html:not(.light) .stat-card:hover{box-shadow:0 10px 32px rgba(0,0,0,.3);}
html.light .stat-card{box-shadow:0 2px 8px rgba(67,97,238,.04);}
.stat-ico{font-size:20px;width:38px;height:38px;border-radius:10px;background:var(--surface2);display:flex;align-items:center;justify-content:center;margin-bottom:9px;}
.stat-val{font-size:22px;font-weight:700;line-height:1;margin-bottom:3px;letter-spacing:-.02em;}
.stat-lbl{color:var(--muted);font-size:11px;}

/* ─── Upload zone ─── */
.upload-zone{border:2px dashed rgba(67,97,238,.28);border-radius:var(--r);padding:20px;text-align:center;margin-bottom:22px;cursor:pointer;background:rgba(67,97,238,.03);transition:all .2s;}
.upload-zone:hover,.upload-zone.over{border-color:var(--blue);background:rgba(67,97,238,.07);}
.uz-ico{font-size:26px;margin-bottom:7px;}
.upload-zone h3{font-size:14px;font-weight:600;margin-bottom:3px;}
.upload-zone p{color:var(--muted);font-size:12px;}
.browse-lnk{color:var(--blue);font-weight:600;}
.up-prog{display:none;margin-top:11px;}
.up-bar{height:4px;background:var(--surface3);border-radius:99px;overflow:hidden;}
.up-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--sky));border-radius:99px;transition:width .3s;}
.up-lbl{font-size:11px;color:var(--muted);margin-top:5px;}

/* ─── Sections ─── */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.sec-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px;}
.sec-act{color:var(--blue);font-size:12px;font-weight:500;cursor:pointer;text-decoration:none;transition:opacity .2s;}
.sec-act:hover{opacity:.7;}

/* ─── Folders ─── */
.folders-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px;margin-bottom:26px;}
.folder-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r);padding:14px;cursor:pointer;transition:all .2s;text-decoration:none;display:block;color:var(--text);position:relative;}
html.light .folder-card{box-shadow:0 1px 6px rgba(67,97,238,.05);}
.folder-card:hover{background:var(--surface2);transform:translateY(-2px);border-color:rgba(67,97,238,.28);box-shadow:0 6px 20px rgba(67,97,238,.1);}
.fc-emoji{font-size:24px;margin-bottom:8px;display:block;}
.fc-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;}
.fc-meta{color:var(--muted);font-size:11px;}
.fc-del{position:absolute;top:7px;right:7px;background:none;border:none;font-size:13px;cursor:pointer;opacity:0;transition:opacity .2s;color:var(--muted);}
.folder-card:hover .fc-del{opacity:.7;}
.fc-del:hover{color:var(--rose) !important;opacity:1 !important;}
.add-folder{border-style:dashed !important;border-color:var(--border) !important;display:flex !important;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;color:var(--muted);min-height:90px;}
.add-folder:hover{border-color:var(--blue) !important;color:var(--text) !important;}

/* ─── Files ─── */
.files-list{display:flex;flex-direction:column;gap:6px;}
.file-row{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--rs);padding:11px 14px;display:flex;align-items:center;gap:11px;transition:all .18s;}
html.light .file-row{box-shadow:0 1px 4px rgba(67,97,238,.04);}
.file-row:hover{background:var(--surface2);border-color:rgba(67,97,238,.2);}
.f-thumb{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.f-thumb.image{background:rgba(0,180,216,.1);}.f-thumb.video{background:rgba(67,97,238,.12);}.f-thumb.document{background:rgba(6,214,160,.1);}.f-thumb.other{background:rgba(255,183,3,.1);}
.f-info{flex:1;min-width:0;}
.f-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;}
.f-meta{color:var(--muted);font-size:11px;}
.f-size{color:var(--muted);font-size:11px;font-weight:500;white-space:nowrap;margin-right:5px;}
.f-acts{display:flex;gap:5px;flex-shrink:0;}
.fa-btn{width:28px;height:28px;border-radius:7px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;transition:all .15s;text-decoration:none;color:var(--text);}
.fa-btn:hover{background:rgba(67,97,238,.1);border-color:rgba(67,97,238,.25);}
.fa-btn.del:hover{background:rgba(239,71,111,.1);border-color:rgba(239,71,111,.25);}
.fa-btn.star-on{color:var(--amber);}

/* ─── Misc ─── */
.breadcrumb{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-bottom:16px;}
.breadcrumb a{color:var(--blue);}.bc-sep{opacity:.4;}
.empty{text-align:center;padding:44px 20px;color:var(--muted);}
.empty .e-ico{font-size:44px;margin-bottom:11px;}
.empty h3{font-size:15px;font-weight:600;color:var(--text);margin-bottom:5px;}
.nd-table{width:100%;border-collapse:collapse;}
.nd-table th{background:var(--surface2);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);}
.nd-table td{padding:12px 14px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle;}
.nd-table tr:last-child td{border-bottom:none;}
.nd-table tr:hover td{background:var(--surface2);}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r);padding:20px;}
html.light .card{box-shadow:0 2px 12px rgba(67,97,238,.05);}
.card-title{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.share-url{background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);padding:10px 13px;font-size:12px;font-family:var(--mono);word-break:break-all;margin-bottom:11px;color:var(--blue);}
.emoji-grid{display:flex;flex-wrap:wrap;gap:6px;}
.ep-btn{width:32px;height:32px;border-radius:7px;background:var(--surface2);border:1px solid var(--border);cursor:pointer;font-size:16px;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.ep-btn:hover,.ep-btn.sel{background:rgba(67,97,238,.12);border-color:rgba(67,97,238,.3);}

/* ─── Responsive ─── */
@media(max-width:900px){
  .sidebar{display:none;}.main{padding:16px 14px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .topbar .search-bar{display:none;}
}