:root {
    --xid-bg: #0e1117;
    --xid-panel: #151b24;
    --xid-panel-2: #1d2531;
    --xid-line: #2b3545;
    --xid-text: #eef3f8;
    --xid-muted: #99a7b7;
    --xid-primary: #22c55e;
    --xid-accent: #38bdf8;
    --xid-warn: #facc15;
    --xid-risk: #f87171;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--xid-bg);
    color: var(--xid-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: var(--xid-accent); }

.btn { border-radius: 6px; font-weight: 800; }
.btn-primary { background: var(--xid-primary); border-color: var(--xid-primary); color: #07120b; }
.btn-primary:hover { background: #16a34a; border-color: #16a34a; color: #07120b; }
.btn-outline-secondary { color: var(--xid-text); border-color: var(--xid-line); }
.btn-outline-secondary:hover { background: var(--xid-panel-2); border-color: var(--xid-accent); }

.form-control, .form-select {
    color: var(--xid-text);
    background: #0f141c;
    border-color: var(--xid-line);
    border-radius: 6px;
}

.form-control:focus, .form-select:focus {
    color: var(--xid-text);
    background: #111923;
    border-color: var(--xid-accent);
    box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .15);
}

.xid-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: .75rem 1rem;
    background: rgba(14, 17, 23, .96);
    border-bottom: 1px solid var(--xid-line);
}

.xid-brand {
    display: inline-flex;
    gap: .7rem;
    align-items: center;
    color: var(--xid-text);
    text-decoration: none;
}

.xid-brand span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--xid-primary);
    color: #07120b;
    font-weight: 1000;
}

.xid-brand strong { max-width: 190px; line-height: 1.1; }

.xid-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.xid-nav a, .xid-user a {
    padding: .45rem .62rem;
    color: var(--xid-muted);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 750;
}

.xid-nav a.active, .xid-nav a:hover, .xid-user a:hover {
    color: var(--xid-text);
    background: var(--xid-panel-2);
}

.xid-user {
    display: flex;
    gap: .5rem;
    align-items: center;
    color: var(--xid-muted);
}

.xid-shell {
    width: min(1500px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.5rem 0 3rem;
}

.xid-login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.login-card {
    width: min(900px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 2rem;
    align-items: center;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: var(--xid-panel);
    border: 1px solid var(--xid-line);
    border-radius: 8px;
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,.35);
}

.eyebrow {
    color: var(--xid-primary);
    font-size: .78rem;
    font-weight: 1000;
    text-transform: uppercase;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-head h1, .panel h2 { margin: 0; font-weight: 950; letter-spacing: 0; }
.panel h2 { padding: 1rem 1rem 0; font-size: 1.08rem; }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.metric {
    display: grid;
    align-content: space-between;
    min-height: 135px;
    padding: 1rem;
    color: var(--xid-text);
    text-decoration: none;
    background: var(--xid-panel);
    border: 1px solid var(--xid-line);
    border-left: 4px solid var(--xid-accent);
    border-radius: 8px;
}

.metric.ok { border-left-color: var(--xid-primary); }
.metric.neutral { border-left-color: var(--xid-warn); }
.metric.risk { border-left-color: var(--xid-risk); }
.metric span { color: var(--xid-muted); font-weight: 800; }
.metric strong { display: block; margin: .5rem 0; font-size: clamp(1.15rem, 2vw, 1.7rem); }
.metric small, td small { display: block; color: var(--xid-muted); }

.panel {
    background: var(--xid-panel);
    border: 1px solid var(--xid-line);
    border-radius: 8px;
    overflow: hidden;
}

.panel > p, .panel > form, .panel > .json-box { margin: 1rem; }
.panel-head-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1rem 0;
}
.panel-head-row h2 { padding: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.table { color: var(--xid-text); margin: 0; }
.table thead th { color: var(--xid-muted); background: var(--xid-panel-2); border-color: var(--xid-line); }
.table td, .table th { border-color: var(--xid-line); vertical-align: middle; }
.json-box {
    max-height: 520px;
    padding: 1rem;
    overflow: auto;
    color: #d7fbe8;
    background: #09100d;
    border: 1px solid #1b3428;
    border-radius: 8px;
}

.alert { border-radius: 8px; }

.chart-panel h2, .signal-panel h2 { padding-bottom: 0; }
.chart-wrap {
    height: 360px;
    padding: 1rem;
}

.signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem;
}

.signal-grid div, .pattern-box {
    padding: .85rem;
    background: #0f141c;
    border: 1px solid var(--xid-line);
    border-radius: 8px;
}

.signal-grid span {
    display: block;
    color: var(--xid-muted);
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.signal-grid strong {
    display: block;
    margin-top: .25rem;
    font-size: 1.05rem;
}

.signal-ok { color: var(--xid-primary); }
.signal-risk { color: var(--xid-risk); }
.signal-neutral { color: var(--xid-warn); }

.pattern-box {
    margin: 0 1rem 1rem;
}

.pattern-box p, .analysis-note { margin-bottom: 0; }
.analysis-note { padding: 0 1rem 1rem; }

.catamaran-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem;
}

.catamaran-grid div {
    padding: .85rem;
    background: #0f141c;
    border: 1px solid var(--xid-line);
    border-radius: 8px;
}

.catamaran-grid span {
    display: block;
    color: var(--xid-muted);
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.catamaran-grid strong {
    display: block;
    margin-top: .25rem;
    font-size: 1.08rem;
}

.headline-list {
    display: grid;
    gap: .75rem;
    padding: 1rem;
}

.headline-card {
    padding: 1rem;
    background: #0f141c;
    border: 1px solid var(--xid-line);
    border-radius: 8px;
}

.headline-card h3 {
    margin: .45rem 0;
    font-size: 1rem;
    line-height: 1.35;
}

.headline-original {
    display: block;
    margin: -.2rem 0 .55rem;
    color: var(--xid-muted);
}

.headline-card p {
    margin: 0 0 .65rem;
    color: var(--xid-muted);
}

.headline-meta, .headline-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.headline-meta span, .headline-badges span {
    color: var(--xid-muted);
    font-size: .78rem;
    font-weight: 800;
}

.headline-badges span {
    padding: .22rem .45rem;
    background: var(--xid-panel-2);
    border: 1px solid var(--xid-line);
    border-radius: 999px;
}

.headline-badges .sentiment-positiv { color: var(--xid-primary); }
.headline-badges .sentiment-riskant { color: var(--xid-risk); }
.headline-badges .sentiment-neutral { color: var(--xid-warn); }

@media (max-width: 1100px) {
    .xid-topbar, .login-card, .grid-2 { grid-template-columns: 1fr; }
    .xid-topbar { position: static; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catamaran-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .metric-grid { grid-template-columns: 1fr; }
    .catamaran-grid { grid-template-columns: 1fr; }
    .signal-grid { grid-template-columns: 1fr; }
    .page-head { display: grid; }
}