:root {
    --bg: #f4efe5;
    --bg-deep: #ebe2d0;
    --paper: rgba(255, 252, 246, 0.9);
    --paper-strong: #fffdf9;
    --ink: #211b14;
    --muted: #68594a;
    --line: rgba(74, 55, 30, 0.12);
    --line-strong: rgba(74, 55, 30, 0.2);
    --accent: #cc6d2d;
    --accent-soft: rgba(204, 109, 45, 0.14);
    --forest: #2f6a5a;
    --forest-soft: rgba(47, 106, 90, 0.14);
    --steel: #3d6f8e;
    --steel-soft: rgba(61, 111, 142, 0.14);
    --warning: #b7791f;
    --warning-soft: rgba(183, 121, 31, 0.14);
    --danger: #b1493c;
    --danger-soft: rgba(177, 73, 60, 0.14);
    --muted-soft: rgba(124, 101, 72, 0.12);
    --shadow: 0 26px 70px rgba(62, 39, 16, 0.12);
    --shadow-soft: 0 18px 40px rgba(62, 39, 16, 0.08);
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --sidebar-width: 290px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: "Aptos", "Trebuchet MS", "Gill Sans", sans-serif;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 214, 158, 0.48), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(58, 104, 85, 0.16), transparent 22%),
        radial-gradient(circle at 50% 100%, rgba(61, 111, 142, 0.1), transparent 26%),
        linear-gradient(180deg, var(--bg) 0%, #f7f1e8 44%, var(--bg-deep) 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(80, 60, 35, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 60, 35, 0.025) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 92%);
}

h1,
h2,
h3,
h4,
strong,
dt {
    font-family: Georgia, Cambria, "Times New Roman", serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

svg {
    display: block;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.surface,
.notice,
.auth-card,
.metric-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
}

.surface {
    padding: 22px;
}

.surface::after,
.auth-card::after,
.metric-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 34%);
    pointer-events: none;
}

.notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
}

.notice.compact {
    border-radius: var(--radius-md);
}

.notice.success {
    background: rgba(235, 248, 242, 0.96);
    border-color: rgba(47, 106, 90, 0.2);
}

.notice.warning {
    background: rgba(255, 244, 228, 0.98);
    border-color: rgba(183, 121, 31, 0.22);
}

.notice.danger {
    background: rgba(255, 239, 235, 0.98);
    border-color: rgba(177, 73, 60, 0.22);
}

.notice span,
.notice li,
.surface-copy,
.empty-copy,
.stack-list small,
.activity-list p,
.activity-list small,
.event-feed p,
.event-feed small,
.event-feed time,
.data-table p,
.data-table small,
.detail-block p,
.auth-copy,
.auth-panel-copy,
.backup-item p,
.hero-main p {
    color: var(--muted);
}

.notice-list {
    margin: 8px 0 0;
    padding-left: 18px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button.primary {
    color: #fffaf5;
    background: linear-gradient(135deg, #c76026, #de883f);
    box-shadow: 0 14px 30px rgba(204, 109, 45, 0.24);
}

.button.button-soft {
    color: var(--ink);
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.62);
}

.button.button-danger {
    color: #fff8f6;
    background: linear-gradient(135deg, #a94437, #c05c4e);
    box-shadow: 0 14px 28px rgba(177, 73, 60, 0.22);
}

.button.button-mini {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 0.88rem;
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.6);
}

.wide-button {
    width: 100%;
}

.button-icon,
.mini-icon,
.nav-icon,
.brand-badge,
.metric-icon,
.status-chip .mini-icon,
.field-icon,
.event-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.button-icon svg,
.mini-icon svg,
.nav-icon svg,
.field-icon svg {
    width: 18px;
    height: 18px;
}

.brand-badge {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    color: #fffaf5;
    background: linear-gradient(135deg, #c76026, #df8f47);
    box-shadow: 0 18px 34px rgba(204, 109, 45, 0.22);
}

.brand-badge svg {
    width: 26px;
    height: 26px;
}

.status-chip,
.hero-chip,
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.hero-chip {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.54);
    border-color: rgba(116, 84, 48, 0.12);
}

.status-chip.success,
.badge.success {
    color: #225245;
    background: var(--forest-soft);
    border-color: rgba(47, 106, 90, 0.2);
}

.status-chip.warning,
.badge.warning {
    color: #8e5a14;
    background: var(--warning-soft);
    border-color: rgba(183, 121, 31, 0.22);
}

.badge.danger {
    color: #8b3b2f;
    background: var(--danger-soft);
    border-color: rgba(177, 73, 60, 0.22);
}

.badge.caution {
    color: #6b5f35;
    background: rgba(212, 190, 120, 0.18);
    border-color: rgba(212, 190, 120, 0.26);
}

.badge.muted {
    color: #655543;
    background: var(--muted-soft);
    border-color: rgba(124, 101, 72, 0.18);
}

.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-shell {
    width: min(1100px, 100%);
}

.auth-card {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.85fr);
    gap: 0;
    box-shadow: var(--shadow);
}

.auth-side,
.auth-panel {
    padding: 36px;
}

.auth-side {
    background:
        radial-gradient(circle at top right, rgba(255, 217, 167, 0.42), transparent 30%),
        linear-gradient(135deg, rgba(255, 246, 231, 0.96), rgba(255, 252, 246, 0.92));
}

.auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 253, 249, 0.98);
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-lockup h1,
.auth-panel h2,
.topbar h2,
.hero-main h3,
.surface-head h3,
.section-headline h3,
.panel-mini-head h4 {
    margin: 0;
}

.auth-copy {
    max-width: 48ch;
    margin: 22px 0 28px;
    line-height: 1.75;
}

.auth-feature-list {
    display: grid;
    gap: 14px;
}

.auth-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.58);
}

.auth-feature strong {
    display: block;
    margin-bottom: 5px;
}

.auth-feature small {
    color: var(--muted);
    line-height: 1.6;
}

.login-form {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

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

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100vh;
    padding: 28px 22px;
    border-right: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(255, 249, 240, 0.92), rgba(248, 240, 227, 0.86));
    backdrop-filter: blur(12px);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sidebar-brand h1 {
    font-size: 1.2rem;
}

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

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 16px;
    color: var(--muted);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.nav-item:hover {
    transform: translateX(2px);
    background: rgba(255, 255, 255, 0.52);
}

.nav-item.is-active {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
}

.nav-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--line);
}

.sidebar-note {
    margin-top: auto;
    padding: 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.65);
}

.sidebar-note small {
    display: block;
    margin-top: 12px;
    color: var(--muted);
    line-height: 1.6;
}

.main-content {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.topbar-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-actions,
.hero-inline-actions,
.filter-actions,
.form-actions,
.table-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.inline-form {
    display: inline-flex;
}

.menu-button {
    display: none;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.66);
    color: var(--ink);
}

.menu-button svg {
    width: 20px;
    height: 20px;
}

.hero-surface {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 18px;
    padding: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 208, 145, 0.32), transparent 24%),
        radial-gradient(circle at bottom left, rgba(47, 106, 90, 0.12), transparent 20%),
        linear-gradient(135deg, rgba(255, 249, 240, 0.96), rgba(255, 252, 246, 0.92));
}

.hero-main h3 {
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    line-height: 1.08;
    max-width: 18ch;
}

.hero-main p {
    max-width: 68ch;
    line-height: 1.78;
}

.hero-side {
    display: grid;
    gap: 12px;
}

.hero-side-card {
    padding: 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.64);
}

.hero-side-card span,
.metric-tile small,
.detail-grid dt,
.backup-item strong + p,
.surface-head p,
.panel-mini-head p {
    display: block;
}

.hero-side-card span,
.hero-side-card small,
.metric-tile p,
.detail-grid dt,
.detail-grid dd,
.backup-item p {
    color: var(--muted);
}

.hero-side-card strong {
    display: block;
    margin: 8px 0 6px;
    font-size: 1.7rem;
}

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

.metric-tile {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
}

.metric-icon {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    border: 1px solid transparent;
}

.metric-icon svg {
    width: 22px;
    height: 22px;
}

.metric-icon.success {
    color: var(--forest);
    background: var(--forest-soft);
    border-color: rgba(47, 106, 90, 0.18);
}

.metric-icon.accent {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: rgba(204, 109, 45, 0.18);
}

.metric-icon.danger {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: rgba(177, 73, 60, 0.18);
}

.metric-icon.warning {
    color: var(--warning);
    background: var(--warning-soft);
    border-color: rgba(183, 121, 31, 0.18);
}

.metric-icon.muted {
    color: #6d5d4d;
    background: var(--muted-soft);
    border-color: rgba(124, 101, 72, 0.18);
}

.metric-tile strong {
    display: block;
    margin: 8px 0 6px;
    font-size: 1.45rem;
}

.chart-grid,
.insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.chart-card,
.list-card,
.outlet-detail {
    padding: 22px;
}

.chart-card.wide {
    grid-column: span 2;
}

.surface-head,
.panel-mini-head,
.section-headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.surface-head {
    margin-bottom: 18px;
}

.section-block {
    display: grid;
    gap: 16px;
}

.section-split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
    gap: 16px;
}

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

.chart-canvas {
    width: 100%;
    height: 290px;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.stack-list,
.activity-list,
.event-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.stack-list li,
.event-feed li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.58);
}

.stack-list.compact li {
    padding: 12px 14px;
}

.activity-list li {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
}

.activity-list.compact li {
    padding: 10px 0;
}

.activity-list li:last-child {
    border-bottom: none;
}

.activity-dot {
    width: 11px;
    height: 11px;
    margin-top: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #e5a45b);
    box-shadow: 0 0 0 6px rgba(204, 109, 45, 0.12);
}

.filter-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 12px;
    margin-bottom: 18px;
}

.filter-form label,
.form-grid label,
.login-form label {
    display: grid;
    gap: 8px;
}

.filter-form label {
    position: relative;
}

.field-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.filter-form input,
.filter-form select {
    padding-left: 42px;
}

input,
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.82);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(204, 109, 45, 0.34);
    box-shadow: 0 0 0 4px rgba(204, 109, 45, 0.11);
    background: #ffffff;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.34);
}

.table-wrap.compact {
    max-height: 540px;
}

.data-table {
    width: 100%;
    min-width: 1020px;
    border-collapse: collapse;
}

.data-table.compact {
    min-width: 760px;
}

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

.data-table th {
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.54);
}

.data-table tr.is-selected {
    background: rgba(204, 109, 45, 0.08);
}

.table-empty {
    text-align: center;
    color: var(--muted);
}

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

.detail-grid div {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.6);
}

.detail-grid dt {
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.detail-grid dd {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
}

.detail-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}

.detail-block h4 {
    margin: 0 0 10px;
}

.action-surface {
    padding: 22px;
}

.action-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.action-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.58);
}

.action-tab.is-active {
    color: #fffaf5;
    border-color: transparent;
    background: linear-gradient(135deg, #c76026, #de883f);
    box-shadow: 0 12px 24px rgba(204, 109, 45, 0.18);
}

.action-panel {
    display: none;
}

.action-panel.is-active {
    display: block;
}

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

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

.backup-list {
    display: grid;
    gap: 14px;
}

.backup-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.58);
}

.backup-item.static {
    grid-template-columns: auto 1fr;
}

.backup-item strong {
    display: block;
    margin-bottom: 4px;
}

.event-feed li {
    justify-content: flex-start;
}

.event-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: var(--steel);
    background: var(--steel-soft);
    border: 1px solid rgba(61, 111, 142, 0.18);
}

.event-icon svg {
    width: 18px;
    height: 18px;
}

.event-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.event-feed time {
    display: inline-flex;
    margin-top: 10px;
}

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

    .section-split,
    .history-split,
    .settings-split {
        grid-template-columns: 1fr;
    }
}

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

    .sidebar {
        position: fixed;
        z-index: 30;
        inset: 0 auto 0 0;
        width: min(86vw, var(--sidebar-width));
        transform: translateX(-102%);
        transition: transform 0.24s ease;
        box-shadow: var(--shadow);
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .main-content {
        padding: 18px;
    }
}

@media (max-width: 980px) {
    .auth-card,
    .hero-surface,
    .chart-grid,
    .insight-grid,
    .filter-form,
    .form-grid,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .chart-card.wide {
        grid-column: span 1;
    }

    .topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar-actions {
        justify-content: flex-start;
    }

    .auth-side,
    .auth-panel,
    .action-surface,
    .chart-card,
    .list-card,
    .outlet-detail,
    .surface {
        padding-left: 18px;
        padding-right: 18px;
    }

    .hero-main h3 {
        max-width: none;
    }
}

@media (max-width: 720px) {
    .auth-body,
    .main-content {
        padding: 14px;
    }

    .metric-grid,
    .chart-grid,
    .insight-grid {
        grid-template-columns: 1fr;
    }

    .metric-tile {
        flex-direction: column;
    }

    .topbar-actions,
    .hero-inline-actions,
    .filter-actions,
    .form-actions,
    .table-action-group {
        flex-direction: column;
    }

    .button,
    .button.button-soft,
    .button.button-danger,
    .button.button-mini {
        width: 100%;
    }

    .backup-item,
    .backup-item.static {
        grid-template-columns: 1fr;
        justify-items: flex-start;
    }
}