:root {
  --color-primary: #00519E;
  --color-primary-700: #003e79;
  --color-primary-50: #e7f1fb;
  --color-accent: #00a7a2;
  --color-success: #118a57;
  --color-warning: #b36a00;
  --color-danger: #b3261e;
  --bg-page: #f3f7fb;
  --bg-surface: #ffffff;
  --bg-muted: #eef3f8;
  --border-soft: #d9e2ec;
  --text-main: #132233;
  --text-sub: #4d5f73;
  --shadow-card: 0 10px 30px rgba(8, 43, 75, 0.08);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: Manrope, sans-serif;
  background:
    radial-gradient(circle at 80% -20%, rgba(0,81,158,0.15), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(0,167,162,0.12), transparent 35%),
    var(--bg-page);
  color: var(--text-main);
  min-height: 100vh;
}

.app-shell { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.left-rail {
  background: linear-gradient(180deg, #07213a 0%, #0b2c4c 100%);
  color: #e7f3ff;
  padding: var(--space-6) var(--space-4);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.brand-block { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-6); }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; background: linear-gradient(140deg, #1f73c9, #00a7a2); color: white;
}
.brand-block h1 { font-size: 18px; font-family: "Space Grotesk", sans-serif; }
.brand-block p { font-size: 12px; color: #b9d5f0; }
.group-nav { display: grid; gap: var(--space-2); }
.group-btn {
  width: 100%; border: 1px solid transparent; background: rgba(255,255,255,0.04); color: #dceeff;
  text-align: left; border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; font-size: 13px;
}
.group-btn:hover { background: rgba(255,255,255,0.08); }
.group-btn.active { background: rgba(0,167,162,0.18); border-color: rgba(0,167,162,0.45); }

.workspace { padding: var(--space-6); }
.workspace-header {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-5);
}
.eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-sub); }
.workspace-header h2 { font-size: 27px; font-family: "Space Grotesk", sans-serif; margin-top: 2px; }
.header-actions { display: flex; gap: var(--space-2); }

.btn {
  border: 1px solid var(--border-soft); background: var(--bg-surface); color: var(--text-main);
  border-radius: 10px; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn:hover { background: var(--bg-muted); }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-700); }
.btn-ghost { background: transparent; }

.stage-layout { display: grid; grid-template-columns: 340px 1fr; gap: var(--space-5); min-height: calc(100vh - 180px); }
.screen-list-panel, .canvas-panel {
  background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.screen-list-panel { padding: var(--space-4); }
.canvas-panel { padding: var(--space-5); overflow: auto; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.panel-head h3 { font-size: 15px; }
.chip { font-size: 11px; border-radius: 999px; padding: 4px 10px; background: var(--color-primary-50); color: var(--color-primary); font-weight: 700; }

.screen-list { display: grid; gap: var(--space-2); max-height: calc(100vh - 280px); overflow: auto; padding-right: 4px; }
.screen-item {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  text-align: left; border-radius: 10px; border: 1px solid var(--border-soft); background: #fbfdff;
  padding: 10px 12px; cursor: pointer; font-size: 13px;
}
.screen-item:hover { background: var(--color-primary-50); border-color: #bdd6ef; }
.screen-item.active { border-color: var(--color-primary); background: #f0f7ff; }
.screen-item span { color: var(--text-sub); font-size: 11px; }

.screen-root { min-height: 100%; }
.screen-shell { display: grid; gap: var(--space-4); }
.screen-hero {
  background: linear-gradient(130deg, #f7fbff, #ecf5ff);
  border: 1px solid #cfe0f1;
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.screen-hero h3 { font-size: 20px; font-family: "Space Grotesk", sans-serif; margin-bottom: var(--space-2); }
.screen-hero p { color: var(--text-sub); font-size: 13px; line-height: 1.6; }

.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.card h4 { margin-bottom: var(--space-3); font-size: 14px; }
.metric { font-size: 28px; font-weight: 800; color: var(--color-primary); margin-bottom: var(--space-1); }
.muted { color: var(--text-sub); font-size: 12px; line-height: 1.5; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; font-size: 12px; padding: 10px 8px; border-bottom: 1px solid var(--border-soft); }
.data-table th { color: var(--text-sub); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-main); }
.field input, .field select, .field textarea {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text-main);
  background: #fff;
}
.field textarea { min-height: 96px; resize: vertical; }

.state-box {
  border: 1px dashed #9dc2e4;
  border-radius: var(--radius-md);
  padding: var(--space-7);
  text-align: center;
  background: #f8fbff;
}
.state-box i { color: var(--color-primary); width: 38px; height: 38px; margin-bottom: var(--space-2); }
.state-box h4 { font-size: 18px; margin-bottom: var(--space-2); }
.state-box p { color: var(--text-sub); margin-bottom: var(--space-4); }

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 92px 1fr; }
  .brand-block h1, .brand-block p { display: none; }
  .stage-layout { grid-template-columns: 300px 1fr; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .left-rail { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .stage-layout { grid-template-columns: 1fr; }
  .workspace { padding: var(--space-4); }
  .workspace-header { padding: var(--space-4); }
  .workspace-header h2 { font-size: 22px; }
  .card-grid, .form-grid { grid-template-columns: 1fr; }
}