:root {
  /* Application background */
  --bg: #F5F5F7;
  --panel: #FFFFFF;
  --panel-2: #F8F9FA;

  /* Text — near-black matches the logo's own text color */
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --muted-2: #98989D;

  /* Brand / navigation — derived from logo blue #0F76B8 */
  --navy: #0B4A73;
  --slate: #123C57;
  --sidebar-hover: #1A5A80;

  /* Primary accent — exact logo blue */
  --accent: #0F76B8;
  --accent-2: #0C5F94;
  --accent-bg: #E6F1FB;

  /* Status colors — each pairing is a solid saturated tone with white text,
     used for anything conveying urgency/status (KPI tiles, alert badges) —
     never a light tint with a similarly-light foreground color. */
  --success: #248A3D;
  --success-solid: linear-gradient(135deg, #34C759, #248A3D);
  --success-bg: #EAF7EE;
  --warning: #C77700;
  --warning-solid: linear-gradient(135deg, #FF9F0A, #C77700);
  --warning-bg: #FFF4E0;
  --danger: #D70015;
  --danger-solid: linear-gradient(135deg, #FF3B30, #D70015);
  --danger-bg: #FDEBEA;
  --info: #0A6FBF;
  --info-solid: linear-gradient(135deg, #0A84FF, #0A6FBF);
  --info-bg: #E8F2FC;

  /* Borders */
  --line: #E3E3E6;
  --line-light: #EDEDEF;

  --mono: 'SF Mono', Consolas, monospace;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
}


* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
.app { max-width: 1100px; margin: 24px auto; background: var(--bg); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--panel); border-bottom: 1px solid var(--line); }
.title { font-weight: 700; font-size: 15px; }
.subtitle { font-size: 11.5px; color: var(--muted); }
.save-indicator { font-size: 11px; color: var(--muted); }
.tabs { display: flex; gap: 2px; padding: 0 12px; background: var(--panel); border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0; overflow-x: auto; }
.tab-btn { padding: 10px 12px; font-size: 12.5px; font-weight: 500; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tab-btn.active { color: var(--ink); border-bottom: 2px solid var(--accent); font-weight: 600; background: var(--accent-bg); }
main { padding: 18px; background: var(--panel); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
input, select { flex: 1; min-width: 90px; padding: 10px 12px; font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--ink); font-family: inherit; min-height: 40px; transition: border-color 0.15s, box-shadow 0.15s; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); background: var(--panel); }
.primary-btn { padding: 10px 18px; font-size: 13px; font-weight: 600; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; min-height: 40px; box-shadow: 0 2px 8px rgba(15,118,184,0.28); transition: transform 0.1s, box-shadow 0.15s; }
.primary-btn:hover { box-shadow: 0 3px 12px rgba(15,118,184,0.36); }
.primary-btn:active { transform: scale(0.98); }
.icon-btn { background: transparent; border: none; cursor: pointer; color: var(--muted); font-size: 13px; }
.table-wrap { background: var(--panel); border-radius: var(--radius-md); overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; padding: 12px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); }
td { padding: 13px 16px; border-bottom: 1px solid var(--line-light); }
tr:last-child td { border-bottom: none; }
.mono { font-family: var(--mono); }
.empty-row { padding: 20px; text-align: center; color: var(--muted); font-size: 12.5px; }
.help-text { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; max-width: 640px; }
.field-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; display: block; font-weight: 600; }
.badge { font-size: 10.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.tree-wrap { background: var(--panel); border-radius: var(--radius-md); padding: 8px 4px; box-shadow: var(--shadow-sm); }
.tree-row { display: flex; align-items: center; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--line-light); }
.tree-row .right { margin-left: auto; font-family: var(--mono); font-size: 12.5px; }
.ok-banner { padding: 16px; text-align: center; color: #1E6B36; background: var(--success-bg); font-size: 13px; border-radius: var(--radius-md); }