/* FORCE BG POSITION (cache-bust + override) */
html, body {
  min-height: 100%;
}
body.auth-bg, body.login-bg, body {
  background-image: url("../img/bg.png") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center -450px !important;
}
/* if a wrapper was painting over the background */
.auth-overlay, .page-overlay, .bg-overlay {
  background: transparent !important;
}


/* ===== PAGE BACKGROUND ===== */
html, body { height: 100%; }
body{
  margin:0;
  font-family:Inter,system-ui,Arial;
  color:#e5e7eb;
  background: #0b0f1a url('/bg.png') no-repeat center -450px fixed;
  background-size: cover;
}

*{box-sizing:border-box}
a{text-decoration:none;color:inherit}
.app{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{
 width:280px;
 background:#0f1629;
 padding:14px;
}
.logo{
 display:flex;
 align-items:center;
 gap:10px;
 font-weight:900;
 font-size:22px;
 margin-bottom:12px;
}
.user-box{
 background:#111827;
 border-radius:16px;
 padding:14px;
 margin-bottom:12px;
}
.user-box .name{font-weight:700}
.user-box .role{font-size:13px;color:#94a3b8}
.user-box .balance{margin-top:2px;font-size:13px;color:#22c55e}

.nav-section{
 margin-top:8px;
 font-size:11px;
 letter-spacing:.5px;
 color:#94a3b8;
}
.nav a{
 display:flex;
 align-items:center;
 gap:10px;
 padding:8px 10px;
 border-radius:10px;
 margin-top:2px;
 color:#c7d2fe;
}
.nav a:hover{background:#1e293b}
.nav a.active{background:#1f2937;color:#fff}

.submenu{margin-left:10px;margin-top:6px}
.submenu a{font-size:14px}

.badge{
 background:#2563eb;
 color:white;
 font-size:11px;
 padding:2px 8px;
 border-radius:999px;
 margin-left:auto;
}

/* Profile + 2FA */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1100px){.grid2{grid-template-columns:1fr}}
.kv{margin-top:10px;display:grid;gap:8px}
.kv .k{display:inline-block;min-width:90px;color:var(--muted)}
.kv .v{font-weight:600}
.pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pill.ok{background:rgba(16,185,129,.15);color:#10b981;border:1px solid rgba(16,185,129,.35)}
.pill.warn{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.35)}
.twofa-box{margin-top:12px;padding:14px;border-radius:14px;background:rgba(2,6,23,.35);border:1px solid rgba(255,255,255,.06)}
.secret{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;letter-spacing:1px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);padding:10px;border-radius:12px}
.qrWrap{width:160px;height:160px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;overflow:hidden}
.qrWrap img{width:160px;height:160px}

.toggle{
 margin-left:auto;
 opacity:.6;
}

/* MAIN */
.main{flex:1;padding:26px}
.card{
 background:#111827;
 border-radius:18px;
 padding:14px;
 box-shadow:0 20px 40px rgba(0,0,0,.35);
}

/* STAIRCASE SUBMENU ANIMATION */
.submenu{
  margin-left:0;
  overflow:hidden;
  max-height:0;
  transition:max-height .35s ease;
}
.submenu.open{
  max-height:500px;
}
.submenu a{
  display:block;
  padding-left:26px;
  transform:translateX(-14px);
  opacity:0;
  transition:all .35s ease;
}
.submenu.open a{
  transform:translateX(0);
  opacity:1;
}
.submenu.open a:nth-child(1){transition-delay:.05s}
.submenu.open a:nth-child(2){transition-delay:.1s}
.submenu.open a:nth-child(3){transition-delay:.15s}
.submenu.open a:nth-child(4){transition-delay:.2s}
.submenu.open a:nth-child(5){transition-delay:.25s}
.submenu.open a:nth-child(6){transition-delay:.3s}

/* MARKET PRICING */
.pricing{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:18px;
}
.price-card{
 background:#111827;
 border-radius:18px;
 padding:18px;
 box-shadow:0 20px 40px rgba(0,0,0,.35);
 position:relative;
}
.tag{
 position:absolute;top:14px;left:14px;
 font-size:11px;padding:4px 8px;border-radius:999px;
}
.tag.green{background:#10b981}
.tag.blue{background:#3b82f6}
.tag.cyan{background:#06b6d4}
.tag.red{background:#ef4444}
.price-title{font-size:18px;font-weight:800}
.price{font-size:32px;font-weight:900;margin:8px 0}
.desc{color:#94a3b8;font-size:13px;margin-bottom:10px}
.list{margin:10px 0}
.list li{list-style:none;margin:6px 0;color:#c7d2fe}
.btn{
 display:block;text-align:center;margin-top:12px;
 padding:12px;border-radius:14px;background:#1d4ed8;color:#fff;font-weight:800
}
.btn.outline{background:transparent;border:1px solid #1d4ed8}
.small{font-size:12px;color:#94a3b8;margin-top:8px}

/* TOAST */
.toast{
 position:fixed;
 top:20px;
 right:20px;
 background:#ef4444;
 color:#fff;
 padding:14px 18px;
 border-radius:12px;
 box-shadow:0 10px 30px rgba(0,0,0,.4);
 opacity:0;
 transform:translateY(-10px);
 transition:all .3s ease;
 z-index:9999;
}
.toast.show{
 opacity:1;
 transform:translateY(0);
}

/* DEPOSIT DRAWER (LEFT PANEL) */
.drawer-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  z-index:9000;
}
.drawer-backdrop.show{opacity:1; pointer-events:auto;}

.drawer{
  position:fixed;
  top:0;
  left:280px; /* after sidebar */
  height:100vh;
  width:min(520px, calc(100vw - 280px));
  background:rgba(17,24,39,.98);
  border-right:1px solid #1f2937;
  transform:translateX(-105%);
  transition:transform .28s ease;
  z-index:9100;
  padding:18px;
  overflow:auto;
}
.drawer.show{transform:translateX(0);}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.drawer-title{font-size:18px;font-weight:900}
.iconbtn{
  width:40px;height:40px;border-radius:12px;
  background:#020617;border:1px solid #1f2937;
  color:#e5e7eb; cursor:pointer;
}
.coin-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.coin-card{
  display:flex;gap:12px;align-items:center;
  background:#0b1220;
  border:1px solid #1f2937;
  border-radius:16px;
  padding:12px;
  cursor:pointer;
  transition:transform .1s ease, border-color .15s ease;
}
.coin-card:hover{transform:translateY(-1px);border-color:#334155;}
.coin-card.selected{border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.25) inset;}
.coin-logo{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  background:linear-gradient(135deg,#1d4ed8,#06b6d4);
}
.coin-meta{flex:1}
.coin-sym{font-weight:900}
.coin-name{font-size:12px;color:#94a3b8;margin-top:2px}
.coin-amt{font-size:12px;color:#c7d2fe;margin-top:6px}
.drawer-actions{display:flex;gap:12px;margin-top:14px}
.btn.gray{background:#334155}
.notice{color:#94a3b8;font-size:12px;margin-top:8px}

/* DEPOSIT RIGHT PANEL */
.deposit-wrap{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 980px){
  .deposit-wrap{ grid-template-columns: 1fr; }
}
.right-panel{
  background:rgba(17,24,39,.92);
  border:1px solid #1f2937;
  border-radius:18px;
  padding:16px;
  min-height: 520px;
}
.right-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:12px;
}
.right-title{font-size:18px;font-weight:900}
.right-sub{color:#94a3b8;font-size:12px;margin-top:4px}
.coin-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
@media (max-width: 980px){
  .coin-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 520px){
  .coin-grid{ grid-template-columns:1fr; }
}
.coin-card{
  display:flex;gap:12px;align-items:center;
  background:#0b1220;
  border:1px solid #1f2937;
  border-radius:16px;
  padding:12px;
  cursor:pointer;
  transition:transform .1s ease, border-color .15s ease;
}
.coin-card:hover{transform:translateY(-1px);border-color:#334155;}
.coin-card.selected{border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.25) inset;}
.coin-logo{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  background:linear-gradient(135deg,#1d4ed8,#06b6d4);
}
.coin-meta{flex:1}
.coin-sym{font-weight:900}
.coin-name{font-size:12px;color:#94a3b8;margin-top:2px}
.coin-amt{font-size:12px;color:#c7d2fe;margin-top:6px}
.panel-actions{display:flex;gap:12px;margin-top:14px}
.panel-actions button{flex:1}
.notice{color:#94a3b8;font-size:12px;margin-top:8px}


/* ===== THEME UPGRADE ===== */
:root{
  --bg0:#020617;
  --bg1:#0b1220;
  --bg2:#111827;
  --line:#1f2937;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --blue:#2563eb;
  --cyan:#06b6d4;
  --green:#10b981;
  --red:#ef4444;
  --shadow:0 18px 40px rgba(0,0,0,.45);
}

/* Background + subtle overlay */
body{
  background: radial-gradient(1200px 800px at 20% 10%, rgba(37,99,235,.25), transparent 60%),
              radial-gradient(900px 700px at 90% 30%, rgba(6,182,212,.18), transparent 60%),
              linear-gradient(180deg, rgba(2,6,23,1), rgba(2,6,23,.96));
  color:var(--text);
}

/* Card polish */
.card{
  background: rgba(17,24,39,.92);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* Headings */
.card h2, .card h3{letter-spacing:.2px}
.card p{color:var(--muted)}

/* Inputs */
input, select{
  width:100%;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(2,6,23,.85);
  color: var(--text);
  outline:none;
}
input:focus, select:focus{
  border-color: rgba(37,99,235,.7);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

/* Buttons */
button, .btn{
  border:none;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  cursor:pointer;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
button:hover, .btn:hover{filter:brightness(1.06)}
button:active, .btn:active{transform:translateY(1px)}

button{background: linear-gradient(135deg, var(--blue), var(--cyan)); color:#fff}
.btn.gray{background:#334155}
.btn.outline{background:transparent;border:1px solid rgba(37,99,235,.55)}

/* Tables */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.table thead th{
  color: var(--muted);
  font-weight:800;
  text-align:left;
  padding:0 10px 8px 10px;
  font-size:12px;
}
.table tbody tr{
  background: rgba(11,18,32,.8);
  border:1px solid var(--line);
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}
.table tbody td{
  padding:12px 10px;
  border-top:1px solid rgba(0,0,0,0);
}
.table tbody tr td:first-child{border-radius:14px 0 0 14px}
.table tbody tr td:last-child{border-radius:0 14px 14px 0}

/* Status pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--line);
  background: rgba(2,6,23,.65);
}
.pill.pending{border-color:rgba(245,158,11,.35)}
.pill.approved{border-color:rgba(16,185,129,.35)}
.pill.rejected{border-color:rgba(239,68,68,.35)}

/* Right panel header */
.right-panel{
  background: rgba(17,24,39,.92);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}
.right-head{
  padding-bottom:10px;
  border-bottom:1px solid rgba(31,41,55,.7);
}

/* Coin card glow */
.coin-card.selected{
  border-color: rgba(37,99,235,.85);
  box-shadow: 0 0 0 2px rgba(37,99,235,.22) inset, 0 12px 26px rgba(37,99,235,.12);
}

/* Toast nicer */
.toast{
  background: var(--red);
  border:1px solid rgba(255,255,255,.08);
}

/* Sidebar hover polish */
.sidebar .nav a{
  border-radius:12px;
  transition: background .15s ease, transform .08s ease;
}
.sidebar .nav a:hover{
  background: rgba(37,99,235,.10);
}


/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:60}
.modal.show{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(2px);}
.modal-card{
  position:relative;
  width:min(520px, calc(100% - 24px));
  margin: 7vh auto 0 auto;
  padding: 18px;
  border-radius: 18px;
  border:1px solid #1f2937;
  background: rgba(17,24,39,.96);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.modal-title{font-weight:1000;font-size:18px}
.modal-sub{color:#94a3b8;font-size:12px;margin-top:2px}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}


html, body {
    height: 100%;
}
body {
    background-repeat: no-repeat !important;
    background-position: center -450px;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* ===== FORCE SIDEBAR BG ===== */
.sidebar, .left, .leftbar, aside {
    background-image: url('/bg.png') !important;
    background-repeat: no-repeat !important;
    background-position: center -450px;
    background-size: cover !important;
}


/* ===== FULL IMAGE BACKGROUND SINGLE SCALE ===== */
body {
    background-image: url('/bg.png') !important;
    background-repeat: no-repeat !important;
    background-position: center -450px;
    background-size: 100% auto !important;
    background-attachment: fixed !important;
}

.sidebar, .left, .leftbar, aside {
    background: transparent !important;
}


/* ===== MOVE CONTENT UP ===== */
.main-content, .content, .page-content {
    margin-top: -60px !important;
}

@media (max-width: 768px) {
    .main-content, .content, .page-content {
        margin-top: -30px !important;
    }
}


/* ===== MOVE CONTENT FURTHER UP ===== */
.main-content, .content, .page-content {
    margin-top: -140px !important;
}

@media (max-width: 768px) {
    .main-content, .content, .page-content {
        margin-top: -80px !important;
    }
}


/* ===== MOVE BACKGROUND IMAGE UP ===== */
body {
    background-position: center -450px;
}


/* ===== MOVE BACKGROUND IMAGE FURTHER UP ===== */
body {
    background-position: center -450px;
}



/* ===== HOME DASHBOARD UI ===== */
.dash-top{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
}
.stat-card{
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.stat-label{ font-size:12px; opacity:.75; margin-bottom:8px; }
.stat-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stat-value{ font-size:26px; font-weight:800; letter-spacing:.2px; }
.stat-pill{
  font-size:12px;
  padding:6px 10px;
  border-radius: 10px;
  background: rgba(37, 99, 235, .15);
  border: 1px solid rgba(37, 99, 235, .35);
  color: #93c5fd;
  white-space:nowrap;
}
.stat-pill.blue{ background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.32); }
.stat-sub{ margin-top:10px; font-size:12px; opacity:.8; }
.card-title{ font-size:14px; font-weight:700; }
.card-sub{ font-size:12px; opacity:.7; margin-top:2px; }

.ref-row{
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin-top:14px;
}
.ref-left{ flex:1; }
.ref-label{ font-size:12px; opacity:.75; margin-bottom:6px; }
.ref-input{
  width:100%;
  padding:12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #e5e7eb;
  outline:none;
}
.ref-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
}
.ref-box{
  padding: 18px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  text-align:center;
}
.ref-big{ font-size:26px; font-weight:800; }
.ref-big.green{ color:#34d399; }
.ref-big.orange{ color:#f59e0b; }
.ref-small{ font-size:12px; opacity:.85; margin-top:4px; }
.ref-mini{ font-size:11px; opacity:.65; margin-top:8px; }

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  line-height:1.2;
}
.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color:#cbd5e1;
}
.chip-blue{ color:#93c5fd; border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.12); }
.chip-red{ color:#fca5a5; border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); }

.toggle-row{ display:flex; align-items:center; gap:10px; }
.toggle-text{ font-size:12px; }
.muted{ opacity:.6; }

/* simple switch */
.switch{ position:relative; display:inline-block; width:44px; height:24px; }
.switch input{ display:none; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  transition:.2s; border-radius:999px;
}
.slider:before{
  position:absolute; content:"";
  height:18px; width:18px; left:3px; top:2px;
  background: rgba(255,255,255,.85);
  transition:.2s; border-radius:999px;
}
.switch input:checked + .slider{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35); }
.switch input:checked + .slider:before{ transform: translateX(20px); background: rgba(34,197,94,.9); }

@media (max-width: 1100px){
  .dash-top{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ref-stats{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .dash-top{ grid-template-columns: 1fr; }
  .ref-row{ flex-direction:column; align-items:stretch; }
}


/* ===== FINAL BACKGROUND FIX ===== */
html, body {
    height: 100%;
}

body {
    background-image: url('/bg.png') !important;
    background-repeat: no-repeat !important;
    background-size: 100% auto !important;
    background-position: center -450px;
    background-attachment: fixed !important;
}

/* readability */
.main-content, .card {
    background: rgba(15, 23, 42, 0.85) !important;
}


/* Chat (PRE+) */
.chatbox{margin-top:12px;border-radius:14px;background:rgba(8,12,20,.55);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.chat-messages{height:360px;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:75%;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(17,24,39,.65)}
.chat-msg .who{display:block;font-size:12px;color:rgba(255,255,255,.65);margin-bottom:4px}
.chat-msg.me{align-self:flex-end;background:rgba(37,99,235,.18);border-color:rgba(37,99,235,.25)}
.chat-input{display:flex;gap:10px;padding:12px;border-top:1px solid rgba(255,255,255,.06);background:rgba(10,14,22,.55)}
.chat-input input{flex:1;padding:12px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(17,24,39,.65);color:#fff}

.chat-msg.other{align-self:flex-start}


/* ===== Auth (Login/Register) ===== */
.auth-bg{
  background: radial-gradient(1200px 600px at 15% 10%, rgba(59,130,246,.22), transparent 60%),
              radial-gradient(900px 500px at 85% 20%, rgba(16,185,129,.18), transparent 55%),
              url('/bg.png') no-repeat center -450px fixed;
  background-size: 100% auto;
  min-height:100vh;
}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{
  width:min(460px, 92vw);
  background: rgba(10,14,22,.72);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  padding: 18px 18px 16px;
  backdrop-filter: blur(6px);
}
.auth-brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.auth-logo{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(59,130,246,.18);
  border:1px solid rgba(59,130,246,.30);
  color:#93c5fd;font-weight:900;letter-spacing:.5px;
}
.auth-title{font-size:16px;font-weight:800}
.auth-sub{font-size:12px;opacity:.7;margin-top:2px}
.auth-form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.auth-form label{font-size:12px;opacity:.75;margin-top:6px}
.auth-form input{
  padding:12px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:#e5e7eb; outline:none;
}
.auth-form input:focus{border-color: rgba(59,130,246,.45); box-shadow:none}
.w100{width:100%}
.auth-foot{margin-top:12px;font-size:12px;opacity:.8}
.auth-foot a{color:#93c5fd;text-decoration:none}
.auth-foot a:hover{text-decoration:underline}

/* ===== Admin tiles ===== */
.admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.admin-tile{
  display:block;padding:16px;border-radius:16px;text-decoration:none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color:#e5e7eb;
}
.admin-tile:hover{border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.08)}
.t-title{font-weight:800}
.t-sub{margin-top:6px;font-size:12px;opacity:.75}
@media (max-width: 900px){ .admin-grid{grid-template-columns:1fr} }


/* --- Compact icon-only sidebar --- */
.sidebar.compact{
  width: 72px;
  padding: 18px 10px;
}
.sidebar.compact .brand,
.sidebar.compact .userbox,
.sidebar.compact .nav-section{
  display:none;
}
.sidebar.compact a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding: 12px 10px;
  border-radius: 14px;
}
.sidebar.compact a .label{
  display:none;
}
.sidebar.compact a .ico{
  font-size: 18px;
  line-height: 1;
}
/* make content align with compact sidebar */
.app{
  grid-template-columns: 72px 1fr;
}


/* --- Compact sidebar with icons + text (like your screenshot) --- */
.sidebar.compactText{
  width: 240px;
  padding: 18px 14px;
}
.sidebar.compactText .brand{
  display:block;
}
.sidebar.compactText .userbox{
  display:block;
}
.sidebar.compactText .nav-section{
  display:block;
  margin-top: 14px;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
}
.sidebar.compactText a{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
}
.sidebar.compactText a .label{
  display:inline;
  font-size: 14px;
  opacity: .9;
}
.sidebar.compactText a .ico{
  display:inline-flex;
  width: 28px;
  height: 28px;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
}
/* content align with sidebar width */
.app{
  grid-template-columns: 240px 1fr;
}


/* PRO CHAT */
.chat-pro{display:flex;gap:14px;min-height:65vh}
.chat-pro .left{width:280px;flex:0 0 280px}
.chat-pro .right{flex:1;display:flex;flex-direction:column}
.chat-pro .room{display:flex;flex-direction:column;height:65vh;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.chat-pro .room-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:rgba(0,0,0,.35);backdrop-filter: blur(10px)}
.chat-pro .room-title{font-weight:900}
.chat-pro .room-sub{font-size:12px;opacity:.7}
.chat-pro .msgs{flex:1;overflow:auto;padding:14px;background:rgba(0,0,0,.18)}
.chat-pro .composer{display:flex;gap:10px;padding:12px;background:rgba(0,0,0,.35);backdrop-filter: blur(10px)}
.chat-pro .composer input{flex:1}
.chat-bubble{max-width:78%;padding:10px 12px;border-radius:14px;line-height:1.35;white-space:pre-wrap}
.chat-row{display:flex;gap:10px;margin-bottom:10px}
.chat-row.me{justify-content:flex-end}
.chat-row.me .chat-bubble{background:rgba(59,130,246,.32);border:1px solid rgba(59,130,246,.35)}
.chat-row.other .chat-bubble{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.chat-meta{font-size:11px;opacity:.75;margin-top:6px;display:flex;gap:10px}
.chat-pro .left .card{padding:0;overflow:hidden}
.chat-pro .left .uhead{padding:12px 14px;background:rgba(0,0,0,.35);font-weight:900}
.chat-pro .left .ulist{max-height:65vh;overflow:auto;padding:8px}
.chat-pro .left .u{display:flex;gap:10px;padding:10px 10px;border-radius:12px;cursor:pointer}
.chat-pro .left .u:hover{background:rgba(255,255,255,.06)}
.chat-pro .left .dot{width:10px;height:10px;border-radius:999px;margin-top:6px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.chat-pro .typing{font-size:12px;opacity:.7;padding:8px 14px;display:none}
@media(max-width:980px){
  .chat-pro{flex-direction:column}
  .chat-pro .left{width:100%;flex:0 0 auto}
  .chat-pro .room{height:60vh}
}