:root {
    --bg: #071a29;
    --bg-2: #0a2436;
    --panel: rgba(8, 29, 45, 0.88);
    --line: rgba(61, 182, 208, 0.18);
    --text: #eff7f8;
    --muted: #9fb9c2;
    --accent: #21cfb3;
    --accent-2: #1798cf;
    --danger: #ff7a86;
    --warn: #ffd36e;
    --ok: #79e3a4;
}

* { box-sizing: border-box; }
body.extranet-body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top right, rgba(33, 207, 179, 0.14), transparent 28%),
        linear-gradient(135deg, var(--bg) 0%, #0a2133 48%, #071523 100%);
}
.extranet-shell { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; }
.extranet-sidebar {
    background: rgba(2, 14, 22, 0.94);
    border-right: 1px solid var(--line);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.extranet-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
}
.extranet-brand img { width: 40px; height: 40px; object-fit: contain; }
.extranet-account {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    display: grid;
    gap: 4px;
}
.extranet-account span, .extranet-account small, .extranet-muted { color: var(--muted); }
.extranet-nav { display: grid; gap: 8px; }
.extranet-nav-link,
.extranet-logout,
.extranet-back-public,
.extranet-button,
.extranet-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid var(--line);
    background: rgba(7, 28, 43, 0.78);
    color: var(--text);
    cursor: pointer;
}
.extranet-nav-link.is-active,
.extranet-button,
.extranet-link-button {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #031b26;
    font-weight: 700;
}
.extranet-main { min-width: 0; padding: 28px; }
.extranet-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}
.extranet-header-links,
.extranet-login-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.extranet-kicker {
    display: inline-block;
    font-size: .76rem;
    letter-spacing: .22em;
    color: #8cdce5;
    margin-bottom: 8px;
}
.extranet-header h1 { margin: 0; font-size: 2.2rem; }
.extranet-alert {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    margin-bottom: 18px;
}
.extranet-alert-success { background: rgba(121, 227, 164, 0.14); border-color: rgba(121, 227, 164, 0.3); }
.extranet-alert-error { background: rgba(255, 122, 134, 0.12); border-color: rgba(255, 122, 134, 0.3); }
.extranet-grid { display: grid; gap: 18px; }
.extranet-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.extranet-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.extranet-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
    overflow: hidden;
}
.extranet-card h2, .extranet-card h3, .extranet-card h4 { margin-top: 0; }
.extranet-stat { font-size: 2rem; font-weight: 800; }
.extranet-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
.extranet-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.extranet-table th, .extranet-table td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    vertical-align: top;
}
.extranet-chip {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .85rem;
    background: rgba(255,255,255,.08);
}
.extranet-chip.ok { color: var(--ok); background: rgba(121, 227, 164, 0.14); }
.extranet-chip.warn { color: var(--warn); background: rgba(255, 211, 110, 0.14); }
.extranet-chip.danger { color: var(--danger); background: rgba(255, 122, 134, 0.14); }
.extranet-list { display: grid; gap: 12px; }
.extranet-list-item {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.extranet-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.extranet-empty {
    padding: 16px;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,.14);
    color: var(--muted);
    background: rgba(255,255,255,.02);
}
.extranet-timeline {
    display: grid;
    gap: 12px;
}
.extranet-timeline-item {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.extranet-timeline-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.extranet-log-actor {
    color: var(--muted);
    margin-bottom: 10px;
}
.extranet-log-lines {
    display: grid;
    gap: 8px;
}
.extranet-log-line {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.extranet-log-label {
    color: var(--muted);
    font-size: .92rem;
}
.extranet-log-value {
    color: var(--text);
    word-break: break-word;
}
.extranet-inline-form {
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.extranet-form-row { display: grid; gap: 8px; margin-bottom: 14px; }
.extranet-form-row input,
.extranet-form-row textarea,
.extranet-form-row select {
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(3, 15, 24, 0.82);
    color: var(--text);
}
.extranet-form-row textarea { min-height: 140px; resize: vertical; }
.extranet-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.extranet-login-card {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid var(--line);
    background: rgba(4, 18, 29, 0.92);
}
.extranet-login-side,
.extranet-login-form {
    padding: 36px;
}
.extranet-login-side {
    background: linear-gradient(145deg, rgba(5, 24, 38, 0.95), rgba(7, 37, 58, 0.92));
}
@media (max-width: 1100px) {
    .extranet-shell, .extranet-grid.cols-2, .extranet-login-card { grid-template-columns: 1fr; }
    .extranet-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .extranet-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 20px;
    }
    .extranet-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .extranet-main {
        padding: 20px;
    }
    .extranet-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .extranet-header-links,
    .extranet-login-links {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .extranet-login-wrap {
        padding: 16px;
    }
    .extranet-login-side,
    .extranet-login-form,
    .extranet-card {
        padding: 18px;
    }
    .extranet-main {
        padding: 14px;
    }
    .extranet-grid.cols-4,
    .extranet-grid.cols-2 {
        grid-template-columns: 1fr;
    }
    .extranet-nav {
        grid-template-columns: 1fr;
    }
    .extranet-nav-link,
    .extranet-logout,
    .extranet-back-public,
    .extranet-button,
    .extranet-link-button {
        width: 100%;
    }
    .extranet-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .extranet-actions > * {
        width: 100%;
    }
    .extranet-timeline-meta {
        display: grid;
        grid-template-columns: 1fr;
        align-items: flex-start;
    }
    .extranet-log-line {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .extranet-brand {
        font-size: .95rem;
    }
    .extranet-brand img {
        width: 34px;
        height: 34px;
    }
    .extranet-header h1 {
        font-size: 1.7rem;
    }
    .extranet-stat {
        font-size: 1.7rem;
    }
}