:root{
  /* Wildberries-inspired palette */
  --wb-primary:#6E1EFF;         /* deep purple */
  --wb-accent:#FF3F8E;          /* magenta/pink */
  --wb-grad-from:#6E1EFF;
  --wb-grad-to:#FF3F8E;
  --wb-bg:#0E0616;              /* near-black with purple tint */
  --wb-surface:#160A22;         /* card background */
  --wb-surface-2:#1D0E2B;
  --wb-border:#2B1840;
  --wb-text:#F7F4FF;
  --wb-text-dim:#CDBBEA;
  --success:#36D399;
  --warning:#F7C04A;
  --danger:#FF6B6B;
  --focus:#B089FF;
  --shadow: 0 10px 25px rgba(0,0,0,.35), 0 4px 12px rgba(110,30,255,.25);
  --radius: 16px;
}
* { box-sizing: border-box }
html, body { height:100% }
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--wb-text); background: radial-gradient(1200px 800px at 85% -10%, rgba(255,63,142,.12), transparent 60%), radial-gradient(1000px 800px at -10% 20%, rgba(110,30,255,.18), transparent 55%), var(--wb-bg);
  letter-spacing:.2px;
}
/* Top bar */
.topbar{
  position:sticky; top:0; z-index:1000; backdrop-filter: blur(8px);
  background:linear-gradient(90deg, rgba(110,30,255,.75), rgba(255,63,142,.65));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  max-width:1200px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:14px;
}
.logo{
  display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px;
}
.logo-badge{
  width:36px; height:36px; border-radius:10px;
  background: linear-gradient(135deg, var(--wb-grad-from), var(--wb-grad-to));
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.logo-badge svg{ width:20px; height:20px; }
.spacer{ flex:1 }
.user{
  display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
}
.user .dot{ width:8px; height:8px; border-radius:50%; background:var(--success) }

/* Layout */
.wrap{ max-width:1200px; margin:22px auto; padding:0 20px; display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; }
@media (max-width: 980px){ .wrap{ grid-template-columns: 1fr; } }

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--wb-surface);
  border:1px solid var(--wb-border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card h3{
  margin:0 0 12px; font-size:18px; font-weight:700; letter-spacing:.3px;
}
.card .hd{ padding:16px 18px; border-bottom:1px solid var(--wb-border); display:flex; align-items:center; gap:12px }
.card .bd{ padding:16px 18px }
.pill{
  font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--wb-border); color:var(--wb-text-dim);
}

/* Scan/Search */
.scan{
  display:flex; gap:10px; flex-wrap:wrap;
}
.input{
  flex:1; min-width:220px; position:relative;
}
.input input{
  width:100%; padding:14px 44px 14px 44px; border-radius:12px;
  border:1px solid var(--wb-border); background:var(--wb-surface-2); color:var(--wb-text);
  outline:none; transition:.2s border, .2s box-shadow;
}
.input input:focus{ border-color:var(--focus); box-shadow:0 0 0 3px rgba(176,137,255,.25) }
.input .ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.85;
}
.btn{
  display:inline-flex; align-items:center; gap:10px; border:none; cursor:pointer; font-weight:600; letter-spacing:.2px;
  padding:14px 18px; border-radius:12px; background:linear-gradient(135deg, var(--wb-grad-from), var(--wb-grad-to));
  color:white; box-shadow:var(--shadow); transition: transform .04s ease-in-out, filter .2s ease-in-out;
}
.btn:active{ transform: translateY(1px) }
.btn.secondary{ background:transparent; border:1px solid var(--wb-border); box-shadow:none; color:var(--wb-text) }
.btn[disabled]{ opacity:.6; cursor:not-allowed }

/* Quick actions */
.qa{ display:grid; grid-template-columns: repeat(4, 1fr); gap:12px }
@media (max-width: 680px){ .qa{ grid-template-columns: repeat(2, 1fr);} }
.qa .tile{
  padding:16px; border:1px solid var(--wb-border); border-radius:14px; background:var(--wb-surface-2);
  display:flex; gap:14px; align-items:center; cursor:pointer; transition:.15s transform, .15s background;
}
.qa .tile:hover{ transform: translateY(-2px); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); }
.qa .tile .icowrap{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(110,30,255,.25), rgba(255,63,142,.25));
  border:1px solid var(--wb-border)
}

/* Table */
.tbl{ width:100%; border-collapse: collapse; }
.tbl th, .tbl td{ padding:12px 10px; text-align:left; border-bottom: 1px solid var(--wb-border) }
.tbl th{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--wb-text-dim) }
.badge{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--wb-border); }
.badge.green{ background: rgba(54,211,153,.12); color:#BFF2DF; border-color: rgba(54,211,153,.35) }
.badge.amber{ background: rgba(247,192,74,.12); color:#FFE3A6; border-color: rgba(247,192,74,.35) }
.badge.red{ background: rgba(255,107,107,.12); color:#FFC1C1; border-color: rgba(255,107,107,.35) }

/* Right column widgets */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.kpi{
  padding:16px; background:var(--wb-surface-2); border:1px solid var(--wb-border); border-radius:14px;
}
.kpi .v{ font-size:22px; font-weight:800 }
.kpi .t{ color:var(--wb-text-dim); font-size:12px }

/* Toast */
.toast{
  position:fixed; right:18px; bottom:18px; display:none; padding:14px 16px; border-radius:12px;
  background: linear-gradient(135deg, var(--wb-grad-from), var(--wb-grad-to)); color:white; box-shadow:var(--shadow);
}

/* Modal */
dialog{
  border:none; padding:0; background:transparent;
}
.modal{
  width:min(560px, 92vw); background:var(--wb-surface); border:1px solid var(--wb-border); border-radius:18px; box-shadow:var(--shadow); overflow:hidden;
}
.modal .hd{ padding:16px 18px; border-bottom:1px solid var(--wb-border); display:flex; align-items:center; justify-content:space-between }
.modal .bd{ padding:16px 18px; }
.modal .ft{ padding:14px 18px; border-top:1px solid var(--wb-border); display:flex; gap:10px; justify-content:flex-end }

/* Focus ring helpers */
.tile, .btn, .user, .input input{ outline-offset: 2px }
.tile:focus-visible, .btn:focus-visible, .user:focus-visible, .input input:focus-visible{ outline: 2px solid var(--focus) }
a { color: inherit; text-decoration: none }

/* App description */
.app-description {
  max-width: 1200px;
  margin: 20px auto;
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--wb-text-dim);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.app-description strong {
  color: var(--wb-text);
}

/* --- HERO --- */
.hero{
  position: relative; overflow: clip;
  background:
    radial-gradient(1200px 600px at 85% -20%, rgba(255,63,142,.25), transparent 60%),
    radial-gradient(900px 650px at -10% 10%, rgba(110,30,255,.35), transparent 55%);
  padding: 28px 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero::after{
  /* soft gradient wave */
  content:""; position:absolute; inset:auto 0 -90px 0; height:180px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.06), transparent 70%);
  filter: blur(20px); pointer-events:none;
}
.hero__inner{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center;
}
@media (max-width: 980px){ .hero__inner{ grid-template-columns:1fr; } }

.hero__badge{
  display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px; border:1px solid var(--wb-border);
  background:linear-gradient(135deg, rgba(110,30,255,.25), rgba(255,63,142,.25));
  color:var(--wb-text-dim);
}
.hero__title h1{
  margin:10px 0 6px; font-size:34px; line-height:1.1; letter-spacing:.2px;
  background: linear-gradient(90deg, #fff, #E7D7FF, #FFC3E0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__title p{ margin:0 0 14px; color:var(--wb-text-dim) }
.hero__actions{ display:flex; gap:10px; flex-wrap:wrap }

/* XL buttons + animated border */
.btn-xl{ padding:16px 22px; border-radius:14px; font-size:15px }
.btn, .tile{
  position:relative;
}
.btn::before, .tile::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: linear-gradient(135deg, rgba(110,30,255,.35), rgba(255,63,142,.35));
  filter: blur(8px); opacity:0; transition:opacity .2s ease;
  z-index:-1;
}
.btn:hover::before, .tile:hover::before{ opacity:1 }

/* Progress ring (conic) */
.ring{
  --size: 160px;
  --track: rgba(255,255,255,.06);
  --gap: var(--wb-bg);
  width: var(--size); height: var(--size); border-radius: 50%;
  display:grid; place-items:center;
  background:
    radial-gradient(closest-side, var(--wb-surface) 78%, transparent 78% 100%),
    conic-gradient(var(--wb-accent) calc(var(--val)*1%), var(--track) 0);
  border:1px solid var(--wb-border); box-shadow: var(--shadow);
}
.ring[data-value]{ --val: attr(data-value number); }
.ring__label{ text-align:center }
.ring__value{ font-size:24px; font-weight:800 }
.ring__text{ font-size:12px; color:var(--wb-text-dim) }
.hero__viz{ display:grid; gap:12px; justify-items:center }
.hero__kpis{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.chip{
  border:1px solid var(--wb-border); background:var(--wb-surface-2);
  padding:8px 12px; border-radius:999px; font-size:12px; color:var(--wb-text-dim);
}

/* Glassier cards + deeper hover for quick actions */
.card{ backdrop-filter: blur(4px); }
.qa .tile{
  position:relative; overflow:hidden;
}
.qa .tile:hover{
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 16px 30px rgba(0,0,0,.25), 0 6px 14px rgba(110,30,255,.25);
}

/* Keyboard hint footer */
.foot{
  margin-top:18px; border-top:1px solid var(--wb-border);
  background: rgba(255,255,255,.02);
}
.foot__inner{
  max-width:1200px; margin:0 auto; padding:10px 20px; color:var(--wb-text-dim); font-size:12px;
}
kbd{
  padding:2px 6px; border-radius:6px; border:1px solid var(--wb-border);
  background: var(--wb-surface-2); font-family:inherit; font-size:11px;
}

/* Subtle ripple for buttons/tiles */
.btn.ripple, .tile.ripple{ overflow:hidden; }
.ripple-ink{
  position:absolute; border-radius:50%; transform:scale(0); opacity:.35;
  background: radial-gradient(circle, white, rgba(255,255,255,0) 70%);
  pointer-events:none; animation: rip 600ms ease-out forwards;
}
@keyframes rip{ to { transform:scale(10); opacity:0; } }