body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #020617;
    background-image:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 30%),
        linear-gradient(180deg, #020617 0%, #07101f 100%), url('fib.png');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:
        top right,
        center,
        center;
    background-size: auto, auto, 600px;
    background-attachment: scroll, scroll, fixed;
    color: white;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.92);
    z-index: -1;
}

/* =========================
   LOGIN SCREEN
========================= */

.login-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(2, 6, 23, 0.98)),
        url('/fib.png') center center / 480px no-repeat;
}

.login-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.45);
    pointer-events: none;
}

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.96));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.login-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: #0f172a;
    border: 1px solid #1e293b;
    color: #93c5fd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
}

.login-top h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.1;
}

.login-subtitle {
    margin-top: 12px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

.login-form {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-form label {
    font-size: 13px;
    color: #cbd5e1;
    font-weight: 600;
}

.login-form input {
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: #0b1220;
    color: white;
    font-size: 14px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.login-form input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.login-form button {
    margin-top: 8px;
    padding: 13px 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.25);
}

.login-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.35);
}

.login-info {
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}

.login-status-message {
    display: none;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.5;
}

.login-status-message.visible {
    display: block;
}

.login-status-message.error {
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(69, 10, 10, 0.42);
    color: #fee2e2;
}

.login-status-message.info {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(15, 23, 42, 0.88);
    color: #dbeafe;
}

.password-change-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(2, 6, 23, 0.98));
}

.password-change-screen.visible {
    display: flex;
}

.password-change-card {
    width: 100%;
    max-width: 460px;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.96));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.password-change-card h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
}

.password-change-subtitle {
    margin-top: 12px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

.password-change-form {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.password-change-form label {
    font-size: 13px;
    color: #cbd5e1;
    font-weight: 600;
}

.password-change-form input {
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: #0b1220;
    color: white;
    font-size: 14px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.password-change-form input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.password-change-form button {
    margin-top: 8px;
    padding: 13px 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.25);
}

.password-change-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.35);
}

.password-change-status-message {
    display: none;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.5;
}

.password-change-status-message.visible {
    display: block;
}

.password-change-status-message.error {
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(69, 10, 10, 0.42);
    color: #fee2e2;
}

.password-change-status-message.info {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(15, 23, 42, 0.88);
    color: #dbeafe;
}

/* =========================
   FIB TOP BAR / NAV
========================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    background: rgba(2, 6, 23, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(51, 65, 85, 0.78);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.4px;
    color: #f8fafc;
    margin-right: 30px;
    white-space: nowrap;
}

.logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(1.2) contrast(1.1);
    opacity: 0.9;
}

.nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.nav button {
    background: transparent;
    border: 1px solid rgba(30, 41, 59, 0);
    color: #cbd5f5;
    padding: 9px 13px;
    cursor: pointer;
    border-radius: 10px;
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
    font-size: 13px;
    font-weight: 600;
}

.nav button:hover {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(51, 65, 85, 0.88);
    color: white;
    box-shadow:
        inset 0 1px 0 rgba(148, 163, 184, 0.05),
        0 8px 18px rgba(2, 6, 23, 0.22);
    transform: translateY(-1px);
}

.nav button.active {
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    border-color: rgba(96, 165, 250, 0.85);
    color: white;
    box-shadow:
        0 10px 22px rgba(37, 99, 235, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-notification-badge {
    display: none;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.95);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    box-shadow:
        0 0 0 1px rgba(254, 202, 202, 0.24),
        0 8px 18px rgba(127, 29, 29, 0.28);
}

.nav-notification-badge.visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.right {
    margin-left: auto;
    text-align: right;
    font-size: 12px;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 180px;
}

#time {
    color: #93c5fd;
    font-weight: 600;
}

.right div:last-child {
    color: #f8fafc;
    font-weight: 600;
}

/* =========================
   FIB DASHBOARD DESIGN
========================= */

.dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    padding: 20px;
    align-items: stretch;
    border: 1px solid rgba(51, 65, 85, 0.78);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96)),
        url('/fib.png') center center / 420px no-repeat;
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

.dashboard-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%);
    pointer-events: none;
}

.dashboard-hero-left,
.dashboard-hero-right {
    position: relative;
    z-index: 1;
}

.dashboard-hero-left {
    padding-right: 12px;
}

.dashboard-hero-right {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.hero-panel-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.hero-logo-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    opacity: 0.18;
    filter: brightness(1.15) contrast(1.05);
}

.hero-user {
    margin-left: auto;
    max-width: 320px;
    width: 100%;
}

.dashboard-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(59, 130, 246, 0.18);
    color: #93c5fd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dashboard-hero h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
}

.dashboard-subtitle {
    margin-top: 12px;
    max-width: 560px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

.dashboard-status-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.status-pill {
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(51, 65, 85, 0.75);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.status-pill.online {
    color: #86efac;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 0 0 1px rgba(34, 197, 94, 0.08);
}

.status-pill.secure {
    color: #93c5fd;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 0 0 1px rgba(59, 130, 246, 0.08);
}

.status-pill.internal {
    color: #fcd34d;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 0 0 1px rgba(245, 158, 11, 0.08);
}

#logs .logs-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#logs .logs-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(51, 65, 85, 0.78);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.97));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

#logs .logs-header h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#logs .logs-header p {
    margin: 8px 0 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#logs .logs-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#logs .logs-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.82);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
    color: #f8fafc;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#logs .logs-actions button:hover {
    border-color: rgba(100, 116, 139, 0.92);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.96));
    transform: translateY(-1px);
}

#logs .logs-panel {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.97));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

#logs .logs-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

#logs .logs-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#logs .logs-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

#logs .logs-field input,
#logs .logs-field select {
    width: 100%;
    padding: 12px 13px;
    border-radius: 13px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.62);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#logs .logs-field input::placeholder {
    color: #94a3b8;
}

#logs .logs-field input:focus,
#logs .logs-field select:focus {
    border-color: rgba(96, 165, 250, 0.44);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

#logs .logs-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.48);
}

#logs .logs-head,
#logs .logs-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.85fr) minmax(130px, 0.75fr) minmax(140px, 0.8fr) minmax(
            150px,
            0.85fr
        ) minmax(160px, 0.9fr) minmax(240px, 1.6fr);
}

#logs .logs-head {
    background: rgba(15, 23, 42, 0.96);
    border-bottom: 1px solid rgba(51, 65, 85, 0.68);
}

#logs .logs-row + .logs-row {
    border-top: 1px solid rgba(51, 65, 85, 0.42);
}

#logs .logs-cell {
    padding: 13px 14px;
    min-width: 0;
    border-right: 1px solid rgba(51, 65, 85, 0.38);
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#logs .logs-cell:last-child {
    border-right: none;
}

#logs .logs-head .logs-cell {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
}

#logs .logs-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.54);
    background: rgba(30, 41, 59, 0.7);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#logs .logs-type.type-created {
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.34);
}

#logs .logs-type.type-edited {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.22);
}

#logs .logs-type.type-deleted {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.24);
    background: rgba(127, 29, 29, 0.3);
}

#logs .logs-type.type-archived {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(120, 53, 15, 0.3);
}

#logs .logs-type.type-system,
#logs .logs-type.type-bot {
    color: #cbd5e1;
}

#logs .logs-empty {
    padding: 30px 20px;
    border-radius: 18px;
    border: 1px dashed rgba(71, 85, 105, 0.58);
    background: rgba(15, 23, 42, 0.56);
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: #8da1b7;
}

@media (max-width: 980px) {
    #logs .logs-header {
        flex-direction: column;
    }

    #logs .logs-toolbar {
        grid-template-columns: 1fr;
    }

    #logs .logs-list {
        overflow-x: auto;
    }

    #logs .logs-head,
    #logs .logs-row {
        min-width: 960px;
    }
}

.hero-panel {
    height: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.95));
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.28);
}

.hero-radio-panel {
    width: 100%;
    justify-content: flex-start;
}

.hero-panel-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin-bottom: 10px;
}

.hero-panel-main {
    font-size: 24px;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.2;
}

.hero-panel-sub {
    margin-top: 8px;
    color: #93c5fd;
    font-size: 13px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

.overview-layout {
    display: grid;
    grid-template-columns: 260px 320px 1fr;
    gap: 16px;
    align-items: start;
}

.overview-agents {
    grid-column: 1;
    grid-row: 1 / 3;
}

.overview-info-box {
    grid-column: 2;
    grid-row: 1;
}

.overview-control {
    grid-column: 3;
    grid-row: 1;
}

.overview-hints {
    grid-column: 3;
    grid-row: 2;
    margin-left: 0;
}

.dashboard-card {
    position: relative;
    background: linear-gradient(180deg, #0f172a, #020617);
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 18px;
    padding: 20px;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(148, 163, 184, 0.03);
    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease,
        background 0.24s ease;
    overflow: hidden;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.1), rgba(255, 255, 255, 0.04), rgba(148, 163, 184, 0.08));
    pointer-events: none;
}

.dashboard-card:hover {
    transform: translateY(-1px);
    border-color: rgba(71, 85, 105, 0.92);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(59, 130, 246, 0.04);
}

.dashboard-card-large {
    grid-column: auto;
}

.dashboard-card-wide {
    grid-column: 1 / -1;
}

.dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-card-header h3 {
    margin: 0;
    font-size: 16px;
    opacity: 1;
}

.dashboard-card-tag {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(59, 130, 246, 0.14);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dashboard-card-tag.warn {
    background: rgba(245, 158, 11, 0.14);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 10px rgba(245, 158, 11, 0.08);
}

.dashboard-card-tag.neutral {
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dashboard-card-tag.live {
    background: rgba(239, 68, 68, 0.14);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 12px rgba(239, 68, 68, 0.12);
    animation: livePulse 3.8s ease-in-out infinite;
}

@keyframes livePulse {
    0%,
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 10px rgba(239, 68, 68, 0.1);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 14px rgba(239, 68, 68, 0.18);
    }
}

@media (max-width: 1200px) {
    .overview-layout {
        grid-template-columns: 1fr;
    }

    .overview-agents,
    .overview-info-box,
    .overview-control,
    .overview-hints {
        grid-column: auto;
        grid-row: auto;
    }

    .dashboard-hero {
        grid-template-columns: 1fr;
    }

    .dashboard-card,
    .dashboard-card-large,
    .dashboard-card-wide {
        grid-column: auto;
    }
}

@media (max-width: 700px) {
    .dashboard-hero {
        padding: 20px;
    }

    .dashboard-hero h1 {
        font-size: 26px;
    }

    .dashboard-subtitle {
        font-size: 13px;
    }
}
#overview {
    padding-top: 4px;
}

.overview-system-banner {
    position: relative;
    display: none;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(185, 28, 28, 0.42);
    background:
        linear-gradient(180deg, rgba(127, 29, 29, 0.92), rgba(69, 10, 10, 0.9)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
    box-shadow:
        0 14px 26px rgba(69, 10, 10, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.overview-system-banner.is-active {
    display: flex;
}

.overview-system-banner::before,
.overview-system-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.overview-system-banner::before {
    background: linear-gradient(
        90deg,
        rgba(2, 6, 23, 0.94) 0%,
        rgba(2, 6, 23, 0) 10%,
        rgba(2, 6, 23, 0) 90%,
        rgba(2, 6, 23, 0.94) 100%
    );
    z-index: 1;
}

.overview-system-banner::after {
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(248, 113, 113, 0), rgba(248, 113, 113, 0.5), rgba(248, 113, 113, 0));
}

.overview-system-banner-label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.32);
    background: rgba(2, 6, 23, 0.28);
    color: #fecaca;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.overview-system-banner-track {
    position: relative;
    z-index: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.overview-system-banner-text {
    display: inline-block;
    min-width: max-content;
    padding-left: 100%;
    color: #fee2e2;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    animation: overviewBannerTicker 20s linear infinite;
    will-change: transform;
}

@keyframes overviewBannerTicker {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* CONTENT */

.main-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px 10px 18px 10px;
    box-sizing: border-box;
}

.overview-agents-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.overview-agents-card .agent-list {
    flex: 1;
    min-height: 420px;
}

.overview-active-agents-count {
    margin: -4px 0 14px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    color: #cbd5e1;
}

.overview-agents-card .agent-list {
    gap: 12px;
}

.overview-active-agent-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 15px;
    border-radius: 16px;
}

.overview-active-agent-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.overview-active-agent-id {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #93c5fd;
}

.overview-active-agent-name {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    color: #f8fafc;
}

.overview-active-agent-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    line-height: 1.4;
    color: #bbf7d0;
}

.overview-active-agent-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.12),
        0 0 10px rgba(34, 197, 94, 0.18);
}

.overview-active-agent-live.status-bueroarbeit {
    color: #bfdbfe;
}

.overview-active-agent-live.status-bueroarbeit .overview-active-agent-live-dot {
    background: #3b82f6;
    box-shadow:
        0 0 0 4px rgba(59, 130, 246, 0.12),
        0 0 10px rgba(59, 130, 246, 0.18);
}

.overview-active-agent-live.status-im-dienst {
    color: #bbf7d0;
}

.overview-active-agent-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.overview-active-agents-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.62);
    background: rgba(15, 23, 42, 0.42);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.overview-info-box,
.overview-control,
.overview-hints,
.overview-info-card {
    min-width: 0;
}

.overview-notes-card {
    min-width: 0;
}

.overview-notes-card .rights-box {
    min-height: 100%;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.page {
    display: none;
    animation: fadePage 0.18s ease;
}

.page.active {
    display: block;
}

@keyframes fadePage {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.overview-info {
    margin-top: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    opacity: 0.72;
    color: #94a3b8;
}

.agent-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-entry {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.agent-entry:hover {
    background: linear-gradient(180deg, rgba(16, 24, 39, 0.98), rgba(3, 7, 18, 0.98));
    border-color: rgba(71, 85, 105, 0.88);
    box-shadow:
        0 14px 24px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(59, 130, 246, 0.05);
    transform: translateY(-1px);
}

.agent-entry span {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    color: #94a3b8;
}

#agents .agent-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

#agents .agent-entry {
    min-height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 15px;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.95));
}

#agents .agent-entry-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

#agents .agent-entry b {
    color: #93c5fd;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: 0.06em;
}

#agents .agent-entry span {
    margin-top: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
}

#agents .agent-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

#agents .agent-card-name {
    color: #f8fafc;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 900;
}

#agents .agent-card-status-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: 999px;
    background: #64748b;
    box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.14);
}

#agents .agent-card-status-dot.is-active {
    background: #22c55e;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.14),
        0 0 16px rgba(34, 197, 94, 0.2);
}

#agents .agent-card-unit {
    overflow: hidden;
    margin-top: -2px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#agents .agent-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 24px;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (max-width: 640px) {
    #agents .agent-list {
        grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    }
}

#personnel {
    display: none;
}

#personnel.active {
    display: block;
}

#lawbook {
    min-height: calc(100vh - 120px);
    padding: 0;
    margin-top: -10px;
}

#lawbook.active {
    display: block;
}

.lawbook-app {
    width: 100%;
    min-height: auto;
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    border-radius: 28px;
    overflow: visible;
    position: relative;
    top: auto;
    transform: none;
    border: 1px solid rgba(71, 85, 105, 0.52);
    background:
        radial-gradient(circle at 80% 8%, rgba(37, 99, 235, 0.14), transparent 30%),
        linear-gradient(135deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.94));
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.32);
}

.lawbook-sidebar {
    position: sticky;
    top: 0;
    min-height: auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 22px 18px;
    box-sizing: border-box;
    overflow: hidden;
    border-right: 1px solid rgba(71, 85, 105, 0.48);
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.94), rgba(15, 23, 42, 0.86));
}

.lawbook-sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.lawbook-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lawbook-brand-logo {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(96, 165, 250, 0.28);
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.22);
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.18));
    flex: 0 0 auto;
}

.lawbook-brand-title {
    margin: 0;
    color: #f8fafc;
    font-size: 19px;
    line-height: 1.18;
    letter-spacing: 0.08em;
    font-weight: 900;
}

.lawbook-brand-subtitle {
    color: #93c5fd;
    font-size: 11px;
    letter-spacing: 0.16em;
    font-weight: 800;
}

.lawbook-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.lawbook-nav-item {
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #cbd5e1;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lawbook-nav-item.active {
    color: #f8fafc;
    border-color: rgba(96, 165, 250, 0.42);
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.32), rgba(15, 23, 42, 0.2));
    box-shadow: 0 0 18px rgba(37, 99, 235, 0.14);
}

.lawbook-version {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(71, 85, 105, 0.24);
    color: #64748b;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.12em;
    font-weight: 800;
}

.lawbook-main {
    min-width: 0;
    padding: 34px 30px 36px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.lawbook-topbar {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 2px;
}

.lawbook-search {
    width: min(58%, 640px);
    min-height: 52px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.78);
    color: #e2e8f0;
    font-size: 15px;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 14px 28px rgba(2, 6, 23, 0.18);
}

.lawbook-search::placeholder {
    color: #64748b;
}

.lawbook-search:focus {
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 3px rgba(59, 130, 246, 0.12),
        0 14px 28px rgba(2, 6, 23, 0.18);
}

.lawbook-overview-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lawbook-overview-view.is-hidden,
.lawbook-detail-view.is-hidden,
.lawbook-placeholder-view.is-hidden {
    display: none;
}

.lawbook-placeholder-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lawbook-placeholder-header {
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.68));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.lawbook-placeholder-header h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 900;
}

.lawbook-placeholder-header p {
    margin: 8px 0 0;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
}

.lawbook-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.lawbook-placeholder-card {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.56));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.lawbook-placeholder-card h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 900;
}

.lawbook-placeholder-card p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

.lawbook-placeholder-search {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.78);
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
}

.lawbook-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lawbook-timeline::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.42), rgba(71, 85, 105, 0.16));
}

.lawbook-update-card {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    min-height: 124px;
    padding: 16px 16px 16px 44px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.48);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.11), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.64));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.lawbook-update-card:hover {
    border-color: rgba(96, 165, 250, 0.48);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(96, 165, 250, 0.12);
    transform: translateY(-1px);
}

.lawbook-update-card::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 22px;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    border: 2px solid rgba(96, 165, 250, 0.7);
    background: #0f172a;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.28);
    z-index: 1;
}

.lawbook-update-date {
    color: #bfdbfe;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 900;
}

.lawbook-update-category {
    margin-top: 7px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lawbook-update-title {
    margin: 0;
    color: #f8fafc;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 900;
}

.lawbook-update-description {
    margin: 8px 0 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
}

.lawbook-update-status {
    align-self: start;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.26);
    background: rgba(37, 99, 235, 0.16);
    color: #bfdbfe;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.lawbook-update-status.is-new {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(22, 163, 74, 0.16);
    color: #bbf7d0;
}

.lawbook-update-status.is-important {
    border-color: rgba(245, 158, 11, 0.32);
    background: rgba(180, 83, 9, 0.16);
    color: #fde68a;
}

.lawbook-update-status.is-critical {
    border-color: rgba(248, 113, 113, 0.32);
    background: rgba(185, 28, 28, 0.16);
    color: #fecaca;
}

.lawbook-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.lawbook-contact-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.48);
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.64));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.lawbook-contact-card:hover {
    border-color: rgba(96, 165, 250, 0.46);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(96, 165, 250, 0.12);
    transform: translateY(-1px);
}

.lawbook-contact-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lawbook-contact-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(37, 99, 235, 0.14);
    color: #bfdbfe;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.14);
}

.lawbook-contact-status {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.26);
    background: rgba(22, 163, 74, 0.16);
    color: #bbf7d0;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.lawbook-contact-title {
    margin: 0;
    color: #f8fafc;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}

.lawbook-contact-description {
    margin: 8px 0 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
}

.lawbook-contact-footer {
    padding-top: 14px;
    border-top: 1px solid rgba(71, 85, 105, 0.34);
}

.lawbook-contact-label {
    color: #64748b;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lawbook-contact-value {
    margin-top: 5px;
    color: #bfdbfe;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
}

.lawbook-search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.lawbook-search-result-card {
    min-height: 158px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.48);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.66));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.lawbook-search-result-card:hover,
.lawbook-search-result-card:focus {
    border-color: rgba(96, 165, 250, 0.58);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(96, 165, 250, 0.16);
    transform: translateY(-2px);
    outline: none;
}

.lawbook-search-result-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lawbook-search-result-title {
    color: #f8fafc;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 900;
}

.lawbook-search-result-badge {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(37, 99, 235, 0.16);
    color: #bfdbfe;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
}

.lawbook-search-result-category {
    color: #60a5fa;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 900;
    text-transform: uppercase;
}

.lawbook-search-result-excerpt {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
}

.lawbook-empty-search {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid rgba(71, 85, 105, 0.48);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.62));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.lawbook-empty-search h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 900;
}

.lawbook-empty-search p {
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 700;
}

.lawbook-all-laws-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.lawbook-all-laws-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.lawbook-all-laws-search {
    flex: 0 1 360px;
    min-width: 0;
    max-width: 380px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 15px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.78);
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
}

.lawbook-all-laws-search::placeholder {
    color: #64748b;
}

.lawbook-all-laws-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    justify-content: space-between;
}

.lawbook-all-laws-button,
.lawbook-view-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.78);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 900;
    box-sizing: border-box;
}

.lawbook-all-laws-button {
    padding: 0 15px;
    margin-right: auto;
}

.lawbook-view-toggle {
    overflow: hidden;
}

.lawbook-view-toggle span {
    min-width: 46px;
    min-height: 42px;
    display: grid;
    place-items: center;
    color: #64748b;
    cursor: pointer;
    user-select: none;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.lawbook-view-toggle span.active {
    background: rgba(37, 99, 235, 0.28);
    color: #bfdbfe;
}

.lawbook-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lawbook-category-card {
    min-height: 128px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.58);
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.7));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.lawbook-category-card:hover {
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(96, 165, 250, 0.12);
    transform: translateY(-1px);
}

.lawbook-category-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(96, 165, 250, 0.3);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.28), rgba(15, 23, 42, 0.86));
    color: #bfdbfe;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 22px rgba(59, 130, 246, 0.18);
}

.lawbook-category-icon svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    stroke-width: 1.9;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lawbook-category-name {
    color: #f8fafc;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 900;
}

.lawbook-category-desc {
    margin-top: 7px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.38;
    font-weight: 700;
}

.lawbook-category-count {
    margin-top: 11px;
    color: #60a5fa;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lawbook-category-grid.is-hidden,
.lawbook-category-list.is-hidden {
    display: none;
}

.lawbook-category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lawbook-category-row {
    min-height: 82px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.54);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.66));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.lawbook-category-row:hover {
    border-color: rgba(96, 165, 250, 0.46);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(96, 165, 250, 0.1);
    transform: translateY(-1px);
}

.lawbook-category-row .lawbook-category-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
}

.lawbook-category-row .lawbook-category-icon svg {
    width: 25px;
    height: 25px;
}

.lawbook-category-row-main {
    min-width: 0;
}

.lawbook-category-row-count {
    color: #60a5fa;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 900;
    white-space: nowrap;
}

.lawbook-category-row-status {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.26);
    background: rgba(22, 163, 74, 0.16);
    color: #bbf7d0;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.lawbook-all-law-card {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.64));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
    cursor: pointer;
}

.lawbook-all-law-card:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.42);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.72));
    box-shadow:
        0 16px 34px rgba(2, 6, 23, 0.24),
        0 0 18px rgba(37, 99, 235, 0.1);
}

.lawbook-all-law-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.lawbook-all-law-short {
    color: #f8fafc;
    font-size: 25px;
    line-height: 1;
    letter-spacing: 0.04em;
    font-weight: 900;
}

.lawbook-all-law-status {
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(22, 101, 52, 0.18);
    color: #86efac;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    font-weight: 900;
}

.lawbook-all-law-name {
    color: #e2e8f0;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 900;
}

.lawbook-all-law-desc {
    margin-top: 5px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.lawbook-all-law-info {
    padding-top: 10px;
    border-top: 1px solid rgba(71, 85, 105, 0.38);
    color: #93c5fd;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 900;
}

.lawbook-hero {
    display: grid;
    grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr) minmax(260px, 0.72fr);
    align-items: center;
    gap: 22px;
    min-height: 210px;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(71, 85, 105, 0.48);
    background:
        radial-gradient(circle at 18% 20%, rgba(59, 130, 246, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.72));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.lawbook-hero-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lawbook-hero-logo {
    width: min(160px, 72%);
    max-height: 160px;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.28)) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.22));
}

.lawbook-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lawbook-hero-copy h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.1;
    color: #f8fafc;
    letter-spacing: 0.03em;
    font-weight: 900;
}

.lawbook-hero-copy h2 {
    margin: 0;
    color: #93c5fd;
    font-size: clamp(13px, 1.6vw, 18px);
    line-height: 1.2;
    letter-spacing: 0.14em;
    font-weight: 900;
}

.lawbook-hero-copy p {
    max-width: 680px;
    margin: 2px 0 0;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.5;
}

.lawbook-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.lawbook-stat-card {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.72));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.lawbook-stat-number {
    color: #f8fafc;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

.lawbook-stat-label {
    color: #93c5fd;
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 900;
}

.lawbook-overview-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.lawbook-panel {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.74));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

.lawbook-panel-title {
    margin: 0;
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    font-weight: 900;
}

.lawbook-panel-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(71, 85, 105, 0.46);
}

.lawbook-panel-entry {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(71, 85, 105, 0.38);
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.lawbook-panel-entry:hover {
    color: #dbeafe;
    transform: translateX(2px);
}

.lawbook-entry-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.lawbook-entry-title {
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
}

.lawbook-entry-meta,
.lawbook-entry-desc {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.lawbook-entry-tag {
    align-self: flex-start;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.16);
    color: #93c5fd;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
    white-space: nowrap;
}

.lawbook-panel-button {
    margin-top: auto;
    align-self: flex-start;
    min-height: 36px;
    padding: 0 15px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(37, 99, 235, 0.18);
    color: #dbeafe;
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 900;
    cursor: default;
}

.lawbook-books-section {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.lawbook-section-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lawbook-section-heading h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.12em;
    font-weight: 900;
}

.lawbook-section-heading p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

.lawbook-book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.lawbook-book-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.74));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
    cursor: pointer;
}

.lawbook-book-card:hover {
    transform: translateY(-3px);
    border-color: rgba(96, 165, 250, 0.42);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.82));
    box-shadow:
        0 18px 40px rgba(2, 6, 23, 0.28),
        0 0 22px rgba(37, 99, 235, 0.12);
}

.lawbook-book-card.active,
.lawbook-all-law-card.active {
    border-color: rgba(96, 165, 250, 0.58);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(30, 64, 175, 0.32), rgba(2, 6, 23, 0.78));
    box-shadow:
        0 18px 40px rgba(2, 6, 23, 0.3),
        0 0 26px rgba(37, 99, 235, 0.18);
}

.lawbook-book-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lawbook-book-short {
    color: #f8fafc;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.04em;
    font-weight: 900;
}

.lawbook-book-status {
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(22, 101, 52, 0.18);
    color: #86efac;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    font-weight: 900;
}

.lawbook-book-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lawbook-book-name {
    color: #e2e8f0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 900;
}

.lawbook-book-desc {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 650;
}

.lawbook-book-count {
    padding-top: 14px;
    border-top: 1px solid rgba(71, 85, 105, 0.42);
    color: #93c5fd;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    font-weight: 900;
}

.lawbook-detail-view {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 24px;
    padding-top: 0;
    overflow: visible;
    height: auto;
    min-height: auto;
    position: relative;
    top: auto;
    transform: none;
}

.law-detail-view-fixed {
    overflow: visible;
    height: auto;
    min-height: auto;
    position: relative;
    top: auto;
    transform: none;
    padding-top: 0;
    margin-top: 24px;
    scroll-margin-top: 96px;
}

.law-detail-view-fixed .lawbook-search,
.law-detail-view-fixed .lawbook-topbar,
.law-detail-view-fixed .law-search,
.law-detail-view-fixed .law-topbar {
    margin-top: 0;
    margin-bottom: 0;
}

.law-detail-view-fixed.lawbook-detail-view,
.law-detail-view-fixed .law-detail-layout {
    margin-top: 24px;
    align-items: flex-start;
}

.law-detail-view-fixed .lawbook-detail-panel,
.law-detail-view-fixed .lawbook-paragraph-panel,
.law-detail-view-fixed .law-detail-card,
.law-detail-view-fixed .law-paragraph-panel {
    margin-top: 0;
}

.lawbook-detail-nav {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.58));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.lawbook-detail-nav-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.lawbook-breadcrumb {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
}

.lawbook-breadcrumb span {
    color: #cbd5e1;
}

.lawbook-open-title {
    margin: 0;
    color: #f8fafc;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 900;
}

.lawbook-open-meta {
    color: #93c5fd;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.1em;
    font-weight: 900;
}

.lawbook-back-button {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(37, 99, 235, 0.16);
    color: #dbeafe;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
    white-space: nowrap;
}

.lawbook-back-button:hover {
    border-color: rgba(96, 165, 250, 0.42);
    background: rgba(37, 99, 235, 0.24);
    transform: translateY(-1px);
}

.lawbook-paragraph-panel,
.lawbook-detail-panel {
    border-radius: 24px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.76));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

.lawbook-paragraph-panel {
    padding: 22px;
}

.lawbook-paragraph-title {
    margin: 0 0 14px;
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    font-weight: 900;
}

.lawbook-paragraph-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lawbook-paragraph-item {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.36);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.lawbook-paragraph-item:hover {
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 41, 59, 0.62);
    transform: translateX(2px);
}

.lawbook-paragraph-item.active {
    color: #f8fafc;
    border-color: rgba(96, 165, 250, 0.42);
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.34), rgba(15, 23, 42, 0.22));
    box-shadow: 0 0 18px rgba(37, 99, 235, 0.12);
}

.lawbook-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.lawbook-detail-panel.is-switching {
    opacity: 0.72;
    transform: translateY(2px);
}

.lawbook-detail-kicker {
    color: #93c5fd;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.16em;
    font-weight: 900;
}

.lawbook-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(71, 85, 105, 0.42);
}

.lawbook-detail-title-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.lawbook-detail-paragraph-number {
    color: #f8fafc;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 0.95;
    font-weight: 950;
    letter-spacing: 0.02em;
}

.lawbook-detail-heading-text {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.1;
    font-weight: 900;
}

.lawbook-detail-header-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lawbook-detail-book-name {
    margin-top: 8px;
    color: #93c5fd;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
}

.lawbook-detail-badge,
.lawbook-detail-status {
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.18);
    color: #93c5fd;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.12em;
    font-weight: 900;
}

.lawbook-detail-status {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(22, 101, 52, 0.18);
    color: #86efac;
}

.lawbook-text-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: 22px;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(2, 6, 23, 0.38));
}

.lawbook-text-panel h3,
.lawbook-meta-panel h3 {
    margin: 0;
    color: #93c5fd;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    font-weight: 900;
}

.lawbook-detail-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 900px;
    color: #dbeafe;
    font-size: 16px;
    line-height: 1.85;
    font-weight: 600;
}

.lawbook-text-clause {
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

.lawbook-text-clause:last-child {
    border-bottom: none;
}

.lawbook-clause-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.26);
    background: rgba(30, 64, 175, 0.16);
    color: #93c5fd;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
}

.lawbook-clause-copy {
    color: #dbeafe;
}

.lawbook-support-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
}

.lawbook-meta-panel,
.lawbook-note-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background: rgba(15, 23, 42, 0.52);
}

.lawbook-meta-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.lawbook-meta-card {
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background: rgba(15, 23, 42, 0.52);
}

.lawbook-meta-card-label {
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    font-weight: 900;
}

.lawbook-meta-card-value {
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
}

.lawbook-meta-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lawbook-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(71, 85, 105, 0.36);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
}

.lawbook-meta-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.lawbook-meta-label {
    color: #64748b;
    font-weight: 900;
}

.lawbook-note-panel {
    justify-content: center;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.6;
    border-color: rgba(96, 165, 250, 0.22);
    background: rgba(30, 64, 175, 0.12);
}

@media (max-width: 1080px) {
    .lawbook-app {
        grid-template-columns: 1fr;
    }

    .lawbook-sidebar {
        position: relative;
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid rgba(71, 85, 105, 0.48);
    }

    .lawbook-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lawbook-detail-view {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .lawbook-main {
        padding: 24px 18px 28px;
    }

    .lawbook-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 24px;
        text-align: center;
    }

    .lawbook-hero-copy {
        align-items: center;
    }

    .lawbook-stats {
        grid-template-columns: 1fr;
    }

    .lawbook-search {
        width: 100%;
    }

    .lawbook-overview-panels {
        grid-template-columns: 1fr;
    }

    .lawbook-detail-header {
        flex-direction: column;
    }

    .lawbook-meta-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lawbook-detail-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .lawbook-support-grid {
        grid-template-columns: 1fr;
    }

    .lawbook-update-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lawbook-update-status {
        justify-self: start;
    }

    .lawbook-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lawbook-category-row {
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    .lawbook-category-row-status {
        grid-column: 2 / -1;
        justify-self: start;
    }
}

@media (max-width: 520px) {
    .lawbook-app {
        border-radius: 18px;
    }

    .lawbook-sidebar {
        padding: 22px 16px;
    }

    .lawbook-nav {
        grid-template-columns: 1fr;
    }

    .lawbook-all-laws-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .lawbook-all-laws-actions {
        width: 100%;
    }

    .lawbook-all-laws-button,
    .lawbook-view-toggle {
        flex: 1 1 0;
    }

    .lawbook-category-grid {
        grid-template-columns: 1fr;
    }

    .lawbook-category-row {
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;
    }

    .lawbook-category-row .lawbook-category-icon {
        width: 44px;
        height: 44px;
    }

    .lawbook-category-row-count,
    .lawbook-category-row-status {
        grid-column: 2;
        justify-self: start;
    }

    .lawbook-brand-logo {
        width: 50px;
        height: 50px;
    }

    .lawbook-meta-cards {
        grid-template-columns: 1fr;
    }

    .lawbook-text-clause {
        grid-template-columns: 1fr;
    }
}

#personnel .personnel-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#personnel .personnel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#personnel .personnel-header-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#personnel .personnel-header h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    color: #f8fafc;
}

#personnel .personnel-header p {
    margin: 0;
    max-width: 520px;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#personnel .personnel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

#personnel .personnel-tab-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.88);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

#personnel .personnel-tab-btn:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: #334155;
    color: #f8fafc;
    transform: translateY(-1px);
}

#personnel .personnel-tab-btn.active {
    background: rgba(30, 64, 175, 0.26);
    border-color: rgba(96, 165, 250, 0.36);
    color: #dbeafe;
}

#personnel .personnel-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#personnel .personnel-overview-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#personnel .personnel-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: 14px;
}

#personnel .personnel-overview-card {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-height: 148px;
    padding: 17px 18px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 42%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

#personnel .personnel-overview-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

#personnel .personnel-overview-card-header h3 {
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.3;
    color: #f8fafc;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#personnel .personnel-overview-card-id {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#personnel .personnel-overview-card-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    min-width: 0;
}

#personnel .personnel-overview-meta-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border-top: 0;
}

#personnel .personnel-overview-meta-item strong {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    color: #94a3b8;
}

#personnel .personnel-overview-meta-item span {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.45;
    color: #e2e8f0;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#personnel .personnel-overview-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (max-width: 640px) {
    #personnel .personnel-overview-grid {
        grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    }
}

#personnel .personnel-files-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#personnel .personnel-files-layout {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 16px;
}

#personnel .personnel-files-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(3, 7, 18, 0.78);
    box-shadow: none;
    max-height: 900px;
    overflow: auto;
}

#personnel .personnel-files-sidebar-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: rgba(15, 23, 42, 0.42);
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

#personnel .personnel-files-sidebar-item:hover {
    border-color: rgba(71, 85, 105, 0.72);
    background: rgba(30, 41, 59, 0.7);
}

#personnel .personnel-files-sidebar-item.active {
    border-color: rgba(96, 165, 250, 0.3);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.22), rgba(15, 23, 42, 0.58));
}

#personnel .personnel-files-sidebar-item:focus-visible {
    border-color: rgba(96, 165, 250, 0.38);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#personnel .personnel-files-sidebar-item.active strong {
    color: #eff6ff;
}

#personnel .personnel-files-sidebar-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#personnel .personnel-files-sidebar-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #a7b4c8;
}

#personnel .personnel-files-viewer {
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(3, 7, 18, 0.82);
    box-shadow: none;
    padding: 22px;
}

#personnel .personnel-file-cover {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#personnel .personnel-file-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.62);
}

#personnel .personnel-file-card-header h3 {
    margin: 0;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#personnel .personnel-file-card-id {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8ea4c7;
}

#personnel .personnel-file-card-header .personnel-file-training-pill,
#personnel .personnel-file-card-header .personnel-status-pill,
#personnel .personnel-file-card-header .personnel-former-pill,
#personnel .personnel-file-card-header .personnel-file-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.18);
    background: rgba(20, 83, 45, 0.2);
    color: #dcfce7;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-file-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 0;
}

#personnel .personnel-file-nav-btn {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

#personnel .personnel-file-nav-btn:hover {
    background: rgba(30, 41, 59, 0.68);
    border-color: rgba(71, 85, 105, 0.7);
    color: #f8fafc;
}

#personnel .personnel-file-nav-btn.active {
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.22), rgba(15, 23, 42, 0.56));
    border-color: rgba(96, 165, 250, 0.32);
    color: #eff6ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#personnel .personnel-file-nav-btn:focus-visible {
    border-color: rgba(96, 165, 250, 0.38);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#personnel .personnel-file-panel {
    display: none;
    opacity: 0;
    transform: translateY(4px);
}

#personnel .personnel-file-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: personnelFilePanelIn 0.18s ease;
}

@keyframes personnelFilePanelIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#personnel .personnel-file-card-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#personnel .personnel-file-card-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

#personnel .personnel-file-card-section h4 {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #cbd5e1;
}

#personnel .personnel-file-card-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(51, 65, 85, 0.52);
}

#personnel .personnel-file-card-row strong {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#personnel .personnel-file-card-row span {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
}

#personnel .personnel-file-card-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
}

#personnel .personnel-file-card-section > .personnel-file-card-note:only-child {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.58);
    background: rgba(15, 23, 42, 0.34);
    color: #a9b5c9;
}

#personnel .personnel-file-entries-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#personnel .personnel-file-entries-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#personnel .personnel-file-entries-form-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 12px;
}

#personnel .personnel-file-entries-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#personnel .personnel-file-entries-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#personnel .personnel-file-entries-field select,
#personnel .personnel-file-entries-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#personnel .personnel-file-entries-field select:focus,
#personnel .personnel-file-entries-field textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#personnel .personnel-file-entries-field textarea {
    min-height: 120px;
    resize: vertical;
}

#personnel .personnel-file-entries-actions {
    display: flex;
    justify-content: flex-end;
}

#personnel .personnel-file-entries-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#personnel .personnel-file-entries-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .personnel-file-entries-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#personnel .personnel-file-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(51, 65, 85, 0.58);
    background: transparent;
}

#personnel .personnel-file-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#personnel .personnel-file-entry-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    background: rgba(30, 41, 59, 0.38);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-file-entry-time {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
    white-space: nowrap;
}

#personnel .personnel-file-entry-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #e2e8f0;
    white-space: pre-wrap;
}

#personnel .personnel-file-sanctions-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#personnel .personnel-file-sanctions-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#personnel .personnel-file-sanction-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(51, 65, 85, 0.58);
    background: transparent;
}

#personnel .personnel-file-sanction-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#personnel .personnel-file-sanction-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.16);
    background: rgba(127, 29, 29, 0.14);
    color: #fecaca;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-file-sanction-date {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
    white-space: nowrap;
}

#personnel .personnel-file-sanction-reason {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

#personnel .personnel-file-sanction-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
}

#personnel .personnel-file-sanctions-list > .personnel-file-card-section:only-child {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.58);
    background: rgba(15, 23, 42, 0.34);
}

#personnel .personnel-file-training-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#personnel .personnel-file-training-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 0 14px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(51, 65, 85, 0.58);
    background: transparent;
}

#personnel .personnel-file-training-summary strong {
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
}

#personnel .personnel-file-training-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#personnel .personnel-file-training-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(51, 65, 85, 0.52);
    background: transparent;
}

#personnel .personnel-file-training-item strong {
    font-size: 14px;
    line-height: 1.5;
    color: #f8fafc;
}

#personnel .personnel-file-training-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-file-training-pill.status-bestanden {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
}

#personnel .personnel-file-training-pill.status-offen,
#personnel .personnel-file-training-pill.status-keine-daten,
#personnel .personnel-file-training-pill.status-nicht-begonnen {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#personnel .personnel-file-training-pill.status-in-bearbeitung {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#personnel .personnel-file-training-pill.status-nicht-bestanden,
#personnel .personnel-file-training-pill.status-fehlend {
    color: #ffedd5;
    border-color: rgba(251, 146, 60, 0.3);
    background: rgba(154, 52, 18, 0.26);
}

#personnel .personnel-file-notes-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#personnel .personnel-file-notes-textarea {
    width: 100%;
    min-height: 260px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.58);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.7;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
}

#personnel .personnel-file-notes-textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#personnel .personnel-file-notes-actions {
    display: flex;
    justify-content: flex-end;
}

#personnel .personnel-file-notes-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#personnel .personnel-file-notes-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .personnel-file-notes-save:focus-visible {
    border-color: rgba(96, 165, 250, 0.38);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#personnel .personnel-file-documents-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#personnel .personnel-file-document-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#personnel .personnel-file-document-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#personnel .personnel-file-document-title h4 {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #cbd5e1;
}

#personnel .personnel-file-document-title p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#personnel .personnel-file-document-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#personnel .personnel-file-document-image {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 180px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(15, 23, 42, 0.34);
}

#personnel .personnel-file-document-image strong {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
}

#personnel .personnel-file-document-image span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.58);
    background: rgba(2, 6, 23, 0.42);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

#personnel .personnel-file-document-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 96px;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.58);
    background: rgba(2, 6, 23, 0.42);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    overflow: hidden;
}

#personnel .personnel-file-document-preview img {
    width: 100%;
    max-height: 118px;
    object-fit: contain;
    border-radius: 10px;
}

#personnel .personnel-file-document-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#personnel .personnel-file-document-actions button,
#personnel .personnel-file-document-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 11px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.82);
    background: rgba(15, 23, 42, 0.78);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#personnel .personnel-file-document-actions button:hover,
#personnel .personnel-file-document-upload:hover {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, 0.38);
    background: rgba(30, 41, 59, 0.92);
}

#personnel .personnel-file-document-delete {
    color: #fecaca;
    border-color: rgba(127, 29, 29, 0.58) !important;
    background: rgba(69, 10, 10, 0.48) !important;
}

#personnel .personnel-note {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#personnel .personnel-note textarea {
    width: 100%;
    min-height: 110px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.6;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
}

#personnel .personnel-note textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#personnel .personnel-note button {
    align-self: flex-end;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#personnel .personnel-note button:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .personnel-sanctions-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
}

#personnel .personnel-sanctions-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#personnel .personnel-sanctions-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#personnel .personnel-sanctions-field.full {
    grid-column: 1 / -1;
}

#personnel .personnel-sanctions-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#personnel .personnel-sanctions-field input,
#personnel .personnel-sanctions-field textarea,
#personnel .personnel-sanctions-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#personnel .personnel-sanctions-field input:focus,
#personnel .personnel-sanctions-field textarea:focus,
#personnel .personnel-sanctions-field select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#personnel .personnel-sanctions-field textarea {
    min-height: 120px;
    resize: vertical;
}

#personnel .personnel-sanctions-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#personnel .personnel-sanctions-save,
#personnel .personnel-sanction-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#personnel .personnel-sanctions-save:hover,
#personnel .personnel-sanction-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .personnel-sanction-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#personnel .personnel-sanction-entry + .personnel-sanction-entry {
    margin-top: 12px;
}

#personnel .personnel-sanction-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#personnel .personnel-sanction-entry-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#personnel .personnel-sanction-entry-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#personnel .personnel-sanction-entry-title p,
#personnel .personnel-sanction-entry-note {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#personnel .personnel-sanction-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-sanction-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
}

#personnel .personnel-sanction-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#personnel .personnel-status-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
}

#personnel .personnel-promotion-dismissal-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

#personnel .personnel-promotion-dismissal-layout > .personnel-panel-card {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

#personnel #personnel-agent-create .personnel-status-shell,
#personnel #personnel-promotion .personnel-status-shell {
    grid-template-columns: 1fr;
}

#personnel .personnel-status-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#personnel .personnel-status-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#personnel .personnel-status-field.full {
    grid-column: 1 / -1;
}

#personnel .personnel-status-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#personnel .personnel-status-field input,
#personnel .personnel-status-field textarea,
#personnel .personnel-status-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#personnel .personnel-status-field input:focus,
#personnel .personnel-status-field textarea:focus,
#personnel .personnel-status-field select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#personnel .personnel-status-field textarea {
    min-height: 120px;
    resize: vertical;
}

#personnel .personnel-promotion-roles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid #1e293b;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.54);
}

#personnel .personnel-promotion-role-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #dbeafe;
    font-size: 13px;
}

#personnel .personnel-promotion-role-option input {
    width: auto;
    flex: 0 0 auto;
}

#personnel .personnel-promotion-current-roles {
    min-height: 44px;
    padding: 12px 14px;
    border: 1px solid #1e293b;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.48);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
}

#personnel .personnel-status-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#personnel .personnel-status-save,
#personnel .personnel-status-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#personnel .personnel-status-save:hover,
#personnel .personnel-status-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .personnel-agent-create-feedback {
    display: none;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.68);
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
    white-space: pre-line;
}

#personnel .personnel-agent-create-feedback.visible {
    display: block;
}

#personnel .personnel-agent-create-feedback.success {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
    color: #dcfce7;
}

#personnel .personnel-status-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#personnel .personnel-status-entry + .personnel-status-entry {
    margin-top: 12px;
}

#personnel .personnel-status-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#personnel .personnel-status-entry-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#personnel .personnel-status-entry-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#personnel .personnel-status-entry-title p,
#personnel .personnel-status-entry-note {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#personnel .personnel-status-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-status-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
}

#personnel .personnel-status-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#personnel .personnel-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-status-pill.status-aktiv {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
}

#personnel .personnel-status-pill.status-pausiert {
    color: #fef3c7;
    border-color: rgba(250, 204, 21, 0.24);
    background: rgba(113, 63, 18, 0.24);
}

#personnel .personnel-status-pill.status-beurlaubt {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#personnel .personnel-status-pill.status-entlassen {
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.24);
    background: rgba(127, 29, 29, 0.24);
}

#personnel .personnel-former-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
}

#personnel .personnel-former-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#personnel .personnel-former-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#personnel .personnel-former-field.full {
    grid-column: 1 / -1;
}

#personnel .personnel-former-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#personnel .personnel-former-field input,
#personnel .personnel-former-field textarea,
#personnel .personnel-former-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#personnel .personnel-former-field input:focus,
#personnel .personnel-former-field textarea:focus,
#personnel .personnel-former-field select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#personnel .personnel-former-field textarea {
    min-height: 120px;
    resize: vertical;
}

#personnel .personnel-former-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#personnel .personnel-former-save,
#personnel .personnel-former-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#personnel .personnel-former-save:hover,
#personnel .personnel-former-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .personnel-former-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#personnel .personnel-former-entry + .personnel-former-entry {
    margin-top: 12px;
}

#personnel .personnel-former-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#personnel .personnel-former-entry-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#personnel .personnel-former-entry-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#personnel .personnel-former-entry-title p,
#personnel .personnel-former-entry-note {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#personnel .personnel-former-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-former-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
}

#personnel .personnel-former-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#personnel .personnel-former-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-former-pill.status-entlassen {
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.24);
    background: rgba(127, 29, 29, 0.24);
}

#personnel .personnel-former-pill.status-ausgetreten {
    color: #fef3c7;
    border-color: rgba(250, 204, 21, 0.24);
    background: rgba(113, 63, 18, 0.24);
}

#personnel .personnel-former-pill.status-inaktiv {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#personnel .personnel-former-pill.status-sonstiges {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

@media (max-width: 980px) {
    #personnel .personnel-files-layout,
    #personnel .personnel-sanctions-shell,
    #personnel .personnel-status-shell,
    #personnel .personnel-promotion-dismissal-layout,
    #personnel .personnel-former-shell {
        grid-template-columns: 1fr;
    }

    #personnel .personnel-files-sidebar {
        max-height: none;
    }

    #personnel .personnel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #personnel .personnel-tabs {
        justify-content: flex-start;
    }
}

#personnel .personnel-panel {
    display: none;
}

#personnel .personnel-panel.active {
    display: block;
}

#personnel .personnel-panel-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

#personnel .personnel-panel-card h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: #f8fafc;
}

#personnel .personnel-panel-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

@media (max-width: 900px) {
    #personnel .personnel-tabs {
        gap: 8px;
    }
}

.rights-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #cbd5e1;
}

.rights-box p {
    margin: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(10, 15, 28, 0.92));
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 10px;
    padding: 16px;
    font-weight: 500;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.rights-box p:first-child {
    border-left: 4px solid #3b82f6;
}

.rights-box p:hover {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(11, 18, 32, 0.96));
    border-color: rgba(71, 85, 105, 0.82);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

/* GRID SYSTEM */

/* CARDS */

.card {
    background: #0f172a;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #1e293b;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: 0.2s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.card h3 {
    margin-top: 0;
    font-size: 16px;
    margin-bottom: 10px;
}
/* UNIT GRID */

.unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* UNIT CARD */

.unit-card {
    background: #0f172a;
    border: 2px solid #22c55e;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

/* HEADER */

.unit-header {
    font-weight: bold;
    margin-bottom: 10px;
}

/* AGENTS */

.agent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #020617;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
}

/* BUTTON */

.agent button {
    background: #dc2626;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.agent button:hover {
    background: #ef4444;
}

/* HAUPTUNITS STYLE */

.main-unit {
    border: 2px solid #2563eb;
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.5);
}

/* SOK - DUNKELGRüN */

.sok {
    border: 2px solid #166534;
    box-shadow: 0 0 15px rgba(22, 101, 52, 0.6);
}

.unit-add {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.unit-add select {
    flex: 1;
    padding: 5px;
    border-radius: 5px;
    border: none;
}

.unit-add button {
    background: #2563eb;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.unit-add button:hover {
    background: #3b82f6;
}

/* INTERNE - ROT */

.interne {
    border: 2px solid #b91c1c;
    box-shadow: 0 0 15px rgba(185, 28, 28, 0.6);
}

#units {
    display: none;
    --units-accent: #970f00;
    --units-accent-border: rgba(151, 15, 0, 0.42);
    --units-accent-bg: rgba(151, 15, 0, 0.2);
    --units-accent-text: #ffd9d4;
    --units-accent-shadow: rgba(151, 15, 0, 0.16);
}

#units:has(#units-internal.active) {
    --units-accent: #970f00;
    --units-accent-border: rgba(151, 15, 0, 0.42);
    --units-accent-bg: rgba(151, 15, 0, 0.2);
    --units-accent-text: #ffd9d4;
    --units-accent-shadow: rgba(151, 15, 0, 0.16);
}

#units:has(#units-sok.active) {
    --units-accent: #004117;
    --units-accent-border: rgba(0, 65, 23, 0.44);
    --units-accent-bg: rgba(0, 65, 23, 0.22);
    --units-accent-text: #d4f8df;
    --units-accent-shadow: rgba(0, 65, 23, 0.18);
}

#units.active {
    display: block;
}

#units .units-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .units-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    padding: 18px 22px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, #1e293b 70%, var(--units-accent) 30%);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#units .units-header::before {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--units-accent),
        color-mix(in srgb, var(--units-accent) 18%, transparent 82%)
    );
    opacity: 0.95;
}

#units .units-header-main {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    flex: 1 1 auto;
}

#units .units-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 0 0 auto;
    padding-left: 12px;
    border-left: 3px solid var(--units-accent);
}

#units .units-title h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    color: color-mix(in srgb, #f8fafc 76%, var(--units-accent) 24%);
}

#units .units-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    flex: 0 0 auto;
}

#units .units-tab {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.88);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

#units .units-tab:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: #334155;
    color: #f8fafc;
    transform: translateY(-1px);
}

#units .units-tab.active {
    background: var(--units-accent-bg);
    border-color: var(--units-accent-border);
    color: var(--units-accent-text);
    box-shadow: 0 8px 18px var(--units-accent-shadow);
}

#units .units-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .units-panel {
    display: none;
}

#units .units-panel.active {
    display: block;
}

#units .units-panel-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, #1e293b 72%, var(--units-accent) 28%);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .units-panel-card h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: color-mix(in srgb, #f8fafc 82%, var(--units-accent) 18%);
}

#units .units-panel-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .units-internal-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#units .units-internal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    justify-content: flex-start;
    min-width: 0;
    flex: 1 1 auto;
}

#units .units-internal-tabs.is-hidden {
    display: none;
}

#units .units-internal-tab {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .units-internal-tab:hover {
    background: rgba(30, 41, 59, 0.68);
    border-color: rgba(71, 85, 105, 0.7);
    color: #f8fafc;
}

#units .units-internal-tab.active {
    background: var(--units-accent-bg);
    border-color: var(--units-accent-border);
    color: var(--units-accent-text);
    box-shadow: 0 8px 18px var(--units-accent-shadow);
}

#units .units-internal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .units-internal-panel {
    display: none;
}

#units .units-internal-panel.active {
    display: block;
}

#units .units-internal-placeholder {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .units-internal-placeholder h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: #f8fafc;
    opacity: 1;
}

#units .units-internal-placeholder p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .sok-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .sok-header-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-header-main h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-header-main p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    justify-content: flex-start;
    min-width: 0;
    flex: 1 1 auto;
}

#units .sok-tabs.is-hidden {
    display: none;
}

#units .sok-tab {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .sok-tab:hover {
    background: rgba(30, 41, 59, 0.68);
    border-color: rgba(71, 85, 105, 0.7);
    color: #f8fafc;
}

#units .sok-tab.active {
    background: var(--units-accent-bg);
    border-color: var(--units-accent-border);
    color: var(--units-accent-text);
    box-shadow: 0 8px 18px var(--units-accent-shadow);
}

#units .sok-content {
    display: grid;
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

#units .sok-content > .sok-intel-sidebar {
    grid-column: 1;
    grid-row: 1;
}

#units .sok-content > .sok-panel {
    grid-column: 2;
    min-width: 0;
}

#units .sok-panel {
    display: none;
}

#units .sok-panel.active {
    display: block;
}

#units .sok-panel-card h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-panel-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-panel-eyebrow {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

/* SOK Design System – scoped under #units */
#units {
    --sok-bg: #020617;
    --sok-surface: rgba(15, 23, 42, 0.94);
    --sok-surface-strong: rgba(10, 18, 32, 0.96);
    --sok-surface-soft: rgba(2, 6, 23, 0.38);
    --sok-border: rgba(51, 65, 85, 0.58);
    --sok-border-strong: rgba(30, 41, 59, 0.86);
    --sok-text: #f8fafc;
    --sok-muted: #94a3b8;
    --sok-accent: #38bdf8;
    --sok-success: #22c55e;
    --sok-warning: #f59e0b;
    --sok-danger: #ef4444;
    --sok-card-radius: 22px;
    --sok-inner-radius: 16px;
    --sok-control-height: 40px;
    --sok-shadow: 0 16px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#units .sok-panel {
    min-width: 0;
}

/* 1 – sok-card */
#units .sok-card,
#units .sok-panel-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    border-radius: var(--sok-card-radius);
    border: 1px solid var(--sok-border-strong);
    background:
        linear-gradient(180deg, var(--sok-surface), rgba(2, 6, 23, 0.94)),
        radial-gradient(circle at 92% 0%, rgba(56, 189, 248, 0.07), transparent 34%);
    box-shadow: var(--sok-shadow);
    color: var(--sok-text);
}

/* 2 – sok-panel (Inhaltsflächen; Tab-Sichtbarkeit bleibt bei .sok-panel.active) */
#units .sok-tactical-panel,
#units .sok-overview-section,
#units .sok-guides-list,
#units .sok-guides-viewer,
#units .sok-files-viewer,
#units .sok-routes-viewer,
#units .sok-raid-planner-viewer,
#units .sok-raid-request-viewer,
#units .sok-route-detail-card,
#units .sok-route-map-card,
#units .sok-guides-content-card,
#units .sok-guides-info-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid var(--sok-border-strong);
    background: linear-gradient(180deg, var(--sok-surface), rgba(2, 6, 23, 0.94));
    box-shadow: var(--sok-shadow);
    color: var(--sok-text);
}

/* 3 – sok-table */
#units .sok-table,
#units .sok-routes-table,
#units .sok-raid-request-table,
#units .sok-company-table-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid var(--sok-border);
    background: var(--sok-surface-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#units .sok-table-head,
#units .sok-routes-table-head,
#units .sok-raid-request-table-head,
#units .sok-company-table-head {
    display: grid;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sok-border);
    background: rgba(15, 23, 42, 0.74);
    color: var(--sok-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

#units .sok-table-row,
#units .sok-routes-table-row,
#units .sok-raid-request-table-row,
#units .sok-company-table-row {
    display: grid;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.38);
    background: transparent;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
    box-sizing: border-box;
}

#units .sok-table-row:last-child,
#units .sok-routes-table-row:last-child,
#units .sok-raid-request-table-row:last-child,
#units .sok-company-table-row:last-child {
    border-bottom: 0;
}

#units .sok-table-row:hover,
#units .sok-table-row.active,
#units .sok-routes-table-row:hover,
#units .sok-routes-table-row.active,
#units .sok-raid-request-table-row:hover,
#units .sok-raid-request-table-row.active,
#units .sok-company-table-row:hover,
#units .sok-company-table-row.active {
    background:
        linear-gradient(90deg, rgba(14, 165, 233, 0.12), rgba(15, 23, 42, 0.62)),
        radial-gradient(circle at 2% 50%, rgba(56, 189, 248, 0.12), transparent 28%);
    box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.65);
}

/* 4 – sok-status-chip */
#units .sok-status-chip,
#units .sok-route-status-chip,
#units .sok-raid-request-status-chip,
#units .sok-raid-status-chip,
#units .sok-company-status-chip,
#units .sok-leadership-status-chip,
#units .sok-guide-status-chip,
#units .sok-family-list-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

#units .sok-status-chip.active,
#units .sok-status-chip.aktiv,
#units .sok-status-chip.approved,
#units .sok-status-chip.genehmigt,
#units .sok-status-chip.abgeschlossen,
#units .sok-status-chip.ready,
#units .sok-status-chip.online {
    border: 1px solid rgba(34, 197, 94, 0.34);
    background: rgba(22, 101, 52, 0.2);
    color: #bbf7d0;
}

#units .sok-status-chip.processing,
#units .sok-status-chip.planned {
    border: 1px solid rgba(96, 165, 250, 0.36);
    background: rgba(30, 64, 175, 0.2);
    color: #bfdbfe;
}

#units .sok-status-chip.pending,
#units .sok-status-chip.offen,
#units .sok-status-chip.watch,
#units .sok-status-chip.beobachtung,
#units .sok-status-chip.warning,
#units .sok-status-chip.operation,
#units .sok-status-chip.running {
    border: 1px solid rgba(251, 191, 36, 0.36);
    background: rgba(120, 53, 15, 0.22);
    color: #fde68a;
}

#units .sok-status-chip.rejected,
#units .sok-status-chip.abgelehnt,
#units .sok-status-chip.critical,
#units .sok-status-chip.danger {
    border: 1px solid rgba(239, 68, 68, 0.42);
    background: rgba(127, 29, 29, 0.26);
    color: #fecaca;
}

#units .sok-status-chip.inactive,
#units .sok-status-chip.unknown,
#units .sok-status-chip.neutral,
#units .sok-status-chip.offline,
#units .sok-status-chip.done {
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
}

#units .sok-guide-status-chip {
    border: 1px solid rgba(34, 197, 94, 0.34);
    background: rgba(22, 101, 52, 0.18);
    color: #bbf7d0;
}

/* 5 – sok-risk-badge */
#units .sok-risk-badge,
#units .sok-company-risk-chip,
#units .sok-raid-priority-chip,
#units .sok-company-risk,
#units .sok-threat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

#units .sok-risk-badge.low,
#units .sok-risk-badge.niedrig {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(22, 101, 52, 0.18);
    color: #bbf7d0;
}

#units .sok-risk-badge.medium,
#units .sok-risk-badge.mittel {
    border-color: rgba(250, 204, 21, 0.36);
    background: rgba(113, 63, 18, 0.2);
    color: #fef08a;
}

#units .sok-risk-badge.high,
#units .sok-risk-badge.hoch {
    border-color: rgba(249, 115, 22, 0.38);
    background: rgba(124, 45, 18, 0.22);
    color: #fed7aa;
}

#units .sok-risk-badge.critical,
#units .sok-risk-badge.kritisch {
    border-color: rgba(239, 68, 68, 0.42);
    background: rgba(127, 29, 29, 0.26);
    color: #fecaca;
}

#units .sok-risk-badge.unknown {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
}

/* 6 – sok-section-header */
#units .sok-section-header,
#units .sok-guides-command-header,
#units .sok-family-list-header,
#units .sok-companies-header,
#units .sok-leadership-command-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 24px;
    border: 1px solid rgba(14, 165, 233, 0.22);
    background:
        radial-gradient(circle at 88% 12%, rgba(14, 165, 233, 0.11), transparent 32%),
        linear-gradient(135deg, var(--sok-surface-strong), rgba(2, 6, 23, 0.98));
    box-shadow: var(--sok-shadow);
}

#units .sok-section-header h2,
#units .sok-section-header h3,
#units .sok-guides-command-header h2,
#units .sok-family-list-header h2,
#units .sok-companies-header h2,
#units .sok-leadership-command-header h2 {
    margin: 0;
    color: var(--sok-text);
    letter-spacing: 0;
}

#units .sok-section-header p,
#units .sok-guides-command-header p,
#units .sok-family-list-header p,
#units .sok-companies-header p,
#units .sok-leadership-command-header p {
    margin: 4px 0 0;
    color: var(--sok-muted);
    font-size: 14px;
    line-height: 1.7;
}

#units .sok-section-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

/* 7 – sok-sidebar */
#units .sok-sidebar,
#units .sok-intel-sidebar,
#units .sok-files-sidebar,
#units .sok-routes-sidebar,
#units .sok-raid-planner-sidebar,
#units .sok-raid-request-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid var(--sok-border-strong);
    background:
        linear-gradient(180deg, var(--sok-surface-strong), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.08), transparent 34%);
    box-shadow: var(--sok-shadow);
    box-sizing: border-box;
}

#units .sok-sidebar-nav,
#units .sok-intel-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#units .sok-sidebar-nav button,
#units .sok-intel-sidebar-nav button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 11px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#units .sok-sidebar-nav button:hover,
#units .sok-sidebar-nav button.active,
#units .sok-intel-sidebar-nav button:hover,
#units .sok-intel-sidebar-nav button.active {
    border-color: rgba(56, 189, 248, 0.28);
    background: rgba(12, 74, 110, 0.22);
    color: var(--sok-text);
    transform: translateX(2px);
}

/* 8 – Formulare */
#units .sok-field,
#units .sok-overview-field,
#units .sok-guides-field,
#units .sok-raid-request-field,
#units .sok-family-list-field,
#units .sok-companies-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-field label,
#units .sok-overview-field label,
#units .sok-guides-field label,
#units .sok-raid-request-field label,
#units .sok-family-list-field label,
#units .sok-companies-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sok-muted);
}

#units .sok-input,
#units .sok-select,
#units .sok-overview-field input,
#units .sok-overview-field textarea,
#units .sok-overview-field select,
#units .sok-guides-field input,
#units .sok-guides-field textarea,
#units .sok-guides-field select,
#units .sok-raid-request-field input,
#units .sok-raid-request-field textarea,
#units .sok-raid-request-field select,
#units .sok-family-list-field input,
#units .sok-family-list-field textarea,
#units .sok-family-list-field select,
#units .sok-companies-field input,
#units .sok-companies-field textarea,
#units .sok-companies-field select,
#units .sok-intel-tools input {
    width: 100%;
    min-height: var(--sok-control-height);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.62);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

#units .sok-input:focus,
#units .sok-select:focus,
#units .sok-overview-field input:focus,
#units .sok-overview-field textarea:focus,
#units .sok-overview-field select:focus,
#units .sok-guides-field input:focus,
#units .sok-guides-field textarea:focus,
#units .sok-raid-request-field input:focus,
#units .sok-raid-request-field textarea:focus,
#units .sok-companies-field input:focus,
#units .sok-companies-field textarea:focus,
#units .sok-family-list-field input:focus,
#units .sok-family-list-field textarea:focus,
#units .sok-intel-tools input:focus {
    border-color: rgba(56, 189, 248, 0.42);
    background: rgba(2, 6, 23, 0.82);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

#units .sok-button,
#units .sok-overview-action,
#units .sok-guides-add,
#units .sok-files-add,
#units .sok-family-list-add,
#units .sok-companies-add,
#units .sok-routes-add,
#units .sok-raid-planner-add,
#units .sok-raid-request-add,
#units .sok-overview-entry-actions button,
#units .sok-guides-document-actions button,
#units .sok-leadership-card-head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sok-control-height);
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#units .sok-button:hover,
#units .sok-overview-action:hover,
#units .sok-guides-add:hover,
#units .sok-files-add:hover,
#units .sok-family-list-add:hover,
#units .sok-companies-add:hover,
#units .sok-routes-add:hover,
#units .sok-raid-planner-add:hover,
#units .sok-raid-request-add:hover,
#units .sok-overview-entry-actions button:hover,
#units .sok-guides-document-actions button:hover,
#units .sok-leadership-card-head button:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(96, 165, 250, 0.34);
    color: var(--sok-text);
}

#units .sok-button.primary,
#units .sok-button.sok-button-primary,
#units .sok-overview-entry-actions button.primary,
#units .sok-guides-document-actions button.primary,
#units .sok-family-list-card-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-button.subtle-danger,
#units .sok-overview-entry-actions button.subtle-danger,
#units .sok-guides-document-actions button.subtle-danger,
#units .sok-family-list-card-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-empty,
#units .sok-overview-empty,
#units .sok-guides-empty,
#units .sok-routes-empty,
#units .sok-raid-request-empty,
#units .sok-companies-empty,
#units .sok-family-list-empty {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.38);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-intel-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(21, 128, 61, 0.32);
    background:
        linear-gradient(135deg, rgba(5, 46, 22, 0.44), rgba(2, 6, 23, 0.94) 54%),
        radial-gradient(circle at 92% 8%, rgba(34, 197, 94, 0.14), transparent 34%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-intel-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

#units .sok-intel-kicker {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #86efac;
}

#units .sok-intel-copy h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.12;
    color: #f8fafc;
}

#units .sok-intel-copy p {
    max-width: 680px;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #a7b4c8;
}

#units .sok-intel-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#units .sok-intel-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 78px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(2, 6, 23, 0.48);
}

#units .sok-intel-stat strong {
    font-size: 26px;
    line-height: 1;
    color: #dcfce7;
}

#units .sok-intel-stat span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-intel-dashboard {
    display: block;
}

#units .sok-intel-sidebar {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(21, 128, 61, 0.28);
    background:
        linear-gradient(180deg, rgba(5, 12, 24, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 0 0, rgba(34, 197, 94, 0.16), transparent 34%);
    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-intel-sidebar-brand {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 2px 2px 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.58);
}

#units .sok-intel-sidebar-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #dcfce7;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    box-shadow: none;
    overflow: hidden;
}

#units .sok-intel-sidebar-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#units .sok-intel-sidebar-brand strong {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-intel-sidebar-brand span {
    display: block;
    font-size: 11px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-intel-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#units .sok-intel-sidebar-nav button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 11px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#units .sok-intel-sidebar-nav button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.74);
    color: #86efac;
    font-size: 12px;
    flex: 0 0 auto;
}

#units .sok-intel-sidebar-nav button:hover,
#units .sok-intel-sidebar-nav button.active {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(21, 128, 61, 0.15);
    color: #f8fafc;
    transform: translateX(2px);
}

#units .sok-intel-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

#units .sok-intel-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(21, 128, 61, 0.28);
    background:
        linear-gradient(135deg, rgba(5, 46, 22, 0.34), rgba(2, 6, 23, 0.96) 56%),
        radial-gradient(circle at 82% 18%, rgba(59, 130, 246, 0.14), transparent 30%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-intel-topbar h2 {
    margin: 4px 0 0;
    font-size: 25px;
    line-height: 1.15;
    color: #f8fafc;
}

#units .sok-intel-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: min(480px, 100%);
}

#units .sok-intel-tools input {
    width: min(280px, 100%);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.62);
    color: #e2e8f0;
    font-size: 13px;
    outline: none;
}

#units .sok-intel-tools button,
#units .sok-intel-user {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
}

#units .sok-intel-tools button {
    width: 40px;
    cursor: pointer;
}

#units .sok-intel-user {
    padding: 0 12px;
    white-space: nowrap;
}

#units .sok-intel-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-intel-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 132px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.9));
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#units .sok-intel-card.danger {
    border-color: rgba(248, 113, 113, 0.22);
}

#units .sok-intel-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-intel-card-head span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-intel-card-head strong {
    font-size: 26px;
    line-height: 1;
    color: #f8fafc;
    white-space: nowrap;
}

#units .sok-intel-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-intel-meter {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(51, 65, 85, 0.42);
}

#units .sok-intel-meter i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #86efac);
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.34);
}

#units .sok-intel-meter.amber i {
    background: linear-gradient(90deg, #f59e0b, #facc15);
}

#units .sok-intel-meter.blue i {
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

#units .sok-intel-meter.red i {
    background: linear-gradient(90deg, #dc2626, #fb7185);
}

#units .sok-intel-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    grid-template-areas:
        'summary feed'
        'map quick'
        'hints measures';
    gap: 16px;
}

#units .sok-summary-panel {
    grid-area: summary;
}
#units .sok-feed-panel {
    grid-area: feed;
}
#units .sok-map-panel {
    grid-area: map;
}
#units .sok-quick-panel {
    grid-area: quick;
}
#units .sok-hints-panel {
    grid-area: hints;
}
#units .sok-measures-panel {
    grid-area: measures;
}

#units .sok-tactical-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-tactical-panel-head span {
    display: inline-flex;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #86efac;
}

#units .sok-tactical-panel-head h3 {
    margin: 3px 0 0;
    font-size: 18px;
    line-height: 1.25;
    color: #f8fafc;
}

#units .sok-threat-badge {
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.26);
    background: rgba(20, 83, 45, 0.22);
    color: #bbf7d0 !important;
    white-space: nowrap;
}

#units .sok-intel-feed .sok-overview-entry {
    position: relative;
    padding-left: 22px;
}

#units .sok-intel-feed .sok-overview-entry::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 18px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

#units #sokOverviewHintsList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

#units .sok-hint-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.72)),
        radial-gradient(circle at 12% 8%, rgba(59, 130, 246, 0.14), transparent 28%);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

#units .sok-hint-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #60a5fa, #f59e0b);
    opacity: 0.9;
}

#units .sok-hint-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

#units .sok-hint-card-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    color: #f8fafc;
}

#units .sok-hint-card-description {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #cbd5e1;
    overflow-wrap: anywhere;
}

#units .sok-hint-card-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#units .sok-hint-card-meta div {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.38);
}

#units .sok-hint-card-meta strong {
    display: block;
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

#units .sok-hint-card-meta span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
    color: #cbd5e1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-hint-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
}

#units .sok-intelligence-feed-panel {
    min-height: 420px;
}

#units .sok-intelligence-feed-head p {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #94a3b8;
}

#units .sok-intelligence-feed-filters {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 12px;
    padding: 6px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.38);
    overflow-x: auto;
}

#units .sok-intelligence-feed-filters button {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 9px 11px;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

#units .sok-intelligence-feed-filters button:hover,
#units .sok-intelligence-feed-filters button.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.26);
    color: #dbeafe;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.12);
}

#units .sok-intelligence-feed-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 390px;
    overflow: auto;
    padding-right: 4px;
}

#units .sok-intelligence-feed-list::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(
        180deg,
        rgba(96, 165, 250, 0),
        rgba(96, 165, 250, 0.42),
        rgba(245, 158, 11, 0.28),
        rgba(96, 165, 250, 0)
    );
}

#units .sok-intelligence-feed-item {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.72));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

#units .sok-intelligence-feed-node {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.32);
    background: rgba(15, 23, 42, 0.96);
    color: #bfdbfe;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.16);
    font-size: 14px;
}

#units .sok-intelligence-feed-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#units .sok-intelligence-feed-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-intelligence-feed-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

#units .sok-intelligence-feed-title strong {
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-intelligence-feed-description {
    font-size: 12px;
    line-height: 1.55;
    color: #cbd5e1;
    overflow-wrap: anywhere;
}

#units .sok-intelligence-feed-empty {
    position: relative;
    z-index: 1;
    padding: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.54);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
}

#units .sok-intelligence-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.75);
    color: #cbd5e1;
}

#units .sok-intelligence-category.familien {
    border-color: rgba(248, 113, 113, 0.32);
    color: #fecaca;
    background: rgba(127, 29, 29, 0.2);
}
#units .sok-intelligence-category.unternehmen {
    border-color: rgba(45, 212, 191, 0.32);
    color: #ccfbf1;
    background: rgba(20, 83, 45, 0.18);
}
#units .sok-intelligence-category.razzien {
    border-color: rgba(249, 115, 22, 0.36);
    color: #fed7aa;
    background: rgba(124, 45, 18, 0.22);
}
#units .sok-intelligence-category.ermittlungen {
    border-color: rgba(96, 165, 250, 0.34);
    color: #dbeafe;
    background: rgba(30, 64, 175, 0.22);
}
#units .sok-intelligence-category.leitung {
    border-color: rgba(168, 85, 247, 0.34);
    color: #e9d5ff;
    background: rgba(88, 28, 135, 0.2);
}
#units .sok-intelligence-category.system {
    border-color: rgba(148, 163, 184, 0.24);
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.72);
}

#units .sok-tactical-map {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background:
        linear-gradient(rgba(34, 197, 94, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 26% 34%, rgba(34, 197, 94, 0.16), transparent 16%),
        radial-gradient(circle at 74% 62%, rgba(59, 130, 246, 0.14), transparent 18%), rgba(2, 6, 23, 0.72);
    background-size:
        32px 32px,
        32px 32px,
        auto,
        auto,
        auto;
}

#units .sok-map-node {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #86efac;
    box-shadow:
        0 0 0 7px rgba(34, 197, 94, 0.12),
        0 0 24px rgba(34, 197, 94, 0.48);
}

#units .sok-map-node.node-a {
    left: 23%;
    top: 31%;
}
#units .sok-map-node.node-b {
    left: 64%;
    top: 42%;
    background: #38bdf8;
    box-shadow:
        0 0 0 7px rgba(56, 189, 248, 0.12),
        0 0 24px rgba(56, 189, 248, 0.42);
}
#units .sok-map-node.node-c {
    left: 48%;
    top: 71%;
    background: #facc15;
    box-shadow:
        0 0 0 7px rgba(250, 204, 21, 0.12),
        0 0 24px rgba(250, 204, 21, 0.38);
}

#units .sok-map-route {
    position: absolute;
    height: 2px;
    border-radius: 999px;
    background: rgba(134, 239, 172, 0.52);
    transform-origin: left center;
}

#units .sok-map-route.route-a {
    left: 25%;
    top: 35%;
    width: 42%;
    transform: rotate(12deg);
}
#units .sok-map-route.route-b {
    left: 49%;
    top: 70%;
    width: 26%;
    transform: rotate(-42deg);
    background: rgba(56, 189, 248, 0.48);
}

#units .sok-map-label {
    position: absolute;
    left: 16px;
    bottom: 14px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(2, 6, 23, 0.72);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
}

#units .sok-quick-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#units .sok-quick-stats div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
}

#units .sok-quick-stats strong {
    font-size: 24px;
    line-height: 1;
    color: #dcfce7;
}

#units .sok-quick-stats span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-measure-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .sok-measure-chips span {
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(15, 23, 42, 0.58);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
}

#units .sok-overview-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#units .sok-overview-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-overview-section-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .sok-overview-section-title h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-overview-section-title p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-overview-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-overview-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.5);
    background: rgba(15, 23, 42, 0.54);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#units .sok-overview-entry:hover {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(15, 23, 42, 0.72);
    transform: translateY(-1px);
}

#units .sok-overview-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-overview-entry-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#units .sok-overview-entry-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .sok-overview-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .sok-overview-entry-actions button {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .sok-overview-entry-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-overview-entry-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-overview-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-overview-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-overview-field textarea {
    min-height: 96px;
    resize: vertical;
}

#units .sok-guides-shell {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

#units .sok-guides-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-guides-list-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 4px 10px;
}

#units .sok-guides-list-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-guides-list-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-guides-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-guide-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.58);
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

#units .sok-guide-item:hover {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(96, 165, 250, 0.28);
    transform: translateY(-1px);
}

#units .sok-guide-item.active {
    background: rgba(30, 64, 175, 0.22);
    border-color: rgba(96, 165, 250, 0.32);
}

#units .sok-guide-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-guide-item span {
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-guides-add {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-guides-viewer {
    display: flex;
    flex-direction: column;
    min-height: 620px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.96);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

#units .sok-guides-empty {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

#units .sok-guides-document {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 30px;
    gap: 18px;
}

#units .sok-guides-document-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#units .sok-guides-document-actions button {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-guides-document-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-guides-document-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-guides-document-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.42);
}

#units .sok-guides-document-header h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-guides-document-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-guides-document-content {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .sok-guides-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .sok-guides-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-guides-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-guides-field input,
#units .sok-guides-field textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.56);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 12px;
    outline: none;
}

#units .sok-guides-field textarea {
    min-height: 260px;
    resize: vertical;
}

#units .sok-guides-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-guides-command-header .sok-guides-add {
    align-self: flex-start;
}

#units .sok-guides-page .sok-guides-shell {
    grid-template-columns: minmax(250px, 0.78fr) minmax(0, 2.1fr);
}

#units .sok-guides-page .sok-guides-list {
    gap: 12px;
    border-radius: 24px;
    border-color: rgba(30, 41, 59, 0.86);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94)),
        radial-gradient(circle at 85% 0%, rgba(14, 165, 233, 0.08), transparent 30%);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#units .sok-guides-page .sok-guide-item {
    gap: 7px;
    border-color: rgba(51, 65, 85, 0.58);
    background: rgba(2, 6, 23, 0.34);
}

#units .sok-guides-page .sok-guide-item.active {
    background:
        linear-gradient(90deg, rgba(12, 74, 110, 0.32), rgba(15, 23, 42, 0.68)),
        radial-gradient(circle at 2% 50%, rgba(14, 165, 233, 0.16), transparent 28%);
    border-color: rgba(56, 189, 248, 0.36);
    box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.78);
}

#units .sok-guide-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

#units .sok-guide-item-meta small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7dd3fc;
}

#units .sok-guides-page .sok-guides-viewer {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94)),
        radial-gradient(circle at 95% 0%, rgba(34, 197, 94, 0.07), transparent 35%);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#units .sok-guides-page .sok-guides-document {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.7fr);
    align-items: start;
    padding: 24px;
}

#units .sok-guides-page .sok-guides-document-actions,
#units .sok-guides-page .sok-guides-editor {
    grid-column: 1 / -1;
}

#units .sok-guides-content-card,
#units .sok-guides-info-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(2, 6, 23, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#units .sok-guides-content-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-guides-content-section p {
    margin: 0;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.42);
    background: rgba(15, 23, 42, 0.54);
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.85;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#units .sok-guides-info-panel h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-guides-info-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-guides-info-grid div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(15, 23, 42, 0.52);
    min-width: 0;
}

#units .sok-guides-info-grid strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #7dd3fc;
}

#units .sok-guides-info-grid span {
    font-size: 13px;
    line-height: 1.5;
    color: #dbeafe;
    overflow-wrap: anywhere;
}

#units .sok-most-wanted-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-most-wanted-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(127, 29, 29, 0.48);
    background:
        radial-gradient(circle at 78% 24%, rgba(220, 38, 38, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-most-wanted-header h2 {
    margin: 4px 0 6px;
    font-size: 34px;
    line-height: 1.1;
    color: #f8fafc;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#units .sok-most-wanted-header p {
    margin: 0;
    max-width: 620px;
    font-size: 14px;
    line-height: 1.7;
    color: #cbd5e1;
}

#units .sok-most-wanted-alert {
    align-self: flex-start;
    padding: 10px 13px;
    border-radius: 12px;
    border: 1px solid rgba(250, 204, 21, 0.36);
    background: rgba(113, 63, 18, 0.22);
    color: #fef3c7;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

#units .sok-most-wanted-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#units .sok-most-wanted-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 360px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(127, 29, 29, 0.52);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#units .sok-most-wanted-card::before {
    content: 'WANTED';
    position: absolute;
    right: -28px;
    top: 24px;
    padding: 5px 46px;
    background: rgba(153, 27, 27, 0.88);
    color: #fee2e2;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
    transform: rotate(32deg);
}

#units .sok-most-wanted-photo {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px dashed rgba(148, 163, 184, 0.34);
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px), rgba(2, 6, 23, 0.68);
    background-size:
        22px 22px,
        22px 22px,
        auto;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#units .sok-most-wanted-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13px;
}

#units .sok-most-wanted-image-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border-radius: 11px;
    border: 1px solid rgba(250, 204, 21, 0.32);
    background: rgba(113, 63, 18, 0.2);
    color: #fef3c7;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

#units .sok-most-wanted-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#units .sok-most-wanted-priority {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(250, 204, 21, 0.42);
    background: rgba(113, 63, 18, 0.26);
    color: #fde68a;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

#units .sok-most-wanted-bounty {
    font-size: 12px;
    font-weight: 900;
    color: #fbbf24;
}

#units .sok-most-wanted-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    color: #f8fafc;
}

#units .sok-most-wanted-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
}

#units .sok-most-wanted-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-most-wanted-actions button,
#units .sok-most-wanted-form-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .sok-most-wanted-actions button.primary,
#units .sok-most-wanted-form-actions button.primary {
    background: rgba(153, 27, 27, 0.28);
    border-color: rgba(248, 113, 113, 0.42);
    color: #fee2e2;
}

#units .sok-most-wanted-actions button.subtle-danger,
#units .sok-most-wanted-form-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-most-wanted-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(127, 29, 29, 0.42);
    background: rgba(15, 23, 42, 0.68);
}

#units .sok-most-wanted-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

#units .sok-most-wanted-field.full,
#units .sok-most-wanted-form-actions {
    grid-column: 1 / -1;
}

#units .sok-most-wanted-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fca5a5;
}

#units .sok-most-wanted-field input,
#units .sok-most-wanted-field select,
#units .sok-most-wanted-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
}

#units .sok-most-wanted-field textarea {
    min-height: 105px;
    resize: vertical;
}

#units .sok-most-wanted-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-most-wanted-empty {
    padding: 22px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.42);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

#units .sok-most-wanted-sql {
    white-space: pre-wrap;
    text-align: left;
}

#units .sok-most-wanted-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid rgba(51, 65, 85, 0.52);
}

#units .sok-most-wanted-info span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-most-wanted-links {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    padding-top: 10px;
}

#units .sok-most-wanted-link {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #dbeafe;
    font-size: 0.82rem;
}

#units .sok-most-wanted-link strong {
    color: #fbbf24;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

#units .sok-files-shell {
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

#units .sok-routes-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: start;
}

#units .sok-routes-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(245, 158, 11, 0.22);
    background:
        linear-gradient(180deg, rgba(10, 18, 32, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 94% 0, rgba(245, 158, 11, 0.12), transparent 28%);
    box-shadow:
        0 18px 40px rgba(2, 6, 23, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    box-sizing: border-box;
}

#units .sok-routes-sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

#units .sok-routes-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-routes-sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-routes-add {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.34);
    background: rgba(120, 53, 15, 0.22);
    color: #fef3c7;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

#units .sok-routes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

#units .sok-routes-table {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 17px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(2, 6, 23, 0.44);
}

#units .sok-routes-table-head,
#units .sok-routes-table-row {
    display: grid;
    grid-template-columns: 1.15fr 0.9fr 0.9fr 0.86fr 0.72fr 0.72fr 0.55fr;
    gap: 10px;
    align-items: center;
}

#units .sok-routes-table-head {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(15, 23, 42, 0.74);
    color: #94a3b8;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

#units .sok-routes-table-row {
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.38);
    background: transparent;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        background 0.18s ease,
        color 0.18s ease;
}

#units .sok-routes-table-row:last-child {
    border-bottom: 0;
}

#units .sok-routes-table-row:hover,
#units .sok-routes-table-row.active {
    background: rgba(245, 158, 11, 0.09);
    color: #f8fafc;
}

#units .sok-routes-table-row strong {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: #f8fafc;
}

#units .sok-routes-row-actions span {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.24);
    background: rgba(120, 53, 15, 0.14);
    color: #fde68a;
    font-size: 10px;
    font-weight: 900;
}

#units .sok-route-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#units .sok-route-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.18);
    transform: translateY(-1px);
}

#units .sok-route-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-route-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-routes-viewer {
    width: 100%;
    min-height: 520px;
    padding: 20px 22px;
    border-radius: 24px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.28);
    box-sizing: border-box;
}

#units .sok-routes-empty {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
}

#units .sok-routes-document {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-route-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 16px;
    align-items: stretch;
}

#units .sok-route-detail-card,
#units .sok-route-map-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#units .sok-route-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#units .sok-route-detail-list div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.5);
    background: rgba(2, 6, 23, 0.34);
    min-width: 0;
}

#units .sok-route-detail-list strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-route-detail-list span {
    font-size: 13px;
    line-height: 1.55;
    color: #e2e8f0;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#units .sok-route-map-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-route-map-head h3 {
    margin: 3px 0 0;
    font-size: 19px;
    line-height: 1.25;
    color: #f8fafc;
}

#units .sok-route-map {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background:
        linear-gradient(rgba(245, 158, 11, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 158, 11, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 22% 68%, rgba(245, 158, 11, 0.16), transparent 18%),
        radial-gradient(circle at 76% 28%, rgba(34, 197, 94, 0.12), transparent 16%), rgba(2, 6, 23, 0.72);
    background-size:
        34px 34px,
        34px 34px,
        auto,
        auto,
        auto;
}

#units .sok-route-map-point {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #facc15;
    box-shadow:
        0 0 0 7px rgba(245, 158, 11, 0.13),
        0 0 26px rgba(245, 158, 11, 0.48);
    z-index: 2;
}

#units .sok-route-map-point.start {
    left: 18%;
    top: 67%;
}
#units .sok-route-map-point.mid {
    left: 48%;
    top: 43%;
    background: #fb923c;
}
#units .sok-route-map-point.end {
    left: 78%;
    top: 28%;
    background: #22c55e;
    box-shadow:
        0 0 0 7px rgba(34, 197, 94, 0.13),
        0 0 26px rgba(34, 197, 94, 0.44);
}

#units .sok-route-map-line {
    position: absolute;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #facc15);
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.32);
    transform-origin: left center;
    z-index: 1;
}

#units .sok-route-map-line.line-a {
    left: 20%;
    top: 68%;
    width: 36%;
    transform: rotate(-35deg);
}
#units .sok-route-map-line.line-b {
    left: 49%;
    top: 45%;
    width: 36%;
    transform: rotate(-21deg);
}

#units .sok-route-map-label {
    position: absolute;
    max-width: 42%;
    padding: 7px 10px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(2, 6, 23, 0.76);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-route-map-label.start {
    left: 9%;
    bottom: 18px;
}
#units .sok-route-map-label.end {
    right: 8%;
    top: 18px;
}

#units .sok-routes-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-routes-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-routes-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-routes-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-routes-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

#units .sok-routes-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-routes-heading h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-routes-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-routes-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: min(320px, 100%);
}

#units .sok-routes-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.42);
    background: rgba(2, 6, 23, 0.24);
}

#units .sok-routes-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-routes-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-routes-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-routes-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-routes-field.full {
    grid-column: 1 / -1;
}

#units .sok-routes-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-routes-field input,
#units .sok-routes-field textarea,
#units .sok-routes-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.6;
    box-sizing: border-box;
    outline: none;
}

#units .sok-routes-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-leadership-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-leadership-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

#units .sok-leadership-header h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-leadership-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-leadership-command-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(14, 165, 233, 0.22);
    background:
        radial-gradient(circle at 88% 12%, rgba(34, 197, 94, 0.12), transparent 32%),
        linear-gradient(135deg, rgba(10, 18, 32, 0.96), rgba(2, 6, 23, 0.98));
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#units .sok-leadership-command-header h2 {
    margin: 6px 0 4px;
    font-size: 28px;
    line-height: 1.15;
    color: #f8fafc;
    letter-spacing: 0;
}

#units .sok-leadership-command-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #93c5fd;
}

#units .sok-leadership-command-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-leadership-stat-card,
#units .sok-leadership-command-card {
    border: 1px solid rgba(30, 41, 59, 0.86);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94)),
        radial-gradient(circle at 90% 0%, rgba(14, 165, 233, 0.08), transparent 32%);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#units .sok-leadership-stat-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 106px;
    padding: 17px 18px;
    border-radius: 20px;
}

#units .sok-leadership-stat-card span {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dd3fc;
}

#units .sok-leadership-stat-card strong {
    font-size: 28px;
    line-height: 1;
    color: #f8fafc;
}

#units .sok-leadership-stat-card small {
    margin-top: auto;
    font-size: 11px;
    line-height: 1.45;
    color: #94a3b8;
}

#units .sok-leadership-command-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.25fr) minmax(230px, 0.85fr);
    gap: 18px;
    align-items: stretch;
}

#units .sok-leadership-command-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border-radius: 22px;
}

#units .sok-leadership-command-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.46);
}

#units .sok-leadership-command-card-head h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-leadership-command-card-head p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-leadership-personnel-list,
#units .sok-leadership-operations-list,
#units .sok-leadership-resources-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-leadership-personnel-row,
#units .sok-leadership-operation-row,
#units .sok-leadership-resource-row {
    display: grid;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.52);
    background: rgba(2, 6, 23, 0.38);
    min-width: 0;
}

#units .sok-leadership-personnel-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

#units .sok-leadership-operation-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

#units .sok-leadership-resource-row {
    grid-template-columns: minmax(0, 1fr) minmax(86px, 0.45fr);
}

#units .sok-leadership-personnel-main,
#units .sok-leadership-operation-main,
#units .sok-leadership-resource-main {
    min-width: 0;
}

#units .sok-leadership-personnel-main strong,
#units .sok-leadership-operation-main strong,
#units .sok-leadership-resource-main strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.35;
    color: #f8fafc;
}

#units .sok-leadership-personnel-main span,
#units .sok-leadership-operation-main span,
#units .sok-leadership-resource-main span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-leadership-resource-chip {
    border: 1px solid rgba(14, 165, 233, 0.34);
    background: rgba(12, 74, 110, 0.22);
    color: #bae6fd;
}

#units .sok-leadership-resource-meter {
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.84);
    overflow: hidden;
    border: 1px solid rgba(51, 65, 85, 0.5);
}

#units .sok-leadership-resource-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.86), rgba(34, 197, 94, 0.78));
}

#units .sok-leadership-management-grid {
    margin-top: 2px;
}

#units .sok-leadership-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

#units .sok-leadership-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-leadership-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

#units .sok-leadership-card-head h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-leadership-card-head p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-leadership-card-head button,
#units .sok-leadership-entry-actions button,
#units .sok-leadership-situation-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-leadership-card-head button.primary,
#units .sok-leadership-entry-actions button.primary,
#units .sok-leadership-situation-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-leadership-card-head button.subtle-danger,
#units .sok-leadership-entry-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-leadership-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .sok-leadership-entry,
#units .sok-leadership-situation,
#units .sok-leadership-roles-note,
#units .sok-leadership-role-item {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-leadership-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-leadership-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-leadership-entry strong {
    font-size: 15px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-leadership-entry p,
#units .sok-leadership-situation p,
#units .sok-leadership-roles-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
}

#units .sok-leadership-entry-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-leadership-entry-actions,
#units .sok-leadership-situation-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-leadership-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-leadership-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #93c5fd;
}

#units .sok-leadership-field input,
#units .sok-leadership-field textarea,
#units .sok-leadership-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}

#units .sok-leadership-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-leadership-empty {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.32);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-leadership-feedback {
    display: none;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
    color: #dcfce7;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-leadership-feedback.visible {
    display: block;
}

#units .sok-leadership-roles {
    gap: 16px;
}

#units .sok-leadership-role-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-leadership-role-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-leadership-role-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-leadership-role-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-family-list-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-family-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

#units .sok-family-list-header-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-family-list-header-main h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-family-list-header-main p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-family-list-add,
#units .sok-family-list-card-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-family-list-card-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-family-list-card-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-family-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

#units .sok-family-list-empty,
#units .sok-family-list-card {
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-family-list-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
}

#units .sok-family-list-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .sok-family-list-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-family-list-card-identity {
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
}

#units .sok-family-list-image {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(51, 65, 85, 0.64);
    background: rgba(15, 23, 42, 0.78);
    box-shadow: inset 0 0 18px rgba(34, 197, 94, 0.08);
}

#units .sok-family-list-image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbf7d0;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: 0.08em;
    background:
        linear-gradient(135deg, rgba(20, 83, 45, 0.24), rgba(2, 6, 23, 0.88)),
        repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.08) 0 1px, transparent 1px 12px);
}

#units .sok-family-list-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

#units .sok-family-list-card-title h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-family-list-card-title p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-family-list-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-family-list-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-family-list-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-family-list-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-family-list-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #cbd5e1;
}

#units .sok-family-list-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-family-list-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-family-list-field.full {
    grid-column: 1 / -1;
}

#units .sok-family-list-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-family-list-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-family-list-field input,
#units .sok-family-list-field textarea,
#units .sok-family-list-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}

#units .sok-family-list-field textarea {
    min-height: 110px;
    resize: vertical;
}

#units .sok-companies-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-companies-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

#units .sok-companies-header-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-companies-header-main h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-companies-header-main p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-companies-add,
#units .sok-companies-card-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-companies-card-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-companies-card-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-companies-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

#units .sok-companies-empty,
#units .sok-companies-card {
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-companies-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
}

#units .sok-companies-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .sok-companies-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-companies-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .sok-companies-card-title h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-companies-card-title p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-companies-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-companies-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-companies-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-companies-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-companies-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-companies-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #cbd5e1;
}

#units .sok-companies-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-companies-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-companies-field.full {
    grid-column: 1 / -1;
}

#units .sok-companies-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-companies-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-companies-field input,
#units .sok-companies-field textarea,
#units .sok-companies-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}

#units .sok-companies-field textarea {
    min-height: 110px;
    resize: vertical;
}

#units .sok-company-intel-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    grid-column: 1 / -1;
}

#units .sok-company-table-wrap {
    overflow-x: auto;
    border-radius: 20px;
    border: 1px solid rgba(14, 165, 233, 0.24);
    background:
        linear-gradient(180deg, rgba(8, 16, 31, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 94% 8%, rgba(56, 189, 248, 0.12), transparent 30%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-company-table-head,
#units .sok-company-table-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.25fr) minmax(130px, 0.9fr) minmax(120px, 0.82fr) minmax(
            130px,
            0.92fr
        ) minmax(96px, 0.58fr) minmax(104px, 0.62fr) minmax(90px, 0.48fr);
    align-items: center;
    gap: 12px;
    min-width: 920px;
}

#units .sok-company-table-head {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(15, 23, 42, 0.62);
    color: #7dd3fc;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#units .sok-company-table-row {
    width: 100%;
    padding: 15px 16px;
    border: 0;
    border-bottom: 1px solid rgba(30, 41, 59, 0.72);
    background: transparent;
    color: #e2e8f0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

#units .sok-company-table-row:last-child {
    border-bottom: 0;
}

#units .sok-company-table-row:hover,
#units .sok-company-table-row.active {
    background:
        linear-gradient(90deg, rgba(14, 165, 233, 0.14), rgba(15, 23, 42, 0.62)),
        radial-gradient(circle at 2% 50%, rgba(56, 189, 248, 0.16), transparent 28%);
    box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.78);
}

#units .sok-company-table-row:hover {
    transform: translateY(-1px);
}

#units .sok-company-table-primary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#units .sok-company-table-primary strong {
    font-size: 14px;
    line-height: 1.35;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-company-table-primary span,
#units .sok-company-table-cell {
    font-size: 12px;
    line-height: 1.45;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-company-table-actions {
    display: flex;
    justify-content: flex-end;
}

#units .sok-company-table-actions span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-company-detail-layout {
    min-width: 0;
}

#units .sok-company-card {
    position: relative;
    width: 100%;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    border-radius: 18px;
    border-color: rgba(14, 165, 233, 0.22);
    background:
        linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 86% 12%, rgba(56, 189, 248, 0.12), transparent 30%);
    transition:
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#units .sok-company-card:hover,
#units .sok-company-card.active {
    border-color: rgba(56, 189, 248, 0.38);
    transform: translateY(-1px);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(56, 189, 248, 0.08);
}

#units .sok-company-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #38bdf8, rgba(56, 189, 248, 0.08));
    opacity: 0;
}

#units .sok-company-card.active::before {
    opacity: 1;
}

#units .sok-company-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

#units .sok-company-risk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.28);
    background: rgba(120, 53, 15, 0.18);
    color: #fef3c7;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

#units .sok-company-dossier-viewer {
    min-width: 0;
}

#units .sok-company-dossier {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(14, 165, 233, 0.24);
    background:
        linear-gradient(180deg, rgba(8, 16, 31, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 90% 7%, rgba(56, 189, 248, 0.12), transparent 32%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-company-dossier-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-company-dossier-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-company-dossier-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-company-dossier-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-company-dossier-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(14, 165, 233, 0.24);
    background:
        linear-gradient(135deg, rgba(12, 74, 110, 0.28), rgba(2, 6, 23, 0.82) 58%),
        radial-gradient(circle at 88% 14%, rgba(59, 130, 246, 0.14), transparent 30%);
}

#units .sok-company-dossier-head h3 {
    margin: 4px 0 0;
    font-size: 28px;
    line-height: 1.12;
    color: #f8fafc;
}

#units .sok-company-dossier-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

#units .sok-company-dossier-badges span,
#units .sok-company-file-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 900;
}

#units .sok-company-dossier-badges .risk {
    border-color: rgba(251, 191, 36, 0.28);
    background: rgba(120, 53, 15, 0.18);
    color: #fef3c7;
}

#units .sok-company-file-id {
    flex-direction: column;
    align-items: flex-end;
    border-radius: 16px;
    max-width: 210px;
}

#units .sok-company-file-id span {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-company-file-id strong {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f8fafc;
}

#units .sok-company-facts,
#units .sok-company-risk-grid,
#units .sok-company-link-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#units .sok-company-facts div,
#units .sok-company-risk-grid div,
#units .sok-company-link-grid div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 13px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-company-facts strong,
#units .sok-company-risk-grid em {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    font-style: normal;
}

#units .sok-company-facts span,
#units .sok-company-risk-grid strong,
#units .sok-company-link-grid div {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#units .sok-company-dossier-grid {
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    grid-template-areas:
        'profile risk'
        'links activity';
    gap: 14px;
}

#units .sok-company-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    min-width: 0;
}

#units .sok-company-panel.profile {
    grid-area: profile;
}
#units .sok-company-panel.risk {
    grid-area: risk;
}
#units .sok-company-panel.links {
    grid-area: links;
}
#units .sok-company-panel.activity {
    grid-area: activity;
}

#units .sok-company-panel > span {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dd3fc;
}

#units .sok-company-panel h4 {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
    color: #f8fafc;
}

#units .sok-company-panel p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .sok-company-link-grid div {
    justify-content: center;
    min-height: 48px;
    font-weight: 800;
}

#units .sok-company-activity-empty {
    padding: 14px;
    border-radius: 15px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.38);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-company-detail-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(14, 165, 233, 0.24);
    background:
        linear-gradient(180deg, rgba(8, 16, 31, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 92% 8%, rgba(56, 189, 248, 0.12), transparent 32%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-company-detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-company-detail-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-company-detail-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-company-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.55fr);
    gap: 16px;
    align-items: stretch;
}

#units .sok-company-profile-panel,
#units .sok-company-risk-panel {
    min-width: 0;
    border-radius: 20px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#units .sok-company-profile-panel {
    display: grid;
    grid-template-columns: minmax(190px, 0.44fr) minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
}

#units .sok-company-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 228px;
    border-radius: 18px;
    border: 1px solid rgba(56, 189, 248, 0.24);
    background:
        linear-gradient(135deg, rgba(12, 74, 110, 0.24), rgba(2, 6, 23, 0.82)),
        repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.08) 0 1px, transparent 1px 13px);
    color: #bae6fd;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: inset 0 0 34px rgba(56, 189, 248, 0.08);
}

#units .sok-company-profile-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

#units .sok-company-profile-copy > span,
#units .sok-company-risk-panel > span {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dd3fc;
}

#units .sok-company-profile-copy h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #f8fafc;
    overflow-wrap: anywhere;
}

#units .sok-company-detail-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#units .sok-company-detail-facts div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-company-detail-facts strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-company-detail-facts span {
    font-size: 13px;
    line-height: 1.45;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-company-detail-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .sok-company-detail-text.muted {
    color: #94a3b8;
}

#units .sok-company-risk-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

#units .sok-company-risk-score {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-company-risk-score strong {
    font-size: 30px;
    line-height: 1;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
}

#units .sok-company-risk-bar {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(51, 65, 85, 0.6);
}

#units .sok-company-risk-bar i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #facc15 45%, #f97316 72%, #ef4444);
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.28);
}

#units .sok-company-risk-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#units .sok-company-risk-meta div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-company-risk-meta strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-company-risk-meta span {
    font-size: 12px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-razzia-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#units .sok-razzia-tab-group {
    position: relative;
    display: flex;
    align-items: center;
}

#units .sok-razzia-tab-group .sok-tab {
    display: inline-flex;
    align-items: center;
}

#units .sok-razzia-menu-dropdown {
    position: absolute;
    top: 44px;
    left: 0;
    min-width: 168px;
    max-width: 210px;
    display: none;
    flex-direction: column;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.88);
    background: rgba(2, 6, 23, 0.96);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
    z-index: 3;
}

#units .sok-razzia-tab-group.is-open .sok-razzia-menu-dropdown {
    display: flex;
}

#units .sok-razzia-menu-dropdown button {
    padding: 10px 12px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: #dbeafe;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

#units .sok-razzia-menu-dropdown button:hover {
    background: rgba(15, 23, 42, 0.82);
}

#units .sok-razzia-content {
    display: flex;
    flex-direction: column;
}

#units .sok-razzia-panel {
    padding: 0;
}

#units .sok-razzia-panel h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-raid-request-shell {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 18px;
    min-height: 560px;
}

#units .sok-raid-request-sidebar,
#units .sok-raid-request-viewer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-raid-request-sidebar-header h3,
#units .sok-raid-request-document-header h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-raid-request-sidebar-header p,
#units .sok-raid-request-document-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-raid-request-add,
#units .sok-raid-request-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-raid-request-actions button.primary,
#units .sok-raid-request-add {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-raid-request-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-raid-request-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-raid-request-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 15px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.5);
    background: rgba(2, 6, 23, 0.42);
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
}

#units .sok-raid-request-item.active {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(30, 64, 175, 0.18);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18);
}

#units .sok-raid-request-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-raid-request-item span {
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-raid-request-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 24px;
    border-radius: 18px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.32);
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.8;
}

#units .sok-raid-request-document {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

#units .sok-raid-request-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-raid-request-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-raid-request-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(2, 6, 23, 0.36);
}

#units .sok-raid-request-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-raid-request-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-raid-request-content {
    margin: 0;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(2, 6, 23, 0.34);
    color: #dbeafe;
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-wrap;
}

#units .sok-raid-request-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .sok-raid-request-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-raid-request-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-raid-request-field input,
#units .sok-raid-request-field textarea,
#units .sok-raid-request-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}

#units .sok-raid-request-field textarea {
    min-height: 260px;
    resize: vertical;
}

#units #sok-razzia-request .sok-raid-request-shell {
    grid-template-columns: 1fr;
    gap: 18px;
}

#units #sok-razzia-request .sok-raid-request-sidebar {
    border-radius: 22px;
    border-color: rgba(127, 29, 29, 0.28);
    background:
        linear-gradient(180deg, rgba(10, 18, 32, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 88% 8%, rgba(239, 68, 68, 0.1), transparent 30%);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units #sok-razzia-request .sok-raid-request-sidebar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

#units #sok-investigation-request .sok-raid-request-shell {
    grid-template-columns: 1fr;
    gap: 18px;
}

#units #sok-investigation-request .sok-raid-request-sidebar {
    border-radius: 22px;
    border-color: rgba(14, 165, 233, 0.28);
    background:
        linear-gradient(180deg, rgba(10, 18, 32, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.1), transparent 30%);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units #sok-investigation-request .sok-raid-request-sidebar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

#units .sok-raid-request-table {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(2, 6, 23, 0.34);
}

#units .sok-raid-request-table-head,
#units .sok-raid-request-table-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.25fr) minmax(130px, 0.8fr) minmax(135px, 0.76fr) minmax(
            100px,
            0.56fr
        ) minmax(120px, 0.62fr) minmax(90px, 0.46fr);
    align-items: center;
    gap: 12px;
    min-width: 860px;
}

#units .sok-raid-request-table-head {
    padding: 13px 15px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(15, 23, 42, 0.62);
    color: #fca5a5;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#units .sok-raid-request-table-row {
    width: 100%;
    padding: 14px 15px;
    border: 0;
    border-bottom: 1px solid rgba(30, 41, 59, 0.72);
    background: transparent;
    color: #e2e8f0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

#units .sok-raid-request-table-row:last-child {
    border-bottom: 0;
}

#units .sok-raid-request-table-row:hover,
#units .sok-raid-request-table-row.active {
    background:
        linear-gradient(90deg, rgba(127, 29, 29, 0.18), rgba(15, 23, 42, 0.62)),
        radial-gradient(circle at 2% 50%, rgba(239, 68, 68, 0.15), transparent 28%);
    box-shadow: inset 3px 0 0 rgba(248, 113, 113, 0.76);
}

#units .sok-raid-request-table-row:hover {
    transform: translateY(-1px);
}

#units .sok-raid-request-table-primary,
#units .sok-raid-request-table-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-raid-request-table-primary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .sok-raid-request-table-primary strong {
    font-size: 14px;
    line-height: 1.35;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-raid-request-table-primary span,
#units .sok-raid-request-table-cell {
    font-size: 12px;
    line-height: 1.45;
    color: #94a3b8;
}

#units .sok-raid-request-row-actions {
    display: flex;
    justify-content: flex-end;
}

#units .sok-raid-request-row-actions span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-raid-request-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 16px;
}

#units .sok-raid-request-detail-card,
#units .sok-raid-request-status-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    min-width: 0;
}

#units .sok-raid-request-detail-card h3,
#units .sok-raid-request-status-panel h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
    overflow-wrap: anywhere;
}

#units .sok-raid-request-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-raid-request-section strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fca5a5;
}

#units .sok-raid-request-section p {
    margin: 0;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(2, 6, 23, 0.34);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
}

#units .sok-raid-request-status-large {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 17px;
    border: 1px solid rgba(127, 29, 29, 0.28);
    background: rgba(127, 29, 29, 0.14);
}

#units .sok-raid-request-status-large span:first-child {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fecaca;
}

#units .sok-raid-request-status-large strong {
    font-size: 26px;
    line-height: 1.1;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
}

#units .sok-raid-request-side-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#units .sok-raid-request-side-meta div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-raid-request-side-meta strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-raid-request-side-meta span {
    font-size: 12px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-raid-planner-shell {
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
    gap: 18px;
}

#units .sok-raid-planner-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-raid-planner-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 4px 10px;
}

#units .sok-raid-planner-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-raid-planner-sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-raid-planner-add,
#units .sok-raid-planner-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-raid-planner-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-raid-planner-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-raid-planner-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-raid-planner-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
    color: #dbeafe;
    text-align: left;
    cursor: pointer;
}

#units .sok-raid-planner-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.18);
    transform: translateY(-1px);
}

#units .sok-raid-planner-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-raid-planner-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-raid-planner-viewer {
    min-height: 560px;
    padding: 20px 22px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

#units .sok-raid-planner-empty {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
}

#units .sok-raid-planner-document {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-raid-planner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-raid-planner-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-raid-planner-header h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-raid-planner-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-raid-planner-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-raid-planner-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-raid-planner-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-raid-planner-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-raid-planner-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-raid-planner-field.full {
    grid-column: 1 / -1;
}

#units .sok-raid-planner-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-raid-planner-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-raid-planner-field input,
#units .sok-raid-planner-field textarea,
#units .sok-raid-planner-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}

#units .sok-raid-planner-field select {
    appearance: auto;
}

#units .sok-raid-planner-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-raid-planner-map {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-raid-planner-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-raid-planner-map-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

#units .sok-raid-planner-tool-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(2, 6, 23, 0.52);
}

#units .sok-raid-planner-tool-label {
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-raid-planner-map-header h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-raid-planner-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.76);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-raid-planner-upload input {
    display: none;
}

#units .sok-raid-planner-draw-toggle,
#units .sok-raid-planner-erase-toggle,
#units .sok-raid-planner-draw-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.76);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-raid-planner-draw-toggle.is-active {
    background: rgba(185, 28, 28, 0.28);
    border-color: rgba(248, 113, 113, 0.42);
    color: #fef2f2;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12);
}

#units .sok-raid-planner-erase-toggle.is-active {
    background: rgba(180, 83, 9, 0.24);
    border-color: rgba(251, 191, 36, 0.44);
    color: #fef3c7;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.12);
}

#units .sok-raid-planner-draw-clear[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

#units .sok-raid-planner-color-option {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: transparent;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(2, 6, 23, 0.78);
}

#units .sok-raid-planner-color-option.is-active {
    box-shadow:
        0 0 0 2px rgba(147, 197, 253, 0.3),
        inset 0 0 0 2px rgba(2, 6, 23, 0.82);
    border-color: rgba(191, 219, 254, 0.72);
    transform: scale(1.05);
}

#units .sok-raid-planner-width-select {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
}

#units .sok-raid-planner-map-preview {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.36);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

#units .sok-raid-planner-map-canvas {
    position: relative;
    width: 100%;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

#units .sok-raid-planner-map-canvas.is-drawing {
    cursor: crosshair;
}

#units .sok-raid-planner-map-canvas.is-erasing {
    cursor: not-allowed;
}

#units .sok-raid-planner-map-canvas:not(.is-drawing) {
    cursor: default;
}

#units .sok-raid-planner-map-preview img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    background: #020617;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

#units .sok-raid-planner-drawing-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

#units .sok-raid-planner-map-canvas.is-erasing .sok-raid-planner-drawing-layer {
    pointer-events: auto;
}

#units .sok-raid-planner-drawing-line {
    fill: none;
    stroke: #93c5fd;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.96;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.62));
    pointer-events: none;
    transition:
        opacity 0.16s ease,
        filter 0.16s ease;
}

#units .sok-raid-planner-map-canvas.is-erasing .sok-raid-planner-drawing-line {
    pointer-events: stroke;
    cursor: pointer;
}

#units .sok-raid-planner-map-canvas.is-erasing .sok-raid-planner-drawing-line:hover {
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) drop-shadow(0 0 10px rgba(248, 113, 113, 0.5));
}

#units .sok-raid-planner-draw-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
}

#units .sok-raid-planner-draw-status.is-active {
    border-color: rgba(248, 113, 113, 0.4);
    background: rgba(127, 29, 29, 0.24);
    color: #fee2e2;
}

#units .sok-raid-planner-draw-status.is-erase {
    border-color: rgba(251, 191, 36, 0.38);
    background: rgba(120, 53, 15, 0.24);
    color: #fef3c7;
}

#units .sok-raid-planner-marker {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.68);
    background: rgba(30, 64, 175, 0.88);
    color: #eff6ff;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    z-index: 3;
}

#units .sok-raid-planner-marker-wrap {
    position: absolute;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    z-index: 3;
}

#units .sok-raid-planner-marker.active {
    background: rgba(180, 83, 9, 0.94);
    border-color: rgba(253, 230, 138, 0.82);
    box-shadow:
        0 0 0 3px rgba(245, 158, 11, 0.18),
        0 10px 20px rgba(0, 0, 0, 0.32);
}

#units .sok-raid-planner-marker-label {
    position: absolute;
    left: 32px;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.82);
    background: rgba(2, 6, 23, 0.88);
    color: #f8fafc;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    transform: translateY(-50%);
}

#units .sok-raid-planner-marker-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-raid-planner-marker-panel h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-raid-planner-marker-panel p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-raid-planner-marker-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(2, 6, 23, 0.36);
}

#units .sok-raid-planner-marker-list h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-raid-planner-marker-list-empty {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-raid-planner-marker-list-item {
    display: grid;
    grid-template-columns: auto minmax(110px, 0.8fr) minmax(160px, 1.4fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 13px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(15, 23, 42, 0.56);
}

#units .sok-raid-planner-marker-list-item.active {
    border-color: rgba(253, 230, 138, 0.52);
    background: rgba(120, 53, 15, 0.18);
}

#units .sok-raid-planner-marker-list-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.68);
    background: rgba(30, 64, 175, 0.82);
    color: #eff6ff;
    font-size: 12px;
    font-weight: 900;
}

#units .sok-raid-planner-marker-list-type {
    font-size: 12px;
    font-weight: 800;
    color: #bfdbfe;
}

#units .sok-raid-planner-marker-list-note {
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-raid-planner-marker-list-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#units .sok-raid-planner-marker-list-actions button {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.76);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .sok-raid-planner-marker-list-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-raid-planner-marker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-raid-planner-marker-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-raid-planner-marker-field.full {
    grid-column: 1 / -1;
}

#units .sok-raid-planner-marker-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-raid-planner-marker-field input,
#units .sok-raid-planner-marker-field textarea,
#units .sok-raid-planner-marker-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}

#units .sok-raid-planner-marker-field textarea {
    min-height: 110px;
    resize: vertical;
}

#units .sok-raid-planner-marker-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-raid-planner-marker-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-raid-planner-marker-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-raid-planner-marker-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-raid-planner-map-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.8;
    padding: 24px;
}

#units .sok-raid-planner-document.sok-raid-tactical-document {
    gap: 18px;
    background:
        radial-gradient(circle at 76% 0%, rgba(239, 68, 68, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.2), rgba(2, 6, 23, 0.04));
}

#units .sok-raid-tactical-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(127, 29, 29, 0.34);
    background:
        linear-gradient(135deg, rgba(127, 29, 29, 0.24), rgba(2, 6, 23, 0.88) 58%),
        radial-gradient(circle at 88% 18%, rgba(249, 115, 22, 0.12), transparent 30%);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-raid-tactical-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#units .sok-raid-tactical-title h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.14;
    color: #f8fafc;
    overflow-wrap: anywhere;
}

#units .sok-raid-tactical-title p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
}

#units .sok-raid-tactical-layout {
    display: grid;
    grid-template-columns: minmax(230px, 0.76fr) minmax(360px, 1.4fr) minmax(230px, 0.72fr);
    grid-template-areas:
        'details map resources'
        'notes notes resources';
    gap: 16px;
    align-items: stretch;
}

#units .sok-raid-tactical-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    min-width: 0;
}

#units .sok-raid-tactical-card.details {
    grid-area: details;
}
#units .sok-raid-tactical-card.map {
    grid-area: map;
}
#units .sok-raid-tactical-card.resources {
    grid-area: resources;
}
#units .sok-raid-tactical-card.notes {
    grid-area: notes;
}

#units .sok-raid-tactical-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-raid-tactical-card-head h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-raid-tactical-list,
#units .sok-raid-resource-grid,
#units .sok-raid-status-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#units .sok-raid-tactical-list div,
#units .sok-raid-resource-grid div,
#units .sok-raid-status-grid div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-raid-tactical-list strong,
#units .sok-raid-resource-grid strong,
#units .sok-raid-status-grid strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-raid-tactical-list span,
#units .sok-raid-resource-grid span,
#units .sok-raid-status-grid span {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-raid-tactical-map-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

#units .sok-raid-tactical-map-shell .sok-raid-planner-map-preview {
    min-height: 420px;
    height: 100%;
    border-style: solid;
    border-color: rgba(127, 29, 29, 0.34);
    background:
        radial-gradient(circle at 38% 42%, rgba(239, 68, 68, 0.1), transparent 22%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.92));
}

#units .sok-raid-tactical-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#units .sok-raid-tactical-toolbar button {
    padding: 8px 11px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.74);
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
    cursor: not-allowed;
}

#units .sok-raid-tactical-toolbar-note {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

#units .sok-raid-tactical-surface {
    position: relative;
    width: 100%;
    min-height: 420px;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.13), transparent 24%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.98));
    background-size:
        32px 32px,
        32px 32px,
        auto,
        auto;
}

#units .sok-raid-tactical-surface.has-map {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #020617;
}

#units .sok-raid-tactical-surface.has-map .sok-raid-planner-map-canvas {
    height: 100%;
    min-height: 420px;
}

#units .sok-raid-tactical-surface.has-map .sok-raid-planner-map-canvas img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

#units .sok-raid-tactical-surface::before,
#units .sok-raid-tactical-surface::after {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(96, 165, 250, 0.12);
    border-radius: 16px;
    pointer-events: none;
}

#units .sok-raid-tactical-surface.has-map::before,
#units .sok-raid-tactical-surface.has-map::after {
    z-index: 2;
}

#units .sok-raid-tactical-surface::after {
    inset: 50% 18px auto;
    border-width: 1px 0 0;
    border-radius: 0;
}

#units .sok-raid-tactical-empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
}

#units .sok-raid-tactical-empty strong {
    color: #dbeafe;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#units .sok-raid-tactical-surface-legend {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .sok-raid-tactical-surface-legend span {
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.62);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
}

#units .sok-raid-map-placeholder {
    position: relative;
    width: 100%;
    min-height: 420px;
    overflow: hidden;
    border-radius: 17px;
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 42% 48%, rgba(239, 68, 68, 0.18), transparent 24%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.96));
    background-size:
        32px 32px,
        32px 32px,
        auto,
        auto;
}

#units .sok-raid-map-zone {
    position: absolute;
    left: 35%;
    top: 29%;
    width: 28%;
    height: 30%;
    border: 2px solid rgba(248, 113, 113, 0.86);
    border-radius: 42% 58% 50% 48%;
    background: rgba(127, 29, 29, 0.22);
    box-shadow:
        0 0 34px rgba(239, 68, 68, 0.24),
        inset 0 0 22px rgba(248, 113, 113, 0.08);
    transform: rotate(-8deg);
}

#units .sok-raid-map-node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translate(-50%, -50%);
    color: #f8fafc;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-raid-map-node::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid rgba(254, 226, 226, 0.9);
    background: #ef4444;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.62);
}

#units .sok-raid-map-node.entry::before {
    background: #f97316;
}
#units .sok-raid-map-node.alt::before {
    background: #facc15;
}
#units .sok-raid-map-node.secure::before {
    background: #38bdf8;
}
#units .sok-raid-map-node.target {
    left: 49%;
    top: 43%;
}
#units .sok-raid-map-node.entry {
    left: 24%;
    top: 68%;
}
#units .sok-raid-map-node.alt {
    left: 73%;
    top: 70%;
}
#units .sok-raid-map-node.secure {
    left: 68%;
    top: 24%;
}

#units .sok-raid-notes-body {
    margin: 0;
    padding: 14px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
}

#units .sok-razzia-subpanel {
    display: none;
}

#units .sok-razzia-subpanel.active {
    display: block;
}

#units .sok-files-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-files-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 4px 10px;
}

#units .sok-files-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-files-sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-files-add {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-file-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.58);
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

#units .sok-file-item:hover {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(96, 165, 250, 0.28);
    transform: translateY(-1px);
}

#units .sok-file-item.active {
    background: rgba(30, 64, 175, 0.22);
    border-color: rgba(96, 165, 250, 0.32);
}

#units .sok-file-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-files-viewer {
    display: flex;
    flex-direction: column;
    min-height: 620px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.96);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

#units .sok-files-empty {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

#units .sok-files-document {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 30px;
    gap: 18px;
}

#units .sok-files-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#units .sok-files-actions button {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-files-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-files-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-files-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.42);
}

#units .sok-files-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-files-heading h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-files-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 14px;
}

#units .sok-files-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .sok-files-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-files-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-files-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
    white-space: pre-wrap;
}

#units .sok-files-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .sok-files-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-files-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-files-field input,
#units .sok-files-field textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.56);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 12px;
    outline: none;
}

#units .sok-files-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-files-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 2px;
}

#units .sok-files-tab {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-files-tab.active {
    background: rgba(30, 64, 175, 0.22);
    border-color: rgba(96, 165, 250, 0.32);
    color: #eff6ff;
}

#units .sok-files-tab-panels {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .sok-files-tab-panel {
    display: none;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-files-tab-panel.active {
    display: block;
}

#units .sok-files-tab-panel h3 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-files-tab-panel p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-file-entries-shell {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

#units .sok-file-entries-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-file-entries-add {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-entry-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.56);
    background: rgba(2, 6, 23, 0.42);
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

#units .sok-file-entry-item:hover {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(96, 165, 250, 0.28);
}

#units .sok-file-entry-item.active {
    background: rgba(30, 64, 175, 0.18);
    border-color: rgba(96, 165, 250, 0.34);
}

#units .sok-file-entry-item strong {
    font-size: 13px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-entry-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-file-entry-empty {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.32);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-file-entry-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.56);
    background: rgba(2, 6, 23, 0.38);
}

#units .sok-file-entry-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-entry-detail-header h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-entry-detail-header p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-file-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

#units .sok-file-entry-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-file-entry-field.full {
    grid-column: 1 / -1;
}

#units .sok-file-entry-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-entry-field input,
#units .sok-file-entry-field textarea,
#units .sok-file-entry-field select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 11px;
    outline: none;
}

#units .sok-file-entry-field textarea {
    min-height: 140px;
    resize: vertical;
}

#units .sok-file-entry-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-file-entry-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-entry-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-file-entry-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-file-entry-attachments {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid rgba(51, 65, 85, 0.34);
}

#units .sok-file-entry-attachment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-entry-attachment-head h5 {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-entry-attachment-upload {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-entry-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

#units .sok-file-entry-attachment-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-file-entry-attachment-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: rgba(2, 6, 23, 0.58);
}

#units .sok-file-entry-attachment-card strong {
    font-size: 12px;
    line-height: 1.4;
    color: #e2e8f0;
    word-break: break-word;
}

#units .sok-file-entry-attachment-card span {
    font-size: 11px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-file-entry-attachment-actions {
    display: flex;
    gap: 8px;
}

#units .sok-file-entry-attachment-actions button {
    flex: 1;
    padding: 7px 9px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

#units .sok-file-evidence-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px solid rgba(51, 65, 85, 0.34);
}

#units .sok-file-evidence-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-evidence-head h5 {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-evidence-head p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-file-evidence-add {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-evidence-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-file-evidence-empty {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.32);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-file-evidence-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-file-evidence-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-evidence-card-header strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-evidence-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-file-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

#units .sok-file-evidence-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-file-evidence-field.full {
    grid-column: 1 / -1;
}

#units .sok-file-evidence-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-evidence-field input,
#units .sok-file-evidence-field textarea,
#units .sok-file-evidence-field select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 11px;
    outline: none;
}

#units .sok-file-evidence-field textarea {
    min-height: 110px;
    resize: vertical;
}

#units .sok-file-evidence-file {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.64);
    background: rgba(2, 6, 23, 0.28);
}

#units .sok-file-evidence-file span {
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-file-evidence-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-file-evidence-preview img {
    display: block;
    max-width: 220px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    object-fit: cover;
    background: #0f172a;
}

#units .sok-file-evidence-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-file-evidence-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-evidence-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-file-evidence-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-file-members-shell {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

#units .sok-file-members-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-file-members-add {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#units .sok-file-member-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 13px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.8);
    color: #bfdbfe;
    font-size: 13px;
    font-weight: 900;
}

#units .sok-file-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#units .sok-file-member-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

#units .sok-file-member-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.18);
    transform: translateY(-1px);
}

#units .sok-file-member-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-member-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-file-member-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-member-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-member-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#units .sok-file-member-profile .sok-file-member-avatar {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    border-radius: 16px;
}

#units .sok-file-member-image-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-family-image-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

#units .sok-file-family-image-row .sok-family-org-mark {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
}

#units .sok-file-family-image-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
}

#units .sok-file-family-image-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-member-detail-header h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-member-detail-header p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-file-member-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-file-member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#units .sok-file-member-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    box-sizing: border-box;
}

#units .sok-file-member-field.full {
    grid-column: 1 / -1;
}

#units .sok-file-member-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-member-field input,
#units .sok-file-member-field textarea,
#units .sok-file-member-field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 11px;
    outline: none;
}

#units .sok-file-member-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-file-member-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-file-member-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-member-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-file-member-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-file-vehicles-shell {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

#units .sok-file-vehicles-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-file-vehicles-add {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-vehicle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#units .sok-file-vehicle-thumb {
    width: 64px;
    height: 44px;
    flex: 0 0 64px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.8);
    color: #bfdbfe;
    font-size: 18px;
    font-weight: 900;
}

#units .sok-file-vehicle-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#units .sok-file-vehicle-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

#units .sok-file-vehicle-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.18);
    transform: translateY(-1px);
}

#units .sok-file-vehicle-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-vehicle-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-file-vehicle-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-vehicle-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-vehicle-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#units .sok-file-vehicle-profile .sok-file-vehicle-thumb {
    width: 96px;
    height: 66px;
    flex-basis: 96px;
    border-radius: 16px;
}

#units .sok-file-vehicle-image-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-vehicle-detail-header h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-vehicle-detail-header p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-file-vehicle-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-file-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#units .sok-file-vehicle-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    box-sizing: border-box;
}

#units .sok-file-vehicle-field.full {
    grid-column: 1 / -1;
}

#units .sok-file-vehicle-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-vehicle-field input,
#units .sok-file-vehicle-field textarea,
#units .sok-file-vehicle-field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 11px;
    outline: none;
}

#units .sok-file-vehicle-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-file-vehicle-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-file-vehicle-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-vehicle-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-file-vehicle-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-file-locations-shell {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

#units .sok-file-locations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-file-locations-add {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-location-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#units .sok-file-location-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.18);
    transform: translateY(-1px);
}

#units .sok-file-location-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-location-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-file-location-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-location-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-location-detail-header h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-location-detail-header p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-file-location-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#units .sok-file-location-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-file-location-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#units .sok-file-location-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    box-sizing: border-box;
}

#units .sok-file-location-field.full {
    grid-column: 1 / -1;
}

#units .sok-file-location-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-location-field input,
#units .sok-file-location-field textarea,
#units .sok-file-location-field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 11px;
    outline: none;
}

#units .sok-file-location-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-file-location-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-file-location-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-location-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-file-location-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-file-routes-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .sok-file-routes-linker {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-routes-linker h4 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-routes-linker p {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-file-route-link-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 10px;
    min-width: min(100%, 440px);
}

#units .sok-file-route-link-form select,
#units .sok-file-route-link-form button,
#units .sok-file-route-item button,
#units .sok-file-route-item-button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 12px;
}

#units .sok-file-route-link-form button,
#units .sok-file-route-item button,
#units .sok-file-route-item-button {
    cursor: pointer;
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
    text-align: center;
}

#units .sok-file-routes-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-file-route-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.5);
}

#units .sok-file-route-item div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

#units .sok-file-route-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-route-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-file-route-item button {
    width: auto;
    white-space: nowrap;
    background: rgba(127, 29, 29, 0.18);
    border-color: rgba(185, 28, 28, 0.36);
    color: #fecaca;
}

#units .sok-file-document-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#units .sok-file-document-actions button:first-child {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-file-overview-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .sok-file-overview-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-overview-header h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    color: #f8fafc;
}

#units .sok-file-overview-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-file-overview-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-file-overview-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.42);
    background: rgba(2, 6, 23, 0.24);
}

#units .sok-file-overview-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-overview-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-file-overview-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-file-overview-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.48);
}

#units .sok-file-overview-stat strong {
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    color: #f8fafc;
}

#units .sok-file-overview-stat span {
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-file-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#units .sok-file-overview-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-overview-card h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    color: #f8fafc;
}

#units .sok-file-overview-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-file-overview-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.42);
    background: rgba(2, 6, 23, 0.24);
}

#units .sok-file-overview-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-overview-item span {
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-file-overview-empty {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.32);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-file-rating-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .sok-file-rating-empty {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.32);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-file-rating-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-rating-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-rating-card-header h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-rating-card-header p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-file-rating-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#units .sok-file-rating-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-file-rating-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

#units .sok-file-rating-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-file-rating-field.full {
    grid-column: 1 / -1;
}

#units .sok-file-rating-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-rating-field input,
#units .sok-file-rating-field textarea,
#units .sok-file-rating-field select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 11px;
    outline: none;
}

#units .sok-file-rating-field textarea {
    min-height: 140px;
    resize: vertical;
}

#units .sok-file-rating-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-file-rating-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(96, 165, 250, 0.38);
    background: rgba(30, 64, 175, 0.32);
    color: #eff6ff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-org-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-color: rgba(21, 128, 61, 0.32);
    background:
        linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 88% 10%, rgba(34, 197, 94, 0.12), transparent 30%);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#units .sok-org-card:hover {
    border-color: rgba(34, 197, 94, 0.36);
    transform: translateY(-2px);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(34, 197, 94, 0.08);
}

#units .sok-org-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #22c55e, rgba(34, 197, 94, 0.08));
}

#units .sok-org-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

#units .sok-risk-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.26);
    background: rgba(127, 29, 29, 0.18);
    color: #fecaca;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

#units .sok-dossier-list-item {
    position: relative;
    gap: 7px;
    border-radius: 16px;
    background: rgba(2, 6, 23, 0.44);
}

#units .sok-dossier-list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.5);
    opacity: 0;
}

#units .sok-dossier-list-item.active::before {
    opacity: 1;
}

#units .sok-dossier-list-type {
    display: inline-flex;
    width: max-content;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.18);
    color: #bbf7d0 !important;
    font-size: 10px !important;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#units .sok-dossier-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#units .sok-dossier-list-meta em {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.6);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

#units .sok-files-document.sok-family-dossier-document {
    gap: 18px;
    background:
        linear-gradient(180deg, rgba(2, 6, 23, 0.3), rgba(2, 6, 23, 0.08)),
        radial-gradient(circle at 82% 2%, rgba(34, 197, 94, 0.08), transparent 32%);
}

#units .sok-family-dossier-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

#units .sok-family-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.76);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .sok-family-dossier-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-family-dossier-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-family-dossier-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-family-dossier-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 18px;
    align-items: stretch;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(21, 128, 61, 0.32);
    background:
        linear-gradient(135deg, rgba(5, 46, 22, 0.34), rgba(2, 6, 23, 0.94) 56%),
        radial-gradient(circle at 86% 10%, rgba(34, 197, 94, 0.14), transparent 30%);
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-family-dossier-identity {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-width: 0;
}

#units .sok-family-org-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 22px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background:
        linear-gradient(135deg, rgba(20, 83, 45, 0.28), rgba(2, 6, 23, 0.88)),
        repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.08) 0 1px, transparent 1px 12px);
    color: #bbf7d0;
    font-size: 20px;
    font-weight: 950;
    letter-spacing: 0.12em;
    box-shadow: inset 0 0 28px rgba(34, 197, 94, 0.1);
}

#units .sok-family-org-image {
    padding: 0;
    object-fit: cover;
    overflow: hidden;
    letter-spacing: 0;
}

#units .sok-family-dossier-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

#units .sok-family-dossier-title h2 {
    margin: 0;
    font-size: 32px;
    line-height: 1.08;
    color: #f8fafc;
    overflow-wrap: anywhere;
}

#units .sok-family-dossier-subline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .sok-family-dossier-subline span,
#units .sok-family-risk-chip,
#units .sok-family-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

#units .sok-family-risk-chip.low {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(22, 101, 52, 0.18);
    color: #bbf7d0;
}
#units .sok-family-risk-chip.medium {
    border-color: rgba(250, 204, 21, 0.36);
    background: rgba(113, 63, 18, 0.2);
    color: #fef08a;
}
#units .sok-family-risk-chip.high {
    border-color: rgba(249, 115, 22, 0.38);
    background: rgba(124, 45, 18, 0.22);
    color: #fed7aa;
}
#units .sok-family-risk-chip.critical {
    border-color: rgba(239, 68, 68, 0.42);
    background: rgba(127, 29, 29, 0.26);
    color: #fecaca;
}
#units .sok-family-risk-chip.unknown {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
}
#units .sok-family-status-chip.active {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(22, 101, 52, 0.16);
    color: #bbf7d0;
}
#units .sok-family-status-chip.watch {
    border-color: rgba(251, 191, 36, 0.34);
    background: rgba(120, 53, 15, 0.2);
    color: #fde68a;
}
#units .sok-family-status-chip.inactive {
    border-color: rgba(100, 116, 139, 0.34);
    background: rgba(30, 41, 59, 0.42);
    color: #cbd5e1;
}
#units .sok-family-status-chip.unknown {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
}

#units .sok-family-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
}

#units .sok-family-color-chip i {
    width: 12px;
    height: 12px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}

#units .sok-family-dossier-summary {
    margin: 0;
    max-width: 780px;
    font-size: 13px;
    line-height: 1.75;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .sok-family-dossier-quickfacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 2px;
}

#units .sok-family-dossier-quickfacts div,
#units .sok-family-risk-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-family-dossier-quickfacts strong,
#units .sok-family-risk-meta strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-family-dossier-quickfacts span,
#units .sok-family-risk-meta span {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-family-risk-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(34, 197, 94, 0.24);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    min-width: 0;
}

#units .sok-family-risk-card > span {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #86efac;
}

#units .sok-family-risk-card h3 {
    margin: 0;
    font-size: 30px;
    line-height: 1.05;
    color: #f8fafc;
    overflow-wrap: anywhere;
}

#units .sok-family-risk-meter {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.6);
    background: rgba(15, 23, 42, 0.9);
}

#units .sok-family-risk-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #facc15 45%, #f97316 72%, #ef4444);
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.28);
}

#units .sok-family-risk-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#units .sok-family-dossier-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.76);
    background: rgba(2, 6, 23, 0.34);
}

#units .sok-family-dossier-tabs .sok-files-tab {
    border-radius: 12px;
}

#units .sok-dossier-shell {
    gap: 16px;
}

#units .sok-dossier-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(21, 128, 61, 0.32);
    background:
        linear-gradient(135deg, rgba(5, 46, 22, 0.38), rgba(2, 6, 23, 0.94) 58%),
        radial-gradient(circle at 90% 8%, rgba(34, 197, 94, 0.14), transparent 30%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-dossier-head-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#units .sok-dossier-head-main h3 {
    margin: 0;
    font-size: 28px;
    line-height: 1.12;
    color: #f8fafc;
}

#units .sok-dossier-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .sok-dossier-badges span,
#units .sok-dossier-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 900;
}

#units .sok-dossier-badges .risk {
    border-color: rgba(248, 113, 113, 0.26);
    background: rgba(127, 29, 29, 0.18);
    color: #fecaca;
}

#units .sok-dossier-id {
    flex-direction: column;
    align-items: flex-end;
    border-radius: 16px;
    padding: 11px 13px;
    white-space: nowrap;
}

#units .sok-dossier-id span {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-dossier-id strong {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #f8fafc;
}

#units .sok-dossier-meta-grid,
#units .sok-dossier-threat-grid,
#units .sok-dossier-assets,
#units .sok-dossier-members-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#units .sok-dossier-meta-grid div,
#units .sok-dossier-threat-grid div,
#units .sok-dossier-assets div,
#units .sok-dossier-member-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 13px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-dossier-meta-grid strong,
#units .sok-dossier-threat-grid span,
#units .sok-dossier-assets span,
#units .sok-dossier-member-card span,
#units .sok-dossier-member-card em {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    font-style: normal;
}

#units .sok-dossier-meta-grid span,
#units .sok-dossier-threat-grid strong,
#units .sok-dossier-assets strong,
#units .sok-dossier-member-card strong {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#units .sok-dossier-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
        'summary threat'
        'feed members'
        'assets notes'
        'rating rating';
    gap: 14px;
}

#units .sok-dossier-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(30, 80, 48, 0.38);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    min-width: 0;
}

#units .sok-dossier-panel.summary {
    grid-area: summary;
}
#units .sok-dossier-panel.threat {
    grid-area: threat;
}
#units .sok-dossier-panel.feed {
    grid-area: feed;
}
#units .sok-dossier-panel.members {
    grid-area: members;
}
#units .sok-dossier-panel.assets {
    grid-area: assets;
}
#units .sok-dossier-panel.notes {
    grid-area: notes;
}
#units .sok-dossier-panel.rating {
    grid-area: rating;
}

#units .sok-dossier-panel-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#units .sok-dossier-panel-head span {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #86efac;
}

#units .sok-dossier-panel-head h4 {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
    color: #f8fafc;
}

#units .sok-dossier-panel p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .sok-dossier-feed .sok-file-overview-item {
    position: relative;
    padding-left: 18px;
}

#units .sok-dossier-feed .sok-file-overview-item::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 17px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.48);
}

#units .sok-member-mini-card {
    border-radius: 15px;
    border-color: rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
}

#units .sok-member-mini-meta {
    display: inline-flex;
    width: max-content;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.6);
    background: rgba(2, 6, 23, 0.5);
    color: #cbd5e1 !important;
    font-size: 10px !important;
    font-weight: 900;
}

@media (max-width: 1100px) {
    #units .sok-content {
        grid-template-columns: 1fr;
    }

    #units .sok-intel-sidebar {
        position: relative;
        top: auto;
    }

    #units .sok-content > .sok-intel-sidebar,
    #units .sok-content > .sok-panel {
        grid-column: 1;
    }

    #units .sok-intel-sidebar-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #units .sok-intel-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-most-wanted-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-intel-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            'summary'
            'feed'
            'map'
            'quick'
            'hints'
            'measures';
    }

    #units .sok-intel-hero {
        grid-template-columns: 1fr;
    }

    #units .sok-overview-board {
        grid-template-columns: 1fr;
    }

    #units .sok-guides-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-guides-command-header {
        flex-direction: column;
    }

    #units .sok-guides-page .sok-guides-document {
        grid-template-columns: 1fr;
    }

    #units .sok-guides-viewer {
        min-height: 520px;
    }

    #units .sok-files-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-files-viewer {
        min-height: 520px;
    }

    #units .sok-family-dossier-hero,
    #units .sok-family-dossier-identity {
        grid-template-columns: 1fr;
    }

    #units .sok-family-dossier-quickfacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-routes-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-routes-viewer {
        min-height: 520px;
    }

    #units .sok-files-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-file-entries-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-file-evidence-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-file-members-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-file-member-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-file-vehicles-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-file-vehicle-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-file-locations-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-file-routes-linker {
        flex-direction: column;
    }

    #units .sok-file-routes-list,
    #units .sok-file-route-link-form {
        grid-template-columns: 1fr;
        width: 100%;
    }

    #units .sok-file-location-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-file-overview-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-file-overview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-file-overview-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-file-rating-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-dossier-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            'summary'
            'threat'
            'feed'
            'members'
            'assets'
            'notes'
            'rating';
    }

    #units .sok-dossier-meta-grid,
    #units .sok-dossier-threat-grid,
    #units .sok-dossier-assets,
    #units .sok-dossier-members-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-routes-header {
        flex-direction: column;
    }

    #units .sok-routes-table {
        overflow-x: auto;
    }

    #units .sok-routes-table-head,
    #units .sok-routes-table-row {
        min-width: 920px;
    }

    #units .sok-route-detail-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-routes-meta,
    #units .sok-routes-editor {
        grid-template-columns: 1fr;
    }

    #units .sok-family-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-companies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-company-intel-shell,
    #units .sok-company-dossier-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-company-detail-grid,
    #units .sok-company-profile-panel {
        grid-template-columns: 1fr;
    }

    #units .sok-company-dossier-grid {
        grid-template-areas:
            'profile'
            'risk'
            'links'
            'activity';
    }

    #units .sok-company-facts,
    #units .sok-company-risk-grid,
    #units .sok-company-link-grid,
    #units .sok-company-detail-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-family-list-header {
        flex-direction: column;
    }

    #units .sok-companies-header {
        flex-direction: column;
    }

    #units .sok-family-list-meta,
    #units .sok-family-list-editor {
        grid-template-columns: 1fr;
    }

    #units .sok-companies-meta,
    #units .sok-companies-editor {
        grid-template-columns: 1fr;
    }

    #units .sok-raid-planner-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-raid-request-detail {
        grid-template-columns: 1fr;
    }

    #units #sok-investigation-request .sok-raid-request-sidebar-header {
        flex-direction: column;
    }

    #units .sok-raid-planner-viewer {
        min-height: 520px;
    }

    #units .sok-leadership-command-stats,
    #units .sok-leadership-command-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-raid-tactical-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            'details'
            'map'
            'resources'
            'notes';
    }

    #units .sok-raid-planner-meta,
    #units .sok-raid-planner-editor {
        grid-template-columns: 1fr;
    }

    #units .sok-raid-planner-marker-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-leadership-grid,
    #units .sok-leadership-role-list {
        grid-template-columns: 1fr;
    }

    #units .sok-leadership-card-head,
    #units .sok-leadership-entry-header {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    #units .sok-intel-sidebar-nav,
    #units .sok-intel-cards,
    #units .sok-quick-stats {
        grid-template-columns: 1fr;
    }

    #units .sok-intel-topbar,
    #units .sok-intel-tools,
    #units .sok-most-wanted-header {
        flex-direction: column;
        align-items: stretch;
    }

    #units .sok-most-wanted-header h2 {
        font-size: 28px;
    }

    #units .sok-most-wanted-alert {
        white-space: normal;
    }

    #units .sok-intel-tools {
        min-width: 0;
    }

    #units .sok-intel-tools input {
        width: 100%;
    }

    #units .sok-dossier-head {
        flex-direction: column;
    }

    #units .sok-family-dossier-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    #units .sok-family-dossier-actions {
        justify-content: flex-start;
    }

    #units .sok-family-dossier-hero {
        padding: 16px;
    }

    #units .sok-family-dossier-title h2 {
        font-size: 25px;
    }

    #units .sok-family-dossier-quickfacts {
        grid-template-columns: 1fr;
    }

    #units .sok-dossier-id {
        align-items: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    #units .sok-dossier-meta-grid,
    #units .sok-dossier-threat-grid,
    #units .sok-dossier-assets,
    #units .sok-dossier-members-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-company-dossier-head {
        flex-direction: column;
    }

    #units .sok-company-file-id {
        align-items: flex-start;
        max-width: none;
        width: 100%;
        box-sizing: border-box;
    }

    #units .sok-company-facts,
    #units .sok-company-risk-grid,
    #units .sok-company-link-grid,
    #units .sok-company-detail-facts {
        grid-template-columns: 1fr;
    }

    #units .sok-company-detail-card,
    #units .sok-company-profile-panel,
    #units .sok-company-risk-panel {
        padding: 14px;
    }

    #units .sok-route-detail-list {
        grid-template-columns: 1fr;
    }

    #units .sok-route-map {
        min-height: 260px;
    }

    #units .sok-intel-hero {
        padding: 18px;
    }

    #units .sok-raid-tactical-topbar {
        flex-direction: column;
    }

    #units #sok-razzia-request .sok-raid-request-sidebar-header {
        flex-direction: column;
    }

    #units .sok-raid-tactical-title h2 {
        font-size: 24px;
    }

    #units .sok-raid-tactical-map-shell .sok-raid-planner-map-preview,
    #units .sok-raid-map-placeholder {
        min-height: 300px;
    }

    #units .sok-intel-copy h2 {
        font-size: 24px;
    }

    #units .sok-intel-stats {
        grid-template-columns: 1fr;
    }

    #units .sok-family-list-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-companies-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-files-meta {
        grid-template-columns: 1fr;
    }

    #units .sok-file-entry-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-file-overview-meta,
    #units .sok-file-overview-stats {
        grid-template-columns: 1fr;
    }
}

#units .internal-guides-shell {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

#units .internal-guides-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .internal-guides-list-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 4px 10px;
}

#units .internal-guides-list-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .internal-guides-list-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .internal-guides-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-guide-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.78);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        color 0.18s ease;
}

#units .internal-guide-item:hover {
    border-color: #334155;
    background: rgba(30, 41, 59, 0.82);
    transform: translateY(-1px);
}

#units .internal-guide-item.active {
    border-color: rgba(96, 165, 250, 0.5);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.24), rgba(15, 23, 42, 0.88));
    color: #f8fafc;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28);
}

#units .internal-guide-item-title {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

#units .internal-guide-item-text {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .internal-guide-item.active .internal-guide-item-text {
    color: #cbd5e1;
}

#units .internal-guides-viewer {
    display: flex;
    flex-direction: column;
    min-height: 620px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.96);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

#units .internal-guides-document {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(2, 6, 23, 0.12));
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.58) transparent;
}

#units .internal-guides-document::-webkit-scrollbar {
    width: 10px;
}

#units .internal-guides-document::-webkit-scrollbar-track {
    background: transparent;
}

#units .internal-guides-document::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.56);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

#units .internal-guides-document > * {
    width: min(100%, 860px);
    margin-inline: auto;
}

#units .internal-guides-document-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 28px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    position: relative;
}

#units .internal-guides-document-eyebrow {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9fb0c5;
}

#units .internal-guides-document-title {
    margin: 0;
    font-size: 40px;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #f8fafc;
    text-wrap: balance;
}

#units .internal-guides-document-header::after {
    content: 'Dokumententyp: Leitfaden\A Version: 1.0\A Verantwortlich: Abteilungsleitung Interne Ermittlungen';
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-left: 3px solid rgba(148, 163, 184, 0.34);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(148, 163, 184, 0.045));
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    white-space: pre-line;
    color: #aeb9c8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .internal-guides-document-subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #cbd5e1;
}

#units .internal-guides-document-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 28px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    position: relative;
}

#units .internal-guides-document-section:first-of-type {
    padding-top: 0;
    border-top: none;
}

#units .internal-guides-document-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28px;
    width: 92px;
    height: 1px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.44), rgba(148, 163, 184, 0));
}

#units .internal-guides-document-section:first-of-type::before {
    display: none;
}

#units .internal-guides-document-section-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #f8fafc;
    padding-top: 2px;
}

#units .internal-guides-document-section-title.is-subsection {
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    color: #e5edf8;
}

#units .internal-guides-document-subsection-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#units .internal-guides-document-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.95;
    color: #dbe4ee;
    white-space: pre-line;
    text-wrap: pretty;
}

#units .internal-guides-document-text.is-callout {
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-left: 3px solid rgba(148, 163, 184, 0.32);
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.06));
    color: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .internal-guides-document-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 24px;
    margin: 4px 0 0;
}

#units .internal-guides-document-list li {
    padding-left: 4px;
    font-size: 15px;
    line-height: 1.85;
    color: #dbe4ee;
}

#units .internal-guides-document-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 320px;
    padding: 40px 32px;
    border: 1px dashed rgba(148, 163, 184, 0.24);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    font-size: 15px;
    line-height: 1.8;
    color: #a5b4c7;
    text-align: center;
}

#units .internal-guides-document-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#units .internal-guides-document-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(15, 23, 42, 0.94));
    color: #dbeafe;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#units .internal-guides-document-actions button:hover {
    border-color: rgba(100, 116, 139, 0.9);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.92), rgba(30, 41, 59, 0.96));
    color: #f8fafc;
    transform: translateY(-1px);
}

#units .internal-guides-document-actions button.primary {
    border-color: rgba(96, 165, 250, 0.34);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.34), rgba(15, 23, 42, 0.96));
    color: #eff6ff;
}

#units .internal-guides-document-actions button.subtle-danger {
    border-color: rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.38), rgba(15, 23, 42, 0.82));
    color: #cbd5e1;
}

#units .internal-guides-document-actions button.subtle-danger:hover {
    border-color: rgba(248, 113, 113, 0.28);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.24), rgba(15, 23, 42, 0.92));
    color: #fecaca;
}

#units .internal-guides-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-guides-editor-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-guides-editor-label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9fb0c5;
}

#units .internal-guides-editor-input {
    width: 100%;
    padding: 13px 15px;
    border-radius: 15px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(2, 6, 23, 0.82)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
    color: #f8fafc;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#units .internal-guides-editor-input.is-description {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
    color: #dbe4ee;
}

#units .internal-guides-editor-textarea {
    width: 100%;
    min-height: 520px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(2, 6, 23, 0.82)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
    color: #e5edf8;
    font-size: 14px;
    line-height: 1.8;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#units .internal-guides-editor-input:focus,
#units .internal-guides-editor-textarea:focus {
    border-color: rgba(96, 165, 250, 0.34);
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#units .internal-info-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 2px 0;
}

#units .internal-info-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

#units .internal-info-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 24px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.94));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
    min-height: 100%;
}

#units .internal-info-section-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.72);
}

#units .internal-info-section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

#units .internal-info-section-title {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.02em;
}

#units .internal-info-section-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-info-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#units .internal-info-actions button,
#units .internal-info-card-edit-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.76);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.86), rgba(15, 23, 42, 0.92));
    color: #dbeafe;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#units .internal-info-actions button:hover,
#units .internal-info-card-edit-actions button:hover {
    border-color: rgba(100, 116, 139, 0.9);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.92), rgba(30, 41, 59, 0.96));
    color: #f8fafc;
    transform: translateY(-1px);
}

#units .internal-info-actions button.primary,
#units .internal-info-card-edit-actions button.primary {
    border-color: rgba(96, 165, 250, 0.32);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.34), rgba(15, 23, 42, 0.96));
    color: #eff6ff;
}

#units .internal-info-actions button.subtle-danger,
#units .internal-info-card-edit-actions button.subtle-danger {
    border-color: rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.38), rgba(15, 23, 42, 0.82));
    color: #cbd5e1;
}

#units .internal-info-actions button.subtle-danger:hover,
#units .internal-info-card-edit-actions button.subtle-danger:hover {
    border-color: rgba(248, 113, 113, 0.28);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.24), rgba(15, 23, 42, 0.92));
    color: #fecaca;
}

#units .internal-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .internal-info-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.88));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}

#units .internal-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(96, 165, 250, 0.32);
}

#units .internal-info-card::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: rgba(96, 165, 250, 0.28);
}

#units .internal-info-card:hover {
    transform: translateY(-2px);
    border-color: #334155;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.94));
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22);
}

#units .internal-info-card.priority-critical {
    border-color: rgba(248, 113, 113, 0.46);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.28), rgba(15, 23, 42, 0.88) 42%, rgba(2, 6, 23, 0.92));
    box-shadow:
        0 16px 34px rgba(127, 29, 29, 0.2),
        0 0 0 1px rgba(248, 113, 113, 0.08);
}

#units .internal-info-card.priority-critical::before {
    background: linear-gradient(90deg, #ef4444, rgba(248, 113, 113, 0.42));
}

#units .internal-info-card.priority-critical::after {
    background: #ef4444;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.36);
}

#units .internal-info-card.priority-critical:hover {
    border-color: rgba(248, 113, 113, 0.62);
    box-shadow:
        0 20px 38px rgba(127, 29, 29, 0.28),
        0 0 18px rgba(239, 68, 68, 0.13);
}

#units .internal-info-card.priority-high {
    border-color: rgba(251, 146, 60, 0.42);
    background: linear-gradient(180deg, rgba(124, 45, 18, 0.24), rgba(15, 23, 42, 0.88) 42%, rgba(2, 6, 23, 0.92));
    box-shadow:
        0 16px 34px rgba(124, 45, 18, 0.18),
        0 0 0 1px rgba(251, 146, 60, 0.07);
}

#units .internal-info-card.priority-high::before {
    background: linear-gradient(90deg, #fb923c, rgba(251, 146, 60, 0.38));
}

#units .internal-info-card.priority-high::after {
    background: #fb923c;
}

#units .internal-info-card.priority-very-high {
    border-color: rgba(248, 113, 113, 0.4);
    background: linear-gradient(180deg, rgba(154, 52, 18, 0.26), rgba(15, 23, 42, 0.88) 42%, rgba(2, 6, 23, 0.92));
    box-shadow:
        0 16px 34px rgba(154, 52, 18, 0.2),
        0 0 0 1px rgba(248, 113, 113, 0.07);
}

#units .internal-info-card.priority-very-high::before {
    background: linear-gradient(90deg, #f97316, rgba(248, 113, 113, 0.44));
}

#units .internal-info-card.priority-very-high::after {
    background: #f97316;
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.24);
}

#units .internal-info-card.priority-medium {
    border-color: rgba(234, 179, 8, 0.34);
    background: linear-gradient(180deg, rgba(113, 63, 18, 0.18), rgba(15, 23, 42, 0.86) 42%, rgba(2, 6, 23, 0.9));
    box-shadow:
        0 16px 34px rgba(113, 63, 18, 0.14),
        0 0 0 1px rgba(234, 179, 8, 0.06);
}

#units .internal-info-card.priority-medium::before {
    background: linear-gradient(90deg, #eab308, rgba(234, 179, 8, 0.34));
}

#units .internal-info-card.priority-medium::after {
    background: #eab308;
}

#units .internal-info-card.priority-low {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(180deg, rgba(20, 83, 45, 0.18), rgba(15, 23, 42, 0.86) 42%, rgba(2, 6, 23, 0.9));
    box-shadow:
        0 16px 34px rgba(20, 83, 45, 0.12),
        0 0 0 1px rgba(34, 197, 94, 0.05);
}

#units .internal-info-card.priority-low::before {
    background: linear-gradient(90deg, #22c55e, rgba(96, 165, 250, 0.28));
}

#units .internal-info-card.priority-low::after {
    background: #22c55e;
}

#units .internal-info-card.priority-info {
    border-color: rgba(96, 165, 250, 0.3);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.18), rgba(15, 23, 42, 0.86) 42%, rgba(2, 6, 23, 0.9));
    box-shadow:
        0 16px 34px rgba(30, 64, 175, 0.12),
        0 0 0 1px rgba(96, 165, 250, 0.05);
}

#units .internal-info-card.priority-info::before {
    background: linear-gradient(90deg, #60a5fa, rgba(96, 165, 250, 0.28));
}

#units .internal-info-card.priority-info::after {
    background: #60a5fa;
}

#units .internal-info-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#units .internal-info-card-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#units .internal-info-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#units .internal-info-priority-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.66);
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

#units .internal-info-card-meta span:not(.internal-info-priority-icon),
#units .internal-info-card-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.62);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#units .internal-info-priority-label.priority-critical {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(127, 29, 29, 0.32);
}

#units .internal-info-priority-label.priority-high {
    color: #fed7aa;
    border-color: rgba(251, 146, 60, 0.34);
    background: rgba(124, 45, 18, 0.28);
}

#units .internal-info-priority-label.priority-very-high {
    color: #ffedd5;
    border-color: rgba(248, 113, 113, 0.32);
    background: rgba(154, 52, 18, 0.3);
}

#units .internal-info-priority-label.priority-medium {
    color: #fef3c7;
    border-color: rgba(234, 179, 8, 0.3);
    background: rgba(113, 63, 18, 0.24);
}

#units .internal-info-priority-label.priority-low {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(20, 83, 45, 0.24);
}

#units .internal-info-priority-label.priority-info {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#units .internal-info-card-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .internal-info-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

#units .internal-info-card-footer-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#units .internal-info-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-info-edit-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
}

#units .internal-info-edit-fields input,
#units .internal-info-edit-fields textarea,
#units .internal-info-edit-fields select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.74);
    background: linear-gradient(180deg, rgba(6, 11, 24, 0.7), rgba(15, 23, 42, 0.78));
    color: #e8eef7;
    font-size: 13px;
    line-height: 1.45;
    box-sizing: border-box;
    outline: none;
    color-scheme: dark;
}

#units .internal-info-edit-fields select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image:
        linear-gradient(45deg, transparent 50%, #a9b8c8 50%), linear-gradient(135deg, #a9b8c8 50%, transparent 50%),
        linear-gradient(180deg, rgba(6, 11, 24, 0.7), rgba(15, 23, 42, 0.78));
    background-position:
        calc(100% - 15px) calc(50% - 2px),
        calc(100% - 10px) calc(50% - 2px),
        0 0;
    background-size:
        5px 5px,
        5px 5px,
        100% 100%;
    background-repeat: no-repeat;
}

#units .internal-info-edit-fields select option {
    background-color: #0f172a;
    color: #e8eef7;
}

#units .internal-info-edit-fields textarea {
    min-height: 92px;
    resize: vertical;
}

#units .internal-info-edit-fields input:focus,
#units .internal-info-edit-fields textarea:focus,
#units .internal-info-edit-fields select:focus {
    border-color: rgba(96, 165, 250, 0.34);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

#units .internal-info-status-select.status-open {
    border-color: rgba(100, 116, 139, 0.42);
    background-image:
        linear-gradient(45deg, transparent 50%, #cbd5e1 50%), linear-gradient(135deg, #cbd5e1 50%, transparent 50%),
        linear-gradient(180deg, rgba(51, 65, 85, 0.58), rgba(30, 41, 59, 0.72));
    color: #e2e8f0;
}

#units .internal-info-status-select.status-progress {
    border-color: rgba(245, 158, 11, 0.34);
    background-image:
        linear-gradient(45deg, transparent 50%, #f7c66b 50%), linear-gradient(135deg, #f7c66b 50%, transparent 50%),
        linear-gradient(180deg, rgba(120, 53, 15, 0.46), rgba(69, 26, 3, 0.58));
    color: #fef3c7;
}

#units .internal-info-status-select.status-active {
    border-color: rgba(34, 197, 94, 0.28);
    background-image:
        linear-gradient(45deg, transparent 50%, #86efac 50%), linear-gradient(135deg, #86efac 50%, transparent 50%),
        linear-gradient(180deg, rgba(20, 83, 45, 0.5), rgba(21, 128, 61, 0.34));
    color: #dcfce7;
}

#units .internal-info-card-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#units .internal-info-read-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #94a3b8;
}

#units .internal-info-read-state button {
    padding: 7px 10px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.78);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .internal-info-read-state button:hover {
    border-color: rgba(96, 165, 250, 0.48);
    background: rgba(30, 64, 175, 0.28);
}

#units .internal-info-card-date {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

#units .internal-info-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 20px;
    border-radius: 20px;
    border: 1px dashed rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.36);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

#units .internal-info-card-status.status-active {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
}

#units .internal-info-card-status.status-open {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#units .internal-info-card-status.status-progress {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#units .internal-qk-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 2px 0;
}

#units .internal-qk-layout {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

#units .internal-qk-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.97)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
    position: sticky;
    top: 18px;
}

#units .internal-qk-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.68);
}

#units .internal-qk-sidebar-header h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#units .internal-qk-sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #8da1b7;
}

#units .internal-qk-sidebar-eyebrow {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-qk-sidebar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.82);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#units .internal-qk-sidebar-action:hover {
    border-color: rgba(100, 116, 139, 0.92);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.96));
    transform: translateY(-1px);
}

#units .internal-qk-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-qk-search {
    display: flex;
}

#units .internal-qk-search-input {
    width: 100%;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.62);
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

#units .internal-qk-search-input::placeholder {
    color: #94a3b8;
}

#units .internal-qk-search-input:focus {
    border-color: rgba(96, 165, 250, 0.44);
    background: rgba(15, 23, 42, 0.84);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

#units .internal-qk-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-qk-sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(2, 6, 23, 0.74));
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#units .internal-qk-sidebar-item:hover {
    border-color: rgba(100, 116, 139, 0.74);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.9));
    transform: translateY(-1px);
}

#units .internal-qk-sidebar-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.22), rgba(15, 23, 42, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 24px rgba(2, 6, 23, 0.2);
}

#units .internal-qk-sidebar-item-title {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#units .internal-qk-sidebar-item-meta {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8da1b7;
}

#units .internal-qk-sidebar-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

#units .internal-qk-sidebar-item-note {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

#units .internal-qk-sidebar-item-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.54);
    background: rgba(30, 41, 59, 0.7);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#units .internal-qk-sidebar-item-status.status-open {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.18);
}

#units .internal-qk-sidebar-item-status.status-progress {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(146, 64, 14, 0.22);
}

#units .internal-qk-sidebar-item-status.status-done {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(21, 128, 61, 0.22);
}

#units .internal-qk-sidebar-review-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.36);
    background: rgba(245, 158, 11, 0.16);
    color: #fde68a;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.12);
}

#units .internal-qk-sidebar-submitted-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.32);
    background: rgba(37, 99, 235, 0.18);
    color: #bfdbfe;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

#units .internal-qk-viewer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

#units .internal-qk-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 20px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96));
    box-shadow: 0 18px 30px rgba(2, 6, 23, 0.14);
}

#units .internal-qk-viewer-bar-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#units .internal-qk-viewer-bar-item span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-qk-viewer-bar-item strong {
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .internal-qk-document {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 30px 32px;
    border-radius: 28px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(180deg, rgba(252, 252, 253, 0.98), rgba(243, 246, 250, 0.98)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 28px 56px rgba(2, 6, 23, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    color: #0f172a;
}

#units .internal-qk-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.32);
    position: relative;
}

#units .internal-qk-header::after {
    content: 'Dokumententyp: Qualitätskontrolle\A Sicherheitsstufe: Intern\A Bereich: Sonderdezernat Interne Ermittlungen';
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 2px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-left: 3px solid rgba(71, 85, 105, 0.38);
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.92), rgba(226, 232, 240, 0.74));
    color: #475569;
    font-size: 12px;
    line-height: 1.75;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: pre-line;
}

#units .internal-qk-eyebrow {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-qk-title {
    margin: 0;
    font-size: 36px;
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: #0f172a;
}

#units .internal-qk-subtitle {
    margin: 0;
    max-width: 760px;
    font-size: 15px;
    line-height: 1.75;
    color: #475569;
}

#units .internal-qk-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#units .internal-qk-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 15px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.82));
}

#units .internal-qk-meta-item span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-qk-meta-item strong {
    font-size: 14px;
    line-height: 1.6;
    color: #0f172a;
}

#units .internal-orders-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .internal-orders-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.72);
}

#units .internal-orders-header h3 {
    margin: 0;
    color: #f8fafc;
}

#units .internal-orders-header p {
    margin: 6px 0 0;
    color: #94a3b8;
    line-height: 1.5;
}

#units .internal-orders-header button,
#units .internal-orders-form-actions button,
#units .internal-orders-action {
    border: 1px solid rgba(96, 165, 250, 0.34);
    border-radius: 10px;
    background: rgba(30, 64, 175, 0.32);
    color: #dbeafe;
    padding: 9px 12px;
    cursor: pointer;
}

#units .internal-orders-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .internal-orders-filter {
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    padding: 7px 12px;
    cursor: pointer;
}

#units .internal-orders-filter.active {
    border-color: rgba(96, 165, 250, 0.5);
    color: #dbeafe;
    background: rgba(30, 64, 175, 0.42);
}

#units .internal-orders-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.62);
}

#units .internal-orders-form[style*='display: block'] {
    display: grid !important;
}

#units .internal-orders-form input,
#units .internal-orders-form select,
#units .internal-orders-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.68);
    color: #f8fafc;
    padding: 10px 12px;
}

#units .internal-orders-form textarea,
#units .internal-orders-form-actions {
    grid-column: 1 / -1;
}

#units .internal-orders-status {
    min-height: 20px;
    color: #94a3b8;
}

#units .internal-orders-table-wrap {
    overflow: auto;
    border: 1px solid rgba(30, 41, 59, 0.82);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.62);
}

#units .internal-orders-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

#units .internal-orders-table th,
#units .internal-orders-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.7);
    color: #cbd5e1;
    text-align: left;
    font-size: 13px;
}

#units .internal-orders-table th {
    color: #93c5fd;
    font-size: 11px;
    text-transform: uppercase;
}

#units .internal-orders-chip {
    display: inline-flex;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800;
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

#units .internal-orders-chip.status-abgeschlossen,
#units .internal-orders-chip.priority-niedrig {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
}
#units .internal-orders-chip.status-offen {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.14);
}
#units .internal-orders-chip.status-überfällig,
#units .internal-orders-chip.priority-kritisch {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.16);
}
#units .internal-orders-chip.status-in_bearbeitung,
#units .internal-orders-chip.status-übernommen,
#units .internal-orders-chip.priority-hoch {
    color: #fed7aa;
    background: rgba(249, 115, 22, 0.16);
}
#units .internal-orders-chip.priority-normal {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.14);
}

#units .internal-qk-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    position: relative;
}

#units .internal-qk-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 1px;
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.42), rgba(100, 116, 139, 0));
}

#units .internal-qk-section-title {
    margin: 0;
    padding-top: 18px;
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 800;
    color: #0f172a;
}

#units .internal-qk-section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

#units .internal-qk-section-title-row button {
    margin-top: 14px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.9);
    color: #334155;
    font-weight: 800;
    cursor: pointer;
    padding: 10px 14px;
}

#units .internal-qk-section-subtitle {
    margin: -6px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
}

#units .internal-qk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

#units .internal-qk-grid.triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#units .internal-qk-grid.answers {
    grid-template-columns: 1fr;
}

#units .internal-qk-grid.signatures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
}

#units .internal-qk-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-qk-field.full {
    grid-column: 1 / -1;
}

#units .internal-qk-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-qk-field input,
#units .internal-qk-field select,
#units .internal-qk-field textarea {
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.55;
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#units .internal-qk-field input:focus,
#units .internal-qk-field select:focus,
#units .internal-qk-field textarea:focus {
    border-color: rgba(71, 85, 105, 0.42);
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

#units .internal-qk-field input::placeholder,
#units .internal-qk-field textarea::placeholder {
    color: #94a3b8;
}

#units .internal-qk-field textarea {
    min-height: 138px;
    resize: vertical;
}

#units .internal-qk-textarea-large {
    min-height: 220px !important;
}

#units .internal-qk-table {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.9));
}

#units .internal-qk-table-head,
#units .internal-qk-table-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(120px, 0.38fr) minmax(320px, 1.7fr);
    align-items: stretch;
}

#units .internal-qk-table-head {
    background: linear-gradient(180deg, rgba(226, 232, 240, 0.96), rgba(226, 232, 240, 0.82));
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
}

#units .internal-qk-table-row + .internal-qk-table-row {
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

#units .internal-qk-table-cell {
    padding: 14px 16px;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    min-width: 0;
    box-sizing: border-box;
}

#units .internal-qk-table-cell:first-child {
    border-left: none;
}

#units .internal-qk-table-head .internal-qk-table-cell {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-qk-table-row .internal-qk-table-cell {
    display: flex;
    align-items: stretch;
    color: #0f172a;
}

#units .internal-qk-table-row .internal-qk-table-cell input,
#units .internal-qk-table-row .internal-qk-table-cell select,
#units .internal-qk-table-row .internal-qk-table-cell textarea {
    width: 100%;
    box-sizing: border-box;
}

#units .internal-qk-table-row .internal-qk-table-cell select {
    min-height: 44px;
}

#units .internal-qk-table-row .internal-qk-table-cell textarea {
    min-height: 86px;
    resize: vertical;
    white-space: pre-wrap;
    overflow: auto;
    line-height: 1.55;
}

#units .internal-qk-table-criterion {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
    color: #0f172a;
}

#units .internal-qk-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.84), rgba(241, 245, 249, 0.74));
}

#units .internal-qk-scale span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.78);
    color: #475569;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}

#units .internal-qk-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: #0f172a;
}

#units .internal-qk-list li {
    font-size: 15px;
    line-height: 1.8;
}

#units .internal-qk-question-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.78));
}

#units .internal-qk-question-item {
    font-size: 14px;
    line-height: 1.75;
    color: #0f172a;
}

#units .internal-qk-question-item textarea {
    width: 100%;
    min-height: 62px;
    resize: vertical;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    font: inherit;
    padding: 10px 12px;
}

#units .internal-qk-answer-label {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
    color: #0f172a;
}

#units .internal-qk-signature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 22px;
}

#units .internal-qk-signature-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.18));
}

#units .internal-qk-signature span {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
    color: #475569;
}

#units .internal-digital-signature {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#units .internal-digital-signature-canvas {
    width: 100%;
    height: 118px;
    border-radius: 14px;
    border: 1px solid rgba(100, 116, 139, 0.42);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    touch-action: none;
    box-sizing: border-box;
}

#units .internal-digital-signature-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .internal-digital-signature-button {
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    background: #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .internal-digital-signature-button:hover {
    background: #cbd5e1;
}

#units .internal-digital-signature-preview {
    width: 100%;
    max-height: 118px;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid rgba(100, 116, 139, 0.32);
    background: rgba(255, 255, 255, 0.92);
}

#units .internal-qk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 6px;
}

#units .internal-qk-save-status {
    min-height: 20px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    color: #64748b;
}

#units .internal-qk-save-status.is-success {
    color: #166534;
}

#units .internal-qk-action-buttons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#units .internal-qk-actions button {
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.84), rgba(226, 232, 240, 0.72));
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-qk-actions button:hover {
    background: linear-gradient(180deg, rgba(226, 232, 240, 0.92), rgba(226, 232, 240, 0.82));
    border-color: rgba(100, 116, 139, 0.42);
    color: #0f172a;
}

#units .internal-qk-actions button.internal-qk-archive-button {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(96, 165, 250, 0.32);
    color: #dbeafe;
}

#units .internal-qk-actions button.internal-qk-archive-button:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(147, 197, 253, 0.42);
    color: #eff6ff;
}

@media (max-width: 1180px) {
    #units .internal-qk-layout {
        grid-template-columns: 1fr;
    }

    #units .internal-qk-sidebar {
        position: static;
    }

    #units .internal-qk-viewer-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 820px) {
    #units .internal-qk-document {
        padding: 24px 20px 26px;
    }

    #units .internal-qk-meta,
    #units .internal-qk-grid,
    #units .internal-qk-grid.triple,
    #units .internal-qk-grid.signatures {
        grid-template-columns: 1fr;
    }

    #units .internal-qk-table-head,
    #units .internal-qk-table-row {
        grid-template-columns: 1fr;
    }

    #units .internal-qk-table-cell {
        border-left: none;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
    }

    #units .internal-qk-table-head .internal-qk-table-cell:first-child,
    #units .internal-qk-table-row .internal-qk-table-cell:first-child {
        border-top: none;
    }
}

#units .internal-tables-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-tables-header {
    display: none;
}

#units .internal-tables-header p {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-tables-subnav {
    display: flex;
    justify-content: center;
    margin-top: -2px;
}

#units .internal-tables-subnav-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: min(100%, 736px);
    padding: 8px 10px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.82);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.76));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
}

#units .internal-tables-subnav-tab {
    --authority-accent: 100, 116, 139;
    --authority-text: #b7c5d6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid rgba(var(--authority-accent), 0.32);
    background: linear-gradient(180deg, rgba(var(--authority-accent), 0.08), rgba(2, 6, 23, 0.72));
    color: var(--authority-text);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#units .internal-tables-subnav-tab[data-authority='lspd'] {
    --authority-accent: 96, 165, 250;
    --authority-text: #bfdbfe;
}

#units .internal-tables-subnav-tab[data-authority='lssd'] {
    --authority-accent: 52, 211, 153;
    --authority-text: #bbf7d0;
}

#units .internal-tables-subnav-tab[data-authority='usms'] {
    --authority-accent: 185, 78, 72;
    --authority-text: #fecaca;
}

#units .internal-tables-subnav-tab[data-authority='doj'] {
    --authority-accent: 245, 158, 11;
    --authority-text: #fde68a;
}

#units .internal-tables-subnav-tab[data-authority='fib'] {
    --authority-accent: 34, 211, 238;
    --authority-text: #cffafe;
}

#units .internal-tables-subnav-tab[data-authority='iaa'] {
    --authority-accent: 167, 139, 250;
    --authority-text: #ddd6fe;
}

#units .internal-tables-subnav-tab:hover {
    border-color: rgba(var(--authority-accent), 0.56);
    background: linear-gradient(180deg, rgba(var(--authority-accent), 0.15), rgba(15, 23, 42, 0.92));
    color: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.18);
}

#units .internal-tables-subnav-tab.active {
    border-color: rgba(var(--authority-accent), 0.64);
    background: linear-gradient(180deg, rgba(var(--authority-accent), 0.24), rgba(30, 41, 59, 0.96));
    color: #f8fafc;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 12px 24px rgba(2, 6, 23, 0.24),
        0 0 0 1px rgba(var(--authority-accent), 0.12);
}

#units .internal-tables-board {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 460px;
    padding: 14px 14px 18px;
    border-radius: 22px;
    border: 1px solid rgba(30, 41, 59, 0.96);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

#units .internal-tables-board::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0), rgba(96, 165, 250, 0.22), rgba(96, 165, 250, 0));
}

#units .internal-tables-board-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(71, 85, 105, 0.58);
}

#units .internal-tables-board-status span {
    font-size: 12px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fa3ba;
}

#units .internal-tables-grid {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(2, 6, 23, 0.56)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 16px 30px rgba(2, 6, 23, 0.14);
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.6) transparent;
}

#units .internal-tables-grid::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

#units .internal-tables-grid::-webkit-scrollbar-track {
    background: transparent;
}

#units .internal-tables-grid::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.48);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

#units .internal-tables-table {
    display: flex;
    flex-direction: column;
    min-width: 1810px;
    width: 100%;
}

#units .internal-tables-head,
#units .internal-tables-row {
    display: grid;
    grid-template-columns: 70px 150px 160px 240px 190px 210px 140px 190px 120px 180px 140px;
    align-items: center;
}

#units .internal-tables-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(36, 49, 68, 0.98), rgba(15, 23, 42, 0.99)), rgba(15, 23, 42, 0.96);
    border-bottom: 1px solid rgba(100, 116, 139, 0.46);
    box-shadow: 0 12px 22px rgba(2, 6, 23, 0.22);
}

#units .internal-tables-row {
    min-height: 46px;
    border-top: 1px solid rgba(51, 65, 85, 0.3);
    background: rgba(2, 6, 23, 0.06);
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease;
}

#units .internal-tables-row:nth-child(odd) {
    background: rgba(15, 23, 42, 0.08);
}

#units .internal-tables-row:hover {
    background: rgba(15, 23, 42, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

#units .internal-tables-cell {
    min-width: 0;
    padding: 6px 7px;
    border-left: 1px solid rgba(51, 65, 85, 0.16);
    font-size: 12.5px;
    line-height: 1.3;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#units .internal-tables-cell:first-child {
    border-left: none;
}

#units .internal-tables-head .internal-tables-cell {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #a0b0c4;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

#units .internal-tables-row .internal-tables-cell {
    color: #b8c6d6;
}

#units .internal-tables-row .internal-tables-cell.is-muted {
    color: #64748b;
}

#units .internal-tables-cell-field,
#units .internal-tables-cell-select {
    width: 100%;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 9px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(6, 11, 24, 0.68), rgba(15, 23, 42, 0.7));
    color: #e8eef7;
    font-size: 12px;
    line-height: 1.25;
    box-sizing: border-box;
    outline: none;
    color-scheme: dark;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease;
}

#units .internal-tables-cell-field::placeholder {
    color: #75859a;
}

#units .internal-tables-cell-field:focus,
#units .internal-tables-cell-select:focus {
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.88));
}

#units .internal-tables-cell-select:focus-visible {
    border-color: rgba(96, 165, 250, 0.32);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

#units .internal-tables-cell-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 28px;
    color: #e8eef7;
    background-image:
        linear-gradient(45deg, transparent 50%, #8fa3ba 50%), linear-gradient(135deg, #8fa3ba 50%, transparent 50%),
        linear-gradient(180deg, rgba(6, 11, 24, 0.68), rgba(15, 23, 42, 0.7));
    background-position:
        calc(100% - 13px) calc(50% - 2px),
        calc(100% - 8px) calc(50% - 2px),
        0 0;
    background-size:
        5px 5px,
        5px 5px,
        100% 100%;
    background-repeat: no-repeat;
}

#units .internal-tables-cell-select option {
    background-color: #0f172a;
    color: #e8eef7;
}

#units .internal-tables-cell-select optgroup {
    background-color: #0f172a;
    color: #cbd5e1;
}

#units .internal-tables-cell-field[readonly] {
    border-color: rgba(71, 85, 105, 0.54);
    background: linear-gradient(180deg, rgba(20, 28, 42, 0.62), rgba(7, 12, 24, 0.58));
    color: #d7e1ec;
    font-weight: 700;
}

#units .internal-tables-cell-field.due-state-safe,
#units .internal-tables-cell-field.due-state-warning,
#units .internal-tables-cell-field.due-state-overdue,
#units .internal-tables-cell-field.due-state-empty {
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.01em;
    border-width: 1px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 0 0 1px rgba(255, 255, 255, 0.012);
}

#units .internal-tables-cell-field.due-state-safe {
    border-color: rgba(52, 211, 153, 0.3);
    background: linear-gradient(180deg, rgba(9, 57, 47, 0.82), rgba(15, 118, 110, 0.54));
    color: #ecfdf5;
}

#units .internal-tables-cell-field.due-state-warning {
    border-color: rgba(251, 191, 36, 0.3);
    background: linear-gradient(180deg, rgba(92, 45, 12, 0.84), rgba(180, 83, 9, 0.56));
    color: #fef3c7;
}

#units .internal-tables-cell-field.due-state-overdue {
    border-color: rgba(248, 113, 113, 0.28);
    background: linear-gradient(180deg, rgba(102, 23, 23, 0.84), rgba(127, 29, 29, 0.62));
    color: #fef2f2;
}

#units .internal-tables-cell-field.due-state-empty {
    border-color: rgba(100, 116, 139, 0.38);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.48), rgba(30, 41, 59, 0.68));
    color: #d5deea;
}

#units .internal-tables-cell-field.internal-tables-due-date {
    font-weight: 700;
    letter-spacing: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.028),
        0 0 0 1px rgba(255, 255, 255, 0.008);
}

#units .internal-tables-cell-field.internal-tables-due-date.due-state-safe {
    border-color: rgba(52, 211, 153, 0.22);
    background: linear-gradient(180deg, rgba(9, 57, 47, 0.56), rgba(15, 118, 110, 0.34));
    color: #d1fae5;
}

#units .internal-tables-cell-field.internal-tables-due-date.due-state-warning {
    border-color: rgba(251, 191, 36, 0.22);
    background: linear-gradient(180deg, rgba(92, 45, 12, 0.56), rgba(180, 83, 9, 0.34));
    color: #fde68a;
}

#units .internal-tables-cell-field.internal-tables-due-date.due-state-overdue {
    border-color: rgba(248, 113, 113, 0.22);
    background: linear-gradient(180deg, rgba(102, 23, 23, 0.56), rgba(127, 29, 29, 0.4));
    color: #fecaca;
}

#units .internal-tables-cell-field.internal-tables-due-date.due-state-empty {
    border-color: rgba(100, 116, 139, 0.34);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.38), rgba(30, 41, 59, 0.54));
    color: #cbd5e1;
}

#units .internal-tables-cell-field.internal-tables-due-days {
    position: relative;
    text-align: center;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
}

#units .internal-tables-cell-field.internal-tables-due-days.due-state-safe,
#units .internal-tables-cell-field.internal-tables-due-days.due-state-warning,
#units .internal-tables-cell-field.internal-tables-due-days.due-state-overdue,
#units .internal-tables-cell-field.internal-tables-due-days.due-state-empty {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 18px rgba(2, 6, 23, 0.12);
}

#units .internal-tables-cell-select.status-neutral {
    border-color: rgba(100, 116, 139, 0.46);
    background-image:
        linear-gradient(45deg, transparent 50%, #a9b8c8 50%), linear-gradient(135deg, #a9b8c8 50%, transparent 50%),
        linear-gradient(180deg, rgba(51, 65, 85, 0.62), rgba(30, 41, 59, 0.72));
    color: #e2e8f0;
}

#units .internal-tables-cell-select.status-progress {
    border-color: rgba(245, 158, 11, 0.34);
    background-image:
        linear-gradient(45deg, transparent 50%, #f7c66b 50%), linear-gradient(135deg, #f7c66b 50%, transparent 50%),
        linear-gradient(180deg, rgba(120, 53, 15, 0.46), rgba(69, 26, 3, 0.58));
    color: #fef3c7;
}

#units .internal-tables-cell-select.status-success {
    border-color: rgba(34, 197, 94, 0.3);
    background-image:
        linear-gradient(45deg, transparent 50%, #86efac 50%), linear-gradient(135deg, #86efac 50%, transparent 50%),
        linear-gradient(180deg, rgba(20, 83, 45, 0.5), rgba(21, 128, 61, 0.34));
    color: #dcfce7;
}

#units .internal-tables-cell-select.status-danger {
    border-color: rgba(248, 113, 113, 0.26);
    background-image:
        linear-gradient(45deg, transparent 50%, #fca5a5 50%), linear-gradient(135deg, #fca5a5 50%, transparent 50%),
        linear-gradient(180deg, rgba(127, 29, 29, 0.42), rgba(69, 10, 10, 0.56));
    color: #fee2e2;
}

#units .internal-tables-cell-select.status-warning {
    border-color: rgba(251, 191, 36, 0.28);
    background-image:
        linear-gradient(45deg, transparent 50%, #fcd34d 50%), linear-gradient(135deg, #fcd34d 50%, transparent 50%),
        linear-gradient(180deg, rgba(113, 63, 18, 0.48), rgba(120, 53, 15, 0.58));
    color: #fef3c7;
}

#units .internal-tables-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

#units .internal-tables-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid rgba(71, 85, 105, 0.82);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.82));
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(2, 6, 23, 0.12);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#units .internal-tables-add-button:hover {
    border-color: rgba(100, 116, 139, 0.86);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(15, 23, 42, 0.94));
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(2, 6, 23, 0.16);
}

#units .internal-tables-board-placeholder {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 22px;
    border: 1px dashed rgba(71, 85, 105, 0.7);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.32), rgba(2, 6, 23, 0.42)),
        repeating-linear-gradient(
            0deg,
            rgba(148, 163, 184, 0.02) 0,
            rgba(148, 163, 184, 0.02) 1px,
            transparent 1px,
            transparent 36px
        );
    color: #8da1b7;
    text-align: center;
}

#units .internal-tables-board-placeholder strong {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #dbe7f4;
}

#units .internal-tables-board-placeholder p {
    margin: 0;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

@media (max-width: 900px) {
    #units .units-internal-tabs {
        width: 100%;
        align-self: stretch;
        justify-content: flex-start;
        margin-left: 0;
        padding-left: 0;
    }

    #units .internal-tables-subnav-track {
        width: 100%;
        justify-content: flex-start;
    }

    #units .internal-tables-subnav-tab {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 0;
    }

    #units .internal-tables-board {
        min-height: 360px;
        padding: 16px 14px;
    }

    #units .internal-tables-board-status {
        flex-direction: column;
        align-items: flex-start;
    }
}

#units .internal-zqk-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 2px 0;
}

#units .internal-zqk-layout {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

#units .internal-zqk-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.97)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
    position: sticky;
    top: 18px;
}

#units .internal-zqk-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.68);
}

#units .internal-zqk-sidebar-header h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#units .internal-zqk-sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #8da1b7;
}

#units .internal-zqk-sidebar-eyebrow {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-zqk-sidebar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.82);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#units .internal-zqk-sidebar-action:hover {
    border-color: rgba(100, 116, 139, 0.92);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.96));
    transform: translateY(-1px);
}

#units .internal-zqk-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-zqk-search {
    display: flex;
}

#units .internal-zqk-search-input {
    width: 100%;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.62);
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

#units .internal-zqk-search-input::placeholder {
    color: #94a3b8;
}

#units .internal-zqk-search-input:focus {
    border-color: rgba(96, 165, 250, 0.44);
    background: rgba(15, 23, 42, 0.84);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

#units .internal-zqk-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-zqk-sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(2, 6, 23, 0.74));
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#units .internal-zqk-sidebar-item:hover {
    border-color: rgba(100, 116, 139, 0.74);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.9));
    transform: translateY(-1px);
}

#units .internal-zqk-sidebar-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.22), rgba(15, 23, 42, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 24px rgba(2, 6, 23, 0.2);
}

#units .internal-zqk-sidebar-item-title {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#units .internal-zqk-sidebar-item-meta {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8da1b7;
}

#units .internal-zqk-sidebar-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

#units .internal-zqk-sidebar-item-note {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

#units .internal-zqk-sidebar-item-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.54);
    background: rgba(30, 41, 59, 0.7);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#units .internal-zqk-sidebar-item-status.status-open {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.18);
}

#units .internal-zqk-sidebar-item-status.status-progress {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(146, 64, 14, 0.22);
}

#units .internal-zqk-sidebar-item-status.status-done {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(21, 128, 61, 0.22);
}

#units .internal-zqk-viewer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

#units .internal-zqk-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 20px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96));
    box-shadow: 0 18px 30px rgba(2, 6, 23, 0.14);
}

#units .internal-zqk-viewer-bar-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#units .internal-zqk-viewer-bar-item span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-zqk-viewer-bar-item strong {
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .internal-zqk-document {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 30px 32px;
    border-radius: 28px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(180deg, rgba(252, 252, 253, 0.98), rgba(243, 246, 250, 0.98)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 28px 56px rgba(2, 6, 23, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    color: #0f172a;
}

#units .internal-zqk-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding: 0 0 26px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.32);
}

#units .internal-zqk-header::after {
    content: 'Dokumententyp: Zivile Qualitätskontrolle\A Sicherheitsstufe: Intern\A Bereich: Sonderdezernat Interne Ermittlungen';
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 2px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-left: 3px solid rgba(71, 85, 105, 0.38);
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.92), rgba(226, 232, 240, 0.74));
    color: #475569;
    font-size: 12px;
    line-height: 1.75;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: pre-line;
}

#units .internal-zqk-eyebrow {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-zqk-title {
    margin: 0;
    font-size: 36px;
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: #0f172a;
}

#units .internal-zqk-subtitle {
    margin: 0;
    max-width: 760px;
    font-size: 15px;
    line-height: 1.75;
    color: #475569;
}

#units .internal-zqk-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#units .internal-zqk-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 15px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.82));
}

#units .internal-zqk-meta-item span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-zqk-meta-item strong {
    font-size: 14px;
    line-height: 1.6;
    color: #0f172a;
}

#units .internal-zqk-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    position: relative;
}

#units .internal-zqk-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 1px;
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.42), rgba(100, 116, 139, 0));
}

#units .internal-zqk-section-title {
    margin: 0;
    padding-top: 18px;
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 800;
    color: #0f172a;
}

#units .internal-zqk-section-subtitle {
    margin: -6px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
}

#units .internal-zqk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

#units .internal-zqk-grid.triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#units .internal-zqk-grid.signatures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
}

#units .internal-zqk-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-zqk-field.full {
    grid-column: 1 / -1;
}

#units .internal-zqk-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-zqk-field input,
#units .internal-zqk-field select,
#units .internal-zqk-field textarea {
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.55;
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#units .internal-zqk-field input:focus,
#units .internal-zqk-field select:focus,
#units .internal-zqk-field textarea:focus {
    border-color: rgba(71, 85, 105, 0.42);
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

#units .internal-zqk-field input::placeholder,
#units .internal-zqk-field textarea::placeholder {
    color: #94a3b8;
}

#units .internal-zqk-field textarea {
    min-height: 138px;
    resize: vertical;
}

#units .internal-zqk-textarea-large {
    min-height: 220px !important;
}

#units .internal-zqk-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: #0f172a;
}

#units .internal-zqk-list li {
    font-size: 15px;
    line-height: 1.8;
}

#units .internal-zqk-table {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.9));
}

#units .internal-zqk-table-head,
#units .internal-zqk-table-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(140px, 0.42fr) minmax(320px, 1.7fr);
    align-items: stretch;
}

#units .internal-zqk-table-head {
    background: linear-gradient(180deg, rgba(226, 232, 240, 0.96), rgba(226, 232, 240, 0.82));
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
}

#units .internal-zqk-table-row + .internal-zqk-table-row {
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

#units .internal-zqk-table-cell {
    padding: 14px 16px;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    min-width: 0;
    box-sizing: border-box;
}

#units .internal-zqk-table-cell:first-child {
    border-left: none;
}

#units .internal-zqk-table-head .internal-zqk-table-cell {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-zqk-table-row .internal-zqk-table-cell {
    display: flex;
    align-items: stretch;
    color: #0f172a;
}

#units .internal-zqk-table-row .internal-zqk-table-cell input,
#units .internal-zqk-table-row .internal-zqk-table-cell select,
#units .internal-zqk-table-row .internal-zqk-table-cell textarea {
    width: 100%;
    box-sizing: border-box;
}

#units .internal-zqk-table-row .internal-zqk-table-cell select {
    min-height: 44px;
}

#units .internal-zqk-table-row .internal-zqk-table-cell textarea {
    min-height: 86px;
    resize: vertical;
    white-space: pre-wrap;
    overflow: auto;
    line-height: 1.55;
}

#units .internal-zqk-table-criterion {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
    color: #0f172a;
}

#units .internal-zqk-signature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 22px;
}

#units .internal-zqk-signature-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.18));
}

#units .internal-zqk-signature span {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
    color: #475569;
}

#units .internal-zqk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 6px;
}

#units .internal-zqk-save-status {
    min-height: 20px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    color: #64748b;
}

#units .internal-zqk-save-status.is-success {
    color: #166534;
}

#units .internal-review-notes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-review-note-form {
    display: grid;
    grid-template-columns: minmax(130px, 180px) 1fr auto;
    gap: 10px;
    align-items: start;
}

#units .internal-review-note-form input,
#units .internal-review-note-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.72);
    color: #e5eefb;
    padding: 10px 12px;
    font: inherit;
}

#units .internal-review-note-form textarea {
    min-height: 76px;
    resize: vertical;
}

#units .internal-review-note-form button,
#units .internal-review-note-actions button {
    border: 1px solid rgba(96, 165, 250, 0.34);
    border-radius: 8px;
    background: rgba(30, 64, 175, 0.32);
    color: #dbeafe;
    padding: 9px 12px;
    cursor: pointer;
}

#units .internal-review-note-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-review-note-card {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-left: 3px solid #f59e0b;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.62);
    padding: 12px;
}

#units .internal-review-note-card.resolved {
    border-left-color: #22c55e;
    opacity: 0.82;
}

#units .internal-review-note-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

#units .internal-review-note-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: #9ca3af;
    font-size: 12px;
}

#units .internal-review-note-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

#units .internal-review-note-status.resolved {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

#units .internal-review-note-text {
    white-space: pre-wrap;
    color: #e5eefb;
    line-height: 1.5;
    margin: 0;
}

#units .internal-review-note-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

#units .internal-review-note-actions button.delete {
    border-color: rgba(248, 113, 113, 0.36);
    background: rgba(127, 29, 29, 0.32);
    color: #fecaca;
}

#units .internal-review-note-empty {
    color: #9ca3af;
    font-size: 13px;
}

/* =========================
   ANNOTATION MANAGEMENT SYSTEM
========================= */

#units .annotations {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#units .annotation-form {
    background: rgba(30, 41, 59, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#units .annotation-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .annotation-form-group label {
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
}

#units .annotation-form-group input,
#units .annotation-form-group textarea {
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.32);
    color: #f1f5f9;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

#units .annotation-form-group input:focus,
#units .annotation-form-group textarea:focus {
    outline: none;
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(96, 165, 250, 0.52);
}

#units .annotation-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

#units .annotation-form button,
#units .annotation-actions button {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(96, 165, 250, 0.42);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.82), rgba(37, 99, 235, 0.72));
    color: #eff6ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

#units .annotation-form button:hover,
#units .annotation-actions button:hover {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.92), rgba(59, 130, 246, 0.82));
    border-color: rgba(147, 197, 253, 0.52);
}

#units .annotation-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .annotation-card {
    background: rgba(30, 41, 59, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .annotation-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .annotation-title {
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

#units .annotation-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #94a3b8;
}

#units .annotation-content {
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#units .annotation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .annotation-tag {
    display: inline-block;
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

#units .annotation-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#units .annotation-actions button.delete {
    border-color: rgba(239, 68, 68, 0.42);
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.62), rgba(185, 28, 28, 0.52));
    color: #fecaca;
}

#units .annotation-actions button.delete:hover {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.82), rgba(220, 38, 38, 0.72));
    border-color: rgba(248, 113, 113, 0.52);
    color: #fef2f2;
}

#units .annotation-empty {
    color: #94a3b8;
    font-size: 13px;
    padding: 12px;
    text-align: center;
}

#units .internal-zqk-action-buttons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#units .internal-zqk-actions button {
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.84), rgba(226, 232, 240, 0.72));
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-zqk-actions button:hover {
    background: linear-gradient(180deg, rgba(226, 232, 240, 0.92), rgba(226, 232, 240, 0.82));
    border-color: rgba(100, 116, 139, 0.42);
    color: #0f172a;
}

#units .internal-zqk-actions button.internal-zqk-archive-button {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(96, 165, 250, 0.32);
    color: #dbeafe;
}

#units .internal-zqk-actions button.internal-zqk-archive-button:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(147, 197, 253, 0.42);
    color: #eff6ff;
}

@media (max-width: 1180px) {
    #units .internal-zqk-layout {
        grid-template-columns: 1fr;
    }

    #units .internal-zqk-sidebar {
        position: static;
    }

    #units .internal-zqk-viewer-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 820px) {
    #units .internal-zqk-document {
        padding: 24px 20px 26px;
    }

    #units .internal-zqk-meta,
    #units .internal-zqk-grid,
    #units .internal-zqk-grid.triple,
    #units .internal-zqk-grid.signatures {
        grid-template-columns: 1fr;
    }

    #units .internal-zqk-table-head,
    #units .internal-zqk-table-row {
        grid-template-columns: 1fr;
    }

    #units .internal-zqk-table-cell {
        border-left: none;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
    }

    #units .internal-zqk-table-head .internal-zqk-table-cell:first-child,
    #units .internal-zqk-table-row .internal-zqk-table-cell:first-child {
        border-top: none;
    }
}

#units .internal-staff-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .internal-staff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .internal-staff-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.9));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

#units .internal-staff-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#units .internal-staff-card-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#units .internal-staff-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#units .internal-staff-card-meta span,
#units .internal-staff-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.62);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#units .internal-staff-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-staff-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(51, 65, 85, 0.34);
}

#units .internal-staff-row:first-child {
    padding-top: 0;
    border-top: none;
}

#units .internal-staff-label {
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .internal-staff-value {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
}

#units .internal-staff-status.status-active {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
}

#units .internal-staff-status.status-inactive {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#units .internal-staff-status.status-observation {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#units .internal-employees-shell {
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.97)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

#units .internal-employees-placeholder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-employees-placeholder h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#units .internal-employees-placeholder p {
    margin: 0;
    max-width: 620px;
    font-size: 14px;
    line-height: 1.7;
    color: #8da1b7;
}

#units .internal-employees-table-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .internal-employees-table-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

#units .internal-employees-table-header-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#units .internal-employees-table-header h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#units .internal-employees-table-header p {
    margin: 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.7;
    color: #8da1b7;
}

#units .internal-employees-table-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.82);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
    white-space: nowrap;
}

#units .internal-employees-table-add:hover {
    border-color: rgba(100, 116, 139, 0.92);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.96));
    transform: translateY(-1px);
}

#units .internal-employees-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .internal-employees-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    table-layout: fixed;
}

#units .internal-employees-table thead th {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.88);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cbd5e1;
    text-align: left;
    white-space: nowrap;
}

#units .internal-employees-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(30, 41, 59, 0.68);
    font-size: 14px;
    line-height: 1.55;
    color: #dbe4ee;
    text-align: left;
    vertical-align: middle;
}

#units .internal-employees-table tbody tr:last-child td {
    border-bottom: none;
}

#units .internal-employees-table tbody tr.internal-employees-row {
    background: rgba(2, 6, 23, 0.12);
}

#units .internal-employees-table tbody tr.internal-employees-row td:first-child {
    border-left: 3px solid transparent;
}

#units .internal-employees-table tbody tr.internal-employees-row.row-status-aktiv td:first-child {
    border-left-color: rgba(34, 197, 94, 0.42);
}

#units .internal-employees-table tbody tr.internal-employees-row.row-status-inaktiv td:first-child {
    border-left-color: rgba(100, 116, 139, 0.4);
}

#units .internal-employees-table tbody tr.internal-employees-row.row-status-urlaub td:first-child {
    border-left-color: rgba(96, 165, 250, 0.42);
}

#units .internal-employees-table tbody tr.internal-employees-row.row-status-suspendiert td:first-child {
    border-left-color: rgba(248, 113, 113, 0.42);
}

#units .internal-employees-table-empty td {
    padding: 28px 16px;
    color: #8da1b7;
    text-align: center;
}

#units .internal-employees-table-input,
#units .internal-employees-table-select {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
    outline: none;
}

#units .internal-employees-table-input::placeholder {
    color: #64748b;
}

#units .internal-employees-table-input:focus,
#units .internal-employees-table-select:focus {
    border-color: rgba(96, 165, 250, 0.38);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#units .internal-employees-table-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

#units .internal-employees-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.96));
    color: #f8fafc;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
    white-space: nowrap;
}

#units .internal-employees-table-action:hover {
    border-color: rgba(100, 116, 139, 0.9);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.98));
    transform: translateY(-1px);
}

#units .internal-employees-table-add {
    border-color: rgba(96, 165, 250, 0.34);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.9), rgba(30, 41, 59, 0.96));
    color: #eff6ff;
}

#units .internal-employees-table-add:hover {
    border-color: rgba(147, 197, 253, 0.46);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.88), rgba(30, 41, 59, 0.98));
}

#units .internal-employees-table-action {
    border-color: rgba(34, 197, 94, 0.28);
    background: linear-gradient(180deg, rgba(20, 83, 45, 0.82), rgba(30, 41, 59, 0.96));
    color: #dcfce7;
}

#units .internal-employees-table-action:hover {
    border-color: rgba(74, 222, 128, 0.4);
    background: linear-gradient(180deg, rgba(22, 101, 52, 0.88), rgba(30, 41, 59, 0.98));
}

#units .internal-employees-table-action.delete {
    border-color: rgba(127, 29, 29, 0.48);
    background: linear-gradient(180deg, rgba(69, 10, 10, 0.92), rgba(30, 41, 59, 0.96));
    color: #fee2e2;
}

#units .internal-employees-table-action.delete:hover {
    border-color: rgba(248, 113, 113, 0.42);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.82), rgba(51, 65, 85, 0.98));
}

#units .internal-employees-status-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-employees-rank-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-employees-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

#units .internal-employees-rank-badge.agent-rank {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#units .internal-employees-rank-badge.rank-leitung {
    color: #fef3c7;
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(120, 53, 15, 0.28);
}

#units .internal-employees-rank-badge.rank-stellv-leitung {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#units .internal-employees-rank-badge.rank-ausbilder {
    color: #ede9fe;
    border-color: rgba(167, 139, 250, 0.32);
    background: rgba(76, 29, 149, 0.24);
}

#units .internal-employees-rank-badge.rank-agent {
    color: #cbd5e1;
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(51, 65, 85, 0.46);
}

#units .internal-employees-rank-badge.rank-probe {
    color: #ffedd5;
    border-color: rgba(249, 115, 22, 0.3);
    background: rgba(124, 45, 18, 0.28);
}

#units .internal-employees-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

#units .internal-employees-status-badge.status-aktiv {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.3);
}

#units .internal-employees-status-badge.status-inaktiv {
    color: #cbd5e1;
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(51, 65, 85, 0.46);
}

#units .internal-employees-status-badge.status-urlaub {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.26);
    background: rgba(30, 64, 175, 0.24);
}

#units .internal-employees-status-badge.status-suspendiert {
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.28);
}

#units .internal-employees-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.97)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

#units .internal-employees-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.68);
}

#units .internal-employees-sidebar-header h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#units .internal-employees-sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #8da1b7;
}

#units .internal-employees-eyebrow {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-employees-new,
#units .internal-employees-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.82);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#units .internal-employees-new:hover,
#units .internal-employees-save:hover {
    border-color: rgba(100, 116, 139, 0.92);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.96));
    transform: translateY(-1px);
}

#units .internal-employees-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-employees-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(2, 6, 23, 0.74));
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#units .internal-employees-item:hover {
    border-color: rgba(100, 116, 139, 0.74);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.9));
    transform: translateY(-1px);
}

#units .internal-employees-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.22), rgba(15, 23, 42, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 24px rgba(2, 6, 23, 0.2);
}

#units .internal-employees-item-title {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#units .internal-employees-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #8da1b7;
}

#units .internal-employees-detail {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

#units .internal-employees-document {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 30px 32px;
    border-radius: 28px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(180deg, rgba(252, 252, 253, 0.98), rgba(243, 246, 250, 0.98)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 28px 56px rgba(2, 6, 23, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    color: #0f172a;
}

#units .internal-employees-document-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.32);
}

#units .internal-employees-document-title span {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-employees-document-title h3 {
    margin: 6px 0 0;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #0f172a;
}

#units .internal-employees-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(100, 116, 139, 0.24);
    background: rgba(226, 232, 240, 0.7);
    color: #334155;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

#units .internal-employees-badge.status-active {
    color: #166534;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(220, 252, 231, 0.8);
}

#units .internal-employees-badge.status-away {
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(254, 243, 199, 0.82);
}

#units .internal-employees-badge.status-inactive {
    color: #475569;
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(226, 232, 240, 0.78);
}

#units .internal-employees-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

#units .internal-employees-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#units .internal-employees-field.full {
    grid-column: 1 / -1;
}

#units .internal-employees-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-employees-field input,
#units .internal-employees-field select,
#units .internal-employees-field textarea {
    width: 100%;
    padding: 12px 13px;
    border-radius: 13px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#units .internal-employees-field textarea {
    min-height: 130px;
    resize: vertical;
}

#units .internal-employees-field input:focus,
#units .internal-employees-field select:focus,
#units .internal-employees-field textarea:focus {
    border-color: rgba(71, 85, 105, 0.42);
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

#units .internal-employees-actions {
    display: flex;
    justify-content: flex-end;
}

#units .internal-employees-save {
    width: auto;
    min-width: 160px;
    border-color: rgba(30, 64, 175, 0.32);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.92), rgba(30, 41, 59, 0.96));
}

@media (max-width: 1180px) {
    #units .internal-employees-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    #units .internal-employees-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #units .internal-employees-detail {
        padding: 16px;
    }

    #units .internal-employees-document {
        padding: 24px 20px 26px;
    }

    #units .internal-employees-document-header,
    #units .internal-employees-fields {
        grid-template-columns: 1fr;
    }

    #units .internal-employees-document-header {
        flex-direction: column;
    }
}

#units .internal-leadership-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .internal-leadership-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

#units .internal-leadership-eyebrow {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .internal-leadership-header h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .internal-leadership-header p {
    margin: 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-leadership-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

#units .internal-leadership-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
}

#units .internal-leadership-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 1;
}

#units .internal-leadership-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.34), rgba(71, 85, 105, 0.1));
}

#units .internal-leadership-card-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
    position: relative;
    z-index: 1;
}

#units .internal-leadership-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}

#units .internal-leadership-card-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-leadership-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
    border-top: 1px solid rgba(51, 65, 85, 0.34);
    font-size: 12px;
    line-height: 1.4;
    color: #64748b;
}

#units .internal-leadership-empty {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(15, 23, 42, 0.58);
    color: #cbd5e1 !important;
}

#units .internal-leadership-feedback {
    display: none;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
    color: #dcfce7 !important;
    font-size: 13px;
    line-height: 1.6;
}

#units .internal-leadership-feedback.visible {
    display: block;
}

#units .internal-leadership-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units #internalLeadershipApprovalsList {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.68) transparent;
}

#units #internalLeadershipApprovalsList::-webkit-scrollbar {
    width: 8px;
}

#units #internalLeadershipApprovalsList::-webkit-scrollbar-track {
    background: transparent;
}

#units #internalLeadershipApprovalsList::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.68);
    border-radius: 999px;
}

#units .internal-leadership-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(15, 23, 42, 0.58);
}

#units .internal-leadership-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .internal-leadership-entry-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#units .internal-leadership-entry-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .internal-leadership-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .internal-leadership-actions button {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-leadership-actions button:hover {
    background: rgba(30, 41, 59, 0.86);
    border-color: rgba(96, 165, 250, 0.32);
    color: #f8fafc;
}

#units .internal-leadership-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .internal-leadership-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .internal-leadership-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .internal-leadership-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .internal-leadership-field input,
#units .internal-leadership-field textarea,
#units .internal-leadership-field select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.56);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.5;
    padding: 9px 11px;
    outline: none;
}

#units .internal-leadership-field textarea {
    min-height: 96px;
    resize: vertical;
}

#units .internal-leadership-status-display {
    min-height: 120px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(15, 23, 42, 0.58);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
}

#units .internal-leadership-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .internal-leadership-tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    #units .internal-leadership-grid {
        grid-template-columns: 1fr;
    }
}

#units .internal-archive-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .internal-archive-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

#units .internal-archive-eyebrow {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .internal-archive-header h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .internal-archive-header p {
    margin: 0;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-archive-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-archive-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
    cursor: default;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#units .internal-archive-card.is-openable {
    cursor: pointer;
}

#units .internal-archive-card:hover {
    border-color: rgba(96, 165, 250, 0.32);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    transform: translateY(-1px);
}

#units .internal-archive-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

#units .internal-archive-card-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#units .internal-archive-card-title h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .internal-archive-card-title p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .internal-archive-card-meta {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 14px;
}

#units .internal-archive-card-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#units .internal-archive-card-meta strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-archive-card-meta span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .internal-archive-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#units .internal-archive-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

#units .internal-archive-card-actions {
    display: flex;
    justify-content: flex-end;
}

#units .internal-archive-card-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .internal-archive-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    color: #cbd5e1;
}

#units .internal-archive-empty strong {
    color: #f8fafc;
    font-size: 15px;
}

#units .internal-archive-empty span {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

@media (max-width: 1100px) {
    #units .internal-archive-card-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    #units .internal-archive-card-header {
        flex-direction: column;
    }

    #units .internal-archive-badges,
    #units .internal-archive-card-actions {
        justify-content: flex-start;
    }

    #units .internal-archive-card-meta {
        grid-template-columns: 1fr;
    }
}

#units .internal-leadership-archive {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .internal-leadership-archive h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .internal-leadership-archive p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-leadership-archive-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-leadership-archive-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.56);
    background: rgba(15, 23, 42, 0.72);
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#units .internal-leadership-archive-card:hover {
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(15, 23, 42, 0.86);
    transform: translateY(-1px);
}

#units .internal-leadership-archive-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#units .internal-leadership-archive-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .internal-leadership-archive-card-title h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .internal-leadership-archive-card-title p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .internal-leadership-archive-card-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#units .internal-leadership-archive-card-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
}

#units .internal-leadership-archive-card-body div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .internal-leadership-archive-card-body strong {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #94a3b8;
}

#units .internal-leadership-archive-card-body span {
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .internal-leadership-archive-document {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 28px;
    border-radius: 22px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .internal-leadership-archive-toolbar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#units .internal-leadership-archive-toolbar button {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#units .internal-leadership-archive-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.42);
}

#units .internal-leadership-archive-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .internal-leadership-archive-heading span {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .internal-leadership-archive-heading h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .internal-leadership-archive-heading p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-leadership-archive-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
}

#units .internal-leadership-archive-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .internal-leadership-archive-meta-item strong {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .internal-leadership-archive-meta-item span {
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .internal-leadership-archive-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(51, 65, 85, 0.34);
}

#units .internal-leadership-archive-section h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .internal-leadership-archive-display {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .internal-leadership-archive-evidence-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-leadership-archive-evidence-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(15, 23, 42, 0.72);
}

#units .internal-leadership-archive-evidence-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#units .internal-leadership-archive-evidence-card-header h5 {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .internal-leadership-archive-evidence-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .internal-leadership-archive-evidence-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.72);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
}

#units .internal-leadership-archive-evidence-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-leadership-archive-evidence-preview img {
    display: block;
    max-width: 320px;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.48);
    background: #f8fafc;
}

#units .internal-leadership-archive-evidence-document {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.56);
    background: rgba(2, 6, 23, 0.38);
}

#units .internal-leadership-archive-evidence-document button {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .internal-investigation-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .internal-investigation-layout {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

#units .internal-investigation-sidebar,
#units .internal-investigation-viewer {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.96);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

#units .internal-investigation-viewer {
    gap: 16px;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    align-items: stretch;
}

#units .internal-investigation-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 2px 2px;
}

#units .internal-investigation-header h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f8fafc;
}

#units .internal-investigation-create-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    margin: 0 0 8px 0;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.26);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98));
    color: #eff6ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

#units .internal-investigation-create-btn:hover {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.28), rgba(15, 23, 42, 0.98));
    border-color: rgba(147, 197, 253, 0.42);
    color: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
}

#units .internal-investigation-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-investigation-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(51, 65, 85, 0.4);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.9));
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
    text-align: left;
}

#units .internal-investigation-item:hover {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.98));
    border-color: rgba(96, 165, 250, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
}

#units .internal-investigation-item.active {
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.2), rgba(15, 23, 42, 0.98));
    border-color: rgba(96, 165, 250, 0.32);
    box-shadow:
        0 0 0 1px rgba(96, 165, 250, 0.12),
        0 18px 32px rgba(0, 0, 0, 0.2);
}

#units .investigation-case-title {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

#units .investigation-case-title strong {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.02em;
}

#units .investigation-case-subtitle {
    font-size: 13px;
    line-height: 1.55;
    color: #a8b6c8;
}

#units .investigation-case-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

#units .investigation-case-badge,
#units .internal-investigation-item-status,
#units .investigation-access-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.68);
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    box-sizing: border-box;
}

#units .investigation-access-badge,
#leadership .investigation-access-badge {
    align-self: auto;
    min-width: 0;
}

#units .investigation-access-badge.level-offen,
#leadership .investigation-access-badge.level-offen {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.26);
    background: rgba(30, 64, 175, 0.16);
}

#units .investigation-access-badge.level-intern,
#leadership .investigation-access-badge.level-intern {
    color: #cbd5e1;
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(30, 41, 59, 0.72);
}

#units .investigation-access-badge.level-nur-leitung,
#leadership .investigation-access-badge.level-nur-leitung {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.22);
    background: rgba(127, 29, 29, 0.14);
}

#units .investigation-access-badge.level-bearbeiter,
#leadership .investigation-access-badge.level-bearbeiter {
    color: #fef3c7;
    border-color: rgba(217, 119, 6, 0.22);
    background: rgba(120, 53, 15, 0.14);
}

#units .internal-investigation-item-status {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.14);
}

#units .internal-investigation-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 24px;
    border-radius: 18px;
    border: 1px dashed rgba(71, 85, 105, 0.48);
    background: rgba(2, 6, 23, 0.24);
    color: #94a3b8;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
}

#units .internal-investigation-file {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 30px 32px;
    border-radius: 28px;
    border: 1px solid rgba(203, 213, 225, 0.22);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.98));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

#units .investigation-access-denied,
#leadership .investigation-access-denied {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.06);
}

#units .investigation-access-denied-title,
#leadership .investigation-access-denied-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .investigation-access-denied-title h4,
#leadership .investigation-access-denied-title h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #0f172a;
}

#units .investigation-access-denied-title p,
#leadership .investigation-access-denied-title p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
}

#units .investigation-access-denied-meta,
#leadership .investigation-access-denied-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

#units .investigation-access-denied-meta div,
#leadership .investigation-access-denied-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .investigation-access-denied-meta strong,
#leadership .investigation-access-denied-meta strong {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
}

#units .investigation-access-denied-meta span,
#leadership .investigation-access-denied-meta span {
    font-size: 14px;
    line-height: 1.6;
    color: #0f172a;
}

#units .investigation-access-denied-text,
#leadership .investigation-access-denied-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #334155;
}

#units .internal-investigation-viewer-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

#units .internal-investigation-file-header {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 0 18px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    background: none;
}

#units .internal-investigation-file-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .internal-investigation-file-toolbar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#units .internal-investigation-file-toolbar button {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.42);
    background: rgba(255, 255, 255, 0.8);
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-investigation-file-toolbar button:hover {
    background: rgba(226, 232, 240, 0.9);
    border-color: rgba(51, 65, 85, 0.5);
    color: #020617;
}

#units .internal-investigation-archive-btn {
    border-color: rgba(148, 163, 184, 0.34);
    background: rgba(241, 245, 249, 0.92);
    color: #0f172a;
}

#units .internal-investigation-archive-btn:hover {
    background: rgba(226, 232, 240, 0.96);
    border-color: rgba(71, 85, 105, 0.56);
    color: #020617;
}

#units .internal-investigation-file-heading span {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1d4ed8;
}

#units .internal-investigation-file-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: #0f172a;
}

#units .internal-investigation-file-subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
}

#units .internal-investigation-file-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;
}

#units .internal-investigation-file-meta-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid rgba(203, 213, 225, 0.88);
}

#units .internal-investigation-file-meta-item:nth-child(-n + 3) {
    border-top: none;
    padding-top: 0;
}

#units .internal-investigation-file-meta-label {
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}

#units .internal-investigation-file-meta-value {
    font-size: 14px;
    line-height: 1.5;
    color: #0f172a;
}

#units .internal-investigation-file-display {
    font-size: 14px;
    line-height: 1.7;
    color: #1e293b;
    white-space: pre-wrap;
}

#units .internal-investigation-file-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.28);
    background: rgba(226, 232, 240, 0.72);
    color: #1e293b;
    font-size: 12px;
    font-weight: 700;
}

#units .internal-investigation-file-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-investigation-file-field input,
#units .internal-investigation-file-field select,
#units .internal-investigation-file-field textarea {
    width: 100%;
    padding: 11px 0;
    border: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.88);
    border-radius: 0;
    background: transparent;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#units .internal-investigation-file-field input:focus,
#units .internal-investigation-file-field select:focus,
#units .internal-investigation-file-field textarea:focus {
    border-bottom-color: rgba(96, 165, 250, 0.52);
    box-shadow: none;
}

#units .internal-investigation-file-field textarea {
    min-height: 86px;
    resize: vertical;
    line-height: 1.6;
}

#units .internal-investigation-file-textarea {
    width: 100%;
    min-height: 140px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.72);
    background: rgba(255, 255, 255, 0.88);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.7;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
}

#units .internal-investigation-file-textarea:focus {
    border-color: rgba(96, 165, 250, 0.36);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#units .internal-investigation-file-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .internal-investigation-file-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(203, 213, 225, 0.88);
}

#units .internal-investigation-file-subsection {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    padding-left: 14px;
    border-top: 1px solid rgba(226, 232, 240, 0.92);
    border-left: 2px solid rgba(148, 163, 184, 0.55);
}

#units .internal-investigation-evidence-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .internal-investigation-evidence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

#units .internal-investigation-evidence-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    padding: 16px 0 0 0;
    border: none;
    background: none;
}

#units .internal-investigation-evidence-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-investigation-evidence-field.full {
    grid-column: 1 / -1;
}

#units .internal-investigation-evidence-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #475569;
}

#units .internal-investigation-evidence-field input,
#units .internal-investigation-evidence-field select,
#units .internal-investigation-evidence-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.72);
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#units .internal-investigation-evidence-field input:focus,
#units .internal-investigation-evidence-field select:focus,
#units .internal-investigation-evidence-field textarea:focus {
    border-color: rgba(96, 165, 250, 0.36);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#units .internal-investigation-evidence-field textarea {
    min-height: 110px;
    resize: vertical;
}

#units .internal-investigation-evidence-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 1 / -1;
}

#units .internal-investigation-evidence-actions button {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.42);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-investigation-evidence-actions button:hover {
    background: rgba(226, 232, 240, 0.92);
    border-color: #334155;
    color: #020617;
}

#units .internal-investigation-evidence-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-investigation-evidence-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(203, 213, 225, 0.88);
    background: none;
}

#units .internal-investigation-evidence-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#units .internal-investigation-evidence-card-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    color: #0f172a;
}

#units .internal-investigation-evidence-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .internal-investigation-evidence-card-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(241, 245, 249, 0.96);
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

#units .internal-investigation-evidence-card-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #334155;
}

#units .internal-investigation-evidence-preview {
    display: flex;
    justify-content: flex-start;
}

#units .internal-investigation-evidence-preview img {
    display: block;
    max-width: 320px;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.48);
    background: #f8fafc;
}

#units .internal-investigation-evidence-document {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(203, 213, 225, 0.88);
    background: rgba(248, 250, 252, 0.86);
}

#units .internal-investigation-evidence-file {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .internal-investigation-evidence-file strong {
    font-size: 13px;
    line-height: 1.4;
    color: #0f172a;
}

#units .internal-investigation-evidence-file span {
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
}

#units .internal-investigation-evidence-open {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.42);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-investigation-evidence-open:hover {
    background: rgba(226, 232, 240, 0.92);
    border-color: #334155;
    color: #020617;
}

#units .internal-investigation-evidence-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

#units .internal-investigation-evidence-action {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.42);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-investigation-evidence-action:hover {
    background: rgba(226, 232, 240, 0.92);
    border-color: #334155;
    color: #020617;
}

#units .internal-investigation-evidence-action.delete {
    border-color: rgba(185, 28, 28, 0.22);
    color: #7f1d1d;
}

#units .internal-investigation-evidence-action.delete:hover {
    background: rgba(254, 226, 226, 0.92);
    border-color: rgba(185, 28, 28, 0.4);
    color: #7f1d1d;
}

#units .internal-investigation-evidence-editing {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
}

#units .internal-investigation-file-section-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #0f172a;
}

#units .internal-investigation-file-section-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    border: none;
    background: none;
}

#units .internal-investigation-file-section-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #334155;
}

#units .internal-investigation-file-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(51, 65, 85, 0.42);
}

#units .internal-investigation-file-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.62);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#units .internal-investigation-file-actions button {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.58);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-investigation-file-actions button:hover {
    background: rgba(30, 41, 59, 0.72);
    border-color: #334155;
    color: #f8fafc;
}

#units .internal-investigation-signature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    padding-top: 8px;
}

#units .internal-investigation-signature-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-investigation-signature-label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-investigation-signature-line {
    min-height: 42px;
    display: flex;
    align-items: flex-end;
    padding: 0 0 8px;
    border-bottom: 1.5px solid rgba(100, 116, 139, 0.8);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
}

#units .internal-investigation-signature-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-investigation-signature-field input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.72);
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#units .internal-investigation-signature-field input:focus {
    border-color: rgba(96, 165, 250, 0.36);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

@media (max-width: 900px) {
    #units .internal-investigation-layout {
        grid-template-columns: 1fr;
    }

    #units .internal-investigation-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #units .internal-investigation-file-meta,
    #units .internal-investigation-file-summary {
        grid-template-columns: 1fr;
    }

    #units .internal-investigation-signature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    #units .internal-investigation-file {
        padding: 24px 20px 26px;
    }
}
/* ÜBERSCHRIFTEN */

h3 {
    margin-top: 30px;
    margin-bottom: 10px;
    opacity: 0.8;
}

#crimeList {
    margin-top: 20px;
}

.crime {
    display: flex;
    justify-content: space-between;
    background: #0f172a;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid #1e293b;
}
.crime-item {
    padding: 10px;
    background: #0f172a;
    margin-bottom: 5px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #1e293b;
}

.crime-item:hover {
    background: #1e293b;
}

.selected {
    display: flex;
    justify-content: space-between;
    background: #020617;
    padding: 10px;
    margin-top: 10px;
    border-radius: 8px;
}

/*Tabelle box Bußgeldrechner */
#calculator > h2 {
    text-align: center;
    margin-bottom: 24px;
}

.summary {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.box {
    background: linear-gradient(180deg, #0f172a, #020617);
    padding: 20px;
    border-radius: 12px;
    flex: 1;
    border: 1px solid #1e293b;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    margin-bottom: 20px;
}

.box h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.box h2 {
    margin: 0;
    font-size: 28px;
}

#slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slot {
    position: relative;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 18px;
    background: rgba(15, 23, 42, 0.82);
    padding: 14px 44px 14px 15px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.slot:hover {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(148, 163, 184, 0.32);
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.18);
    transform: translateY(-1px);
}

.slot-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.slot-identity {
    display: flex;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
}

.slot-code {
    font-size: 19px;
    line-height: 1.2;
    font-weight: 800;
    color: #e0f2fe;
}

.slot-law {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #93c5fd;
}

.slot-main {
    min-width: 0;
    padding-right: 2px;
}

.slot-title {
    font-size: 16px;
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 4px;
}

.slot-desc {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(148, 163, 184, 0.82);
}

@media (max-width: 720px) {
    .slot {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 13px 42px 13px 14px;
    }
}

#search {
    width: 100%;
    padding: 15px 16px;
    margin-bottom: 15px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.92);
    background: rgba(15, 23, 42, 0.9);
    color: white;
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
}

#lawTable {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.law-title {
    font-weight: bold;
    margin-bottom: 4px;
}

.law-meta {
    font-size: 13px;
    opacity: 0.85;
}

.filters {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1;
    margin-bottom: 0;
}

.filters select,
.filters input {
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #0f172a;
    color: white;
    border: 1px solid #1e293b;
    box-sizing: border-box;
    outline: none;
}

.filters select {
    min-width: 220px;
}

.filters input {
    flex: 1;
    min-width: 320px;
}

.filters #search {
    margin-bottom: 0;
    height: 52px;
    min-height: 52px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 24px rgba(2, 6, 23, 0.16);
}

.filters select:focus,
.filters input:focus {
    border: 1px solid rgba(96, 165, 250, 0.58);
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.14),
        0 12px 26px rgba(2, 6, 23, 0.18);
}

.law-table {
    background: #020617;
    border: 1px solid #1e293b;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    margin-top: 4px;
    margin-bottom: 20px;
}

.law-head {
    display: grid;
    grid-template-columns: 120px 120px 1fr 120px 120px;
    background: #0f172a;
    font-weight: bold;
    padding: 14px 12px;
    border-bottom: 1px solid #1e293b;
}

.law-head div {
    padding: 4px 8px;
    font-size: 13px;
    text-transform: uppercase;
    opacity: 0.85;
}

.law-row {
    display: grid;
    grid-template-columns: 120px 120px 1fr 120px 120px;
    padding: 14px 12px;
    border-bottom: 1px solid #1e293b;
    cursor: pointer;
    transition: 0.2s;
    background: #020617;
}

.law-row:hover {
    background: #1e293b;
}

.law-row div {
    padding: 4px 8px;
}

.law-name {
    font-weight: bold;
}

.law-desc {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 4px;
}

.slot-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.78);
    color: #cbd5e1;
    border: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 800;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(71, 85, 105, 0.72);
}

.slot-remove:hover {
    background: rgba(127, 29, 29, 0.9);
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.42);
    box-shadow: 0 0 8px rgba(127, 29, 29, 0.32);
    transform: translateY(-1px);
}

.calc-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
    align-items: flex-end;
    gap: 6px;
    min-height: 52px;
}

.calc-button-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.calc-button-row button {
    height: 52px;
    min-height: 52px;
    width: 136px;
    background: rgba(185, 28, 28, 0.92);
    color: white;
    border: 1px solid rgba(248, 113, 113, 0.32);
    padding: 0 18px;
    border-radius: 12px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    font-weight: bold;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 24px rgba(2, 6, 23, 0.16);
    white-space: nowrap;
}

.calc-button-row button:hover {
    background: rgba(220, 38, 38, 0.94);
    border-color: rgba(252, 165, 165, 0.42);
    box-shadow:
        0 0 0 3px rgba(220, 38, 38, 0.12),
        0 12px 26px rgba(2, 6, 23, 0.18);
}

.calc-button-row button.calc-copy-btn {
    background: rgba(21, 128, 61, 0.92);
    border-color: rgba(74, 222, 128, 0.32);
}

.calc-button-row button.calc-copy-btn:hover {
    background: rgba(22, 163, 74, 0.94);
    border-color: rgba(134, 239, 172, 0.42);
    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.12),
        0 12px 26px rgba(2, 6, 23, 0.18);
}

.calc-copy-toast {
    min-height: 20px;
    color: #bbf7d0;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.calc-copy-toast.visible {
    opacity: 1;
}

.calc-toolbar {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 700px) {
    .calc-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .calc-actions {
        align-items: stretch;
        justify-content: stretch;
    }

    .calc-button-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .calc-button-row button {
        width: 100%;
    }

    .calc-copy-toast {
        text-align: center;
    }
}

.empty-state {
    background: #0f172a;
    padding: 14px;
    border-radius: 10px;
    border: 1px dashed #334155;
    opacity: 0.85;
    text-align: center;
}

#measures {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.measure-item {
    background: #0f172a;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #1e293b;
    font-weight: 500;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.money-value {
    color: #22c55e;
}

.jail-value {
    color: #f59e0b;
}

/* Bußgeldkatalogseite */

#catalog > h2 {
    text-align: center;
}

.catalog-slogan {
    margin: 8px 0 18px;
    padding: 6px 12px 10px;
    text-align: center;
}

.catalog-slogan-quote {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(17px, 1.8vw, 24px);
    line-height: 1.32;
    font-weight: 800;
}

.catalog-slogan-name {
    display: block;
    margin-top: 8px;
    color: rgba(203, 213, 225, 0.72);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}

.catalog-section {
    margin-bottom: 14px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #1e293b;
    background: #020617;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.18);
}

.catalog-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #0b1220;
}

.catalog-header:hover {
    background: #111b2e;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
}

.catalog-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.catalog-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    box-shadow: 0 0 6px currentColor;
}

.catalog-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.catalog-count {
    font-size: 13px;
    opacity: 0.8;
    padding: 4px 10px;
    border-radius: 999px;
    background: #111827;
    border: 1px solid #1e293b;
    min-width: 96px;
    text-align: center;
}

.catalog-arrow {
    font-size: 15px;
    transition:
        transform 0.28s ease,
        opacity 0.2s ease;
    opacity: 0.85;
}

.catalog-section.open .catalog-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.catalog-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.35s ease,
        opacity 0.25s ease;
}

.catalog-section.open .catalog-body {
    opacity: 1;
}

.catalog-section.open {
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.08);
}

.catalog-rows {
    margin-left: 0;
    padding-left: 0;
    border-left: 3px solid transparent;
}

.catalog-head {
    display: grid;
    grid-template-columns: 92px minmax(0, 1.7fr) 104px 96px;
    gap: 0;
    padding: 13px 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(11, 18, 32, 0.96));
    border-top: 1px solid #162033;
    border-bottom: 1px solid #162033;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #cbd5e1;
    align-items: center;
}

.catalog-head > div {
    padding: 0 8px;
}

.catalog-head {
    border-radius: 10px 10px 0 0;
}

.catalog-row:last-child {
    border-radius: 0 0 10px 10px;
}

.catalog-row > div {
    padding: 0 8px;
}

.catalog-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1.7fr) 104px 96px;
    gap: 0;
    align-items: center;
    padding: 15px 18px;
    border-top: 1px solid #162033;
    min-height: 72px;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

.catalog-row:hover {
    background: rgba(15, 23, 42, 0.78);
}

.catalog-head > div,
.catalog-row > div {
    min-width: 0;
}

.catalog-rows.line-BGB {
    border-left-color: #14b8a6;
}
.catalog-rows.line-StGB {
    border-left-color: #dc2626;
}
.catalog-rows.line-StVO {
    border-left-color: #16a34a;
}
.catalog-rows.line-LuVO {
    border-left-color: #2563eb;
}
.catalog-rows.line-WaffG {
    border-left-color: #eab308;
}
.catalog-rows.line-BtMG {
    border-left-color: #f97316;
}
.catalog-rows.line-GewG {
    border-left-color: #9333ea;
}
.catalog-rows.line-PolG {
    border-left-color: #f472b6;
}
.catalog-rows.line-MiG {
    border-left-color: #6b8e23;
}
.catalog-rows.line-MilG {
    border-left-color: #64748b;
}
.catalog-rows.line-AggG {
    border-left-color: #0ea5e9;
}
.catalog-rows.line-BeamtG {
    border-left-color: #fb7185;
}
.catalog-rows.line-LDG {
    border-left-color: #fde047;
}
.catalog-rows.line-StPO {
    border-left-color: #0891b2;
}

.catalog-paragraph {
    font-weight: 700;
    opacity: 0.95;
    font-size: 14px;
    color: #38bdf8;
    padding-right: 14px;
}

.catalog-name {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

.catalog-desc {
    font-size: 13px;
    opacity: 0.76;
    line-height: 1.5;
}

.catalog-head div:nth-child(3),
.catalog-head div:nth-child(4) {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.catalog-money,
.catalog-jail {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Farben */
.dot-BGB {
    background: #14b8a6;
}
.dot-StGB {
    background: #dc2626;
}
.dot-StVO {
    background: #16a34a;
}
.dot-LuVO {
    background: #2563eb;
}
.dot-WaffG {
    background: #eab308;
}
.dot-BtMG {
    background: #f97316;
}
.dot-GewG {
    background: #9333ea;
}
.dot-PolG {
    background: #f472b6;
}
.dot-MiG {
    background: #6b8e23;
}
.dot-MilG {
    background: #64748b;
}
.dot-AggG {
    background: #0ea5e9;
}
.dot-BeamtG {
    background: #fb7185;
}
.dot-LDG {
    background: #fde047;
}
.dot-StPO {
    background: #0891b2;
}

@media (max-width: 900px) {
    .catalog-row,
    .catalog-head {
        grid-template-columns: 80px 1fr 80px 80px;
    }
}

@media (max-width: 700px) {
    .catalog-header {
        grid-template-columns: 1fr auto;
    }

    .catalog-count {
        grid-column: 1 / 2;
        justify-self: start;
        margin-left: 22px;
    }

    .catalog-arrow {
        grid-row: 1 / 3;
    }

    .catalog-head {
        display: none;
    }

    .catalog-row {
        grid-template-columns: 1fr;
    }

    .catalog-money,
    .catalog-jail {
        justify-content: flex-start;
        text-align: left;
    }
}

.catalog-info {
    margin-top: 6px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    font-size: 13px;
    opacity: 0.7;
    color: #94a3b8;
    border-bottom: 1px solid #1e293b;
}

.catalog-search-wrap {
    margin-bottom: 16px;
}

.catalog-search {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.88);
    background: rgba(15, 23, 42, 0.76);
    color: white;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.catalog-search:focus {
    border-color: rgba(96, 165, 250, 0.55);
    background: rgba(15, 23, 42, 0.94);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.catalog-search::placeholder {
    color: #94a3b8;
}

.logout-btn {
    margin-top: 6px;
    align-self: flex-end;

    padding: 6px 10px;
    border: none;
    border-radius: 8px;

    background: #b91c1c;
    color: white;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    background: #dc2626;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
    transform: translateY(-1px);
}

.right {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 180px;
    text-align: right;
    font-size: 12px;
    color: #cbd5e1;
    position: relative;
}

.user-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #1e293b;
    border-radius: 10px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-menu-toggle:hover {
    background: #111827;
    border-color: #334155;
}

.user-menu-arrow {
    font-size: 11px;
    color: #93c5fd;
    transition: transform 0.2s ease;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    padding: 6px;
    border: 1px solid #1e293b;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
    display: none;
    z-index: 200;
}

.user-dropdown.open {
    display: block;
}

.user-dropdown button {
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #e2e8f0;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-dropdown button:hover {
    background: #111827;
    color: white;
}

.user-dropdown button.danger {
    color: #fca5a5;
}

.user-dropdown button.danger:hover {
    background: #7f1d1d;
    color: white;
}

.session-status {
    color: #86efac;
    font-size: 11px;
}
.dashboard-card-radio {
    grid-column: span 4;
    position: relative;
    overflow: visible;
}

.radio-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #1e293b;
    border-radius: 12px;
    background: #0b1220;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-toggle:hover {
    background: #111827;
    border-color: #334155;
}

.radio-toggle-arrow {
    color: #93c5fd;
    transition: transform 0.2s ease;
}

.radio-toggle-arrow.open {
    transform: rotate(180deg);
}

.radio-list-wrapper {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    border-radius: 14px;
    background: transparent;
    margin-top: 0;
    padding: 0;
    border: 1px solid transparent;
    box-shadow: none;
    z-index: 14;
    transition:
        max-height 0.28s ease,
        opacity 0.2s ease,
        padding 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.radio-list-wrapper.open {
    max-height: none;
    opacity: 1;
    padding: 8px 0 0;
    overflow-y: visible;
    border-color: transparent;
    box-shadow: none;
}

.radio-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.radio-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: #0b1220;
    transition: all 0.2s ease;
}

.radio-item:hover {
    background: #111827;
    border-color: #334155;
}

.radio-item b {
    color: #f8fafc;
    font-size: 12px;
    min-width: 68px;
}

.radio-item span {
    flex: 1;
    color: #94a3b8;
    font-size: 12px;
    text-align: right;
}

.radio-item.ten b {
    color: #93c5fd;
}

.radio-item.danger {
    border-left: 3px solid #dc2626;
}

.radio-item.danger b {
    color: #fca5a5;
}
.documents-radio-wrap {
    margin-top: 16px;
    max-width: 520px;
}

.documents-radio-wrap .dashboard-card-radio {
    grid-column: auto;
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 520px));
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}

.documents-grid .documents-radio-wrap {
    margin-top: 0;
    max-width: none;
}

.documents-placeholder-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.documents-placeholder-card p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
}

#school .school-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#school .school-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#school .school-header-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#school .school-header h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-header p {
    margin: 0;
    max-width: 520px;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#school .school-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

#school .school-tab-btn {
    padding: 11px 16px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.92));
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#school .school-tab-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    color: #f8fafc;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

#school .school-tab-btn.active {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.26), rgba(29, 78, 216, 0.24));
    border-color: rgba(96, 165, 250, 0.5);
    color: #eff6ff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.16);
}

#school .school-content {
    display: block;
}

#school .school-panel {
    display: none;
}

#school .school-panel.active {
    display: block;
}

#school .school-panel-card {
    padding: 22px;
    border-radius: 20px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#school .school-panel-card h2 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-panel-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-test-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#school .school-test-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#school .school-test-card {
    border-radius: 20px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

#school .school-test-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

#school .school-test-card-header:hover {
    background: rgba(15, 23, 42, 0.82);
}

#school .school-test-card-header-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#school .school-test-card-header h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-test-card-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#school .school-test-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#school .school-test-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
}

#school .school-test-card-arrow {
    flex-shrink: 0;
    color: #93c5fd;
    font-size: 16px;
    transition: transform 0.2s ease;
}

#school .school-test-card.open .school-test-card-arrow {
    transform: rotate(180deg);
}

#school .school-test-card-content {
    display: none;
    padding: 0 20px 20px;
}

#school .school-test-card.open .school-test-card-content {
    display: block;
}

#school .school-test-card-content .school-test-shell {
    padding-top: 4px;
}

#school .school-test-lock {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
}

#school .school-test-lock-card {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: rgba(15, 23, 42, 0.72);
}

#school .school-test-lock-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-test-lock-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-test-lock-actions {
    display: flex;
    justify-content: flex-end;
}

#school .school-test-submitted {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
}

#school .school-test-submitted-card {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.82);
}

#school .school-test-submitted-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-test-submitted-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #cbd5e1;
}

#school .school-test-lock.hidden,
#school .school-test-release-content.hidden,
#school .school-test-submitted.hidden {
    display: none;
}

#school .school-test-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#school .school-test-header h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-test-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-test-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#school .school-test-question {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(15, 23, 42, 0.72);
}

#school .school-test-question h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-test-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#school .school-test-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.62);
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#school .school-test-option:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#school .school-test-option input {
    margin-top: 2px;
    accent-color: #60a5fa;
}

#school .school-test-option span {
    font-size: 14px;
    line-height: 1.5;
    color: #dbe4f0;
}

#school .school-test-input,
#school .school-test-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#school .school-test-input:focus,
#school .school-test-textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#school .school-test-textarea {
    min-height: 110px;
    resize: vertical;
}

#school .school-test-actions {
    display: flex;
    justify-content: flex-end;
}

#school .school-test-submit {
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.4);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.32), rgba(29, 78, 216, 0.28));
    color: #eff6ff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

#school .school-test-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
    border-color: rgba(147, 197, 253, 0.55);
}

#school .school-test-status {
    display: none;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(30, 41, 59, 0.52);
    color: #dbeafe;
    font-size: 14px;
    line-height: 1.6;
}

#school .school-test-status.visible {
    display: block;
}

#school .school-file-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#school .school-file-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(15, 23, 42, 0.72);
}

#school .school-file-section-title {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cbd5e1;
}

#school .school-file-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#school .school-file-grid.compact {
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
}

#school .school-file-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#school .school-file-field.full {
    grid-column: 1 / -1;
}

#school .school-file-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#school .school-file-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#school .school-file-choice .school-test-option {
    min-height: 48px;
}

#school .school-test-head-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 14px;
}

#school .school-admin-module {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.25fr);
    gap: 18px;
    margin-top: 18px;
}

#school .school-admin-card {
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#school .school-admin-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

#school .school-admin-card-header h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-admin-card-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-admin-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#school .school-admin-list-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#school .school-admin-list-block:first-child {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    background: rgba(15, 23, 42, 0.48);
}

#school .school-admin-collapsible-section,
#school .school-admin-collapsible-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#school .school-admin-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

#school .school-admin-card-toggle {
    padding: 0;
}

#school .school-admin-toggle-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#school .school-admin-toggle h3,
#school .school-admin-toggle h4 {
    margin: 0;
    color: #f8fafc;
}

#school .school-admin-toggle p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-admin-toggle:hover .school-admin-toggle-title {
    color: #eff6ff;
}

#school .school-admin-toggle-arrow {
    flex-shrink: 0;
    color: #93c5fd;
    font-size: 16px;
    transition: transform 0.2s ease;
}

#school .school-admin-collapsible-content {
    display: none;
}

#school .school-admin-collapsible-section.open .school-admin-collapsible-content,
#school .school-admin-collapsible-card.open .school-admin-collapsible-content {
    display: block;
}

#school .school-admin-collapsible-section.open .school-admin-toggle-arrow,
#school .school-admin-collapsible-card.open .school-admin-toggle-arrow {
    transform: rotate(180deg);
}

#school .school-admin-list-block + .school-admin-list-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(51, 65, 85, 0.72);
}

#school .school-admin-list-title {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cbd5e1;
}

#school .school-tab-btn.has-notification {
    position: relative;
}

#school .school-admin-request-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.28);
    color: #fee2e2;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#school .school-admin-request-badge.visible {
    display: inline-flex;
}

#school .school-tabs .school-admin-request-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 2;
    pointer-events: none;
}

#school #schoolAdminRequestSection.training-test-requests-highlight {
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow:
        0 0 0 1px rgba(245, 158, 11, 0.14),
        0 16px 30px rgba(120, 53, 15, 0.14);
}

#school #schoolAdminRequestSection.training-test-requests-highlight .school-admin-card-toggle {
    border-color: rgba(245, 158, 11, 0.28);
    background: linear-gradient(180deg, rgba(120, 53, 15, 0.18), rgba(15, 23, 42, 0.92));
}

#school #schoolAdminRequestSection.training-test-requests-highlight .school-admin-toggle-title {
    color: #fde68a;
}

#school #schoolAdminRequestSection.training-test-requests-highlight .school-admin-toggle-arrow {
    color: #fbbf24;
}

#school .school-admin-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(15, 23, 42, 0.72);
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
    cursor: pointer;
}

#school .school-admin-item.active {
    border-color: rgba(96, 165, 250, 0.38);
    background: rgba(15, 23, 42, 0.92);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
}

#school .school-admin-item:hover {
    border-color: #334155;
    background: rgba(15, 23, 42, 0.88);
}

#school .school-admin-item.archived {
    background: rgba(10, 15, 28, 0.72);
    border-color: rgba(71, 85, 105, 0.72);
}

#school .school-admin-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#school .school-admin-item-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#school .school-admin-item-title h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-admin-item-title p,
#school .school-admin-item-meta span {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#school .school-admin-item-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

#school .school-admin-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#school .school-admin-status-pill.status-offen,
#school .school-admin-status-pill.status-eingereicht {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#school .school-admin-status-pill.status-inbearbeitung,
#school .school-admin-status-pill.status-in-pruefung {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#school .school-admin-status-pill.status-nachbesserung {
    color: #ffedd5;
    border-color: rgba(251, 146, 60, 0.3);
    background: rgba(154, 52, 18, 0.26);
}

#school .school-admin-status-pill.status-bestanden {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
}

#school .school-admin-status-pill.status-nichtbestanden,
#school .school-admin-status-pill.status-nicht-bestanden {
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.24);
    background: rgba(127, 29, 29, 0.24);
}

#school .school-admin-status-pill.status-archiviert {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(51, 65, 85, 0.32);
}

#school .school-admin-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#school .school-admin-empty {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.42);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

#school .school-archive-list,
#school .school-log-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#school .school-archive-item,
#school .school-log-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(15, 23, 42, 0.72);
}

#school .school-archive-item-top,
#school .school-log-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#school .school-archive-item-title,
#school .school-log-item-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#school .school-archive-item-title h4,
#school .school-log-item-title h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-archive-item-title p,
#school .school-log-item-title p,
#school .school-log-item-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-archive-item-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
}

#school .school-archive-item-meta div,
#school .school-log-item-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#school .school-archive-item-meta strong,
#school .school-log-item-meta strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

#school .school-archive-item-meta span,
#school .school-log-item-meta span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#school .school-archive-item-result {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(2, 6, 23, 0.36);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.7;
}

#school .school-log-item-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
}

#school .school-admin-status-pill.status-abgeschlossen {
    color: #dbeafe;
    border-color: rgba(59, 130, 246, 0.24);
    background: rgba(30, 64, 175, 0.24);
}

@media (max-width: 900px) {
    #school .school-archive-item-meta,
    #school .school-log-item-meta {
        grid-template-columns: 1fr;
    }
}

#school .school-request-card {
    margin-top: 18px;
}

#school #schoolArchiveSection {
    margin-top: 22px;
}

#school .school-admin-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#school .school-admin-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#school .school-admin-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

#leadership {
    display: none;
}

#leadership.active {
    display: block;
}

#leadership .leadership-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#leadership .leadership-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#leadership .leadership-header-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#leadership .leadership-header h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    color: #f8fafc;
}

#leadership .leadership-header p {
    margin: 0;
    max-width: 520px;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#leadership .leadership-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

#leadership .leadership-tab-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.88);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

#leadership .leadership-tab-btn:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: #334155;
    color: #f8fafc;
    transform: translateY(-1px);
}

#leadership .leadership-tab-btn.active {
    background: rgba(30, 64, 175, 0.26);
    border-color: rgba(96, 165, 250, 0.36);
    color: #dbeafe;
}

#leadership .leadership-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#leadership .leadership-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#leadership .leadership-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#leadership .leadership-dashboard-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

#leadership .leadership-dashboard-card-wide {
    grid-column: 1 / -1;
}

#leadership .leadership-dashboard-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#leadership .leadership-dashboard-card-header h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: #f8fafc;
}

#leadership .leadership-dashboard-card-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-dashboard-card-value {
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: -0.03em;
}

#leadership .leadership-dashboard-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#leadership .leadership-dashboard-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.68);
}

#leadership .leadership-dashboard-item strong {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    color: #f8fafc;
}

#leadership .leadership-dashboard-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-dashboard-empty {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.42);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
}

#leadership .leadership-info-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

#leadership .leadership-info-display {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#leadership .leadership-info-entry {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#leadership .leadership-info-entry h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#leadership .leadership-info-entry p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#leadership .leadership-info-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#leadership .leadership-info-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#leadership .leadership-info-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#leadership .leadership-info-title,
#leadership .leadership-info-text {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#leadership .leadership-info-title:focus,
#leadership .leadership-info-text:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#leadership .leadership-info-text {
    min-height: 180px;
    resize: vertical;
}

#leadership .leadership-info-actions {
    display: flex;
    justify-content: flex-end;
}

#leadership .leadership-info-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-info-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-dismissals-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
}

#leadership .leadership-dismissals-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#leadership .leadership-dismissals-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#leadership .leadership-dismissals-field.full {
    grid-column: 1 / -1;
}

#leadership .leadership-dismissals-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#leadership .leadership-dismissals-field input,
#leadership .leadership-dismissals-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#leadership .leadership-dismissals-field input:focus,
#leadership .leadership-dismissals-field textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#leadership .leadership-dismissals-field textarea {
    min-height: 130px;
    resize: vertical;
}

#leadership .leadership-dismissals-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#leadership .leadership-dismissals-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-dismissals-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-dismissals-list {
    display: flex;
    flex-direction: column;
}

#leadership .leadership-dismissal-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#leadership .leadership-dismissal-entry + .leadership-dismissal-entry {
    margin-top: 12px;
}

#leadership .leadership-dismissal-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#leadership .leadership-dismissal-entry-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#leadership .leadership-dismissal-entry-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#leadership .leadership-dismissal-entry-title p,
#leadership .leadership-dismissal-entry-note {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-dismissal-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#leadership .leadership-dismissal-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#leadership .leadership-dismissal-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-dismissal-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .leadership-dismissals-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#personnel .leadership-dismissals-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#personnel .leadership-dismissals-field.full,
#personnel .leadership-dismissals-actions {
    grid-column: 1 / -1;
}

#personnel .leadership-dismissals-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#personnel .leadership-dismissals-field input,
#personnel .leadership-dismissals-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#personnel .leadership-dismissals-field textarea {
    min-height: 120px;
    resize: vertical;
}

#personnel .leadership-dismissals-actions,
#personnel .leadership-dismissal-entry-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#personnel .leadership-dismissals-list {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
}

#personnel .leadership-dismissal-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#personnel .leadership-dismissal-entry + .leadership-dismissal-entry {
    margin-top: 12px;
}

#personnel .leadership-dismissal-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#personnel .leadership-dismissal-entry-title h3,
#personnel .leadership-dismissal-entry-title p,
#personnel .leadership-dismissal-entry-note {
    margin: 0;
}

#personnel .leadership-dismissal-entry-title h3 {
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#personnel .leadership-dismissal-entry-title p,
#personnel .leadership-dismissal-entry-note {
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#personnel .leadership-dismissal-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .leadership-dismissals-save,
#personnel .leadership-dismissal-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#leadership .leadership-protocol-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
}

#leadership .leadership-protocol-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#leadership .leadership-protocol-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#leadership .leadership-protocol-field.full {
    grid-column: 1 / -1;
}

#leadership .leadership-protocol-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#leadership .leadership-protocol-field input,
#leadership .leadership-protocol-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#leadership .leadership-protocol-field input:focus,
#leadership .leadership-protocol-field textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#leadership .leadership-protocol-field textarea {
    min-height: 140px;
    resize: vertical;
}

#leadership .leadership-protocol-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#leadership .leadership-protocol-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-protocol-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-protocol-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#leadership .leadership-protocol-entry + .leadership-protocol-entry {
    margin-top: 12px;
}

#leadership .leadership-protocol-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#leadership .leadership-protocol-entry-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#leadership .leadership-protocol-entry-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#leadership .leadership-protocol-entry-title p,
#leadership .leadership-protocol-preview,
#leadership .leadership-protocol-detail p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-protocol-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#leadership .leadership-protocol-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#leadership .leadership-protocol-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-protocol-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-protocol-detail {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(30, 41, 59, 0.92);
}

#leadership .leadership-protocol-detail.open {
    display: flex;
}

#leadership .leadership-protocol-detail strong {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #e2e8f0;
}

#leadership .leadership-notes-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
}

#leadership .leadership-notes-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#leadership .leadership-notes-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#leadership .leadership-notes-field.full {
    grid-column: 1 / -1;
}

#leadership .leadership-notes-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#leadership .leadership-notes-field input,
#leadership .leadership-notes-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#leadership .leadership-notes-field input:focus,
#leadership .leadership-notes-field textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#leadership .leadership-notes-field textarea {
    min-height: 150px;
    resize: vertical;
}

#leadership .leadership-notes-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#leadership .leadership-notes-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-notes-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-note-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#leadership .leadership-note-entry + .leadership-note-entry {
    margin-top: 12px;
}

#leadership .leadership-note-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#leadership .leadership-note-entry-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#leadership .leadership-note-entry-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#leadership .leadership-note-entry-title p,
#leadership .leadership-note-preview,
#leadership .leadership-note-detail p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-note-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#leadership .leadership-note-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#leadership .leadership-note-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-note-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-note-detail {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(30, 41, 59, 0.92);
}

#leadership .leadership-note-detail.open {
    display: flex;
}

#leadership .leadership-note-detail strong {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #e2e8f0;
}

#leadership .leadership-settings-shell {
    display: block;
}

#leadership .leadership-settings-form {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
    column-gap: 20px;
    row-gap: 20px;
}

#leadership .leadership-settings-form > .leadership-panel-card {
    min-width: 0;
    height: auto;
}

#leadership .leadership-agent-manage-card {
    grid-column: auto;
}

#leadership .leadership-settings-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#leadership .leadership-settings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#leadership .leadership-settings-field.full {
    grid-column: 1 / -1;
}

#leadership .leadership-settings-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#leadership .leadership-settings-field input,
#leadership .leadership-settings-field textarea,
#leadership .leadership-settings-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#leadership .leadership-settings-field input:focus,
#leadership .leadership-settings-field textarea:focus,
#leadership .leadership-settings-field select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#leadership .leadership-settings-field textarea {
    min-height: 120px;
    resize: vertical;
}

#leadership .leadership-settings-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.68);
}

#leadership .leadership-settings-card strong {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    color: #f8fafc;
}

#leadership .leadership-settings-card span {
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-settings-link-card {
    justify-content: center;
}

#leadership .leadership-settings-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#leadership .leadership-settings-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-settings-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-agent-create-feedback {
    display: none;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.68);
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
    white-space: pre-line;
}

#leadership .leadership-agent-create-feedback.visible {
    display: block;
}

#leadership .leadership-agent-create-feedback.success {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
    color: #dcfce7;
}

#leadership .leadership-agent-manage-roles {
    position: relative;
    width: 100%;
}

#leadership .leadership-agent-manage-roles-toggle {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

#leadership .leadership-agent-manage-roles-toggle:hover,
#leadership .leadership-agent-manage-roles-toggle:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    outline: none;
}

#leadership .leadership-agent-manage-roles-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 340px;
    overflow: auto;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #1e293b;
    background: #020617;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
}

#leadership .leadership-agent-manage-roles-menu[hidden] {
    display: none;
}

#leadership .leadership-agent-manage-role-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.62);
}

#leadership .leadership-agent-manage-role-group:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

#leadership .leadership-agent-manage-role-title {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0;
}

#leadership .leadership-agent-manage-role-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

#leadership .leadership-agent-manage-role-option:hover {
    background: rgba(30, 41, 59, 0.72);
}

#leadership .leadership-agent-manage-role-option input {
    width: auto;
    min-width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 4px;
    margin: 0;
    accent-color: #60a5fa;
}

#leadership .leadership-agent-manage-head-roles {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.48);
}

#leadership .leadership-agent-manage-head-role-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    color: #dbeafe;
    font-size: 13px;
    line-height: 1.4;
}

#leadership .leadership-agent-manage-head-role-option input {
    width: auto;
    min-width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #60a5fa;
}

#leadership .leadership-archive-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#leadership .leadership-archive-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#leadership .leadership-archive-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#leadership .leadership-archive-card:hover {
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(15, 23, 42, 0.86);
    transform: translateY(-1px);
}

#leadership .leadership-archive-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#leadership .leadership-archive-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#leadership .leadership-archive-card-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#leadership .leadership-archive-card-title p,
#leadership .leadership-archive-card-body span {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-archive-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#leadership .leadership-archive-card-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#leadership .leadership-archive-card-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(30, 41, 59, 0.92);
}

#leadership .leadership-archive-card-body strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #e2e8f0;
}

#leadership .leadership-archive-document {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#leadership .leadership-archive-toolbar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#leadership .leadership-archive-toolbar button {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#leadership .leadership-archive-detail-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.42);
}

#leadership .leadership-archive-detail-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#leadership .leadership-archive-detail-heading span {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#leadership .leadership-archive-detail-heading h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#leadership .leadership-archive-detail-heading p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#leadership .leadership-archive-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
}

#leadership .leadership-archive-detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#leadership .leadership-archive-detail-meta-item strong {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
}

#leadership .leadership-archive-detail-meta-item span {
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

#leadership .leadership-archive-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(30, 41, 59, 0.92);
}

#leadership .leadership-archive-section h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #f8fafc;
}

#leadership .leadership-archive-display {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#leadership .leadership-archive-evidence-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#leadership .leadership-archive-evidence-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#leadership .leadership-archive-evidence-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#leadership .leadership-archive-evidence-card-header h4 {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: #f8fafc;
}

#leadership .leadership-archive-evidence-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#leadership .leadership-archive-evidence-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 700;
}

#leadership .leadership-archive-evidence-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#leadership .leadership-archive-evidence-preview img {
    display: block;
    max-width: 320px;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.48);
    background: #f8fafc;
}

#leadership .leadership-archive-evidence-document {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.56);
    background: rgba(2, 6, 23, 0.38);
}

#leadership .leadership-archive-evidence-document button {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#leadership .leadership-panel {
    display: none;
}

#leadership .leadership-panel.active {
    display: block;
}

#leadership .leadership-panel-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

#leadership .leadership-panel-card h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: #f8fafc;
}

#leadership .leadership-panel-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

@media (max-width: 900px) {
    #leadership .leadership-dashboard-grid {
        grid-template-columns: 1fr;
    }

    #leadership .leadership-dashboard-card-wide {
        grid-column: auto;
    }

    #leadership .leadership-info-shell {
        grid-template-columns: 1fr;
    }

    #leadership .leadership-dismissals-shell,
    #leadership .leadership-dismissals-fields,
    #leadership .leadership-protocol-shell,
    #leadership .leadership-protocol-fields,
    #leadership .leadership-notes-shell,
    #leadership .leadership-notes-fields,
    #leadership .leadership-settings-shell,
    #leadership .leadership-settings-form,
    #leadership .leadership-settings-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    #leadership .leadership-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #leadership .leadership-tabs {
        justify-content: flex-start;
    }
}

#school .school-admin-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#school .school-admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

#school .school-admin-detail-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#school .school-admin-detail-field.full {
    grid-column: 1 / -1;
}

#school .school-admin-detail-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#school .school-admin-detail-value {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
}

#school .school-admin-detail textarea,
#school .school-admin-detail select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#school .school-admin-detail textarea:focus,
#school .school-admin-detail select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#school .school-admin-detail textarea {
    min-height: 120px;
    resize: vertical;
}

#me {
    display: none;
}

#me.active {
    display: block;
}

#me .my-data-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#me .my-data-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 22px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#me .my-data-header h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    color: #f8fafc;
}

#me .my-data-header p {
    margin: 0;
    max-width: 560px;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#me .my-data-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#me .my-data-tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(30, 41, 59, 0.88);
    background: rgba(15, 23, 42, 0.74);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#me .my-data-tab-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(71, 85, 105, 0.92);
    background: rgba(15, 23, 42, 0.9);
    color: #f8fafc;
}

#me .my-data-tab-btn.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.22);
    color: #eff6ff;
    box-shadow: 0 10px 20px rgba(30, 64, 175, 0.12);
}

#me .my-data-tab-btn.has-badge {
    padding-right: 18px;
}

#me .my-data-tab-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.28);
    color: #fee2e2;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
}

#me .my-data-tab-badge.visible {
    display: inline-flex;
}

#me .my-data-panels {
    display: flex;
    flex-direction: column;
}

#me .my-data-panel {
    display: none;
}

#me .my-data-panel.active {
    display: block;
}

#me .my-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#me .my-data-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#me .my-data-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#me .my-data-card-title h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: #f8fafc;
}

#me .my-data-card-title p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#me .my-data-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#me .my-data-empty {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    background: rgba(2, 6, 23, 0.44);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
}

#me .my-data-profile-list,
#me .my-data-training-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#me .my-data-profile-row,
#me .my-data-training-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid rgba(30, 41, 59, 0.82);
}

#me .my-data-profile-row:first-child,
#me .my-data-training-row:first-child {
    border-top: none;
    padding-top: 0;
}

#me .my-data-profile-label,
#me .my-data-training-label {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    color: #cbd5e1;
}

#me .my-data-profile-value,
#me .my-data-training-value {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
}

#me .my-data-training-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#me .my-data-training-meta {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#me .my-data-training-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0 4px;
}

#me .my-data-training-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.84);
    border: 1px solid rgba(51, 65, 85, 0.5);
}

#me .my-data-training-progress-track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

#me .my-data-training-promotion-hint,
.school-training-promotion-hint {
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.32);
    background: rgba(22, 101, 52, 0.18);
    color: #bbf7d0;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

#me .my-data-profile-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#me .my-data-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.78);
}

#me .my-data-profile-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#me .my-data-profile-name {
    margin: 0;
    font-size: 28px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#me .my-data-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#me .my-data-profile-rank-badge,
#me .my-data-profile-unit-badge,
#me .my-data-profile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.58);
    background: rgba(15, 23, 42, 0.82);
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
}

#me .my-data-profile-unit-badge {
    border-color: rgba(26, 188, 156, 0.28);
    background: rgba(15, 118, 110, 0.16);
    color: #ccfbf1;
}

#me .my-data-duty-status {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(51, 65, 85, 0.78);
}

#me .my-data-duty-status-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

#me .my-data-duty-status-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#me .my-data-duty-status-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#me .my-data-duty-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

#me .my-data-duty-status-badge.status-im-dienst {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(20, 83, 45, 0.24);
}

#me .my-data-duty-status-badge.status-bueroarbeit {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#me .my-data-duty-status-badge.status-ausser-dienst {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#me .my-data-duty-status-controls {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

#me .my-data-duty-status-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
    flex: 1 1 220px;
}

#me .my-data-duty-status-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#me .my-data-duty-status-field select {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.86);
    background: rgba(15, 23, 42, 0.82);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.4;
}

#me .my-data-duty-status-save {
    min-height: 42px;
    padding: 10px 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(180deg, #1d4ed8, #1e3a8a);
    color: #eff6ff;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(30, 64, 175, 0.18);
}

#me .my-data-duty-status-save:hover {
    filter: brightness(1.05);
}

#me .my-data-duty-status-note {
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#me .my-data-training-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(51, 65, 85, 0.78);
}

#me .my-data-training-summary strong {
    font-size: 13px;
    line-height: 1.5;
    color: #f8fafc;
}

#me .my-data-training-status {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#me .my-data-training-status-overview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.78);
}

#me .my-data-training-status-overview p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#me .my-data-training-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.2);
    color: #dbeafe;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
}

#me .my-data-training-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#me .my-data-training-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.52), rgba(2, 6, 23, 0.44));
}

#me .my-data-training-section-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#me .my-data-training-empty {
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#me .my-data-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#me .my-data-status-pill.status-bestanden {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
}

#me .my-data-status-pill.status-offen,
#me .my-data-status-pill.status-keine-daten,
#me .my-data-status-pill.status-nicht-begonnen {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#me .my-data-status-pill.status-in-bearbeitung {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#me .my-data-status-pill.status-nicht-bestanden {
    color: #ffedd5;
    border-color: rgba(251, 146, 60, 0.3);
    background: rgba(154, 52, 18, 0.26);
}

#me .my-data-time-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#me .my-data-time-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid rgba(30, 41, 59, 0.82);
}

#me .my-data-time-row:first-child {
    border-top: none;
    padding-top: 0;
}

#me .my-data-time-label {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    color: #cbd5e1;
}

#me .my-data-time-value {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
}

#me .my-data-service-time {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#me .my-data-service-time-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#me .my-data-service-time-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 136px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(2, 6, 23, 0.66));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#me .my-data-service-time-label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#me .my-data-service-time-value {
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#me .my-data-service-time-hint {
    margin-top: auto;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#me .my-data-notes-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#me .my-data-notes-textarea {
    width: 100%;
    min-height: 190px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    background: rgba(2, 6, 23, 0.52);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.7;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
}

#me .my-data-notes-textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#me .my-data-notes-actions {
    display: flex;
    justify-content: flex-end;
}

#me .my-data-notes-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#me .my-data-notes-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#me .my-data-notes-save:focus-visible {
    outline: none;
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

#me .my-data-tasks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#me .my-data-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#me .my-data-task-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.62));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#me .my-data-task-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#me .my-data-task-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    color: #f8fafc;
}

#me .my-data-task-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#me .my-data-task-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
}

#me .my-data-task-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#me .my-data-task-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#me .my-data-task-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#me .my-data-priority-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
}

#me .my-data-priority-pill.priority-niedrig {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
    color: #e2e8f0;
}

#me .my-data-priority-pill.priority-normal {
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.22);
    color: #dbeafe;
}

#me .my-data-priority-pill.priority-hoch {
    border-color: rgba(245, 158, 11, 0.26);
    background: rgba(120, 53, 15, 0.24);
    color: #fde68a;
}

#me .my-data-priority-pill.priority-kritisch {
    border-color: rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.26);
    color: #fecaca;
}

@media (max-width: 900px) {
    #me .my-data-task-meta {
        grid-template-columns: 1fr;
    }
}

#me .my-data-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid rgba(30, 41, 59, 0.82);
}

#me .my-data-row:first-child {
    border-top: none;
    padding-top: 0;
}

#me .my-data-row strong {
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
}

#me .my-data-row span {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
}

#me .my-data-note-placeholder {
    min-height: 160px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    background: rgba(2, 6, 23, 0.46);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 900px) {
    #units .internal-guides-shell {
        grid-template-columns: 1fr;
    }

    #units .internal-guides-viewer {
        min-height: 520px;
    }

    #units .internal-info-dashboard {
        grid-template-columns: 1fr;
    }

    #personnel .personnel-file-document-images {
        grid-template-columns: 1fr;
    }

    #units .units-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #units .units-header-main {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    #units .units-tabs {
        justify-content: flex-start;
    }

    #units .units-internal-tabs {
        width: 100%;
    }

    #me .my-data-grid {
        grid-template-columns: 1fr;
    }
}

#school .school-admin-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#school .school-admin-note {
    display: none;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(30, 41, 59, 0.52);
    color: #dbeafe;
    font-size: 14px;
    line-height: 1.6;
}

#school .school-admin-note.visible {
    display: block;
}

#school .school-admin-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#school .school-admin-answer-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #1e293b;
    background: rgba(15, 23, 42, 0.72);
}

#school .school-admin-answer-item h4 {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-admin-answer-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #dbeafe;
    white-space: pre-wrap;
    word-break: break-word;
}

#school .school-schedule-card {
    margin-top: 18px;
}

#school .school-schedule-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#school .school-schedule-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#school .school-schedule-field.full {
    grid-column: 1 / -1;
}

#school .school-schedule-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#school .school-schedule-field input,
#school .school-schedule-field textarea,
#school .school-schedule-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#school .school-schedule-field input:focus,
#school .school-schedule-field textarea:focus,
#school .school-schedule-field select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#school .school-schedule-field textarea {
    min-height: 100px;
    resize: vertical;
}

#school .school-schedule-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

#school .school-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

#school .school-schedule-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    border-left: 4px solid rgba(148, 163, 184, 0.58);
    background: rgba(15, 23, 42, 0.72);
}

#school .school-schedule-item.category-pflichtausbildung {
    border-left-color: rgba(96, 165, 250, 0.82);
}
#school .school-schedule-item.category-wahlmodul {
    border-left-color: rgba(168, 85, 247, 0.82);
}
#school .school-schedule-item.category-pruefung {
    border-left-color: rgba(249, 115, 22, 0.86);
}
#school .school-schedule-item.category-einsatztraining {
    border-left-color: rgba(34, 197, 94, 0.78);
}
#school .school-schedule-item.category-theorie {
    border-left-color: rgba(34, 211, 238, 0.78);
}
#school .school-schedule-item.category-praxis {
    border-left-color: rgba(234, 179, 8, 0.86);
}
#school .school-schedule-item.category-besprechung {
    border-left-color: rgba(148, 163, 184, 0.72);
}
#school .school-schedule-item.category-sonstiges {
    border-left-color: rgba(100, 116, 139, 0.72);
}

#school .school-schedule-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#school .school-schedule-item-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#school .school-schedule-item-title h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-schedule-item-title p,
#school .school-schedule-item-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-schedule-item-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#school .school-schedule-item-badge.category-pflichtausbildung {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.28);
    color: #dbeafe;
}
#school .school-schedule-item-badge.category-wahlmodul {
    border-color: rgba(168, 85, 247, 0.34);
    background: rgba(88, 28, 135, 0.24);
    color: #e9d5ff;
}
#school .school-schedule-item-badge.category-pruefung {
    border-color: rgba(249, 115, 22, 0.36);
    background: rgba(124, 45, 18, 0.24);
    color: #fed7aa;
}
#school .school-schedule-item-badge.category-einsatztraining {
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(20, 83, 45, 0.24);
    color: #dcfce7;
}
#school .school-schedule-item-badge.category-theorie {
    border-color: rgba(34, 211, 238, 0.32);
    background: rgba(8, 47, 73, 0.28);
    color: #cffafe;
}
#school .school-schedule-item-badge.category-praxis {
    border-color: rgba(234, 179, 8, 0.34);
    background: rgba(113, 63, 18, 0.24);
    color: #fef3c7;
}
#school .school-schedule-item-badge.category-besprechung {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(51, 65, 85, 0.42);
    color: #e2e8f0;
}
#school .school-schedule-item-badge.category-sonstiges {
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(30, 41, 59, 0.72);
    color: #cbd5e1;
}

#school .school-schedule-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#school .school-schedule-empty {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.42);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

#school .school-training-card {
    margin-top: 18px;
}

#school .school-training-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#school .school-training-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#school .school-training-field.full {
    grid-column: 1 / -1;
}

#school .school-training-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#school .school-training-field input,
#school .school-training-field textarea,
#school .school-training-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#school .school-training-field input:focus,
#school .school-training-field textarea:focus,
#school .school-training-field select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#school .school-training-field textarea {
    min-height: 100px;
    resize: vertical;
}

#school .school-training-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

#school .school-training-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

#school .school-training-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(15, 23, 42, 0.72);
}

#school .school-training-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#school .school-training-item-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#school .school-training-item-title h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-training-item-title p,
#school .school-training-item-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-training-item-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#school .school-training-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#school .school-training-profile {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#school .school-training-profile-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.72);
}

#school .school-training-profile-head h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#school .school-training-profile-head p {
    margin: 4px 0 0;
    color: #94a3b8;
}

#school .school-training-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#school .school-training-profile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.38);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
}

#school .school-training-profile-toggle input {
    width: 16px;
    height: 16px;
    accent-color: #22c55e;
}

#school .school-training-profile-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(30, 41, 59, 0.72);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
}

#school .school-training-profile-status.done {
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(20, 83, 45, 0.24);
    color: #dcfce7;
}

#school .school-training-empty {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.42);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    #school .school-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #school .school-tabs {
        justify-content: flex-start;
    }

    #school .school-file-grid,
    #school .school-file-grid.compact,
    #school .school-file-choice,
    #school .school-test-head-grid,
    #school .school-schedule-form,
    #school .school-training-form {
        grid-template-columns: 1fr;
    }

    #school .school-admin-module,
    #school .school-admin-detail-grid,
    #school .school-admin-item-meta {
        grid-template-columns: 1fr;
    }
}
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #020617;
    background-image:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 30%),
        linear-gradient(180deg, #020617 0%, #07101f 100%), url('fib.png');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:
        top right,
        center,
        center;
    background-size: auto, auto, 600px;
    background-attachment: scroll, scroll, fixed;
    color: white;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.92);
    z-index: -1;
}

/* =========================
   LOGIN SCREEN
========================= */

.login-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(2, 6, 23, 0.98)),
        url('/fib.png') center center / 480px no-repeat;
}

.login-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.45);
    pointer-events: none;
}

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.96));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.login-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: #0f172a;
    border: 1px solid #1e293b;
    color: #93c5fd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
}

.login-top h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.1;
}

.login-subtitle {
    margin-top: 12px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

.login-form {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-form label {
    font-size: 13px;
    color: #cbd5e1;
    font-weight: 600;
}

.login-form input {
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: #0b1220;
    color: white;
    font-size: 14px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.login-form input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.login-form button {
    margin-top: 8px;
    padding: 13px 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.25);
}

.login-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.35);
}

.login-info {
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}

.login-status-message {
    display: none;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.5;
}

.login-status-message.visible {
    display: block;
}

.login-status-message.error {
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(69, 10, 10, 0.42);
    color: #fee2e2;
}

.login-status-message.info {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(15, 23, 42, 0.88);
    color: #dbeafe;
}

.password-change-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(2, 6, 23, 0.98));
}

.password-change-screen.visible {
    display: flex;
}

.password-change-card {
    width: 100%;
    max-width: 460px;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.96));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.password-change-card h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
}

.password-change-subtitle {
    margin-top: 12px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

.password-change-form {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.password-change-form label {
    font-size: 13px;
    color: #cbd5e1;
    font-weight: 600;
}

.password-change-form input {
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: #0b1220;
    color: white;
    font-size: 14px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.password-change-form input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.password-change-form button {
    margin-top: 8px;
    padding: 13px 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.25);
}

.password-change-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.35);
}

.password-change-status-message {
    display: none;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.5;
}

.password-change-status-message.visible {
    display: block;
}

.password-change-status-message.error {
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(69, 10, 10, 0.42);
    color: #fee2e2;
}

.password-change-status-message.info {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(15, 23, 42, 0.88);
    color: #dbeafe;
}

/* =========================
   FIB TOP BAR / NAV
========================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    background: rgba(2, 6, 23, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(51, 65, 85, 0.78);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.4px;
    color: #f8fafc;
    margin-right: 30px;
    white-space: nowrap;
}

.logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(1.2) contrast(1.1);
    opacity: 0.9;
}

.nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.nav button {
    background: transparent;
    border: 1px solid rgba(30, 41, 59, 0);
    color: #cbd5f5;
    padding: 9px 13px;
    cursor: pointer;
    border-radius: 10px;
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
    font-size: 13px;
    font-weight: 600;
}

.nav button:hover {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(51, 65, 85, 0.88);
    color: white;
    box-shadow:
        inset 0 1px 0 rgba(148, 163, 184, 0.05),
        0 8px 18px rgba(2, 6, 23, 0.22);
    transform: translateY(-1px);
}

.nav button.active {
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    border-color: rgba(96, 165, 250, 0.85);
    color: white;
    box-shadow:
        0 10px 22px rgba(37, 99, 235, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-notification-badge {
    display: none;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.95);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    box-shadow:
        0 0 0 1px rgba(254, 202, 202, 0.24),
        0 8px 18px rgba(127, 29, 29, 0.28);
}

.nav-notification-badge.visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.right {
    margin-left: auto;
    text-align: right;
    font-size: 12px;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 180px;
}

#time {
    color: #93c5fd;
    font-weight: 600;
}

.right div:last-child {
    color: #f8fafc;
    font-weight: 600;
}

/* =========================
   FIB DASHBOARD DESIGN
========================= */

.dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    padding: 20px;
    align-items: stretch;
    border: 1px solid rgba(51, 65, 85, 0.78);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96)),
        url('/fib.png') center center / 420px no-repeat;
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

.dashboard-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%);
    pointer-events: none;
}

.dashboard-hero-left,
.dashboard-hero-right {
    position: relative;
    z-index: 1;
}

.dashboard-hero-left {
    padding-right: 12px;
}

.dashboard-hero-right {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.hero-panel-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.hero-logo-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    opacity: 0.18;
    filter: brightness(1.15) contrast(1.05);
}

.hero-user {
    margin-left: auto;
    max-width: 320px;
    width: 100%;
}

.dashboard-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(59, 130, 246, 0.18);
    color: #93c5fd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dashboard-hero h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
}

.dashboard-subtitle {
    margin-top: 12px;
    max-width: 560px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

.dashboard-status-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.status-pill {
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(51, 65, 85, 0.75);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.status-pill.online {
    color: #86efac;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 0 0 1px rgba(34, 197, 94, 0.08);
}

.status-pill.secure {
    color: #93c5fd;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 0 0 1px rgba(59, 130, 246, 0.08);
}

.status-pill.internal {
    color: #fcd34d;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 0 0 1px rgba(245, 158, 11, 0.08);
}

#logs .logs-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#logs .logs-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(51, 65, 85, 0.78);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.97));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

#logs .logs-header h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#logs .logs-header p {
    margin: 8px 0 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#logs .logs-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#logs .logs-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.82);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
    color: #f8fafc;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#logs .logs-actions button:hover {
    border-color: rgba(100, 116, 139, 0.92);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.96));
    transform: translateY(-1px);
}

#logs .logs-panel {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.97));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

#logs .logs-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

#logs .logs-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#logs .logs-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

#logs .logs-field input,
#logs .logs-field select {
    width: 100%;
    padding: 12px 13px;
    border-radius: 13px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.62);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#logs .logs-field input::placeholder {
    color: #94a3b8;
}

#logs .logs-field input:focus,
#logs .logs-field select:focus {
    border-color: rgba(96, 165, 250, 0.44);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

#logs .logs-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.48);
}

#logs .logs-head,
#logs .logs-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.85fr) minmax(130px, 0.75fr) minmax(140px, 0.8fr) minmax(
            150px,
            0.85fr
        ) minmax(160px, 0.9fr) minmax(240px, 1.6fr);
}

#logs .logs-head {
    background: rgba(15, 23, 42, 0.96);
    border-bottom: 1px solid rgba(51, 65, 85, 0.68);
}

#logs .logs-row + .logs-row {
    border-top: 1px solid rgba(51, 65, 85, 0.42);
}

#logs .logs-cell {
    padding: 13px 14px;
    min-width: 0;
    border-right: 1px solid rgba(51, 65, 85, 0.38);
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#logs .logs-cell:last-child {
    border-right: none;
}

#logs .logs-head .logs-cell {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
}

#logs .logs-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.54);
    background: rgba(30, 41, 59, 0.7);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#logs .logs-type.type-created {
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.34);
}

#logs .logs-type.type-edited {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.22);
}

#logs .logs-type.type-deleted {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.24);
    background: rgba(127, 29, 29, 0.3);
}

#logs .logs-type.type-archived {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(120, 53, 15, 0.3);
}

#logs .logs-type.type-system,
#logs .logs-type.type-bot {
    color: #cbd5e1;
}

#logs .logs-empty {
    padding: 30px 20px;
    border-radius: 18px;
    border: 1px dashed rgba(71, 85, 105, 0.58);
    background: rgba(15, 23, 42, 0.56);
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: #8da1b7;
}

@media (max-width: 980px) {
    #logs .logs-header {
        flex-direction: column;
    }

    #logs .logs-toolbar {
        grid-template-columns: 1fr;
    }

    #logs .logs-list {
        overflow-x: auto;
    }

    #logs .logs-head,
    #logs .logs-row {
        min-width: 960px;
    }
}

.hero-panel {
    height: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.95));
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.28);
}

.hero-radio-panel {
    width: 100%;
    justify-content: flex-start;
}

.hero-panel-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin-bottom: 10px;
}

.hero-panel-main {
    font-size: 24px;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.2;
}

.hero-panel-sub {
    margin-top: 8px;
    color: #93c5fd;
    font-size: 13px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

.overview-layout {
    display: grid;
    grid-template-columns: 260px 320px 1fr;
    gap: 16px;
    align-items: start;
}

.overview-agents {
    grid-column: 1;
    grid-row: 1 / 3;
}

.overview-info-box {
    grid-column: 2;
    grid-row: 1;
}

.overview-control {
    grid-column: 3;
    grid-row: 1;
}

.overview-hints {
    grid-column: 3;
    grid-row: 2;
    margin-left: 0;
}

.dashboard-card {
    position: relative;
    background: linear-gradient(180deg, #0f172a, #020617);
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 18px;
    padding: 20px;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(148, 163, 184, 0.03);
    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease,
        background 0.24s ease;
    overflow: hidden;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.1), rgba(255, 255, 255, 0.04), rgba(148, 163, 184, 0.08));
    pointer-events: none;
}

.dashboard-card:hover {
    transform: translateY(-1px);
    border-color: rgba(71, 85, 105, 0.92);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(59, 130, 246, 0.04);
}

.dashboard-card-large {
    grid-column: auto;
}

.dashboard-card-wide {
    grid-column: 1 / -1;
}

.dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-card-header h3 {
    margin: 0;
    font-size: 16px;
    opacity: 1;
}

.dashboard-card-tag {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(59, 130, 246, 0.14);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dashboard-card-tag.warn {
    background: rgba(245, 158, 11, 0.14);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 10px rgba(245, 158, 11, 0.08);
}

.dashboard-card-tag.neutral {
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dashboard-card-tag.live {
    background: rgba(239, 68, 68, 0.14);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 12px rgba(239, 68, 68, 0.12);
    animation: livePulse 3.8s ease-in-out infinite;
}

@keyframes livePulse {
    0%,
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 10px rgba(239, 68, 68, 0.1);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 14px rgba(239, 68, 68, 0.18);
    }
}

@media (max-width: 1200px) {
    .overview-layout {
        grid-template-columns: 1fr;
    }

    .overview-agents,
    .overview-info-box,
    .overview-control,
    .overview-hints {
        grid-column: auto;
        grid-row: auto;
    }

    .dashboard-hero {
        grid-template-columns: 1fr;
    }

    .dashboard-card,
    .dashboard-card-large,
    .dashboard-card-wide {
        grid-column: auto;
    }
}

@media (max-width: 700px) {
    .dashboard-hero {
        padding: 20px;
    }

    .dashboard-hero h1 {
        font-size: 26px;
    }

    .dashboard-subtitle {
        font-size: 13px;
    }
}
#overview {
    padding-top: 4px;
}

.overview-system-banner {
    position: relative;
    display: none;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(185, 28, 28, 0.42);
    background:
        linear-gradient(180deg, rgba(127, 29, 29, 0.92), rgba(69, 10, 10, 0.9)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
    box-shadow:
        0 14px 26px rgba(69, 10, 10, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.overview-system-banner.is-active {
    display: flex;
}

.overview-system-banner::before,
.overview-system-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.overview-system-banner::before {
    background: linear-gradient(
        90deg,
        rgba(2, 6, 23, 0.94) 0%,
        rgba(2, 6, 23, 0) 10%,
        rgba(2, 6, 23, 0) 90%,
        rgba(2, 6, 23, 0.94) 100%
    );
    z-index: 1;
}

.overview-system-banner::after {
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(248, 113, 113, 0), rgba(248, 113, 113, 0.5), rgba(248, 113, 113, 0));
}

.overview-system-banner-label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.32);
    background: rgba(2, 6, 23, 0.28);
    color: #fecaca;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.overview-system-banner-track {
    position: relative;
    z-index: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.overview-system-banner-text {
    display: inline-block;
    min-width: max-content;
    padding-left: 100%;
    color: #fee2e2;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    animation: overviewBannerTicker 20s linear infinite;
    will-change: transform;
}

@keyframes overviewBannerTicker {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* CONTENT */

.main-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px 10px 18px 10px;
    box-sizing: border-box;
}

.overview-agents-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.overview-agents-card .agent-list {
    flex: 1;
    min-height: 420px;
}

.overview-active-agents-count {
    margin: -4px 0 14px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    color: #cbd5e1;
}

.overview-agents-card .agent-list {
    gap: 12px;
}

.overview-active-agent-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 15px;
    border-radius: 16px;
}

.overview-active-agent-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.overview-active-agent-id {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #93c5fd;
}

.overview-active-agent-name {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    color: #f8fafc;
}

.overview-active-agent-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    line-height: 1.4;
    color: #bbf7d0;
}

.overview-active-agent-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.12),
        0 0 10px rgba(34, 197, 94, 0.18);
}

.overview-active-agent-live.status-bueroarbeit {
    color: #bfdbfe;
}

.overview-active-agent-live.status-bueroarbeit .overview-active-agent-live-dot {
    background: #3b82f6;
    box-shadow:
        0 0 0 4px rgba(59, 130, 246, 0.12),
        0 0 10px rgba(59, 130, 246, 0.18);
}

.overview-active-agent-live.status-im-dienst {
    color: #bbf7d0;
}

.overview-active-agent-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.overview-active-agents-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.62);
    background: rgba(15, 23, 42, 0.42);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.overview-info-box,
.overview-control,
.overview-hints,
.overview-info-card {
    min-width: 0;
}

.overview-notes-card {
    min-width: 0;
}

.overview-notes-card .rights-box {
    min-height: 100%;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.page {
    display: none;
    animation: fadePage 0.18s ease;
}

.page.active {
    display: block;
}

@keyframes fadePage {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.overview-info {
    margin-top: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    opacity: 0.72;
    color: #94a3b8;
}

.agent-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-entry {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.agent-entry:hover {
    background: linear-gradient(180deg, rgba(16, 24, 39, 0.98), rgba(3, 7, 18, 0.98));
    border-color: rgba(71, 85, 105, 0.88);
    box-shadow:
        0 14px 24px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(59, 130, 246, 0.05);
    transform: translateY(-1px);
}

.agent-entry span {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    color: #94a3b8;
}

#agents .agent-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

#agents .agent-entry {
    min-height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 15px;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.95));
}

#agents .agent-entry-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

#agents .agent-entry b {
    color: #93c5fd;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: 0.06em;
}

#agents .agent-entry span {
    margin-top: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
}

#agents .agent-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

#agents .agent-card-name {
    color: #f8fafc;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 900;
}

#agents .agent-card-status-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: 999px;
    background: #64748b;
    box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.14);
}

#agents .agent-card-status-dot.is-active {
    background: #22c55e;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.14),
        0 0 16px rgba(34, 197, 94, 0.2);
}

#agents .agent-card-unit {
    overflow: hidden;
    margin-top: -2px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#agents .agent-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: 24px;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (max-width: 640px) {
    #agents .agent-list {
        grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    }
}

#personnel {
    display: none;
}

#personnel.active {
    display: block;
}

#lawbook {
    min-height: calc(100vh - 120px);
    padding: 0;
    margin-top: -10px;
}

#lawbook.active {
    display: block;
}

.lawbook-app {
    width: 100%;
    min-height: auto;
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    border-radius: 28px;
    overflow: visible;
    position: relative;
    top: auto;
    transform: none;
    border: 1px solid rgba(71, 85, 105, 0.52);
    background:
        radial-gradient(circle at 80% 8%, rgba(37, 99, 235, 0.14), transparent 30%),
        linear-gradient(135deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.94));
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.32);
}

.lawbook-sidebar {
    position: sticky;
    top: 0;
    min-height: auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 22px 18px;
    box-sizing: border-box;
    overflow: hidden;
    border-right: 1px solid rgba(71, 85, 105, 0.48);
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.94), rgba(15, 23, 42, 0.86));
}

.lawbook-sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.lawbook-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lawbook-brand-logo {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(96, 165, 250, 0.28);
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.22);
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.18));
    flex: 0 0 auto;
}

.lawbook-brand-title {
    margin: 0;
    color: #f8fafc;
    font-size: 19px;
    line-height: 1.18;
    letter-spacing: 0.08em;
    font-weight: 900;
}

.lawbook-brand-subtitle {
    color: #93c5fd;
    font-size: 11px;
    letter-spacing: 0.16em;
    font-weight: 800;
}

.lawbook-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.lawbook-nav-item {
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #cbd5e1;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lawbook-nav-item.active {
    color: #f8fafc;
    border-color: rgba(96, 165, 250, 0.42);
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.32), rgba(15, 23, 42, 0.2));
    box-shadow: 0 0 18px rgba(37, 99, 235, 0.14);
}

.lawbook-version {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(71, 85, 105, 0.24);
    color: #64748b;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.12em;
    font-weight: 800;
}

.lawbook-main {
    min-width: 0;
    padding: 34px 30px 36px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.lawbook-topbar {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 2px;
}

.lawbook-search {
    width: min(58%, 640px);
    min-height: 52px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.78);
    color: #e2e8f0;
    font-size: 15px;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 14px 28px rgba(2, 6, 23, 0.18);
}

.lawbook-search::placeholder {
    color: #64748b;
}

.lawbook-search:focus {
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 3px rgba(59, 130, 246, 0.12),
        0 14px 28px rgba(2, 6, 23, 0.18);
}

.lawbook-overview-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lawbook-overview-view.is-hidden,
.lawbook-detail-view.is-hidden,
.lawbook-placeholder-view.is-hidden {
    display: none;
}

.lawbook-placeholder-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lawbook-placeholder-header {
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.68));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.lawbook-placeholder-header h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 900;
}

.lawbook-placeholder-header p {
    margin: 8px 0 0;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
}

.lawbook-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.lawbook-placeholder-card {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.56));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.lawbook-placeholder-card h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 900;
}

.lawbook-placeholder-card p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

.lawbook-placeholder-search {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.78);
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
}

.lawbook-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lawbook-timeline::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.42), rgba(71, 85, 105, 0.16));
}

.lawbook-update-card {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    min-height: 124px;
    padding: 16px 16px 16px 44px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.48);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.11), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.64));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.lawbook-update-card:hover {
    border-color: rgba(96, 165, 250, 0.48);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(96, 165, 250, 0.12);
    transform: translateY(-1px);
}

.lawbook-update-card::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 22px;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    border: 2px solid rgba(96, 165, 250, 0.7);
    background: #0f172a;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.28);
    z-index: 1;
}

.lawbook-update-date {
    color: #bfdbfe;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 900;
}

.lawbook-update-category {
    margin-top: 7px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lawbook-update-title {
    margin: 0;
    color: #f8fafc;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 900;
}

.lawbook-update-description {
    margin: 8px 0 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
}

.lawbook-update-status {
    align-self: start;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.26);
    background: rgba(37, 99, 235, 0.16);
    color: #bfdbfe;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.lawbook-update-status.is-new {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(22, 163, 74, 0.16);
    color: #bbf7d0;
}

.lawbook-update-status.is-important {
    border-color: rgba(245, 158, 11, 0.32);
    background: rgba(180, 83, 9, 0.16);
    color: #fde68a;
}

.lawbook-update-status.is-critical {
    border-color: rgba(248, 113, 113, 0.32);
    background: rgba(185, 28, 28, 0.16);
    color: #fecaca;
}

.lawbook-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.lawbook-contact-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.48);
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.64));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.lawbook-contact-card:hover {
    border-color: rgba(96, 165, 250, 0.46);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(96, 165, 250, 0.12);
    transform: translateY(-1px);
}

.lawbook-contact-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lawbook-contact-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(37, 99, 235, 0.14);
    color: #bfdbfe;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.14);
}

.lawbook-contact-status {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.26);
    background: rgba(22, 163, 74, 0.16);
    color: #bbf7d0;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.lawbook-contact-title {
    margin: 0;
    color: #f8fafc;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}

.lawbook-contact-description {
    margin: 8px 0 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
}

.lawbook-contact-footer {
    padding-top: 14px;
    border-top: 1px solid rgba(71, 85, 105, 0.34);
}

.lawbook-contact-label {
    color: #64748b;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lawbook-contact-value {
    margin-top: 5px;
    color: #bfdbfe;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
}

.lawbook-search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.lawbook-search-result-card {
    min-height: 158px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.48);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.66));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.lawbook-search-result-card:hover,
.lawbook-search-result-card:focus {
    border-color: rgba(96, 165, 250, 0.58);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(96, 165, 250, 0.16);
    transform: translateY(-2px);
    outline: none;
}

.lawbook-search-result-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lawbook-search-result-title {
    color: #f8fafc;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 900;
}

.lawbook-search-result-badge {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(37, 99, 235, 0.16);
    color: #bfdbfe;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
}

.lawbook-search-result-category {
    color: #60a5fa;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 900;
    text-transform: uppercase;
}

.lawbook-search-result-excerpt {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
}

.lawbook-empty-search {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid rgba(71, 85, 105, 0.48);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.62));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.lawbook-empty-search h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 900;
}

.lawbook-empty-search p {
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 700;
}

.lawbook-all-laws-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.lawbook-all-laws-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.lawbook-all-laws-search {
    flex: 0 1 360px;
    min-width: 0;
    max-width: 380px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 15px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.78);
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
}

.lawbook-all-laws-search::placeholder {
    color: #64748b;
}

.lawbook-all-laws-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    justify-content: space-between;
}

.lawbook-all-laws-button,
.lawbook-view-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.78);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 900;
    box-sizing: border-box;
}

.lawbook-all-laws-button {
    padding: 0 15px;
    margin-right: auto;
}

.lawbook-view-toggle {
    overflow: hidden;
}

.lawbook-view-toggle span {
    min-width: 46px;
    min-height: 42px;
    display: grid;
    place-items: center;
    color: #64748b;
    cursor: pointer;
    user-select: none;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.lawbook-view-toggle span.active {
    background: rgba(37, 99, 235, 0.28);
    color: #bfdbfe;
}

.lawbook-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lawbook-category-card {
    min-height: 128px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.58);
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.7));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.lawbook-category-card:hover {
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(96, 165, 250, 0.12);
    transform: translateY(-1px);
}

.lawbook-category-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(96, 165, 250, 0.3);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.28), rgba(15, 23, 42, 0.86));
    color: #bfdbfe;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 22px rgba(59, 130, 246, 0.18);
}

.lawbook-category-icon svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    stroke-width: 1.9;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lawbook-category-name {
    color: #f8fafc;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 900;
}

.lawbook-category-desc {
    margin-top: 7px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.38;
    font-weight: 700;
}

.lawbook-category-count {
    margin-top: 11px;
    color: #60a5fa;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lawbook-category-grid.is-hidden,
.lawbook-category-list.is-hidden {
    display: none;
}

.lawbook-category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lawbook-category-row {
    min-height: 82px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.54);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.66));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.lawbook-category-row:hover {
    border-color: rgba(96, 165, 250, 0.46);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(96, 165, 250, 0.1);
    transform: translateY(-1px);
}

.lawbook-category-row .lawbook-category-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
}

.lawbook-category-row .lawbook-category-icon svg {
    width: 25px;
    height: 25px;
}

.lawbook-category-row-main {
    min-width: 0;
}

.lawbook-category-row-count {
    color: #60a5fa;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 900;
    white-space: nowrap;
}

.lawbook-category-row-status {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.26);
    background: rgba(22, 163, 74, 0.16);
    color: #bbf7d0;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.lawbook-all-law-card {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.64));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
    cursor: pointer;
}

.lawbook-all-law-card:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.42);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.72));
    box-shadow:
        0 16px 34px rgba(2, 6, 23, 0.24),
        0 0 18px rgba(37, 99, 235, 0.1);
}

.lawbook-all-law-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.lawbook-all-law-short {
    color: #f8fafc;
    font-size: 25px;
    line-height: 1;
    letter-spacing: 0.04em;
    font-weight: 900;
}

.lawbook-all-law-status {
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(22, 101, 52, 0.18);
    color: #86efac;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    font-weight: 900;
}

.lawbook-all-law-name {
    color: #e2e8f0;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 900;
}

.lawbook-all-law-desc {
    margin-top: 5px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.lawbook-all-law-info {
    padding-top: 10px;
    border-top: 1px solid rgba(71, 85, 105, 0.38);
    color: #93c5fd;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 900;
}

.lawbook-hero {
    display: grid;
    grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr) minmax(260px, 0.72fr);
    align-items: center;
    gap: 22px;
    min-height: 210px;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(71, 85, 105, 0.48);
    background:
        radial-gradient(circle at 18% 20%, rgba(59, 130, 246, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.72));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.lawbook-hero-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lawbook-hero-logo {
    width: min(160px, 72%);
    max-height: 160px;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.28)) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.22));
}

.lawbook-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lawbook-hero-copy h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.1;
    color: #f8fafc;
    letter-spacing: 0.03em;
    font-weight: 900;
}

.lawbook-hero-copy h2 {
    margin: 0;
    color: #93c5fd;
    font-size: clamp(13px, 1.6vw, 18px);
    line-height: 1.2;
    letter-spacing: 0.14em;
    font-weight: 900;
}

.lawbook-hero-copy p {
    max-width: 680px;
    margin: 2px 0 0;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.5;
}

.lawbook-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.lawbook-stat-card {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.72));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.lawbook-stat-number {
    color: #f8fafc;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

.lawbook-stat-label {
    color: #93c5fd;
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 900;
}

.lawbook-overview-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.lawbook-panel {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.74));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

.lawbook-panel-title {
    margin: 0;
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    font-weight: 900;
}

.lawbook-panel-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(71, 85, 105, 0.46);
}

.lawbook-panel-entry {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(71, 85, 105, 0.38);
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.lawbook-panel-entry:hover {
    color: #dbeafe;
    transform: translateX(2px);
}

.lawbook-entry-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.lawbook-entry-title {
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
}

.lawbook-entry-meta,
.lawbook-entry-desc {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.lawbook-entry-tag {
    align-self: flex-start;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.16);
    color: #93c5fd;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
    white-space: nowrap;
}

.lawbook-panel-button {
    margin-top: auto;
    align-self: flex-start;
    min-height: 36px;
    padding: 0 15px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(37, 99, 235, 0.18);
    color: #dbeafe;
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 900;
    cursor: default;
}

.lawbook-books-section {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.lawbook-section-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lawbook-section-heading h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.12em;
    font-weight: 900;
}

.lawbook-section-heading p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

.lawbook-book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.lawbook-book-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.74));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
    cursor: pointer;
}

.lawbook-book-card:hover {
    transform: translateY(-3px);
    border-color: rgba(96, 165, 250, 0.42);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.82));
    box-shadow:
        0 18px 40px rgba(2, 6, 23, 0.28),
        0 0 22px rgba(37, 99, 235, 0.12);
}

.lawbook-book-card.active,
.lawbook-all-law-card.active {
    border-color: rgba(96, 165, 250, 0.58);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(30, 64, 175, 0.32), rgba(2, 6, 23, 0.78));
    box-shadow:
        0 18px 40px rgba(2, 6, 23, 0.3),
        0 0 26px rgba(37, 99, 235, 0.18);
}

.lawbook-book-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lawbook-book-short {
    color: #f8fafc;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.04em;
    font-weight: 900;
}

.lawbook-book-status {
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(22, 101, 52, 0.18);
    color: #86efac;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    font-weight: 900;
}

.lawbook-book-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lawbook-book-name {
    color: #e2e8f0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 900;
}

.lawbook-book-desc {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 650;
}

.lawbook-book-count {
    padding-top: 14px;
    border-top: 1px solid rgba(71, 85, 105, 0.42);
    color: #93c5fd;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    font-weight: 900;
}

.lawbook-detail-view {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 24px;
    padding-top: 0;
    overflow: visible;
    height: auto;
    min-height: auto;
    position: relative;
    top: auto;
    transform: none;
}

.law-detail-view-fixed {
    overflow: visible;
    height: auto;
    min-height: auto;
    position: relative;
    top: auto;
    transform: none;
    padding-top: 0;
    margin-top: 24px;
    scroll-margin-top: 96px;
}

.law-detail-view-fixed .lawbook-search,
.law-detail-view-fixed .lawbook-topbar,
.law-detail-view-fixed .law-search,
.law-detail-view-fixed .law-topbar {
    margin-top: 0;
    margin-bottom: 0;
}

.law-detail-view-fixed.lawbook-detail-view,
.law-detail-view-fixed .law-detail-layout {
    margin-top: 24px;
    align-items: flex-start;
}

.law-detail-view-fixed .lawbook-detail-panel,
.law-detail-view-fixed .lawbook-paragraph-panel,
.law-detail-view-fixed .law-detail-card,
.law-detail-view-fixed .law-paragraph-panel {
    margin-top: 0;
}

.lawbook-detail-nav {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.58));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.lawbook-detail-nav-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.lawbook-breadcrumb {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
}

.lawbook-breadcrumb span {
    color: #cbd5e1;
}

.lawbook-open-title {
    margin: 0;
    color: #f8fafc;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 900;
}

.lawbook-open-meta {
    color: #93c5fd;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.1em;
    font-weight: 900;
}

.lawbook-back-button {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(37, 99, 235, 0.16);
    color: #dbeafe;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
    white-space: nowrap;
}

.lawbook-back-button:hover {
    border-color: rgba(96, 165, 250, 0.42);
    background: rgba(37, 99, 235, 0.24);
    transform: translateY(-1px);
}

.lawbook-paragraph-panel,
.lawbook-detail-panel {
    border-radius: 24px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.76));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

.lawbook-paragraph-panel {
    padding: 22px;
}

.lawbook-paragraph-title {
    margin: 0 0 14px;
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    font-weight: 900;
}

.lawbook-paragraph-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lawbook-paragraph-item {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.36);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.lawbook-paragraph-item:hover {
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 41, 59, 0.62);
    transform: translateX(2px);
}

.lawbook-paragraph-item.active {
    color: #f8fafc;
    border-color: rgba(96, 165, 250, 0.42);
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.34), rgba(15, 23, 42, 0.22));
    box-shadow: 0 0 18px rgba(37, 99, 235, 0.12);
}

.lawbook-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.lawbook-detail-panel.is-switching {
    opacity: 0.72;
    transform: translateY(2px);
}

.lawbook-detail-kicker {
    color: #93c5fd;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.16em;
    font-weight: 900;
}

.lawbook-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(71, 85, 105, 0.42);
}

.lawbook-detail-title-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.lawbook-detail-paragraph-number {
    color: #f8fafc;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 0.95;
    font-weight: 950;
    letter-spacing: 0.02em;
}

.lawbook-detail-heading-text {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.1;
    font-weight: 900;
}

.lawbook-detail-header-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lawbook-detail-book-name {
    margin-top: 8px;
    color: #93c5fd;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
}

.lawbook-detail-badge,
.lawbook-detail-status {
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.18);
    color: #93c5fd;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.12em;
    font-weight: 900;
}

.lawbook-detail-status {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(22, 101, 52, 0.18);
    color: #86efac;
}

.lawbook-text-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: 22px;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(2, 6, 23, 0.38));
}

.lawbook-text-panel h3,
.lawbook-meta-panel h3 {
    margin: 0;
    color: #93c5fd;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    font-weight: 900;
}

.lawbook-detail-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 900px;
    color: #dbeafe;
    font-size: 16px;
    line-height: 1.85;
    font-weight: 600;
}

.lawbook-text-clause {
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}

.lawbook-text-clause:last-child {
    border-bottom: none;
}

.lawbook-clause-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.26);
    background: rgba(30, 64, 175, 0.16);
    color: #93c5fd;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
}

.lawbook-clause-copy {
    color: #dbeafe;
}

.lawbook-support-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
}

.lawbook-meta-panel,
.lawbook-note-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background: rgba(15, 23, 42, 0.52);
}

.lawbook-meta-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.lawbook-meta-card {
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background: rgba(15, 23, 42, 0.52);
}

.lawbook-meta-card-label {
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    font-weight: 900;
}

.lawbook-meta-card-value {
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
}

.lawbook-meta-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lawbook-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(71, 85, 105, 0.36);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
}

.lawbook-meta-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.lawbook-meta-label {
    color: #64748b;
    font-weight: 900;
}

.lawbook-note-panel {
    justify-content: center;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.6;
    border-color: rgba(96, 165, 250, 0.22);
    background: rgba(30, 64, 175, 0.12);
}

@media (max-width: 1080px) {
    .lawbook-app {
        grid-template-columns: 1fr;
    }

    .lawbook-sidebar {
        position: relative;
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid rgba(71, 85, 105, 0.48);
    }

    .lawbook-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lawbook-detail-view {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .lawbook-main {
        padding: 24px 18px 28px;
    }

    .lawbook-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 24px;
        text-align: center;
    }

    .lawbook-hero-copy {
        align-items: center;
    }

    .lawbook-stats {
        grid-template-columns: 1fr;
    }

    .lawbook-search {
        width: 100%;
    }

    .lawbook-overview-panels {
        grid-template-columns: 1fr;
    }

    .lawbook-detail-header {
        flex-direction: column;
    }

    .lawbook-meta-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lawbook-detail-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .lawbook-support-grid {
        grid-template-columns: 1fr;
    }

    .lawbook-update-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lawbook-update-status {
        justify-self: start;
    }

    .lawbook-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lawbook-category-row {
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    .lawbook-category-row-status {
        grid-column: 2 / -1;
        justify-self: start;
    }
}

@media (max-width: 520px) {
    .lawbook-app {
        border-radius: 18px;
    }

    .lawbook-sidebar {
        padding: 22px 16px;
    }

    .lawbook-nav {
        grid-template-columns: 1fr;
    }

    .lawbook-all-laws-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .lawbook-all-laws-actions {
        width: 100%;
    }

    .lawbook-all-laws-button,
    .lawbook-view-toggle {
        flex: 1 1 0;
    }

    .lawbook-category-grid {
        grid-template-columns: 1fr;
    }

    .lawbook-category-row {
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;
    }

    .lawbook-category-row .lawbook-category-icon {
        width: 44px;
        height: 44px;
    }

    .lawbook-category-row-count,
    .lawbook-category-row-status {
        grid-column: 2;
        justify-self: start;
    }

    .lawbook-brand-logo {
        width: 50px;
        height: 50px;
    }

    .lawbook-meta-cards {
        grid-template-columns: 1fr;
    }

    .lawbook-text-clause {
        grid-template-columns: 1fr;
    }
}

#personnel .personnel-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#personnel .personnel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#personnel .personnel-header-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#personnel .personnel-header h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    color: #f8fafc;
}

#personnel .personnel-header p {
    margin: 0;
    max-width: 520px;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#personnel .personnel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

#personnel .personnel-tab-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.88);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

#personnel .personnel-tab-btn:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: #334155;
    color: #f8fafc;
    transform: translateY(-1px);
}

#personnel .personnel-tab-btn.active {
    background: rgba(30, 64, 175, 0.26);
    border-color: rgba(96, 165, 250, 0.36);
    color: #dbeafe;
}

#personnel .personnel-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#personnel .personnel-overview-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#personnel .personnel-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: 14px;
}

#personnel .personnel-overview-card {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-height: 148px;
    padding: 17px 18px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 42%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

#personnel .personnel-overview-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

#personnel .personnel-overview-card-header h3 {
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.3;
    color: #f8fafc;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#personnel .personnel-overview-card-id {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#personnel .personnel-overview-card-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    min-width: 0;
}

#personnel .personnel-overview-meta-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border-top: 0;
}

#personnel .personnel-overview-meta-item strong {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    color: #94a3b8;
}

#personnel .personnel-overview-meta-item span {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.45;
    color: #e2e8f0;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#personnel .personnel-overview-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (max-width: 640px) {
    #personnel .personnel-overview-grid {
        grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    }
}

#personnel .personnel-files-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#personnel .personnel-files-layout {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 16px;
}

#personnel .personnel-files-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(3, 7, 18, 0.78);
    box-shadow: none;
    max-height: 900px;
    overflow: auto;
}

#personnel .personnel-files-sidebar-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: rgba(15, 23, 42, 0.42);
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

#personnel .personnel-files-sidebar-item:hover {
    border-color: rgba(71, 85, 105, 0.72);
    background: rgba(30, 41, 59, 0.7);
}

#personnel .personnel-files-sidebar-item.active {
    border-color: rgba(96, 165, 250, 0.3);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.22), rgba(15, 23, 42, 0.58));
}

#personnel .personnel-files-sidebar-item:focus-visible {
    border-color: rgba(96, 165, 250, 0.38);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#personnel .personnel-files-sidebar-item.active strong {
    color: #eff6ff;
}

#personnel .personnel-files-sidebar-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#personnel .personnel-files-sidebar-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #a7b4c8;
}

#personnel .personnel-files-viewer {
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(3, 7, 18, 0.82);
    box-shadow: none;
    padding: 22px;
}

#personnel .personnel-file-cover {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#personnel .personnel-file-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.62);
}

#personnel .personnel-file-card-header h3 {
    margin: 0;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#personnel .personnel-file-card-id {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8ea4c7;
}

#personnel .personnel-file-card-header .personnel-file-training-pill,
#personnel .personnel-file-card-header .personnel-status-pill,
#personnel .personnel-file-card-header .personnel-former-pill,
#personnel .personnel-file-card-header .personnel-file-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.18);
    background: rgba(20, 83, 45, 0.2);
    color: #dcfce7;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-file-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 0;
}

#personnel .personnel-file-nav-btn {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

#personnel .personnel-file-nav-btn:hover {
    background: rgba(30, 41, 59, 0.68);
    border-color: rgba(71, 85, 105, 0.7);
    color: #f8fafc;
}

#personnel .personnel-file-nav-btn.active {
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.22), rgba(15, 23, 42, 0.56));
    border-color: rgba(96, 165, 250, 0.32);
    color: #eff6ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#personnel .personnel-file-nav-btn:focus-visible {
    border-color: rgba(96, 165, 250, 0.38);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#personnel .personnel-file-panel {
    display: none;
    opacity: 0;
    transform: translateY(4px);
}

#personnel .personnel-file-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: personnelFilePanelIn 0.18s ease;
}

@keyframes personnelFilePanelIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#personnel .personnel-file-card-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#personnel .personnel-file-card-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

#personnel .personnel-file-card-section h4 {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #cbd5e1;
}

#personnel .personnel-file-card-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(51, 65, 85, 0.52);
}

#personnel .personnel-file-card-row strong {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#personnel .personnel-file-card-row span {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
}

#personnel .personnel-file-card-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
}

#personnel .personnel-file-card-section > .personnel-file-card-note:only-child {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.58);
    background: rgba(15, 23, 42, 0.34);
    color: #a9b5c9;
}

#personnel .personnel-file-entries-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#personnel .personnel-file-entries-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#personnel .personnel-file-entries-form-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 12px;
}

#personnel .personnel-file-entries-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#personnel .personnel-file-entries-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#personnel .personnel-file-entries-field select,
#personnel .personnel-file-entries-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#personnel .personnel-file-entries-field select:focus,
#personnel .personnel-file-entries-field textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#personnel .personnel-file-entries-field textarea {
    min-height: 120px;
    resize: vertical;
}

#personnel .personnel-file-entries-actions {
    display: flex;
    justify-content: flex-end;
}

#personnel .personnel-file-entries-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#personnel .personnel-file-entries-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .personnel-file-entries-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#personnel .personnel-file-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(51, 65, 85, 0.58);
    background: transparent;
}

#personnel .personnel-file-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#personnel .personnel-file-entry-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    background: rgba(30, 41, 59, 0.38);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-file-entry-time {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
    white-space: nowrap;
}

#personnel .personnel-file-entry-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #e2e8f0;
    white-space: pre-wrap;
}

#personnel .personnel-file-sanctions-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#personnel .personnel-file-sanctions-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#personnel .personnel-file-sanction-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(51, 65, 85, 0.58);
    background: transparent;
}

#personnel .personnel-file-sanction-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#personnel .personnel-file-sanction-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.16);
    background: rgba(127, 29, 29, 0.14);
    color: #fecaca;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-file-sanction-date {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
    white-space: nowrap;
}

#personnel .personnel-file-sanction-reason {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

#personnel .personnel-file-sanction-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
}

#personnel .personnel-file-sanctions-list > .personnel-file-card-section:only-child {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.58);
    background: rgba(15, 23, 42, 0.34);
}

#personnel .personnel-file-training-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#personnel .personnel-file-training-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 0 14px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(51, 65, 85, 0.58);
    background: transparent;
}

#personnel .personnel-file-training-summary strong {
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
}

#personnel .personnel-file-training-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#personnel .personnel-file-training-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(51, 65, 85, 0.52);
    background: transparent;
}

#personnel .personnel-file-training-item strong {
    font-size: 14px;
    line-height: 1.5;
    color: #f8fafc;
}

#personnel .personnel-file-training-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-file-training-pill.status-bestanden {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
}

#personnel .personnel-file-training-pill.status-offen,
#personnel .personnel-file-training-pill.status-keine-daten,
#personnel .personnel-file-training-pill.status-nicht-begonnen {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#personnel .personnel-file-training-pill.status-in-bearbeitung {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#personnel .personnel-file-training-pill.status-nicht-bestanden,
#personnel .personnel-file-training-pill.status-fehlend {
    color: #ffedd5;
    border-color: rgba(251, 146, 60, 0.3);
    background: rgba(154, 52, 18, 0.26);
}

#personnel .personnel-file-notes-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#personnel .personnel-file-notes-textarea {
    width: 100%;
    min-height: 260px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.58);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.7;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
}

#personnel .personnel-file-notes-textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#personnel .personnel-file-notes-actions {
    display: flex;
    justify-content: flex-end;
}

#personnel .personnel-file-notes-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#personnel .personnel-file-notes-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .personnel-file-notes-save:focus-visible {
    border-color: rgba(96, 165, 250, 0.38);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#personnel .personnel-file-documents-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#personnel .personnel-file-document-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#personnel .personnel-file-document-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#personnel .personnel-file-document-title h4 {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #cbd5e1;
}

#personnel .personnel-file-document-title p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#personnel .personnel-file-document-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#personnel .personnel-file-document-image {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 180px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(15, 23, 42, 0.34);
}

#personnel .personnel-file-document-image strong {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
}

#personnel .personnel-file-document-image span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.58);
    background: rgba(2, 6, 23, 0.42);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

#personnel .personnel-file-document-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 96px;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.58);
    background: rgba(2, 6, 23, 0.42);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    overflow: hidden;
}

#personnel .personnel-file-document-preview img {
    width: 100%;
    max-height: 118px;
    object-fit: contain;
    border-radius: 10px;
}

#personnel .personnel-file-document-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#personnel .personnel-file-document-actions button,
#personnel .personnel-file-document-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 11px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.82);
    background: rgba(15, 23, 42, 0.78);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#personnel .personnel-file-document-actions button:hover,
#personnel .personnel-file-document-upload:hover {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, 0.38);
    background: rgba(30, 41, 59, 0.92);
}

#personnel .personnel-file-document-delete {
    color: #fecaca;
    border-color: rgba(127, 29, 29, 0.58) !important;
    background: rgba(69, 10, 10, 0.48) !important;
}

#personnel .personnel-note {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#personnel .personnel-note textarea {
    width: 100%;
    min-height: 110px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.6;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
}

#personnel .personnel-note textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#personnel .personnel-note button {
    align-self: flex-end;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#personnel .personnel-note button:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .personnel-sanctions-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
}

#personnel .personnel-sanctions-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#personnel .personnel-sanctions-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#personnel .personnel-sanctions-field.full {
    grid-column: 1 / -1;
}

#personnel .personnel-sanctions-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#personnel .personnel-sanctions-field input,
#personnel .personnel-sanctions-field textarea,
#personnel .personnel-sanctions-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#personnel .personnel-sanctions-field input:focus,
#personnel .personnel-sanctions-field textarea:focus,
#personnel .personnel-sanctions-field select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#personnel .personnel-sanctions-field textarea {
    min-height: 120px;
    resize: vertical;
}

#personnel .personnel-sanctions-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#personnel .personnel-sanctions-save,
#personnel .personnel-sanction-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#personnel .personnel-sanctions-save:hover,
#personnel .personnel-sanction-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .personnel-sanction-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#personnel .personnel-sanction-entry + .personnel-sanction-entry {
    margin-top: 12px;
}

#personnel .personnel-sanction-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#personnel .personnel-sanction-entry-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#personnel .personnel-sanction-entry-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#personnel .personnel-sanction-entry-title p,
#personnel .personnel-sanction-entry-note {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#personnel .personnel-sanction-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-sanction-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
}

#personnel .personnel-sanction-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#personnel .personnel-status-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
}

#personnel .personnel-promotion-dismissal-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

#personnel .personnel-promotion-dismissal-layout > .personnel-panel-card {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

#personnel #personnel-agent-create .personnel-status-shell,
#personnel #personnel-promotion .personnel-status-shell {
    grid-template-columns: 1fr;
}

#personnel .personnel-status-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#personnel .personnel-status-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#personnel .personnel-status-field.full {
    grid-column: 1 / -1;
}

#personnel .personnel-status-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#personnel .personnel-status-field input,
#personnel .personnel-status-field textarea,
#personnel .personnel-status-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#personnel .personnel-status-field input:focus,
#personnel .personnel-status-field textarea:focus,
#personnel .personnel-status-field select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#personnel .personnel-status-field textarea {
    min-height: 120px;
    resize: vertical;
}

#personnel .personnel-promotion-roles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid #1e293b;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.54);
}

#personnel .personnel-promotion-role-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #dbeafe;
    font-size: 13px;
}

#personnel .personnel-promotion-role-option input {
    width: auto;
    flex: 0 0 auto;
}

#personnel .personnel-promotion-current-roles {
    min-height: 44px;
    padding: 12px 14px;
    border: 1px solid #1e293b;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.48);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
}

#personnel .personnel-status-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#personnel .personnel-status-save,
#personnel .personnel-status-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#personnel .personnel-status-save:hover,
#personnel .personnel-status-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .personnel-agent-create-feedback {
    display: none;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.68);
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
    white-space: pre-line;
}

#personnel .personnel-agent-create-feedback.visible {
    display: block;
}

#personnel .personnel-agent-create-feedback.success {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
    color: #dcfce7;
}

#personnel .personnel-status-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#personnel .personnel-status-entry + .personnel-status-entry {
    margin-top: 12px;
}

#personnel .personnel-status-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#personnel .personnel-status-entry-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#personnel .personnel-status-entry-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#personnel .personnel-status-entry-title p,
#personnel .personnel-status-entry-note {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#personnel .personnel-status-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-status-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
}

#personnel .personnel-status-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#personnel .personnel-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-status-pill.status-aktiv {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
}

#personnel .personnel-status-pill.status-pausiert {
    color: #fef3c7;
    border-color: rgba(250, 204, 21, 0.24);
    background: rgba(113, 63, 18, 0.24);
}

#personnel .personnel-status-pill.status-beurlaubt {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#personnel .personnel-status-pill.status-entlassen {
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.24);
    background: rgba(127, 29, 29, 0.24);
}

#personnel .personnel-former-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
}

#personnel .personnel-former-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#personnel .personnel-former-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#personnel .personnel-former-field.full {
    grid-column: 1 / -1;
}

#personnel .personnel-former-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#personnel .personnel-former-field input,
#personnel .personnel-former-field textarea,
#personnel .personnel-former-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#personnel .personnel-former-field input:focus,
#personnel .personnel-former-field textarea:focus,
#personnel .personnel-former-field select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#personnel .personnel-former-field textarea {
    min-height: 120px;
    resize: vertical;
}

#personnel .personnel-former-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#personnel .personnel-former-save,
#personnel .personnel-former-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#personnel .personnel-former-save:hover,
#personnel .personnel-former-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .personnel-former-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#personnel .personnel-former-entry + .personnel-former-entry {
    margin-top: 12px;
}

#personnel .personnel-former-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#personnel .personnel-former-entry-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#personnel .personnel-former-entry-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#personnel .personnel-former-entry-title p,
#personnel .personnel-former-entry-note {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#personnel .personnel-former-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-former-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
}

#personnel .personnel-former-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#personnel .personnel-former-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .personnel-former-pill.status-entlassen {
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.24);
    background: rgba(127, 29, 29, 0.24);
}

#personnel .personnel-former-pill.status-ausgetreten {
    color: #fef3c7;
    border-color: rgba(250, 204, 21, 0.24);
    background: rgba(113, 63, 18, 0.24);
}

#personnel .personnel-former-pill.status-inaktiv {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#personnel .personnel-former-pill.status-sonstiges {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

@media (max-width: 980px) {
    #personnel .personnel-files-layout,
    #personnel .personnel-sanctions-shell,
    #personnel .personnel-status-shell,
    #personnel .personnel-promotion-dismissal-layout,
    #personnel .personnel-former-shell {
        grid-template-columns: 1fr;
    }

    #personnel .personnel-files-sidebar {
        max-height: none;
    }

    #personnel .personnel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #personnel .personnel-tabs {
        justify-content: flex-start;
    }
}

#personnel .personnel-panel {
    display: none;
}

#personnel .personnel-panel.active {
    display: block;
}

#personnel .personnel-panel-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

#personnel .personnel-panel-card h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: #f8fafc;
}

#personnel .personnel-panel-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

@media (max-width: 900px) {
    #personnel .personnel-tabs {
        gap: 8px;
    }
}

.rights-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #cbd5e1;
}

.rights-box p {
    margin: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(10, 15, 28, 0.92));
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 10px;
    padding: 16px;
    font-weight: 500;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.rights-box p:first-child {
    border-left: 4px solid #3b82f6;
}

.rights-box p:hover {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(11, 18, 32, 0.96));
    border-color: rgba(71, 85, 105, 0.82);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

/* GRID SYSTEM */

/* CARDS */

.card {
    background: #0f172a;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #1e293b;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: 0.2s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.card h3 {
    margin-top: 0;
    font-size: 16px;
    margin-bottom: 10px;
}
/* UNIT GRID */

.unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* UNIT CARD */

.unit-card {
    background: #0f172a;
    border: 2px solid #22c55e;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

/* HEADER */

.unit-header {
    font-weight: bold;
    margin-bottom: 10px;
}

/* AGENTS */

.agent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #020617;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
}

/* BUTTON */

.agent button {
    background: #dc2626;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.agent button:hover {
    background: #ef4444;
}

/* HAUPTUNITS STYLE */

.main-unit {
    border: 2px solid #2563eb;
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.5);
}

/* SOK - DUNKELGRüN */

.sok {
    border: 2px solid #166534;
    box-shadow: 0 0 15px rgba(22, 101, 52, 0.6);
}

.unit-add {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.unit-add select {
    flex: 1;
    padding: 5px;
    border-radius: 5px;
    border: none;
}

.unit-add button {
    background: #2563eb;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.unit-add button:hover {
    background: #3b82f6;
}

/* INTERNE - ROT */

.interne {
    border: 2px solid #b91c1c;
    box-shadow: 0 0 15px rgba(185, 28, 28, 0.6);
}

#units {
    display: none;
    --units-accent: #970f00;
    --units-accent-border: rgba(151, 15, 0, 0.42);
    --units-accent-bg: rgba(151, 15, 0, 0.2);
    --units-accent-text: #ffd9d4;
    --units-accent-shadow: rgba(151, 15, 0, 0.16);
}

#units:has(#units-internal.active) {
    --units-accent: #970f00;
    --units-accent-border: rgba(151, 15, 0, 0.42);
    --units-accent-bg: rgba(151, 15, 0, 0.2);
    --units-accent-text: #ffd9d4;
    --units-accent-shadow: rgba(151, 15, 0, 0.16);
}

#units:has(#units-sok.active) {
    --units-accent: #004117;
    --units-accent-border: rgba(0, 65, 23, 0.44);
    --units-accent-bg: rgba(0, 65, 23, 0.22);
    --units-accent-text: #d4f8df;
    --units-accent-shadow: rgba(0, 65, 23, 0.18);
}

#units.active {
    display: block;
}

#units .units-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .units-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    padding: 18px 22px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, #1e293b 70%, var(--units-accent) 30%);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#units .units-header::before {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--units-accent),
        color-mix(in srgb, var(--units-accent) 18%, transparent 82%)
    );
    opacity: 0.95;
}

#units .units-header-main {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    flex: 1 1 auto;
}

#units .units-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 0 0 auto;
    padding-left: 12px;
    border-left: 3px solid var(--units-accent);
}

#units .units-title h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    color: color-mix(in srgb, #f8fafc 76%, var(--units-accent) 24%);
}

#units .units-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    flex: 0 0 auto;
}

#units .units-tab {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.88);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

#units .units-tab:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: #334155;
    color: #f8fafc;
    transform: translateY(-1px);
}

#units .units-tab.active {
    background: var(--units-accent-bg);
    border-color: var(--units-accent-border);
    color: var(--units-accent-text);
    box-shadow: 0 8px 18px var(--units-accent-shadow);
}

#units .units-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .units-panel {
    display: none;
}

#units .units-panel.active {
    display: block;
}

#units .units-panel-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, #1e293b 72%, var(--units-accent) 28%);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .units-panel-card h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: color-mix(in srgb, #f8fafc 82%, var(--units-accent) 18%);
}

#units .units-panel-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .units-internal-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#units .units-internal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    justify-content: flex-start;
    min-width: 0;
    flex: 1 1 auto;
}

#units .units-internal-tabs.is-hidden {
    display: none;
}

#units .units-internal-tab {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .units-internal-tab:hover {
    background: rgba(30, 41, 59, 0.68);
    border-color: rgba(71, 85, 105, 0.7);
    color: #f8fafc;
}

#units .units-internal-tab.active {
    background: var(--units-accent-bg);
    border-color: var(--units-accent-border);
    color: var(--units-accent-text);
    box-shadow: 0 8px 18px var(--units-accent-shadow);
}

#units .units-internal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .units-internal-panel {
    display: none;
}

#units .units-internal-panel.active {
    display: block;
}

#units .units-internal-placeholder {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .units-internal-placeholder h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: #f8fafc;
    opacity: 1;
}

#units .units-internal-placeholder p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .sok-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .sok-header-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-header-main h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-header-main p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    justify-content: flex-start;
    min-width: 0;
    flex: 1 1 auto;
}

#units .sok-tabs.is-hidden {
    display: none;
}

#units .sok-tab {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .sok-tab:hover {
    background: rgba(30, 41, 59, 0.68);
    border-color: rgba(71, 85, 105, 0.7);
    color: #f8fafc;
}

#units .sok-tab.active {
    background: var(--units-accent-bg);
    border-color: var(--units-accent-border);
    color: var(--units-accent-text);
    box-shadow: 0 8px 18px var(--units-accent-shadow);
}

#units .sok-content {
    display: grid;
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

#units .sok-content > .sok-intel-sidebar {
    grid-column: 1;
    grid-row: 1;
}

#units .sok-content > .sok-panel {
    grid-column: 2;
    min-width: 0;
}

#units .sok-panel {
    display: none;
}

#units .sok-panel.active {
    display: block;
}

#units .sok-panel-card h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-panel-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-panel-eyebrow {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

/* SOK Design System – scoped under #units */
#units {
    --sok-bg: #020617;
    --sok-surface: rgba(15, 23, 42, 0.94);
    --sok-surface-strong: rgba(10, 18, 32, 0.96);
    --sok-surface-soft: rgba(2, 6, 23, 0.38);
    --sok-border: rgba(51, 65, 85, 0.58);
    --sok-border-strong: rgba(30, 41, 59, 0.86);
    --sok-text: #f8fafc;
    --sok-muted: #94a3b8;
    --sok-accent: #38bdf8;
    --sok-success: #22c55e;
    --sok-warning: #f59e0b;
    --sok-danger: #ef4444;
    --sok-card-radius: 22px;
    --sok-inner-radius: 16px;
    --sok-control-height: 40px;
    --sok-shadow: 0 16px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#units .sok-panel {
    min-width: 0;
}

/* 1 – sok-card */
#units .sok-card,
#units .sok-panel-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    border-radius: var(--sok-card-radius);
    border: 1px solid var(--sok-border-strong);
    background:
        linear-gradient(180deg, var(--sok-surface), rgba(2, 6, 23, 0.94)),
        radial-gradient(circle at 92% 0%, rgba(56, 189, 248, 0.07), transparent 34%);
    box-shadow: var(--sok-shadow);
    color: var(--sok-text);
}

/* 2 – sok-panel (Inhaltsflächen; Tab-Sichtbarkeit bleibt bei .sok-panel.active) */
#units .sok-tactical-panel,
#units .sok-overview-section,
#units .sok-guides-list,
#units .sok-guides-viewer,
#units .sok-files-viewer,
#units .sok-routes-viewer,
#units .sok-raid-planner-viewer,
#units .sok-raid-request-viewer,
#units .sok-route-detail-card,
#units .sok-route-map-card,
#units .sok-guides-content-card,
#units .sok-guides-info-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid var(--sok-border-strong);
    background: linear-gradient(180deg, var(--sok-surface), rgba(2, 6, 23, 0.94));
    box-shadow: var(--sok-shadow);
    color: var(--sok-text);
}

/* 3 – sok-table */
#units .sok-table,
#units .sok-routes-table,
#units .sok-raid-request-table,
#units .sok-company-table-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid var(--sok-border);
    background: var(--sok-surface-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#units .sok-table-head,
#units .sok-routes-table-head,
#units .sok-raid-request-table-head,
#units .sok-company-table-head {
    display: grid;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sok-border);
    background: rgba(15, 23, 42, 0.74);
    color: var(--sok-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

#units .sok-table-row,
#units .sok-routes-table-row,
#units .sok-raid-request-table-row,
#units .sok-company-table-row {
    display: grid;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.38);
    background: transparent;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
    box-sizing: border-box;
}

#units .sok-table-row:last-child,
#units .sok-routes-table-row:last-child,
#units .sok-raid-request-table-row:last-child,
#units .sok-company-table-row:last-child {
    border-bottom: 0;
}

#units .sok-table-row:hover,
#units .sok-table-row.active,
#units .sok-routes-table-row:hover,
#units .sok-routes-table-row.active,
#units .sok-raid-request-table-row:hover,
#units .sok-raid-request-table-row.active,
#units .sok-company-table-row:hover,
#units .sok-company-table-row.active {
    background:
        linear-gradient(90deg, rgba(14, 165, 233, 0.12), rgba(15, 23, 42, 0.62)),
        radial-gradient(circle at 2% 50%, rgba(56, 189, 248, 0.12), transparent 28%);
    box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.65);
}

/* 4 – sok-status-chip */
#units .sok-status-chip,
#units .sok-route-status-chip,
#units .sok-raid-request-status-chip,
#units .sok-raid-status-chip,
#units .sok-company-status-chip,
#units .sok-leadership-status-chip,
#units .sok-guide-status-chip,
#units .sok-family-list-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

#units .sok-status-chip.active,
#units .sok-status-chip.aktiv,
#units .sok-status-chip.approved,
#units .sok-status-chip.genehmigt,
#units .sok-status-chip.abgeschlossen,
#units .sok-status-chip.ready,
#units .sok-status-chip.online {
    border: 1px solid rgba(34, 197, 94, 0.34);
    background: rgba(22, 101, 52, 0.2);
    color: #bbf7d0;
}

#units .sok-status-chip.processing,
#units .sok-status-chip.planned {
    border: 1px solid rgba(96, 165, 250, 0.36);
    background: rgba(30, 64, 175, 0.2);
    color: #bfdbfe;
}

#units .sok-status-chip.pending,
#units .sok-status-chip.offen,
#units .sok-status-chip.watch,
#units .sok-status-chip.beobachtung,
#units .sok-status-chip.warning,
#units .sok-status-chip.operation,
#units .sok-status-chip.running {
    border: 1px solid rgba(251, 191, 36, 0.36);
    background: rgba(120, 53, 15, 0.22);
    color: #fde68a;
}

#units .sok-status-chip.rejected,
#units .sok-status-chip.abgelehnt,
#units .sok-status-chip.critical,
#units .sok-status-chip.danger {
    border: 1px solid rgba(239, 68, 68, 0.42);
    background: rgba(127, 29, 29, 0.26);
    color: #fecaca;
}

#units .sok-status-chip.inactive,
#units .sok-status-chip.unknown,
#units .sok-status-chip.neutral,
#units .sok-status-chip.offline,
#units .sok-status-chip.done {
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
}

#units .sok-guide-status-chip {
    border: 1px solid rgba(34, 197, 94, 0.34);
    background: rgba(22, 101, 52, 0.18);
    color: #bbf7d0;
}

/* 5 – sok-risk-badge */
#units .sok-risk-badge,
#units .sok-company-risk-chip,
#units .sok-raid-priority-chip,
#units .sok-company-risk,
#units .sok-threat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

#units .sok-risk-badge.low,
#units .sok-risk-badge.niedrig {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(22, 101, 52, 0.18);
    color: #bbf7d0;
}

#units .sok-risk-badge.medium,
#units .sok-risk-badge.mittel {
    border-color: rgba(250, 204, 21, 0.36);
    background: rgba(113, 63, 18, 0.2);
    color: #fef08a;
}

#units .sok-risk-badge.high,
#units .sok-risk-badge.hoch {
    border-color: rgba(249, 115, 22, 0.38);
    background: rgba(124, 45, 18, 0.22);
    color: #fed7aa;
}

#units .sok-risk-badge.critical,
#units .sok-risk-badge.kritisch {
    border-color: rgba(239, 68, 68, 0.42);
    background: rgba(127, 29, 29, 0.26);
    color: #fecaca;
}

#units .sok-risk-badge.unknown {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
}

/* 6 – sok-section-header */
#units .sok-section-header,
#units .sok-guides-command-header,
#units .sok-family-list-header,
#units .sok-companies-header,
#units .sok-leadership-command-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 24px;
    border: 1px solid rgba(14, 165, 233, 0.22);
    background:
        radial-gradient(circle at 88% 12%, rgba(14, 165, 233, 0.11), transparent 32%),
        linear-gradient(135deg, var(--sok-surface-strong), rgba(2, 6, 23, 0.98));
    box-shadow: var(--sok-shadow);
}

#units .sok-section-header h2,
#units .sok-section-header h3,
#units .sok-guides-command-header h2,
#units .sok-family-list-header h2,
#units .sok-companies-header h2,
#units .sok-leadership-command-header h2 {
    margin: 0;
    color: var(--sok-text);
    letter-spacing: 0;
}

#units .sok-section-header p,
#units .sok-guides-command-header p,
#units .sok-family-list-header p,
#units .sok-companies-header p,
#units .sok-leadership-command-header p {
    margin: 4px 0 0;
    color: var(--sok-muted);
    font-size: 14px;
    line-height: 1.7;
}

#units .sok-section-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

/* 7 – sok-sidebar */
#units .sok-sidebar,
#units .sok-intel-sidebar,
#units .sok-files-sidebar,
#units .sok-routes-sidebar,
#units .sok-raid-planner-sidebar,
#units .sok-raid-request-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid var(--sok-border-strong);
    background:
        linear-gradient(180deg, var(--sok-surface-strong), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.08), transparent 34%);
    box-shadow: var(--sok-shadow);
    box-sizing: border-box;
}

#units .sok-sidebar-nav,
#units .sok-intel-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#units .sok-sidebar-nav button,
#units .sok-intel-sidebar-nav button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 11px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#units .sok-sidebar-nav button:hover,
#units .sok-sidebar-nav button.active,
#units .sok-intel-sidebar-nav button:hover,
#units .sok-intel-sidebar-nav button.active {
    border-color: rgba(56, 189, 248, 0.28);
    background: rgba(12, 74, 110, 0.22);
    color: var(--sok-text);
    transform: translateX(2px);
}

/* 8 – Formulare */
#units .sok-field,
#units .sok-overview-field,
#units .sok-guides-field,
#units .sok-raid-request-field,
#units .sok-family-list-field,
#units .sok-companies-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-field label,
#units .sok-overview-field label,
#units .sok-guides-field label,
#units .sok-raid-request-field label,
#units .sok-family-list-field label,
#units .sok-companies-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sok-muted);
}

#units .sok-input,
#units .sok-select,
#units .sok-overview-field input,
#units .sok-overview-field textarea,
#units .sok-overview-field select,
#units .sok-guides-field input,
#units .sok-guides-field textarea,
#units .sok-guides-field select,
#units .sok-raid-request-field input,
#units .sok-raid-request-field textarea,
#units .sok-raid-request-field select,
#units .sok-family-list-field input,
#units .sok-family-list-field textarea,
#units .sok-family-list-field select,
#units .sok-companies-field input,
#units .sok-companies-field textarea,
#units .sok-companies-field select,
#units .sok-intel-tools input {
    width: 100%;
    min-height: var(--sok-control-height);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.62);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

#units .sok-input:focus,
#units .sok-select:focus,
#units .sok-overview-field input:focus,
#units .sok-overview-field textarea:focus,
#units .sok-overview-field select:focus,
#units .sok-guides-field input:focus,
#units .sok-guides-field textarea:focus,
#units .sok-raid-request-field input:focus,
#units .sok-raid-request-field textarea:focus,
#units .sok-companies-field input:focus,
#units .sok-companies-field textarea:focus,
#units .sok-family-list-field input:focus,
#units .sok-family-list-field textarea:focus,
#units .sok-intel-tools input:focus {
    border-color: rgba(56, 189, 248, 0.42);
    background: rgba(2, 6, 23, 0.82);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

#units .sok-button,
#units .sok-overview-action,
#units .sok-guides-add,
#units .sok-files-add,
#units .sok-family-list-add,
#units .sok-companies-add,
#units .sok-routes-add,
#units .sok-raid-planner-add,
#units .sok-raid-request-add,
#units .sok-overview-entry-actions button,
#units .sok-guides-document-actions button,
#units .sok-leadership-card-head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sok-control-height);
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#units .sok-button:hover,
#units .sok-overview-action:hover,
#units .sok-guides-add:hover,
#units .sok-files-add:hover,
#units .sok-family-list-add:hover,
#units .sok-companies-add:hover,
#units .sok-routes-add:hover,
#units .sok-raid-planner-add:hover,
#units .sok-raid-request-add:hover,
#units .sok-overview-entry-actions button:hover,
#units .sok-guides-document-actions button:hover,
#units .sok-leadership-card-head button:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(96, 165, 250, 0.34);
    color: var(--sok-text);
}

#units .sok-button.primary,
#units .sok-button.sok-button-primary,
#units .sok-overview-entry-actions button.primary,
#units .sok-guides-document-actions button.primary,
#units .sok-family-list-card-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-button.subtle-danger,
#units .sok-overview-entry-actions button.subtle-danger,
#units .sok-guides-document-actions button.subtle-danger,
#units .sok-family-list-card-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-empty,
#units .sok-overview-empty,
#units .sok-guides-empty,
#units .sok-routes-empty,
#units .sok-raid-request-empty,
#units .sok-companies-empty,
#units .sok-family-list-empty {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.38);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-intel-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(21, 128, 61, 0.32);
    background:
        linear-gradient(135deg, rgba(5, 46, 22, 0.44), rgba(2, 6, 23, 0.94) 54%),
        radial-gradient(circle at 92% 8%, rgba(34, 197, 94, 0.14), transparent 34%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-intel-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

#units .sok-intel-kicker {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #86efac;
}

#units .sok-intel-copy h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.12;
    color: #f8fafc;
}

#units .sok-intel-copy p {
    max-width: 680px;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #a7b4c8;
}

#units .sok-intel-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#units .sok-intel-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 78px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(2, 6, 23, 0.48);
}

#units .sok-intel-stat strong {
    font-size: 26px;
    line-height: 1;
    color: #dcfce7;
}

#units .sok-intel-stat span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-intel-dashboard {
    display: block;
}

#units .sok-intel-sidebar {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(21, 128, 61, 0.28);
    background:
        linear-gradient(180deg, rgba(5, 12, 24, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 0 0, rgba(34, 197, 94, 0.16), transparent 34%);
    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-intel-sidebar-brand {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 2px 2px 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.58);
}

#units .sok-intel-sidebar-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #dcfce7;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    box-shadow: none;
    overflow: hidden;
}

#units .sok-intel-sidebar-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#units .sok-intel-sidebar-brand strong {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-intel-sidebar-brand span {
    display: block;
    font-size: 11px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-intel-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#units .sok-intel-sidebar-nav button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 11px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#units .sok-intel-sidebar-nav button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.74);
    color: #86efac;
    font-size: 12px;
    flex: 0 0 auto;
}

#units .sok-intel-sidebar-nav button:hover,
#units .sok-intel-sidebar-nav button.active {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(21, 128, 61, 0.15);
    color: #f8fafc;
    transform: translateX(2px);
}

#units .sok-intel-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

#units .sok-intel-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(21, 128, 61, 0.28);
    background:
        linear-gradient(135deg, rgba(5, 46, 22, 0.34), rgba(2, 6, 23, 0.96) 56%),
        radial-gradient(circle at 82% 18%, rgba(59, 130, 246, 0.14), transparent 30%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-intel-topbar h2 {
    margin: 4px 0 0;
    font-size: 25px;
    line-height: 1.15;
    color: #f8fafc;
}

#units .sok-intel-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: min(480px, 100%);
}

#units .sok-intel-tools input {
    width: min(280px, 100%);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.62);
    color: #e2e8f0;
    font-size: 13px;
    outline: none;
}

#units .sok-intel-tools button,
#units .sok-intel-user {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
}

#units .sok-intel-tools button {
    width: 40px;
    cursor: pointer;
}

#units .sok-intel-user {
    padding: 0 12px;
    white-space: nowrap;
}

#units .sok-intel-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-intel-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 132px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.9));
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#units .sok-intel-card.danger {
    border-color: rgba(248, 113, 113, 0.22);
}

#units .sok-intel-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-intel-card-head span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-intel-card-head strong {
    font-size: 26px;
    line-height: 1;
    color: #f8fafc;
    white-space: nowrap;
}

#units .sok-intel-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-intel-meter {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(51, 65, 85, 0.42);
}

#units .sok-intel-meter i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #86efac);
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.34);
}

#units .sok-intel-meter.amber i {
    background: linear-gradient(90deg, #f59e0b, #facc15);
}

#units .sok-intel-meter.blue i {
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

#units .sok-intel-meter.red i {
    background: linear-gradient(90deg, #dc2626, #fb7185);
}

#units .sok-intel-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    grid-template-areas:
        'summary feed'
        'map quick'
        'hints measures';
    gap: 16px;
}

#units .sok-summary-panel {
    grid-area: summary;
}
#units .sok-feed-panel {
    grid-area: feed;
}
#units .sok-map-panel {
    grid-area: map;
}
#units .sok-quick-panel {
    grid-area: quick;
}
#units .sok-hints-panel {
    grid-area: hints;
}
#units .sok-measures-panel {
    grid-area: measures;
}

#units .sok-tactical-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-tactical-panel-head span {
    display: inline-flex;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #86efac;
}

#units .sok-tactical-panel-head h3 {
    margin: 3px 0 0;
    font-size: 18px;
    line-height: 1.25;
    color: #f8fafc;
}

#units .sok-threat-badge {
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.26);
    background: rgba(20, 83, 45, 0.22);
    color: #bbf7d0 !important;
    white-space: nowrap;
}

#units .sok-intel-feed .sok-overview-entry {
    position: relative;
    padding-left: 22px;
}

#units .sok-intel-feed .sok-overview-entry::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 18px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

#units #sokOverviewHintsList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

#units .sok-hint-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.72)),
        radial-gradient(circle at 12% 8%, rgba(59, 130, 246, 0.14), transparent 28%);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

#units .sok-hint-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #60a5fa, #f59e0b);
    opacity: 0.9;
}

#units .sok-hint-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

#units .sok-hint-card-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    color: #f8fafc;
}

#units .sok-hint-card-description {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #cbd5e1;
    overflow-wrap: anywhere;
}

#units .sok-hint-card-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#units .sok-hint-card-meta div {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.38);
}

#units .sok-hint-card-meta strong {
    display: block;
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

#units .sok-hint-card-meta span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
    color: #cbd5e1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-hint-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
}

#units .sok-intelligence-feed-panel {
    min-height: 420px;
}

#units .sok-intelligence-feed-head p {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #94a3b8;
}

#units .sok-intelligence-feed-filters {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 12px;
    padding: 6px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.38);
    overflow-x: auto;
}

#units .sok-intelligence-feed-filters button {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 9px 11px;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

#units .sok-intelligence-feed-filters button:hover,
#units .sok-intelligence-feed-filters button.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.26);
    color: #dbeafe;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.12);
}

#units .sok-intelligence-feed-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 390px;
    overflow: auto;
    padding-right: 4px;
}

#units .sok-intelligence-feed-list::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(
        180deg,
        rgba(96, 165, 250, 0),
        rgba(96, 165, 250, 0.42),
        rgba(245, 158, 11, 0.28),
        rgba(96, 165, 250, 0)
    );
}

#units .sok-intelligence-feed-item {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.72));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

#units .sok-intelligence-feed-node {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.32);
    background: rgba(15, 23, 42, 0.96);
    color: #bfdbfe;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.16);
    font-size: 14px;
}

#units .sok-intelligence-feed-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#units .sok-intelligence-feed-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-intelligence-feed-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

#units .sok-intelligence-feed-title strong {
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-intelligence-feed-description {
    font-size: 12px;
    line-height: 1.55;
    color: #cbd5e1;
    overflow-wrap: anywhere;
}

#units .sok-intelligence-feed-empty {
    position: relative;
    z-index: 1;
    padding: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.54);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
}

#units .sok-intelligence-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.75);
    color: #cbd5e1;
}

#units .sok-intelligence-category.familien {
    border-color: rgba(248, 113, 113, 0.32);
    color: #fecaca;
    background: rgba(127, 29, 29, 0.2);
}
#units .sok-intelligence-category.unternehmen {
    border-color: rgba(45, 212, 191, 0.32);
    color: #ccfbf1;
    background: rgba(20, 83, 45, 0.18);
}
#units .sok-intelligence-category.razzien {
    border-color: rgba(249, 115, 22, 0.36);
    color: #fed7aa;
    background: rgba(124, 45, 18, 0.22);
}
#units .sok-intelligence-category.ermittlungen {
    border-color: rgba(96, 165, 250, 0.34);
    color: #dbeafe;
    background: rgba(30, 64, 175, 0.22);
}
#units .sok-intelligence-category.leitung {
    border-color: rgba(168, 85, 247, 0.34);
    color: #e9d5ff;
    background: rgba(88, 28, 135, 0.2);
}
#units .sok-intelligence-category.system {
    border-color: rgba(148, 163, 184, 0.24);
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.72);
}

#units .sok-tactical-map {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background:
        linear-gradient(rgba(34, 197, 94, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 26% 34%, rgba(34, 197, 94, 0.16), transparent 16%),
        radial-gradient(circle at 74% 62%, rgba(59, 130, 246, 0.14), transparent 18%), rgba(2, 6, 23, 0.72);
    background-size:
        32px 32px,
        32px 32px,
        auto,
        auto,
        auto;
}

#units .sok-map-node {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #86efac;
    box-shadow:
        0 0 0 7px rgba(34, 197, 94, 0.12),
        0 0 24px rgba(34, 197, 94, 0.48);
}

#units .sok-map-node.node-a {
    left: 23%;
    top: 31%;
}
#units .sok-map-node.node-b {
    left: 64%;
    top: 42%;
    background: #38bdf8;
    box-shadow:
        0 0 0 7px rgba(56, 189, 248, 0.12),
        0 0 24px rgba(56, 189, 248, 0.42);
}
#units .sok-map-node.node-c {
    left: 48%;
    top: 71%;
    background: #facc15;
    box-shadow:
        0 0 0 7px rgba(250, 204, 21, 0.12),
        0 0 24px rgba(250, 204, 21, 0.38);
}

#units .sok-map-route {
    position: absolute;
    height: 2px;
    border-radius: 999px;
    background: rgba(134, 239, 172, 0.52);
    transform-origin: left center;
}

#units .sok-map-route.route-a {
    left: 25%;
    top: 35%;
    width: 42%;
    transform: rotate(12deg);
}
#units .sok-map-route.route-b {
    left: 49%;
    top: 70%;
    width: 26%;
    transform: rotate(-42deg);
    background: rgba(56, 189, 248, 0.48);
}

#units .sok-map-label {
    position: absolute;
    left: 16px;
    bottom: 14px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(2, 6, 23, 0.72);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
}

#units .sok-quick-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#units .sok-quick-stats div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
}

#units .sok-quick-stats strong {
    font-size: 24px;
    line-height: 1;
    color: #dcfce7;
}

#units .sok-quick-stats span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-measure-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .sok-measure-chips span {
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(15, 23, 42, 0.58);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
}

#units .sok-overview-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#units .sok-overview-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-overview-section-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .sok-overview-section-title h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-overview-section-title p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-overview-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-overview-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.5);
    background: rgba(15, 23, 42, 0.54);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#units .sok-overview-entry:hover {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(15, 23, 42, 0.72);
    transform: translateY(-1px);
}

#units .sok-overview-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-overview-entry-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#units .sok-overview-entry-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .sok-overview-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .sok-overview-entry-actions button {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .sok-overview-entry-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-overview-entry-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-overview-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-overview-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-overview-field textarea {
    min-height: 96px;
    resize: vertical;
}

#units .sok-guides-shell {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

#units .sok-guides-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-guides-list-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 4px 10px;
}

#units .sok-guides-list-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-guides-list-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-guides-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-guide-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.58);
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

#units .sok-guide-item:hover {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(96, 165, 250, 0.28);
    transform: translateY(-1px);
}

#units .sok-guide-item.active {
    background: rgba(30, 64, 175, 0.22);
    border-color: rgba(96, 165, 250, 0.32);
}

#units .sok-guide-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-guide-item span {
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-guides-add {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-guides-viewer {
    display: flex;
    flex-direction: column;
    min-height: 620px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.96);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

#units .sok-guides-empty {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

#units .sok-guides-document {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 30px;
    gap: 18px;
}

#units .sok-guides-document-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#units .sok-guides-document-actions button {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-guides-document-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-guides-document-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-guides-document-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.42);
}

#units .sok-guides-document-header h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-guides-document-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-guides-document-content {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .sok-guides-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .sok-guides-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-guides-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-guides-field input,
#units .sok-guides-field textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.56);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 12px;
    outline: none;
}

#units .sok-guides-field textarea {
    min-height: 260px;
    resize: vertical;
}

#units .sok-guides-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-guides-command-header .sok-guides-add {
    align-self: flex-start;
}

#units .sok-guides-page .sok-guides-shell {
    grid-template-columns: minmax(250px, 0.78fr) minmax(0, 2.1fr);
}

#units .sok-guides-page .sok-guides-list {
    gap: 12px;
    border-radius: 24px;
    border-color: rgba(30, 41, 59, 0.86);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94)),
        radial-gradient(circle at 85% 0%, rgba(14, 165, 233, 0.08), transparent 30%);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#units .sok-guides-page .sok-guide-item {
    gap: 7px;
    border-color: rgba(51, 65, 85, 0.58);
    background: rgba(2, 6, 23, 0.34);
}

#units .sok-guides-page .sok-guide-item.active {
    background:
        linear-gradient(90deg, rgba(12, 74, 110, 0.32), rgba(15, 23, 42, 0.68)),
        radial-gradient(circle at 2% 50%, rgba(14, 165, 233, 0.16), transparent 28%);
    border-color: rgba(56, 189, 248, 0.36);
    box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.78);
}

#units .sok-guide-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

#units .sok-guide-item-meta small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7dd3fc;
}

#units .sok-guides-page .sok-guides-viewer {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94)),
        radial-gradient(circle at 95% 0%, rgba(34, 197, 94, 0.07), transparent 35%);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#units .sok-guides-page .sok-guides-document {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.7fr);
    align-items: start;
    padding: 24px;
}

#units .sok-guides-page .sok-guides-document-actions,
#units .sok-guides-page .sok-guides-editor {
    grid-column: 1 / -1;
}

#units .sok-guides-content-card,
#units .sok-guides-info-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(2, 6, 23, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#units .sok-guides-content-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-guides-content-section p {
    margin: 0;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.42);
    background: rgba(15, 23, 42, 0.54);
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.85;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#units .sok-guides-info-panel h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-guides-info-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-guides-info-grid div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(15, 23, 42, 0.52);
    min-width: 0;
}

#units .sok-guides-info-grid strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #7dd3fc;
}

#units .sok-guides-info-grid span {
    font-size: 13px;
    line-height: 1.5;
    color: #dbeafe;
    overflow-wrap: anywhere;
}

#units .sok-most-wanted-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-most-wanted-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(127, 29, 29, 0.48);
    background:
        radial-gradient(circle at 78% 24%, rgba(220, 38, 38, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-most-wanted-header h2 {
    margin: 4px 0 6px;
    font-size: 34px;
    line-height: 1.1;
    color: #f8fafc;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#units .sok-most-wanted-header p {
    margin: 0;
    max-width: 620px;
    font-size: 14px;
    line-height: 1.7;
    color: #cbd5e1;
}

#units .sok-most-wanted-alert {
    align-self: flex-start;
    padding: 10px 13px;
    border-radius: 12px;
    border: 1px solid rgba(250, 204, 21, 0.36);
    background: rgba(113, 63, 18, 0.22);
    color: #fef3c7;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

#units .sok-most-wanted-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

#units .sok-most-wanted-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 360px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(127, 29, 29, 0.52);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#units .sok-most-wanted-card::before {
    content: 'WANTED';
    position: absolute;
    right: -28px;
    top: 24px;
    padding: 5px 46px;
    background: rgba(153, 27, 27, 0.88);
    color: #fee2e2;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
    transform: rotate(32deg);
}

#units .sok-most-wanted-photo {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px dashed rgba(148, 163, 184, 0.34);
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px), rgba(2, 6, 23, 0.68);
    background-size:
        22px 22px,
        22px 22px,
        auto;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#units .sok-most-wanted-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13px;
}

#units .sok-most-wanted-image-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border-radius: 11px;
    border: 1px solid rgba(250, 204, 21, 0.32);
    background: rgba(113, 63, 18, 0.2);
    color: #fef3c7;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

#units .sok-most-wanted-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#units .sok-most-wanted-priority {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(250, 204, 21, 0.42);
    background: rgba(113, 63, 18, 0.26);
    color: #fde68a;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

#units .sok-most-wanted-bounty {
    font-size: 12px;
    font-weight: 900;
    color: #fbbf24;
}

#units .sok-most-wanted-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    color: #f8fafc;
}

#units .sok-most-wanted-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
}

#units .sok-most-wanted-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-most-wanted-actions button,
#units .sok-most-wanted-form-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .sok-most-wanted-actions button.primary,
#units .sok-most-wanted-form-actions button.primary {
    background: rgba(153, 27, 27, 0.28);
    border-color: rgba(248, 113, 113, 0.42);
    color: #fee2e2;
}

#units .sok-most-wanted-actions button.subtle-danger,
#units .sok-most-wanted-form-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-most-wanted-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(127, 29, 29, 0.42);
    background: rgba(15, 23, 42, 0.68);
}

#units .sok-most-wanted-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

#units .sok-most-wanted-field.full,
#units .sok-most-wanted-form-actions {
    grid-column: 1 / -1;
}

#units .sok-most-wanted-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fca5a5;
}

#units .sok-most-wanted-field input,
#units .sok-most-wanted-field select,
#units .sok-most-wanted-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
}

#units .sok-most-wanted-field textarea {
    min-height: 105px;
    resize: vertical;
}

#units .sok-most-wanted-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-most-wanted-empty {
    padding: 22px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.42);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

#units .sok-most-wanted-sql {
    white-space: pre-wrap;
    text-align: left;
}

#units .sok-most-wanted-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid rgba(51, 65, 85, 0.52);
}

#units .sok-most-wanted-info span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-most-wanted-links {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    padding-top: 10px;
}

#units .sok-most-wanted-link {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #dbeafe;
    font-size: 0.82rem;
}

#units .sok-most-wanted-link strong {
    color: #fbbf24;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

#units .sok-files-shell {
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

#units .sok-routes-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: start;
}

#units .sok-routes-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(245, 158, 11, 0.22);
    background:
        linear-gradient(180deg, rgba(10, 18, 32, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 94% 0, rgba(245, 158, 11, 0.12), transparent 28%);
    box-shadow:
        0 18px 40px rgba(2, 6, 23, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    box-sizing: border-box;
}

#units .sok-routes-sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

#units .sok-routes-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-routes-sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-routes-add {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.34);
    background: rgba(120, 53, 15, 0.22);
    color: #fef3c7;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

#units .sok-routes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

#units .sok-routes-table {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 17px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(2, 6, 23, 0.44);
}

#units .sok-routes-table-head,
#units .sok-routes-table-row {
    display: grid;
    grid-template-columns: 1.15fr 0.9fr 0.9fr 0.86fr 0.72fr 0.72fr 0.55fr;
    gap: 10px;
    align-items: center;
}

#units .sok-routes-table-head {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(15, 23, 42, 0.74);
    color: #94a3b8;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

#units .sok-routes-table-row {
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.38);
    background: transparent;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        background 0.18s ease,
        color 0.18s ease;
}

#units .sok-routes-table-row:last-child {
    border-bottom: 0;
}

#units .sok-routes-table-row:hover,
#units .sok-routes-table-row.active {
    background: rgba(245, 158, 11, 0.09);
    color: #f8fafc;
}

#units .sok-routes-table-row strong {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: #f8fafc;
}

#units .sok-routes-row-actions span {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.24);
    background: rgba(120, 53, 15, 0.14);
    color: #fde68a;
    font-size: 10px;
    font-weight: 900;
}

#units .sok-route-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#units .sok-route-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.18);
    transform: translateY(-1px);
}

#units .sok-route-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-route-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-routes-viewer {
    width: 100%;
    min-height: 520px;
    padding: 20px 22px;
    border-radius: 24px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.28);
    box-sizing: border-box;
}

#units .sok-routes-empty {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
}

#units .sok-routes-document {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-route-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 16px;
    align-items: stretch;
}

#units .sok-route-detail-card,
#units .sok-route-map-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#units .sok-route-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#units .sok-route-detail-list div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.5);
    background: rgba(2, 6, 23, 0.34);
    min-width: 0;
}

#units .sok-route-detail-list strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-route-detail-list span {
    font-size: 13px;
    line-height: 1.55;
    color: #e2e8f0;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#units .sok-route-map-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-route-map-head h3 {
    margin: 3px 0 0;
    font-size: 19px;
    line-height: 1.25;
    color: #f8fafc;
}

#units .sok-route-map {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background:
        linear-gradient(rgba(245, 158, 11, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 158, 11, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 22% 68%, rgba(245, 158, 11, 0.16), transparent 18%),
        radial-gradient(circle at 76% 28%, rgba(34, 197, 94, 0.12), transparent 16%), rgba(2, 6, 23, 0.72);
    background-size:
        34px 34px,
        34px 34px,
        auto,
        auto,
        auto;
}

#units .sok-route-map-point {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #facc15;
    box-shadow:
        0 0 0 7px rgba(245, 158, 11, 0.13),
        0 0 26px rgba(245, 158, 11, 0.48);
    z-index: 2;
}

#units .sok-route-map-point.start {
    left: 18%;
    top: 67%;
}
#units .sok-route-map-point.mid {
    left: 48%;
    top: 43%;
    background: #fb923c;
}
#units .sok-route-map-point.end {
    left: 78%;
    top: 28%;
    background: #22c55e;
    box-shadow:
        0 0 0 7px rgba(34, 197, 94, 0.13),
        0 0 26px rgba(34, 197, 94, 0.44);
}

#units .sok-route-map-line {
    position: absolute;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #facc15);
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.32);
    transform-origin: left center;
    z-index: 1;
}

#units .sok-route-map-line.line-a {
    left: 20%;
    top: 68%;
    width: 36%;
    transform: rotate(-35deg);
}
#units .sok-route-map-line.line-b {
    left: 49%;
    top: 45%;
    width: 36%;
    transform: rotate(-21deg);
}

#units .sok-route-map-label {
    position: absolute;
    max-width: 42%;
    padding: 7px 10px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(2, 6, 23, 0.76);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-route-map-label.start {
    left: 9%;
    bottom: 18px;
}
#units .sok-route-map-label.end {
    right: 8%;
    top: 18px;
}

#units .sok-routes-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-routes-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-routes-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-routes-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-routes-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

#units .sok-routes-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-routes-heading h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-routes-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-routes-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: min(320px, 100%);
}

#units .sok-routes-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.42);
    background: rgba(2, 6, 23, 0.24);
}

#units .sok-routes-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-routes-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-routes-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-routes-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-routes-field.full {
    grid-column: 1 / -1;
}

#units .sok-routes-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-routes-field input,
#units .sok-routes-field textarea,
#units .sok-routes-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.6;
    box-sizing: border-box;
    outline: none;
}

#units .sok-routes-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-leadership-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-leadership-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

#units .sok-leadership-header h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-leadership-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-leadership-command-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(14, 165, 233, 0.22);
    background:
        radial-gradient(circle at 88% 12%, rgba(34, 197, 94, 0.12), transparent 32%),
        linear-gradient(135deg, rgba(10, 18, 32, 0.96), rgba(2, 6, 23, 0.98));
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#units .sok-leadership-command-header h2 {
    margin: 6px 0 4px;
    font-size: 28px;
    line-height: 1.15;
    color: #f8fafc;
    letter-spacing: 0;
}

#units .sok-leadership-command-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #93c5fd;
}

#units .sok-leadership-command-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-leadership-stat-card,
#units .sok-leadership-command-card {
    border: 1px solid rgba(30, 41, 59, 0.86);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94)),
        radial-gradient(circle at 90% 0%, rgba(14, 165, 233, 0.08), transparent 32%);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

#units .sok-leadership-stat-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 106px;
    padding: 17px 18px;
    border-radius: 20px;
}

#units .sok-leadership-stat-card span {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dd3fc;
}

#units .sok-leadership-stat-card strong {
    font-size: 28px;
    line-height: 1;
    color: #f8fafc;
}

#units .sok-leadership-stat-card small {
    margin-top: auto;
    font-size: 11px;
    line-height: 1.45;
    color: #94a3b8;
}

#units .sok-leadership-command-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.25fr) minmax(230px, 0.85fr);
    gap: 18px;
    align-items: stretch;
}

#units .sok-leadership-command-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border-radius: 22px;
}

#units .sok-leadership-command-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.46);
}

#units .sok-leadership-command-card-head h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-leadership-command-card-head p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-leadership-personnel-list,
#units .sok-leadership-operations-list,
#units .sok-leadership-resources-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-leadership-personnel-row,
#units .sok-leadership-operation-row,
#units .sok-leadership-resource-row {
    display: grid;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.52);
    background: rgba(2, 6, 23, 0.38);
    min-width: 0;
}

#units .sok-leadership-personnel-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

#units .sok-leadership-operation-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

#units .sok-leadership-resource-row {
    grid-template-columns: minmax(0, 1fr) minmax(86px, 0.45fr);
}

#units .sok-leadership-personnel-main,
#units .sok-leadership-operation-main,
#units .sok-leadership-resource-main {
    min-width: 0;
}

#units .sok-leadership-personnel-main strong,
#units .sok-leadership-operation-main strong,
#units .sok-leadership-resource-main strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.35;
    color: #f8fafc;
}

#units .sok-leadership-personnel-main span,
#units .sok-leadership-operation-main span,
#units .sok-leadership-resource-main span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-leadership-resource-chip {
    border: 1px solid rgba(14, 165, 233, 0.34);
    background: rgba(12, 74, 110, 0.22);
    color: #bae6fd;
}

#units .sok-leadership-resource-meter {
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.84);
    overflow: hidden;
    border: 1px solid rgba(51, 65, 85, 0.5);
}

#units .sok-leadership-resource-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.86), rgba(34, 197, 94, 0.78));
}

#units .sok-leadership-management-grid {
    margin-top: 2px;
}

#units .sok-leadership-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

#units .sok-leadership-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-leadership-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

#units .sok-leadership-card-head h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-leadership-card-head p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-leadership-card-head button,
#units .sok-leadership-entry-actions button,
#units .sok-leadership-situation-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-leadership-card-head button.primary,
#units .sok-leadership-entry-actions button.primary,
#units .sok-leadership-situation-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-leadership-card-head button.subtle-danger,
#units .sok-leadership-entry-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-leadership-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .sok-leadership-entry,
#units .sok-leadership-situation,
#units .sok-leadership-roles-note,
#units .sok-leadership-role-item {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-leadership-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-leadership-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-leadership-entry strong {
    font-size: 15px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-leadership-entry p,
#units .sok-leadership-situation p,
#units .sok-leadership-roles-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
}

#units .sok-leadership-entry-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-leadership-entry-actions,
#units .sok-leadership-situation-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-leadership-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-leadership-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #93c5fd;
}

#units .sok-leadership-field input,
#units .sok-leadership-field textarea,
#units .sok-leadership-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}

#units .sok-leadership-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-leadership-empty {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.32);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-leadership-feedback {
    display: none;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
    color: #dcfce7;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-leadership-feedback.visible {
    display: block;
}

#units .sok-leadership-roles {
    gap: 16px;
}

#units .sok-leadership-role-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-leadership-role-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-leadership-role-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-leadership-role-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-family-list-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-family-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

#units .sok-family-list-header-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-family-list-header-main h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-family-list-header-main p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-family-list-add,
#units .sok-family-list-card-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-family-list-card-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-family-list-card-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-family-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

#units .sok-family-list-empty,
#units .sok-family-list-card {
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-family-list-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
}

#units .sok-family-list-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .sok-family-list-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-family-list-card-identity {
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
}

#units .sok-family-list-image {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(51, 65, 85, 0.64);
    background: rgba(15, 23, 42, 0.78);
    box-shadow: inset 0 0 18px rgba(34, 197, 94, 0.08);
}

#units .sok-family-list-image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbf7d0;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: 0.08em;
    background:
        linear-gradient(135deg, rgba(20, 83, 45, 0.24), rgba(2, 6, 23, 0.88)),
        repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.08) 0 1px, transparent 1px 12px);
}

#units .sok-family-list-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

#units .sok-family-list-card-title h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-family-list-card-title p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-family-list-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-family-list-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-family-list-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-family-list-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-family-list-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #cbd5e1;
}

#units .sok-family-list-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-family-list-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-family-list-field.full {
    grid-column: 1 / -1;
}

#units .sok-family-list-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-family-list-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-family-list-field input,
#units .sok-family-list-field textarea,
#units .sok-family-list-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}

#units .sok-family-list-field textarea {
    min-height: 110px;
    resize: vertical;
}

#units .sok-companies-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-companies-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

#units .sok-companies-header-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-companies-header-main h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-companies-header-main p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-companies-add,
#units .sok-companies-card-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-companies-card-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-companies-card-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-companies-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

#units .sok-companies-empty,
#units .sok-companies-card {
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-companies-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
}

#units .sok-companies-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .sok-companies-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-companies-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .sok-companies-card-title h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-companies-card-title p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-companies-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-companies-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-companies-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-companies-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-companies-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-companies-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #cbd5e1;
}

#units .sok-companies-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-companies-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-companies-field.full {
    grid-column: 1 / -1;
}

#units .sok-companies-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-companies-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-companies-field input,
#units .sok-companies-field textarea,
#units .sok-companies-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}

#units .sok-companies-field textarea {
    min-height: 110px;
    resize: vertical;
}

#units .sok-company-intel-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    grid-column: 1 / -1;
}

#units .sok-company-table-wrap {
    overflow-x: auto;
    border-radius: 20px;
    border: 1px solid rgba(14, 165, 233, 0.24);
    background:
        linear-gradient(180deg, rgba(8, 16, 31, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 94% 8%, rgba(56, 189, 248, 0.12), transparent 30%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-company-table-head,
#units .sok-company-table-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.25fr) minmax(130px, 0.9fr) minmax(120px, 0.82fr) minmax(
            130px,
            0.92fr
        ) minmax(96px, 0.58fr) minmax(104px, 0.62fr) minmax(90px, 0.48fr);
    align-items: center;
    gap: 12px;
    min-width: 920px;
}

#units .sok-company-table-head {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(15, 23, 42, 0.62);
    color: #7dd3fc;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#units .sok-company-table-row {
    width: 100%;
    padding: 15px 16px;
    border: 0;
    border-bottom: 1px solid rgba(30, 41, 59, 0.72);
    background: transparent;
    color: #e2e8f0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

#units .sok-company-table-row:last-child {
    border-bottom: 0;
}

#units .sok-company-table-row:hover,
#units .sok-company-table-row.active {
    background:
        linear-gradient(90deg, rgba(14, 165, 233, 0.14), rgba(15, 23, 42, 0.62)),
        radial-gradient(circle at 2% 50%, rgba(56, 189, 248, 0.16), transparent 28%);
    box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.78);
}

#units .sok-company-table-row:hover {
    transform: translateY(-1px);
}

#units .sok-company-table-primary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#units .sok-company-table-primary strong {
    font-size: 14px;
    line-height: 1.35;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-company-table-primary span,
#units .sok-company-table-cell {
    font-size: 12px;
    line-height: 1.45;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-company-table-actions {
    display: flex;
    justify-content: flex-end;
}

#units .sok-company-table-actions span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-company-detail-layout {
    min-width: 0;
}

#units .sok-company-card {
    position: relative;
    width: 100%;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    border-radius: 18px;
    border-color: rgba(14, 165, 233, 0.22);
    background:
        linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 86% 12%, rgba(56, 189, 248, 0.12), transparent 30%);
    transition:
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#units .sok-company-card:hover,
#units .sok-company-card.active {
    border-color: rgba(56, 189, 248, 0.38);
    transform: translateY(-1px);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(56, 189, 248, 0.08);
}

#units .sok-company-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #38bdf8, rgba(56, 189, 248, 0.08));
    opacity: 0;
}

#units .sok-company-card.active::before {
    opacity: 1;
}

#units .sok-company-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

#units .sok-company-risk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.28);
    background: rgba(120, 53, 15, 0.18);
    color: #fef3c7;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

#units .sok-company-dossier-viewer {
    min-width: 0;
}

#units .sok-company-dossier {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(14, 165, 233, 0.24);
    background:
        linear-gradient(180deg, rgba(8, 16, 31, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 90% 7%, rgba(56, 189, 248, 0.12), transparent 32%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-company-dossier-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-company-dossier-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-company-dossier-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-company-dossier-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-company-dossier-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(14, 165, 233, 0.24);
    background:
        linear-gradient(135deg, rgba(12, 74, 110, 0.28), rgba(2, 6, 23, 0.82) 58%),
        radial-gradient(circle at 88% 14%, rgba(59, 130, 246, 0.14), transparent 30%);
}

#units .sok-company-dossier-head h3 {
    margin: 4px 0 0;
    font-size: 28px;
    line-height: 1.12;
    color: #f8fafc;
}

#units .sok-company-dossier-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

#units .sok-company-dossier-badges span,
#units .sok-company-file-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 900;
}

#units .sok-company-dossier-badges .risk {
    border-color: rgba(251, 191, 36, 0.28);
    background: rgba(120, 53, 15, 0.18);
    color: #fef3c7;
}

#units .sok-company-file-id {
    flex-direction: column;
    align-items: flex-end;
    border-radius: 16px;
    max-width: 210px;
}

#units .sok-company-file-id span {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-company-file-id strong {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f8fafc;
}

#units .sok-company-facts,
#units .sok-company-risk-grid,
#units .sok-company-link-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#units .sok-company-facts div,
#units .sok-company-risk-grid div,
#units .sok-company-link-grid div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 13px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-company-facts strong,
#units .sok-company-risk-grid em {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    font-style: normal;
}

#units .sok-company-facts span,
#units .sok-company-risk-grid strong,
#units .sok-company-link-grid div {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#units .sok-company-dossier-grid {
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    grid-template-areas:
        'profile risk'
        'links activity';
    gap: 14px;
}

#units .sok-company-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    min-width: 0;
}

#units .sok-company-panel.profile {
    grid-area: profile;
}
#units .sok-company-panel.risk {
    grid-area: risk;
}
#units .sok-company-panel.links {
    grid-area: links;
}
#units .sok-company-panel.activity {
    grid-area: activity;
}

#units .sok-company-panel > span {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dd3fc;
}

#units .sok-company-panel h4 {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
    color: #f8fafc;
}

#units .sok-company-panel p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .sok-company-link-grid div {
    justify-content: center;
    min-height: 48px;
    font-weight: 800;
}

#units .sok-company-activity-empty {
    padding: 14px;
    border-radius: 15px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.38);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-company-detail-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(14, 165, 233, 0.24);
    background:
        linear-gradient(180deg, rgba(8, 16, 31, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 92% 8%, rgba(56, 189, 248, 0.12), transparent 32%);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-company-detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-company-detail-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-company-detail-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-company-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.55fr);
    gap: 16px;
    align-items: stretch;
}

#units .sok-company-profile-panel,
#units .sok-company-risk-panel {
    min-width: 0;
    border-radius: 20px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#units .sok-company-profile-panel {
    display: grid;
    grid-template-columns: minmax(190px, 0.44fr) minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
}

#units .sok-company-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 228px;
    border-radius: 18px;
    border: 1px solid rgba(56, 189, 248, 0.24);
    background:
        linear-gradient(135deg, rgba(12, 74, 110, 0.24), rgba(2, 6, 23, 0.82)),
        repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.08) 0 1px, transparent 1px 13px);
    color: #bae6fd;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: inset 0 0 34px rgba(56, 189, 248, 0.08);
}

#units .sok-company-profile-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

#units .sok-company-profile-copy > span,
#units .sok-company-risk-panel > span {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dd3fc;
}

#units .sok-company-profile-copy h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #f8fafc;
    overflow-wrap: anywhere;
}

#units .sok-company-detail-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#units .sok-company-detail-facts div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-company-detail-facts strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-company-detail-facts span {
    font-size: 13px;
    line-height: 1.45;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-company-detail-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .sok-company-detail-text.muted {
    color: #94a3b8;
}

#units .sok-company-risk-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

#units .sok-company-risk-score {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-company-risk-score strong {
    font-size: 30px;
    line-height: 1;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
}

#units .sok-company-risk-bar {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(51, 65, 85, 0.6);
}

#units .sok-company-risk-bar i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #facc15 45%, #f97316 72%, #ef4444);
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.28);
}

#units .sok-company-risk-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#units .sok-company-risk-meta div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-company-risk-meta strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-company-risk-meta span {
    font-size: 12px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-razzia-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#units .sok-razzia-tab-group {
    position: relative;
    display: flex;
    align-items: center;
}

#units .sok-razzia-tab-group .sok-tab {
    display: inline-flex;
    align-items: center;
}

#units .sok-razzia-menu-dropdown {
    position: absolute;
    top: 44px;
    left: 0;
    min-width: 168px;
    max-width: 210px;
    display: none;
    flex-direction: column;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.88);
    background: rgba(2, 6, 23, 0.96);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
    z-index: 3;
}

#units .sok-razzia-tab-group.is-open .sok-razzia-menu-dropdown {
    display: flex;
}

#units .sok-razzia-menu-dropdown button {
    padding: 10px 12px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: #dbeafe;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

#units .sok-razzia-menu-dropdown button:hover {
    background: rgba(15, 23, 42, 0.82);
}

#units .sok-razzia-content {
    display: flex;
    flex-direction: column;
}

#units .sok-razzia-panel {
    padding: 0;
}

#units .sok-razzia-panel h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-raid-request-shell {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 18px;
    min-height: 560px;
}

#units .sok-raid-request-sidebar,
#units .sok-raid-request-viewer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-raid-request-sidebar-header h3,
#units .sok-raid-request-document-header h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-raid-request-sidebar-header p,
#units .sok-raid-request-document-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-raid-request-add,
#units .sok-raid-request-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-raid-request-actions button.primary,
#units .sok-raid-request-add {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-raid-request-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-raid-request-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-raid-request-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 15px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.5);
    background: rgba(2, 6, 23, 0.42);
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
}

#units .sok-raid-request-item.active {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(30, 64, 175, 0.18);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18);
}

#units .sok-raid-request-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-raid-request-item span {
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-raid-request-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 24px;
    border-radius: 18px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.32);
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.8;
}

#units .sok-raid-request-document {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

#units .sok-raid-request-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-raid-request-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-raid-request-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(2, 6, 23, 0.36);
}

#units .sok-raid-request-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-raid-request-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-raid-request-content {
    margin: 0;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(2, 6, 23, 0.34);
    color: #dbeafe;
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-wrap;
}

#units .sok-raid-request-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .sok-raid-request-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-raid-request-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-raid-request-field input,
#units .sok-raid-request-field textarea,
#units .sok-raid-request-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}

#units .sok-raid-request-field textarea {
    min-height: 260px;
    resize: vertical;
}

#units #sok-razzia-request .sok-raid-request-shell {
    grid-template-columns: 1fr;
    gap: 18px;
}

#units #sok-razzia-request .sok-raid-request-sidebar {
    border-radius: 22px;
    border-color: rgba(127, 29, 29, 0.28);
    background:
        linear-gradient(180deg, rgba(10, 18, 32, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 88% 8%, rgba(239, 68, 68, 0.1), transparent 30%);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units #sok-razzia-request .sok-raid-request-sidebar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

#units #sok-investigation-request .sok-raid-request-shell {
    grid-template-columns: 1fr;
    gap: 18px;
}

#units #sok-investigation-request .sok-raid-request-sidebar {
    border-radius: 22px;
    border-color: rgba(14, 165, 233, 0.28);
    background:
        linear-gradient(180deg, rgba(10, 18, 32, 0.96), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.1), transparent 30%);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units #sok-investigation-request .sok-raid-request-sidebar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

#units .sok-raid-request-table {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(2, 6, 23, 0.34);
}

#units .sok-raid-request-table-head,
#units .sok-raid-request-table-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.25fr) minmax(130px, 0.8fr) minmax(135px, 0.76fr) minmax(
            100px,
            0.56fr
        ) minmax(120px, 0.62fr) minmax(90px, 0.46fr);
    align-items: center;
    gap: 12px;
    min-width: 860px;
}

#units .sok-raid-request-table-head {
    padding: 13px 15px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(15, 23, 42, 0.62);
    color: #fca5a5;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#units .sok-raid-request-table-row {
    width: 100%;
    padding: 14px 15px;
    border: 0;
    border-bottom: 1px solid rgba(30, 41, 59, 0.72);
    background: transparent;
    color: #e2e8f0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

#units .sok-raid-request-table-row:last-child {
    border-bottom: 0;
}

#units .sok-raid-request-table-row:hover,
#units .sok-raid-request-table-row.active {
    background:
        linear-gradient(90deg, rgba(127, 29, 29, 0.18), rgba(15, 23, 42, 0.62)),
        radial-gradient(circle at 2% 50%, rgba(239, 68, 68, 0.15), transparent 28%);
    box-shadow: inset 3px 0 0 rgba(248, 113, 113, 0.76);
}

#units .sok-raid-request-table-row:hover {
    transform: translateY(-1px);
}

#units .sok-raid-request-table-primary,
#units .sok-raid-request-table-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-raid-request-table-primary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .sok-raid-request-table-primary strong {
    font-size: 14px;
    line-height: 1.35;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-raid-request-table-primary span,
#units .sok-raid-request-table-cell {
    font-size: 12px;
    line-height: 1.45;
    color: #94a3b8;
}

#units .sok-raid-request-row-actions {
    display: flex;
    justify-content: flex-end;
}

#units .sok-raid-request-row-actions span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-raid-request-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 16px;
}

#units .sok-raid-request-detail-card,
#units .sok-raid-request-status-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    min-width: 0;
}

#units .sok-raid-request-detail-card h3,
#units .sok-raid-request-status-panel h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
    overflow-wrap: anywhere;
}

#units .sok-raid-request-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-raid-request-section strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fca5a5;
}

#units .sok-raid-request-section p {
    margin: 0;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(2, 6, 23, 0.34);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
}

#units .sok-raid-request-status-large {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 17px;
    border: 1px solid rgba(127, 29, 29, 0.28);
    background: rgba(127, 29, 29, 0.14);
}

#units .sok-raid-request-status-large span:first-child {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fecaca;
}

#units .sok-raid-request-status-large strong {
    font-size: 26px;
    line-height: 1.1;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
}

#units .sok-raid-request-side-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#units .sok-raid-request-side-meta div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-raid-request-side-meta strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-raid-request-side-meta span {
    font-size: 12px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-raid-planner-shell {
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
    gap: 18px;
}

#units .sok-raid-planner-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-raid-planner-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 4px 10px;
}

#units .sok-raid-planner-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-raid-planner-sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-raid-planner-add,
#units .sok-raid-planner-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-raid-planner-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-raid-planner-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-raid-planner-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-raid-planner-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
    color: #dbeafe;
    text-align: left;
    cursor: pointer;
}

#units .sok-raid-planner-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.18);
    transform: translateY(-1px);
}

#units .sok-raid-planner-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-raid-planner-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-raid-planner-viewer {
    min-height: 560px;
    padding: 20px 22px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

#units .sok-raid-planner-empty {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
}

#units .sok-raid-planner-document {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .sok-raid-planner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-raid-planner-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-raid-planner-header h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-raid-planner-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-raid-planner-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-raid-planner-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-raid-planner-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-raid-planner-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-raid-planner-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-raid-planner-field.full {
    grid-column: 1 / -1;
}

#units .sok-raid-planner-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-raid-planner-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-raid-planner-field input,
#units .sok-raid-planner-field textarea,
#units .sok-raid-planner-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}

#units .sok-raid-planner-field select {
    appearance: auto;
}

#units .sok-raid-planner-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-raid-planner-map {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-raid-planner-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-raid-planner-map-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

#units .sok-raid-planner-tool-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(2, 6, 23, 0.52);
}

#units .sok-raid-planner-tool-label {
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-raid-planner-map-header h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-raid-planner-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.76);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-raid-planner-upload input {
    display: none;
}

#units .sok-raid-planner-draw-toggle,
#units .sok-raid-planner-erase-toggle,
#units .sok-raid-planner-draw-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.76);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-raid-planner-draw-toggle.is-active {
    background: rgba(185, 28, 28, 0.28);
    border-color: rgba(248, 113, 113, 0.42);
    color: #fef2f2;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12);
}

#units .sok-raid-planner-erase-toggle.is-active {
    background: rgba(180, 83, 9, 0.24);
    border-color: rgba(251, 191, 36, 0.44);
    color: #fef3c7;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.12);
}

#units .sok-raid-planner-draw-clear[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

#units .sok-raid-planner-color-option {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: transparent;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(2, 6, 23, 0.78);
}

#units .sok-raid-planner-color-option.is-active {
    box-shadow:
        0 0 0 2px rgba(147, 197, 253, 0.3),
        inset 0 0 0 2px rgba(2, 6, 23, 0.82);
    border-color: rgba(191, 219, 254, 0.72);
    transform: scale(1.05);
}

#units .sok-raid-planner-width-select {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
}

#units .sok-raid-planner-map-preview {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.36);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

#units .sok-raid-planner-map-canvas {
    position: relative;
    width: 100%;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

#units .sok-raid-planner-map-canvas.is-drawing {
    cursor: crosshair;
}

#units .sok-raid-planner-map-canvas.is-erasing {
    cursor: not-allowed;
}

#units .sok-raid-planner-map-canvas:not(.is-drawing) {
    cursor: default;
}

#units .sok-raid-planner-map-preview img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    background: #020617;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

#units .sok-raid-planner-drawing-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

#units .sok-raid-planner-map-canvas.is-erasing .sok-raid-planner-drawing-layer {
    pointer-events: auto;
}

#units .sok-raid-planner-drawing-line {
    fill: none;
    stroke: #93c5fd;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.96;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.62));
    pointer-events: none;
    transition:
        opacity 0.16s ease,
        filter 0.16s ease;
}

#units .sok-raid-planner-map-canvas.is-erasing .sok-raid-planner-drawing-line {
    pointer-events: stroke;
    cursor: pointer;
}

#units .sok-raid-planner-map-canvas.is-erasing .sok-raid-planner-drawing-line:hover {
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) drop-shadow(0 0 10px rgba(248, 113, 113, 0.5));
}

#units .sok-raid-planner-draw-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
}

#units .sok-raid-planner-draw-status.is-active {
    border-color: rgba(248, 113, 113, 0.4);
    background: rgba(127, 29, 29, 0.24);
    color: #fee2e2;
}

#units .sok-raid-planner-draw-status.is-erase {
    border-color: rgba(251, 191, 36, 0.38);
    background: rgba(120, 53, 15, 0.24);
    color: #fef3c7;
}

#units .sok-raid-planner-marker {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.68);
    background: rgba(30, 64, 175, 0.88);
    color: #eff6ff;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    z-index: 3;
}

#units .sok-raid-planner-marker-wrap {
    position: absolute;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    z-index: 3;
}

#units .sok-raid-planner-marker.active {
    background: rgba(180, 83, 9, 0.94);
    border-color: rgba(253, 230, 138, 0.82);
    box-shadow:
        0 0 0 3px rgba(245, 158, 11, 0.18),
        0 10px 20px rgba(0, 0, 0, 0.32);
}

#units .sok-raid-planner-marker-label {
    position: absolute;
    left: 32px;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.82);
    background: rgba(2, 6, 23, 0.88);
    color: #f8fafc;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    transform: translateY(-50%);
}

#units .sok-raid-planner-marker-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-raid-planner-marker-panel h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-raid-planner-marker-panel p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-raid-planner-marker-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(2, 6, 23, 0.36);
}

#units .sok-raid-planner-marker-list h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-raid-planner-marker-list-empty {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-raid-planner-marker-list-item {
    display: grid;
    grid-template-columns: auto minmax(110px, 0.8fr) minmax(160px, 1.4fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 13px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(15, 23, 42, 0.56);
}

#units .sok-raid-planner-marker-list-item.active {
    border-color: rgba(253, 230, 138, 0.52);
    background: rgba(120, 53, 15, 0.18);
}

#units .sok-raid-planner-marker-list-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.68);
    background: rgba(30, 64, 175, 0.82);
    color: #eff6ff;
    font-size: 12px;
    font-weight: 900;
}

#units .sok-raid-planner-marker-list-type {
    font-size: 12px;
    font-weight: 800;
    color: #bfdbfe;
}

#units .sok-raid-planner-marker-list-note {
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-raid-planner-marker-list-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#units .sok-raid-planner-marker-list-actions button {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.76);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .sok-raid-planner-marker-list-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-raid-planner-marker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .sok-raid-planner-marker-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-raid-planner-marker-field.full {
    grid-column: 1 / -1;
}

#units .sok-raid-planner-marker-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .sok-raid-planner-marker-field input,
#units .sok-raid-planner-marker-field textarea,
#units .sok-raid-planner-marker-field select {
    width: 100%;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.68);
    background: rgba(2, 6, 23, 0.78);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    box-sizing: border-box;
}

#units .sok-raid-planner-marker-field textarea {
    min-height: 110px;
    resize: vertical;
}

#units .sok-raid-planner-marker-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-raid-planner-marker-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-raid-planner-marker-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-raid-planner-marker-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-raid-planner-map-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.8;
    padding: 24px;
}

#units .sok-raid-planner-document.sok-raid-tactical-document {
    gap: 18px;
    background:
        radial-gradient(circle at 76% 0%, rgba(239, 68, 68, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.2), rgba(2, 6, 23, 0.04));
}

#units .sok-raid-tactical-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(127, 29, 29, 0.34);
    background:
        linear-gradient(135deg, rgba(127, 29, 29, 0.24), rgba(2, 6, 23, 0.88) 58%),
        radial-gradient(circle at 88% 18%, rgba(249, 115, 22, 0.12), transparent 30%);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-raid-tactical-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#units .sok-raid-tactical-title h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.14;
    color: #f8fafc;
    overflow-wrap: anywhere;
}

#units .sok-raid-tactical-title p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
}

#units .sok-raid-tactical-layout {
    display: grid;
    grid-template-columns: minmax(230px, 0.76fr) minmax(360px, 1.4fr) minmax(230px, 0.72fr);
    grid-template-areas:
        'details map resources'
        'notes notes resources';
    gap: 16px;
    align-items: stretch;
}

#units .sok-raid-tactical-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    min-width: 0;
}

#units .sok-raid-tactical-card.details {
    grid-area: details;
}
#units .sok-raid-tactical-card.map {
    grid-area: map;
}
#units .sok-raid-tactical-card.resources {
    grid-area: resources;
}
#units .sok-raid-tactical-card.notes {
    grid-area: notes;
}

#units .sok-raid-tactical-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-raid-tactical-card-head h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-raid-tactical-list,
#units .sok-raid-resource-grid,
#units .sok-raid-status-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#units .sok-raid-tactical-list div,
#units .sok-raid-resource-grid div,
#units .sok-raid-status-grid div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-raid-tactical-list strong,
#units .sok-raid-resource-grid strong,
#units .sok-raid-status-grid strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-raid-tactical-list span,
#units .sok-raid-resource-grid span,
#units .sok-raid-status-grid span {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-raid-tactical-map-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

#units .sok-raid-tactical-map-shell .sok-raid-planner-map-preview {
    min-height: 420px;
    height: 100%;
    border-style: solid;
    border-color: rgba(127, 29, 29, 0.34);
    background:
        radial-gradient(circle at 38% 42%, rgba(239, 68, 68, 0.1), transparent 22%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.92));
}

#units .sok-raid-tactical-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#units .sok-raid-tactical-toolbar button {
    padding: 8px 11px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.74);
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
    cursor: not-allowed;
}

#units .sok-raid-tactical-toolbar-note {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

#units .sok-raid-tactical-surface {
    position: relative;
    width: 100%;
    min-height: 420px;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.13), transparent 24%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.98));
    background-size:
        32px 32px,
        32px 32px,
        auto,
        auto;
}

#units .sok-raid-tactical-surface.has-map {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #020617;
}

#units .sok-raid-tactical-surface.has-map .sok-raid-planner-map-canvas {
    height: 100%;
    min-height: 420px;
}

#units .sok-raid-tactical-surface.has-map .sok-raid-planner-map-canvas img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

#units .sok-raid-tactical-surface::before,
#units .sok-raid-tactical-surface::after {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(96, 165, 250, 0.12);
    border-radius: 16px;
    pointer-events: none;
}

#units .sok-raid-tactical-surface.has-map::before,
#units .sok-raid-tactical-surface.has-map::after {
    z-index: 2;
}

#units .sok-raid-tactical-surface::after {
    inset: 50% 18px auto;
    border-width: 1px 0 0;
    border-radius: 0;
}

#units .sok-raid-tactical-empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
}

#units .sok-raid-tactical-empty strong {
    color: #dbeafe;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#units .sok-raid-tactical-surface-legend {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .sok-raid-tactical-surface-legend span {
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.62);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
}

#units .sok-raid-map-placeholder {
    position: relative;
    width: 100%;
    min-height: 420px;
    overflow: hidden;
    border-radius: 17px;
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 42% 48%, rgba(239, 68, 68, 0.18), transparent 24%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.96));
    background-size:
        32px 32px,
        32px 32px,
        auto,
        auto;
}

#units .sok-raid-map-zone {
    position: absolute;
    left: 35%;
    top: 29%;
    width: 28%;
    height: 30%;
    border: 2px solid rgba(248, 113, 113, 0.86);
    border-radius: 42% 58% 50% 48%;
    background: rgba(127, 29, 29, 0.22);
    box-shadow:
        0 0 34px rgba(239, 68, 68, 0.24),
        inset 0 0 22px rgba(248, 113, 113, 0.08);
    transform: rotate(-8deg);
}

#units .sok-raid-map-node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translate(-50%, -50%);
    color: #f8fafc;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-raid-map-node::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid rgba(254, 226, 226, 0.9);
    background: #ef4444;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.62);
}

#units .sok-raid-map-node.entry::before {
    background: #f97316;
}
#units .sok-raid-map-node.alt::before {
    background: #facc15;
}
#units .sok-raid-map-node.secure::before {
    background: #38bdf8;
}
#units .sok-raid-map-node.target {
    left: 49%;
    top: 43%;
}
#units .sok-raid-map-node.entry {
    left: 24%;
    top: 68%;
}
#units .sok-raid-map-node.alt {
    left: 73%;
    top: 70%;
}
#units .sok-raid-map-node.secure {
    left: 68%;
    top: 24%;
}

#units .sok-raid-notes-body {
    margin: 0;
    padding: 14px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
}

#units .sok-razzia-subpanel {
    display: none;
}

#units .sok-razzia-subpanel.active {
    display: block;
}

#units .sok-files-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .sok-files-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 4px 10px;
}

#units .sok-files-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-files-sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-files-add {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-file-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.58);
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

#units .sok-file-item:hover {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(96, 165, 250, 0.28);
    transform: translateY(-1px);
}

#units .sok-file-item.active {
    background: rgba(30, 64, 175, 0.22);
    border-color: rgba(96, 165, 250, 0.32);
}

#units .sok-file-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-files-viewer {
    display: flex;
    flex-direction: column;
    min-height: 620px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.96);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

#units .sok-files-empty {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

#units .sok-files-document {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 30px;
    gap: 18px;
}

#units .sok-files-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#units .sok-files-actions button {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-files-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-files-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-files-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.42);
}

#units .sok-files-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-files-heading h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .sok-files-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 14px;
}

#units .sok-files-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .sok-files-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-files-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-files-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
    white-space: pre-wrap;
}

#units .sok-files-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .sok-files-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-files-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-files-field input,
#units .sok-files-field textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.56);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 12px;
    outline: none;
}

#units .sok-files-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-files-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 2px;
}

#units .sok-files-tab {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-files-tab.active {
    background: rgba(30, 64, 175, 0.22);
    border-color: rgba(96, 165, 250, 0.32);
    color: #eff6ff;
}

#units .sok-files-tab-panels {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .sok-files-tab-panel {
    display: none;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-files-tab-panel.active {
    display: block;
}

#units .sok-files-tab-panel h3 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-files-tab-panel p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-file-entries-shell {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

#units .sok-file-entries-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-file-entries-add {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-entry-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.56);
    background: rgba(2, 6, 23, 0.42);
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

#units .sok-file-entry-item:hover {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(96, 165, 250, 0.28);
}

#units .sok-file-entry-item.active {
    background: rgba(30, 64, 175, 0.18);
    border-color: rgba(96, 165, 250, 0.34);
}

#units .sok-file-entry-item strong {
    font-size: 13px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-entry-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-file-entry-empty {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.32);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-file-entry-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.56);
    background: rgba(2, 6, 23, 0.38);
}

#units .sok-file-entry-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-entry-detail-header h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-entry-detail-header p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-file-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

#units .sok-file-entry-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-file-entry-field.full {
    grid-column: 1 / -1;
}

#units .sok-file-entry-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-entry-field input,
#units .sok-file-entry-field textarea,
#units .sok-file-entry-field select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 11px;
    outline: none;
}

#units .sok-file-entry-field textarea {
    min-height: 140px;
    resize: vertical;
}

#units .sok-file-entry-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-file-entry-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-entry-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-file-entry-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-file-entry-attachments {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid rgba(51, 65, 85, 0.34);
}

#units .sok-file-entry-attachment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-entry-attachment-head h5 {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-entry-attachment-upload {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-entry-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

#units .sok-file-entry-attachment-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-file-entry-attachment-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: rgba(2, 6, 23, 0.58);
}

#units .sok-file-entry-attachment-card strong {
    font-size: 12px;
    line-height: 1.4;
    color: #e2e8f0;
    word-break: break-word;
}

#units .sok-file-entry-attachment-card span {
    font-size: 11px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-file-entry-attachment-actions {
    display: flex;
    gap: 8px;
}

#units .sok-file-entry-attachment-actions button {
    flex: 1;
    padding: 7px 9px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

#units .sok-file-evidence-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px solid rgba(51, 65, 85, 0.34);
}

#units .sok-file-evidence-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-evidence-head h5 {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-evidence-head p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-file-evidence-add {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-evidence-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-file-evidence-empty {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.32);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-file-evidence-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.58);
}

#units .sok-file-evidence-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-evidence-card-header strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-evidence-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-file-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

#units .sok-file-evidence-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-file-evidence-field.full {
    grid-column: 1 / -1;
}

#units .sok-file-evidence-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-evidence-field input,
#units .sok-file-evidence-field textarea,
#units .sok-file-evidence-field select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 11px;
    outline: none;
}

#units .sok-file-evidence-field textarea {
    min-height: 110px;
    resize: vertical;
}

#units .sok-file-evidence-file {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.64);
    background: rgba(2, 6, 23, 0.28);
}

#units .sok-file-evidence-file span {
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-file-evidence-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .sok-file-evidence-preview img {
    display: block;
    max-width: 220px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    object-fit: cover;
    background: #0f172a;
}

#units .sok-file-evidence-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-file-evidence-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-evidence-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-file-evidence-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-file-members-shell {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

#units .sok-file-members-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-file-members-add {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#units .sok-file-member-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 13px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.8);
    color: #bfdbfe;
    font-size: 13px;
    font-weight: 900;
}

#units .sok-file-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#units .sok-file-member-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

#units .sok-file-member-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.18);
    transform: translateY(-1px);
}

#units .sok-file-member-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-member-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-file-member-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-member-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-member-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#units .sok-file-member-profile .sok-file-member-avatar {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    border-radius: 16px;
}

#units .sok-file-member-image-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-family-image-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

#units .sok-file-family-image-row .sok-family-org-mark {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
}

#units .sok-file-family-image-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
}

#units .sok-file-family-image-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-member-detail-header h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-member-detail-header p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-file-member-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-file-member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#units .sok-file-member-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    box-sizing: border-box;
}

#units .sok-file-member-field.full {
    grid-column: 1 / -1;
}

#units .sok-file-member-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-member-field input,
#units .sok-file-member-field textarea,
#units .sok-file-member-field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 11px;
    outline: none;
}

#units .sok-file-member-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-file-member-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-file-member-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-member-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-file-member-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-file-vehicles-shell {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

#units .sok-file-vehicles-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-file-vehicles-add {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-vehicle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#units .sok-file-vehicle-thumb {
    width: 64px;
    height: 44px;
    flex: 0 0 64px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.8);
    color: #bfdbfe;
    font-size: 18px;
    font-weight: 900;
}

#units .sok-file-vehicle-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#units .sok-file-vehicle-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

#units .sok-file-vehicle-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.18);
    transform: translateY(-1px);
}

#units .sok-file-vehicle-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-vehicle-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-file-vehicle-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-vehicle-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-vehicle-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#units .sok-file-vehicle-profile .sok-file-vehicle-thumb {
    width: 96px;
    height: 66px;
    flex-basis: 96px;
    border-radius: 16px;
}

#units .sok-file-vehicle-image-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-vehicle-detail-header h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-vehicle-detail-header p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-file-vehicle-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-file-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#units .sok-file-vehicle-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    box-sizing: border-box;
}

#units .sok-file-vehicle-field.full {
    grid-column: 1 / -1;
}

#units .sok-file-vehicle-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-vehicle-field input,
#units .sok-file-vehicle-field textarea,
#units .sok-file-vehicle-field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 11px;
    outline: none;
}

#units .sok-file-vehicle-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-file-vehicle-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-file-vehicle-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-vehicle-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-file-vehicle-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-file-locations-shell {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

#units .sok-file-locations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-file-locations-add {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-location-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.52);
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#units .sok-file-location-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.18);
    transform: translateY(-1px);
}

#units .sok-file-location-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-location-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-file-location-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-location-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-location-detail-header h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-location-detail-header p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-file-location-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#units .sok-file-location-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-file-location-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#units .sok-file-location-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    box-sizing: border-box;
}

#units .sok-file-location-field.full {
    grid-column: 1 / -1;
}

#units .sok-file-location-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-location-field input,
#units .sok-file-location-field textarea,
#units .sok-file-location-field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 11px;
    outline: none;
}

#units .sok-file-location-field textarea {
    min-height: 120px;
    resize: vertical;
}

#units .sok-file-location-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-file-location-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-file-location-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-file-location-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-file-routes-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .sok-file-routes-linker {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-routes-linker h4 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-routes-linker p {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-file-route-link-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 10px;
    min-width: min(100%, 440px);
}

#units .sok-file-route-link-form select,
#units .sok-file-route-link-form button,
#units .sok-file-route-item button,
#units .sok-file-route-item-button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 12px;
}

#units .sok-file-route-link-form button,
#units .sok-file-route-item button,
#units .sok-file-route-item-button {
    cursor: pointer;
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
    text-align: center;
}

#units .sok-file-routes-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-file-route-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.5);
}

#units .sok-file-route-item div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

#units .sok-file-route-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-route-item span {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .sok-file-route-item button {
    width: auto;
    white-space: nowrap;
    background: rgba(127, 29, 29, 0.18);
    border-color: rgba(185, 28, 28, 0.36);
    color: #fecaca;
}

#units .sok-file-document-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#units .sok-file-document-actions button:first-child {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .sok-file-overview-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .sok-file-overview-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-overview-header h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    color: #f8fafc;
}

#units .sok-file-overview-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-file-overview-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-file-overview-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.42);
    background: rgba(2, 6, 23, 0.24);
}

#units .sok-file-overview-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-overview-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .sok-file-overview-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

#units .sok-file-overview-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.48);
}

#units .sok-file-overview-stat strong {
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    color: #f8fafc;
}

#units .sok-file-overview-stat span {
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-file-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#units .sok-file-overview-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-overview-card h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    color: #f8fafc;
}

#units .sok-file-overview-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .sok-file-overview-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.42);
    background: rgba(2, 6, 23, 0.24);
}

#units .sok-file-overview-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .sok-file-overview-item span {
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .sok-file-overview-empty {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.32);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-file-rating-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .sok-file-rating-empty {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.68);
    background: rgba(2, 6, 23, 0.32);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

#units .sok-file-rating-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.42);
}

#units .sok-file-rating-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .sok-file-rating-card-header h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .sok-file-rating-card-header p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .sok-file-rating-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#units .sok-file-rating-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .sok-file-rating-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

#units .sok-file-rating-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .sok-file-rating-field.full {
    grid-column: 1 / -1;
}

#units .sok-file-rating-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-file-rating-field input,
#units .sok-file-rating-field textarea,
#units .sok-file-rating-field select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
    padding: 9px 11px;
    outline: none;
}

#units .sok-file-rating-field textarea {
    min-height: 140px;
    resize: vertical;
}

#units .sok-file-rating-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-file-rating-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(96, 165, 250, 0.38);
    background: rgba(30, 64, 175, 0.32);
    color: #eff6ff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-org-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-color: rgba(21, 128, 61, 0.32);
    background:
        linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.96)),
        radial-gradient(circle at 88% 10%, rgba(34, 197, 94, 0.12), transparent 30%);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#units .sok-org-card:hover {
    border-color: rgba(34, 197, 94, 0.36);
    transform: translateY(-2px);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(34, 197, 94, 0.08);
}

#units .sok-org-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #22c55e, rgba(34, 197, 94, 0.08));
}

#units .sok-org-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

#units .sok-risk-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.26);
    background: rgba(127, 29, 29, 0.18);
    color: #fecaca;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

#units .sok-dossier-list-item {
    position: relative;
    gap: 7px;
    border-radius: 16px;
    background: rgba(2, 6, 23, 0.44);
}

#units .sok-dossier-list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.5);
    opacity: 0;
}

#units .sok-dossier-list-item.active::before {
    opacity: 1;
}

#units .sok-dossier-list-type {
    display: inline-flex;
    width: max-content;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.18);
    color: #bbf7d0 !important;
    font-size: 10px !important;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#units .sok-dossier-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#units .sok-dossier-list-meta em {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.6);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

#units .sok-files-document.sok-family-dossier-document {
    gap: 18px;
    background:
        linear-gradient(180deg, rgba(2, 6, 23, 0.3), rgba(2, 6, 23, 0.08)),
        radial-gradient(circle at 82% 2%, rgba(34, 197, 94, 0.08), transparent 32%);
}

#units .sok-family-dossier-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

#units .sok-family-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.76);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .sok-family-dossier-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#units .sok-family-dossier-actions button {
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .sok-family-dossier-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .sok-family-dossier-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 18px;
    align-items: stretch;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(21, 128, 61, 0.32);
    background:
        linear-gradient(135deg, rgba(5, 46, 22, 0.34), rgba(2, 6, 23, 0.94) 56%),
        radial-gradient(circle at 86% 10%, rgba(34, 197, 94, 0.14), transparent 30%);
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-family-dossier-identity {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-width: 0;
}

#units .sok-family-org-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 22px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background:
        linear-gradient(135deg, rgba(20, 83, 45, 0.28), rgba(2, 6, 23, 0.88)),
        repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.08) 0 1px, transparent 1px 12px);
    color: #bbf7d0;
    font-size: 20px;
    font-weight: 950;
    letter-spacing: 0.12em;
    box-shadow: inset 0 0 28px rgba(34, 197, 94, 0.1);
}

#units .sok-family-org-image {
    padding: 0;
    object-fit: cover;
    overflow: hidden;
    letter-spacing: 0;
}

#units .sok-family-dossier-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

#units .sok-family-dossier-title h2 {
    margin: 0;
    font-size: 32px;
    line-height: 1.08;
    color: #f8fafc;
    overflow-wrap: anywhere;
}

#units .sok-family-dossier-subline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .sok-family-dossier-subline span,
#units .sok-family-risk-chip,
#units .sok-family-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

#units .sok-family-risk-chip.low {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(22, 101, 52, 0.18);
    color: #bbf7d0;
}
#units .sok-family-risk-chip.medium {
    border-color: rgba(250, 204, 21, 0.36);
    background: rgba(113, 63, 18, 0.2);
    color: #fef08a;
}
#units .sok-family-risk-chip.high {
    border-color: rgba(249, 115, 22, 0.38);
    background: rgba(124, 45, 18, 0.22);
    color: #fed7aa;
}
#units .sok-family-risk-chip.critical {
    border-color: rgba(239, 68, 68, 0.42);
    background: rgba(127, 29, 29, 0.26);
    color: #fecaca;
}
#units .sok-family-risk-chip.unknown {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
}
#units .sok-family-status-chip.active {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(22, 101, 52, 0.16);
    color: #bbf7d0;
}
#units .sok-family-status-chip.watch {
    border-color: rgba(251, 191, 36, 0.34);
    background: rgba(120, 53, 15, 0.2);
    color: #fde68a;
}
#units .sok-family-status-chip.inactive {
    border-color: rgba(100, 116, 139, 0.34);
    background: rgba(30, 41, 59, 0.42);
    color: #cbd5e1;
}
#units .sok-family-status-chip.unknown {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
}

#units .sok-family-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
}

#units .sok-family-color-chip i {
    width: 12px;
    height: 12px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}

#units .sok-family-dossier-summary {
    margin: 0;
    max-width: 780px;
    font-size: 13px;
    line-height: 1.75;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .sok-family-dossier-quickfacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 2px;
}

#units .sok-family-dossier-quickfacts div,
#units .sok-family-risk-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-family-dossier-quickfacts strong,
#units .sok-family-risk-meta strong {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-family-dossier-quickfacts span,
#units .sok-family-risk-meta span {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .sok-family-risk-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(34, 197, 94, 0.24);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    min-width: 0;
}

#units .sok-family-risk-card > span {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #86efac;
}

#units .sok-family-risk-card h3 {
    margin: 0;
    font-size: 30px;
    line-height: 1.05;
    color: #f8fafc;
    overflow-wrap: anywhere;
}

#units .sok-family-risk-meter {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.6);
    background: rgba(15, 23, 42, 0.9);
}

#units .sok-family-risk-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #facc15 45%, #f97316 72%, #ef4444);
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.28);
}

#units .sok-family-risk-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#units .sok-family-dossier-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.76);
    background: rgba(2, 6, 23, 0.34);
}

#units .sok-family-dossier-tabs .sok-files-tab {
    border-radius: 12px;
}

#units .sok-dossier-shell {
    gap: 16px;
}

#units .sok-dossier-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(21, 128, 61, 0.32);
    background:
        linear-gradient(135deg, rgba(5, 46, 22, 0.38), rgba(2, 6, 23, 0.94) 58%),
        radial-gradient(circle at 90% 8%, rgba(34, 197, 94, 0.14), transparent 30%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .sok-dossier-head-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#units .sok-dossier-head-main h3 {
    margin: 0;
    font-size: 28px;
    line-height: 1.12;
    color: #f8fafc;
}

#units .sok-dossier-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .sok-dossier-badges span,
#units .sok-dossier-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(15, 23, 42, 0.72);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 900;
}

#units .sok-dossier-badges .risk {
    border-color: rgba(248, 113, 113, 0.26);
    background: rgba(127, 29, 29, 0.18);
    color: #fecaca;
}

#units .sok-dossier-id {
    flex-direction: column;
    align-items: flex-end;
    border-radius: 16px;
    padding: 11px 13px;
    white-space: nowrap;
}

#units .sok-dossier-id span {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .sok-dossier-id strong {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #f8fafc;
}

#units .sok-dossier-meta-grid,
#units .sok-dossier-threat-grid,
#units .sok-dossier-assets,
#units .sok-dossier-members-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#units .sok-dossier-meta-grid div,
#units .sok-dossier-threat-grid div,
#units .sok-dossier-assets div,
#units .sok-dossier-member-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 13px;
    border-radius: 15px;
    border: 1px solid rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
    min-width: 0;
}

#units .sok-dossier-meta-grid strong,
#units .sok-dossier-threat-grid span,
#units .sok-dossier-assets span,
#units .sok-dossier-member-card span,
#units .sok-dossier-member-card em {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    font-style: normal;
}

#units .sok-dossier-meta-grid span,
#units .sok-dossier-threat-grid strong,
#units .sok-dossier-assets strong,
#units .sok-dossier-member-card strong {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#units .sok-dossier-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
        'summary threat'
        'feed members'
        'assets notes'
        'rating rating';
    gap: 14px;
}

#units .sok-dossier-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(30, 80, 48, 0.38);
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    min-width: 0;
}

#units .sok-dossier-panel.summary {
    grid-area: summary;
}
#units .sok-dossier-panel.threat {
    grid-area: threat;
}
#units .sok-dossier-panel.feed {
    grid-area: feed;
}
#units .sok-dossier-panel.members {
    grid-area: members;
}
#units .sok-dossier-panel.assets {
    grid-area: assets;
}
#units .sok-dossier-panel.notes {
    grid-area: notes;
}
#units .sok-dossier-panel.rating {
    grid-area: rating;
}

#units .sok-dossier-panel-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#units .sok-dossier-panel-head span {
    font-size: 10px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #86efac;
}

#units .sok-dossier-panel-head h4 {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
    color: #f8fafc;
}

#units .sok-dossier-panel p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .sok-dossier-feed .sok-file-overview-item {
    position: relative;
    padding-left: 18px;
}

#units .sok-dossier-feed .sok-file-overview-item::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 17px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.48);
}

#units .sok-member-mini-card {
    border-radius: 15px;
    border-color: rgba(51, 65, 85, 0.54);
    background: rgba(15, 23, 42, 0.54);
}

#units .sok-member-mini-meta {
    display: inline-flex;
    width: max-content;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.6);
    background: rgba(2, 6, 23, 0.5);
    color: #cbd5e1 !important;
    font-size: 10px !important;
    font-weight: 900;
}

@media (max-width: 1100px) {
    #units .sok-content {
        grid-template-columns: 1fr;
    }

    #units .sok-intel-sidebar {
        position: relative;
        top: auto;
    }

    #units .sok-content > .sok-intel-sidebar,
    #units .sok-content > .sok-panel {
        grid-column: 1;
    }

    #units .sok-intel-sidebar-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #units .sok-intel-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-most-wanted-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-intel-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            'summary'
            'feed'
            'map'
            'quick'
            'hints'
            'measures';
    }

    #units .sok-intel-hero {
        grid-template-columns: 1fr;
    }

    #units .sok-overview-board {
        grid-template-columns: 1fr;
    }

    #units .sok-guides-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-guides-command-header {
        flex-direction: column;
    }

    #units .sok-guides-page .sok-guides-document {
        grid-template-columns: 1fr;
    }

    #units .sok-guides-viewer {
        min-height: 520px;
    }

    #units .sok-files-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-files-viewer {
        min-height: 520px;
    }

    #units .sok-family-dossier-hero,
    #units .sok-family-dossier-identity {
        grid-template-columns: 1fr;
    }

    #units .sok-family-dossier-quickfacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-routes-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-routes-viewer {
        min-height: 520px;
    }

    #units .sok-files-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-file-entries-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-file-evidence-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-file-members-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-file-member-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-file-vehicles-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-file-vehicle-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-file-locations-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-file-routes-linker {
        flex-direction: column;
    }

    #units .sok-file-routes-list,
    #units .sok-file-route-link-form {
        grid-template-columns: 1fr;
        width: 100%;
    }

    #units .sok-file-location-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-file-overview-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-file-overview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-file-overview-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-file-rating-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-dossier-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            'summary'
            'threat'
            'feed'
            'members'
            'assets'
            'notes'
            'rating';
    }

    #units .sok-dossier-meta-grid,
    #units .sok-dossier-threat-grid,
    #units .sok-dossier-assets,
    #units .sok-dossier-members-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-routes-header {
        flex-direction: column;
    }

    #units .sok-routes-table {
        overflow-x: auto;
    }

    #units .sok-routes-table-head,
    #units .sok-routes-table-row {
        min-width: 920px;
    }

    #units .sok-route-detail-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-routes-meta,
    #units .sok-routes-editor {
        grid-template-columns: 1fr;
    }

    #units .sok-family-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-companies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-company-intel-shell,
    #units .sok-company-dossier-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-company-detail-grid,
    #units .sok-company-profile-panel {
        grid-template-columns: 1fr;
    }

    #units .sok-company-dossier-grid {
        grid-template-areas:
            'profile'
            'risk'
            'links'
            'activity';
    }

    #units .sok-company-facts,
    #units .sok-company-risk-grid,
    #units .sok-company-link-grid,
    #units .sok-company-detail-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #units .sok-family-list-header {
        flex-direction: column;
    }

    #units .sok-companies-header {
        flex-direction: column;
    }

    #units .sok-family-list-meta,
    #units .sok-family-list-editor {
        grid-template-columns: 1fr;
    }

    #units .sok-companies-meta,
    #units .sok-companies-editor {
        grid-template-columns: 1fr;
    }

    #units .sok-raid-planner-shell {
        grid-template-columns: 1fr;
    }

    #units .sok-raid-request-detail {
        grid-template-columns: 1fr;
    }

    #units #sok-investigation-request .sok-raid-request-sidebar-header {
        flex-direction: column;
    }

    #units .sok-raid-planner-viewer {
        min-height: 520px;
    }

    #units .sok-leadership-command-stats,
    #units .sok-leadership-command-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-raid-tactical-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            'details'
            'map'
            'resources'
            'notes';
    }

    #units .sok-raid-planner-meta,
    #units .sok-raid-planner-editor {
        grid-template-columns: 1fr;
    }

    #units .sok-raid-planner-marker-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-leadership-grid,
    #units .sok-leadership-role-list {
        grid-template-columns: 1fr;
    }

    #units .sok-leadership-card-head,
    #units .sok-leadership-entry-header {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    #units .sok-intel-sidebar-nav,
    #units .sok-intel-cards,
    #units .sok-quick-stats {
        grid-template-columns: 1fr;
    }

    #units .sok-intel-topbar,
    #units .sok-intel-tools,
    #units .sok-most-wanted-header {
        flex-direction: column;
        align-items: stretch;
    }

    #units .sok-most-wanted-header h2 {
        font-size: 28px;
    }

    #units .sok-most-wanted-alert {
        white-space: normal;
    }

    #units .sok-intel-tools {
        min-width: 0;
    }

    #units .sok-intel-tools input {
        width: 100%;
    }

    #units .sok-dossier-head {
        flex-direction: column;
    }

    #units .sok-family-dossier-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    #units .sok-family-dossier-actions {
        justify-content: flex-start;
    }

    #units .sok-family-dossier-hero {
        padding: 16px;
    }

    #units .sok-family-dossier-title h2 {
        font-size: 25px;
    }

    #units .sok-family-dossier-quickfacts {
        grid-template-columns: 1fr;
    }

    #units .sok-dossier-id {
        align-items: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    #units .sok-dossier-meta-grid,
    #units .sok-dossier-threat-grid,
    #units .sok-dossier-assets,
    #units .sok-dossier-members-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-company-dossier-head {
        flex-direction: column;
    }

    #units .sok-company-file-id {
        align-items: flex-start;
        max-width: none;
        width: 100%;
        box-sizing: border-box;
    }

    #units .sok-company-facts,
    #units .sok-company-risk-grid,
    #units .sok-company-link-grid,
    #units .sok-company-detail-facts {
        grid-template-columns: 1fr;
    }

    #units .sok-company-detail-card,
    #units .sok-company-profile-panel,
    #units .sok-company-risk-panel {
        padding: 14px;
    }

    #units .sok-route-detail-list {
        grid-template-columns: 1fr;
    }

    #units .sok-route-map {
        min-height: 260px;
    }

    #units .sok-intel-hero {
        padding: 18px;
    }

    #units .sok-raid-tactical-topbar {
        flex-direction: column;
    }

    #units #sok-razzia-request .sok-raid-request-sidebar-header {
        flex-direction: column;
    }

    #units .sok-raid-tactical-title h2 {
        font-size: 24px;
    }

    #units .sok-raid-tactical-map-shell .sok-raid-planner-map-preview,
    #units .sok-raid-map-placeholder {
        min-height: 300px;
    }

    #units .sok-intel-copy h2 {
        font-size: 24px;
    }

    #units .sok-intel-stats {
        grid-template-columns: 1fr;
    }

    #units .sok-family-list-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-companies-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-files-meta {
        grid-template-columns: 1fr;
    }

    #units .sok-file-entry-grid {
        grid-template-columns: 1fr;
    }

    #units .sok-file-overview-meta,
    #units .sok-file-overview-stats {
        grid-template-columns: 1fr;
    }
}

#units .internal-guides-shell {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

#units .internal-guides-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .internal-guides-list-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 4px 10px;
}

#units .internal-guides-list-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .internal-guides-list-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .internal-guides-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-guide-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.78);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        color 0.18s ease;
}

#units .internal-guide-item:hover {
    border-color: #334155;
    background: rgba(30, 41, 59, 0.82);
    transform: translateY(-1px);
}

#units .internal-guide-item.active {
    border-color: rgba(96, 165, 250, 0.5);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.24), rgba(15, 23, 42, 0.88));
    color: #f8fafc;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28);
}

#units .internal-guide-item-title {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

#units .internal-guide-item-text {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .internal-guide-item.active .internal-guide-item-text {
    color: #cbd5e1;
}

#units .internal-guides-viewer {
    display: flex;
    flex-direction: column;
    min-height: 620px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.96);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

#units .internal-guides-document {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(2, 6, 23, 0.12));
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.58) transparent;
}

#units .internal-guides-document::-webkit-scrollbar {
    width: 10px;
}

#units .internal-guides-document::-webkit-scrollbar-track {
    background: transparent;
}

#units .internal-guides-document::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.56);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

#units .internal-guides-document > * {
    width: min(100%, 860px);
    margin-inline: auto;
}

#units .internal-guides-document-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 28px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    position: relative;
}

#units .internal-guides-document-eyebrow {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9fb0c5;
}

#units .internal-guides-document-title {
    margin: 0;
    font-size: 40px;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #f8fafc;
    text-wrap: balance;
}

#units .internal-guides-document-header::after {
    content: 'Dokumententyp: Leitfaden\A Version: 1.0\A Verantwortlich: Abteilungsleitung Interne Ermittlungen';
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-left: 3px solid rgba(148, 163, 184, 0.34);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(148, 163, 184, 0.045));
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    white-space: pre-line;
    color: #aeb9c8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .internal-guides-document-subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #cbd5e1;
}

#units .internal-guides-document-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 28px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    position: relative;
}

#units .internal-guides-document-section:first-of-type {
    padding-top: 0;
    border-top: none;
}

#units .internal-guides-document-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28px;
    width: 92px;
    height: 1px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.44), rgba(148, 163, 184, 0));
}

#units .internal-guides-document-section:first-of-type::before {
    display: none;
}

#units .internal-guides-document-section-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #f8fafc;
    padding-top: 2px;
}

#units .internal-guides-document-section-title.is-subsection {
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    color: #e5edf8;
}

#units .internal-guides-document-subsection-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#units .internal-guides-document-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.95;
    color: #dbe4ee;
    white-space: pre-line;
    text-wrap: pretty;
}

#units .internal-guides-document-text.is-callout {
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-left: 3px solid rgba(148, 163, 184, 0.32);
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.06));
    color: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .internal-guides-document-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 24px;
    margin: 4px 0 0;
}

#units .internal-guides-document-list li {
    padding-left: 4px;
    font-size: 15px;
    line-height: 1.85;
    color: #dbe4ee;
}

#units .internal-guides-document-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 320px;
    padding: 40px 32px;
    border: 1px dashed rgba(148, 163, 184, 0.24);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    font-size: 15px;
    line-height: 1.8;
    color: #a5b4c7;
    text-align: center;
}

#units .internal-guides-document-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#units .internal-guides-document-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(15, 23, 42, 0.94));
    color: #dbeafe;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#units .internal-guides-document-actions button:hover {
    border-color: rgba(100, 116, 139, 0.9);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.92), rgba(30, 41, 59, 0.96));
    color: #f8fafc;
    transform: translateY(-1px);
}

#units .internal-guides-document-actions button.primary {
    border-color: rgba(96, 165, 250, 0.34);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.34), rgba(15, 23, 42, 0.96));
    color: #eff6ff;
}

#units .internal-guides-document-actions button.subtle-danger {
    border-color: rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.38), rgba(15, 23, 42, 0.82));
    color: #cbd5e1;
}

#units .internal-guides-document-actions button.subtle-danger:hover {
    border-color: rgba(248, 113, 113, 0.28);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.24), rgba(15, 23, 42, 0.92));
    color: #fecaca;
}

#units .internal-guides-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-guides-editor-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-guides-editor-label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9fb0c5;
}

#units .internal-guides-editor-input {
    width: 100%;
    padding: 13px 15px;
    border-radius: 15px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(2, 6, 23, 0.82)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
    color: #f8fafc;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#units .internal-guides-editor-input.is-description {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
    color: #dbe4ee;
}

#units .internal-guides-editor-textarea {
    width: 100%;
    min-height: 520px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(2, 6, 23, 0.82)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
    color: #e5edf8;
    font-size: 14px;
    line-height: 1.8;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#units .internal-guides-editor-input:focus,
#units .internal-guides-editor-textarea:focus {
    border-color: rgba(96, 165, 250, 0.34);
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#units .internal-info-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 2px 0;
}

#units .internal-info-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

#units .internal-info-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 24px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.94));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
    min-height: 100%;
}

#units .internal-info-section-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.72);
}

#units .internal-info-section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

#units .internal-info-section-title {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.02em;
}

#units .internal-info-section-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-info-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#units .internal-info-actions button,
#units .internal-info-card-edit-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.76);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.86), rgba(15, 23, 42, 0.92));
    color: #dbeafe;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#units .internal-info-actions button:hover,
#units .internal-info-card-edit-actions button:hover {
    border-color: rgba(100, 116, 139, 0.9);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.92), rgba(30, 41, 59, 0.96));
    color: #f8fafc;
    transform: translateY(-1px);
}

#units .internal-info-actions button.primary,
#units .internal-info-card-edit-actions button.primary {
    border-color: rgba(96, 165, 250, 0.32);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.34), rgba(15, 23, 42, 0.96));
    color: #eff6ff;
}

#units .internal-info-actions button.subtle-danger,
#units .internal-info-card-edit-actions button.subtle-danger {
    border-color: rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.38), rgba(15, 23, 42, 0.82));
    color: #cbd5e1;
}

#units .internal-info-actions button.subtle-danger:hover,
#units .internal-info-card-edit-actions button.subtle-danger:hover {
    border-color: rgba(248, 113, 113, 0.28);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.24), rgba(15, 23, 42, 0.92));
    color: #fecaca;
}

#units .internal-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .internal-info-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.88));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}

#units .internal-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(96, 165, 250, 0.32);
}

#units .internal-info-card::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: rgba(96, 165, 250, 0.28);
}

#units .internal-info-card:hover {
    transform: translateY(-2px);
    border-color: #334155;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.94));
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22);
}

#units .internal-info-card.priority-critical {
    border-color: rgba(248, 113, 113, 0.46);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.28), rgba(15, 23, 42, 0.88) 42%, rgba(2, 6, 23, 0.92));
    box-shadow:
        0 16px 34px rgba(127, 29, 29, 0.2),
        0 0 0 1px rgba(248, 113, 113, 0.08);
}

#units .internal-info-card.priority-critical::before {
    background: linear-gradient(90deg, #ef4444, rgba(248, 113, 113, 0.42));
}

#units .internal-info-card.priority-critical::after {
    background: #ef4444;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.36);
}

#units .internal-info-card.priority-critical:hover {
    border-color: rgba(248, 113, 113, 0.62);
    box-shadow:
        0 20px 38px rgba(127, 29, 29, 0.28),
        0 0 18px rgba(239, 68, 68, 0.13);
}

#units .internal-info-card.priority-high {
    border-color: rgba(251, 146, 60, 0.42);
    background: linear-gradient(180deg, rgba(124, 45, 18, 0.24), rgba(15, 23, 42, 0.88) 42%, rgba(2, 6, 23, 0.92));
    box-shadow:
        0 16px 34px rgba(124, 45, 18, 0.18),
        0 0 0 1px rgba(251, 146, 60, 0.07);
}

#units .internal-info-card.priority-high::before {
    background: linear-gradient(90deg, #fb923c, rgba(251, 146, 60, 0.38));
}

#units .internal-info-card.priority-high::after {
    background: #fb923c;
}

#units .internal-info-card.priority-very-high {
    border-color: rgba(248, 113, 113, 0.4);
    background: linear-gradient(180deg, rgba(154, 52, 18, 0.26), rgba(15, 23, 42, 0.88) 42%, rgba(2, 6, 23, 0.92));
    box-shadow:
        0 16px 34px rgba(154, 52, 18, 0.2),
        0 0 0 1px rgba(248, 113, 113, 0.07);
}

#units .internal-info-card.priority-very-high::before {
    background: linear-gradient(90deg, #f97316, rgba(248, 113, 113, 0.44));
}

#units .internal-info-card.priority-very-high::after {
    background: #f97316;
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.24);
}

#units .internal-info-card.priority-medium {
    border-color: rgba(234, 179, 8, 0.34);
    background: linear-gradient(180deg, rgba(113, 63, 18, 0.18), rgba(15, 23, 42, 0.86) 42%, rgba(2, 6, 23, 0.9));
    box-shadow:
        0 16px 34px rgba(113, 63, 18, 0.14),
        0 0 0 1px rgba(234, 179, 8, 0.06);
}

#units .internal-info-card.priority-medium::before {
    background: linear-gradient(90deg, #eab308, rgba(234, 179, 8, 0.34));
}

#units .internal-info-card.priority-medium::after {
    background: #eab308;
}

#units .internal-info-card.priority-low {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(180deg, rgba(20, 83, 45, 0.18), rgba(15, 23, 42, 0.86) 42%, rgba(2, 6, 23, 0.9));
    box-shadow:
        0 16px 34px rgba(20, 83, 45, 0.12),
        0 0 0 1px rgba(34, 197, 94, 0.05);
}

#units .internal-info-card.priority-low::before {
    background: linear-gradient(90deg, #22c55e, rgba(96, 165, 250, 0.28));
}

#units .internal-info-card.priority-low::after {
    background: #22c55e;
}

#units .internal-info-card.priority-info {
    border-color: rgba(96, 165, 250, 0.3);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.18), rgba(15, 23, 42, 0.86) 42%, rgba(2, 6, 23, 0.9));
    box-shadow:
        0 16px 34px rgba(30, 64, 175, 0.12),
        0 0 0 1px rgba(96, 165, 250, 0.05);
}

#units .internal-info-card.priority-info::before {
    background: linear-gradient(90deg, #60a5fa, rgba(96, 165, 250, 0.28));
}

#units .internal-info-card.priority-info::after {
    background: #60a5fa;
}

#units .internal-info-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#units .internal-info-card-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#units .internal-info-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#units .internal-info-priority-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.66);
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

#units .internal-info-card-meta span:not(.internal-info-priority-icon),
#units .internal-info-card-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.62);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#units .internal-info-priority-label.priority-critical {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(127, 29, 29, 0.32);
}

#units .internal-info-priority-label.priority-high {
    color: #fed7aa;
    border-color: rgba(251, 146, 60, 0.34);
    background: rgba(124, 45, 18, 0.28);
}

#units .internal-info-priority-label.priority-very-high {
    color: #ffedd5;
    border-color: rgba(248, 113, 113, 0.32);
    background: rgba(154, 52, 18, 0.3);
}

#units .internal-info-priority-label.priority-medium {
    color: #fef3c7;
    border-color: rgba(234, 179, 8, 0.3);
    background: rgba(113, 63, 18, 0.24);
}

#units .internal-info-priority-label.priority-low {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(20, 83, 45, 0.24);
}

#units .internal-info-priority-label.priority-info {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#units .internal-info-card-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .internal-info-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

#units .internal-info-card-footer-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#units .internal-info-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-info-edit-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
}

#units .internal-info-edit-fields input,
#units .internal-info-edit-fields textarea,
#units .internal-info-edit-fields select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.74);
    background: linear-gradient(180deg, rgba(6, 11, 24, 0.7), rgba(15, 23, 42, 0.78));
    color: #e8eef7;
    font-size: 13px;
    line-height: 1.45;
    box-sizing: border-box;
    outline: none;
    color-scheme: dark;
}

#units .internal-info-edit-fields select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image:
        linear-gradient(45deg, transparent 50%, #a9b8c8 50%), linear-gradient(135deg, #a9b8c8 50%, transparent 50%),
        linear-gradient(180deg, rgba(6, 11, 24, 0.7), rgba(15, 23, 42, 0.78));
    background-position:
        calc(100% - 15px) calc(50% - 2px),
        calc(100% - 10px) calc(50% - 2px),
        0 0;
    background-size:
        5px 5px,
        5px 5px,
        100% 100%;
    background-repeat: no-repeat;
}

#units .internal-info-edit-fields select option {
    background-color: #0f172a;
    color: #e8eef7;
}

#units .internal-info-edit-fields textarea {
    min-height: 92px;
    resize: vertical;
}

#units .internal-info-edit-fields input:focus,
#units .internal-info-edit-fields textarea:focus,
#units .internal-info-edit-fields select:focus {
    border-color: rgba(96, 165, 250, 0.34);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

#units .internal-info-status-select.status-open {
    border-color: rgba(100, 116, 139, 0.42);
    background-image:
        linear-gradient(45deg, transparent 50%, #cbd5e1 50%), linear-gradient(135deg, #cbd5e1 50%, transparent 50%),
        linear-gradient(180deg, rgba(51, 65, 85, 0.58), rgba(30, 41, 59, 0.72));
    color: #e2e8f0;
}

#units .internal-info-status-select.status-progress {
    border-color: rgba(245, 158, 11, 0.34);
    background-image:
        linear-gradient(45deg, transparent 50%, #f7c66b 50%), linear-gradient(135deg, #f7c66b 50%, transparent 50%),
        linear-gradient(180deg, rgba(120, 53, 15, 0.46), rgba(69, 26, 3, 0.58));
    color: #fef3c7;
}

#units .internal-info-status-select.status-active {
    border-color: rgba(34, 197, 94, 0.28);
    background-image:
        linear-gradient(45deg, transparent 50%, #86efac 50%), linear-gradient(135deg, #86efac 50%, transparent 50%),
        linear-gradient(180deg, rgba(20, 83, 45, 0.5), rgba(21, 128, 61, 0.34));
    color: #dcfce7;
}

#units .internal-info-card-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#units .internal-info-read-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #94a3b8;
}

#units .internal-info-read-state button {
    padding: 7px 10px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.78);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .internal-info-read-state button:hover {
    border-color: rgba(96, 165, 250, 0.48);
    background: rgba(30, 64, 175, 0.28);
}

#units .internal-info-card-date {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

#units .internal-info-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 20px;
    border-radius: 20px;
    border: 1px dashed rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.36);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

#units .internal-info-card-status.status-active {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
}

#units .internal-info-card-status.status-open {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#units .internal-info-card-status.status-progress {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#units .internal-qk-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 2px 0;
}

#units .internal-qk-layout {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

#units .internal-qk-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.97)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
    position: sticky;
    top: 18px;
}

#units .internal-qk-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.68);
}

#units .internal-qk-sidebar-header h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#units .internal-qk-sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #8da1b7;
}

#units .internal-qk-sidebar-eyebrow {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-qk-sidebar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.82);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#units .internal-qk-sidebar-action:hover {
    border-color: rgba(100, 116, 139, 0.92);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.96));
    transform: translateY(-1px);
}

#units .internal-qk-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-qk-search {
    display: flex;
}

#units .internal-qk-search-input {
    width: 100%;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.62);
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

#units .internal-qk-search-input::placeholder {
    color: #94a3b8;
}

#units .internal-qk-search-input:focus {
    border-color: rgba(96, 165, 250, 0.44);
    background: rgba(15, 23, 42, 0.84);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

#units .internal-qk-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-qk-sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(2, 6, 23, 0.74));
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#units .internal-qk-sidebar-item:hover {
    border-color: rgba(100, 116, 139, 0.74);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.9));
    transform: translateY(-1px);
}

#units .internal-qk-sidebar-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.22), rgba(15, 23, 42, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 24px rgba(2, 6, 23, 0.2);
}

#units .internal-qk-sidebar-item-title {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#units .internal-qk-sidebar-item-meta {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8da1b7;
}

#units .internal-qk-sidebar-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

#units .internal-qk-sidebar-item-note {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

#units .internal-qk-sidebar-item-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.54);
    background: rgba(30, 41, 59, 0.7);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#units .internal-qk-sidebar-item-status.status-open {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.18);
}

#units .internal-qk-sidebar-item-status.status-progress {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(146, 64, 14, 0.22);
}

#units .internal-qk-sidebar-item-status.status-done {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(21, 128, 61, 0.22);
}

#units .internal-qk-sidebar-review-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.36);
    background: rgba(245, 158, 11, 0.16);
    color: #fde68a;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.12);
}

#units .internal-qk-sidebar-submitted-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.32);
    background: rgba(37, 99, 235, 0.18);
    color: #bfdbfe;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

#units .internal-qk-viewer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

#units .internal-qk-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 20px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96));
    box-shadow: 0 18px 30px rgba(2, 6, 23, 0.14);
}

#units .internal-qk-viewer-bar-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#units .internal-qk-viewer-bar-item span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-qk-viewer-bar-item strong {
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .internal-qk-document {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 30px 32px;
    border-radius: 28px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(180deg, rgba(252, 252, 253, 0.98), rgba(243, 246, 250, 0.98)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 28px 56px rgba(2, 6, 23, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    color: #0f172a;
}

#units .internal-qk-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.32);
    position: relative;
}

#units .internal-qk-header::after {
    content: 'Dokumententyp: Qualitätskontrolle\A Sicherheitsstufe: Intern\A Bereich: Sonderdezernat Interne Ermittlungen';
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 2px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-left: 3px solid rgba(71, 85, 105, 0.38);
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.92), rgba(226, 232, 240, 0.74));
    color: #475569;
    font-size: 12px;
    line-height: 1.75;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: pre-line;
}

#units .internal-qk-eyebrow {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-qk-title {
    margin: 0;
    font-size: 36px;
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: #0f172a;
}

#units .internal-qk-subtitle {
    margin: 0;
    max-width: 760px;
    font-size: 15px;
    line-height: 1.75;
    color: #475569;
}

#units .internal-qk-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#units .internal-qk-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 15px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.82));
}

#units .internal-qk-meta-item span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-qk-meta-item strong {
    font-size: 14px;
    line-height: 1.6;
    color: #0f172a;
}

#units .internal-orders-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .internal-orders-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.72);
}

#units .internal-orders-header h3 {
    margin: 0;
    color: #f8fafc;
}

#units .internal-orders-header p {
    margin: 6px 0 0;
    color: #94a3b8;
    line-height: 1.5;
}

#units .internal-orders-header button,
#units .internal-orders-form-actions button,
#units .internal-orders-action {
    border: 1px solid rgba(96, 165, 250, 0.34);
    border-radius: 10px;
    background: rgba(30, 64, 175, 0.32);
    color: #dbeafe;
    padding: 9px 12px;
    cursor: pointer;
}

#units .internal-orders-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .internal-orders-filter {
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    padding: 7px 12px;
    cursor: pointer;
}

#units .internal-orders-filter.active {
    border-color: rgba(96, 165, 250, 0.5);
    color: #dbeafe;
    background: rgba(30, 64, 175, 0.42);
}

#units .internal-orders-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.62);
}

#units .internal-orders-form[style*='display: block'] {
    display: grid !important;
}

#units .internal-orders-form input,
#units .internal-orders-form select,
#units .internal-orders-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.68);
    color: #f8fafc;
    padding: 10px 12px;
}

#units .internal-orders-form textarea,
#units .internal-orders-form-actions {
    grid-column: 1 / -1;
}

#units .internal-orders-status {
    min-height: 20px;
    color: #94a3b8;
}

#units .internal-orders-table-wrap {
    overflow: auto;
    border: 1px solid rgba(30, 41, 59, 0.82);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.62);
}

#units .internal-orders-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

#units .internal-orders-table th,
#units .internal-orders-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.7);
    color: #cbd5e1;
    text-align: left;
    font-size: 13px;
}

#units .internal-orders-table th {
    color: #93c5fd;
    font-size: 11px;
    text-transform: uppercase;
}

#units .internal-orders-chip {
    display: inline-flex;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800;
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

#units .internal-orders-chip.status-abgeschlossen,
#units .internal-orders-chip.priority-niedrig {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
}
#units .internal-orders-chip.status-offen {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.14);
}
#units .internal-orders-chip.status-überfällig,
#units .internal-orders-chip.priority-kritisch {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.16);
}
#units .internal-orders-chip.status-in_bearbeitung,
#units .internal-orders-chip.status-übernommen,
#units .internal-orders-chip.priority-hoch {
    color: #fed7aa;
    background: rgba(249, 115, 22, 0.16);
}
#units .internal-orders-chip.priority-normal {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.14);
}

#units .internal-qk-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    position: relative;
}

#units .internal-qk-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 1px;
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.42), rgba(100, 116, 139, 0));
}

#units .internal-qk-section-title {
    margin: 0;
    padding-top: 18px;
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 800;
    color: #0f172a;
}

#units .internal-qk-section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

#units .internal-qk-section-title-row button {
    margin-top: 14px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.9);
    color: #334155;
    font-weight: 800;
    cursor: pointer;
    padding: 10px 14px;
}

#units .internal-qk-section-subtitle {
    margin: -6px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
}

#units .internal-qk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

#units .internal-qk-grid.triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#units .internal-qk-grid.answers {
    grid-template-columns: 1fr;
}

#units .internal-qk-grid.signatures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
}

#units .internal-qk-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-qk-field.full {
    grid-column: 1 / -1;
}

#units .internal-qk-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-qk-field input,
#units .internal-qk-field select,
#units .internal-qk-field textarea {
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.55;
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#units .internal-qk-field input:focus,
#units .internal-qk-field select:focus,
#units .internal-qk-field textarea:focus {
    border-color: rgba(71, 85, 105, 0.42);
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

#units .internal-qk-field input::placeholder,
#units .internal-qk-field textarea::placeholder {
    color: #94a3b8;
}

#units .internal-qk-field textarea {
    min-height: 138px;
    resize: vertical;
}

#units .internal-qk-textarea-large {
    min-height: 220px !important;
}

#units .internal-qk-table {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.9));
}

#units .internal-qk-table-head,
#units .internal-qk-table-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(120px, 0.38fr) minmax(320px, 1.7fr);
    align-items: stretch;
}

#units .internal-qk-table-head {
    background: linear-gradient(180deg, rgba(226, 232, 240, 0.96), rgba(226, 232, 240, 0.82));
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
}

#units .internal-qk-table-row + .internal-qk-table-row {
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

#units .internal-qk-table-cell {
    padding: 14px 16px;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    min-width: 0;
    box-sizing: border-box;
}

#units .internal-qk-table-cell:first-child {
    border-left: none;
}

#units .internal-qk-table-head .internal-qk-table-cell {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-qk-table-row .internal-qk-table-cell {
    display: flex;
    align-items: stretch;
    color: #0f172a;
}

#units .internal-qk-table-row .internal-qk-table-cell input,
#units .internal-qk-table-row .internal-qk-table-cell select,
#units .internal-qk-table-row .internal-qk-table-cell textarea {
    width: 100%;
    box-sizing: border-box;
}

#units .internal-qk-table-row .internal-qk-table-cell select {
    min-height: 44px;
}

#units .internal-qk-table-row .internal-qk-table-cell textarea {
    min-height: 86px;
    resize: vertical;
    white-space: pre-wrap;
    overflow: auto;
    line-height: 1.55;
}

#units .internal-qk-table-criterion {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
    color: #0f172a;
}

#units .internal-qk-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.84), rgba(241, 245, 249, 0.74));
}

#units .internal-qk-scale span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.78);
    color: #475569;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}

#units .internal-qk-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: #0f172a;
}

#units .internal-qk-list li {
    font-size: 15px;
    line-height: 1.8;
}

#units .internal-qk-question-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.78));
}

#units .internal-qk-question-item {
    font-size: 14px;
    line-height: 1.75;
    color: #0f172a;
}

#units .internal-qk-question-item textarea {
    width: 100%;
    min-height: 62px;
    resize: vertical;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    font: inherit;
    padding: 10px 12px;
}

#units .internal-qk-answer-label {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
    color: #0f172a;
}

#units .internal-qk-signature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 22px;
}

#units .internal-qk-signature-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.18));
}

#units .internal-qk-signature span {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
    color: #475569;
}

#units .internal-digital-signature {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#units .internal-digital-signature-canvas {
    width: 100%;
    height: 118px;
    border-radius: 14px;
    border: 1px solid rgba(100, 116, 139, 0.42);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    touch-action: none;
    box-sizing: border-box;
}

#units .internal-digital-signature-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .internal-digital-signature-button {
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    background: #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .internal-digital-signature-button:hover {
    background: #cbd5e1;
}

#units .internal-digital-signature-preview {
    width: 100%;
    max-height: 118px;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid rgba(100, 116, 139, 0.32);
    background: rgba(255, 255, 255, 0.92);
}

#units .internal-qk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 6px;
}

#units .internal-qk-save-status {
    min-height: 20px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    color: #64748b;
}

#units .internal-qk-save-status.is-success {
    color: #166534;
}

#units .internal-qk-action-buttons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#units .internal-qk-actions button {
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.84), rgba(226, 232, 240, 0.72));
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-qk-actions button:hover {
    background: linear-gradient(180deg, rgba(226, 232, 240, 0.92), rgba(226, 232, 240, 0.82));
    border-color: rgba(100, 116, 139, 0.42);
    color: #0f172a;
}

#units .internal-qk-actions button.internal-qk-archive-button {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(96, 165, 250, 0.32);
    color: #dbeafe;
}

#units .internal-qk-actions button.internal-qk-archive-button:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(147, 197, 253, 0.42);
    color: #eff6ff;
}

@media (max-width: 1180px) {
    #units .internal-qk-layout {
        grid-template-columns: 1fr;
    }

    #units .internal-qk-sidebar {
        position: static;
    }

    #units .internal-qk-viewer-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 820px) {
    #units .internal-qk-document {
        padding: 24px 20px 26px;
    }

    #units .internal-qk-meta,
    #units .internal-qk-grid,
    #units .internal-qk-grid.triple,
    #units .internal-qk-grid.signatures {
        grid-template-columns: 1fr;
    }

    #units .internal-qk-table-head,
    #units .internal-qk-table-row {
        grid-template-columns: 1fr;
    }

    #units .internal-qk-table-cell {
        border-left: none;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
    }

    #units .internal-qk-table-head .internal-qk-table-cell:first-child,
    #units .internal-qk-table-row .internal-qk-table-cell:first-child {
        border-top: none;
    }
}

#units .internal-tables-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-tables-header {
    display: none;
}

#units .internal-tables-header p {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-tables-subnav {
    display: flex;
    justify-content: center;
    margin-top: -2px;
}

#units .internal-tables-subnav-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: min(100%, 736px);
    padding: 8px 10px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.82);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.76));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
}

#units .internal-tables-subnav-tab {
    --authority-accent: 100, 116, 139;
    --authority-text: #b7c5d6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid rgba(var(--authority-accent), 0.32);
    background: linear-gradient(180deg, rgba(var(--authority-accent), 0.08), rgba(2, 6, 23, 0.72));
    color: var(--authority-text);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#units .internal-tables-subnav-tab[data-authority='lspd'] {
    --authority-accent: 96, 165, 250;
    --authority-text: #bfdbfe;
}

#units .internal-tables-subnav-tab[data-authority='lssd'] {
    --authority-accent: 52, 211, 153;
    --authority-text: #bbf7d0;
}

#units .internal-tables-subnav-tab[data-authority='usms'] {
    --authority-accent: 185, 78, 72;
    --authority-text: #fecaca;
}

#units .internal-tables-subnav-tab[data-authority='doj'] {
    --authority-accent: 245, 158, 11;
    --authority-text: #fde68a;
}

#units .internal-tables-subnav-tab[data-authority='fib'] {
    --authority-accent: 34, 211, 238;
    --authority-text: #cffafe;
}

#units .internal-tables-subnav-tab[data-authority='iaa'] {
    --authority-accent: 167, 139, 250;
    --authority-text: #ddd6fe;
}

#units .internal-tables-subnav-tab:hover {
    border-color: rgba(var(--authority-accent), 0.56);
    background: linear-gradient(180deg, rgba(var(--authority-accent), 0.15), rgba(15, 23, 42, 0.92));
    color: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.18);
}

#units .internal-tables-subnav-tab.active {
    border-color: rgba(var(--authority-accent), 0.64);
    background: linear-gradient(180deg, rgba(var(--authority-accent), 0.24), rgba(30, 41, 59, 0.96));
    color: #f8fafc;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 12px 24px rgba(2, 6, 23, 0.24),
        0 0 0 1px rgba(var(--authority-accent), 0.12);
}

#units .internal-tables-board {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 460px;
    padding: 14px 14px 18px;
    border-radius: 22px;
    border: 1px solid rgba(30, 41, 59, 0.96);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

#units .internal-tables-board::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0), rgba(96, 165, 250, 0.22), rgba(96, 165, 250, 0));
}

#units .internal-tables-board-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(71, 85, 105, 0.58);
}

#units .internal-tables-board-status span {
    font-size: 12px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fa3ba;
}

#units .internal-tables-grid {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(2, 6, 23, 0.56)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 16px 30px rgba(2, 6, 23, 0.14);
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.6) transparent;
}

#units .internal-tables-grid::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

#units .internal-tables-grid::-webkit-scrollbar-track {
    background: transparent;
}

#units .internal-tables-grid::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.48);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

#units .internal-tables-table {
    display: flex;
    flex-direction: column;
    min-width: 1810px;
    width: 100%;
}

#units .internal-tables-head,
#units .internal-tables-row {
    display: grid;
    grid-template-columns: 70px 150px 160px 240px 190px 210px 140px 190px 120px 180px 140px;
    align-items: center;
}

#units .internal-tables-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(36, 49, 68, 0.98), rgba(15, 23, 42, 0.99)), rgba(15, 23, 42, 0.96);
    border-bottom: 1px solid rgba(100, 116, 139, 0.46);
    box-shadow: 0 12px 22px rgba(2, 6, 23, 0.22);
}

#units .internal-tables-row {
    min-height: 46px;
    border-top: 1px solid rgba(51, 65, 85, 0.3);
    background: rgba(2, 6, 23, 0.06);
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease;
}

#units .internal-tables-row:nth-child(odd) {
    background: rgba(15, 23, 42, 0.08);
}

#units .internal-tables-row:hover {
    background: rgba(15, 23, 42, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

#units .internal-tables-cell {
    min-width: 0;
    padding: 6px 7px;
    border-left: 1px solid rgba(51, 65, 85, 0.16);
    font-size: 12.5px;
    line-height: 1.3;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#units .internal-tables-cell:first-child {
    border-left: none;
}

#units .internal-tables-head .internal-tables-cell {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #a0b0c4;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

#units .internal-tables-row .internal-tables-cell {
    color: #b8c6d6;
}

#units .internal-tables-row .internal-tables-cell.is-muted {
    color: #64748b;
}

#units .internal-tables-cell-field,
#units .internal-tables-cell-select {
    width: 100%;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 9px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(6, 11, 24, 0.68), rgba(15, 23, 42, 0.7));
    color: #e8eef7;
    font-size: 12px;
    line-height: 1.25;
    box-sizing: border-box;
    outline: none;
    color-scheme: dark;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease;
}

#units .internal-tables-cell-field::placeholder {
    color: #75859a;
}

#units .internal-tables-cell-field:focus,
#units .internal-tables-cell-select:focus {
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.88));
}

#units .internal-tables-cell-select:focus-visible {
    border-color: rgba(96, 165, 250, 0.32);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

#units .internal-tables-cell-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 28px;
    color: #e8eef7;
    background-image:
        linear-gradient(45deg, transparent 50%, #8fa3ba 50%), linear-gradient(135deg, #8fa3ba 50%, transparent 50%),
        linear-gradient(180deg, rgba(6, 11, 24, 0.68), rgba(15, 23, 42, 0.7));
    background-position:
        calc(100% - 13px) calc(50% - 2px),
        calc(100% - 8px) calc(50% - 2px),
        0 0;
    background-size:
        5px 5px,
        5px 5px,
        100% 100%;
    background-repeat: no-repeat;
}

#units .internal-tables-cell-select option {
    background-color: #0f172a;
    color: #e8eef7;
}

#units .internal-tables-cell-select optgroup {
    background-color: #0f172a;
    color: #cbd5e1;
}

#units .internal-tables-cell-field[readonly] {
    border-color: rgba(71, 85, 105, 0.54);
    background: linear-gradient(180deg, rgba(20, 28, 42, 0.62), rgba(7, 12, 24, 0.58));
    color: #d7e1ec;
    font-weight: 700;
}

#units .internal-tables-cell-field.due-state-safe,
#units .internal-tables-cell-field.due-state-warning,
#units .internal-tables-cell-field.due-state-overdue,
#units .internal-tables-cell-field.due-state-empty {
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.01em;
    border-width: 1px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 0 0 1px rgba(255, 255, 255, 0.012);
}

#units .internal-tables-cell-field.due-state-safe {
    border-color: rgba(52, 211, 153, 0.3);
    background: linear-gradient(180deg, rgba(9, 57, 47, 0.82), rgba(15, 118, 110, 0.54));
    color: #ecfdf5;
}

#units .internal-tables-cell-field.due-state-warning {
    border-color: rgba(251, 191, 36, 0.3);
    background: linear-gradient(180deg, rgba(92, 45, 12, 0.84), rgba(180, 83, 9, 0.56));
    color: #fef3c7;
}

#units .internal-tables-cell-field.due-state-overdue {
    border-color: rgba(248, 113, 113, 0.28);
    background: linear-gradient(180deg, rgba(102, 23, 23, 0.84), rgba(127, 29, 29, 0.62));
    color: #fef2f2;
}

#units .internal-tables-cell-field.due-state-empty {
    border-color: rgba(100, 116, 139, 0.38);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.48), rgba(30, 41, 59, 0.68));
    color: #d5deea;
}

#units .internal-tables-cell-field.internal-tables-due-date {
    font-weight: 700;
    letter-spacing: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.028),
        0 0 0 1px rgba(255, 255, 255, 0.008);
}

#units .internal-tables-cell-field.internal-tables-due-date.due-state-safe {
    border-color: rgba(52, 211, 153, 0.22);
    background: linear-gradient(180deg, rgba(9, 57, 47, 0.56), rgba(15, 118, 110, 0.34));
    color: #d1fae5;
}

#units .internal-tables-cell-field.internal-tables-due-date.due-state-warning {
    border-color: rgba(251, 191, 36, 0.22);
    background: linear-gradient(180deg, rgba(92, 45, 12, 0.56), rgba(180, 83, 9, 0.34));
    color: #fde68a;
}

#units .internal-tables-cell-field.internal-tables-due-date.due-state-overdue {
    border-color: rgba(248, 113, 113, 0.22);
    background: linear-gradient(180deg, rgba(102, 23, 23, 0.56), rgba(127, 29, 29, 0.4));
    color: #fecaca;
}

#units .internal-tables-cell-field.internal-tables-due-date.due-state-empty {
    border-color: rgba(100, 116, 139, 0.34);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.38), rgba(30, 41, 59, 0.54));
    color: #cbd5e1;
}

#units .internal-tables-cell-field.internal-tables-due-days {
    position: relative;
    text-align: center;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
}

#units .internal-tables-cell-field.internal-tables-due-days.due-state-safe,
#units .internal-tables-cell-field.internal-tables-due-days.due-state-warning,
#units .internal-tables-cell-field.internal-tables-due-days.due-state-overdue,
#units .internal-tables-cell-field.internal-tables-due-days.due-state-empty {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 18px rgba(2, 6, 23, 0.12);
}

#units .internal-tables-cell-select.status-neutral {
    border-color: rgba(100, 116, 139, 0.46);
    background-image:
        linear-gradient(45deg, transparent 50%, #a9b8c8 50%), linear-gradient(135deg, #a9b8c8 50%, transparent 50%),
        linear-gradient(180deg, rgba(51, 65, 85, 0.62), rgba(30, 41, 59, 0.72));
    color: #e2e8f0;
}

#units .internal-tables-cell-select.status-progress {
    border-color: rgba(245, 158, 11, 0.34);
    background-image:
        linear-gradient(45deg, transparent 50%, #f7c66b 50%), linear-gradient(135deg, #f7c66b 50%, transparent 50%),
        linear-gradient(180deg, rgba(120, 53, 15, 0.46), rgba(69, 26, 3, 0.58));
    color: #fef3c7;
}

#units .internal-tables-cell-select.status-success {
    border-color: rgba(34, 197, 94, 0.3);
    background-image:
        linear-gradient(45deg, transparent 50%, #86efac 50%), linear-gradient(135deg, #86efac 50%, transparent 50%),
        linear-gradient(180deg, rgba(20, 83, 45, 0.5), rgba(21, 128, 61, 0.34));
    color: #dcfce7;
}

#units .internal-tables-cell-select.status-danger {
    border-color: rgba(248, 113, 113, 0.26);
    background-image:
        linear-gradient(45deg, transparent 50%, #fca5a5 50%), linear-gradient(135deg, #fca5a5 50%, transparent 50%),
        linear-gradient(180deg, rgba(127, 29, 29, 0.42), rgba(69, 10, 10, 0.56));
    color: #fee2e2;
}

#units .internal-tables-cell-select.status-warning {
    border-color: rgba(251, 191, 36, 0.28);
    background-image:
        linear-gradient(45deg, transparent 50%, #fcd34d 50%), linear-gradient(135deg, #fcd34d 50%, transparent 50%),
        linear-gradient(180deg, rgba(113, 63, 18, 0.48), rgba(120, 53, 15, 0.58));
    color: #fef3c7;
}

#units .internal-tables-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

#units .internal-tables-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid rgba(71, 85, 105, 0.82);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.82));
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(2, 6, 23, 0.12);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#units .internal-tables-add-button:hover {
    border-color: rgba(100, 116, 139, 0.86);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(15, 23, 42, 0.94));
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(2, 6, 23, 0.16);
}

#units .internal-tables-board-placeholder {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 22px;
    border: 1px dashed rgba(71, 85, 105, 0.7);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.32), rgba(2, 6, 23, 0.42)),
        repeating-linear-gradient(
            0deg,
            rgba(148, 163, 184, 0.02) 0,
            rgba(148, 163, 184, 0.02) 1px,
            transparent 1px,
            transparent 36px
        );
    color: #8da1b7;
    text-align: center;
}

#units .internal-tables-board-placeholder strong {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #dbe7f4;
}

#units .internal-tables-board-placeholder p {
    margin: 0;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

@media (max-width: 900px) {
    #units .units-internal-tabs {
        width: 100%;
        align-self: stretch;
        justify-content: flex-start;
        margin-left: 0;
        padding-left: 0;
    }

    #units .internal-tables-subnav-track {
        width: 100%;
        justify-content: flex-start;
    }

    #units .internal-tables-subnav-tab {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 0;
    }

    #units .internal-tables-board {
        min-height: 360px;
        padding: 16px 14px;
    }

    #units .internal-tables-board-status {
        flex-direction: column;
        align-items: flex-start;
    }
}

#units .internal-zqk-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 2px 0;
}

#units .internal-zqk-layout {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

#units .internal-zqk-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.97)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
    position: sticky;
    top: 18px;
}

#units .internal-zqk-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.68);
}

#units .internal-zqk-sidebar-header h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#units .internal-zqk-sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #8da1b7;
}

#units .internal-zqk-sidebar-eyebrow {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-zqk-sidebar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.82);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#units .internal-zqk-sidebar-action:hover {
    border-color: rgba(100, 116, 139, 0.92);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.96));
    transform: translateY(-1px);
}

#units .internal-zqk-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-zqk-search {
    display: flex;
}

#units .internal-zqk-search-input {
    width: 100%;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.62);
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

#units .internal-zqk-search-input::placeholder {
    color: #94a3b8;
}

#units .internal-zqk-search-input:focus {
    border-color: rgba(96, 165, 250, 0.44);
    background: rgba(15, 23, 42, 0.84);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

#units .internal-zqk-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-zqk-sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(2, 6, 23, 0.74));
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#units .internal-zqk-sidebar-item:hover {
    border-color: rgba(100, 116, 139, 0.74);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.9));
    transform: translateY(-1px);
}

#units .internal-zqk-sidebar-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.22), rgba(15, 23, 42, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 24px rgba(2, 6, 23, 0.2);
}

#units .internal-zqk-sidebar-item-title {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#units .internal-zqk-sidebar-item-meta {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8da1b7;
}

#units .internal-zqk-sidebar-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

#units .internal-zqk-sidebar-item-note {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

#units .internal-zqk-sidebar-item-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.54);
    background: rgba(30, 41, 59, 0.7);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#units .internal-zqk-sidebar-item-status.status-open {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.18);
}

#units .internal-zqk-sidebar-item-status.status-progress {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(146, 64, 14, 0.22);
}

#units .internal-zqk-sidebar-item-status.status-done {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(21, 128, 61, 0.22);
}

#units .internal-zqk-viewer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

#units .internal-zqk-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 20px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96));
    box-shadow: 0 18px 30px rgba(2, 6, 23, 0.14);
}

#units .internal-zqk-viewer-bar-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#units .internal-zqk-viewer-bar-item span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-zqk-viewer-bar-item strong {
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .internal-zqk-document {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 30px 32px;
    border-radius: 28px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(180deg, rgba(252, 252, 253, 0.98), rgba(243, 246, 250, 0.98)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 28px 56px rgba(2, 6, 23, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    color: #0f172a;
}

#units .internal-zqk-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding: 0 0 26px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.32);
}

#units .internal-zqk-header::after {
    content: 'Dokumententyp: Zivile Qualitätskontrolle\A Sicherheitsstufe: Intern\A Bereich: Sonderdezernat Interne Ermittlungen';
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 2px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-left: 3px solid rgba(71, 85, 105, 0.38);
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.92), rgba(226, 232, 240, 0.74));
    color: #475569;
    font-size: 12px;
    line-height: 1.75;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: pre-line;
}

#units .internal-zqk-eyebrow {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-zqk-title {
    margin: 0;
    font-size: 36px;
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: #0f172a;
}

#units .internal-zqk-subtitle {
    margin: 0;
    max-width: 760px;
    font-size: 15px;
    line-height: 1.75;
    color: #475569;
}

#units .internal-zqk-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#units .internal-zqk-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 15px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.82));
}

#units .internal-zqk-meta-item span {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-zqk-meta-item strong {
    font-size: 14px;
    line-height: 1.6;
    color: #0f172a;
}

#units .internal-zqk-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    position: relative;
}

#units .internal-zqk-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 1px;
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.42), rgba(100, 116, 139, 0));
}

#units .internal-zqk-section-title {
    margin: 0;
    padding-top: 18px;
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 800;
    color: #0f172a;
}

#units .internal-zqk-section-subtitle {
    margin: -6px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
}

#units .internal-zqk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

#units .internal-zqk-grid.triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#units .internal-zqk-grid.signatures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
}

#units .internal-zqk-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-zqk-field.full {
    grid-column: 1 / -1;
}

#units .internal-zqk-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-zqk-field input,
#units .internal-zqk-field select,
#units .internal-zqk-field textarea {
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.55;
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#units .internal-zqk-field input:focus,
#units .internal-zqk-field select:focus,
#units .internal-zqk-field textarea:focus {
    border-color: rgba(71, 85, 105, 0.42);
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

#units .internal-zqk-field input::placeholder,
#units .internal-zqk-field textarea::placeholder {
    color: #94a3b8;
}

#units .internal-zqk-field textarea {
    min-height: 138px;
    resize: vertical;
}

#units .internal-zqk-textarea-large {
    min-height: 220px !important;
}

#units .internal-zqk-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: #0f172a;
}

#units .internal-zqk-list li {
    font-size: 15px;
    line-height: 1.8;
}

#units .internal-zqk-table {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.9));
}

#units .internal-zqk-table-head,
#units .internal-zqk-table-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(140px, 0.42fr) minmax(320px, 1.7fr);
    align-items: stretch;
}

#units .internal-zqk-table-head {
    background: linear-gradient(180deg, rgba(226, 232, 240, 0.96), rgba(226, 232, 240, 0.82));
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
}

#units .internal-zqk-table-row + .internal-zqk-table-row {
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

#units .internal-zqk-table-cell {
    padding: 14px 16px;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    min-width: 0;
    box-sizing: border-box;
}

#units .internal-zqk-table-cell:first-child {
    border-left: none;
}

#units .internal-zqk-table-head .internal-zqk-table-cell {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-zqk-table-row .internal-zqk-table-cell {
    display: flex;
    align-items: stretch;
    color: #0f172a;
}

#units .internal-zqk-table-row .internal-zqk-table-cell input,
#units .internal-zqk-table-row .internal-zqk-table-cell select,
#units .internal-zqk-table-row .internal-zqk-table-cell textarea {
    width: 100%;
    box-sizing: border-box;
}

#units .internal-zqk-table-row .internal-zqk-table-cell select {
    min-height: 44px;
}

#units .internal-zqk-table-row .internal-zqk-table-cell textarea {
    min-height: 86px;
    resize: vertical;
    white-space: pre-wrap;
    overflow: auto;
    line-height: 1.55;
}

#units .internal-zqk-table-criterion {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
    color: #0f172a;
}

#units .internal-zqk-signature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 22px;
}

#units .internal-zqk-signature-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.18));
}

#units .internal-zqk-signature span {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
    color: #475569;
}

#units .internal-zqk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 6px;
}

#units .internal-zqk-save-status {
    min-height: 20px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    color: #64748b;
}

#units .internal-zqk-save-status.is-success {
    color: #166534;
}

#units .internal-review-notes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-review-note-form {
    display: grid;
    grid-template-columns: minmax(130px, 180px) 1fr auto;
    gap: 10px;
    align-items: start;
}

#units .internal-review-note-form input,
#units .internal-review-note-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.72);
    color: #e5eefb;
    padding: 10px 12px;
    font: inherit;
}

#units .internal-review-note-form textarea {
    min-height: 76px;
    resize: vertical;
}

#units .internal-review-note-form button,
#units .internal-review-note-actions button {
    border: 1px solid rgba(96, 165, 250, 0.34);
    border-radius: 8px;
    background: rgba(30, 64, 175, 0.32);
    color: #dbeafe;
    padding: 9px 12px;
    cursor: pointer;
}

#units .internal-review-note-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-review-note-card {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-left: 3px solid #f59e0b;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.62);
    padding: 12px;
}

#units .internal-review-note-card.resolved {
    border-left-color: #22c55e;
    opacity: 0.82;
}

#units .internal-review-note-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

#units .internal-review-note-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: #9ca3af;
    font-size: 12px;
}

#units .internal-review-note-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

#units .internal-review-note-status.resolved {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

#units .internal-review-note-text {
    white-space: pre-wrap;
    color: #e5eefb;
    line-height: 1.5;
    margin: 0;
}

#units .internal-review-note-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

#units .internal-review-note-actions button.delete {
    border-color: rgba(248, 113, 113, 0.36);
    background: rgba(127, 29, 29, 0.32);
    color: #fecaca;
}

#units .internal-review-note-empty {
    color: #9ca3af;
    font-size: 13px;
}

/* =========================
   ANNOTATION MANAGEMENT SYSTEM
========================= */

#units .annotations {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#units .annotation-form {
    background: rgba(30, 41, 59, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#units .annotation-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .annotation-form-group label {
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
}

#units .annotation-form-group input,
#units .annotation-form-group textarea {
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.32);
    color: #f1f5f9;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

#units .annotation-form-group input:focus,
#units .annotation-form-group textarea:focus {
    outline: none;
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(96, 165, 250, 0.52);
}

#units .annotation-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

#units .annotation-form button,
#units .annotation-actions button {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(96, 165, 250, 0.42);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.82), rgba(37, 99, 235, 0.72));
    color: #eff6ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

#units .annotation-form button:hover,
#units .annotation-actions button:hover {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.92), rgba(59, 130, 246, 0.82));
    border-color: rgba(147, 197, 253, 0.52);
}

#units .annotation-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .annotation-card {
    background: rgba(30, 41, 59, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .annotation-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .annotation-title {
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

#units .annotation-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #94a3b8;
}

#units .annotation-content {
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#units .annotation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .annotation-tag {
    display: inline-block;
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

#units .annotation-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#units .annotation-actions button.delete {
    border-color: rgba(239, 68, 68, 0.42);
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.62), rgba(185, 28, 28, 0.52));
    color: #fecaca;
}

#units .annotation-actions button.delete:hover {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.82), rgba(220, 38, 38, 0.72));
    border-color: rgba(248, 113, 113, 0.52);
    color: #fef2f2;
}

#units .annotation-empty {
    color: #94a3b8;
    font-size: 13px;
    padding: 12px;
    text-align: center;
}

#units .internal-zqk-action-buttons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#units .internal-zqk-actions button {
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.84), rgba(226, 232, 240, 0.72));
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-zqk-actions button:hover {
    background: linear-gradient(180deg, rgba(226, 232, 240, 0.92), rgba(226, 232, 240, 0.82));
    border-color: rgba(100, 116, 139, 0.42);
    color: #0f172a;
}

#units .internal-zqk-actions button.internal-zqk-archive-button {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(96, 165, 250, 0.32);
    color: #dbeafe;
}

#units .internal-zqk-actions button.internal-zqk-archive-button:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(147, 197, 253, 0.42);
    color: #eff6ff;
}

@media (max-width: 1180px) {
    #units .internal-zqk-layout {
        grid-template-columns: 1fr;
    }

    #units .internal-zqk-sidebar {
        position: static;
    }

    #units .internal-zqk-viewer-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 820px) {
    #units .internal-zqk-document {
        padding: 24px 20px 26px;
    }

    #units .internal-zqk-meta,
    #units .internal-zqk-grid,
    #units .internal-zqk-grid.triple,
    #units .internal-zqk-grid.signatures {
        grid-template-columns: 1fr;
    }

    #units .internal-zqk-table-head,
    #units .internal-zqk-table-row {
        grid-template-columns: 1fr;
    }

    #units .internal-zqk-table-cell {
        border-left: none;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
    }

    #units .internal-zqk-table-head .internal-zqk-table-cell:first-child,
    #units .internal-zqk-table-row .internal-zqk-table-cell:first-child {
        border-top: none;
    }
}

#units .internal-staff-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .internal-staff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .internal-staff-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.9));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

#units .internal-staff-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#units .internal-staff-card-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#units .internal-staff-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#units .internal-staff-card-meta span,
#units .internal-staff-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.62);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#units .internal-staff-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-staff-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(51, 65, 85, 0.34);
}

#units .internal-staff-row:first-child {
    padding-top: 0;
    border-top: none;
}

#units .internal-staff-label {
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#units .internal-staff-value {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
}

#units .internal-staff-status.status-active {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
}

#units .internal-staff-status.status-inactive {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#units .internal-staff-status.status-observation {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#units .internal-employees-shell {
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.97)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

#units .internal-employees-placeholder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-employees-placeholder h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#units .internal-employees-placeholder p {
    margin: 0;
    max-width: 620px;
    font-size: 14px;
    line-height: 1.7;
    color: #8da1b7;
}

#units .internal-employees-table-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .internal-employees-table-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}

#units .internal-employees-table-header-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#units .internal-employees-table-header h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#units .internal-employees-table-header p {
    margin: 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.7;
    color: #8da1b7;
}

#units .internal-employees-table-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.82);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
    white-space: nowrap;
}

#units .internal-employees-table-add:hover {
    border-color: rgba(100, 116, 139, 0.92);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.96));
    transform: translateY(-1px);
}

#units .internal-employees-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#units .internal-employees-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    table-layout: fixed;
}

#units .internal-employees-table thead th {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.88);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cbd5e1;
    text-align: left;
    white-space: nowrap;
}

#units .internal-employees-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(30, 41, 59, 0.68);
    font-size: 14px;
    line-height: 1.55;
    color: #dbe4ee;
    text-align: left;
    vertical-align: middle;
}

#units .internal-employees-table tbody tr:last-child td {
    border-bottom: none;
}

#units .internal-employees-table tbody tr.internal-employees-row {
    background: rgba(2, 6, 23, 0.12);
}

#units .internal-employees-table tbody tr.internal-employees-row td:first-child {
    border-left: 3px solid transparent;
}

#units .internal-employees-table tbody tr.internal-employees-row.row-status-aktiv td:first-child {
    border-left-color: rgba(34, 197, 94, 0.42);
}

#units .internal-employees-table tbody tr.internal-employees-row.row-status-inaktiv td:first-child {
    border-left-color: rgba(100, 116, 139, 0.4);
}

#units .internal-employees-table tbody tr.internal-employees-row.row-status-urlaub td:first-child {
    border-left-color: rgba(96, 165, 250, 0.42);
}

#units .internal-employees-table tbody tr.internal-employees-row.row-status-suspendiert td:first-child {
    border-left-color: rgba(248, 113, 113, 0.42);
}

#units .internal-employees-table-empty td {
    padding: 28px 16px;
    color: #8da1b7;
    text-align: center;
}

#units .internal-employees-table-input,
#units .internal-employees-table-select {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #f8fafc;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
    outline: none;
}

#units .internal-employees-table-input::placeholder {
    color: #64748b;
}

#units .internal-employees-table-input:focus,
#units .internal-employees-table-select:focus {
    border-color: rgba(96, 165, 250, 0.38);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#units .internal-employees-table-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

#units .internal-employees-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.96));
    color: #f8fafc;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
    white-space: nowrap;
}

#units .internal-employees-table-action:hover {
    border-color: rgba(100, 116, 139, 0.9);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.98));
    transform: translateY(-1px);
}

#units .internal-employees-table-add {
    border-color: rgba(96, 165, 250, 0.34);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.9), rgba(30, 41, 59, 0.96));
    color: #eff6ff;
}

#units .internal-employees-table-add:hover {
    border-color: rgba(147, 197, 253, 0.46);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.88), rgba(30, 41, 59, 0.98));
}

#units .internal-employees-table-action {
    border-color: rgba(34, 197, 94, 0.28);
    background: linear-gradient(180deg, rgba(20, 83, 45, 0.82), rgba(30, 41, 59, 0.96));
    color: #dcfce7;
}

#units .internal-employees-table-action:hover {
    border-color: rgba(74, 222, 128, 0.4);
    background: linear-gradient(180deg, rgba(22, 101, 52, 0.88), rgba(30, 41, 59, 0.98));
}

#units .internal-employees-table-action.delete {
    border-color: rgba(127, 29, 29, 0.48);
    background: linear-gradient(180deg, rgba(69, 10, 10, 0.92), rgba(30, 41, 59, 0.96));
    color: #fee2e2;
}

#units .internal-employees-table-action.delete:hover {
    border-color: rgba(248, 113, 113, 0.42);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.82), rgba(51, 65, 85, 0.98));
}

#units .internal-employees-status-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-employees-rank-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-employees-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

#units .internal-employees-rank-badge.agent-rank {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#units .internal-employees-rank-badge.rank-leitung {
    color: #fef3c7;
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(120, 53, 15, 0.28);
}

#units .internal-employees-rank-badge.rank-stellv-leitung {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#units .internal-employees-rank-badge.rank-ausbilder {
    color: #ede9fe;
    border-color: rgba(167, 139, 250, 0.32);
    background: rgba(76, 29, 149, 0.24);
}

#units .internal-employees-rank-badge.rank-agent {
    color: #cbd5e1;
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(51, 65, 85, 0.46);
}

#units .internal-employees-rank-badge.rank-probe {
    color: #ffedd5;
    border-color: rgba(249, 115, 22, 0.3);
    background: rgba(124, 45, 18, 0.28);
}

#units .internal-employees-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

#units .internal-employees-status-badge.status-aktiv {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.3);
}

#units .internal-employees-status-badge.status-inaktiv {
    color: #cbd5e1;
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(51, 65, 85, 0.46);
}

#units .internal-employees-status-badge.status-urlaub {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.26);
    background: rgba(30, 64, 175, 0.24);
}

#units .internal-employees-status-badge.status-suspendiert {
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.28);
}

#units .internal-employees-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.97)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

#units .internal-employees-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.68);
}

#units .internal-employees-sidebar-header h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#units .internal-employees-sidebar-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #8da1b7;
}

#units .internal-employees-eyebrow {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-employees-new,
#units .internal-employees-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.82);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#units .internal-employees-new:hover,
#units .internal-employees-save:hover {
    border-color: rgba(100, 116, 139, 0.92);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.96));
    transform: translateY(-1px);
}

#units .internal-employees-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-employees-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(2, 6, 23, 0.74));
    color: #cbd5e1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

#units .internal-employees-item:hover {
    border-color: rgba(100, 116, 139, 0.74);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.9));
    transform: translateY(-1px);
}

#units .internal-employees-item.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.22), rgba(15, 23, 42, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 24px rgba(2, 6, 23, 0.2);
}

#units .internal-employees-item-title {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#units .internal-employees-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #8da1b7;
}

#units .internal-employees-detail {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.18);
}

#units .internal-employees-document {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 30px 32px;
    border-radius: 28px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(180deg, rgba(252, 252, 253, 0.98), rgba(243, 246, 250, 0.98)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 28px 56px rgba(2, 6, 23, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    color: #0f172a;
}

#units .internal-employees-document-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.32);
}

#units .internal-employees-document-title span {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-employees-document-title h3 {
    margin: 6px 0 0;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #0f172a;
}

#units .internal-employees-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(100, 116, 139, 0.24);
    background: rgba(226, 232, 240, 0.7);
    color: #334155;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

#units .internal-employees-badge.status-active {
    color: #166534;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(220, 252, 231, 0.8);
}

#units .internal-employees-badge.status-away {
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(254, 243, 199, 0.82);
}

#units .internal-employees-badge.status-inactive {
    color: #475569;
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(226, 232, 240, 0.78);
}

#units .internal-employees-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

#units .internal-employees-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#units .internal-employees-field.full {
    grid-column: 1 / -1;
}

#units .internal-employees-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-employees-field input,
#units .internal-employees-field select,
#units .internal-employees-field textarea {
    width: 100%;
    padding: 12px 13px;
    border-radius: 13px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#units .internal-employees-field textarea {
    min-height: 130px;
    resize: vertical;
}

#units .internal-employees-field input:focus,
#units .internal-employees-field select:focus,
#units .internal-employees-field textarea:focus {
    border-color: rgba(71, 85, 105, 0.42);
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

#units .internal-employees-actions {
    display: flex;
    justify-content: flex-end;
}

#units .internal-employees-save {
    width: auto;
    min-width: 160px;
    border-color: rgba(30, 64, 175, 0.32);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.92), rgba(30, 41, 59, 0.96));
}

@media (max-width: 1180px) {
    #units .internal-employees-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    #units .internal-employees-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #units .internal-employees-detail {
        padding: 16px;
    }

    #units .internal-employees-document {
        padding: 24px 20px 26px;
    }

    #units .internal-employees-document-header,
    #units .internal-employees-fields {
        grid-template-columns: 1fr;
    }

    #units .internal-employees-document-header {
        flex-direction: column;
    }
}

#units .internal-leadership-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .internal-leadership-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

#units .internal-leadership-eyebrow {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .internal-leadership-header h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .internal-leadership-header p {
    margin: 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-leadership-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

#units .internal-leadership-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
}

#units .internal-leadership-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 1;
}

#units .internal-leadership-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.34), rgba(71, 85, 105, 0.1));
}

#units .internal-leadership-card-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
    position: relative;
    z-index: 1;
}

#units .internal-leadership-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}

#units .internal-leadership-card-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-leadership-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
    border-top: 1px solid rgba(51, 65, 85, 0.34);
    font-size: 12px;
    line-height: 1.4;
    color: #64748b;
}

#units .internal-leadership-empty {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(15, 23, 42, 0.58);
    color: #cbd5e1 !important;
}

#units .internal-leadership-feedback {
    display: none;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
    color: #dcfce7 !important;
    font-size: 13px;
    line-height: 1.6;
}

#units .internal-leadership-feedback.visible {
    display: block;
}

#units .internal-leadership-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units #internalLeadershipApprovalsList {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.68) transparent;
}

#units #internalLeadershipApprovalsList::-webkit-scrollbar {
    width: 8px;
}

#units #internalLeadershipApprovalsList::-webkit-scrollbar-track {
    background: transparent;
}

#units #internalLeadershipApprovalsList::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.68);
    border-radius: 999px;
}

#units .internal-leadership-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(15, 23, 42, 0.58);
}

#units .internal-leadership-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#units .internal-leadership-entry-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#units .internal-leadership-entry-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .internal-leadership-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .internal-leadership-actions button {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-leadership-actions button:hover {
    background: rgba(30, 41, 59, 0.86);
    border-color: rgba(96, 165, 250, 0.32);
    color: #f8fafc;
}

#units .internal-leadership-actions button.primary {
    background: rgba(30, 64, 175, 0.32);
    border-color: rgba(96, 165, 250, 0.38);
    color: #eff6ff;
}

#units .internal-leadership-actions button.subtle-danger {
    color: #fecaca;
    border-color: rgba(185, 28, 28, 0.36);
    background: rgba(127, 29, 29, 0.18);
}

#units .internal-leadership-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .internal-leadership-field label {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .internal-leadership-field input,
#units .internal-leadership-field textarea,
#units .internal-leadership-field select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(2, 6, 23, 0.56);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.5;
    padding: 9px 11px;
    outline: none;
}

#units .internal-leadership-field textarea {
    min-height: 96px;
    resize: vertical;
}

#units .internal-leadership-status-display {
    min-height: 120px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(15, 23, 42, 0.58);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
}

#units .internal-leadership-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

#units .internal-leadership-tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    #units .internal-leadership-grid {
        grid-template-columns: 1fr;
    }
}

#units .internal-archive-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#units .internal-archive-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

#units .internal-archive-eyebrow {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .internal-archive-header h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .internal-archive-header p {
    margin: 0;
    max-width: 760px;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-archive-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-archive-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
    cursor: default;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#units .internal-archive-card.is-openable {
    cursor: pointer;
}

#units .internal-archive-card:hover {
    border-color: rgba(96, 165, 250, 0.32);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
    transform: translateY(-1px);
}

#units .internal-archive-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

#units .internal-archive-card-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#units .internal-archive-card-title h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .internal-archive-card-title p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .internal-archive-card-meta {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 14px;
}

#units .internal-archive-card-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#units .internal-archive-card-meta strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

#units .internal-archive-card-meta span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#units .internal-archive-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#units .internal-archive-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

#units .internal-archive-card-actions {
    display: flex;
    justify-content: flex-end;
}

#units .internal-archive-card-actions button {
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#units .internal-archive-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
    border-radius: 20px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    color: #cbd5e1;
}

#units .internal-archive-empty strong {
    color: #f8fafc;
    font-size: 15px;
}

#units .internal-archive-empty span {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

@media (max-width: 1100px) {
    #units .internal-archive-card-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    #units .internal-archive-card-header {
        flex-direction: column;
    }

    #units .internal-archive-badges,
    #units .internal-archive-card-actions {
        justify-content: flex-start;
    }

    #units .internal-archive-card-meta {
        grid-template-columns: 1fr;
    }
}

#units .internal-leadership-archive {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .internal-leadership-archive h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .internal-leadership-archive p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-leadership-archive-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-leadership-archive-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.56);
    background: rgba(15, 23, 42, 0.72);
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#units .internal-leadership-archive-card:hover {
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(15, 23, 42, 0.86);
    transform: translateY(-1px);
}

#units .internal-leadership-archive-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#units .internal-leadership-archive-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .internal-leadership-archive-card-title h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .internal-leadership-archive-card-title p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#units .internal-leadership-archive-card-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.68);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#units .internal-leadership-archive-card-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
}

#units .internal-leadership-archive-card-body div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .internal-leadership-archive-card-body strong {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #94a3b8;
}

#units .internal-leadership-archive-card-body span {
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .internal-leadership-archive-document {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 28px;
    border-radius: 22px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 15, 28, 0.94), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#units .internal-leadership-archive-toolbar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#units .internal-leadership-archive-toolbar button {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#units .internal-leadership-archive-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.42);
}

#units .internal-leadership-archive-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .internal-leadership-archive-heading span {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#units .internal-leadership-archive-heading h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #f8fafc;
}

#units .internal-leadership-archive-heading p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-leadership-archive-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
}

#units .internal-leadership-archive-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .internal-leadership-archive-meta-item strong {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
}

#units .internal-leadership-archive-meta-item span {
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

#units .internal-leadership-archive-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(51, 65, 85, 0.34);
}

#units .internal-leadership-archive-section h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#units .internal-leadership-archive-display {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#units .internal-leadership-archive-evidence-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-leadership-archive-evidence-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.48);
    background: rgba(15, 23, 42, 0.72);
}

#units .internal-leadership-archive-evidence-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#units .internal-leadership-archive-evidence-card-header h5 {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: #f8fafc;
}

#units .internal-leadership-archive-evidence-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .internal-leadership-archive-evidence-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.72);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
}

#units .internal-leadership-archive-evidence-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#units .internal-leadership-archive-evidence-preview img {
    display: block;
    max-width: 320px;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.48);
    background: #f8fafc;
}

#units .internal-leadership-archive-evidence-document {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.56);
    background: rgba(2, 6, 23, 0.38);
}

#units .internal-leadership-archive-evidence-document button {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#units .internal-investigation-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#units .internal-investigation-layout {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

#units .internal-investigation-sidebar,
#units .internal-investigation-viewer {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(30, 41, 59, 0.96);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

#units .internal-investigation-viewer {
    gap: 16px;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    align-items: stretch;
}

#units .internal-investigation-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 2px 2px;
}

#units .internal-investigation-header h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f8fafc;
}

#units .internal-investigation-create-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    margin: 0 0 8px 0;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.26);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98));
    color: #eff6ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

#units .internal-investigation-create-btn:hover {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.28), rgba(15, 23, 42, 0.98));
    border-color: rgba(147, 197, 253, 0.42);
    color: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
}

#units .internal-investigation-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-investigation-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(51, 65, 85, 0.4);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.9));
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
    text-align: left;
}

#units .internal-investigation-item:hover {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.98));
    border-color: rgba(96, 165, 250, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
}

#units .internal-investigation-item.active {
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.2), rgba(15, 23, 42, 0.98));
    border-color: rgba(96, 165, 250, 0.32);
    box-shadow:
        0 0 0 1px rgba(96, 165, 250, 0.12),
        0 18px 32px rgba(0, 0, 0, 0.2);
}

#units .investigation-case-title {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

#units .investigation-case-title strong {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.02em;
}

#units .investigation-case-subtitle {
    font-size: 13px;
    line-height: 1.55;
    color: #a8b6c8;
}

#units .investigation-case-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

#units .investigation-case-badge,
#units .internal-investigation-item-status,
#units .investigation-access-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.68);
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    box-sizing: border-box;
}

#units .investigation-access-badge,
#leadership .investigation-access-badge {
    align-self: auto;
    min-width: 0;
}

#units .investigation-access-badge.level-offen,
#leadership .investigation-access-badge.level-offen {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.26);
    background: rgba(30, 64, 175, 0.16);
}

#units .investigation-access-badge.level-intern,
#leadership .investigation-access-badge.level-intern {
    color: #cbd5e1;
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(30, 41, 59, 0.72);
}

#units .investigation-access-badge.level-nur-leitung,
#leadership .investigation-access-badge.level-nur-leitung {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.22);
    background: rgba(127, 29, 29, 0.14);
}

#units .investigation-access-badge.level-bearbeiter,
#leadership .investigation-access-badge.level-bearbeiter {
    color: #fef3c7;
    border-color: rgba(217, 119, 6, 0.22);
    background: rgba(120, 53, 15, 0.14);
}

#units .internal-investigation-item-status {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.14);
}

#units .internal-investigation-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 24px;
    border-radius: 18px;
    border: 1px dashed rgba(71, 85, 105, 0.48);
    background: rgba(2, 6, 23, 0.24);
    color: #94a3b8;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
}

#units .internal-investigation-file {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 30px 32px;
    border-radius: 28px;
    border: 1px solid rgba(203, 213, 225, 0.22);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.98));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

#units .investigation-access-denied,
#leadership .investigation-access-denied {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.06);
}

#units .investigation-access-denied-title,
#leadership .investigation-access-denied-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#units .investigation-access-denied-title h4,
#leadership .investigation-access-denied-title h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #0f172a;
}

#units .investigation-access-denied-title p,
#leadership .investigation-access-denied-title p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
}

#units .investigation-access-denied-meta,
#leadership .investigation-access-denied-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

#units .investigation-access-denied-meta div,
#leadership .investigation-access-denied-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .investigation-access-denied-meta strong,
#leadership .investigation-access-denied-meta strong {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
}

#units .investigation-access-denied-meta span,
#leadership .investigation-access-denied-meta span {
    font-size: 14px;
    line-height: 1.6;
    color: #0f172a;
}

#units .investigation-access-denied-text,
#leadership .investigation-access-denied-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #334155;
}

#units .internal-investigation-viewer-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

#units .internal-investigation-file-header {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 0 18px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    background: none;
}

#units .internal-investigation-file-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .internal-investigation-file-toolbar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#units .internal-investigation-file-toolbar button {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.42);
    background: rgba(255, 255, 255, 0.8);
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-investigation-file-toolbar button:hover {
    background: rgba(226, 232, 240, 0.9);
    border-color: rgba(51, 65, 85, 0.5);
    color: #020617;
}

#units .internal-investigation-archive-btn {
    border-color: rgba(148, 163, 184, 0.34);
    background: rgba(241, 245, 249, 0.92);
    color: #0f172a;
}

#units .internal-investigation-archive-btn:hover {
    background: rgba(226, 232, 240, 0.96);
    border-color: rgba(71, 85, 105, 0.56);
    color: #020617;
}

#units .internal-investigation-file-heading span {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1d4ed8;
}

#units .internal-investigation-file-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: #0f172a;
}

#units .internal-investigation-file-subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
}

#units .internal-investigation-file-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;
}

#units .internal-investigation-file-meta-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid rgba(203, 213, 225, 0.88);
}

#units .internal-investigation-file-meta-item:nth-child(-n + 3) {
    border-top: none;
    padding-top: 0;
}

#units .internal-investigation-file-meta-label {
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}

#units .internal-investigation-file-meta-value {
    font-size: 14px;
    line-height: 1.5;
    color: #0f172a;
}

#units .internal-investigation-file-display {
    font-size: 14px;
    line-height: 1.7;
    color: #1e293b;
    white-space: pre-wrap;
}

#units .internal-investigation-file-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.28);
    background: rgba(226, 232, 240, 0.72);
    color: #1e293b;
    font-size: 12px;
    font-weight: 700;
}

#units .internal-investigation-file-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-investigation-file-field input,
#units .internal-investigation-file-field select,
#units .internal-investigation-file-field textarea {
    width: 100%;
    padding: 11px 0;
    border: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.88);
    border-radius: 0;
    background: transparent;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#units .internal-investigation-file-field input:focus,
#units .internal-investigation-file-field select:focus,
#units .internal-investigation-file-field textarea:focus {
    border-bottom-color: rgba(96, 165, 250, 0.52);
    box-shadow: none;
}

#units .internal-investigation-file-field textarea {
    min-height: 86px;
    resize: vertical;
    line-height: 1.6;
}

#units .internal-investigation-file-textarea {
    width: 100%;
    min-height: 140px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.72);
    background: rgba(255, 255, 255, 0.88);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.7;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
}

#units .internal-investigation-file-textarea:focus {
    border-color: rgba(96, 165, 250, 0.36);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#units .internal-investigation-file-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#units .internal-investigation-file-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(203, 213, 225, 0.88);
}

#units .internal-investigation-file-subsection {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    padding-left: 14px;
    border-top: 1px solid rgba(226, 232, 240, 0.92);
    border-left: 2px solid rgba(148, 163, 184, 0.55);
}

#units .internal-investigation-evidence-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#units .internal-investigation-evidence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

#units .internal-investigation-evidence-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    padding: 16px 0 0 0;
    border: none;
    background: none;
}

#units .internal-investigation-evidence-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-investigation-evidence-field.full {
    grid-column: 1 / -1;
}

#units .internal-investigation-evidence-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #475569;
}

#units .internal-investigation-evidence-field input,
#units .internal-investigation-evidence-field select,
#units .internal-investigation-evidence-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.72);
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#units .internal-investigation-evidence-field input:focus,
#units .internal-investigation-evidence-field select:focus,
#units .internal-investigation-evidence-field textarea:focus {
    border-color: rgba(96, 165, 250, 0.36);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#units .internal-investigation-evidence-field textarea {
    min-height: 110px;
    resize: vertical;
}

#units .internal-investigation-evidence-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 1 / -1;
}

#units .internal-investigation-evidence-actions button {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.42);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-investigation-evidence-actions button:hover {
    background: rgba(226, 232, 240, 0.92);
    border-color: #334155;
    color: #020617;
}

#units .internal-investigation-evidence-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#units .internal-investigation-evidence-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(203, 213, 225, 0.88);
    background: none;
}

#units .internal-investigation-evidence-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#units .internal-investigation-evidence-card-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    color: #0f172a;
}

#units .internal-investigation-evidence-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#units .internal-investigation-evidence-card-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(241, 245, 249, 0.96);
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

#units .internal-investigation-evidence-card-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #334155;
}

#units .internal-investigation-evidence-preview {
    display: flex;
    justify-content: flex-start;
}

#units .internal-investigation-evidence-preview img {
    display: block;
    max-width: 320px;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.48);
    background: #f8fafc;
}

#units .internal-investigation-evidence-document {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(203, 213, 225, 0.88);
    background: rgba(248, 250, 252, 0.86);
}

#units .internal-investigation-evidence-file {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#units .internal-investigation-evidence-file strong {
    font-size: 13px;
    line-height: 1.4;
    color: #0f172a;
}

#units .internal-investigation-evidence-file span {
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
}

#units .internal-investigation-evidence-open {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.42);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-investigation-evidence-open:hover {
    background: rgba(226, 232, 240, 0.92);
    border-color: #334155;
    color: #020617;
}

#units .internal-investigation-evidence-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

#units .internal-investigation-evidence-action {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.42);
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-investigation-evidence-action:hover {
    background: rgba(226, 232, 240, 0.92);
    border-color: #334155;
    color: #020617;
}

#units .internal-investigation-evidence-action.delete {
    border-color: rgba(185, 28, 28, 0.22);
    color: #7f1d1d;
}

#units .internal-investigation-evidence-action.delete:hover {
    background: rgba(254, 226, 226, 0.92);
    border-color: rgba(185, 28, 28, 0.4);
    color: #7f1d1d;
}

#units .internal-investigation-evidence-editing {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
}

#units .internal-investigation-file-section-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #0f172a;
}

#units .internal-investigation-file-section-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    border: none;
    background: none;
}

#units .internal-investigation-file-section-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #334155;
}

#units .internal-investigation-file-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(51, 65, 85, 0.42);
}

#units .internal-investigation-file-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.62);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#units .internal-investigation-file-actions button {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.58);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

#units .internal-investigation-file-actions button:hover {
    background: rgba(30, 41, 59, 0.72);
    border-color: #334155;
    color: #f8fafc;
}

#units .internal-investigation-signature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    padding-top: 8px;
}

#units .internal-investigation-signature-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#units .internal-investigation-signature-label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

#units .internal-investigation-signature-line {
    min-height: 42px;
    display: flex;
    align-items: flex-end;
    padding: 0 0 8px;
    border-bottom: 1.5px solid rgba(100, 116, 139, 0.8);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
}

#units .internal-investigation-signature-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#units .internal-investigation-signature-field input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.72);
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#units .internal-investigation-signature-field input:focus {
    border-color: rgba(96, 165, 250, 0.36);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

@media (max-width: 900px) {
    #units .internal-investigation-layout {
        grid-template-columns: 1fr;
    }

    #units .internal-investigation-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #units .internal-investigation-file-meta,
    #units .internal-investigation-file-summary {
        grid-template-columns: 1fr;
    }

    #units .internal-investigation-signature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    #units .internal-investigation-file {
        padding: 24px 20px 26px;
    }
}
/* ÜBERSCHRIFTEN */

h3 {
    margin-top: 30px;
    margin-bottom: 10px;
    opacity: 0.8;
}

#crimeList {
    margin-top: 20px;
}

.crime {
    display: flex;
    justify-content: space-between;
    background: #0f172a;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid #1e293b;
}
.crime-item {
    padding: 10px;
    background: #0f172a;
    margin-bottom: 5px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #1e293b;
}

.crime-item:hover {
    background: #1e293b;
}

.selected {
    display: flex;
    justify-content: space-between;
    background: #020617;
    padding: 10px;
    margin-top: 10px;
    border-radius: 8px;
}

/*Tabelle box Bußgeldrechner */
#calculator > h2 {
    text-align: center;
    margin-bottom: 24px;
}

.summary {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.box {
    background: linear-gradient(180deg, #0f172a, #020617);
    padding: 20px;
    border-radius: 12px;
    flex: 1;
    border: 1px solid #1e293b;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    margin-bottom: 20px;
}

.box h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.box h2 {
    margin: 0;
    font-size: 28px;
}

#slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slot {
    position: relative;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 18px;
    background: rgba(15, 23, 42, 0.82);
    padding: 14px 44px 14px 15px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.slot:hover {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(148, 163, 184, 0.32);
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.18);
    transform: translateY(-1px);
}

.slot-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.slot-identity {
    display: flex;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
}

.slot-code {
    font-size: 19px;
    line-height: 1.2;
    font-weight: 800;
    color: #e0f2fe;
}

.slot-law {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #93c5fd;
}

.slot-main {
    min-width: 0;
    padding-right: 2px;
}

.slot-title {
    font-size: 16px;
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 4px;
}

.slot-desc {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(148, 163, 184, 0.82);
}

@media (max-width: 720px) {
    .slot {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 13px 42px 13px 14px;
    }
}

#search {
    width: 100%;
    padding: 15px 16px;
    margin-bottom: 15px;
    border-radius: 12px;
    border: 1px solid rgba(71, 85, 105, 0.92);
    background: rgba(15, 23, 42, 0.9);
    color: white;
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
}

#lawTable {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.law-title {
    font-weight: bold;
    margin-bottom: 4px;
}

.law-meta {
    font-size: 13px;
    opacity: 0.85;
}

.filters {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1;
    margin-bottom: 0;
}

.filters select,
.filters input {
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #0f172a;
    color: white;
    border: 1px solid #1e293b;
    box-sizing: border-box;
    outline: none;
}

.filters select {
    min-width: 220px;
}

.filters input {
    flex: 1;
    min-width: 320px;
}

.filters #search {
    margin-bottom: 0;
    height: 52px;
    min-height: 52px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 24px rgba(2, 6, 23, 0.16);
}

.filters select:focus,
.filters input:focus {
    border: 1px solid rgba(96, 165, 250, 0.58);
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.14),
        0 12px 26px rgba(2, 6, 23, 0.18);
}

.law-table {
    background: #020617;
    border: 1px solid #1e293b;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    margin-top: 4px;
    margin-bottom: 20px;
}

.law-head {
    display: grid;
    grid-template-columns: 120px 120px 1fr 120px 120px;
    background: #0f172a;
    font-weight: bold;
    padding: 14px 12px;
    border-bottom: 1px solid #1e293b;
}

.law-head div {
    padding: 4px 8px;
    font-size: 13px;
    text-transform: uppercase;
    opacity: 0.85;
}

.law-row {
    display: grid;
    grid-template-columns: 120px 120px 1fr 120px 120px;
    padding: 14px 12px;
    border-bottom: 1px solid #1e293b;
    cursor: pointer;
    transition: 0.2s;
    background: #020617;
}

.law-row:hover {
    background: #1e293b;
}

.law-row div {
    padding: 4px 8px;
}

.law-name {
    font-weight: bold;
}

.law-desc {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 4px;
}

.slot-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.78);
    color: #cbd5e1;
    border: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 800;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(71, 85, 105, 0.72);
}

.slot-remove:hover {
    background: rgba(127, 29, 29, 0.9);
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.42);
    box-shadow: 0 0 8px rgba(127, 29, 29, 0.32);
    transform: translateY(-1px);
}

.calc-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
    align-items: flex-end;
    gap: 6px;
    min-height: 52px;
}

.calc-button-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.calc-button-row button {
    height: 52px;
    min-height: 52px;
    width: 136px;
    background: rgba(185, 28, 28, 0.92);
    color: white;
    border: 1px solid rgba(248, 113, 113, 0.32);
    padding: 0 18px;
    border-radius: 12px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    font-weight: bold;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 24px rgba(2, 6, 23, 0.16);
    white-space: nowrap;
}

.calc-button-row button:hover {
    background: rgba(220, 38, 38, 0.94);
    border-color: rgba(252, 165, 165, 0.42);
    box-shadow:
        0 0 0 3px rgba(220, 38, 38, 0.12),
        0 12px 26px rgba(2, 6, 23, 0.18);
}

.calc-button-row button.calc-copy-btn {
    background: rgba(21, 128, 61, 0.92);
    border-color: rgba(74, 222, 128, 0.32);
}

.calc-button-row button.calc-copy-btn:hover {
    background: rgba(22, 163, 74, 0.94);
    border-color: rgba(134, 239, 172, 0.42);
    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.12),
        0 12px 26px rgba(2, 6, 23, 0.18);
}

.calc-copy-toast {
    min-height: 20px;
    color: #bbf7d0;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.calc-copy-toast.visible {
    opacity: 1;
}

.calc-toolbar {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 700px) {
    .calc-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .calc-actions {
        align-items: stretch;
        justify-content: stretch;
    }

    .calc-button-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .calc-button-row button {
        width: 100%;
    }

    .calc-copy-toast {
        text-align: center;
    }
}

.empty-state {
    background: #0f172a;
    padding: 14px;
    border-radius: 10px;
    border: 1px dashed #334155;
    opacity: 0.85;
    text-align: center;
}

#measures {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.measure-item {
    background: #0f172a;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #1e293b;
    font-weight: 500;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.money-value {
    color: #22c55e;
}

.jail-value {
    color: #f59e0b;
}

/* Bußgeldkatalogseite */

#catalog > h2 {
    text-align: center;
}

.catalog-slogan {
    margin: 8px 0 18px;
    padding: 6px 12px 10px;
    text-align: center;
}

.catalog-slogan-quote {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(17px, 1.8vw, 24px);
    line-height: 1.32;
    font-weight: 800;
}

.catalog-slogan-name {
    display: block;
    margin-top: 8px;
    color: rgba(203, 213, 225, 0.72);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}

.catalog-section {
    margin-bottom: 14px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #1e293b;
    background: #020617;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.18);
}

.catalog-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #0b1220;
}

.catalog-header:hover {
    background: #111b2e;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
}

.catalog-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.catalog-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    box-shadow: 0 0 6px currentColor;
}

.catalog-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.catalog-count {
    font-size: 13px;
    opacity: 0.8;
    padding: 4px 10px;
    border-radius: 999px;
    background: #111827;
    border: 1px solid #1e293b;
    min-width: 96px;
    text-align: center;
}

.catalog-arrow {
    font-size: 15px;
    transition:
        transform 0.28s ease,
        opacity 0.2s ease;
    opacity: 0.85;
}

.catalog-section.open .catalog-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.catalog-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.35s ease,
        opacity 0.25s ease;
}

.catalog-section.open .catalog-body {
    opacity: 1;
}

.catalog-section.open {
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.08);
}

.catalog-rows {
    margin-left: 0;
    padding-left: 0;
    border-left: 3px solid transparent;
}

.catalog-head {
    display: grid;
    grid-template-columns: 92px minmax(0, 1.7fr) 104px 96px;
    gap: 0;
    padding: 13px 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(11, 18, 32, 0.96));
    border-top: 1px solid #162033;
    border-bottom: 1px solid #162033;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #cbd5e1;
    align-items: center;
}

.catalog-head > div {
    padding: 0 8px;
}

.catalog-head {
    border-radius: 10px 10px 0 0;
}

.catalog-row:last-child {
    border-radius: 0 0 10px 10px;
}

.catalog-row > div {
    padding: 0 8px;
}

.catalog-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1.7fr) 104px 96px;
    gap: 0;
    align-items: center;
    padding: 15px 18px;
    border-top: 1px solid #162033;
    min-height: 72px;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

.catalog-row:hover {
    background: rgba(15, 23, 42, 0.78);
}

.catalog-head > div,
.catalog-row > div {
    min-width: 0;
}

.catalog-rows.line-BGB {
    border-left-color: #14b8a6;
}
.catalog-rows.line-StGB {
    border-left-color: #dc2626;
}
.catalog-rows.line-StVO {
    border-left-color: #16a34a;
}
.catalog-rows.line-LuVO {
    border-left-color: #2563eb;
}
.catalog-rows.line-WaffG {
    border-left-color: #eab308;
}
.catalog-rows.line-BtMG {
    border-left-color: #f97316;
}
.catalog-rows.line-GewG {
    border-left-color: #9333ea;
}
.catalog-rows.line-PolG {
    border-left-color: #f472b6;
}
.catalog-rows.line-MiG {
    border-left-color: #6b8e23;
}
.catalog-rows.line-MilG {
    border-left-color: #64748b;
}
.catalog-rows.line-AggG {
    border-left-color: #0ea5e9;
}
.catalog-rows.line-BeamtG {
    border-left-color: #fb7185;
}
.catalog-rows.line-LDG {
    border-left-color: #fde047;
}
.catalog-rows.line-StPO {
    border-left-color: #0891b2;
}

.catalog-paragraph {
    font-weight: 700;
    opacity: 0.95;
    font-size: 14px;
    color: #38bdf8;
    padding-right: 14px;
}

.catalog-name {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

.catalog-desc {
    font-size: 13px;
    opacity: 0.76;
    line-height: 1.5;
}

.catalog-head div:nth-child(3),
.catalog-head div:nth-child(4) {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.catalog-money,
.catalog-jail {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Farben */
.dot-BGB {
    background: #14b8a6;
}
.dot-StGB {
    background: #dc2626;
}
.dot-StVO {
    background: #16a34a;
}
.dot-LuVO {
    background: #2563eb;
}
.dot-WaffG {
    background: #eab308;
}
.dot-BtMG {
    background: #f97316;
}
.dot-GewG {
    background: #9333ea;
}
.dot-PolG {
    background: #f472b6;
}
.dot-MiG {
    background: #6b8e23;
}
.dot-MilG {
    background: #64748b;
}
.dot-AggG {
    background: #0ea5e9;
}
.dot-BeamtG {
    background: #fb7185;
}
.dot-LDG {
    background: #fde047;
}
.dot-StPO {
    background: #0891b2;
}

@media (max-width: 900px) {
    .catalog-row,
    .catalog-head {
        grid-template-columns: 80px 1fr 80px 80px;
    }
}

@media (max-width: 700px) {
    .catalog-header {
        grid-template-columns: 1fr auto;
    }

    .catalog-count {
        grid-column: 1 / 2;
        justify-self: start;
        margin-left: 22px;
    }

    .catalog-arrow {
        grid-row: 1 / 3;
    }

    .catalog-head {
        display: none;
    }

    .catalog-row {
        grid-template-columns: 1fr;
    }

    .catalog-money,
    .catalog-jail {
        justify-content: flex-start;
        text-align: left;
    }
}

.catalog-info {
    margin-top: 6px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    font-size: 13px;
    opacity: 0.7;
    color: #94a3b8;
    border-bottom: 1px solid #1e293b;
}

.catalog-search-wrap {
    margin-bottom: 16px;
}

.catalog-search {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.88);
    background: rgba(15, 23, 42, 0.76);
    color: white;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.catalog-search:focus {
    border-color: rgba(96, 165, 250, 0.55);
    background: rgba(15, 23, 42, 0.94);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.catalog-search::placeholder {
    color: #94a3b8;
}

.logout-btn {
    margin-top: 6px;
    align-self: flex-end;

    padding: 6px 10px;
    border: none;
    border-radius: 8px;

    background: #b91c1c;
    color: white;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    background: #dc2626;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
    transform: translateY(-1px);
}

.right {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 180px;
    text-align: right;
    font-size: 12px;
    color: #cbd5e1;
    position: relative;
}

.user-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #1e293b;
    border-radius: 10px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-menu-toggle:hover {
    background: #111827;
    border-color: #334155;
}

.user-menu-arrow {
    font-size: 11px;
    color: #93c5fd;
    transition: transform 0.2s ease;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    padding: 6px;
    border: 1px solid #1e293b;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
    display: none;
    z-index: 200;
}

.user-dropdown.open {
    display: block;
}

.user-dropdown button {
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #e2e8f0;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-dropdown button:hover {
    background: #111827;
    color: white;
}

.user-dropdown button.danger {
    color: #fca5a5;
}

.user-dropdown button.danger:hover {
    background: #7f1d1d;
    color: white;
}

.session-status {
    color: #86efac;
    font-size: 11px;
}
.dashboard-card-radio {
    grid-column: span 4;
    position: relative;
    overflow: visible;
}

.radio-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #1e293b;
    border-radius: 12px;
    background: #0b1220;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-toggle:hover {
    background: #111827;
    border-color: #334155;
}

.radio-toggle-arrow {
    color: #93c5fd;
    transition: transform 0.2s ease;
}

.radio-toggle-arrow.open {
    transform: rotate(180deg);
}

.radio-list-wrapper {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    border-radius: 14px;
    background: transparent;
    margin-top: 0;
    padding: 0;
    border: 1px solid transparent;
    box-shadow: none;
    z-index: 14;
    transition:
        max-height 0.28s ease,
        opacity 0.2s ease,
        padding 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.radio-list-wrapper.open {
    max-height: none;
    opacity: 1;
    padding: 8px 0 0;
    overflow-y: visible;
    border-color: transparent;
    box-shadow: none;
}

.radio-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.radio-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: #0b1220;
    transition: all 0.2s ease;
}

.radio-item:hover {
    background: #111827;
    border-color: #334155;
}

.radio-item b {
    color: #f8fafc;
    font-size: 12px;
    min-width: 68px;
}

.radio-item span {
    flex: 1;
    color: #94a3b8;
    font-size: 12px;
    text-align: right;
}

.radio-item.ten b {
    color: #93c5fd;
}

.radio-item.danger {
    border-left: 3px solid #dc2626;
}

.radio-item.danger b {
    color: #fca5a5;
}
.documents-radio-wrap {
    margin-top: 16px;
    max-width: 520px;
}

.documents-radio-wrap .dashboard-card-radio {
    grid-column: auto;
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 520px));
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}

.documents-grid .documents-radio-wrap {
    margin-top: 0;
    max-width: none;
}

.documents-placeholder-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.documents-placeholder-card p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
}

#school .school-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#school .school-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#school .school-header-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#school .school-header h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-header p {
    margin: 0;
    max-width: 520px;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#school .school-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

#school .school-tab-btn {
    padding: 11px 16px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.92));
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#school .school-tab-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    color: #f8fafc;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

#school .school-tab-btn.active {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.26), rgba(29, 78, 216, 0.24));
    border-color: rgba(96, 165, 250, 0.5);
    color: #eff6ff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.16);
}

#school .school-content {
    display: block;
}

#school .school-panel {
    display: none;
}

#school .school-panel.active {
    display: block;
}

#school .school-panel-card {
    padding: 22px;
    border-radius: 20px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#school .school-panel-card h2 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-panel-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-test-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#school .school-test-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#school .school-test-card {
    border-radius: 20px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

#school .school-test-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

#school .school-test-card-header:hover {
    background: rgba(15, 23, 42, 0.82);
}

#school .school-test-card-header-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#school .school-test-card-header h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-test-card-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#school .school-test-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#school .school-test-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
}

#school .school-test-card-arrow {
    flex-shrink: 0;
    color: #93c5fd;
    font-size: 16px;
    transition: transform 0.2s ease;
}

#school .school-test-card.open .school-test-card-arrow {
    transform: rotate(180deg);
}

#school .school-test-card-content {
    display: none;
    padding: 0 20px 20px;
}

#school .school-test-card.open .school-test-card-content {
    display: block;
}

#school .school-test-card-content .school-test-shell {
    padding-top: 4px;
}

#school .school-test-lock {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
}

#school .school-test-lock-card {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: rgba(15, 23, 42, 0.72);
}

#school .school-test-lock-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-test-lock-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-test-lock-actions {
    display: flex;
    justify-content: flex-end;
}

#school .school-test-submitted {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
}

#school .school-test-submitted-card {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.82);
}

#school .school-test-submitted-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-test-submitted-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #cbd5e1;
}

#school .school-test-lock.hidden,
#school .school-test-release-content.hidden,
#school .school-test-submitted.hidden {
    display: none;
}

#school .school-test-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#school .school-test-header h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-test-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-test-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#school .school-test-question {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(15, 23, 42, 0.72);
}

#school .school-test-question h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-test-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#school .school-test-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.62);
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

#school .school-test-option:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#school .school-test-option input {
    margin-top: 2px;
    accent-color: #60a5fa;
}

#school .school-test-option span {
    font-size: 14px;
    line-height: 1.5;
    color: #dbe4f0;
}

#school .school-test-input,
#school .school-test-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#school .school-test-input:focus,
#school .school-test-textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#school .school-test-textarea {
    min-height: 110px;
    resize: vertical;
}

#school .school-test-actions {
    display: flex;
    justify-content: flex-end;
}

#school .school-test-submit {
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.4);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.32), rgba(29, 78, 216, 0.28));
    color: #eff6ff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

#school .school-test-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
    border-color: rgba(147, 197, 253, 0.55);
}

#school .school-test-status {
    display: none;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(30, 41, 59, 0.52);
    color: #dbeafe;
    font-size: 14px;
    line-height: 1.6;
}

#school .school-test-status.visible {
    display: block;
}

#school .school-file-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#school .school-file-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(15, 23, 42, 0.72);
}

#school .school-file-section-title {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cbd5e1;
}

#school .school-file-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#school .school-file-grid.compact {
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
}

#school .school-file-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#school .school-file-field.full {
    grid-column: 1 / -1;
}

#school .school-file-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#school .school-file-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#school .school-file-choice .school-test-option {
    min-height: 48px;
}

#school .school-test-head-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 14px;
}

#school .school-admin-module {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.25fr);
    gap: 18px;
    margin-top: 18px;
}

#school .school-admin-card {
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#school .school-admin-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

#school .school-admin-card-header h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-admin-card-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-admin-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#school .school-admin-list-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#school .school-admin-list-block:first-child {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    background: rgba(15, 23, 42, 0.48);
}

#school .school-admin-collapsible-section,
#school .school-admin-collapsible-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#school .school-admin-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

#school .school-admin-card-toggle {
    padding: 0;
}

#school .school-admin-toggle-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#school .school-admin-toggle h3,
#school .school-admin-toggle h4 {
    margin: 0;
    color: #f8fafc;
}

#school .school-admin-toggle p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-admin-toggle:hover .school-admin-toggle-title {
    color: #eff6ff;
}

#school .school-admin-toggle-arrow {
    flex-shrink: 0;
    color: #93c5fd;
    font-size: 16px;
    transition: transform 0.2s ease;
}

#school .school-admin-collapsible-content {
    display: none;
}

#school .school-admin-collapsible-section.open .school-admin-collapsible-content,
#school .school-admin-collapsible-card.open .school-admin-collapsible-content {
    display: block;
}

#school .school-admin-collapsible-section.open .school-admin-toggle-arrow,
#school .school-admin-collapsible-card.open .school-admin-toggle-arrow {
    transform: rotate(180deg);
}

#school .school-admin-list-block + .school-admin-list-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(51, 65, 85, 0.72);
}

#school .school-admin-list-title {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cbd5e1;
}

#school .school-tab-btn.has-notification {
    position: relative;
}

#school .school-admin-request-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.28);
    color: #fee2e2;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#school .school-admin-request-badge.visible {
    display: inline-flex;
}

#school .school-tabs .school-admin-request-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 2;
    pointer-events: none;
}

#school #schoolAdminRequestSection.training-test-requests-highlight {
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow:
        0 0 0 1px rgba(245, 158, 11, 0.14),
        0 16px 30px rgba(120, 53, 15, 0.14);
}

#school #schoolAdminRequestSection.training-test-requests-highlight .school-admin-card-toggle {
    border-color: rgba(245, 158, 11, 0.28);
    background: linear-gradient(180deg, rgba(120, 53, 15, 0.18), rgba(15, 23, 42, 0.92));
}

#school #schoolAdminRequestSection.training-test-requests-highlight .school-admin-toggle-title {
    color: #fde68a;
}

#school #schoolAdminRequestSection.training-test-requests-highlight .school-admin-toggle-arrow {
    color: #fbbf24;
}

#school .school-admin-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(15, 23, 42, 0.72);
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
    cursor: pointer;
}

#school .school-admin-item.active {
    border-color: rgba(96, 165, 250, 0.38);
    background: rgba(15, 23, 42, 0.92);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
}

#school .school-admin-item:hover {
    border-color: #334155;
    background: rgba(15, 23, 42, 0.88);
}

#school .school-admin-item.archived {
    background: rgba(10, 15, 28, 0.72);
    border-color: rgba(71, 85, 105, 0.72);
}

#school .school-admin-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#school .school-admin-item-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#school .school-admin-item-title h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-admin-item-title p,
#school .school-admin-item-meta span {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#school .school-admin-item-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

#school .school-admin-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#school .school-admin-status-pill.status-offen,
#school .school-admin-status-pill.status-eingereicht {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#school .school-admin-status-pill.status-inbearbeitung,
#school .school-admin-status-pill.status-in-pruefung {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#school .school-admin-status-pill.status-nachbesserung {
    color: #ffedd5;
    border-color: rgba(251, 146, 60, 0.3);
    background: rgba(154, 52, 18, 0.26);
}

#school .school-admin-status-pill.status-bestanden {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
}

#school .school-admin-status-pill.status-nichtbestanden,
#school .school-admin-status-pill.status-nicht-bestanden {
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.24);
    background: rgba(127, 29, 29, 0.24);
}

#school .school-admin-status-pill.status-archiviert {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(51, 65, 85, 0.32);
}

#school .school-admin-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#school .school-admin-empty {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.42);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

#school .school-archive-list,
#school .school-log-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#school .school-archive-item,
#school .school-log-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(15, 23, 42, 0.72);
}

#school .school-archive-item-top,
#school .school-log-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#school .school-archive-item-title,
#school .school-log-item-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#school .school-archive-item-title h4,
#school .school-log-item-title h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-archive-item-title p,
#school .school-log-item-title p,
#school .school-log-item-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-archive-item-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
}

#school .school-archive-item-meta div,
#school .school-log-item-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#school .school-archive-item-meta strong,
#school .school-log-item-meta strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

#school .school-archive-item-meta span,
#school .school-log-item-meta span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#school .school-archive-item-result {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.62);
    background: rgba(2, 6, 23, 0.36);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.7;
}

#school .school-log-item-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
}

#school .school-admin-status-pill.status-abgeschlossen {
    color: #dbeafe;
    border-color: rgba(59, 130, 246, 0.24);
    background: rgba(30, 64, 175, 0.24);
}

@media (max-width: 900px) {
    #school .school-archive-item-meta,
    #school .school-log-item-meta {
        grid-template-columns: 1fr;
    }
}

#school .school-request-card {
    margin-top: 18px;
}

#school #schoolArchiveSection {
    margin-top: 22px;
}

#school .school-admin-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#school .school-admin-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#school .school-admin-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

#leadership {
    display: none;
}

#leadership.active {
    display: block;
}

#leadership .leadership-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#leadership .leadership-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#leadership .leadership-header-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#leadership .leadership-header h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    color: #f8fafc;
}

#leadership .leadership-header p {
    margin: 0;
    max-width: 520px;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#leadership .leadership-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

#leadership .leadership-tab-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.88);
    background: rgba(15, 23, 42, 0.82);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

#leadership .leadership-tab-btn:hover {
    background: rgba(30, 41, 59, 0.92);
    border-color: #334155;
    color: #f8fafc;
    transform: translateY(-1px);
}

#leadership .leadership-tab-btn.active {
    background: rgba(30, 64, 175, 0.26);
    border-color: rgba(96, 165, 250, 0.36);
    color: #dbeafe;
}

#leadership .leadership-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#leadership .leadership-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#leadership .leadership-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#leadership .leadership-dashboard-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

#leadership .leadership-dashboard-card-wide {
    grid-column: 1 / -1;
}

#leadership .leadership-dashboard-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#leadership .leadership-dashboard-card-header h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: #f8fafc;
}

#leadership .leadership-dashboard-card-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-dashboard-card-value {
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: -0.03em;
}

#leadership .leadership-dashboard-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#leadership .leadership-dashboard-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.68);
}

#leadership .leadership-dashboard-item strong {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    color: #f8fafc;
}

#leadership .leadership-dashboard-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-dashboard-empty {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.42);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
}

#leadership .leadership-info-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

#leadership .leadership-info-display {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#leadership .leadership-info-entry {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#leadership .leadership-info-entry h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#leadership .leadership-info-entry p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#leadership .leadership-info-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#leadership .leadership-info-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#leadership .leadership-info-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#leadership .leadership-info-title,
#leadership .leadership-info-text {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#leadership .leadership-info-title:focus,
#leadership .leadership-info-text:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#leadership .leadership-info-text {
    min-height: 180px;
    resize: vertical;
}

#leadership .leadership-info-actions {
    display: flex;
    justify-content: flex-end;
}

#leadership .leadership-info-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-info-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-dismissals-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
}

#leadership .leadership-dismissals-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#leadership .leadership-dismissals-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#leadership .leadership-dismissals-field.full {
    grid-column: 1 / -1;
}

#leadership .leadership-dismissals-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#leadership .leadership-dismissals-field input,
#leadership .leadership-dismissals-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#leadership .leadership-dismissals-field input:focus,
#leadership .leadership-dismissals-field textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#leadership .leadership-dismissals-field textarea {
    min-height: 130px;
    resize: vertical;
}

#leadership .leadership-dismissals-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#leadership .leadership-dismissals-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-dismissals-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-dismissals-list {
    display: flex;
    flex-direction: column;
}

#leadership .leadership-dismissal-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#leadership .leadership-dismissal-entry + .leadership-dismissal-entry {
    margin-top: 12px;
}

#leadership .leadership-dismissal-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#leadership .leadership-dismissal-entry-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#leadership .leadership-dismissal-entry-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#leadership .leadership-dismissal-entry-title p,
#leadership .leadership-dismissal-entry-note {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-dismissal-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#leadership .leadership-dismissal-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#leadership .leadership-dismissal-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-dismissal-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#personnel .leadership-dismissals-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#personnel .leadership-dismissals-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#personnel .leadership-dismissals-field.full,
#personnel .leadership-dismissals-actions {
    grid-column: 1 / -1;
}

#personnel .leadership-dismissals-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#personnel .leadership-dismissals-field input,
#personnel .leadership-dismissals-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#personnel .leadership-dismissals-field textarea {
    min-height: 120px;
    resize: vertical;
}

#personnel .leadership-dismissals-actions,
#personnel .leadership-dismissal-entry-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

#personnel .leadership-dismissals-list {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
}

#personnel .leadership-dismissal-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#personnel .leadership-dismissal-entry + .leadership-dismissal-entry {
    margin-top: 12px;
}

#personnel .leadership-dismissal-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#personnel .leadership-dismissal-entry-title h3,
#personnel .leadership-dismissal-entry-title p,
#personnel .leadership-dismissal-entry-note {
    margin: 0;
}

#personnel .leadership-dismissal-entry-title h3 {
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#personnel .leadership-dismissal-entry-title p,
#personnel .leadership-dismissal-entry-note {
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#personnel .leadership-dismissal-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#personnel .leadership-dismissals-save,
#personnel .leadership-dismissal-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#leadership .leadership-protocol-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
}

#leadership .leadership-protocol-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#leadership .leadership-protocol-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#leadership .leadership-protocol-field.full {
    grid-column: 1 / -1;
}

#leadership .leadership-protocol-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#leadership .leadership-protocol-field input,
#leadership .leadership-protocol-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#leadership .leadership-protocol-field input:focus,
#leadership .leadership-protocol-field textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#leadership .leadership-protocol-field textarea {
    min-height: 140px;
    resize: vertical;
}

#leadership .leadership-protocol-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#leadership .leadership-protocol-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-protocol-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-protocol-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#leadership .leadership-protocol-entry + .leadership-protocol-entry {
    margin-top: 12px;
}

#leadership .leadership-protocol-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#leadership .leadership-protocol-entry-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#leadership .leadership-protocol-entry-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#leadership .leadership-protocol-entry-title p,
#leadership .leadership-protocol-preview,
#leadership .leadership-protocol-detail p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-protocol-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#leadership .leadership-protocol-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#leadership .leadership-protocol-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-protocol-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-protocol-detail {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(30, 41, 59, 0.92);
}

#leadership .leadership-protocol-detail.open {
    display: flex;
}

#leadership .leadership-protocol-detail strong {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #e2e8f0;
}

#leadership .leadership-notes-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 16px;
}

#leadership .leadership-notes-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#leadership .leadership-notes-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#leadership .leadership-notes-field.full {
    grid-column: 1 / -1;
}

#leadership .leadership-notes-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#leadership .leadership-notes-field input,
#leadership .leadership-notes-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#leadership .leadership-notes-field input:focus,
#leadership .leadership-notes-field textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#leadership .leadership-notes-field textarea {
    min-height: 150px;
    resize: vertical;
}

#leadership .leadership-notes-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#leadership .leadership-notes-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-notes-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-note-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#leadership .leadership-note-entry + .leadership-note-entry {
    margin-top: 12px;
}

#leadership .leadership-note-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#leadership .leadership-note-entry-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#leadership .leadership-note-entry-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#leadership .leadership-note-entry-title p,
#leadership .leadership-note-preview,
#leadership .leadership-note-detail p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-note-entry-date {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#leadership .leadership-note-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#leadership .leadership-note-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-note-btn:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-note-detail {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(30, 41, 59, 0.92);
}

#leadership .leadership-note-detail.open {
    display: flex;
}

#leadership .leadership-note-detail strong {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #e2e8f0;
}

#leadership .leadership-settings-shell {
    display: block;
}

#leadership .leadership-settings-form {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
    column-gap: 20px;
    row-gap: 20px;
}

#leadership .leadership-settings-form > .leadership-panel-card {
    min-width: 0;
    height: auto;
}

#leadership .leadership-agent-manage-card {
    grid-column: auto;
}

#leadership .leadership-settings-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#leadership .leadership-settings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#leadership .leadership-settings-field.full {
    grid-column: 1 / -1;
}

#leadership .leadership-settings-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#leadership .leadership-settings-field input,
#leadership .leadership-settings-field textarea,
#leadership .leadership-settings-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#leadership .leadership-settings-field input:focus,
#leadership .leadership-settings-field textarea:focus,
#leadership .leadership-settings-field select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#leadership .leadership-settings-field textarea {
    min-height: 120px;
    resize: vertical;
}

#leadership .leadership-settings-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.68);
}

#leadership .leadership-settings-card strong {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    color: #f8fafc;
}

#leadership .leadership-settings-card span {
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-settings-link-card {
    justify-content: center;
}

#leadership .leadership-settings-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

#leadership .leadership-settings-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#leadership .leadership-settings-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#leadership .leadership-agent-create-feedback {
    display: none;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.68);
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
    white-space: pre-line;
}

#leadership .leadership-agent-create-feedback.visible {
    display: block;
}

#leadership .leadership-agent-create-feedback.success {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
    color: #dcfce7;
}

#leadership .leadership-agent-manage-roles {
    position: relative;
    width: 100%;
}

#leadership .leadership-agent-manage-roles-toggle {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

#leadership .leadership-agent-manage-roles-toggle:hover,
#leadership .leadership-agent-manage-roles-toggle:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    outline: none;
}

#leadership .leadership-agent-manage-roles-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 340px;
    overflow: auto;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #1e293b;
    background: #020617;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
}

#leadership .leadership-agent-manage-roles-menu[hidden] {
    display: none;
}

#leadership .leadership-agent-manage-role-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.62);
}

#leadership .leadership-agent-manage-role-group:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

#leadership .leadership-agent-manage-role-title {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0;
}

#leadership .leadership-agent-manage-role-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

#leadership .leadership-agent-manage-role-option:hover {
    background: rgba(30, 41, 59, 0.72);
}

#leadership .leadership-agent-manage-role-option input {
    width: auto;
    min-width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 4px;
    margin: 0;
    accent-color: #60a5fa;
}

#leadership .leadership-agent-manage-head-roles {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.48);
}

#leadership .leadership-agent-manage-head-role-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    color: #dbeafe;
    font-size: 13px;
    line-height: 1.4;
}

#leadership .leadership-agent-manage-head-role-option input {
    width: auto;
    min-width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #60a5fa;
}

#leadership .leadership-archive-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#leadership .leadership-archive-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#leadership .leadership-archive-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

#leadership .leadership-archive-card:hover {
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(15, 23, 42, 0.86);
    transform: translateY(-1px);
}

#leadership .leadership-archive-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

#leadership .leadership-archive-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#leadership .leadership-archive-card-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #f8fafc;
}

#leadership .leadership-archive-card-title p,
#leadership .leadership-archive-card-body span {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#leadership .leadership-archive-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#leadership .leadership-archive-card-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#leadership .leadership-archive-card-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(30, 41, 59, 0.92);
}

#leadership .leadership-archive-card-body strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #e2e8f0;
}

#leadership .leadership-archive-document {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#leadership .leadership-archive-toolbar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#leadership .leadership-archive-toolbar button {
    padding: 9px 13px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#leadership .leadership-archive-detail-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.42);
}

#leadership .leadership-archive-detail-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#leadership .leadership-archive-detail-heading span {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

#leadership .leadership-archive-detail-heading h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    color: #f8fafc;
}

#leadership .leadership-archive-detail-heading p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#leadership .leadership-archive-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
}

#leadership .leadership-archive-detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#leadership .leadership-archive-detail-meta-item strong {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
}

#leadership .leadership-archive-detail-meta-item span {
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

#leadership .leadership-archive-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(30, 41, 59, 0.92);
}

#leadership .leadership-archive-section h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #f8fafc;
}

#leadership .leadership-archive-display {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#leadership .leadership-archive-evidence-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#leadership .leadership-archive-evidence-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.92);
    background: rgba(15, 23, 42, 0.72);
}

#leadership .leadership-archive-evidence-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#leadership .leadership-archive-evidence-card-header h4 {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: #f8fafc;
}

#leadership .leadership-archive-evidence-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#leadership .leadership-archive-evidence-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 700;
}

#leadership .leadership-archive-evidence-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

#leadership .leadership-archive-evidence-preview img {
    display: block;
    max-width: 320px;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.48);
    background: #f8fafc;
}

#leadership .leadership-archive-evidence-document {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.56);
    background: rgba(2, 6, 23, 0.38);
}

#leadership .leadership-archive-evidence-document button {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#leadership .leadership-panel {
    display: none;
}

#leadership .leadership-panel.active {
    display: block;
}

#leadership .leadership-panel-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

#leadership .leadership-panel-card h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    color: #f8fafc;
}

#leadership .leadership-panel-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #94a3b8;
}

@media (max-width: 900px) {
    #leadership .leadership-dashboard-grid {
        grid-template-columns: 1fr;
    }

    #leadership .leadership-dashboard-card-wide {
        grid-column: auto;
    }

    #leadership .leadership-info-shell {
        grid-template-columns: 1fr;
    }

    #leadership .leadership-dismissals-shell,
    #leadership .leadership-dismissals-fields,
    #leadership .leadership-protocol-shell,
    #leadership .leadership-protocol-fields,
    #leadership .leadership-notes-shell,
    #leadership .leadership-notes-fields,
    #leadership .leadership-settings-shell,
    #leadership .leadership-settings-form,
    #leadership .leadership-settings-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    #leadership .leadership-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #leadership .leadership-tabs {
        justify-content: flex-start;
    }
}

#school .school-admin-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#school .school-admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

#school .school-admin-detail-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#school .school-admin-detail-field.full {
    grid-column: 1 / -1;
}

#school .school-admin-detail-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#school .school-admin-detail-value {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
}

#school .school-admin-detail textarea,
#school .school-admin-detail select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#school .school-admin-detail textarea:focus,
#school .school-admin-detail select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#school .school-admin-detail textarea {
    min-height: 120px;
    resize: vertical;
}

#me {
    display: none;
}

#me.active {
    display: block;
}

#me .my-data-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#me .my-data-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 22px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#me .my-data-header h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    color: #f8fafc;
}

#me .my-data-header p {
    margin: 0;
    max-width: 560px;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#me .my-data-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#me .my-data-tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(30, 41, 59, 0.88);
    background: rgba(15, 23, 42, 0.74);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#me .my-data-tab-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(71, 85, 105, 0.92);
    background: rgba(15, 23, 42, 0.9);
    color: #f8fafc;
}

#me .my-data-tab-btn.active {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.22);
    color: #eff6ff;
    box-shadow: 0 10px 20px rgba(30, 64, 175, 0.12);
}

#me .my-data-tab-btn.has-badge {
    padding-right: 18px;
}

#me .my-data-tab-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.28);
    color: #fee2e2;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
}

#me .my-data-tab-badge.visible {
    display: inline-flex;
}

#me .my-data-panels {
    display: flex;
    flex-direction: column;
}

#me .my-data-panel {
    display: none;
}

#me .my-data-panel.active {
    display: block;
}

#me .my-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#me .my-data-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid #1e293b;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

#me .my-data-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#me .my-data-card-title h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: #f8fafc;
}

#me .my-data-card-title p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #94a3b8;
}

#me .my-data-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#me .my-data-empty {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    background: rgba(2, 6, 23, 0.44);
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
}

#me .my-data-profile-list,
#me .my-data-training-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#me .my-data-profile-row,
#me .my-data-training-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid rgba(30, 41, 59, 0.82);
}

#me .my-data-profile-row:first-child,
#me .my-data-training-row:first-child {
    border-top: none;
    padding-top: 0;
}

#me .my-data-profile-label,
#me .my-data-training-label {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    color: #cbd5e1;
}

#me .my-data-profile-value,
#me .my-data-training-value {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
}

#me .my-data-training-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#me .my-data-training-meta {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
}

#me .my-data-training-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0 4px;
}

#me .my-data-training-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.84);
    border: 1px solid rgba(51, 65, 85, 0.5);
}

#me .my-data-training-progress-track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

#me .my-data-training-promotion-hint,
.school-training-promotion-hint {
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.32);
    background: rgba(22, 101, 52, 0.18);
    color: #bbf7d0;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

#me .my-data-profile-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#me .my-data-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.78);
}

#me .my-data-profile-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#me .my-data-profile-name {
    margin: 0;
    font-size: 28px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#me .my-data-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#me .my-data-profile-rank-badge,
#me .my-data-profile-unit-badge,
#me .my-data-profile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.58);
    background: rgba(15, 23, 42, 0.82);
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
}

#me .my-data-profile-unit-badge {
    border-color: rgba(26, 188, 156, 0.28);
    background: rgba(15, 118, 110, 0.16);
    color: #ccfbf1;
}

#me .my-data-duty-status {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(51, 65, 85, 0.78);
}

#me .my-data-duty-status-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

#me .my-data-duty-status-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#me .my-data-duty-status-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#me .my-data-duty-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

#me .my-data-duty-status-badge.status-im-dienst {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(20, 83, 45, 0.24);
}

#me .my-data-duty-status-badge.status-bueroarbeit {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#me .my-data-duty-status-badge.status-ausser-dienst {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#me .my-data-duty-status-controls {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

#me .my-data-duty-status-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
    flex: 1 1 220px;
}

#me .my-data-duty-status-field label {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#me .my-data-duty-status-field select {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.86);
    background: rgba(15, 23, 42, 0.82);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.4;
}

#me .my-data-duty-status-save {
    min-height: 42px;
    padding: 10px 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(180deg, #1d4ed8, #1e3a8a);
    color: #eff6ff;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(30, 64, 175, 0.18);
}

#me .my-data-duty-status-save:hover {
    filter: brightness(1.05);
}

#me .my-data-duty-status-note {
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#me .my-data-training-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(51, 65, 85, 0.78);
}

#me .my-data-training-summary strong {
    font-size: 13px;
    line-height: 1.5;
    color: #f8fafc;
}

#me .my-data-training-status {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#me .my-data-training-status-overview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.78);
}

#me .my-data-training-status-overview p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#me .my-data-training-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.2);
    color: #dbeafe;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
}

#me .my-data-training-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#me .my-data-training-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.52), rgba(2, 6, 23, 0.44));
}

#me .my-data-training-section-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    color: #f8fafc;
}

#me .my-data-training-empty {
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
}

#me .my-data-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#me .my-data-status-pill.status-bestanden {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(20, 83, 45, 0.24);
}

#me .my-data-status-pill.status-offen,
#me .my-data-status-pill.status-keine-daten,
#me .my-data-status-pill.status-nicht-begonnen {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
}

#me .my-data-status-pill.status-in-bearbeitung {
    color: #dbeafe;
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.24);
}

#me .my-data-status-pill.status-nicht-bestanden {
    color: #ffedd5;
    border-color: rgba(251, 146, 60, 0.3);
    background: rgba(154, 52, 18, 0.26);
}

#me .my-data-time-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#me .my-data-time-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid rgba(30, 41, 59, 0.82);
}

#me .my-data-time-row:first-child {
    border-top: none;
    padding-top: 0;
}

#me .my-data-time-label {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    color: #cbd5e1;
}

#me .my-data-time-value {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
}

#me .my-data-service-time {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#me .my-data-service-time-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#me .my-data-service-time-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 136px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(2, 6, 23, 0.66));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#me .my-data-service-time-label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#me .my-data-service-time-value {
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

#me .my-data-service-time-hint {
    margin-top: auto;
    font-size: 12px;
    line-height: 1.6;
    color: #94a3b8;
}

#me .my-data-notes-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#me .my-data-notes-textarea {
    width: 100%;
    min-height: 190px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    background: rgba(2, 6, 23, 0.52);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.7;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
}

#me .my-data-notes-textarea:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#me .my-data-notes-actions {
    display: flex;
    justify-content: flex-end;
}

#me .my-data-notes-save {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.72);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}

#me .my-data-notes-save:hover {
    transform: translateY(-1px);
    border-color: #334155;
    background: rgba(15, 23, 42, 0.92);
}

#me .my-data-notes-save:focus-visible {
    outline: none;
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

#me .my-data-tasks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#me .my-data-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#me .my-data-task-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.62));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#me .my-data-task-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#me .my-data-task-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    color: #f8fafc;
}

#me .my-data-task-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cbd5e1;
    white-space: pre-wrap;
}

#me .my-data-task-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
}

#me .my-data-task-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#me .my-data-task-meta-item strong {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

#me .my-data-task-meta-item span {
    font-size: 13px;
    line-height: 1.6;
    color: #e2e8f0;
}

#me .my-data-priority-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
}

#me .my-data-priority-pill.priority-niedrig {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(51, 65, 85, 0.34);
    color: #e2e8f0;
}

#me .my-data-priority-pill.priority-normal {
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(30, 64, 175, 0.22);
    color: #dbeafe;
}

#me .my-data-priority-pill.priority-hoch {
    border-color: rgba(245, 158, 11, 0.26);
    background: rgba(120, 53, 15, 0.24);
    color: #fde68a;
}

#me .my-data-priority-pill.priority-kritisch {
    border-color: rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.26);
    color: #fecaca;
}

@media (max-width: 900px) {
    #me .my-data-task-meta {
        grid-template-columns: 1fr;
    }
}

#me .my-data-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid rgba(30, 41, 59, 0.82);
}

#me .my-data-row:first-child {
    border-top: none;
    padding-top: 0;
}

#me .my-data-row strong {
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
}

#me .my-data-row span {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    text-align: right;
}

#me .my-data-note-placeholder {
    min-height: 160px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.82);
    background: rgba(2, 6, 23, 0.46);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 900px) {
    #units .internal-guides-shell {
        grid-template-columns: 1fr;
    }

    #units .internal-guides-viewer {
        min-height: 520px;
    }

    #units .internal-info-dashboard {
        grid-template-columns: 1fr;
    }

    #personnel .personnel-file-document-images {
        grid-template-columns: 1fr;
    }

    #units .units-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #units .units-header-main {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    #units .units-tabs {
        justify-content: flex-start;
    }

    #units .units-internal-tabs {
        width: 100%;
    }

    #me .my-data-grid {
        grid-template-columns: 1fr;
    }
}

#school .school-admin-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#school .school-admin-note {
    display: none;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(30, 41, 59, 0.52);
    color: #dbeafe;
    font-size: 14px;
    line-height: 1.6;
}

#school .school-admin-note.visible {
    display: block;
}

#school .school-admin-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#school .school-admin-answer-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #1e293b;
    background: rgba(15, 23, 42, 0.72);
}

#school .school-admin-answer-item h4 {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-admin-answer-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #dbeafe;
    white-space: pre-wrap;
    word-break: break-word;
}

#school .school-schedule-card {
    margin-top: 18px;
}

#school .school-schedule-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#school .school-schedule-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#school .school-schedule-field.full {
    grid-column: 1 / -1;
}

#school .school-schedule-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#school .school-schedule-field input,
#school .school-schedule-field textarea,
#school .school-schedule-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#school .school-schedule-field input:focus,
#school .school-schedule-field textarea:focus,
#school .school-schedule-field select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#school .school-schedule-field textarea {
    min-height: 100px;
    resize: vertical;
}

#school .school-schedule-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

#school .school-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

#school .school-schedule-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    border-left: 4px solid rgba(148, 163, 184, 0.58);
    background: rgba(15, 23, 42, 0.72);
}

#school .school-schedule-item.category-pflichtausbildung {
    border-left-color: rgba(96, 165, 250, 0.82);
}
#school .school-schedule-item.category-wahlmodul {
    border-left-color: rgba(168, 85, 247, 0.82);
}
#school .school-schedule-item.category-pruefung {
    border-left-color: rgba(249, 115, 22, 0.86);
}
#school .school-schedule-item.category-einsatztraining {
    border-left-color: rgba(34, 197, 94, 0.78);
}
#school .school-schedule-item.category-theorie {
    border-left-color: rgba(34, 211, 238, 0.78);
}
#school .school-schedule-item.category-praxis {
    border-left-color: rgba(234, 179, 8, 0.86);
}
#school .school-schedule-item.category-besprechung {
    border-left-color: rgba(148, 163, 184, 0.72);
}
#school .school-schedule-item.category-sonstiges {
    border-left-color: rgba(100, 116, 139, 0.72);
}

#school .school-schedule-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#school .school-schedule-item-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#school .school-schedule-item-title h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-schedule-item-title p,
#school .school-schedule-item-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-schedule-item-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#school .school-schedule-item-badge.category-pflichtausbildung {
    border-color: rgba(96, 165, 250, 0.34);
    background: rgba(30, 64, 175, 0.28);
    color: #dbeafe;
}
#school .school-schedule-item-badge.category-wahlmodul {
    border-color: rgba(168, 85, 247, 0.34);
    background: rgba(88, 28, 135, 0.24);
    color: #e9d5ff;
}
#school .school-schedule-item-badge.category-pruefung {
    border-color: rgba(249, 115, 22, 0.36);
    background: rgba(124, 45, 18, 0.24);
    color: #fed7aa;
}
#school .school-schedule-item-badge.category-einsatztraining {
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(20, 83, 45, 0.24);
    color: #dcfce7;
}
#school .school-schedule-item-badge.category-theorie {
    border-color: rgba(34, 211, 238, 0.32);
    background: rgba(8, 47, 73, 0.28);
    color: #cffafe;
}
#school .school-schedule-item-badge.category-praxis {
    border-color: rgba(234, 179, 8, 0.34);
    background: rgba(113, 63, 18, 0.24);
    color: #fef3c7;
}
#school .school-schedule-item-badge.category-besprechung {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(51, 65, 85, 0.42);
    color: #e2e8f0;
}
#school .school-schedule-item-badge.category-sonstiges {
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(30, 41, 59, 0.72);
    color: #cbd5e1;
}

#school .school-schedule-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#school .school-schedule-empty {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.42);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

#school .school-training-card {
    margin-top: 18px;
}

#school .school-training-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#school .school-training-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#school .school-training-field.full {
    grid-column: 1 / -1;
}

#school .school-training-field label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    color: #cbd5e1;
}

#school .school-training-field input,
#school .school-training-field textarea,
#school .school-training-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.7);
    color: #f8fafc;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
}

#school .school-training-field input:focus,
#school .school-training-field textarea:focus,
#school .school-training-field select:focus {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#school .school-training-field textarea {
    min-height: 100px;
    resize: vertical;
}

#school .school-training-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

#school .school-training-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

#school .school-training-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #1e293b;
    background: rgba(15, 23, 42, 0.72);
}

#school .school-training-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

#school .school-training-item-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#school .school-training-item-title h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

#school .school-training-item-title p,
#school .school-training-item-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #94a3b8;
}

#school .school-training-item-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: rgba(30, 41, 59, 0.72);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#school .school-training-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#school .school-training-profile {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#school .school-training-profile-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.72);
}

#school .school-training-profile-head h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #f8fafc;
}

#school .school-training-profile-head p {
    margin: 4px 0 0;
    color: #94a3b8;
}

#school .school-training-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#school .school-training-profile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #1e293b;
    background: rgba(2, 6, 23, 0.38);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
}

#school .school-training-profile-toggle input {
    width: 16px;
    height: 16px;
    accent-color: #22c55e;
}

#school .school-training-profile-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(30, 41, 59, 0.72);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
}

#school .school-training-profile-status.done {
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(20, 83, 45, 0.24);
    color: #dcfce7;
}

#school .school-training-empty {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(71, 85, 105, 0.72);
    background: rgba(2, 6, 23, 0.42);
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    #school .school-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #school .school-tabs {
        justify-content: flex-start;
    }

    #school .school-file-grid,
    #school .school-file-grid.compact,
    #school .school-file-choice,
    #school .school-test-head-grid,
    #school .school-schedule-form,
    #school .school-training-form {
        grid-template-columns: 1fr;
    }

    #school .school-admin-module,
    #school .school-admin-detail-grid,
    #school .school-admin-item-meta {
        grid-template-columns: 1fr;
    }
}