/* HSP × WSC Design System (v1)
   - Dark tech-blue theme
   - Tokens + Components
   - Mobile downgrade + prefers-reduced-motion
*/

:root{
  /* Brand */
  --bg-0:#050913;
  --bg-1:#08102a;
  --bg-2:#0b1636;
  --card:#0b1733cc;
  --card-2:#0b1733f2;
  --stroke:#1b2a52;
  --stroke-2:#273a6e;

  --txt:#eaf1ff;
  --muted:#a9b8e6;
  --muted-2:#7f92c8;

  --blue:#2b6cff;
  --cyan:#22d3ee;
  --violet:#7c3aed;
  --green:#10b981;
  --amber:#f59e0b;
  --red:#ef4444;

  --glow-blue:0 0 18px rgba(43,108,255,.55);
  --glow-cyan:0 0 18px rgba(34,211,238,.45);

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --h1: 40px;
  --h2: 28px;
  --h3: 20px;
  --p: 14px;

  /* Layout */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 64px;

  --container: 1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--txt);
  background: radial-gradient(1200px 600px at 30% 15%, rgba(43,108,255,.22), transparent 55%),
              radial-gradient(900px 500px at 75% 30%, rgba(34,211,238,.14), transparent 55%),
              radial-gradient(1000px 700px at 60% 85%, rgba(124,58,237,.10), transparent 60%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-0));
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--space-5)}

/* Subtle grid */
.bg-grid::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity:.20;
  pointer-events:none;
  mask-image: radial-gradient(800px 500px at 50% 20%, black 40%, transparent 75%);
}

/* Top nav */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(5,9,19,.82), rgba(5,9,19,.55));
  border-bottom:1px solid rgba(39,58,110,.55);
}
.nav .row{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand .logo{
  width:36px; height:36px; border-radius:12px;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.9), rgba(43,108,255,.85) 55%, rgba(124,58,237,.75));
  box-shadow: var(--glow-blue);
}
.brand .name{font-weight:800; letter-spacing:.3px}
.brand .sub{font-size:12px; color:var(--muted-2)}

.navlinks{display:flex; align-items:center; gap:16px; color:var(--muted)}
.navlinks a{padding:8px 10px; border-radius:12px; border:1px solid transparent}
.navlinks a:hover{border-color:rgba(39,58,110,.8); background:rgba(11,22,54,.55)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius:14px;
  border:1px solid rgba(39,58,110,.85); background: rgba(11,22,54,.55);
  color:var(--txt); font-weight:650; cursor:pointer;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(43,108,255,.7); box-shadow: var(--glow-blue)}
.btn:active{transform: translateY(0)}

.btn-primary{border-color: rgba(43,108,255,.85); background: linear-gradient(135deg, rgba(43,108,255,.95), rgba(34,211,238,.50));}
.btn-primary:hover{box-shadow: var(--glow-blue), var(--glow-cyan)}

.btn-ghost{background: transparent; border-color: rgba(39,58,110,.55)}

.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:12px;
  border:1px solid rgba(39,58,110,.75); color:var(--muted);
  background: rgba(11,22,54,.45);
}
.badge.gold{border-color:rgba(245,158,11,.6); color:#ffe7b3; background: rgba(245,158,11,.08)}

/* Cards */
.card{border-radius:var(--radius); border:1px solid rgba(39,58,110,.55); background: var(--card);
  box-shadow: var(--shadow-soft);
}
.card .hd{padding:18px 18px 10px 18px; display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.card .bd{padding:0 18px 18px 18px}

/* Hero */
.hero{padding: 46px 0 22px 0}
.hero h1{font-size:var(--h1); margin:0 0 10px 0; letter-spacing:-.5px}
.hero p{margin:0; color:var(--muted); max-width:760px; line-height:1.65}

.kpis{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:18px}
.kpi{padding:14px; border-radius:var(--radius-sm); border:1px solid rgba(39,58,110,.55);
  background: linear-gradient(180deg, rgba(11,22,54,.55), rgba(11,22,54,.25));
}
.kpi .v{font-size:22px; font-weight:800}
.kpi .k{font-size:12px; color:var(--muted-2); margin-top:6px}

/* Tables */
.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:16px}
.table th,.table td{padding:12px 12px; border-bottom:1px solid rgba(39,58,110,.45); text-align:left; font-size:13px}
.table th{color:var(--muted); font-weight:700; background: rgba(8,16,42,.55)}
.table tr:hover td{background: rgba(11,22,54,.35)}

/* Inputs */
.input{
  width:100%; padding:10px 12px; border-radius:14px;
  border:1px solid rgba(39,58,110,.75);
  background: rgba(8,16,42,.55);
  color:var(--txt);
  outline:none;
}
.input:focus{border-color: rgba(43,108,255,.8); box-shadow: var(--glow-blue)}

/* Layout: admin */
.admin-shell{display:grid; grid-template-columns: 280px 1fr; min-height:calc(100vh - 64px)}
.sidebar{
  border-right:1px solid rgba(39,58,110,.55);
  background: linear-gradient(180deg, rgba(8,16,42,.72), rgba(5,9,19,.55));
  padding:18px 14px;
}
.side-title{font-size:12px; color:var(--muted-2); margin:12px 12px 8px}
.side a{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:14px;
  color:var(--muted);
  border:1px solid transparent;
}
.side a:hover{border-color: rgba(39,58,110,.75); background: rgba(11,22,54,.45); color:var(--txt)}
.side a.active{border-color: rgba(43,108,255,.85); background: rgba(43,108,255,.10); color:var(--txt)}

.main{padding: 18px 0 64px}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
}

@media (max-width: 980px){
  .kpis{grid-template-columns: repeat(2, 1fr)}
  .admin-shell{grid-template-columns: 1fr}
  .sidebar{position:sticky; top:64px; z-index:20}
}