/* CzechAI Design System - Auto-generated CSS */
:root {
  --bg-body: #000000;
  --bg-card: #1a1a1a;
  --bg-header: #0d0d0d;
  --bg-input: #2f2f2f;
  --bg-hover: #252525;
  --text-primary: #ffffff;
  --text-secondary: #ececf1;
  --text-tertiary: #8e8ea0;
  --text-disabled: #4d4d4f;
  --accent: #ff3c14;
  --accent-dark: #cc2200;
  --accent-hover: #ff5533;
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  --border: #2f2f2f;
  --border-strong: #4d4d4f;
  --border-subtle: #1f1f1f;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Monaco, "Courier New", monospace;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg-body); color: var(--text-secondary); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; }
h1, h2, h3 { color: var(--text-primary); }
h1 { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h2 { font-size: 24px; font-weight: 600; line-height: 1.3; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.4; }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; transition: border-color 0.15s ease; }
.card:hover { border-color: var(--border-strong); }
.btn-primary { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-md); padding: 12px 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-dark); }
.btn-secondary { background: transparent; color: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 12px 24px; font-size: 14px; font-weight: 500; cursor: pointer; }
.btn-secondary:hover { background: rgba(255,255,255,0.05); border-color: var(--text-tertiary); }
.btn-ghost { background: transparent; color: var(--text-tertiary); border: none; padding: 8px 16px; font-size: 14px; cursor: pointer; }
.btn-ghost:hover { color: var(--text-primary); }
input, textarea, select { background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 12px 16px; color: var(--text-primary); font-size: 14px; font-family: var(--font-sans); transition: border-color 0.15s ease; }
input:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(255,60,20,0.15); }
input::placeholder { color: var(--text-tertiary); }
table { width: 100%; border-collapse: collapse; }
th { background: var(--bg-header); color: var(--text-tertiary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
td { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
tr:hover td { background: var(--bg-hover); }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; font-family: var(--font-mono); }
.badge-red { background: rgba(239,68,68,0.15); color: #ef4444; }
.badge-green { background: rgba(34,197,94,0.15); color: #22c55e; }
.badge-amber { background: rgba(245,158,11,0.15); color: #f59e0b; }
.badge-gray { background: rgba(142,142,160,0.15); color: #8e8ea0; }
.metric-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; text-align: center; }
.metric-card .value { font-family: var(--font-mono); font-size: 32px; font-weight: 700; color: var(--text-primary); }
.metric-card .label { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 8px; }
nav { background: var(--bg-header); border-bottom: 1px solid var(--border); padding: 0 24px; height: 56px; display: flex; align-items: center; }
nav a { color: var(--text-tertiary); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 16px; transition: color 0.15s ease; }
nav a:hover { color: var(--text-primary); }
nav a.active { color: var(--accent); }
.mono { font-family: var(--font-mono); }