/* WS58 Shared Design System v2 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #06101e;
  --bg-soft: #0b1829;
  --panel: rgba(14, 26, 45, .92);
  --panel-solid: #0e1a2d;
  --glass: rgba(16, 30, 52, .75);
  --line: rgba(255,255,255,.07);
  --line-h: rgba(93,212,255,.22);
  --text: #eaf2ff;
  --muted: #8aa2c0;
  --brand: #5dd4ff;
  --brand-g: linear-gradient(135deg, #5dd4ff, #7c8cff);
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 8px 32px rgba(0,0,0,.28);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(93,212,255,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(124,140,255,.06) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

label {
  display: block; margin-bottom: 5px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}

input, select {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: #0a1424; border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: 15px; font-family: var(--font); outline: none; transition: .2s;
}
input:focus, select:focus {
  border-color: rgba(93,212,255,.5);
  box-shadow: 0 0 0 3px rgba(93,212,255,.10);
}
input::placeholder { color: var(--muted); opacity: .7; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-sm); border: none;
  font-weight: 700; font-size: 14px; font-family: var(--font);
  cursor: pointer; transition: .22s ease; white-space: nowrap;
}
.btn-primary {
  background: var(--brand-g); color: #03263a;
  box-shadow: 0 4px 20px rgba(93,212,255,.18);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-ghost {
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  color: #d0e4ff;
}
.btn-ghost:hover { border-color: var(--line-h); background: rgba(93,212,255,.06); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.hint { color: var(--muted); font-size: 13px; }
.code { font-family: 'Consolas', 'Monaco', monospace; font-weight: 700; }
.sep { height: 1px; background: var(--line); margin: 14px 0; }
.yellow-box {
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.22);
  color: #fde68a; font-size: 13px; line-height: 1.5;
}

@media (max-width: 480px) {
  .panel { padding: 18px; border-radius: 16px; }
}