: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%; margin:0; padding:0 }
body{
  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;
  line-height:1.5;
}

/* 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 .container{
  max-width:1200px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:14px;
}
.brand{
  font-weight:800; color:#fff; text-decoration:none; letter-spacing:.4px;
}
.nav{
  display:flex; gap:8px; margin-left:auto;
}
.nav a{
  color:#fff; text-decoration:none; padding:8px 10px; border-radius:20px; opacity:.9;
  transition:opacity .2s, background .2s;
}
.nav a:hover{
  opacity:1; background:rgba(255,255,255,.12);
}
.user{
  display:flex; align-items:center; gap:10px; margin-left:16px;
}

/* Buttons */
.button{
  display:inline-block; border:none; cursor:pointer; font-weight:600; letter-spacing:.2px;
  padding:10px 16px; border-radius:12px; color:#fff; text-decoration:none; 
  background:linear-gradient(135deg, var(--wb-grad-from), var(--wb-grad-to));
  box-shadow:var(--shadow); transition: transform .04s ease-in-out, filter .2s ease-in-out;
}
.button:active{ transform: translateY(1px) }
.button.primary{ background:linear-gradient(135deg, var(--wb-grad-from), var(--wb-grad-to)); }
.button.secondary{ 
  background:transparent; border:1px solid var(--wb-border); box-shadow:none; color:var(--wb-text);
}

/* 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);
  padding:20px; backdrop-filter: blur(4px);
}
.card h1, .card h3{
  margin:0 0 12px; font-size:18px; font-weight:700; letter-spacing:.3px; color:var(--wb-text);
}

/* Grid & Tiles */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; margin:16px 0;
}
.tile{
  background:var(--wb-surface-2); border:1px solid var(--wb-border); border-radius:14px; 
  padding:18px; text-decoration:none; color:inherit; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  position:relative; overflow:hidden;
}
.tile:hover{
  transform:translateY(-2px); 
  box-shadow: 0 16px 30px rgba(0,0,0,.25), 0 6px 14px rgba(110,30,255,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.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;
}
.tile:hover::before{ opacity:1 }

/* Forms */
.form{
  display:grid; gap:12px;
}
label{
  display:grid; gap:6px; color:var(--wb-text-dim);
}
input, select{
  padding:12px 14px; border:1px solid var(--wb-border); border-radius:12px;
  background:var(--wb-surface-2); color:var(--wb-text); 
  outline:none; transition:.2s border, .2s box-shadow;
}
input:focus, select:focus{
  border-color:var(--focus); box-shadow:0 0 0 3px rgba(176,137,255,.25);
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B089FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:40px; cursor:pointer;
}

/* Table */
.table{
  width:100%; border-collapse:collapse; background:var(--wb-surface); 
  border-radius:12px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--wb-border);
}
.table th{
  background:linear-gradient(180deg, var(--wb-primary), rgba(110,30,255,.8));
  color:#fff; padding:16px 12px; text-align:left; font-weight:600; 
  font-size:14px; text-transform:uppercase; letter-spacing:0.5px;
}
.table td{
  padding:14px 12px; border-bottom:1px solid var(--wb-border); color:var(--wb-text); font-size:14px;
}
.table tbody tr{
  cursor:pointer; transition:background .15s ease;
}
.table tbody tr:hover{
  background:rgba(110,30,255,.12);
}
.table tbody tr:last-child td{
  border-bottom:none;
}

/* Alerts */
.alert{
  padding:10px 12px; border-radius:8px; background:rgba(255,107,107,.12); 
  color:#FFC1C1; border:1px solid rgba(255,107,107,.35);
}
.alert.success{
  background:rgba(54,211,153,.12); color:#BFF2DF; border-color:rgba(54,211,153,.35);
}
.alert.error{
  background:rgba(255,107,107,.12); color:#FFC1C1; border-color:rgba(255,107,107,.35);
}

.muted{
  color:var(--wb-text-dim);
}
strong{
  color:var(--wb-text);
  font-weight:600;
}

.footer{
  margin-top:24px; color:var(--wb-text-dim);
}

/* Container */
.container{
  max-width:1200px; margin:0 auto; padding:0 20px;
}

/* Modal */
.modal-overlay{
  position:fixed; inset:0; z-index:10000; 
  background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-content{
  background:var(--wb-surface); border:1px solid var(--wb-border); 
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:24px; max-width:480px; width:100%;
}
.modal-content h2{
  margin:0 0 16px; font-size:20px; font-weight:700; color:var(--wb-text);
}
.modal-content p{
  margin:0 0 24px; color:var(--wb-text-dim); line-height:1.6;
}
.modal-actions{
  display:flex; gap:12px; justify-content:flex-end;
}

/* Focus styles */
a, button, input, select, .tile{ outline-offset: 2px }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .tile:focus-visible{ 
  outline: 2px solid var(--focus); 
}