:root {
  --bg:#09111f; --panel:rgba(14,23,39,.92); --panel-2:rgba(18,30,50,.92); --border:rgba(255,255,255,.09);
  --text:#edf2ff; --muted:#9cb0d0; --primary:#5ea3ff; --success:#38d996; --warning:#ffb84d; --danger:#ff6f7d;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%} body{margin:0;font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at top,#152846,#09111f 55%);color:var(--text)}
a{text-decoration:none;color:inherit} img{max-width:100%;height:auto}
svg{display:block}
a,button,.btn,.icon-btn,.nav a,input[type="checkbox"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible,button:focus-visible,.btn:focus-visible,.icon-btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:280px;padding:26px;background:rgba(7,13,24,.92);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;justify-content:space-between;position:sticky;top:0;height:100vh;z-index:30}
.sidebar-head{display:flex;justify-content:space-between;gap:12px}.brand{font-size:1.2rem;font-weight:800;line-height:1.3;margin-bottom:8px}.brand-mobile{font-size:1rem;margin-bottom:2px}.sidebar-foot{padding-top:16px}
.nav{display:grid;gap:6px;margin-top:28px}
.nav a{padding:9px 12px;border-radius:14px;color:var(--muted);border:1px solid transparent;display:flex;align-items:center;gap:12px;font-weight:600;font-size:.94rem}
.nav a:hover,.nav a.active{background:rgba(94,163,255,.12);color:var(--text);border-color:rgba(94,163,255,.18)}
.nav-icon-wrap{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.nav a:hover .nav-icon-wrap,.nav a.active .nav-icon-wrap{background:rgba(94,163,255,.2)}
.nav-icon{width:18px;height:18px;flex:0 0 auto;display:block}
[dir="rtl"] .nav-icon-flip{transform:scaleX(-1)}
.content{flex:1;padding:28px;width:100%}.container{max-width:1240px;margin:0 auto}.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--border);border-radius:24px;padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(8px);min-width:0} .title{font-size:clamp(1.45rem,2vw,1.9rem);font-weight:800;margin:0}.muted{color:var(--muted)}.small{font-size:.92rem}.section-title{margin:0 0 6px;font-size:1.08rem}
.hero{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px;flex-wrap:wrap}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.stat h3{margin:0 0 8px;font-size:.95rem;color:var(--muted)}.stat p{margin:0;font-size:1.9rem;font-weight:800}
form{display:grid;gap:16px} label{display:grid;gap:8px;font-weight:600}
input,select,textarea,button{width:100%;border-radius:14px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:12px 14px;font:inherit;font-size:16px}
textarea{min-height:100px;resize:vertical} input::placeholder,textarea::placeholder{color:#8ba2c8}
button,.btn{width:auto;min-height:46px;background:linear-gradient(135deg,#5ea3ff,#7a74ff);cursor:pointer;border:none;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:14px}
.btn svg,.btn-secondary svg,.btn-danger svg{width:16px;height:16px;flex:0 0 auto}
.btn-secondary{background:rgba(255,255,255,.06);border:1px solid var(--border)} .btn-danger{background:linear-gradient(135deg,#ff6f7d,#db4455)} .btn-sm{min-height:36px;padding:8px 12px;font-size:.85rem}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.row>*{max-width:100%}
.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch;border-radius:18px;max-width:100%;min-width:0} table{width:100%;min-width:560px;border-collapse:collapse} th,td{padding:12px;text-align:start;vertical-align:top;border-bottom:1px solid var(--border)} th{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em} td{font-size:.92rem}
.badge{border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:800;display:inline-flex;align-items:center;gap:5px}.badge-approved{background:rgba(56,217,150,.14);color:var(--success)}.badge-pending{background:rgba(255,184,77,.14);color:var(--warning)}.badge-rejected{background:rgba(255,111,125,.14);color:var(--danger)}
.badge-approved::before{content:"\2713"}.badge-rejected::before{content:"\2715"}.badge-pending::before{content:"\25CF";font-size:.7em}
.alert{padding:14px 16px;border-radius:14px;margin-bottom:18px;display:flex;align-items:flex-start;gap:10px}.alert::before{flex:0 0 auto;font-weight:800}.alert-success{background:rgba(56,217,150,.12);color:#a8ffd6;border:1px solid rgba(56,217,150,.18)}.alert-success::before{content:"\2713"}.alert-error{background:rgba(255,111,125,.12);color:#ffd1d6;border:1px solid rgba(255,111,125,.18)}.alert-error::before{content:"\26A0"}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-grid{width:min(1000px,100%);display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.mobile-topbar{display:none;position:sticky;top:0;z-index:35;padding:12px 16px;padding-top:max(12px, env(safe-area-inset-top));border-bottom:1px solid var(--border);background:rgba(7,13,24,.94);backdrop-filter:blur(12px);align-items:center;gap:12px}
.icon-btn{width:42px;height:42px;min-height:42px;border-radius:12px;padding:0;flex:0 0 auto;background:rgba(255,255,255,.06);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.icon-btn svg{width:20px;height:20px;flex:0 0 auto}
.sidebar-close{display:none}
.mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(5,10,18,.65);z-index:25}
.thumb{width:56px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(5,10,18,.7);z-index:50;align-items:center;justify-content:center;padding:20px}
.modal-backdrop.open{display:flex}
.modal{width:min(640px,100%);max-height:90vh;overflow:auto;background:#0e1727;border:1px solid var(--border);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.pill{display:inline-flex;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--border);font-size:.78rem;color:var(--muted)}

@media (max-width:1180px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){
  .mobile-topbar{display:flex}
  .sidebar{position:fixed;top:0;bottom:0;inset-inline-start:0;height:100vh;width:min(310px,85vw);transform:translateX(-100%);transition:transform .24s ease;box-shadow:0 18px 40px rgba(0,0,0,.45);padding-top:max(26px, env(safe-area-inset-top));padding-bottom:max(26px, env(safe-area-inset-bottom))}
  [dir="rtl"] .sidebar{transform:translateX(100%)}
  body.menu-open .sidebar{transform:translateX(0)}
  body.menu-open .mobile-backdrop{display:block}
  .sidebar-close{display:flex}
  .nav a{padding:12px 12px;font-size:1rem}
  .nav-icon-wrap{width:36px;height:36px}
  .nav-icon{width:20px;height:20px}
  .content{padding:18px}
  .auth-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}
@media (max-width:720px){.auth-shell,.content{padding:14px}.card{padding:16px;border-radius:18px}.hero{flex-direction:column;align-items:stretch}.hero .btn{width:100%}.stats{grid-template-columns:1fr}.title{font-size:1.3rem}.row{align-items:stretch}.row .btn,.row button,.row input,.row select{width:100%}button,.btn{min-height:44px}
  .table-wrap{overflow:visible}
  .table-wrap table{min-width:0;width:100%}
  .table-wrap thead{display:none}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
  .table-wrap tbody tr{margin-bottom:12px;border:1px solid var(--border);border-radius:14px;padding:6px 12px;background:rgba(255,255,255,.03)}
  .table-wrap tbody tr:last-child{margin-bottom:0}
  .table-wrap tbody td{border-bottom:1px dashed rgba(255,255,255,.08);padding:9px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .table-wrap tbody td:last-child{border-bottom:0}
  .table-wrap tbody td::before{content:attr(data-label);flex:0 0 auto;max-width:42%;font-weight:700;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}
  .table-wrap tbody td:empty::before{content:none}
  .table-wrap tbody td .row{justify-content:flex-end;flex:1}
  .modal-backdrop{align-items:flex-end;padding:0}
  .modal{width:100%;max-height:88vh;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));position:relative;animation:sheetUp .22s ease}
  .modal::before{content:"";display:block;width:40px;height:4px;background:rgba(255,255,255,.2);border-radius:999px;margin:0 auto 14px}
}
@keyframes sheetUp{from{transform:translateY(24px);opacity:.5}to{transform:translateY(0);opacity:1}}
@media (max-width:400px){.stat p{font-size:1.6rem}.title{font-size:1.15rem}}
@media (prefers-reduced-motion:reduce){.sidebar,.modal{animation:none!important;transition:none!important}}