:root {
    --panel: rgba(15, 23, 42, 0.86);
    --panel-soft: rgba(15, 23, 42, 0.72);
    --panel-elevated: rgba(20, 29, 49, 0.92);
    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.18);
    --text: #f8fafc;
    --muted: #cbd5e1;
    --primary: #60a5fa;
    --primary-2: #2563eb;
    --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.24);
    --shadow-panel: 0 14px 34px rgba(0, 0, 0, 0.28);
    --radius-xl: 24px;
    --max-width: 1480px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { scroll-behavior: auto; }
body {
    margin: 0;
    color: var(--text);
    font-family: Inter, "SF Pro Text", "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at 12% 14%, rgba(96,165,250,0.12), transparent 24%),
        radial-gradient(circle at 88% 18%, rgba(168,85,247,0.10), transparent 18%),
        linear-gradient(180deg, #030712 0%, #07111f 44%, #020617 100%);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent 22%);
}

a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }
code {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.06);
    color: var(--text);
}

.desktop-stage {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 80px 24px 130px;
}
.auth-body {
    display: grid;
    place-items: center;
    padding: 32px;
}

.auth-panel,
.window-card,
.desktop-icon-card,
.hero-glass,
.panel,
.stat-pill,
.list-card-static,
.alert {
    border: 1px solid var(--line);
    box-shadow: var(--shadow-panel);
}

.auth-panel,
.window-card,
.hero-glass {
    border-radius: var(--radius-xl);
    background: var(--panel);
}
.auth-panel { width: min(560px, 100%); overflow: hidden; }
.window-card { overflow: hidden; }
.panel,
.desktop-icon-card,
.stat-pill,
.list-card-static {
    border-radius: 20px;
    background: var(--panel-soft);
}
.alert {
    border-radius: 18px;
    background: var(--panel-elevated);
}

.window-header,
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,0.03);
}
.window-title {
    font-size: 14px;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.window-body,
.auth-content {
    padding: 24px;
}
.window-body { display: grid; gap: 24px; }
.auth-icon { font-size: 54px; margin-bottom: 14px; }

h1, h2, h3, p { margin-top: 0; }
h1 {
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 10px;
}
h2 {
    font-size: 22px;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}
h3 { font-size: 17px; }

.subtext,
.list-meta,
.timeline-meta,
.window-title,
.eyebrow,
.menu-user,
.menu-clock { color: var(--muted); }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    margin-bottom: 8px;
}
.hero-glass {
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}
.hero-glass.compact { padding: 22px; }
.stats-strip { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-pill {
    padding: 16px 18px;
    min-width: 120px;
    display: grid;
    gap: 4px;
}
.stat-pill strong { font-size: 28px; }
.stat-pill span { font-size: 13px; color: var(--muted); }

.desktop-icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 18px;
    margin-top: 24px;
}
.desktop-icon-card {
    padding: 22px;
    min-height: 180px;
    display: grid;
    align-content: start;
    gap: 10px;
    transition: border-color .16s ease, background .16s ease;
}
.desktop-icon-card:hover {
    border-color: rgba(96, 165, 250, 0.42);
    background: rgba(23, 34, 57, 0.94);
}
.desktop-icon-emoji { font-size: 42px; }
.desktop-icon-title { font-weight: 700; font-size: 18px; }
.desktop-icon-text { color: var(--muted); line-height: 1.55; }

.window-grid { display: grid; gap: 24px; margin-top: 24px; }
.window-grid.two-col,
.content-grid.two-col,
.user-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-grid,
.user-grid { display: grid; gap: 20px; }
.user-grid.single-col { grid-template-columns: 1fr; }

.panel {
    padding: 22px;
}
.nested-panel {
    background: rgba(255,255,255,0.03);
}
.form-grid { display: grid; gap: 14px; }
label { display: grid; gap: 8px; }
label > span { color: var(--muted); font-size: 14px; }

input,
textarea,
select,
button { font: inherit; }
input,
textarea,
select {
    width: 100%;
    color: var(--text);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 13px 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { resize: vertical; min-height: 120px; }
input:focus,
textarea:focus,
select:focus {
    border-color: rgba(96,165,250,0.68);
    box-shadow: 0 0 0 3px rgba(96,165,250,0.14);
    background: rgba(255,255,255,0.075);
}
select option { color: #111827; }

.primary-btn,
.secondary-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter .15s ease, border-color .15s ease, background .15s ease;
    white-space: nowrap;
}
.primary-btn:hover,
.secondary-btn:hover {
    filter: brightness(1.04);
}
.primary-btn {
    background: linear-gradient(180deg, var(--primary), var(--primary-2));
    color: white;
}
.secondary-btn {
    background: rgba(255,255,255,0.07);
    color: var(--text);
    border-color: var(--line);
}
.primary-btn.small,
.secondary-btn.small {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 14px;
}

.alert {
    padding: 14px 16px;
    margin-bottom: 16px;
}
.alert.error { border: 1px solid rgba(239,68,68,0.4); }
.alert.success { border: 1px solid rgba(34,197,94,0.45); }

.auth-footer,
.split-header,
.search-row,
.row-actions,
.status-row,
.status-toolbar,
.two-field-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.auth-footer,
.split-header { justify-content: space-between; }
.auth-footer.single { justify-content: flex-start; }
.search-row input { flex: 1 1 260px; }
.search-row select { min-width: 180px; }
.search-row-multi > * { flex: 1 1 auto; }

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--line);
}
.inline-check input { width: auto; margin: 0; }
.block-check { justify-content: flex-start; }

.permissions-grid,
.list-grid,
.timeline { display: grid; gap: 12px; }

.list-card-link,
.list-card-static {
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.04);
    border-radius: 18px;
    padding: 16px;
    transition: background .15s ease, border-color .15s ease;
}
.list-card-link:hover {
    background: rgba(255,255,255,0.065);
    border-color: rgba(96,165,250,0.38);
}
.list-title {
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 6px;
}

.status-badge,
.priority-badge,
.chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.055);
    font-size: 13px;
}
.status-neu { background: rgba(59,130,246,0.16); }
.status-offen { background: rgba(14,165,233,0.16); }
.status-in_bearbeitung { background: rgba(245,158,11,0.18); }
.status-wartet { background: rgba(168,85,247,0.18); }
.status-abgeschlossen { background: rgba(34,197,94,0.18); }
.status-archiviert { background: rgba(148,163,184,0.18); }

.priority-niedrig { background: rgba(148,163,184,0.18); }
.priority-mittel { background: rgba(96,165,250,0.18); }
.priority-hoch { background: rgba(245,158,11,0.18); }
.priority-kritisch { background: rgba(239,68,68,0.18); }

.timeline-item {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 12px;
    align-items: start;
}
.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    margin-top: 6px;
    background: linear-gradient(180deg, var(--primary), #38bdf8);
    box-shadow: 0 0 0 3px rgba(96,165,250,0.14);
}
.timeline-title { font-weight: 600; line-height: 1.5; }
.section-gap { margin-top: 18px; }
.empty-state {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed var(--line-strong);
    color: var(--muted);
    line-height: 1.6;
}

.menu-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: rgba(2, 6, 23, 0.92);
    border-bottom: 1px solid var(--line);
}
.menu-left,
.menu-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.apple-dot { font-size: 18px; opacity: 0.95; }
.menu-brand { font-weight: 700; margin-right: 6px; }
.menu-link {
    padding: 9px 12px;
    border-radius: 12px;
    color: var(--muted);
    transition: background .15s ease, color .15s ease;
}
.menu-link:hover,
.menu-link.active {
    background: rgba(255,255,255,0.07);
    color: var(--text);
}

.dock {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 24px;
    background: rgba(15,23,42,0.92);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}
.dock-item {
    width: 72px;
    min-height: 62px;
    display: grid;
    place-items: center;
    gap: 4px;
    border-radius: 18px;
    transition: background .15s ease;
    font-size: 27px;
}
.dock-item:hover {
    background: rgba(255,255,255,0.08);
}
.dock-item span { font-size: 11px; color: var(--muted); }

.traffic { display: flex; gap: 8px; }
.traffic span {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    display: inline-block;
}
.traffic .red { background: #ff5f57; }
.traffic .yellow { background: #febc2e; }
.traffic .green { background: #28c840; }
.narrow { max-width: 760px; }

.danger-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(239,68,68,0.34);
    cursor: pointer;
    white-space: nowrap;
    background: rgba(239,68,68,0.14);
    color: #fecaca;
    transition: filter .15s ease;
}
.danger-btn:hover {
    filter: brightness(1.04);
}
.danger-btn.small { padding: 9px 12px; border-radius: 12px; font-size: 14px; }

.copy-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}
.contract-box {
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.04);
}
.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.status-card {
    border-left-width: 5px;
}
.status-card-neu { border-left-color: rgba(59,130,246,0.95); }
.status-card-offen { border-left-color: rgba(14,165,233,0.95); }
.status-card-in_bearbeitung { border-left-color: rgba(245,158,11,0.95); }
.status-card-wartet { border-left-color: rgba(168,85,247,0.95); }
.status-card-abgeschlossen { border-left-color: rgba(34,197,94,0.95); }
.status-card-archiviert { border-left-color: rgba(148,163,184,0.95); }

.compact-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}
.category-shortcuts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 1080px) {
    .window-grid.two-col,
    .content-grid.two-col,
    .user-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .desktop-stage { padding: 72px 16px 124px; }
    .dock {
        width: calc(100% - 24px);
        overflow-x: auto;
        justify-content: flex-start;
    }
    .menu-bar { padding: 10px 12px; }
    .menu-left,
    .menu-right { gap: 6px; }
    .menu-link { padding: 8px 10px; font-size: 14px; }
    .hero-glass,
    .window-body,
    .auth-content { padding: 18px; }
    .desktop-icons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}