:root {
    --font-sans: "Segoe UI Variable Text", "Avenir Next", "Segoe UI", sans-serif;
    --font-display: "Segoe UI Variable Display", "Avenir Next", "Segoe UI", sans-serif;
    --font-mono: 'Consolas', 'SFMono-Regular', monospace;
    --bg: #f2f4ef;
    --bg-accent: #dde4d7;
    --surface: rgba(255, 255, 255, 0.9);
    --surface-strong: #ffffff;
    --surface-muted: #ebeee7;
    --stroke: rgba(19, 30, 21, 0.12);
    --stroke-strong: rgba(19, 30, 21, 0.22);
    --text: #162113;
    --text-soft: #465145;
    --text-muted: #6f7a6e;
    --primary: #1b3b34;
    --primary-strong: #132923;
    --accent: #bb6a29;
    --accent-soft: rgba(187, 106, 41, 0.12);
    --success: #1f7a58;
    --warning: #9a6c18;
    --muted: #66705f;
    --danger: #a53f3f;
    --shadow-sm: 0 16px 36px rgba(28, 37, 31, 0.08);
    --shadow-lg: 0 32px 96px rgba(19, 29, 21, 0.16);
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
}

* {
    box-sizing: border-box;
}

html {
    background:
        radial-gradient(circle at top left, rgba(27, 59, 52, 0.16), transparent 32%),
        radial-gradient(circle at right, rgba(187, 106, 41, 0.12), transparent 28%),
        linear-gradient(180deg, #fafbf8 0%, var(--bg) 52%, #e9ede6 100%);
    color: var(--text);
    font-family: var(--font-sans);
}

body {
    min-height: 100vh;
    margin: 0;
}

a,
button,
input {
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.app-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: relative;
    padding: 32px 24px;
    background:
        linear-gradient(180deg, rgba(19, 41, 35, 0.98) 0%, rgba(28, 54, 47, 0.98) 100%);
    color: #f8fbff;
}

.sidebar::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top, rgba(187, 106, 41, 0.24), transparent 24%),
        linear-gradient(145deg, transparent 30%, rgba(255, 255, 255, 0.06) 100%);
    pointer-events: none;
}

.sidebar__inner,
.page,
.login-page__panel {
    position: relative;
    z-index: 1;
}

.brand {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 32px;
}

.brand__mark {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.08em;
    background: linear-gradient(145deg, rgba(187, 106, 41, 1), rgba(220, 156, 74, 0.94));
    color: #fff;
    box-shadow: 0 14px 34px rgba(187, 106, 41, 0.28);
}

.brand__title {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.brand__subtitle,
.sidebar__caption,
.eyebrow,
.meta {
    color: rgba(232, 240, 255, 0.72);
}

.brand__subtitle {
    margin: 6px 0 0;
    line-height: 1.5;
}

.sidebar__caption {
    margin: 28px 0 10px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nav-list {
    display: grid;
    gap: 8px;
}

.nav-link {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    color: rgba(248, 251, 255, 0.82);
    background: rgba(255, 255, 255, 0.02);
}

.nav-link:hover,
.nav-link:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.nav-link.is-active {
    color: #fff;
    border-color: rgba(187, 106, 41, 0.52);
    background: linear-gradient(135deg, rgba(187, 106, 41, 0.28), rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.9;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.icon--dashboard {
    mask-image: radial-gradient(circle at 30% 30%, black 24%, transparent 25%), radial-gradient(circle at 70% 30%, black 24%, transparent 25%), radial-gradient(circle at 30% 70%, black 24%, transparent 25%), radial-gradient(circle at 70% 70%, black 24%, transparent 25%);
    -webkit-mask-image: radial-gradient(circle at 30% 30%, black 24%, transparent 25%), radial-gradient(circle at 70% 30%, black 24%, transparent 25%), radial-gradient(circle at 30% 70%, black 24%, transparent 25%), radial-gradient(circle at 70% 70%, black 24%, transparent 25%);
}

.icon--posts {
    mask-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black);
    mask-size: 100% 22%, 100% 22%, 70% 22%;
    mask-position: center 15%, center 50%, left 85%;
    -webkit-mask-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black);
    -webkit-mask-size: 100% 22%, 100% 22%, 70% 22%;
    -webkit-mask-position: center 15%, center 50%, left 85%;
}

.icon--profile {
    mask-image: radial-gradient(circle at 50% 30%, black 22%, transparent 24%), radial-gradient(circle at 50% 120%, black 38%, transparent 40%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, black 22%, transparent 24%), radial-gradient(circle at 50% 120%, black 38%, transparent 40%);
}

.icon--settings {
    mask-image: radial-gradient(circle, transparent 28%, black 29% 45%, transparent 46%), conic-gradient(from 0deg, black 0deg 16deg, transparent 16deg 45deg, black 45deg 61deg, transparent 61deg 90deg, black 90deg 106deg, transparent 106deg 135deg, black 135deg 151deg, transparent 151deg 180deg, black 180deg 196deg, transparent 196deg 225deg, black 225deg 241deg, transparent 241deg 270deg, black 270deg 286deg, transparent 286deg 315deg, black 315deg 331deg, transparent 331deg 360deg);
    -webkit-mask-image: radial-gradient(circle, transparent 28%, black 29% 45%, transparent 46%), conic-gradient(from 0deg, black 0deg 16deg, transparent 16deg 45deg, black 45deg 61deg, transparent 61deg 90deg, black 90deg 106deg, transparent 106deg 135deg, black 135deg 151deg, transparent 151deg 180deg, black 180deg 196deg, transparent 196deg 225deg, black 225deg 241deg, transparent 241deg 270deg, black 270deg 286deg, transparent 286deg 315deg, black 315deg 331deg, transparent 331deg 360deg);
}

.sidebar__footer {
    margin-top: 28px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar__signals {
    display: grid;
    gap: 14px;
}

.sidebar__signals strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 0.95rem;
}

.page {
    padding: 30px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-sm);
}

.topbar__title h1,
.section-title,
.card-title,
.hero__title,
.login-card__title {
    font-family: var(--font-display);
    letter-spacing: -0.04em;
}

.topbar__title h1 {
    font-size: 2rem;
    font-weight: 700;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.badge,
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1;
}

.badge {
    background: rgba(27, 59, 52, 0.08);
    color: var(--primary);
}

.badge::before,
.status-pill::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
}

.status-pill--success {
    background: rgba(12, 143, 99, 0.12);
    color: var(--success);
}

.status-pill--warning {
    background: rgba(184, 114, 20, 0.12);
    color: var(--warning);
}

.status-pill--muted {
    background: rgba(102, 112, 137, 0.12);
    color: var(--muted);
}

.button,
.button-secondary,
.button-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 16px;
    font-weight: 600;
    border: 1px solid transparent;
}

.button {
    background: linear-gradient(135deg, var(--accent), #d49558);
    color: #fff;
    box-shadow: 0 16px 32px rgba(187, 106, 41, 0.24);
}

.button:hover,
.button:focus-visible {
    transform: translateY(-1px);
    outline: none;
}

.button-secondary {
    background: rgba(27, 59, 52, 0.08);
    border-color: rgba(27, 59, 52, 0.12);
    color: var(--primary);
}

.button-ghost {
    border-color: rgba(27, 59, 52, 0.12);
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.8);
}

.button-ghost:hover,
.button-ghost:focus-visible,
.button-secondary:hover,
.button-secondary:focus-visible {
    border-color: rgba(27, 59, 52, 0.22);
    outline: none;
}

.stack {
    display: grid;
    gap: 24px;
    margin-top: 24px;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
    gap: 24px;
}

.card {
    padding: 24px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.74);
    background: var(--surface);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

.card--accent {
    background:
        linear-gradient(135deg, rgba(27, 59, 52, 0.98), rgba(19, 41, 35, 0.96));
    color: #f8fbff;
    box-shadow: var(--shadow-lg);
}

.hero__title {
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 0.95;
    margin: 10px 0 16px;
}

.hero__copy {
    max-width: 42rem;
    font-size: 1.02rem;
    color: var(--text-soft);
}

.card--accent .hero__copy,
.card--accent .eyebrow,
.card--accent .meta {
    color: rgba(248, 251, 255, 0.78);
}

.metric-grid,
.grid-2,
.grid-3 {
    display: grid;
    gap: 20px;
}

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

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

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

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

.metric {
    padding: 20px;
    border-radius: 22px;
    border: 1px solid var(--stroke);
    background: var(--surface-strong);
}

.metric__value {
    display: block;
    margin-top: 12px;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.06em;
}

.section-title {
    font-size: 1.45rem;
    font-weight: 700;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    text-align: left;
    padding: 16px 0;
    border-bottom: 1px solid var(--stroke);
    vertical-align: top;
}

.table th {
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.list li {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.7);
}

.kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.kpi {
    min-width: 180px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.kpi strong {
    display: block;
    font-size: 1.2rem;
    color: #fff;
}

.signal-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.signal-list__item {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.72);
}

.signal-list__title {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--text);
}

.signal-list__item p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.profile-card {
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid var(--stroke);
    background: var(--surface);
}

.profile-card__header,
.row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.mono {
    font-family: var(--font-mono);
}

.muted {
    color: var(--text-muted);
}

.login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(27, 59, 52, 0.16), transparent 26%),
        radial-gradient(circle at bottom right, rgba(187, 106, 41, 0.14), transparent 22%),
        linear-gradient(180deg, #f7f8f4 0%, #eef1ea 100%);
}

.login-page__panel {
    display: grid;
    place-items: center;
    padding: 42px 24px;
}

.login-panel {
    width: min(100%, 430px);
    display: grid;
    gap: 20px;
}

.login-panel__intro {
    text-align: center;
}

.login-panel__title {
    margin: 10px 0 0;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 0.96;
    letter-spacing: -0.05em;
}

.login-panel__copy {
    margin: 12px auto 0;
    max-width: 28rem;
    color: var(--text-soft);
    line-height: 1.6;
}

.login-card {
    width: 100%;
    padding: 34px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-lg);
}

.check-field {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-top: 18px;
    color: var(--text-soft);
    font-size: 0.94rem;
}

.check-field input {
    width: 16px;
    height: 16px;
}

.field {
    display: grid;
    gap: 8px;
    margin-top: 20px;
}

.field label {
    font-size: 0.92rem;
    font-weight: 600;
}

.field input {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(27, 59, 52, 0.16);
    background: rgba(255, 255, 255, 0.86);
}

.field input:focus-visible {
    outline: 3px solid rgba(27, 59, 52, 0.18);
    border-color: rgba(27, 59, 52, 0.32);
}

.error {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(180, 54, 54, 0.2);
    background: rgba(180, 54, 54, 0.08);
    color: var(--danger);
}

.fineprint {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(19, 30, 21, 0.08);
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.panel-loading {
    min-height: 220px;
    justify-content: end;
}

.logout-form {
    display: inline;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 1180px) {
    .metric-grid,
    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero,
    .login-page {
        grid-template-columns: 1fr;
    }
}

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

    .sidebar {
        padding: 24px 20px;
    }

    .page {
        padding: 20px;
    }

    .grid-2,
    .metric-grid,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .topbar,
    .profile-card__header,
    .row {
        flex-direction: column;
        align-items: stretch;
    }

    .login-page__panel,
    .login-page__side {
        padding: 24px;
    }
}