:root {
    --brand: #3da2a0;
    --brand-dark: #2b7f7d;
    --brand-soft: rgba(61, 162, 160, 0.12);
    --ink: #0f172a;
    --ink-soft: #475569;
    --line: #e5edf4;
    --panel: rgba(255, 255, 255, 0.84);
    --panel-strong: #ffffff;
    --surface: #f4f8fb;
    --surface-2: #eef4f7;
    --shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
    --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.06);
    --radius: 22px;
    --radius-sm: 16px;
    --sidebar-width: 288px;
}

* { box-sizing: border-box; }

html, body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 20%, rgba(61,162,160,0.12), transparent 30%),
        radial-gradient(circle at 85% 10%, rgba(59,130,246,0.10), transparent 22%),
        linear-gradient(180deg, #f8fbfd 0%, var(--surface) 100%);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { text-decoration: none; }

img { max-width: 100%; }

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--sidebar-width);
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 18px;
    background: rgba(10, 15, 29, 0.94);
    color: #fff;
    box-shadow: 22px 0 45px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
}

.sidebar-brand-wrap {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 18px;
}

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

.sidebar-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(61,162,160,0.26), rgba(61,162,160,0.08));
    border: 1px solid rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px;
}

.sidebar-brand-logo img {
    max-height: 28px;
    object-fit: contain;
}

.sidebar-brand-kicker,
.topbar-kicker {
    display: block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .68rem;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
}

.topbar-kicker {
    color: #64748b;
    margin-bottom: 2px;
}

.sidebar-brand-title,
.topbar-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

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

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    color: rgba(255,255,255,0.78);
    border-radius: 16px;
    transition: .2s ease;
    font-weight: 600;
}

.sidebar-link:hover,
.sidebar-link.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(61,162,160,0.24), rgba(61,162,160,0.10));
    border: 1px solid rgba(61,162,160,0.2);
}

.sidebar-link-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.26);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.04);
}

.sidebar-link.active .sidebar-link-dot,
.sidebar-link:hover .sidebar-link-dot {
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(61,162,160,0.18);
}

.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}

.sidebar-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand), #50b8b6);
    color: white;
    font-weight: 800;
}

.sidebar-user-name { font-weight: 700; }
.sidebar-user-role { color: rgba(255,255,255,0.65); font-size: .85rem; }

.app-main {
    flex: 1;
    min-width: 0;
    padding: 20px;
}

.app-topbar {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow: var(--shadow-soft);
    border-radius: 20px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 1020;
}

.topbar-left,
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-topbar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}

.hamburger-line {
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 999px;
    display: block;
}

.app-content {
    padding-top: 20px;
}

.modern-alert {
    border: 0;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

.card,
.modal-content,
.offcanvas,
.table-responsive,
.list-group-item {
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
}

.card,
.modal-content,
.table-responsive {
    background: var(--panel);
    backdrop-filter: blur(12px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 18px 22px;
}

.card-body { padding: 22px; }

.table > :not(caption) > * > * {
    background: transparent !important;
    padding: 15px 16px;
    border-bottom-color: var(--line);
}

.table thead th {
    color: #64748b;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
}

.table tbody tr:hover {
    background: rgba(255,255,255,0.5);
}

.btn {
    border-radius: 14px;
    font-weight: 600;
    padding: .72rem 1.05rem;
    transition: .2s ease;
}

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

.btn-dark {
    background: linear-gradient(135deg, #111827 0%, #1f2a44 100%);
    border-color: transparent;
}

.btn-soft {
    color: var(--ink);
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--line);
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light {
    border-width: 1px;
}

.form-control,
.form-select,
textarea.form-control {
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.9);
    box-shadow: none;
    padding: .8rem .95rem;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(61,162,160,0.55);
    box-shadow: 0 0 0 .22rem rgba(61,162,160,0.12);
}

.form-label {
    color: var(--ink);
    font-weight: 700;
    margin-bottom: .55rem;
}

.badge {
    border-radius: 999px;
    padding: .52rem .72rem;
    font-weight: 700;
}

.dashboard-hero,
.page-header-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #18243d 48%, #12353c 100%);
    color: white;
}

.dashboard-hero::before,
.page-header-card::before {
    content: "";
    position: absolute;
    inset: auto -70px -70px auto;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(61,162,160,0.36) 0%, rgba(61,162,160,0) 72%);
}

.dashboard-kicker,
.panel-kicker {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 800;
}

.dashboard-kicker { color: rgba(255,255,255,0.64); }
.panel-kicker { color: var(--brand-dark); }

.dashboard-hero-title,
.page-header-title {
    font-size: clamp(1.9rem, 2.8vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
}

.dashboard-hero-text,
.page-header-text {
    color: rgba(255,255,255,0.82);
    max-width: 780px;
    line-height: 1.75;
}

.hero-action-pill {
    display: inline-flex;
    align-items: center;
    color: white;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    font-weight: 700;
}

.hero-action-pill:hover { color: white; background: rgba(255,255,255,0.16); }

.dashboard-hero-panel,
.dashboard-spotlight-card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 16px 18px;
    backdrop-filter: blur(12px);
}

.dashboard-spotlight-grid { display: grid; gap: 12px; }
.dashboard-hero-panel-label,
.dashboard-spotlight-label { color: rgba(255,255,255,0.7); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.dashboard-hero-panel-name,
.dashboard-spotlight-value { font-size: 1.3rem; font-weight: 800; }
.dashboard-hero-panel-role,
.dashboard-spotlight-note { color: rgba(255,255,255,0.78); }

.dashboard-stat-card {
    min-height: 162px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.82) 100%);
}

.dashboard-stat-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #64748b;
    font-weight: 800;
    margin-bottom: 12px;
}

.dashboard-stat-value {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 10px;
}

.dashboard-stat-footer { color: #64748b; }

.dashboard-stat-glow {
    position: absolute;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    right: -24px;
    top: -24px;
    opacity: .18;
}
.dashboard-stat-teal .dashboard-stat-glow { background: var(--brand); }
.dashboard-stat-blue .dashboard-stat-glow { background: #3b82f6; }
.dashboard-stat-violet .dashboard-stat-glow { background: #8b5cf6; }
.dashboard-stat-amber .dashboard-stat-glow { background: #f59e0b; }
.dashboard-stat-slate .dashboard-stat-glow { background: #64748b; }

.dashboard-panel .card-header strong { font-size: 1rem; }
.dashboard-table td:first-child,
.dashboard-table th:first-child { padding-left: 22px; }
.dashboard-table td:last-child,
.dashboard-table th:last-child { padding-right: 22px; }

.report-meta-card,
.metric-card,
.info-soft-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 8px 20px rgba(15,23,42,0.04);
}

.report-section {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
    padding: 18px;
}

.report-content {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 16px;
    line-height: 1.72;
    text-align: left !important;
}

.report-section-title {
    text-align: left !important;
    display: block;
    margin: 0 0 12px;
    font-weight: 800;
    color: var(--ink);
}

.filter-form,
.report-filter-form {
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.72));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 18px;
}

.modal {
    --bs-modal-width: 920px;
}

.modal-dialog {
    margin: 1rem auto;
}

.modal-content {
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--line);
    padding: 18px 22px;
    background: rgba(255,255,255,0.88);
}

.modal-body {
    padding: 22px;
    max-height: calc(100vh - 190px);
    overflow-y: auto;
}

.modal-title,
.modal-header h5,
.modal-header h6,
.modal-header .h5,
.modal-header .h6 {
    text-align: left !important;
}

.modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
}

.modal-open-soft {
    overflow: hidden;
}

.app-offcanvas {
    background: #0f172a;
    color: white;
}

.app-offcanvas .offcanvas-header {
    border-color: rgba(255,255,255,0.08) !important;
}

.app-offcanvas .btn-close {
    filter: invert(1);
}

.login-wrapper {
    min-height: 100vh;
    padding: 28px 16px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at top left, rgba(61,162,160,0.16), transparent 25%),
        linear-gradient(180deg, #f7fbfd 0%, #eef5f8 100%);
}

.login-card {
    width: 100%;
    max-width: 1040px;
    overflow: hidden;
    border-radius: 32px;
    border: 1px solid rgba(226,232,240,0.9);
    background: rgba(255,255,255,0.9);
    box-shadow: var(--shadow);
}

.login-split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 680px;
}

.login-brand-panel {
    position: relative;
    padding: 42px;
    background: linear-gradient(135deg, #0f172a 0%, #17243d 46%, #11343c 100%);
    color: white;
}

.login-brand-panel::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -100px;
    top: -80px;
    background: radial-gradient(circle, rgba(61,162,160,0.36) 0%, rgba(61,162,160,0) 70%);
}

.login-brand-logo-wrap {
    width: 210px;
    padding: 18px 22px;
    border-radius: 24px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    margin-bottom: 28px;
}

.login-logo { width: 100%; height: auto; object-fit: contain; }
.login-brand-title { font-size: clamp(2rem, 3vw, 3.25rem); font-weight: 900; line-height: 1.02; max-width: 420px; }
.login-brand-text { color: rgba(255,255,255,0.8); margin-top: 18px; line-height: 1.8; max-width: 480px; }
.login-brand-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.login-brand-pill { padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.08); color: white; font-weight: 700; font-size: .88rem; }

.login-form-panel {
    padding: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form-wrap {
    width: 100%;
    max-width: 380px;
}

.login-eyebrow {
    color: var(--brand-dark);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.login-title { font-size: 2rem; font-weight: 800; margin-bottom: 10px; }
.login-subtitle { color: var(--ink-soft); line-height: 1.75; margin-bottom: 24px; }
.login-meta-note { color: #64748b; font-size: .92rem; }
.login-help-card {
    margin-top: 18px;
    border-radius: 18px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7fb 100%);
    border: 1px solid var(--line);
}

@media (max-width: 1199.98px) {
    .app-main { padding: 16px; }
    .app-topbar { padding: 12px 14px; }
}

@media (max-width: 991.98px) {
    .app-main { width: 100%; }
    .app-content { padding-top: 16px; }
    .login-split { grid-template-columns: 1fr; }
    .login-brand-panel { min-height: 300px; }
}

@media (max-width: 767.98px) {
    .app-main { padding: 12px; }
    .app-topbar {
        padding: 12px;
        border-radius: 16px;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .topbar-actions { width: 100%; justify-content: stretch; }
    .topbar-actions .btn { flex: 1; }
    .card-body,
    .modal-body,
    .modal-header,
    .modal-footer,
    .card-header { padding: 16px; }
    .table > :not(caption) > * > * { padding: 12px 14px; }
    .modal {
        --bs-modal-width: 100%;
    }
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    .modal-content {
        min-height: 100vh;
        border-radius: 0;
    }
    .login-brand-panel,
    .login-form-panel { padding: 26px 20px; }
}

@media (max-width: 575.98px) {
    .dashboard-hero-title,
    .page-header-title,
    .login-title { font-size: 1.65rem; }
    .dashboard-hero-panel,
    .dashboard-spotlight-card,
    .dashboard-stat-card,
    .report-section,
    .filter-form { border-radius: 18px; }
}

/* ===== Dashboard revamp: ClickUp / Notion-inspired polish ===== */
.dashboard-hero {
    background:
        radial-gradient(circle at top right, rgba(61,162,160,0.20), transparent 28%),
        linear-gradient(135deg, #0f172a 0%, #151f35 44%, #132837 100%);
}
.dashboard-stat-card,
.metric-soft-card,
.dashboard-panel,
.builder-panel {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(226,232,240,0.95);
    box-shadow: 0 18px 34px rgba(15,23,42,0.06);
}
.dashboard-panel .card-header,
.builder-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dashboard-panel .card-header {
    padding-bottom: 12px;
}
.dashboard-table tbody tr {
    transition: transform .16s ease, background-color .16s ease;
}
.dashboard-table tbody tr:hover {
    transform: translateY(-1px);
}
.metric-soft-card .card-body {
    position: relative;
    overflow: hidden;
}
.metric-soft-card .card-body::after {
    content: "";
    position: absolute;
    right: -18px;
    top: -28px;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(61,162,160,0.14) 0%, rgba(61,162,160,0) 70%);
}
.metric-soft-label {
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 800;
}
.metric-soft-value {
    font-size: clamp(1.8rem, 2.6vw, 2.35rem);
    font-weight: 900;
    line-height: 1.1;
    margin-top: 10px;
}
.metric-soft-note { color: #64748b; margin-top: 8px; }

/* ===== Weekly builder ===== */
.weekly-builder-modal-content { min-height: 88vh; }
.weekly-builder-banner {
    background: linear-gradient(135deg, rgba(61,162,160,0.12), rgba(59,130,246,0.08));
    border: 1px solid rgba(61,162,160,0.16);
    border-radius: 20px;
    padding: 18px 20px;
}
.weekly-builder-banner-title {
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--ink);
}
.weekly-builder-banner-text { color: var(--ink-soft); line-height: 1.7; }
.builder-panel {
    border-radius: 22px;
    padding: 18px;
}
.builder-panel-scroll { min-height: 100%; }
.builder-panel-kicker {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 800;
    color: var(--brand-dark);
    margin-bottom: 4px;
}
.builder-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(61,162,160,0.10);
    color: var(--brand-dark);
    font-weight: 700;
    font-size: .82rem;
}
.weekly-empty-state {
    display: grid;
    place-items: center;
    min-height: 320px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(248,251,255,0.95));
    color: #64748b;
    padding: 24px;
}
.weekly-preview-wrap {
    display: grid;
    gap: 14px;
}
.weekly-preview-item {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.weekly-preview-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}
.weekly-preview-date { font-weight: 800; color: var(--ink); }
.weekly-preview-hours {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15,23,42,0.06);
    font-weight: 700;
    color: #475569;
}
.weekly-preview-body { display: grid; gap: 12px; }
.weekly-preview-label {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #64748b;
    font-weight: 800;
    margin-bottom: 6px;
}
.weekly-preview-copy {
    border: 1px solid rgba(226,232,240,0.95);
    border-radius: 14px;
    padding: 12px 13px;
    background: #fff;
    line-height: 1.65;
}
.compare-card,
.compare-mini-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    min-height: 118px;
}
.compare-card-muted { opacity: .78; }
.compare-label {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .72rem;
    color: #64748b;
    font-weight: 800;
    margin-bottom: 10px;
}
.compare-value,
.compare-mini-value {
    font-size: 1.6rem;
    line-height: 1.1;
    font-weight: 900;
    color: var(--ink);
    margin-bottom: 8px;
}
.compare-note { color: #64748b; line-height: 1.6; }
.compare-mini-card-up .compare-mini-value { color: #16a34a; }
.compare-mini-card-down .compare-mini-value { color: #dc2626; }
.compare-mini-card-flat .compare-mini-value { color: #475569; }
.weekly-editor {
    min-height: 120px;
    resize: vertical;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

/* Stronger modal responsiveness */
.modal-dialog.modal-xl { --bs-modal-width: 1140px; }
.modal-footer {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}
.modal-footer .btn { min-width: 132px; }
.report-meta-card,
.report-content,
.weekly-preview-copy,
.compare-card,
.compare-mini-card { text-align: left !important; }

@media (max-width: 991.98px) {
    .weekly-builder-modal-content { min-height: auto; }
}

@media (max-width: 767.98px) {
    .weekly-empty-state { min-height: 220px; }
    .compare-value,
    .compare-mini-value { font-size: 1.3rem; }
    .modal-footer .btn { width: 100%; }
}

/* ===== v24 visual refresh ===== */
:root {
    --brand: #0f766e;
    --brand-dark: #115e59;
    --brand-soft: rgba(15,118,110,0.12);
    --ink: #0f172a;
    --ink-soft: #475569;
    --line: #dbe5eb;
    --panel: rgba(255,255,255,0.96);
    --panel-strong: #ffffff;
    --surface: #f6f8fb;
    --surface-2: #edf2f7;
    --shadow: 0 24px 60px rgba(2, 8, 23, 0.10);
    --shadow-soft: 0 12px 28px rgba(2, 8, 23, 0.08);
}
body {
    background:
        radial-gradient(circle at top left, rgba(15,118,110,0.12), transparent 26%),
        radial-gradient(circle at top right, rgba(14,165,233,0.08), transparent 20%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}
.app-sidebar {
    background: linear-gradient(180deg, #0b1325 0%, #0f172a 56%, #112233 100%);
    box-shadow: 16px 0 40px rgba(2, 8, 23, 0.18);
}
.sidebar-link:hover, .sidebar-link.active {
    background: linear-gradient(135deg, rgba(15,118,110,0.28), rgba(34,197,94,0.10));
    border: 1px solid rgba(94, 234, 212, 0.18);
}
.app-topbar {
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(219,229,235,0.95);
    box-shadow: 0 18px 36px rgba(2, 8, 23, 0.08);
}
.btn-dark,
.btn-brand {
    background: linear-gradient(135deg, #0f172a 0%, #0f766e 100%);
    border: 0;
    color: #fff;
}
.btn-dark:hover,
.btn-brand:hover { color: #fff; filter: brightness(1.04); }
.btn-soft {
    background: #f8fafc;
    border: 1px solid #d7e0e8;
    color: var(--ink);
}
.card,
.page-header-card,
.metric-soft-card,
.dashboard-panel,
.builder-panel,
.filter-form,
.report-section,
.report-meta-card,
.weekly-preview-item,
.compare-card,
.compare-mini-card {
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(219,229,235,0.92) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,0.06);
}
.table thead th {
    color: #475569;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
}
.form-control,
.form-select,
textarea.form-control {
    border: 1px solid #d7e0e8;
    background: #fff;
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: rgba(15,118,110,0.55);
    box-shadow: 0 0 0 .2rem rgba(15,118,110,.14);
}
.modal { z-index: 2000; --bs-modal-width: 960px; }
.modal-backdrop { z-index: 1990; }
.modal-dialog {
    margin: 1.5rem auto;
    max-width: min(960px, calc(100vw - 2rem));
}
.modal-dialog.modal-xl {
    max-width: min(1140px, calc(100vw - 2rem));
}
.modal-content {
    border: 1px solid rgba(219,229,235,0.92);
    border-radius: 24px;
    box-shadow: 0 28px 64px rgba(2,8,23,0.22);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
    overflow: hidden;
}
.modal-header, .modal-footer {
    background: rgba(248,250,252,0.96);
    border-color: rgba(219,229,235,0.92);
}
.modal-header {
    align-items: flex-start;
}
.modal-title, .modal-header h5, .modal-header h6, .modal-header .small, .report-section-title,
.report-meta-card, .report-meta-card .text-muted, .report-content, .weekly-preview-copy,
.weekly-preview-label, .compare-label, .compare-note {
    text-align: left !important;
}
.modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.modal-footer {
    position: sticky;
    bottom: 0;
    justify-content: flex-end;
    gap: 12px;
}
.modal-footer .btn { min-width: 132px; }
#weeklyPreviewContent,
#weeklyCompareCards,
#weeklyBuilderMessage { width: 100%; }
.weekly-builder-modal-content {
    min-height: auto;
}
.report-tab-chip.active {
    background: linear-gradient(135deg, rgba(15,118,110,0.16), rgba(14,165,233,0.10));
    border-color: rgba(15,118,110,0.18);
    color: var(--brand-dark);
}
@media (max-width: 767.98px) {
    .modal-dialog,
    .modal-dialog.modal-xl {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    .modal-content {
        min-height: 100vh;
        border-radius: 0;
    }
    .modal-footer .btn {
        width: 100%;
        min-width: 0;
    }
}