:root {
  --bg: #08111b;
  --panel: #0d1a27;
  --panel-2: #102235;
  --panel-3: #142b40;
  --text: #eef5fb;
  --muted: #9fb1c2;
  --line: #234057;
  --accent: #3b8cff;
  --accent-2: #65a9ff;
  --success: #36c979;
  --warning: #f4b942;
  --danger: #f06565;
  --shadow: 0 20px 50px rgba(0,0,0,.28);
  --radius: 18px;
  --font-scale: 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(circle at 85% -10%, rgba(49,119,190,.15), transparent 35%), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: calc(16px * var(--font-scale));
  line-height: 1.55;
}
body.light {
  --bg: #f3f7fb;
  --panel: #fff;
  --panel-2: #f8fbff;
  --panel-3: #eef5fc;
  --text: #162535;
  --muted: #5e7182;
  --line: #d5e2ec;
  --shadow: 0 18px 40px rgba(25,55,80,.12);
  background: linear-gradient(#edf4fb, #f7fbff);
}
body.high-contrast {
  --bg: #000;
  --panel: #050505;
  --panel-2: #0a0a0a;
  --panel-3: #101010;
  --text: #fff;
  --muted: #fff;
  --line: #fff;
  --accent: #00e5ff;
  --accent-2: #00e5ff;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #7ec3ff;
  outline-offset: 3px;
}
.skip-link {
  position: fixed; left: 10px; top: -60px; z-index: 999;
  background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px;
}
.skip-link:focus { top: 10px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
  padding: 15px 28px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(18px);
}
.brand { display:flex; gap:12px; align-items:center; cursor:pointer; min-width: 220px; }
.emblem {
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px;
  display:grid; place-items:center; color: var(--accent-2); background: var(--panel);
}
.brand-kicker { font-size: .72rem; color: var(--muted); }
.brand-name { font-weight: 800; letter-spacing: -.02em; }
.brand-name span { color: var(--accent-2); }
.main-nav { display:flex; justify-content:center; gap: 8px; }
.main-nav button, .site-footer button {
  background: transparent; border: 0; color: var(--muted); padding: 8px 10px; border-radius: 8px;
}
.main-nav button:hover, .site-footer button:hover { color: var(--text); background: var(--panel); }
.header-tools { display:flex; align-items:center; gap:6px; }
.icon-btn {
  min-width: 34px; height:34px; padding:0 8px; border:1px solid var(--line); border-radius:9px;
  background: var(--panel); color:var(--text);
}
.header-tools select {
  border:1px solid var(--line); background:var(--panel); color:var(--text);
  border-radius:9px; padding:7px 9px; margin-left: 6px;
}

.announcement {
  padding: 9px 28px; background: var(--panel-2); border-bottom:1px solid var(--line);
  display:flex; gap:8px; align-items:center; font-size:.88rem; color:var(--muted);
}
.announcement .text-btn { margin-left:auto; }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:var(--warning); box-shadow:0 0 0 5px rgba(244,185,66,.1); }

#app { max-width: 1240px; margin: 0 auto; padding: 32px 22px 70px; min-height: 70vh; }

.page-head { display:flex; justify-content:space-between; gap:30px; align-items:flex-end; margin-bottom: 24px; }
.eyebrow { color: var(--accent-2); text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; font-weight:800; }
h1,h2,h3,h4 { margin:0 0 10px; line-height:1.15; letter-spacing:-.03em; }
h1 { font-size: clamp(2rem, 4vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.1rem; }
p { color: var(--muted); margin-top: 0; }

.hero {
  display:grid; grid-template-columns: 1.25fr .75fr; gap: 26px; align-items:stretch;
  padding: 28px; border:1px solid var(--line); border-radius: 26px; background: linear-gradient(135deg, var(--panel), var(--panel-2));
  box-shadow: var(--shadow);
}
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding: 10px; }
.hero-copy p { max-width: 720px; font-size:1.05rem; }
.hero-search {
  display:flex; gap:10px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--bg); margin-top:18px;
}
.hero-search input { flex:1; border:0; background:transparent; color:var(--text); padding:10px; outline:0; }

.card-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
.card-grid.three { grid-template-columns:repeat(3,1fr); }
.action-card, .card, .info-card {
  background: var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:19px; box-shadow: var(--shadow);
}
.action-card { min-height: 170px; display:flex; flex-direction:column; }
.action-card:hover { transform:translateY(-2px); border-color: #3b6590; transition:.16s ease; }
.action-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--panel-3); margin-bottom:14px; color:var(--accent-2); font-size:1.2rem; }
.action-card h3 { margin-bottom:5px; }
.action-card p { font-size:.88rem; }
.card-action { margin-top:auto; color:var(--accent-2); font-weight:700; background:transparent; border:0; text-align:left; padding:0; }

.section { margin-top: 34px; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:14px; }

.notice {
  display:flex; gap:12px; align-items:flex-start; padding:15px 16px; border:1px solid var(--line); background:var(--panel-2); border-radius:14px; margin: 16px 0;
}
.notice.success { border-color: rgba(54,201,121,.35); }
.notice.warning { border-color: rgba(244,185,66,.4); }
.notice.danger { border-color: rgba(240,101,101,.4); }
.notice strong { color:var(--text); }

.btn-row { display:flex; gap:10px; flex-wrap:wrap; }
.btn {
  border:1px solid var(--line); color:var(--text); background:var(--panel); padding:11px 15px; border-radius:11px; font-weight:700;
}
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { filter:brightness(1.08); }
.btn.secondary { background:var(--panel-3); }
.btn.ghost { background:transparent; }
.btn.success { background:var(--success); border-color:var(--success); color:#062213; }
.text-btn { border:0; background:transparent; color:var(--accent-2); font-weight:700; padding:0; }
.small { font-size:.84rem; }

.searchbar {
  display:grid; grid-template-columns:1fr auto; gap:10px; padding:12px; border:1px solid var(--line); border-radius:15px; background:var(--panel);
}
.searchbar input { border:0; background:transparent; color:var(--text); outline:none; padding:8px; }

.form-shell { max-width: 960px; margin: 0 auto; }
.stepper { display:flex; overflow:auto; padding: 4px 0 22px; gap: 4px; }
.step { min-width:120px; flex:1; position:relative; text-align:center; }
.step::after { content:""; position:absolute; top:16px; left:50%; width:100%; height:1px; background:var(--line); z-index:0; }
.step:last-child::after { display:none; }
.step-dot { position:relative; z-index:1; margin:0 auto 7px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; background:var(--panel); color:var(--muted); font-weight:800; }
.step.active .step-dot { background:var(--accent); border-color:var(--accent); color:#fff; }
.step.done .step-dot { background:var(--success); border-color:var(--success); color:#062213; }
.step-label { font-size:.76rem; color:var(--muted); }
.step.active .step-label, .step.done .step-label { color:var(--text); }

.form-card { background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:var(--shadow); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field.full { grid-column: 1 / -1; }
label { font-weight:800; font-size:.9rem; }
label .optional { color:var(--muted); font-weight:500; }
input, select, textarea {
  width:100%; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); color:var(--text); padding:12px 13px;
}
textarea { min-height: 180px; resize:vertical; }
.helper { color:var(--muted); font-size:.78rem; }
.field-error { color:var(--danger); font-size:.8rem; }
.charcount { text-align:right; color:var(--muted); font-size:.75rem; }
.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.choice {
  display:block; border:1px solid var(--line); border-radius:14px; padding:16px; background:var(--panel-2);
  cursor:pointer;
}
.choice input { width:auto; margin-right:8px; }
.choice.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }

.file-drop {
  border:1.5px dashed #3c6180; background:var(--panel-2); min-height:190px; display:grid; place-items:center; text-align:center; border-radius:17px;
}
.file-list { margin-top:12px; display:grid; gap:8px; }
.file-row { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); }

.review-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kv { border:1px solid var(--line); border-radius:13px; padding:14px; background:var(--panel-2); }
.kv dt { font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.kv dd { margin:4px 0 0; }

.dashboard-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat { padding:18px; border:1px solid var(--line); background:var(--panel); border-radius:16px; }
.stat-value { font-size:2rem; font-weight:850; line-height:1; }
.stat-label { color:var(--muted); font-size:.82rem; margin-top:8px; }

.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:18px; margin-top:14px; }
table { width:100%; border-collapse:collapse; min-width:800px; }
th, td { padding:13px 15px; border-bottom:1px solid var(--line); text-align:left; }
th { background:var(--panel-2); color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; }
td { color:var(--text); }
.badge { display:inline-flex; align-items:center; gap:7px; padding:5px 9px; border-radius:999px; border:1px solid var(--line); font-size:.76rem; }
.badge.success { color:#9cf0c0; border-color:rgba(54,201,121,.4); }
.badge.warning { color:#ffe09c; border-color:rgba(244,185,66,.4); }
.badge.info { color:#a8d4ff; border-color:rgba(59,140,255,.4); }

.timeline { position:relative; margin:22px 0 0 13px; padding-left:28px; }
.timeline::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line); }
.t-event { position:relative; padding:0 0 26px; }
.t-event::before { content:""; position:absolute; left:-34px; top:4px; width:12px; height:12px; border-radius:50%; border:3px solid var(--bg); background:var(--muted); box-shadow:0 0 0 1px var(--line); }
.t-event.done::before { background:var(--success); }
.t-event.current::before { background:var(--accent); }
.t-date { color:var(--muted); font-size:.76rem; }
.t-title { font-weight:800; margin-top:2px; }
.t-copy { color:var(--muted); }

.state-card { max-width:700px; margin:0 auto; text-align:center; padding:38px; border:1px solid var(--line); border-radius:24px; background:var(--panel); box-shadow:var(--shadow); }
.success-icon { width:72px; height:72px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center; background:rgba(54,201,121,.15); color:var(--success); font-size:2rem; }

.footer-spacer { height:10px; }

.site-footer { border-top:1px solid var(--line); background:var(--panel); }
.footer-main { max-width:1240px; margin:0 auto; padding:32px 22px; display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap:30px; }
.footer-main h4 { font-size:.9rem; }
.footer-main button { display:block; text-align:left; width:100%; padding:4px 0; }
.footer-bottom { border-top:1px solid var(--line); max-width:1240px; margin:0 auto; padding:14px 22px; display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:.78rem; }

.toast { position:fixed; right:20px; bottom:20px; z-index:100; max-width:360px; padding:12px 15px; background:var(--text); color:var(--bg); border-radius:12px; box-shadow:var(--shadow); transform:translateY(20px); opacity:0; pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translateY(0); }

@media (max-width: 1050px) {
  .site-header { grid-template-columns:1fr auto; }
  .main-nav { grid-column:1/-1; grid-row:2; overflow:auto; justify-content:flex-start; }
  .header-tools { justify-content:flex-end; }
  .hero { grid-template-columns:1fr; }
  .card-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-stats { grid-template-columns:repeat(2,1fr); }
  .footer-main { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
  .site-header { padding:12px 14px; }
  .announcement { padding:8px 14px; }
  #app { padding:22px 14px 50px; }
  .brand { min-width:0; }
  .brand-name { font-size:.92rem; }
  .header-tools .icon-btn:nth-child(3), .header-tools .icon-btn:nth-child(4) { display:none; }
  .card-grid, .card-grid.three, .dashboard-stats, .choice-grid, .field-grid, .review-grid { grid-template-columns:1fr; }
  .hero { padding:18px; border-radius:20px; }
  .page-head { align-items:flex-start; flex-direction:column; }
  .footer-main { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
}