/* ====== CSS Vars ====== */
:root{
  --bg:#080a0f; --panel:#0f141e; --panel-2:#0b1018; --txt:#d8e5f2;
  --muted:#9fb3c8; --line:rgba(255,255,255,.08);
  --neon-cyan:#00eaff; --neon-magenta:#ff2bd6; --neon-lime:#b8ff00;
  --danger:#ff4d6d; --ok:#37ff9f; --warn:#ffd166;
  --radius:14px; --gap:14px; --pad:16px;
  --shadow:0 0 24px rgba(0,234,255,.25), inset 0 0 12px rgba(0,234,255,.1);
  --fontA:"Segoe UI","Inter","Roboto",system-ui,-apple-system,sans-serif;
  --fontB:"Orbitron","Eurostile","Arial Black",system-ui,sans-serif;
}

/* ====== Base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt); background:
    radial-gradient(1200px 900px at 20% 10%, #101a2a 0%, var(--bg) 50%, #05060a 100%);
  font-family:var(--fontA); overflow-x:hidden;
}
body::before{ /* scanlines */
  content:""; position:fixed; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:100% 2px; mix-blend-mode:soft-light; opacity:.12;
}
a{color:var(--neon-cyan); text-decoration:none}
.icon{width:18px; height:18px; display:inline-block; fill:currentColor}

/* ===== visibility helper (жёстко скрывает элемент) ===== */
[hidden], .is-hidden { display:none !important; }

/* ====== Login ====== */
.login-screen{min-height:100vh; display:grid; place-items:center; padding:32px 20px; position:relative; z-index:5; background:radial-gradient(120% 120% at 0% 0%, rgba(0,234,255,.22), rgba(12,15,23,1));}
.login-wrapper{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:32px; width:min(960px, 100%); align-items:stretch;}
.login-hero{padding:36px; border-radius:28px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(135deg, rgba(0,234,255,.22), rgba(255,43,214,.14)); box-shadow:0 48px 90px rgba(0,0,0,.55); color:rgba(255,255,255,.85); display:flex; flex-direction:column; gap:18px;}
.login-logo{display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-family:var(--fontB); font-size:1.9rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.2;}
.login-logo h1{margin:0; background:linear-gradient(90deg, #fff, rgba(0,234,255,.8)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; word-break:break-word;}
.login-logo span{color:var(--neon-magenta);}
.login-hero p{margin:0; font-size:1rem; line-height:1.6;}
.login-highlights{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:.95rem; color:rgba(255,255,255,.85);}
.login-highlights kbd{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:6px; border:1px solid rgba(255,255,255,.32); margin-left:4px; font-size:.75rem; background:rgba(255,255,255,.12); color:#fff;}
.login-panel{border-radius:26px; background:rgba(10,14,24,.92); border:1px solid rgba(255,255,255,.1); padding:34px 30px; box-shadow:0 38px 70px rgba(0,0,0,.6); backdrop-filter:blur(18px);}
.login-panel h2{margin:0 0 6px 0; font-size:1.6rem; letter-spacing:.04em;}
.login-sub{margin:.25rem 0 1.2rem; color:var(--muted); font-size:.95rem;}
.field{display:block; margin-bottom:14px}
.field > span{display:block; margin:0 0 6px; color:var(--muted); font-size:.9rem}
.input-wrap{position:relative}
.input-wrap .icon.left{position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.75}
.input-wrap .icon + input{padding-left:36px}
.input-wrap .icon-btn.right{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:transparent; border:0; color:var(--muted); cursor:pointer}
.input-wrap .icon-btn.right:hover{color:var(--txt)}
input[type="text"], input[type="password"], input[type="search"]{
  width:100%; background:var(--panel-2); color:var(--txt); border:1px solid var(--line);
  border-radius:10px; padding:12px 12px; outline:none;
  transition:box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}
input:focus{border-color:var(--neon-cyan); box-shadow:0 0 0 3px rgba(0,234,255,.15)}
.error{color:var(--danger); min-height:1em; display:block; font-size:.85rem}
.btn{
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--panel-2); color:var(--txt);
  padding:10px 14px; border-radius:12px; cursor:pointer; transition:transform .12s ease, filter .2s ease, border-color .2s ease;
}
.btn.w-100{width:100%}
.btn.ghost{background:transparent}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.neon{
  background:linear-gradient(90deg, rgba(0,234,255,.2), rgba(255,43,214,.2));
  border-color:rgba(0,234,255,.35);
  box-shadow:0 0 16px rgba(0,234,255,.25);
}
.btn.neon:hover{filter:saturate(1.2)}
.hint{margin:.75rem 0 0; color:var(--muted); font-size:.9rem}
.login-footer .scanline{display:none}
@media (max-width: 960px){
  .login-wrapper{grid-template-columns:1fr; gap:24px;}
  .login-hero{order:2; padding:28px;}
  .login-panel{order:1; padding:30px 26px;}
}

/* ===== Sheet-style forms ===== */
.sheet-form{display:flex; flex-direction:column; gap:18px;}
.form-section{padding:18px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:12px;}
.form-section h4{margin:0; font-size:1.05rem; letter-spacing:.03em;}
.field-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px;}
.form-section .muted{color:var(--muted); font-size:.85rem;}
@keyframes scan{0%{transform:translateX(-50%)}100%{transform:translateX(50%)}}

/* ====== App Shell ====== */
.app-shell{
  display:grid;
  grid-template-columns:260px 1fr;
  grid-template-rows:58px 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  height:100vh;
  position:relative;
  z-index:1;
}
.sidebar{
  grid-area:sidebar;
  background:var(--panel);
  border-right:1px solid var(--line);
  padding:12px;
  display:flex;
  flex-direction:column;
}
.brand{display:flex; align-items:center; gap:8px; font-family:var(--fontB); color:var(--neon-cyan); text-shadow:0 0 16px rgba(0,234,255,.35); padding:8px 6px 14px}
.brand .dot{color:var(--neon-magenta)}
.menu{display:flex; flex-direction:column; gap:2px}
.menu-item{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:10px; color:var(--txt)}
.menu-item span{flex:1; min-width:0; word-break:break-word}
.menu-item:hover{background:rgba(255,255,255,.04)}
.menu-item.is-active{background:linear-gradient(90deg, rgba(0,234,255,.15), rgba(255,43,214,.12)); border:1px solid rgba(0,234,255,.25)}
.sidebar-footer{margin-top:auto}
.topbar{
  grid-area:topbar;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  background:#0c0f17;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:60;
}
.topbar-leading{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
}
.menu-toggle{display:none}
.search{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px 10px;
  min-width:280px;
  flex:1;
}
.top-actions{display:flex; gap:8px; align-items:center}
.notifications-slot{position:relative}
.notifications-slot .icon-btn{position:relative}
.notifications-slot .icon-btn .badge-dot{
  position:absolute;
  top:6px;
  right:6px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff6b8b;
  box-shadow:0 0 0 2px var(--panel);
  transform:scale(0);
  transition:transform .18s ease;
}
.notifications-slot .icon-btn.has-new .badge-dot{transform:scale(1)}
.notifications-panel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  width:320px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 42px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  gap:0;
  z-index:70;
}
.notifications-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  font-weight:600;
}
.notifications-panel__head .btn{padding:4px 10px; font-size:.85rem}
.notifications-panel__body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 14px 14px;
  max-height:360px;
  overflow:auto;
}
.notifications-panel__body .empty{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}
.notification{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.notification.is-new{
  border-color:rgba(0,234,255,.4);
  box-shadow:0 0 20px rgba(0,234,255,.15);
}
.notification__title{font-weight:600}
.notification__meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  font-size:.85rem;
  color:var(--muted);
}
.notification__time{
  font-size:.78rem;
  color:var(--muted);
}
.notification__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--panel-2); cursor:pointer}
.icon-btn:hover{border-color:rgba(0,234,255,.35)}
.avatar{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg, rgba(0,234,255,.2), rgba(255,43,214,.2)); display:grid; place-items:center; font-weight:700}
.sidebar-backdrop{
  position:fixed;
  inset:0;
  background:rgba(5,10,20,.6);
  backdrop-filter:blur(2px);
  border:0;
  margin:0;
  padding:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:50;
}
.sidebar-backdrop.is-active{
  opacity:1;
  pointer-events:auto;
}
.content{grid-area:content; padding:18px; overflow:auto}
body.has-open-sidebar{overflow:hidden}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:inset 0 0 0 1px rgba(0,234,255,.06)}
@media (max-width:900px){
  .app-shell{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }
  .menu-toggle{display:inline-flex}
  .topbar{
    position:sticky;
    top:0;
    padding:10px 12px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    z-index:90;
  }
  .topbar-leading{width:100%; gap:8px}
  .search{min-width:0; width:100%}
  .top-actions{width:100%; justify-content:flex-end; flex-wrap:wrap}
  .sidebar{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:min(280px, 85vw);
    transform:translateX(-110%);
    transition:transform .3s ease;
    box-shadow:16px 0 32px rgba(0,0,0,.45);
    z-index:80;
    padding-top:96px;
    overflow-y:auto;
  }
  .sidebar.is-open{transform:translateX(0)}
  .content{padding:14px}
}

@media (max-width:720px){
  .topbar{gap:6px}
  .top-actions{justify-content:space-between; gap:6px}
  .orders-hero{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    text-align:left;
  }
  .orders .row{
    grid-template-columns:1fr;
    gap:6px;
    padding:12px;
  }
  .orders .row.head{display:none}
  .orders .c{
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
  }
  .orders .badge{margin-left:auto}
  .panel{padding:14px}
  .summary{grid-template-columns:1fr}
  .order-form .grid2{grid-template-columns:1fr}
}

@media (max-width:520px){
  .content{padding:12px}
  .top-actions{gap:4px}
  .kpi-grid{grid-template-columns:1fr}
  .notifications-panel{width:min(320px, 92vw)}
}

/* ====== Toasts ====== */
#toast-root{position:fixed; top:16px; right:16px; display:flex; flex-direction:column; gap:10px; z-index:9999}
.toast{display:flex; align-items:flex-start; gap:10px; min-width:260px; max-width:360px; background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--neon-cyan); color:var(--txt); padding:12px 12px; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.35); animation:toast-in .15s ease-out both;}
.toast.success{border-left-color:var(--ok)}
.toast.error{border-left-color:var(--danger)}
.toast .title{font-weight:700}
.toast .close{margin-left:auto; background:transparent; border:0; color:var(--muted); cursor:pointer}
@keyframes toast-in{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)}}

/* ===== Dashboard ===== */
.panel + .panel{ margin-top:16px }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px }
.panel-head h2, .panel-head h3{ margin:0 }
.panel-head .actions{ display:flex; gap:8px; flex-wrap:wrap }

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:12px;
}
@media (max-width:1200px){ .kpi-grid{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width:720px){ .kpi-grid{ grid-template-columns: repeat(2, 1fr) } }

.kpi{
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:12px;
  position:relative; overflow:hidden;
}
.kpi-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.kpi-title{color:var(--muted); font-size:.9rem}
.kpi-value{font-size:1.6rem; font-weight:800; margin-top:4px; text-shadow:0 0 16px rgba(0,234,255,.15)}
.kpi-sub{color:var(--muted); font-size:.85rem}
.spark{width:120px; height:36px; opacity:.9}
.spark polyline{fill:none; stroke:var(--neon-cyan); stroke-width:2; filter: drop-shadow(0 0 4px rgba(0,234,255,.6));}

/* Orders list */
.orders{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.orders .row{display:grid; grid-template-columns: 100px 1fr 140px 130px 220px; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line)}
.orders .row.head{background:rgba(255,255,255,.03); color:var(--muted); font-weight:700}
.orders .row:last-child{border-bottom:0}
.orders .c{display:flex; align-items:center}
.badge{border:1px solid var(--line); padding:4px 8px; border-radius:999px; font-size:.85rem}
.badge.new{color:#fff; background:linear-gradient(90deg, rgba(0,234,255,.2), rgba(255,43,214,.15))}
.badge.processing{background:rgba(255,209,102,.15); color:#ffd166}
.badge.in_progress{background:rgba(255,209,102,.15); color:#ffd166}
.badge.shipped{background:rgba(0,234,255,.1); color:var(--neon-cyan)}
.badge.done{background:rgba(55,255,159,.12); color:var(--ok)}
.badge.canceled{background:rgba(255,77,109,.12); color:var(--danger)}
.badge.paid{background:rgba(55,255,159,.12); color:var(--ok)}
.badge.unpaid{background:rgba(255,255,255,.06); color:var(--muted); border-style:dashed}

.orders-hero{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; padding:20px 24px; border-radius:18px; border:1px solid rgba(0,234,255,.18); background:linear-gradient(135deg, rgba(0,234,255,.18), rgba(0,0,0,.35)); box-shadow:0 18px 45px rgba(5,12,22,.55)}
.orders-hero h2{margin:0; font-size:1.8rem; font-family:var(--fontB); letter-spacing:.05em; text-transform:uppercase}
.orders-hero .muted{margin-top:6px; font-size:.95rem}
.orders-hero-actions{display:flex; gap:10px}

.orders-panel .panel-head.upgraded{display:flex; flex-direction:column; gap:18px; background:rgba(255,255,255,.01); border-bottom:0; padding:18px}
.orders-filters{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:space-between}
.orders-status-chips{display:flex; flex-wrap:wrap; gap:10px}
.status-chip{display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.02); color:var(--muted); font-size:.9rem; cursor:pointer; transition:transform .12s ease, border-color .2s ease, background .2s ease}
.status-chip:hover{transform:translateY(-1px); border-color:rgba(0,234,255,.35)}
.status-chip.active{background:linear-gradient(120deg, rgba(0,234,255,.28), rgba(255,43,214,.2)); color:#fff; border-color:rgba(0,234,255,.45); box-shadow:0 0 18px rgba(0,234,255,.25)}
.orders-dates{display:flex; flex-wrap:wrap; gap:12px}
.orders-date{display:flex; flex-direction:column; gap:6px; font-size:.8rem; color:var(--muted)}
.orders-date input{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:8px 12px; color:var(--txt); min-width:150px}

.orders-kpi{display:flex; flex-wrap:wrap; gap:14px}
.orders-kpi .kpi-card{flex:1 1 190px; padding:16px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); backdrop-filter: blur(6px); box-shadow:0 12px 30px rgba(5,12,22,.35); position:relative; overflow:hidden}
.orders-kpi .kpi-label{color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em}
.orders-kpi .kpi-value{font-size:1.8rem; font-weight:700; margin:6px 0; text-shadow:0 0 24px rgba(0,234,255,.18)}
.orders-kpi .kpi-sub{color:rgba(255,255,255,.55); font-size:.8rem}

.orders-table .dt-row{margin-bottom:6px; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; background:rgba(255,255,255,.02); transition:border-color .2s ease, box-shadow .2s ease}
.orders-table .dt-row:hover{border-color:rgba(0,234,255,.32); box-shadow:0 0 20px rgba(0,234,255,.18)}
.orders-table .dt-row.head{background:rgba(255,255,255,.08); border-radius:12px}

.orders-alert-slot{position:relative; margin-top:18px}
.orders-new-alert{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-radius:16px; border:1px solid rgba(0,234,255,.28); background:linear-gradient(110deg, rgba(0,234,255,.16), rgba(0,0,0,.6)); box-shadow:0 18px 40px rgba(5,12,22,.55); opacity:0; transform:translateY(-10px); transition:opacity .25s ease, transform .25s ease}
.orders-new-alert.visible{opacity:1; transform:translateY(0)}
.orders-new-alert__body{display:flex; flex-direction:column; gap:6px}
.orders-new-alert__title{font-weight:600; font-size:1.05rem}
.orders-new-alert__meta{display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:.9rem}
.orders-new-alert__actions{display:flex; gap:10px}

.dt-row.row-highlight{border-color:rgba(184,255,0,.45); box-shadow:0 0 24px rgba(184,255,0,.28); position:relative}
.dt-row.row-highlight::after{content:"new"; position:absolute; top:8px; right:12px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(184,255,0,.9)}

.order-meta{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; padding:18px; border-radius:14px; background:linear-gradient(120deg, rgba(0,234,255,.12), rgba(255,43,214,.08)); border:1px solid rgba(0,234,255,.18); box-shadow:0 12px 30px rgba(5,12,22,.45)}
.order-meta.enhanced{background:linear-gradient(120deg, rgba(0,234,255,.16), rgba(0,0,0,.2));}
.order-meta .headline{font-size:1.35rem; font-weight:700; letter-spacing:.02em}
.order-meta .order-meta-title{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.order-meta .order-meta-date{color:var(--muted); font-size:.85rem}
.order-meta .order-meta-user{font-size:.95rem}
.order-meta .order-meta-badges{display:flex; gap:8px; flex-wrap:wrap}
.order-form .grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px}
@media (max-width:720px){.order-form .grid2{grid-template-columns:1fr}}
.order-info{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-bottom:18px}
.info-card{padding:14px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 0 20px rgba(0,234,255,.05)}
.info-label{display:block; color:var(--muted); font-size:.85rem; margin-bottom:6px; letter-spacing:.03em; text-transform:uppercase}
.info-value{font-weight:600; font-size:1rem}
.delivery-card{grid-column:1/-1; padding:16px; border-radius:14px; border:1px solid rgba(0,234,255,.25); background:linear-gradient(120deg, rgba(0,234,255,.16), rgba(0,0,0,.4)); box-shadow:0 12px 26px rgba(5,12,22,.45); display:flex; flex-direction:column; gap:10px}
.delivery-title{font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--neon-cyan); font-weight:600}
.delivery-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.08)}
.delivery-row:last-child{border-bottom:0; padding-bottom:0}
.delivery-label{color:var(--muted); font-size:.85rem}
.delivery-value{font-weight:600}
.tag.auto{display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px; background:rgba(0,234,255,.2); color:var(--neon-cyan); font-size:.75rem; letter-spacing:.08em}
.order-items{border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:16px}
.order-items .it-row{grid-template-columns:1fr 120px 110px 120px}
.order-items .it-body table{width:100%; border-collapse:collapse}
.order-items tbody tr{border-bottom:1px solid var(--line)}
.order-items tbody tr:last-child{border-bottom:0}
.order-items td{padding:8px; vertical-align:middle}
.order-items td.prod select{width:100%}
.order-items .it-actions{padding:10px; display:flex; justify-content:flex-end}
.order-items .empty td{padding:20px; text-align:center; color:var(--muted)}
.summary{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:8px}
.summary div{padding:12px; background:rgba(255,255,255,.03); border-radius:12px; display:flex; justify-content:space-between; align-items:center}
.summary .total{grid-column:1/-1; font-size:1.1rem; font-weight:600}
.summary span{color:var(--muted); font-size:.9rem}

@media (max-width:900px){
  .orders .row{ grid-template-columns: 80px 1fr 100px 110px 1fr; }
}

/* Skeletons */
.skeleton{
  position:relative; overflow:hidden; min-height:64px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px dashed rgba(255,255,255,.06); border-radius:12px;
}
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation:shimmer 1.2s infinite;
}
@keyframes shimmer{ 100% { transform:translateX(100%)} }

/* ===== DataTable ===== */
.datatable{display:block}
.dt-controls{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.dt-controls .search input{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; color:var(--txt); min-width:240px}
.dt-controls .spacer{flex:1}
.dt-row{display:grid; grid-template-columns: var(--dt-columns, repeat(auto-fit, minmax(0,1fr))); gap:12px; padding:10px; border-bottom:1px solid var(--line); align-items:center}
.dt-row.head{background:rgba(255,255,255,.03); font-weight:700; color:var(--muted)}
.dt-cell{min-width:0}
.dt-cell .sort{display:inline-block; width:10px; height:10px; margin-left:6px; opacity:.5}
.dt-cell .sort.asc{border-bottom:6px solid currentColor; border-left:4px solid transparent; border-right:4px solid transparent}
.dt-cell .sort.desc{border-top:6px solid currentColor; border-left:4px solid transparent; border-right:4px solid transparent}
.dt-skeleton{display:grid; gap:8px}
.dt-skeleton > div{height:42px; border:1px dashed rgba(255,255,255,.08); border-radius:10px; background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.dt-empty{padding:20px; color:var(--muted)}
.qty-inline{width:100%; background:var(--panel-2); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:6px 8px}

/* ===== Paginator ===== */
.paginator{display:flex; gap:8px; align-items:center; padding:10px 0}
.paginator button{min-width:36px; height:36px; border:1px solid var(--line); background:var(--panel-2); border-radius:8px; color:var(--txt); cursor:pointer}
.paginator select{background:var(--panel-2); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:6px 8px}

/* ===== Modal & Form ===== */
.modal-wrap{position:fixed; inset:0; display:grid; place-items:center; z-index:9990}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(2px)}
.modal{position:relative; width:min(900px, 96vw); background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line)}
.modal-body{padding:14px}
.modal-foot{padding:12px 14px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid var(--line)}
.form-grid .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-grid .field.checkbox{display:flex; align-items:center; gap:8px; margin-top:28px}
.form-grid textarea{width:100%; background:var(--panel-2); color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:10px}

/* ===== Tabs ===== */
.tabs .tabbar{display:flex; gap:6px; margin-bottom:8px}
.tabs .tabbar [data-tab]{border:1px solid var(--line); background:var(--panel-2); color:var(--txt); border-radius:999px; padding:6px 10px; cursor:pointer}
.tabs .tabbar [data-tab].is-active{background:linear-gradient(90deg, rgba(0,234,255,.2), rgba(255,43,214,.2)); border-color:rgba(0,234,255,.35)}
.tabpane{animation:fade .12s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ===== Dropzone ===== */
.dropzone{border:1px dashed rgba(255,255,255,.2); border-radius:12px; padding:10px}
.dropzone.is-hover{border-color:var(--neon-cyan); box-shadow:0 0 12px rgba(0,234,255,.2) inset}
.dz-preview{min-height:80px; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.03); margin-bottom:8px}
.dz-preview img{max-width:100%; display:block}
.dz-actions{display:flex; gap:8px}

/* ===== Media thumbnails ===== */
.thumb{
  width:72px;
  height:48px;
  border-radius:10px;
  display:block;
  object-fit:cover;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.thumb:not(img){
  display:grid;
  place-items:center;
  object-fit:unset;
  background:linear-gradient(135deg, rgba(0,234,255,.18), rgba(255,43,214,.18));
  border:1px solid rgba(0,234,255,.25);
  font-size:.8rem;
  color:#cfeffd;
  text-shadow:0 0 8px rgba(0,234,255,.35);
}
.thumb--empty{
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.thumb-cell{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* selects consistent style */
select{
  width:100%; background:var(--panel-2); color:var(--txt);
  border:1px solid var(--line); border-radius:10px; padding:10px;
}

/* ===== Promo Codes helpers ===== */
.meter{position:relative; height:20px; background:var(--panel-2); border:1px solid var(--line); border-radius:999px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:.85rem}
.meter > span{position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, rgba(0,234,255,.25), rgba(184,255,0,.25))}
.meter > b{position:relative; z-index:1; color:var(--txt)}
.muted{color:var(--muted)}

/* ===== Drawer (Orders) ===== */
.drawer-wrap{position:fixed; inset:0; z-index:9990; display:grid; grid-template-columns:1fr auto}
.drawer-backdrop{grid-column:1; background:rgba(0,0,0,.55); opacity:0; transition:opacity .15s ease}
.drawer{grid-column:2; width:min(560px, 96vw); height:100%; background:var(--panel); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .15s ease}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line)}
.drawer-body{padding:14px; overflow:auto; height:calc(100% - 56px)}
.drawer-wrap.is-open .drawer{transform:translateX(0)}
.drawer-wrap.is-open .drawer-backdrop{opacity:1}

.order-card section{margin-bottom:14px}
.order-card h4{margin:0 0 8px}
.timeline{display:flex; gap:10px; list-style:none; padding:0; margin:6px 0 12px}
.timeline li{position:relative; padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted)}
.timeline li.passed{background:linear-gradient(90deg, rgba(0,234,255,.15), rgba(255,43,214,.12)); color:var(--txt)}
.status-change{display:flex; gap:8px; align-items:center}
.status-change select{background:var(--panel-2); color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:6px 8px}

.it-table{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.it-row{display:grid; grid-template-columns:1fr 100px 120px 140px; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); align-items:center}
.it-row.head{background:rgba(255,255,255,.03); color:var(--muted); font-weight:700}
.it-row:last-child{border-bottom:0}

.calc{display:grid; gap:4px; margin-top:10px}
.calc .total{font-size:1.2rem}
.kv{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px}
.kv .wide{grid-column:1/-1}
.kv span{display:block; color:var(--muted); font-size:.85rem}
.kv b{font-weight:700}
.edit-inline textarea{width:100%; background:var(--panel-2); color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:8px; margin:6px 0}
.times{display:flex; gap:16px; color:var(--muted)}

/* === Overrides: Orders fullscreen drawer === */
.drawer{grid-column:2; width:min(720px, 96vw); height:100%; background:var(--panel); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .15s ease}
.drawer.is-full{ width:100vw; border-left:none; }
.drawer-head{position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(8,12,20,.92), rgba(8,12,20,.88)); backdrop-filter:blur(4px)}
.drawer-head .actions{display:flex; gap:6px}
.drawer-body{padding:14px; overflow:auto; height:calc(100% - 56px); overscroll-behavior:contain}

.order-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px}
.order-grid .col section{margin-bottom:14px}
.timeline{display:flex; gap:10px; list-style:none; padding:0; margin:6px 0 12px}
.timeline li{padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted)}
.timeline li.passed{background:linear-gradient(90deg, rgba(0,234,255,.15), rgba(255,43,214,.12)); color:var(--txt)}
.status-change{display:flex; gap:8px; align-items:center}
.status-change select{background:var(--panel-2); color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:6px 8px}

.it-table{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.it-row{display:grid; grid-template-columns:1fr 80px 110px 120px; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); align-items:center}
.it-row.head{background:rgba(255,255,255,.03); color:var(--muted); font-weight:700}
.it-row:last-child{border-bottom:0}

.kv{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px}
.kv .wide{grid-column:1/-1}
.kv span{display:block; color:var(--muted); font-size:.85rem}
.kv b{font-weight:700}
.edit-inline textarea{width:100%; background:var(--panel-2); color:var(--txt); border:1px solid var(--line); border-radius:10px; padding:8px; margin:6px 0}
.times{display:flex; gap:16px; color:var(--muted)}

@media (max-width: 1200px){
  .drawer.is-full{ width:100vw }
  .order-grid{ grid-template-columns: 1fr }
  .kv{ grid-template-columns:1fr }
  .it-row{ grid-template-columns: 1fr 70px 90px 100px }
}

/* ===== Reviews ===== */
.stars{letter-spacing:1px; font-size:1rem}
.btn.success{border-color:rgba(184,255,0,.6)}
.btn.danger{border-color:rgba(255,43,214,.5)}
.badge.pending{background:linear-gradient(90deg, rgba(0,234,255,.15), rgba(255,255,255,.06));}
.badge.approved{background:linear-gradient(90deg, rgba(184,255,0,.25), rgba(255,255,255,.06));}
.badge.rejected{background:linear-gradient(90deg, rgba(255,43,214,.25), rgba(255,255,255,.06));}

/* === News === */
.dropzone{border:1px dashed var(--line); border-radius:12px; padding:10px; text-align:center; background:rgba(255,255,255,.02)}
.dropzone.is-drag{background:rgba(0,234,255,.06)}
.dropzone .dz-body{min-height:90px; display:flex; align-items:center; justify-content:center}
.dz-progress{padding:8px}
.tabs-mini .tab-head{display:flex; gap:8px; margin-bottom:8px}
.tabs-mini .tab-btn{border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:transparent}
.tabs-mini .tab-btn.is-active{background:linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; border-color: rgba(255,255,255,.25)}
.tab-pane{display:none}
.tab-pane.is-active{display:block}

/* === Users === */
.user-card .list{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.user-card .list-row{display:flex; gap:12px; padding:8px 10px; border-bottom:1px solid var(--line)}
.user-card .list-row:last-child{border-bottom:0}

/* === Settings === */
.codebox{background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:10px; overflow:auto; max-width:100%}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width: 1000px){ .grid3{grid-template-columns:1fr} .grid4{grid-template-columns:1fr 1fr} }
.switch{display:flex; align-items:center; gap:8px}
.switch input{accent-color:var(--neon-cyan)}
.row.gap{display:flex; gap:10px; align-items:center}

/* --- Dropzone polish --- */
.dropzone{ border:1px dashed rgba(255,255,255,.15); border-radius:12px; padding:12px; background:rgba(255,255,255,.03) }
.dropzone.is-drag{ outline:2px solid var(--neon-cyan); outline-offset:2px; }
.dropzone.is-uploading{ opacity:.7; pointer-events:none }
.dropzone .dz-preview{ display:flex; align-items:center; justify-content:center; min-height:140px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.02) }
.dropzone .dz-actions{ margin-top:8px; display:flex; gap:8px; }

.dropzone{ border:1px dashed rgba(255,255,255,.15); border-radius:12px; padding:12px; background:rgba(255,255,255,.03) }
.dropzone .dz-preview{ display:flex; align-items:center; justify-content:center; min-height:140px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.02) }
.dropzone .dz-actions{ margin-top:8px; display:flex; gap:8px }
.dropzone.is-drag{ outline:2px solid var(--neon-cyan); outline-offset:2px }
.dropzone.is-uploading{ opacity:.7; pointer-events:none }

/* dropzone polish (ensure visible & clickable) */
.dropzone{ border:1px dashed rgba(255,255,255,.15); border-radius:12px; padding:12px; background:rgba(255,255,255,.03) }
.dropzone .dz-preview{ display:flex; align-items:center; justify-content:center; min-height:140px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.02) }
.dropzone .dz-actions{ margin-top:8px; display:flex; gap:8px }
.dropzone.is-drag{ outline:2px solid var(--neon-cyan); outline-offset:2px }
.dropzone.is-uploading{ opacity:.7; pointer-events:none }

/* Dropzone visual */
.dropzone{ border:1px dashed rgba(255,255,255,.15); border-radius:12px; padding:12px; background:rgba(255,255,255,.03) }
.dropzone .dz-preview{ display:flex; align-items:center; justify-content:center; min-height:160px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.02) }
.dropzone .dz-actions{ margin-top:8px; display:flex; gap:8px }
.dropzone.is-drag{ outline:2px solid var(--neon-cyan); outline-offset:2px }
.dropzone.is-uploading{ opacity:.7; pointer-events:none }
.dz-img{ display:block; max-width:100%; max-height:150px; border-radius:10px }
.dz-empty{ color:rgba(255,255,255,.6); font-size:.95rem; }

/* Toasts over modal (max z-index) */
#toast-root, .toast-root, .toasts, .toast-container{
  position:fixed; top:16px; right:16px; z-index:2147483647; pointer-events:none;
}
.toast{ pointer-events:auto; }

/* ===== Revamped Layout Components ===== */
.content{
  padding:24px;
  background:radial-gradient(180% 120% at 10% 0%, rgba(0,234,255,.18) 0%, rgba(12,15,23,1) 55%), radial-gradient(120% 140% at 80% 0%, rgba(255,43,214,.12) 0%, rgba(12,15,23,1) 55%), #0c0f17;
}
.page-hero{
  position:relative;
  padding:28px 28px 32px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(0,234,255,.22), rgba(255,43,214,.12));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  margin-bottom:28px;
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:8px -60px auto auto;
  width:220px;
  height:220px;
  background:radial-gradient(circle at center, rgba(255,255,255,.18), transparent 70%);
  mix-blend-mode:screen;
  opacity:.6;
}
.page-hero__title{
  font-size:1.9rem;
  font-weight:700;
  margin:0;
  color:#fff;
}
.page-hero__subtitle{
  margin-top:10px;
  font-size:1.05rem;
  color:rgba(255,255,255,.82);
  max-width:720px;
}
.page-hero__actions{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.glass{
  background:rgba(16,22,34,.78);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  backdrop-filter:blur(18px);
}
.glass h3{margin-top:0;}

.metric-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
}
.metric-card{
  position:relative;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.35));
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.metric-card::after{
  content:"";
  position:absolute;
  inset:auto -30px -40px auto;
  width:160px;
  height:160px;
  background:radial-gradient(circle at center, rgba(0,234,255,.28), transparent 70%);
  opacity:.4;
}
.metric-card__title{
  font-size:.95rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(255,255,255,.68);
}
.metric-card__value{
  font-size:1.8rem;
  font-weight:700;
  margin:16px 0 8px;
}
.metric-card__delta{
  font-size:.9rem;
  color:rgba(255,255,255,.6);
}
.metric-card svg.spark{
  position:absolute;
  inset:auto 12px 12px auto;
  width:120px;
  height:42px;
  opacity:.6;
}
.metric-card svg.spark polyline{
  fill:none;
  stroke:url(#spark-gradient, rgba(0,234,255,.65));
  stroke-width:2.2;
  stroke-linecap:round;
}

.section-grid{
  display:grid;
  gap:24px;
}

.card-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.product-card{
  position:relative;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(140deg, rgba(18,26,40,.95), rgba(12,18,30,.85));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 24px 40px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:280px;
}
.product-card.is-highlight{
  outline:2px solid rgba(0,234,255,.6);
  box-shadow:0 28px 46px rgba(0,234,255,.35);
  animation:highlight-pulse 1.8s ease-in-out 2;
}
@keyframes highlight-pulse{
  0%{outline-color:rgba(0,234,255,.9); box-shadow:0 20px 40px rgba(0,234,255,.4);}
  50%{outline-color:rgba(255,255,255,.2); box-shadow:0 12px 30px rgba(0,234,255,.15);}
  100%{outline-color:rgba(0,234,255,.6); box-shadow:0 28px 46px rgba(0,234,255,.35);}
}
.product-card__media{
  position:relative;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
  height:160px;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.6);
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.product-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.product-card__title{
  font-size:1.05rem;
  font-weight:600;
  line-height:1.3;
}
.product-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  color:rgba(255,255,255,.65);
  font-size:.9rem;
}
.product-card__actions{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  font-size:.8rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.tag.neon{border-color:rgba(0,234,255,.4); color:rgba(0,234,255,.8);}
.tag.magenta{border-color:rgba(255,43,214,.4); color:rgba(255,43,214,.85);}

.user-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.user-tile{
  border-radius:18px;
  padding:18px;
  background:linear-gradient(135deg, rgba(14,22,36,.92), rgba(15,19,32,.82));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 20px 32px rgba(0,0,0,.32);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.user-tile__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.user-tile__id{
  font-size:.85rem;
  color:rgba(255,255,255,.55);
}
.user-tile__name{
  font-size:1.1rem;
  font-weight:600;
}
.user-tile__meta{
  display:flex;
  gap:10px 14px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.65);
  font-size:.88rem;
}
.user-tile__actions{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.insights-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.insight-card{
  padding:18px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.38));
  border:1px solid rgba(255,255,255,.08);
  min-height:160px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.insight-card h4{
  margin:0;
  font-size:1.05rem;
}
.insight-card p{
  margin:0;
  color:rgba(255,255,255,.7);
  line-height:1.5;
}
.insight-card ul{
  margin:0;
  padding-left:18px;
  color:rgba(255,255,255,.7);
}

.settings-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.settings-card{
  border-radius:18px;
  padding:20px;
  background:linear-gradient(135deg, rgba(14,22,36,.92), rgba(16,24,38,.84));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 36px rgba(0,0,0,.36);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.settings-card h3{
  margin:0;
  font-size:1.2rem;
}
.settings-card footer{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.admin-users-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-user-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.admin-user-row strong{
  display:block;
  font-size:1rem;
}
.admin-user-row span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
}
.admin-user-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.admin-user-tags{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:right;
}
.settings-divider{
  border:0;
  border-top:1px solid rgba(255,255,255,.06);
}
.settings-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.recent-list{
  display:grid;
  gap:12px;
}
.recent-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.recent-item__meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.recent-item__title{
  font-weight:600;
}
.recent-item__details{
  color:rgba(255,255,255,.6);
  font-size:.88rem;
}

.empty-state{
  padding:40px 24px;
  text-align:center;
  border-radius:18px;
  background:rgba(255,255,255,.02);
  border:1px dashed rgba(255,255,255,.08);
  color:rgba(255,255,255,.65);
}

@media (max-width: 900px){
  .page-hero{padding:22px 22px 26px;}
  .page-hero__title{font-size:1.6rem;}
  .page-hero__actions{flex-direction:column; align-items:flex-start;}
}

/* ===== Command Palette ===== */
.palette-open{overflow:hidden;}
.palette-mask{
  position:fixed;
  inset:0;
  background:rgba(5,8,16,.72);
  backdrop-filter:blur(12px);
  z-index:20000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:80px 14px 40px;
}
.palette-mask.is-visible{display:flex;}
.palette-dialog{
  width:min(720px, 100%);
  border-radius:20px;
  background:rgba(13,18,28,.96);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
}
.palette-search{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.palette-search .icon{
  width:20px; height:20px;
  opacity:.65;
}
.palette-search input{
  flex:1;
  background:transparent;
  border:0;
  color:#fff;
  font-size:1.05rem;
  outline:none;
}
.palette-results{
  list-style:none;
  margin:0;
  padding:12px 0;
  max-height:320px;
  overflow:auto;
}
.palette-results li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 20px;
  cursor:pointer;
  transition:background .15s ease;
}
.palette-results li.is-active,
.palette-results li:hover{
  background:rgba(0,234,255,.12);
}
.palette-item__title{
  font-weight:600;
}
.palette-item__hint{
  font-size:.85rem;
  color:rgba(255,255,255,.65);
}
.palette-item__scope{
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.palette-empty{
  padding:20px;
  text-align:center;
  color:rgba(255,255,255,.65);
}
.palette-footer{
  display:flex;
  gap:16px;
  padding:12px 20px 14px;
  font-size:.8rem;
  color:rgba(255,255,255,.55);
  border-top:1px solid rgba(255,255,255,.06);
}
.palette-footer kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 6px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.35);
  margin-right:6px;
  font-size:.75rem;
  background:rgba(255,255,255,.08);
}

/* Dropzone visuals */
.dropzone{ border:1px dashed rgba(255,255,255,.15); border-radius:12px; padding:12px; background:rgba(255,255,255,.03) }
.dropzone .dz-preview{ display:flex; align-items:center; justify-content:center; min-height:240px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.02) }
.dropzone .dz-actions{ margin-top:8px; display:flex; gap:8px }
.dropzone.is-drag{ outline:2px solid var(--neon-cyan); outline-offset:2px }
.dropzone.is-uploading{ opacity:.7; pointer-events:none }
.dz-img{ display:block; max-width:100%; max-height:220px; border-radius:10px }
.dz-empty{ color:rgba(255,255,255,.7); font-size:.95rem; }

/* Toasts above modals */
#toast-root, .toast-root, .toasts, .toast-container{ position:fixed; top:16px; right:16px; z-index:2147483647; pointer-events:none; }
.toast{ pointer-events:auto; }


.user-detail{display:flex;flex-direction:column;gap:24px;min-width:min(960px,90vw);}
.user-detail__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08);}
.user-detail__header h2{margin:0;font-size:1.4rem;}
.user-detail__role{display:flex;align-items:center;gap:12px;}
.user-detail__role select{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px 10px;color:#fff;}
.user-detail__metrics{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.user-detail__grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.user-detail__card{padding:18px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);min-height:160px;}
.user-detail__card h3{margin-top:0;}
.user-detail__section{padding:18px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);}
.user-detail__section h3{margin-top:0;}
@media (max-width:1024px){.user-detail{min-width:auto;width:100%;}}


body.ui-compact .card-grid{gap:12px;}
body.ui-compact .product-card{min-height:240px;}
body.ui-compact .user-tile{padding:14px;}
body.ui-glow .glass{border-color:rgba(0,234,255,.18);box-shadow:0 24px 54px rgba(0,234,255,.22);}
body.ui-glow .metric-card::after{opacity:.7;}