:root {
    --sipas-ink: #172033;
    --sipas-ink-2: #253149;
    --sipas-muted: #647084;
    --sipas-soft: #8b95a7;
    --sipas-canvas: #f3f4f6;
    --sipas-surface: #ffffff;
    --sipas-line: #dfe3e8;
    --sipas-line-strong: #cdd3db;
    --sipas-red: #df2027;
    --sipas-red-dark: #b8181e;
    --sipas-red-soft: #fff0f1;
    --sipas-green: #147a4b;
    --sipas-green-soft: #eaf7f0;
    --sipas-amber: #a86405;
    --sipas-amber-soft: #fff6e5;
    --sipas-blue: #1f5fae;
    --sipas-blue-soft: #edf4fc;
    --sipas-shadow: 0 14px 40px rgba(23, 32, 51, .08);
    --sipas-shadow-sm: 0 5px 16px rgba(23, 32, 51, .07);
    --sipas-radius: 16px;
    --sipas-radius-sm: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--sipas-ink);
    background: var(--sipas-canvas);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

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

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--sipas-line);
}

.app-topbar-inner {
    max-width: 1480px;
    height: 76px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    text-decoration: none;
}

.app-brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--sipas-red);
    color: #fff;
    border-radius: 9px 9px 9px 2px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.app-brand-copy { display: grid; line-height: 1.15; }
.app-brand-copy strong { font-size: 15px; letter-spacing: .06em; }
.app-brand-copy small { margin-top: 3px; color: var(--sipas-muted); font-size: 10px; }

.app-nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 3px;
    margin-left: auto;
}

.app-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    color: #536075;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.app-nav a::after {
    content: "";
    position: absolute;
    height: 3px;
    left: 13px;
    right: 13px;
    bottom: 0;
    background: transparent;
}

.app-nav a:hover, .app-nav a.active { color: var(--sipas-ink); }
.app-nav a.active::after { background: var(--sipas-red); }
.app-nav i { font-size: 13px; }

.app-account {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 20px;
    border-left: 1px solid var(--sipas-line);
}

.app-user { display: flex; align-items: center; gap: 9px; margin-right: 2px; }
.app-user-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--sipas-ink);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}
.app-user-copy { display: grid; line-height: 1.15; }
.app-user-copy strong { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.app-user-copy small { margin-top: 3px; color: var(--sipas-muted); font-size: 10px; }

.app-icon-button, .app-mobile-toggle {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--sipas-line);
    background: #fff;
    color: var(--sipas-muted);
    border-radius: 9px;
    cursor: pointer;
    text-decoration: none;
}
.app-icon-button:hover, .app-mobile-toggle:hover { border-color: var(--sipas-line-strong); color: var(--sipas-red); }
.app-mobile-toggle { display: none; margin-left: auto; }
.app-mobile-panel { display: none; }

.app-main {
    width: min(100% - 40px, 1420px);
    min-height: calc(100vh - 150px);
    margin: 0 auto;
    padding: 34px 0 60px;
}

.app-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}
.app-eyebrow {
    margin: 0 0 8px;
    color: var(--sipas-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.app-page-head h1 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.06; letter-spacing: -.04em; }
.app-page-head > div > p:last-child:not(.app-eyebrow) { max-width: 720px; margin: 9px 0 0; color: var(--sipas-muted); font-size: 14px; }
.app-page-date { display: flex; align-items: center; gap: 9px; padding: 10px 13px; color: var(--sipas-muted); background: #fff; border: 1px solid var(--sipas-line); border-radius: 9px; font-size: 12px; font-weight: 650; white-space: nowrap; }

.app-alert { display: flex; align-items: center; gap: 11px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid; border-radius: 10px; font-size: 13px; }
.app-alert.success { color: #10603b; background: var(--sipas-green-soft); border-color: #bfe5d0; }
.app-alert.error { color: #a51b23; background: var(--sipas-red-soft); border-color: #f3c2c5; }

.app-content {
    min-width: 0;
    background: var(--sipas-surface);
    border: 1px solid var(--sipas-line);
    border-radius: var(--sipas-radius);
    box-shadow: var(--sipas-shadow-sm);
    padding: 26px;
}

.app-footer {
    width: min(100% - 40px, 1420px);
    margin: 0 auto;
    padding: 22px 0 30px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--sipas-soft);
    border-top: 1px solid var(--sipas-line);
    font-size: 11px;
}

/* Dashboard */
.dashboard-wrap { display: grid; gap: 24px; }
.dashboard-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    color: #fff;
    background: var(--sipas-ink);
    border-radius: 14px;
}
.dashboard-intro .eyebrow { margin: 0 0 9px; color: #f5a5a9; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.dashboard-intro h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; }
.dashboard-intro p { max-width: 660px; margin: 10px 0 0; color: #b9c1cf; font-size: 13px; line-height: 1.7; }
.dashboard-intro-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.dashboard-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 0 16px; border-radius: 9px; font-size: 12px; font-weight: 750; text-decoration: none; }
.dashboard-button.primary { background: var(--sipas-red); color: #fff; }
.dashboard-button.secondary { background: #fff; color: var(--sipas-ink); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { position: relative; min-height: 150px; padding: 20px; border: 1px solid var(--sipas-line); border-radius: 12px; background: #fff; overflow: hidden; }
.metric-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--metric-color, var(--sipas-ink)); }
.metric-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric-card-label { color: var(--sipas-muted); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.metric-card-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--metric-color, var(--sipas-ink)); background: var(--metric-bg, #f1f3f6); border-radius: 9px; }
.metric-card-value { margin: 20px 0 4px; font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.metric-card-note { color: var(--sipas-soft); font-size: 11px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px; }
.dashboard-panel { min-width: 0; padding: 22px; border: 1px solid var(--sipas-line); border-radius: 12px; background: #fff; }
.dashboard-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; }
.dashboard-panel-head h3 { margin: 0; font-size: 15px; }
.dashboard-panel-head p { margin: 4px 0 0; color: var(--sipas-muted); font-size: 11px; }
.dashboard-panel-head a { color: var(--sipas-red); font-size: 11px; font-weight: 750; text-decoration: none; }
.dashboard-chart { height: 260px; position: relative; }
.recent-list { display: grid; }
.recent-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid #edf0f3; }
.recent-row:first-child { border-top: 0; padding-top: 0; }
.recent-icon { width: 42px; height: 42px; display: grid; place-items: center; background: #f1f3f6; border-radius: 9px; color: var(--sipas-ink-2); }
.recent-main { min-width: 0; }
.recent-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.recent-main span { display: block; margin-top: 4px; color: var(--sipas-muted); font-size: 10px; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; font-size: 10px; font-weight: 750; }
.status-chip.good { color: var(--sipas-green); background: var(--sipas-green-soft); }
.status-chip.warn { color: var(--sipas-amber); background: var(--sipas-amber-soft); }
.status-chip.bad { color: var(--sipas-red-dark); background: var(--sipas-red-soft); }
.dashboard-empty { padding: 45px 20px; text-align: center; color: var(--sipas-muted); }
.dashboard-empty i { display: block; margin-bottom: 12px; color: var(--sipas-line-strong); font-size: 34px; }

/* Shared page clean-up and legacy page overrides */
.app-content .container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.app-content .py-12, .app-content .min-h-screen { min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.form-container, .neu-container, .filter-container, .neo-glass-card {
    background: #fff !important;
    border: 1px solid var(--sipas-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
}
.form-container { overflow: hidden; }
.form-header, .neu-header { padding: 22px !important; background: #fafafa !important; border-bottom: 1px solid var(--sipas-line) !important; }
.form-header h2, .neu-header h2 { color: var(--sipas-ink) !important; }
.form-section { margin: 0 !important; padding: 24px !important; border: 0 !important; border-bottom: 1px solid #edf0f3 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; }
.form-section:last-child { border-bottom: 0 !important; }
.form-section-title { color: var(--sipas-ink) !important; font-size: 14px !important; letter-spacing: -.01em; }
.form-columns { gap: 18px !important; }
.input-group { margin-bottom: 18px !important; }
.input-group label, .form-label { display: block; margin-bottom: 7px !important; color: #3c4759 !important; font-size: 11px !important; font-weight: 750 !important; letter-spacing: .03em; }
.form-control, .form-input, .app-content input[type="text"], .app-content input[type="email"], .app-content input[type="password"], .app-content input[type="number"], .app-content input[type="date"], .app-content select, .app-content textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px !important;
    color: var(--sipas-ink) !important;
    background: #fff !important;
    border: 1px solid var(--sipas-line-strong) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    outline: none;
}
.app-content textarea { min-height: 110px; resize: vertical; }
.form-control:focus, .app-content input:focus, .app-content select:focus, .app-content textarea:focus { border-color: var(--sipas-ink) !important; box-shadow: 0 0 0 3px rgba(23, 32, 51, .08) !important; }
.input-group .icon { color: var(--sipas-soft) !important; }
.file-input-container, .image-preview-container, .existing-image-container { border-color: var(--sipas-line-strong) !important; border-radius: 10px !important; background: #fafafa !important; box-shadow: none !important; }
.file-input-label i { color: var(--sipas-red) !important; }
.form-footer { padding: 20px 24px !important; background: #fafafa !important; border-top: 1px solid var(--sipas-line) !important; }
.btn-primary, .primary-button, .action-button, button.bg-blue-600, a.bg-blue-600 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px !important;
    color: #fff !important;
    background: var(--sipas-red) !important;
    border: 1px solid var(--sipas-red) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    text-decoration: none;
}
.btn-primary:hover, .primary-button:hover, .action-button:hover, button.bg-blue-600:hover, a.bg-blue-600:hover { background: var(--sipas-red-dark) !important; transform: none !important; }
.btn-secondary, a.bg-gray-100 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px !important;
    color: var(--sipas-ink) !important;
    background: #fff !important;
    border: 1px solid var(--sipas-line-strong) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none;
}

.neu-content { padding: 0 !important; background: transparent !important; }
.neu-pic-card { padding: 0 !important; margin: 0 !important; border: 1px solid var(--sipas-line) !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; transform: none !important; }
.neu-pic-card-inner { padding: 18px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
.neu-avatar, .neu-icon-container { color: var(--sipas-red) !important; background: var(--sipas-red-soft) !important; border-radius: 9px !important; box-shadow: none !important; }
.neu-btn { background: var(--sipas-ink) !important; border-radius: 8px !important; box-shadow: none !important; font-size: 11px !important; }
.pic-card-actions { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
.pic-card-actions .neu-btn { flex: 1; width: auto !important; margin-top: 0 !important; }
.pic-edit-button { width: 42px; display: grid; place-items: center; color: var(--sipas-red); background: var(--sipas-red-soft); border: 1px solid #f3c2c5; border-radius: 8px; text-decoration: none; }
.pic-edit-button:hover { color: #fff; background: var(--sipas-red); }

.filter-container { padding: 18px !important; margin-bottom: 18px !important; background: #fafafa !important; }
.filter-container.max-h-0:not(.mt-4) { padding: 0 !important; margin: 0 !important; border-width: 0 !important; background: transparent !important; }
.app-content .bg-gradient-to-r { background-color: #fff !important; background-image: none !important; border-color: var(--sipas-line) !important; }
.dataTables_wrapper { color: var(--sipas-ink); font-size: 12px; }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { min-height: 36px; border: 1px solid var(--sipas-line-strong) !important; border-radius: 7px !important; background: #fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border: 0 !important; border-radius: 7px !important; background: transparent !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { color: #fff !important; background: var(--sipas-ink) !important; }
.app-content table { width: 100%; border-collapse: separate; border-spacing: 0; }
.app-content th { color: #6d7788 !important; background-color: #f7f8f9 !important; border-bottom: 1px solid var(--sipas-line-strong) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase; }
.app-content table.dataTable thead th.sorting, .app-content table.dataTable thead th.sorting_asc, .app-content table.dataTable thead th.sorting_desc { background-repeat: no-repeat !important; background-position: center right 8px !important; }
.app-content td { border-bottom: 1px solid #edf0f3 !important; font-size: 11px; }
.app-content tbody tr:hover { background: #fafbfc !important; transform: none !important; }
.badge, .badge-baik, .badge-kurang, .badge-rusak { box-shadow: none !important; }
.btn-detail, .btn-delete { border-radius: 7px !important; box-shadow: none !important; }
.modal-content, .glass-card { border: 1px solid var(--sipas-line) !important; border-radius: 12px !important; background: #fff !important; box-shadow: var(--sipas-shadow) !important; backdrop-filter: none !important; }

/* Generic Laravel auth/profile cards */
.app-content .row { display: flex; justify-content: center; }
.app-content .col-md-6, .app-content .col-md-8 { width: min(100%, 680px); }
.app-content .card { overflow: hidden; border: 1px solid var(--sipas-line); border-radius: 12px; background: #fff; }
.app-content .card-header { padding: 18px 20px; background: #fafafa; border-bottom: 1px solid var(--sipas-line); font-size: 14px; font-weight: 750; }
.app-content .card-body { padding: 22px; }
.app-content .form-group, .app-content .mb-3 { margin-bottom: 17px; }
.app-content .btn, .app-content .btn-primary { min-height: 42px; padding: 0 16px; border: 0; border-radius: 8px; color: #fff; background: var(--sipas-red); font-size: 12px; font-weight: 750; }
.invalid-feedback { margin-top: 5px; color: var(--sipas-red-dark) !important; font-size: 10px !important; }

/* Public showcase */
.public-shell { min-height: 100vh; background: #f6f5f2; color: var(--sipas-ink); }
.public-container { width: min(100% - 40px, 1180px); margin: 0 auto; }
.public-nav { position: relative; z-index: 5; border-bottom: 1px solid rgba(23, 32, 51, .12); background: #f6f5f2; }
.public-nav-inner { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.public-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.public-brand .app-brand-mark { width: 44px; height: 44px; }
.public-brand strong { display: block; font-size: 15px; letter-spacing: .08em; }
.public-brand small { display: block; margin-top: 3px; color: var(--sipas-muted); font-size: 10px; }
.public-nav-links { display: flex; align-items: center; gap: 28px; }
.public-nav-links > a { color: var(--sipas-muted); font-size: 12px; font-weight: 700; text-decoration: none; }
.public-nav-links > a:hover { color: var(--sipas-ink); }
.public-login { padding: 11px 16px; color: #fff !important; background: var(--sipas-ink); border-radius: 8px; }

.landing-hero { padding: 78px 0 90px; border-bottom: 1px solid rgba(23, 32, 51, .1); }
.landing-hero-grid { display: grid; grid-template-columns: minmax(0, .94fr) minmax(520px, 1.06fr); gap: 72px; align-items: center; }
.landing-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--sipas-red-dark); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.landing-kicker::before { content: ""; width: 26px; height: 2px; background: var(--sipas-red); }
.landing-hero h1 { max-width: 660px; margin: 0; font-size: clamp(48px, 6vw, 78px); line-height: .98; letter-spacing: -.065em; }
.landing-hero h1 em { color: var(--sipas-red); font-style: normal; }
.landing-lead { max-width: 620px; margin: 26px 0 0; color: var(--sipas-muted); font-size: 16px; line-height: 1.8; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 32px; }
.landing-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 1px solid var(--sipas-ink); border-radius: 8px; font-size: 12px; font-weight: 800; text-decoration: none; }
.landing-btn.primary { color: #fff; background: var(--sipas-ink); }
.landing-btn.secondary { background: transparent; }
.landing-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(23, 32, 51, .13); }
.landing-proof span { display: inline-flex; align-items: center; gap: 7px; color: var(--sipas-muted); font-size: 11px; font-weight: 650; }
.landing-proof i { color: var(--sipas-green); }

.product-frame { position: relative; padding: 12px; background: #dadde2; border-radius: 17px; box-shadow: 0 28px 70px rgba(23, 32, 51, .18); }
.product-window { overflow: hidden; background: #fff; border-radius: 10px; }
.product-bar { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; color: #fff; background: var(--sipas-ink); }
.product-bar-brand { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.product-bar-mark { width: 22px; height: 22px; display: grid; place-items: center; background: var(--sipas-red); border-radius: 5px; font-size: 7px; }
.product-dots { display: flex; gap: 5px; }
.product-dots span { width: 6px; height: 6px; border-radius: 50%; background: #697489; }
.product-body { padding: 22px; background: #f5f6f7; }
.product-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }
.product-title span { color: var(--sipas-muted); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.product-title strong { display: block; margin-top: 5px; font-size: 17px; }
.product-title button { padding: 8px 10px; color: #fff; background: var(--sipas-red); border: 0; border-radius: 6px; font-size: 8px; }
.product-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.product-metric { padding: 14px; background: #fff; border: 1px solid #e4e7eb; border-radius: 8px; }
.product-metric span { color: var(--sipas-muted); font-size: 7px; text-transform: uppercase; }
.product-metric strong { display: block; margin-top: 9px; font-size: 23px; }
.product-table { margin-top: 10px; padding: 8px 14px 14px; background: #fff; border: 1px solid #e4e7eb; border-radius: 8px; }
.product-row { display: grid; grid-template-columns: 1.2fr .8fr .65fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf0f3; font-size: 8px; }
.product-row:last-child { border-bottom: 0; }
.product-row.header { color: var(--sipas-muted); font-weight: 800; text-transform: uppercase; }
.product-status { color: var(--sipas-green); font-weight: 800; }

.landing-section { padding: 90px 0; }
.landing-section.dark { color: #fff; background: var(--sipas-ink); }
.landing-section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 42px; }
.landing-section-head span { color: var(--sipas-red); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.landing-section-head h2 { max-width: 700px; margin: 10px 0 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -.045em; }
.landing-section-head p { max-width: 420px; margin: 0; color: var(--sipas-muted); font-size: 13px; line-height: 1.7; }
.landing-section.dark .landing-section-head p { color: #aeb7c6; }
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.16); }
.feature-item { padding: 28px 28px 28px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.feature-item:nth-child(3n+2), .feature-item:nth-child(3n+3) { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.16); }
.feature-index { color: #7f899a; font-size: 10px; font-weight: 800; }
.feature-item i { display: block; margin: 34px 0 24px; color: #f06b70; font-size: 22px; }
.feature-item h3 { margin: 0; font-size: 16px; }
.feature-item p { margin: 10px 0 0; color: #aeb7c6; font-size: 12px; line-height: 1.75; }

.workflow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--sipas-line); border: 1px solid var(--sipas-line); }
.workflow-item { position: relative; min-height: 240px; padding: 28px; background: #f6f5f2; }
.workflow-number { color: var(--sipas-red); font-size: 11px; font-weight: 800; }
.workflow-item h3 { margin: 74px 0 10px; font-size: 17px; }
.workflow-item p { margin: 0; color: var(--sipas-muted); font-size: 12px; line-height: 1.7; }
.landing-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 48px; color: #fff; background: var(--sipas-red); }
.landing-cta h2 { max-width: 720px; margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -.04em; }
.landing-cta .landing-btn { flex: 0 0 auto; color: #fff; border-color: #fff; }
.public-footer { padding: 30px 0; color: var(--sipas-muted); background: #f6f5f2; border-top: 1px solid rgba(23,32,51,.1); font-size: 11px; }
.public-footer-inner { display: flex; justify-content: space-between; gap: 20px; }

/* Login */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr); background: #f4f4f2; }
.auth-story { min-height: 100vh; padding: 44px clamp(34px, 5vw, 76px); display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: var(--sipas-ink); }
.auth-story .public-brand small { color: #9fa9b9; }
.auth-story-content { max-width: 570px; padding: 70px 0; }
.auth-story-kicker { color: #f3a0a4; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.auth-story h1 { margin: 16px 0 0; font-size: clamp(40px, 5vw, 68px); line-height: .99; letter-spacing: -.055em; }
.auth-story p { max-width: 520px; margin: 24px 0 0; color: #b5becd; font-size: 14px; line-height: 1.8; }
.auth-story-points { display: grid; gap: 13px; margin-top: 34px; }
.auth-story-points span { display: flex; align-items: center; gap: 10px; color: #dce1e8; font-size: 12px; }
.auth-story-points i { color: #f06b70; }
.auth-story-footer { color: #808c9e; font-size: 10px; }
.auth-form-side { min-height: 100vh; display: grid; place-items: center; padding: 44px; }
.auth-card { width: min(100%, 460px); }
.auth-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 40px; color: var(--sipas-muted); font-size: 11px; font-weight: 700; text-decoration: none; }
.auth-card h2 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.auth-card-subtitle { margin: 9px 0 30px; color: var(--sipas-muted); font-size: 13px; }
.auth-field { margin-bottom: 18px; }
.auth-field label { display: block; margin-bottom: 7px; color: #465267; font-size: 11px; font-weight: 750; }
.auth-input-wrap { position: relative; }
.auth-input-wrap > i { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--sipas-soft); font-size: 12px; }
.auth-input { width: 100%; height: 48px; padding: 0 44px 0 40px; color: var(--sipas-ink); background: #fff; border: 1px solid var(--sipas-line-strong); border-radius: 8px; outline: none; }
.auth-input:focus { border-color: var(--sipas-ink); box-shadow: 0 0 0 3px rgba(23, 32, 51, .08); }
.auth-password-toggle { position: absolute; right: 9px; top: 50%; width: 32px; height: 32px; transform: translateY(-50%); border: 0; background: transparent; color: var(--sipas-muted); cursor: pointer; }
.auth-error { display: block; margin-top: 6px; color: var(--sipas-red-dark); font-size: 10px; }
.auth-options { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 6px 0 22px; color: var(--sipas-muted); font-size: 11px; }
.auth-remember { display: inline-flex; align-items: center; gap: 8px; }
.auth-remember input { accent-color: var(--sipas-red); }
.auth-options a { color: var(--sipas-ink); font-weight: 750; text-decoration: none; }
.auth-submit { width: 100%; height: 48px; color: #fff; background: var(--sipas-red); border: 0; border-radius: 8px; font-size: 12px; font-weight: 800; cursor: pointer; }
.auth-submit:hover { background: var(--sipas-red-dark); }
.auth-security { display: flex; align-items: center; gap: 9px; margin-top: 20px; padding-top: 18px; color: var(--sipas-soft); border-top: 1px solid var(--sipas-line); font-size: 10px; }

/* Standalone PIC detail page */
.modern-detail-page { background: var(--sipas-canvas) !important; color: var(--sipas-ink) !important; }
.modern-detail-page .neu-card { max-width: 1420px; margin: 0 auto 30px !important; border: 1px solid var(--sipas-line) !important; border-radius: 14px !important; background: #fff !important; box-shadow: var(--sipas-shadow-sm) !important; transform: none !important; }
.modern-detail-page .card-header { padding: 22px !important; background: var(--sipas-ink) !important; border: 0 !important; }
.modern-detail-page .pic-details h2 { color: #fff !important; }
.modern-detail-page .pic-details p { color: #b9c1cf !important; }
.modern-detail-page .pic-icon { background: var(--sipas-red) !important; border-radius: 9px !important; box-shadow: none !important; }
.modern-detail-page .back-btn { color: var(--sipas-ink) !important; background: #fff !important; border: 1px solid rgba(255,255,255,.3) !important; border-radius: 8px !important; box-shadow: none !important; }
.modern-detail-page .edit-pic-btn { color: #fff !important; background: var(--sipas-red) !important; border-color: var(--sipas-red) !important; }
.modern-detail-page .card-body { padding: 22px !important; }
.modern-detail-page .table-container { border: 1px solid var(--sipas-line) !important; border-radius: 10px !important; box-shadow: none !important; backdrop-filter: none !important; }
.modern-detail-page th { background: #f7f8f9 !important; }
.modern-detail-page tbody tr:hover { transform: none !important; background: #fafbfc !important; box-shadow: none !important; }
.modern-detail-page .asset-image-container, .modern-detail-page .asset-slider, .modern-detail-page .qr-code-image { border-radius: 7px !important; box-shadow: none !important; }
.modern-detail-page .flash-success { max-width: 1420px; margin: 0 auto 20px; border: 1px solid #bfe5d0; background: var(--sipas-green-soft); box-shadow: none !important; }

@media (max-width: 1180px) {
    .app-topbar-inner { gap: 16px; }
    .app-nav a { padding: 0 9px; }
    .app-nav a span { display: none; }
    .app-user-copy { display: none; }
    .landing-hero-grid { grid-template-columns: 1fr 1fr; gap: 42px; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .app-topbar-inner { height: 68px; padding: 0 18px; }
    .app-nav, .app-account { display: none; }
    .app-mobile-toggle { display: inline-grid; }
    .app-mobile-panel { position: absolute; left: 12px; right: 12px; top: 74px; padding: 10px; background: #fff; border: 1px solid var(--sipas-line); border-radius: 12px; box-shadow: var(--sipas-shadow); }
    .app-mobile-panel:not([hidden]) { display: grid; }
    .app-mobile-panel a, .app-mobile-panel button { width: 100%; display: flex; align-items: center; gap: 11px; padding: 12px; color: var(--sipas-ink); background: transparent; border: 0; border-radius: 8px; font-size: 12px; font-weight: 700; text-decoration: none; text-align: left; }
    .app-mobile-panel a:hover, .app-mobile-panel button:hover { background: #f5f6f7; }
    .app-mobile-panel i { width: 18px; color: var(--sipas-red); text-align: center; }
    .app-main { width: min(100% - 24px, 1420px); padding-top: 24px; }
    .app-page-head { align-items: flex-start; }
    .app-page-date { display: none; }
    .app-content { padding: 15px; border-radius: 12px; }
    .app-footer { width: min(100% - 24px, 1420px); flex-direction: column; }
    .dashboard-intro { align-items: flex-start; flex-direction: column; padding: 22px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .landing-hero { padding: 54px 0 64px; }
    .landing-hero-grid { grid-template-columns: 1fr; }
    .landing-hero h1 { font-size: clamp(46px, 14vw, 68px); }
    .landing-section { padding: 68px 0; }
    .landing-section-head { align-items: flex-start; flex-direction: column; }
    .feature-list { grid-template-columns: 1fr; }
    .feature-item, .feature-item:nth-child(3n+2), .feature-item:nth-child(3n+3) { padding: 25px 0; border-left: 0; }
    .workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-cta { align-items: flex-start; flex-direction: column; padding: 34px; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-story { min-height: auto; padding: 30px 24px; }
    .auth-story-content { padding: 60px 0 30px; }
    .auth-story-footer { display: none; }
    .auth-form-side { min-height: auto; padding: 48px 24px 70px; }
}

@media (max-width: 560px) {
    .public-container { width: min(100% - 26px, 1180px); }
    .public-nav-links > a:not(.public-login) { display: none; }
    .product-frame { padding: 7px; }
    .product-body { padding: 13px; }
    .product-metric { padding: 10px; }
    .product-metric strong { font-size: 18px; }
    .metric-grid { grid-template-columns: 1fr; }
    .dashboard-intro-actions { width: 100%; flex-direction: column; }
    .dashboard-button { width: 100%; }
    .workflow-grid { grid-template-columns: 1fr; }
    .workflow-item { min-height: 190px; }
    .landing-cta { padding: 28px 22px; }
    .public-footer-inner { flex-direction: column; }
    .form-columns { grid-template-columns: 1fr !important; }
    .form-footer { align-items: stretch !important; flex-direction: column-reverse !important; }
    .form-footer .btn-primary, .form-footer .btn-secondary { width: 100%; }
}

/* Application workspace refresh */
.app-shell-auth { background: #f5f6f8; }
.app-frame { min-height: 100vh; }
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 120;
    width: 252px;
    padding: 22px 16px 18px;
    display: flex;
    flex-direction: column;
    color: #d7dce5;
    background: #121827;
    border-right: 1px solid #252d3e;
}
.app-sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 20px; color: #fff; text-decoration: none; }
.app-sidebar .app-brand-mark { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 7px 18px rgba(223,32,39,.22); }
.app-sidebar .app-brand-copy strong { color: #fff; font-size: 14px; }
.app-sidebar .app-brand-copy small { color: #8993a8; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.app-sidebar-branch { display: flex; align-items: center; gap: 10px; margin: 0 4px 22px; padding: 11px; border: 1px solid #2b3447; border-radius: 10px; background: #1a2233; }
.app-sidebar-branch-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #ff777c; background: #31212b; font-size: 12px; }
.app-sidebar-branch > span:last-child { min-width: 0; display: grid; }
.app-sidebar-branch small { color: #78849a; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.app-sidebar-branch strong { margin-top: 3px; overflow: hidden; color: #f8f9fb; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar-nav { display: grid; gap: 4px; }
.app-sidebar-nav p { margin: 15px 10px 6px; color: #68748a; font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.app-sidebar-nav p:first-child { margin-top: 0; }
.app-sidebar-nav a { position: relative; display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 11px; color: #aeb7c7; border-radius: 9px; font-size: 11px; font-weight: 650; text-decoration: none; transition: background .18s ease, color .18s ease; }
.app-sidebar-nav a:hover { color: #fff; background: #1c2537; }
.app-sidebar-nav a.active { color: #fff; background: #252e40; }
.app-sidebar-nav a.active::before { content: ""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sipas-red); }
.app-sidebar-nav .nav-icon { width: 28px; height: 28px; display: grid; place-items: center; color: #8490a4; border-radius: 7px; font-size: 12px; }
.app-sidebar-nav .app-nav-external .nav-external-mark { margin-left: auto; color: #9aaba4; font-size: 8px; transition: color .18s ease, transform .18s ease; }
.app-sidebar-nav .app-nav-external:hover .nav-external-mark { color: #39bea2; transform: translate(2px, -2px); }
.app-sidebar-nav a.active .nav-icon { color: #ff666c; background: #35242e; }
.app-sidebar-help { display: flex; gap: 10px; margin: auto 4px 16px; padding: 12px; color: #9aa5b8; border: 1px solid #2b3447; border-radius: 10px; background: #171f2f; }
.app-sidebar-help > span { color: #4fc78a; font-size: 13px; }
.app-sidebar-help div { display: grid; }
.app-sidebar-help strong { color: #e9ecf1; font-size: 9px; }
.app-sidebar-help small { margin-top: 3px; color: #778298; font-size: 8px; line-height: 1.5; }
.app-sidebar-account { display: flex; align-items: center; gap: 8px; padding: 15px 4px 0; border-top: 1px solid #293145; }
.app-sidebar-account .app-user-avatar { width: 32px; height: 32px; flex: 0 0 auto; color: #fff; background: var(--sipas-red); font-size: 10px; }
.app-sidebar-account .app-user-copy { min-width: 0; margin-right: auto; }
.app-sidebar-account .app-user-copy strong { max-width: 78px; color: #fff; font-size: 9px; }
.app-sidebar-account .app-user-copy small { color: #7f8ba0; font-size: 8px; }
.app-account-action { width: 29px; height: 29px; display: grid; place-items: center; color: #7e899d; background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 10px; text-decoration: none; }
.app-account-action:hover { color: #fff; background: #252e40; }
.app-sidebar-overlay { display: none; }

.app-workspace { min-height: 100vh; margin-left: 252px; display: flex; flex-direction: column; }
.app-workbar { position: sticky; top: 0; z-index: 90; min-height: 68px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(255,255,255,.96); border-bottom: 1px solid #e4e7ec; backdrop-filter: blur(14px); }
.app-workbar-context { display: flex; align-items: center; gap: 12px; }
.app-workbar-context > div { display: grid; }
.app-workbar-context small { color: #929bad; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.app-workbar-context strong { margin-top: 3px; color: #253149; font-size: 12px; }
.app-workbar-actions { display: flex; align-items: center; gap: 10px; }
.app-workbar-date { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; color: #68748a; border: 1px solid #e0e4e9; border-radius: 9px; background: #fff; font-size: 10px; font-weight: 650; }
.app-workbar-primary { min-height: 36px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; color: #fff; background: var(--sipas-red); border-radius: 9px; font-size: 10px; font-weight: 750; text-decoration: none; box-shadow: 0 6px 14px rgba(223,32,39,.16); }
.app-workbar-primary:hover { background: var(--sipas-red-dark); }
.app-shell-auth .app-mobile-toggle { width: 36px; height: 36px; margin: 0; flex: 0 0 auto; }

.app-shell-auth .app-main { width: 100%; max-width: 1540px; min-height: 0; margin: 0 auto; padding: 28px; }
.app-shell-auth .app-page-head { margin-bottom: 20px; align-items: flex-start; }
.app-shell-auth .app-page-head h1 { font-size: clamp(23px, 2.5vw, 31px); letter-spacing: -.035em; }
.app-shell-auth .app-page-head > div > p:last-child:not(.app-eyebrow) { margin-top: 7px; font-size: 11px; }
.app-shell-auth .app-eyebrow { margin-bottom: 6px; font-size: 8px; letter-spacing: .16em; }
.app-shell-auth .app-content { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.app-shell-auth .app-footer { width: auto; margin: auto 28px 0; padding: 18px 0 22px; font-size: 9px; }
.app-topbar-public .app-topbar-inner { max-width: 1280px; }
.app-public-action { margin-left: auto; }
.app-main-public { max-width: 1280px; }

/* Operational dashboard */
.ops-dashboard { display: grid; gap: 16px; }
.ops-command { min-height: 126px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #fff; background: #172033; border: 1px solid #242e43; border-radius: 14px; overflow: hidden; }
.ops-command-copy { min-width: 0; }
.ops-command-kicker { display: inline-flex; align-items: center; gap: 7px; color: #aab4c6; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ops-command-kicker i { color: #4ac988; font-size: 6px; }
.ops-command h2 { margin: 9px 0 0; font-size: clamp(22px, 2.6vw, 31px); font-weight: 720; letter-spacing: -.035em; }
.ops-command p { max-width: 680px; margin: 7px 0 0; color: #aab4c6; font-size: 11px; line-height: 1.55; }
.ops-command-actions { display: flex; gap: 9px; flex: 0 0 auto; }
.ops-btn { min-height: 39px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; font-size: 10px; font-weight: 750; text-decoration: none; }
.ops-btn-primary { color: #fff; background: var(--sipas-red); }
.ops-btn-primary:hover { background: #ef3037; }
.ops-btn-quiet { color: #e9ecf2; background: #222c40; border-color: #354158; }
.ops-btn-quiet:hover { background: #2a354b; }

.ops-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ops-stat { min-width: 0; min-height: 112px; padding: 17px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: start; gap: 12px; background: #fff; border: 1px solid #e1e5ea; border-radius: 12px; box-shadow: 0 2px 5px rgba(23,32,51,.025); }
.ops-stat-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; font-size: 13px; }
.ops-stat-icon.blue { color: #2769b5; background: #edf5ff; }
.ops-stat-icon.green { color: #128457; background: #eaf8f1; }
.ops-stat-icon.amber { color: #b2720b; background: #fff6e6; }
.ops-stat-icon.red { color: #d62931; background: #fff0f1; }
.ops-stat > div { min-width: 0; display: grid; }
.ops-stat > div > span { color: #778196; font-size: 9px; font-weight: 700; }
.ops-stat strong { margin-top: 4px; color: #182136; font-size: 25px; line-height: 1; letter-spacing: -.035em; }
.ops-stat small { margin-top: 7px; overflow: hidden; color: #9aa2b0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ops-stat > a { width: 27px; height: 27px; display: grid; place-items: center; color: #9ba4b3; border: 1px solid #e7e9ed; border-radius: 7px; font-size: 8px; text-decoration: none; }
.ops-stat > a:hover { color: var(--sipas-red); border-color: #f0c1c4; }
.ops-stat-trend { display: inline-flex !important; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 999px; font-size: 8px !important; font-weight: 800 !important; }
.ops-stat-trend.good { color: #11764c !important; background: #eaf8f1; }

.ops-overview-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .65fr); gap: 16px; }
.ops-panel { min-width: 0; padding: 20px; background: #fff; border: 1px solid #e1e5ea; border-radius: 12px; box-shadow: 0 2px 6px rgba(23,32,51,.025); }
.ops-panel-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ops-panel-head.compact { margin-bottom: 15px; }
.ops-panel-kicker { display: block; margin-bottom: 5px; color: #9aa3b2; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ops-panel-head h3 { margin: 0; color: #1c263a; font-size: 14px; letter-spacing: -.015em; }
.ops-panel-head p { margin: 4px 0 0; color: #8993a4; font-size: 9px; }
.ops-panel-head > a { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: #e02a31; font-size: 9px; font-weight: 750; text-decoration: none; }
.ops-condition-body { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 24px; align-items: center; }
.ops-chart-large { position: relative; height: 210px; }
.ops-condition-legend { display: grid; gap: 5px; }
.ops-condition-legend > div { padding: 10px 0; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #eef0f3; }
.ops-condition-legend > div:last-child { border-bottom: 0; }
.legend-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.legend-dot.good { background: #16a267; }.legend-dot.warn { background: #e5a126; }.legend-dot.bad { background: #e33b43; }
.ops-condition-legend span:last-child { display: grid; }
.ops-condition-legend strong { color: #202a3d; font-size: 13px; }
.ops-condition-legend small { margin-top: 2px; color: #8993a4; font-size: 8px; }

.ops-health-panel { display: flex; flex-direction: column; }
.ops-health-score { width: 152px; height: 152px; margin: 2px auto 17px; padding: 12px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#16a267 var(--health-score), #edf0f3 0); }
.ops-health-score > div { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; border-radius: 50%; background: #fff; }
.ops-health-score strong { font-size: 32px; line-height: 1; letter-spacing: -.05em; }
.ops-health-score strong small { font-size: 13px; }
.ops-health-score span { margin-top: 5px; color: #8993a4; font-size: 8px; font-weight: 700; }
.ops-health-summary { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #e7eaee; border-radius: 9px; }
.ops-health-summary > div { padding: 10px; display: grid; }
.ops-health-summary > div + div { border-left: 1px solid #e7eaee; }
.ops-health-summary span { color: #8d97a7; font-size: 7px; }
.ops-health-summary strong { margin-top: 3px; font-size: 14px; }
.ops-health-note { margin: 13px 0 0; padding: 10px; display: flex; gap: 7px; color: #6d788c; background: #f6f7f9; border-radius: 8px; font-size: 8px; line-height: 1.5; }
.ops-health-note i { margin-top: 2px; color: #526077; }

.ops-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); gap: 16px; align-items: start; }
.ops-table-wrap { overflow-x: auto; }
.ops-table { width: 100%; border-collapse: collapse; }
.ops-table th { padding: 9px 10px; color: #929bab; background: #f7f8fa; border: 0; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.ops-table th:first-child { border-radius: 7px 0 0 7px; }.ops-table th:last-child { border-radius: 0 7px 7px 0; }
.ops-table td { padding: 11px 10px; color: #536075; border-bottom: 1px solid #eef0f3; font-size: 9px; white-space: nowrap; }
.ops-table tr:last-child td { border-bottom: 0; }
.ops-asset-cell { display: flex; align-items: center; gap: 9px; }
.ops-asset-cell > span { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; color: #5a687f; background: #f0f2f5; border-radius: 8px; font-size: 10px; }
.ops-asset-cell > div { min-width: 0; display: grid; }
.ops-asset-cell strong { max-width: 185px; overflow: hidden; color: #1e283c; font-size: 9px; text-overflow: ellipsis; }
.ops-asset-cell small { margin-top: 3px; color: #98a0ae; font-size: 7px; }
.ops-row-action { width: 28px; height: 28px; display: grid; place-items: center; color: #768196; border: 1px solid #e4e7ec; border-radius: 7px; text-decoration: none; font-size: 8px; }
.ops-row-action:hover { color: #fff; background: var(--sipas-red); border-color: var(--sipas-red); }
.ops-side-stack { display: grid; gap: 16px; }
.ops-quick-links { display: grid; }
.ops-quick-links > a { padding: 10px 0; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; color: inherit; border-bottom: 1px solid #eef0f3; text-decoration: none; }
.ops-quick-links > a:last-child { padding-bottom: 0; border-bottom: 0; }
.ops-quick-links > a:first-child { padding-top: 0; }
.ops-quick-links > a > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-size: 10px; }
.ops-quick-links .blue { color: #2869b5; background: #edf5ff; }.ops-quick-links .violet { color: #7259a7; background: #f3effb; }.ops-quick-links .amber { color: #ad6c09; background: #fff5e4; }
.ops-quick-links div { min-width: 0; display: grid; }
.ops-quick-links strong { color: #253047; font-size: 9px; }.ops-quick-links small { margin-top: 3px; color: #929baa; font-size: 7px; }
.ops-quick-links > a > i { color: #a1a9b6; font-size: 7px; }
.ops-chart-category { height: 155px; position: relative; }
.dashboard-empty.small { padding: 20px; }

/* Cleaner work surfaces for legacy pages */
.app-shell-auth .neu-container, .app-shell-auth .form-container, .app-shell-auth .neo-glass-card { box-shadow: 0 2px 6px rgba(23,32,51,.025) !important; }
.app-shell-auth .form-header, .app-shell-auth .neu-header { background: #fff !important; }
.app-shell-auth .dataTables_wrapper { padding: 2px; }
.app-shell-auth table.dataTable thead th { padding-top: 12px !important; padding-bottom: 12px !important; }

@media (max-width: 1240px) {
    .ops-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ops-overview-grid { grid-template-columns: minmax(0,1.4fr) minmax(250px,.7fr); }
    .ops-bottom-grid { grid-template-columns: 1fr; }
    .ops-side-stack { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
    .app-sidebar { transform: translateX(-100%); box-shadow: 18px 0 50px rgba(9,14,25,.22); transition: transform .22s ease; }
    .sidebar-open .app-sidebar { transform: translateX(0); }
    .app-sidebar-overlay { position: fixed; inset: 0; z-index: 110; display: block; visibility: hidden; opacity: 0; background: rgba(10,15,25,.46); border: 0; transition: opacity .22s ease, visibility .22s ease; }
    .sidebar-open .app-sidebar-overlay { visibility: visible; opacity: 1; }
    .app-workspace { margin-left: 0; }
    .app-shell-auth .app-mobile-toggle { display: inline-grid; }
    .app-workbar { padding: 0 18px; }
    .app-shell-auth .app-main { padding: 22px 18px; }
    .app-shell-auth .app-footer { margin-left: 18px; margin-right: 18px; }
}

@media (max-width: 760px) {
    .app-workbar-date { display: none; }
    .app-workbar-primary span { display: none; }
    .app-workbar-primary { width: 36px; padding: 0; justify-content: center; }
    .app-shell-auth .app-main { padding: 18px 12px 28px; }
    .app-shell-auth .app-page-head { margin-bottom: 16px; }
    .app-shell-auth .app-page-head h1 { font-size: 23px; }
    .ops-command { align-items: flex-start; flex-direction: column; padding: 20px; }
    .ops-command-actions { width: 100%; }
    .ops-command-actions .ops-btn { flex: 1; }
    .ops-overview-grid { grid-template-columns: 1fr; }
    .ops-side-stack { grid-template-columns: 1fr; }
    .ops-table th:nth-child(2), .ops-table td:nth-child(2), .ops-table th:nth-child(3), .ops-table td:nth-child(3) { display: none; }
}

@media (max-width: 520px) {
    .app-workbar { min-height: 62px; padding: 0 12px; }
    .app-workbar-context small { display: none; }
    .ops-stat-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .ops-stat { min-height: 126px; grid-template-columns: 34px minmax(0,1fr); padding: 14px; }
    .ops-stat-icon { width: 34px; height: 34px; }
    .ops-stat > a, .ops-stat-trend { display: none !important; }
    .ops-stat strong { font-size: 23px; }
    .ops-command-actions { flex-direction: column; }
    .ops-condition-body { grid-template-columns: 1fr; gap: 8px; }
    .ops-condition-legend { grid-template-columns: repeat(3,1fr); }
    .ops-condition-legend > div { border-bottom: 0; }
    .ops-panel { padding: 16px; }
    .ops-table th:nth-child(4), .ops-table td:nth-child(4) { display: none; }
}

/* Reference-matched public landing */
.neo-landing {
    --neo-black: #171717;
    --neo-lime: #b8ff52;
    --neo-paper: #ffffff;
    margin: 0;
    padding: 38px 20px;
    color: var(--neo-black);
    background: #b9b9b9;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.neo-page { width: min(100%, 1160px); margin: 0 auto; overflow: hidden; background: #fff; border-radius: 28px; }
.neo-nav { height: 88px; padding: 0 66px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.neo-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--neo-black); font-size: 16px; text-decoration: none; }
.neo-brand-star { font-size: 22px; transform: rotate(18deg); }
.neo-nav-links { display: flex; align-items: center; gap: 30px; }
.neo-nav-links a { color: #282828; font-size: 10px; font-weight: 650; text-decoration: none; }
.neo-nav-cta { padding: 12px 17px; border: 1.5px solid #1c1c1c; border-radius: 8px; }
.neo-hero { min-height: 520px; padding: 64px 66px 48px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
.neo-overline { display: inline-flex; margin-bottom: 17px; padding: 5px 8px; background: var(--neo-lime); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.neo-hero h1 { margin: 0; font-size: clamp(46px, 5vw, 70px); font-weight: 600; line-height: 1.04; letter-spacing: -.055em; }
.neo-hero-copy p { max-width: 500px; margin: 24px 0; color: #404040; font-size: 13px; line-height: 1.65; }
.neo-black-btn { min-height: 46px; padding: 0 17px; display: inline-flex; align-items: center; gap: 18px; color: #fff; background: var(--neo-black); border-radius: 7px; font-size: 10px; font-weight: 750; text-decoration: none; box-shadow: 0 6px 0 rgba(0,0,0,.1); }
.neo-black-btn i { font-size: 9px; }
.neo-orbit { position: relative; min-height: 360px; display: grid; place-items: center; }
.orbit-line { position: absolute; width: 330px; height: 150px; border: 1.5px solid #242424; border-radius: 50%; transform: rotate(22deg); }
.orbit-line.two { transform: rotate(-18deg); }.orbit-line.three { width: 250px; height: 220px; transform: rotate(65deg); }
.orbit-tag { position: relative; z-index: 3; width: 208px; height: 132px; padding: 18px; display: grid; grid-template-columns: 62px 1fr; align-items: end; gap: 14px; background: #f8f8f8; border: 2px solid #171717; border-radius: 18px 18px 18px 5px; box-shadow: 14px 14px 0 var(--neo-lime); transform: rotate(-9deg); }
.orbit-tag-top { position: absolute; top: 14px; left: 18px; font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.orbit-tag > i { font-size: 58px; }
.orbit-tag > div { display: grid; }.orbit-tag strong { font-size: 14px; }.orbit-tag small { margin-top: 4px; color: #666; font-size: 8px; }
.orbit-node { position: absolute; z-index: 5; width: 45px; height: 45px; display: grid; place-items: center; color: #111; background: #fff; border: 2px solid #171717; border-radius: 50%; font-size: 15px; }
.orbit-node.node-one { top: 36px; right: 80px; background: var(--neo-lime); }.orbit-node.node-two { top: 93px; right: 27px; }.orbit-node.node-three { right: 55px; bottom: 54px; background: var(--neo-lime); }.orbit-node.node-four { left: 52px; bottom: 72px; color: #fff; background: #171717; }
.orbit-spark { position: absolute; z-index: 5; font-size: 36px; }.orbit-spark.spark-one { left: 45px; top: 50px; }.orbit-spark.spark-two { right: 115px; bottom: 10px; font-size: 24px; }
.neo-trust { margin: 0 66px; padding: 27px 0; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; }
.neo-trust span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 9px; font-weight: 750; }.neo-trust i { font-size: 13px; }
.neo-section { padding: 78px 66px; }
.neo-section-head { margin-bottom: 35px; display: grid; grid-template-columns: 220px 1fr; align-items: start; gap: 28px; }
.neo-section-head h2 { margin: 0; font-size: 26px; font-weight: 650; }.neo-section-head h2 mark, .neo-results h2 mark, .neo-service h3 mark { padding: 0 4px; background: var(--neo-lime); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.neo-section-head p { max-width: 610px; margin: 3px 0 0; color: #505050; font-size: 11px; line-height: 1.55; }
.neo-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.neo-service { min-height: 260px; padding: 30px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; overflow: hidden; border: 2px solid #191919; border-radius: 28px; box-shadow: 0 7px 0 #191919; }
.neo-service.dark { color: #fff; background: #191919; box-shadow: 0 7px 0 var(--neo-lime); }.neo-service.light { background: #f8f8f8; }
.neo-service h3 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.15; }.neo-service.dark h3 mark { color: #111; }
.neo-service > div:first-child { display: flex; align-items: flex-start; flex-direction: column; justify-content: space-between; }
.neo-service a { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-size: 9px; font-weight: 750; text-decoration: none; }.neo-service a span { width: 25px; height: 25px; display: grid; place-items: center; color: #111; background: var(--neo-lime); border-radius: 50%; }
.service-art { position: relative; min-height: 190px; align-self: center; }
.asset-art { padding: 33px 24px; border: 1.5px solid #202020; border-radius: 50%; transform: rotate(-7deg); }.asset-art > span { display: block; height: 8px; margin-bottom: 15px; background: #ddd; border-radius: 99px; }.asset-art-title { width: 55%; background: #222 !important; }.asset-art-row.r2 { width: 72%; }.asset-art-row.r3 { width: 86%; }.asset-art i { position: absolute; right: 25px; bottom: 26px; padding: 11px; background: var(--neo-lime); border-radius: 50%; font-size: 19px; }
.qr-art { display: grid; place-items: center; }.qr-art > i { padding: 18px; color: #111; background: #fff; font-size: 83px; transform: rotate(6deg); }.cursor-arrow { position: absolute; right: 13px; bottom: 26px; color: #111; text-shadow: 2px 2px 0 var(--neo-lime); font-size: 34px; }
.pic-art { display: grid; place-items: center; }.pic-face { width: 98px; height: 98px; display: grid; place-items: center; color: #111; background: #fff; border: 7px solid var(--neo-lime); border-radius: 42% 58% 48% 52%; font-size: 42px; }.pic-badge { position: absolute; right: 16px; top: 28px; width: 39px; height: 39px; display: grid; place-items: center; color: #111; background: var(--neo-lime); border-radius: 50%; }.pic-line { position: absolute; width: 150px; height: 95px; border: 1px solid #fff; border-radius: 50%; transform: rotate(27deg); }
.chart-art { display: flex; align-items: flex-end; justify-content: center; gap: 11px; }.chart-art .bar { width: 25px; background: #1a1a1a; border-radius: 5px 5px 0 0; }.chart-art .b1 { height: 52px; }.chart-art .b2 { height: 86px; background: var(--neo-lime); border: 2px solid #171717; }.chart-art .b3 { height: 112px; }.chart-art .b4 { height: 145px; background: var(--neo-lime); border: 2px solid #171717; }.chart-art i { position: absolute; right: 8px; top: 10px; font-size: 32px; }
.neo-mid-cta { margin: 0 66px; min-height: 270px; padding: 40px 46px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 35px; background: #f4f4f4; border-radius: 28px; }
.neo-mid-cta h2 { margin: 0; font-size: 28px; }.neo-mid-cta p { max-width: 440px; margin: 14px 0 20px; color: #555; font-size: 11px; line-height: 1.6; }
.neo-cta-art { position: relative; min-height: 180px; display: grid; place-items: center; }.cta-orbit { position: absolute; width: 230px; height: 82px; border: 1px solid #222; border-radius: 50%; transform: rotate(14deg); }.cta-orbit.b { transform: rotate(-19deg); }.cta-face { z-index: 3; width: 75px; height: 75px; display: grid; place-items: center; color: #fff; background: #171717; border-radius: 45%; font-size: 18px; letter-spacing: 7px; }.cta-spark { position: absolute; right: 65px; bottom: 4px; color: var(--neo-lime); font-size: 62px; }
.neo-process-strip { padding: 32px; display: grid; grid-template-columns: repeat(4,1fr); color: #fff; background: #191919; border-radius: 27px; }
.neo-process-strip article { min-height: 200px; padding: 8px 24px; display: flex; flex-direction: column; border-left: 1px solid #4b4b4b; }.neo-process-strip article:first-child { border-left: 0; }
.neo-process-strip span { color: var(--neo-lime); font-size: 9px; font-weight: 800; }.neo-process-strip h3 { margin: 18px 0 9px; font-size: 18px; }.neo-process-strip p { margin: 0; color: #bdbdbd; font-size: 9px; line-height: 1.6; }.neo-process-strip a { margin-top: auto; color: var(--neo-lime); font-size: 9px; text-decoration: none; }
.neo-results { padding: 0 66px 78px; }.neo-results header { margin-bottom: 26px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }.neo-results h2 { margin: 0; font-size: 25px; }.neo-results header p { max-width: 430px; margin: 0; color: #555; font-size: 10px; }
.neo-result-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; overflow: hidden; color: #fff; background: #191919; border-radius: 25px; }.neo-result-cards article { min-height: 190px; padding: 28px; background: #191919; border-left: 1px solid #484848; }.neo-result-cards article:first-child { border-left: 0; }.neo-result-cards strong { color: var(--neo-lime); font-size: 10px; }.neo-result-cards h3 { margin: 34px 0 10px; font-size: 16px; }.neo-result-cards p { margin: 0; color: #bcbcbc; font-size: 9px; line-height: 1.6; }
.neo-footer { margin: 0 66px; padding: 25px 0 32px; display: flex; justify-content: space-between; gap: 20px; color: #666; border-top: 1px solid #d9d9d9; font-size: 9px; }

/* Reference-matched light dashboard shell */
.app-shell-auth { --hub-mint: #39bea2; --hub-forest: #0d5849; --hub-lime: #e4f2ce; background: #f4f8f6; }
.app-sidebar { width: 226px; padding: 24px 18px 18px; color: #607169; background: #fff; border-right-color: #e8eeea; }
.app-workspace { margin-left: 226px; }
.app-sidebar-brand { padding-left: 7px; color: #103f36; }.app-sidebar .app-brand-mark { color: #fff; background: var(--hub-mint); box-shadow: none; }.app-sidebar .app-brand-copy strong { color: #123f36; }.app-sidebar .app-brand-copy small { color: #8ca099; }
.app-sidebar-branch { margin: 0 0 20px; border-color: #e5eee9; background: #f8fbf9; }.app-sidebar-branch-icon { color: #168d76; background: #e4f5ef; }.app-sidebar-branch small { color: #98aaa3; }.app-sidebar-branch strong { color: #34554d; }
.app-sidebar-nav p { color: #a0afa9; }.app-sidebar-nav a { color: #677970; font-size: 11px; }.app-sidebar-nav a:hover { color: #174a3e; background: #f0f8f5; }.app-sidebar-nav a.active { color: #fff; background: var(--hub-mint); box-shadow: 0 7px 15px rgba(57,190,162,.18); }.app-sidebar-nav a.active::before { display: none; }.app-sidebar-nav .nav-icon { color: #81938b; }.app-sidebar-nav a.active .nav-icon { color: #fff; background: rgba(255,255,255,.13); }
.app-sidebar-help { margin-left: 0; margin-right: 0; padding: 16px; color: #35645a; border: 0; background: var(--hub-lime); }.app-sidebar-help > span { color: #168c75; }.app-sidebar-help strong { color: #174f43; }.app-sidebar-help small { color: #678078; }
.app-workbar { min-height: 70px; background: rgba(255,255,255,.96); border-bottom-color: #e7ede9; }
.app-workbar-context small { color: #66bdaa; }.app-workbar-context strong { color: #1f4038; }
.app-workbar-actions { gap: 8px; }.app-global-search { width: clamp(180px,23vw,310px); min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 9px; color: #98a7a1; background: #f8faf9; border: 1px solid #edf1ef; border-radius: 9px; font-size: 9px; text-decoration: none; }.app-global-search:hover { color: #277c69; border-color: #cfe9e1; }
.app-workbar-date { display: none; }.app-workbar-primary { color: #fff; background: var(--hub-mint); box-shadow: none; }.app-workbar-primary:hover { background: #25aa8f; }
.app-workbar-icon { width: 36px; height: 36px; display: grid; place-items: center; color: #3d6c61; background: var(--hub-lime); border: 0; border-radius: 9px; cursor: pointer; font-size: 10px; text-decoration: none; }.app-workbar-user { display: flex; align-items: center; gap: 8px; padding-left: 5px; }.app-workbar-user .app-user-avatar { width: 34px; height: 34px; color: #fff; background: var(--hub-forest); }.app-workbar-user .app-user-copy strong { color: #21453c; }.app-workbar-user .app-user-copy small { color: #93a39d; }
.app-shell-auth .app-main { max-width: 1480px; padding: 24px 28px; }.app-shell-auth .app-page-head h1 { color: #1d3d35; }.app-shell-auth .app-eyebrow { color: var(--hub-mint); }.app-shell-auth .app-footer { color: #91a29b; border-color: #e2ebe6; }

/* TeamHub-style asset dashboard */
.hub-dashboard { display: grid; gap: 15px; color: #183d34; }
.hub-greeting { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.hub-greeting span { color: #8a9b95; font-size: 9px; }.hub-greeting h1 { margin: 2px 0 0; font-size: 25px; letter-spacing: -.035em; }.hub-greeting p { margin: 4px 0 0; color: #8b9b95; font-size: 9px; }.hub-greeting-actions { display: flex; gap: 8px; }
.hub-btn { min-height: 37px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; font-size: 9px; font-weight: 750; text-decoration: none; }.hub-btn.primary { color: #fff; background: var(--hub-mint); }.hub-btn.quiet { color: #4b6b63; background: #fff; border: 1px solid #e4ece8; }
.hub-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }.hub-stat-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #edf1ef; border-radius: 12px; box-shadow: 0 3px 10px rgba(22,68,56,.025); }.hub-stat-card > div { padding: 15px 16px 0; display: flex; justify-content: space-between; gap: 10px; color: #82938d; font-size: 9px; }.hub-stat-card button, .hub-panel-head button { color: #a1afa9; background: transparent; border: 0; cursor: pointer; }.hub-stat-card > strong { min-height: 61px; padding: 8px 16px 14px; display: flex; align-items: baseline; gap: 5px; font-size: 26px; letter-spacing: -.04em; }.hub-stat-card > strong small { color: #8c9c96; font-size: 8px; font-weight: 500; letter-spacing: 0; }.hub-stat-card footer { min-height: 38px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #4b695f; background: var(--hub-lime); font-size: 8px; }.hub-stat-card footer i { color: #2fa68e; font-size: 13px; }
.hub-stat-link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.hub-stat-link:hover { color: inherit; border-color: #cfe4dc; box-shadow: 0 12px 28px rgba(22,68,56,.10); transform: translateY(-3px); }
.hub-stat-link:focus-visible { outline: 3px solid rgba(47,193,161,.28); outline-offset: 3px; }
.hub-stat-card-action { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; color: #678078; background: #f2f7f4; border-radius: 8px; transition: color .18s ease, background .18s ease, transform .18s ease; }
.hub-stat-link:hover .hub-stat-card-action { color: #173f35; background: #c8ff5c; transform: translateX(2px); }
.hub-primary-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(220px,.62fr) minmax(230px,.72fr); gap: 12px; }.hub-panel { min-width: 0; padding: 17px; background: #fff; border: 1px solid #edf1ef; border-radius: 12px; box-shadow: 0 3px 10px rgba(22,68,56,.025); }.hub-panel-head { margin-bottom: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.hub-panel-head h2 { margin: 0; color: #1b4037; font-size: 13px; }.hub-panel-head p { margin: 3px 0 0; color: #91a099; font-size: 8px; }.hub-panel-head > a { padding: 7px 9px; color: #4c6a62; background: var(--hub-lime); border-radius: 7px; font-size: 8px; text-decoration: none; }
.hub-condition-summary { display: flex; align-items: baseline; gap: 7px; }.hub-condition-summary strong { font-size: 21px; }.hub-condition-summary span { color: #8a9993; font-size: 8px; }.hub-condition-summary b { padding: 2px 5px; color: #258d77; background: #e4f5ef; border-radius: 99px; }
.hub-chart-condition { height: 190px; margin-top: 6px; position: relative; }.hub-chart-legend { display: flex; gap: 18px; }.hub-chart-legend span { display: inline-flex; align-items: center; gap: 5px; color: #7f9089; font-size: 8px; }.hub-chart-legend i { width: 7px; height: 7px; border-radius: 50%; }.hub-chart-legend i.good { background: var(--hub-mint); }.hub-chart-legend i.warn { background: #d7eeb8; }.hub-chart-legend i.bad { background: #f1a1a4; }
.hub-health-card { display: flex; flex-direction: column; }.hub-gauge { width: 145px; height: 78px; margin: 14px auto 12px; overflow: hidden; position: relative; }.hub-gauge::before { content:""; position:absolute; width:145px; height:145px; border-radius:50%; background: conic-gradient(from 270deg, var(--hub-forest) var(--hub-score), #dbeec9 0 180deg, transparent 0); }.hub-gauge::after { content:""; position:absolute; left:20px; top:20px; width:105px; height:105px; border-radius:50%; background:#fff; }.hub-gauge > div { position:absolute; z-index:2; left:0; right:0; bottom:0; display:grid; text-align:center; }.hub-gauge strong { font-size:23px; }.hub-gauge span { color:#8b9b95; font-size:8px; }.hub-health-note { margin-top:auto; padding:10px; background:var(--hub-lime); border-radius:8px; }.hub-health-note span { color:#226b5a; font-size:8px; font-weight:800; }.hub-health-note p { margin:4px 0 0; color:#60796f; font-size:7px; }
.hub-chart-category { height: 213px; position: relative; }
.hub-secondary-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(270px,.55fr); gap: 12px; align-items: start; }.hub-table-wrap { overflow-x:auto; }.hub-table { width:100%; border-collapse:collapse; }.hub-table th { padding:9px 10px; color:#91a099; background:#fafbfa; border:0; font-size:7px; font-weight:700; text-align:left; }.hub-table td { padding:10px; color:#526b63; border-bottom:1px solid #eff3f1; font-size:8px; white-space:nowrap; }.hub-table tr:last-child td { border-bottom:0; }.hub-asset { display:flex; align-items:center; gap:8px; }.hub-asset > span { width:30px; height:30px; display:grid; place-items:center; color:#168c74; background:#e4f6ef; border-radius:50%; }.hub-asset > div { display:grid; }.hub-asset strong { color:#24473e; font-size:8px; }.hub-asset small { margin-top:2px; color:#9aa8a2; font-size:7px; }.hub-badge { padding:4px 7px; border-radius:99px; font-size:7px; font-weight:750; }.hub-badge.good { color:#147b66; background:#ddf4ed; }.hub-badge.warn { color:#92711c; background:#f7efd3; }.hub-badge.bad { color:#aa464b; background:#fbe4e5; }.hub-row-btn { width:26px; height:26px; display:grid; place-items:center; color:#378d7b; background:#eff7f4; border-radius:6px; text-decoration:none; }
.hub-side-stack { display:grid; gap:12px; }.hub-priority-card > a { padding:10px 0; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; color:inherit; border-bottom:1px solid #eff3f1; text-decoration:none; }.hub-priority-card > a:last-child { padding-bottom:0; border-bottom:0; }.hub-priority-card > a > span { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; }.hub-priority-card .mint { color:#198e76; background:#e1f6ef; }.hub-priority-card .lime { color:#718f42; background:#eef7df; }.hub-priority-card .forest { color:#fff; background:#0f5a4b; }.hub-priority-card a div { display:grid; }.hub-priority-card strong { color:#24463d; font-size:8px; }.hub-priority-card small { margin-top:3px; color:#97a59f; font-size:7px; }.hub-priority-card a > i { color:#a3afa9; font-size:7px; }.hub-promo { padding:18px; background:var(--hub-lime); border-radius:12px; }.hub-promo > span { width:36px; height:36px; display:grid; place-items:center; color:#fff; background:var(--hub-forest); border-radius:9px; }.hub-promo h2 { margin:18px 0 7px; font-size:15px; }.hub-promo p { margin:0 0 14px; color:#5c776d; font-size:8px; line-height:1.6; }.hub-promo a { min-height:34px; padding:0 12px; display:inline-flex; align-items:center; color:#fff; background:var(--hub-mint); border-radius:7px; font-size:8px; font-weight:750; text-decoration:none; }

@media (max-width: 1180px) {
    .hub-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.hub-primary-grid { grid-template-columns:1.3fr .7fr; }.hub-category-card { grid-column:1 / -1; }.hub-chart-category { height:180px; }.hub-secondary-grid { grid-template-columns:1fr; }.hub-side-stack { grid-template-columns:1fr 1fr; }
    .app-global-search { display:none; }
}
@media (max-width: 960px) { .app-workspace { margin-left:0; } }
@media (max-width: 760px) {
    .neo-landing { padding:0; }.neo-page { border-radius:0; }.neo-nav { height:74px; padding:0 22px; }.neo-nav-links a:not(.neo-nav-cta) { display:none; }.neo-hero { padding:46px 22px; grid-template-columns:1fr; }.neo-hero h1 { font-size:48px; }.neo-orbit { min-height:310px; }.neo-trust { margin:0 22px; grid-template-columns:1fr 1fr; gap:18px; }.neo-trust span:last-child { grid-column:1 / -1; }.neo-section { padding:58px 22px; }.neo-section-head { grid-template-columns:1fr; gap:12px; }.neo-service-grid { grid-template-columns:1fr; }.neo-mid-cta { margin:0 22px; padding:32px 25px; grid-template-columns:1fr; }.neo-process-strip { grid-template-columns:1fr 1fr; }.neo-process-strip article:nth-child(3) { border-left:0; border-top:1px solid #4b4b4b; padding-top:24px; }.neo-process-strip article:nth-child(4) { border-top:1px solid #4b4b4b; padding-top:24px; }.neo-results { padding:0 22px 58px; }.neo-results header { align-items:flex-start; flex-direction:column; }.neo-result-cards { grid-template-columns:1fr; }.neo-result-cards article { border-left:0; border-top:1px solid #484848; }.neo-result-cards article:first-child { border-top:0; }.neo-footer { margin:0 22px; flex-direction:column; }
    .app-workbar-user .app-user-copy, .app-workbar-icon { display:none; }.hub-greeting { align-items:flex-start; flex-direction:column; }.hub-greeting-actions { width:100%; }.hub-greeting-actions .hub-btn { flex:1; justify-content:center; }.hub-primary-grid { grid-template-columns:1fr; }.hub-category-card { grid-column:auto; }.hub-side-stack { grid-template-columns:1fr; }.hub-table th:nth-child(2),.hub-table td:nth-child(2),.hub-table th:nth-child(3),.hub-table td:nth-child(3) { display:none; }
}
@media (max-width: 520px) {
    .neo-hero h1 { font-size:42px; }.orbit-line { width:280px; }.neo-service { min-height:235px; padding:23px; grid-template-columns:1fr 1fr; }.neo-service h3 { font-size:18px; }.neo-process-strip { grid-template-columns:1fr; }.neo-process-strip article { min-height:170px; border-left:0; border-top:1px solid #4b4b4b; padding:22px 4px; }.neo-process-strip article:first-child { border-top:0; }.neo-process-strip article:nth-child(3),.neo-process-strip article:nth-child(4) { padding-top:22px; }
    .hub-stat-grid { grid-template-columns:1fr 1fr; gap:9px; }.hub-stat-card > strong { font-size:22px; }.hub-stat-card footer span { max-width:92px; }.hub-panel { padding:14px; }.hub-table th:nth-child(4),.hub-table td:nth-child(4) { display:none; }
}

/* Full-width website treatment (remove presentation mockup framing) */
.neo-landing { padding: 0; background: #fff; }
.neo-page { width: 100%; max-width: none; border-radius: 0; }
.neo-nav { position: sticky; top: 0; z-index: 80; width: 100%; height: 78px; padding-left: max(28px, calc((100vw - 1240px) / 2)); padding-right: max(28px, calc((100vw - 1240px) / 2)); background: rgba(255,255,255,.96); border-bottom: 1px solid #ececec; backdrop-filter: blur(12px); }
.neo-hero, .neo-section { width: min(100%, 1240px); margin-left: auto; margin-right: auto; }
.neo-trust { width: min(calc(100% - 56px), 1108px); margin-left: auto; margin-right: auto; }
.neo-mid-cta { width: min(calc(100% - 56px), 1108px); margin-left: auto; margin-right: auto; }
.neo-results { width: min(100%, 1240px); margin-left: auto; margin-right: auto; }
.neo-footer { width: min(calc(100% - 56px), 1108px); margin-left: auto; margin-right: auto; }

/* Simpler reference-style menu */
.app-sidebar .app-brand-mark { position: relative; width: 30px; height: 30px; color: transparent; background: transparent; border-radius: 0; font-size: 0; }
.app-sidebar .app-brand-mark::before { content: "✣"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--hub-mint); font-size: 29px; line-height: 1; transform: rotate(10deg); }
.app-sidebar-brand { padding-top: 2px; padding-bottom: 36px; }
.app-sidebar-nav p:first-child { margin-top: 0; }
.app-sidebar-nav a { min-height: 43px; }
.app-sidebar-help { margin-top: auto; }

/* Modern PIC directory */
.pic-hub-page { display: grid; gap: 14px; }
.pic-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; }
.pic-summary-grid article { min-width: 0; min-height: 102px; padding: 15px; display: flex; align-items: flex-start; gap: 11px; background: #fff; border: 1px solid #eaf0ed; border-radius: 11px; box-shadow: 0 3px 10px rgba(22,68,56,.025); }
.pic-summary-grid article > span { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; font-size: 12px; }
.pic-summary-grid .mint { color: #168f77; background: #e2f7ef; }.pic-summary-grid .forest { color: #fff; background: #105c4c; }.pic-summary-grid .lime { color: #688e35; background: #edf7df; }.pic-summary-grid .amber { color: #a8791d; background: #fcf3dc; }
.pic-summary-grid article > div { min-width: 0; display: grid; }.pic-summary-grid small { color: #879890; font-size: 8px; }.pic-summary-grid strong { margin-top: 3px; color: #173f35; font-size: 23px; line-height: 1; }.pic-summary-grid p { margin: 7px 0 0; overflow: hidden; color: #9aa8a2; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.pic-directory { overflow: hidden; background: #fff; border: 1px solid #e8efeb; border-radius: 12px; box-shadow: 0 3px 10px rgba(22,68,56,.025); }
.pic-directory-head { min-height: 77px; padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #edf2ef; }
.pic-directory-head h2 { margin: 0; color: #1a4036; font-size: 14px; }.pic-directory-head p { margin: 4px 0 0; color: #91a099; font-size: 8px; }
.pic-search-box { width: min(100%, 285px); min-height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 9px; color: #91a19a; background: #f8faf9; border: 1px solid #e8eeeb; border-radius: 8px; }
.pic-search-box i { font-size: 9px; }.pic-search-box input { width: 100%; min-height: 0 !important; padding: 0 !important; color: #294d43 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; font-size: 8px; box-shadow: none !important; outline: none; }.pic-search-box input::placeholder { color: #9ba9a3; }
.pic-grid { padding: 16px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.pic-person-card { min-width: 0; padding: 16px; background: #fff; border: 1px solid #e8eeeb; border-radius: 11px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.pic-person-card:hover { border-color: #cde8df; box-shadow: 0 9px 22px rgba(24,92,73,.07); transform: translateY(-2px); }
.pic-person-card[hidden] { display: none; }.pic-person-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.pic-person-avatar { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--hub-mint); border-radius: 50%; font-size: 13px; font-weight: 800; letter-spacing: -.04em; box-shadow: inset 0 0 0 5px rgba(255,255,255,.18); }
.pic-profile-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 999px; font-size: 7px; font-weight: 700; }.pic-profile-status i { font-size: 4px; }.pic-profile-status.complete { color: #197760; background: #e0f5ed; }.pic-profile-status.incomplete { color: #9c741c; background: #fbf2d9; }
.pic-person-identity { margin-top: 13px; }.pic-person-identity h3 { margin: 0; color: #1d4238; font-size: 13px; }.pic-person-identity p { min-height: 25px; margin: 4px 0 8px; color: #7f9189; font-size: 8px; line-height: 1.5; }.pic-person-identity > span { display: inline-flex; align-items: center; gap: 6px; color: #99a7a1; font-size: 7px; }
.pic-person-metrics { margin-top: 14px; display: grid; grid-template-columns: repeat(3,1fr); background: #f8faf9; border-radius: 8px; }.pic-person-metrics > div { padding: 9px 7px; display: grid; text-align: center; border-left: 1px solid #e8eeeb; }.pic-person-metrics > div:first-child { border-left: 0; }.pic-person-metrics strong { color: #20473c; font-size: 12px; }.pic-person-metrics small { margin-top: 2px; color: #95a39d; font-size: 6px; }
.pic-person-actions { margin-top: 14px; display: flex; gap: 7px; }.pic-view-assets { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1; color: #fff; background: var(--hub-mint); border-radius: 7px; font-size: 8px; font-weight: 750; text-decoration: none; }.pic-view-assets:hover { background: #27aa90; }.pic-edit-profile { width: 34px; height: 34px; display: grid; place-items: center; color: #276f5f; background: var(--hub-lime); border-radius: 7px; font-size: 8px; text-decoration: none; }
.pic-no-results, .pic-empty { padding: 50px 20px; text-align: center; }.pic-no-results i { color: #b4c1bc; font-size: 27px; }.pic-no-results h3, .pic-empty h3 { margin: 13px 0 5px; color: #274b42; font-size: 14px; }.pic-no-results p, .pic-empty p { margin: 0; color: #8c9c96; font-size: 8px; }.pic-empty > span { width: 58px; height: 58px; margin: 0 auto; display: grid; place-items: center; color: #168c74; background: #e2f6ef; border-radius: 50%; font-size: 20px; }

@media (max-width: 1100px) { .pic-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.pic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .neo-nav { padding-left: 22px; padding-right: 22px; }.neo-trust,.neo-mid-cta,.neo-footer { width: calc(100% - 44px); }.pic-directory-head { align-items: flex-start; flex-direction: column; }.pic-search-box { width: 100%; max-width: none; }.pic-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .pic-summary-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.pic-summary-grid article { min-height: 112px; padding: 12px; flex-direction: column; }.pic-summary-grid p { display: none; } }

/* PIC detail modal */
body.pic-modal-open { overflow: hidden; }
.pic-view-assets { border: 0; cursor: pointer; }
.pic-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
.pic-modal.open { visibility: visible; opacity: 1; }
.pic-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(12,31,26,.58); border: 0; backdrop-filter: blur(5px); cursor: pointer; }
.pic-modal-dialog { position: relative; z-index: 1; width: min(100%, 1040px); max-height: min(88vh, 760px); overflow: auto; background: #f7faf8; border: 1px solid rgba(255,255,255,.7); border-radius: 15px; box-shadow: 0 28px 80px rgba(6,36,28,.25); transform: translateY(14px) scale(.985); transition: transform .22s ease; }
.pic-modal.open .pic-modal-dialog { transform: translateY(0) scale(1); }
.pic-modal-loading { min-height: 340px; display: grid; place-content: center; justify-items: center; color: #758a82; text-align: center; }
.pic-modal-loading[hidden] { display: none; }.pic-modal-loading span { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: var(--hub-mint); border-radius: 50%; }.pic-modal-loading p { margin: 12px 0 0; font-size: 9px; }
.pic-modal-content { min-width: 0; }
.pic-modal-profile { min-height: 92px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #fff; border-bottom: 1px solid #e7eeea; }
.pic-modal-person { display: flex; align-items: center; gap: 12px; }.pic-modal-avatar { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--hub-mint); border-radius: 50%; font-size: 14px; font-weight: 800; box-shadow: inset 0 0 0 5px rgba(255,255,255,.2); }.pic-modal-person > div { display: grid; }.pic-modal-kicker { color: #64af9f; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.pic-modal-person h2 { margin: 3px 0 0; color: #183f35; font-size: 19px; letter-spacing: -.02em; }.pic-modal-person p { margin: 3px 0 0; color: #87978f; font-size: 8px; }
.pic-modal-profile-actions { display: flex; align-items: center; gap: 8px; }.pic-modal-edit { min-height: 35px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; color: #fff; background: var(--hub-mint); border-radius: 7px; font-size: 8px; font-weight: 750; text-decoration: none; }.pic-modal-close { width: 35px; height: 35px; display: grid; place-items: center; color: #587067; background: #f0f5f2; border: 0; border-radius: 8px; cursor: pointer; }
.pic-modal-info-grid { margin: 14px; display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; background: #fff; border: 1px solid #e7eeea; border-radius: 10px; }.pic-modal-info-grid > div { padding: 13px 15px; display: grid; border-left: 1px solid #e7eeea; }.pic-modal-info-grid > div:first-child { border-left: 0; }.pic-modal-info-grid span { color: #90a099; font-size: 7px; }.pic-modal-info-grid strong { margin-top: 4px; overflow: hidden; color: #21483d; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.pic-modal-assets { margin: 0 14px 14px; overflow: hidden; background: #fff; border: 1px solid #e7eeea; border-radius: 10px; }.pic-modal-assets > header { min-height: 64px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e9efec; }.pic-modal-assets h3 { margin: 0; color: #1c4338; font-size: 13px; }.pic-modal-assets header p { margin: 3px 0 0; color: #91a099; font-size: 7px; }.pic-modal-assets header > span { padding: 6px 9px; color: #237663; background: #e3f5ee; border-radius: 99px; font-size: 7px; font-weight: 750; }
.pic-modal-table-wrap { overflow-x: auto; }.pic-modal-table { width: 100%; border-collapse: collapse; }.pic-modal-table th { padding: 10px 12px; color: #91a099; background: #fafbfa; border: 0; font-size: 7px; font-weight: 750; text-align: left; white-space: nowrap; }.pic-modal-table td { padding: 10px 12px; color: #536c63; border-bottom: 1px solid #eff3f1; font-size: 8px; white-space: nowrap; }.pic-modal-table tr:last-child td { border-bottom: 0; }
.pic-modal-asset-cell { min-width: 165px; display: flex; align-items: center; gap: 9px; }.pic-modal-asset-cell > img, .pic-modal-asset-cell > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; object-fit: cover; color: #198e75; background: #e4f5ef; border-radius: 8px; }.pic-modal-asset-cell > div { min-width: 0; display: grid; }.pic-modal-asset-cell strong { max-width: 165px; overflow: hidden; color: #24483e; font-size: 8px; text-overflow: ellipsis; }.pic-modal-asset-cell small { margin-top: 3px; color: #98a69f; font-size: 7px; }
.pic-document-status { min-width: 25px; height: 25px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: #a5b1ac; background: #f2f5f3; border-radius: 6px; font-size: 7px; }.pic-document-status.available { color: #197c67; background: #e1f5ee; }.pic-modal-row-edit { width: 27px; height: 27px; display: grid; place-items: center; color: #277b69; background: var(--hub-lime); border-radius: 6px; font-size: 7px; text-decoration: none; }
.pic-modal-empty { padding: 45px 20px; text-align: center; }.pic-modal-empty > span { width: 52px; height: 52px; margin: 0 auto; display: grid; place-items: center; color: #208c75; background: #e2f5ee; border-radius: 50%; font-size: 18px; }.pic-modal-empty h3 { margin: 12px 0 4px; color: #24473e; font-size: 13px; }.pic-modal-empty p { margin: 0; color: #8d9c96; font-size: 8px; }
.pic-modal-error { min-height: 320px; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }.pic-modal-error > i { color: #c85a5f; font-size: 28px; }.pic-modal-error h3 { margin: 12px 0 4px; color: #24473e; font-size: 14px; }.pic-modal-error p { margin: 0; color: #899990; font-size: 8px; }.pic-modal-error button { margin-top: 14px; padding: 9px 14px; color: #fff; background: var(--hub-mint); border: 0; border-radius: 7px; font-size: 8px; cursor: pointer; }

@media (max-width: 760px) {
    .pic-modal { padding: 0; align-items: end; }.pic-modal-dialog { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }.pic-modal-profile { align-items: flex-start; }.pic-modal-info-grid { grid-template-columns: 1fr 1fr; }.pic-modal-info-grid > div:nth-child(3) { border-left: 0; border-top: 1px solid #e7eeea; }.pic-modal-info-grid > div:nth-child(4) { border-top: 1px solid #e7eeea; }.pic-modal-table th:nth-child(2), .pic-modal-table td:nth-child(2), .pic-modal-table th:nth-child(3), .pic-modal-table td:nth-child(3), .pic-modal-table th:nth-child(5), .pic-modal-table td:nth-child(5) { display: none; }
}
@media (max-width: 460px) { .pic-modal-profile { padding: 15px; }.pic-modal-edit { width: 35px; padding: 0; justify-content: center; font-size: 0; }.pic-modal-edit i { font-size: 8px; }.pic-modal-assets { margin-left: 9px; margin-right: 9px; }.pic-modal-info-grid { margin-left: 9px; margin-right: 9px; }.pic-modal-table th:nth-child(6), .pic-modal-table td:nth-child(6) { display: none; } }

/* Larger, more readable type scale for landing page and dashboard */
.neo-brand { font-size: 18px; }
.neo-nav-links a { font-size: 13px; }
.neo-overline { font-size: 11px; }
.neo-hero-copy p { max-width: 560px; font-size: 17px; line-height: 1.7; }
.neo-black-btn { min-height: 50px; padding: 0 20px; font-size: 13px; }
.neo-black-btn i { font-size: 11px; }
.orbit-tag-top { font-size: 10px; }
.orbit-tag strong { font-size: 16px; }
.orbit-tag small { font-size: 11px; }
.neo-trust span { font-size: 12px; }
.neo-trust i { font-size: 15px; }
.neo-section-head h2 { font-size: 31px; }
.neo-section-head p { font-size: 15px; line-height: 1.65; }
.neo-service h3 { font-size: 25px; }
.neo-service a { font-size: 12px; }
.neo-mid-cta h2 { font-size: 34px; }
.neo-mid-cta p { font-size: 15px; line-height: 1.65; }
.neo-process-strip span { font-size: 11px; }
.neo-process-strip h3 { font-size: 21px; }
.neo-process-strip p { font-size: 13px; line-height: 1.65; }
.neo-process-strip a { font-size: 12px; }
.neo-results h2 { font-size: 31px; }
.neo-results header p { font-size: 14px; line-height: 1.6; }
.neo-result-cards strong { font-size: 12px; }
.neo-result-cards h3 { font-size: 19px; }
.neo-result-cards p { font-size: 13px; line-height: 1.65; }
.neo-footer { font-size: 12px; }

.app-sidebar .app-brand-copy strong { font-size: 16px; }
.app-sidebar .app-brand-copy small { font-size: 10px; }
.app-sidebar-branch small { font-size: 10px; }
.app-sidebar-branch strong { font-size: 12px; }
.app-sidebar-nav p { font-size: 10px; }
.app-sidebar-nav a { font-size: 13px; }
.app-sidebar-help strong { font-size: 11px; }
.app-sidebar-help small { font-size: 10px; }
.app-sidebar-account .app-user-copy strong { font-size: 11px; }
.app-sidebar-account .app-user-copy small { font-size: 10px; }
.app-workbar-context small { font-size: 10px; }
.app-workbar-context strong { font-size: 14px; }
.app-global-search { font-size: 12px; }
.app-workbar-primary { font-size: 12px; }

.hub-greeting span { font-size: 12px; }
.hub-greeting h1 { font-size: 31px; }
.hub-greeting p { font-size: 13px; }
.hub-btn { min-height: 41px; padding: 0 16px; font-size: 12px; }
.hub-stat-card > div { font-size: 12px; }
.hub-stat-card > strong { min-height: 68px; font-size: 31px; }
.hub-stat-card > strong small { font-size: 11px; }
.hub-stat-card footer { min-height: 42px; font-size: 11px; }
.hub-panel-head h2 { font-size: 16px; }
.hub-panel-head p { font-size: 11px; }
.hub-panel-head > a { font-size: 11px; }
.hub-condition-summary strong { font-size: 25px; }
.hub-condition-summary span { font-size: 11px; }
.hub-chart-legend span { font-size: 10px; }
.hub-gauge strong { font-size: 27px; }
.hub-gauge span { font-size: 10px; }
.hub-health-note span { font-size: 11px; }
.hub-health-note p { font-size: 10px; }
.hub-table th { font-size: 10px; }
.hub-table td { font-size: 11px; }
.hub-asset strong { font-size: 11px; }
.hub-asset small { font-size: 9px; }
.hub-badge { font-size: 9px; }
.hub-priority-card strong { font-size: 11px; }
.hub-priority-card small { font-size: 10px; }
.hub-promo h2 { font-size: 18px; }
.hub-promo p { font-size: 11px; }
.hub-promo a { min-height: 38px; font-size: 11px; }

@media (max-width: 520px) {
    .neo-nav-links a { font-size: 12px; }
    .neo-hero-copy p { font-size: 16px; }
    .neo-section-head p, .neo-mid-cta p { font-size: 14px; }
    .hub-greeting h1 { font-size: 29px; }
    .hub-stat-card > div { font-size: 11px; }
    .hub-stat-card > strong { font-size: 26px; }
    .hub-stat-card footer { font-size: 10px; }
}

/* Modern asset registry */
.asset-hub-page { display: grid; gap: 16px; color: #21443b; }
.asset-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.asset-summary-grid article { min-width: 0; min-height: 116px; padding: 18px; display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid #e7efeb; border-radius: 13px; box-shadow: 0 4px 14px rgba(20, 78, 62, .035); }
.asset-summary-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; font-size: 14px; }
.asset-summary-icon.mint { color: #fff; background: var(--hub-mint); }
.asset-summary-icon.green { color: #187a65; background: #e0f5ed; }
.asset-summary-icon.amber { color: #9c731d; background: #fbf2dc; }
.asset-summary-grid article > div { min-width: 0; display: grid; }
.asset-summary-grid small { color: #82958d; font-size: 11px; font-weight: 700; }
.asset-summary-grid strong { margin-top: 3px; color: #173f35; font-size: 29px; line-height: 1; letter-spacing: -.04em; }
.asset-summary-grid p { margin: 8px 0 0; overflow: hidden; color: #93a29c; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }

.asset-directory { overflow: hidden; background: #fff; border: 1px solid #e7efeb; border-radius: 14px; box-shadow: 0 4px 14px rgba(20, 78, 62, .035); }
.asset-directory-head { min-height: 96px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #eaf0ed; }
.asset-directory-kicker { color: var(--hub-mint); font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.asset-directory-head h2 { margin: 5px 0 0; color: #183f35; font-size: 19px; letter-spacing: -.02em; }
.asset-directory-head p { margin: 5px 0 0; color: #83958e; font-size: 11px; }
.asset-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.asset-toolbar-actions form { margin: 0 !important; }
.asset-tool-button { min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #e1eae5; border-radius: 9px; font-size: 11px; font-weight: 750; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.asset-tool-button.quiet { color: #41665c; background: #fff; }
.asset-tool-button.quiet:hover { color: #167e68; background: #f1f8f5; border-color: #cde6de; }
.asset-tool-button.primary { color: #fff; background: var(--hub-mint); border-color: var(--hub-mint); }
.asset-tool-button.primary:hover { background: #29aa90; border-color: #29aa90; }
.asset-tool-button .filter-chevron { margin-left: 2px; font-size: 8px; }
.asset-report-menu { position: relative; }
.asset-report-menu > summary { list-style: none; user-select: none; }
.asset-report-menu > summary::-webkit-details-marker { display: none; }
.asset-report-menu[open] > summary { color: #126b59; background: #edf7f3; border-color: #bfdfd5; }
.asset-report-menu[open] .report-chevron { transform: rotate(180deg); }
.asset-report-menu .report-chevron { margin-left: 2px; font-size: 8px; transition: transform .18s ease; }
.asset-report-dropdown { width: 284px; padding: 10px; position: absolute; z-index: 80; top: calc(100% + 9px); right: 0; color: #294c42; background: #fff; border: 1px solid #dfeae5; border-radius: 13px; box-shadow: 0 18px 46px rgba(12, 62, 49, .18); }
.asset-report-dropdown::before { content: ''; width: 10px; height: 10px; position: absolute; top: -6px; right: 19px; background: #fff; border-top: 1px solid #dfeae5; border-left: 1px solid #dfeae5; transform: rotate(45deg); }
.asset-report-dropdown-label { padding: 4px 6px 9px; display: block; color: #8a9b95; font-size: 8px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.asset-report-link { min-height: 62px; padding: 9px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; align-items: center; gap: 10px; color: inherit; border-radius: 9px; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.asset-report-link:hover { color: inherit; background: #f4f9f7; transform: translateX(2px); }
.asset-report-link > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; font-size: 14px; }
.asset-report-link.pdf > span { color: #b8474d; background: #fbe9ea; }
.asset-report-link.excel > span { color: #16745f; background: #e2f5ee; }
.asset-report-link > div { min-width: 0; display: grid; }
.asset-report-link strong { color: #23483e; font-size: 11px; }
.asset-report-link small { margin-top: 3px; color: #8a9c95; font-size: 8px; line-height: 1.35; }
.asset-report-link > i { color: #9baba5; font-size: 9px; }
.asset-report-dropdown > p { margin: 6px 5px 2px; padding-top: 8px; color: #91a09a; border-top: 1px solid #edf2ef; font-size: 8px; line-height: 1.45; }
.asset-report-dropdown > p i { margin-right: 4px; color: #3da78f; }

.asset-search-row { padding: 15px 20px; display: flex; align-items: center; gap: 14px; background: #fbfcfb; border-bottom: 1px solid #edf2ef; }
.asset-main-search { min-height: 42px; padding: 0 14px; display: flex; align-items: center; gap: 10px; flex: 1; color: #86a098; background: #fff; border: 1px solid #dfe9e4; border-radius: 9px; }
.asset-main-search:focus-within { color: #238c76; border-color: #8ed7c7; box-shadow: 0 0 0 3px rgba(57, 190, 162, .1); }
.asset-main-search input { width: 100%; min-height: 0 !important; padding: 0 !important; color: #24473e !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; font-size: 12px !important; box-shadow: none !important; outline: none; }
.asset-main-search input::placeholder { color: #9aa9a3; }
.asset-search-hint { color: #92a19b; font-size: 10px; white-space: nowrap; }
.asset-search-hint i { margin-right: 4px; color: #5bb8a4; }
.asset-sort-control { min-height: 42px; padding: 0 10px 0 13px; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; color: #668078; background: #fff; border: 1px solid #dfe9e4; border-radius: 9px; }
.asset-sort-control > i { color: #258b75; font-size: 11px; }
.asset-sort-control > span { font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.asset-sort-control select { width: auto !important; min-width: 160px; min-height: 34px !important; padding: 0 28px 0 8px !important; color: #294b42 !important; background-color: #f6faf8 !important; border: 0 !important; border-radius: 7px !important; font-size: 10px !important; font-weight: 700; box-shadow: none !important; cursor: pointer; }

.asset-filter-drawer { margin: 0 !important; background: #f8fbf9; }
.asset-filter-drawer.mt-4 { padding: 17px 20px; border-bottom: 1px solid #e8efeb; }
.asset-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; }
.asset-filter-field { min-width: 0; }
.asset-filter-field label { display: block; margin: 0 0 6px; color: #587269; font-size: 10px; font-weight: 750; }
.asset-filter-field select { width: 100%; min-height: 40px !important; padding: 0 34px 0 11px !important; color: #294b42 !important; background-color: #fff !important; border: 1px solid #dce7e2 !important; border-radius: 8px !important; font-size: 11px !important; box-shadow: none !important; }
.asset-filter-actions { display: flex; gap: 7px; }
.asset-filter-button { min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid; border-radius: 8px; font-size: 10px; font-weight: 750; cursor: pointer; }
.asset-filter-button.reset { color: #61776f; background: #fff; border-color: #dce6e1; }
.asset-filter-button.apply { color: #fff; background: #145f50; border-color: #145f50; }

.asset-table-wrap { width: 100%; overflow-x: hidden; }
.asset-directory .dataTables_wrapper { padding: 0; color: #526d64; font-size: 11px; }
.asset-directory .dataTables_wrapper .dataTables_filter { display: none; }
.asset-directory .dataTables_wrapper .dataTables_length { margin: 0 !important; padding: 14px 20px 10px; float: none; color: #7e928a; font-size: 10px; }
.asset-directory .dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 7px; }
.asset-directory .dataTables_wrapper .dataTables_length select { width: 70px; min-height: 34px !important; margin: 0; padding: 0 26px 0 9px !important; color: #34564d !important; background-color: #f8faf9 !important; border: 1px solid #e1e9e5 !important; border-radius: 7px !important; font-size: 10px !important; }
table.asset-data-table { width: 100% !important; min-width: 0; margin: 0 !important; border: 0 !important; border-collapse: collapse !important; }
.asset-data-table thead th { padding: 11px 13px !important; color: #83968f !important; background: #f7faf8 !important; border-top: 1px solid #edf2ef !important; border-bottom: 1px solid #e5ede9 !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .07em !important; text-align: left; text-transform: uppercase; white-space: nowrap; }
.asset-data-table tbody td { padding: 13px !important; color: #526d64; background: #fff; border-bottom: 1px solid #edf2ef !important; font-size: 11px !important; vertical-align: middle; white-space: nowrap; }
.asset-data-table tbody tr:hover td { background: #fbfdfc; }
.asset-data-table tbody tr:last-child td { border-bottom: 0 !important; }
.asset-name-cell { min-width: 180px; display: flex; align-items: center; gap: 10px; }
.asset-name-cell > span { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; color: #168d75; background: #e3f6ef; border-radius: 9px; }
.asset-name-cell > div { min-width: 0; display: grid; }
.asset-name-cell strong { max-width: 180px; overflow: hidden; color: #1d453a; font-size: 11px; text-overflow: ellipsis; }
.asset-name-cell small { max-width: 180px; margin-top: 3px; overflow: hidden; color: #98a69f; font-size: 9px; text-overflow: ellipsis; }
.asset-category-chip { max-width: 160px; padding: 6px 8px; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; border-radius: 7px; font-size: 9px; text-overflow: ellipsis; }
.asset-category-chip.office { color: #276c9b; background: #eaf4fb; }
.asset-category-chip.household { color: #7c5a9d; background: #f2ecf8; }
.asset-category-chip.equipment { color: #88671c; background: #f8f0da; }
.asset-year { color: #526d64; font-weight: 650; }
.asset-condition { min-width: 88px; padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; font-size: 9px; font-weight: 750; }
.asset-condition i { font-size: 5px; }
.asset-condition.good { color: #147b66; background: #ddf4ed; }
.asset-condition.warn { color: #8e6c17; background: #f8efd4; }
.asset-condition.bad { color: #a7464b; background: #fbe3e4; }
.asset-pic { display: inline-flex; align-items: center; gap: 7px; color: #3b5c53; font-weight: 650; }
.asset-pic-avatar { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--hub-mint); border-radius: 50%; font-size: 8px; font-weight: 800; }
.asset-qr-link { display: inline-flex; align-items: center; gap: 6px; color: #9aa8a2; font-size: 9px; text-decoration: none; }
.asset-qr-link.available { color: #1d806b; font-weight: 700; }
.asset-row-actions { display: flex; align-items: center; gap: 5px; }
.asset-row-button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; font-size: 9px; text-decoration: none; cursor: pointer; }
.asset-row-button.detail { color: #277b69; background: #e7f5f0; }
.asset-row-button.edit { color: #7c7628; background: #f4f3dc; }
.asset-row-button.delete { color: #ae4a50; background: #fae9ea; }
.asset-row-button.bleach { color: #745799; background: #f1ebf7; }
.asset-row-button:hover { border-color: currentColor; }
.asset-directory .dataTables_wrapper .dataTables_info { padding: 15px 20px !important; color: #84968f; font-size: 10px; }
.asset-directory .dataTables_wrapper .dataTables_paginate { padding: 10px 20px 14px !important; }
.asset-directory .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 32px; min-height: 32px; padding: 7px 10px !important; color: #62776f !important; background: #fff !important; border: 1px solid #e2eae6 !important; border-radius: 7px !important; font-size: 10px; }
.asset-directory .dataTables_wrapper .dataTables_paginate .paginate_button.current { color: #fff !important; background: #145f50 !important; border-color: #145f50 !important; }

.asset-dialog-layer { z-index: 500 !important; background: rgba(11, 35, 29, .6) !important; backdrop-filter: blur(5px); }
.asset-detail-dialog, .asset-confirm-dialog { border: 1px solid rgba(255, 255, 255, .75); border-radius: 15px !important; box-shadow: 0 28px 80px rgba(8, 49, 38, .24) !important; }
.asset-dialog-head { min-height: 68px; padding: 16px 20px !important; border-color: #e7eeea !important; }
.asset-dialog-head h3 { color: #1b4338 !important; font-size: 18px !important; }
.asset-dialog-head button, #closeScanner { width: 34px; height: 34px; display: grid; place-items: center; color: #557068 !important; background: #eff5f2; border: 0; border-radius: 8px; }
.asset-dialog-body { padding: 20px !important; background: #f8faf9; }
.asset-detail-dialog .bg-gray-50 { background: #fff !important; border: 1px solid #e6ede9; }
.asset-detail-dialog h5 { color: #82958e !important; font-size: 10px !important; }
.asset-detail-dialog p { color: #264a40 !important; font-size: 12px !important; }
.asset-detail-dialog #assetTitle { font-size: 17px !important; }
.asset-confirm-dialog > .border-b { border-color: #e7eeea; }
.asset-confirm-dialog h3 { color: #1b4338 !important; }
.asset-confirm-dialog p { font-size: 12px; line-height: 1.65; }
.no-image-container { color: #789087; background: #edf5f1; border: 1px dashed #cfe0d8; }

@media (max-width: 900px) {
    .asset-directory-head { align-items: flex-start; flex-direction: column; }
    .asset-toolbar-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
    .asset-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .asset-filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 700px) {
    .asset-summary-grid { grid-template-columns: 1fr; }
    .asset-summary-grid article { min-height: 105px; }
    .asset-search-row { align-items: flex-start; flex-direction: column; }
    .asset-main-search { width: 100%; flex: none; }
    .asset-search-hint { white-space: normal; }
    .asset-sort-control { width: 100%; }
    .asset-sort-control select { min-width: 0; flex: 1; }
    .asset-filter-grid { grid-template-columns: 1fr; }
    .asset-filter-actions { grid-column: auto; }
    .asset-tool-button { flex: 1; }
    .asset-report-menu { flex: 1; }
    .asset-report-menu > summary { width: 100%; }
    .asset-report-dropdown { right: auto; left: 0; width: min(284px, calc(100vw - 44px)); }
    .asset-report-dropdown::before { right: auto; left: 22px; }
    .asset-toolbar-actions form { flex: 1; }
    .asset-toolbar-actions form .asset-tool-button { width: 100%; }
    .asset-directory .dataTables_wrapper .dataTables_info,
    .asset-directory .dataTables_wrapper .dataTables_paginate { float: none; text-align: left; }
    .asset-dialog-layer { padding: 0 !important; align-items: flex-end !important; }
    .asset-detail-dialog, .asset-confirm-dialog { max-height: 92vh !important; border-radius: 16px 16px 0 0 !important; }
}

/* Guided asset entry form */
.asset-entry-layout { display: grid; grid-template-columns: minmax(220px, .36fr) minmax(0, 1fr); align-items: start; gap: 16px; }
.asset-entry-guide { position: sticky; top: 92px; min-width: 0; padding: 23px; color: #fff; background: #104f42; border-radius: 14px; box-shadow: 0 10px 30px rgba(12, 72, 57, .12); }
.asset-entry-guide-icon { width: 45px; height: 45px; display: grid; place-items: center; color: #164f42; background: var(--hub-lime); border-radius: 11px; font-size: 16px; }
.asset-entry-kicker { display: block; margin-top: 24px; color: #77d4c0; font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.asset-entry-guide h2 { margin: 7px 0 0; font-size: 24px; line-height: 1.12; letter-spacing: -.035em; }
.asset-entry-guide > p { margin: 11px 0 0; color: #b9d2ca; font-size: 11px; line-height: 1.65; }
.asset-entry-guide ol { margin: 25px 0 0; padding: 0; display: grid; list-style: none; }
.asset-entry-guide li { min-width: 0; padding: 14px 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.asset-entry-guide li > span { color: #83dbc8; font-size: 10px; font-weight: 800; }
.asset-entry-guide li > div { min-width: 0; display: grid; }
.asset-entry-guide li strong { font-size: 11px; }
.asset-entry-guide li small { margin-top: 4px; color: #91b5ab; font-size: 9px; line-height: 1.45; }
.asset-entry-qr-note { margin-top: 18px; padding: 13px; display: flex; align-items: flex-start; gap: 10px; color: #244f43; background: var(--hub-lime); border-radius: 9px; }
.asset-entry-qr-note > i { margin-top: 2px; color: #238a73; font-size: 14px; }
.asset-entry-qr-note > div { display: grid; }
.asset-entry-qr-note strong { font-size: 10px; }
.asset-entry-qr-note small { margin-top: 4px; color: #627a71; font-size: 8px; line-height: 1.45; }

.asset-entry-card.form-container { padding: 0 !important; overflow: hidden; border: 1px solid #e5ede9; border-radius: 14px !important; background: #fff; box-shadow: 0 4px 14px rgba(20, 78, 62, .035) !important; }
.asset-entry-card .form-header { margin: 0 !important; padding: 21px 24px !important; border-bottom: 1px solid #e8efeb !important; }
.asset-entry-card .form-header h2 { color: #193f35; font-size: 20px; letter-spacing: -.02em; }
.asset-entry-card .form-header p { color: #82958e; font-size: 11px; }
.asset-entry-card > .alert { margin: 18px 24px 0; }
.asset-entry-card > form { padding: 0 24px 24px; }
.asset-entry-card .form-section { margin: 0 !important; padding: 23px 0 8px !important; border-bottom: 1px solid #edf2ef; }
.asset-entry-card .form-section:last-of-type { border-bottom: 0; }
.asset-entry-card .form-section-title { margin: 0 0 18px !important; padding: 0 0 11px !important; color: #1d4439 !important; border-bottom: 1px solid #e9efec !important; font-size: 15px !important; }
.asset-entry-card .form-columns { gap: 0 16px; }
.asset-entry-card .input-group { margin-bottom: 17px; }
.asset-entry-card .input-group label { margin-bottom: 7px !important; color: #4d675f !important; font-size: 11px !important; }
.asset-entry-card .input-group input,
.asset-entry-card .input-group select,
.asset-entry-card .input-group textarea { min-height: 45px !important; padding: 0 40px 0 13px !important; color: #25483f !important; background: #fbfcfb !important; border: 1px solid #dce6e1 !important; border-radius: 9px !important; font-size: 12px !important; box-shadow: none !important; }
.asset-entry-card .input-group textarea { min-height: 110px !important; padding-top: 12px !important; line-height: 1.55; }
.asset-entry-card .input-group input[readonly] { color: #687d75 !important; background: #f1f5f3 !important; }
.asset-entry-card .input-group .icon { top: 39px; right: 13px; color: #8aa098 !important; }
.asset-entry-card .file-input-container { min-height: 160px; padding: 27px !important; display: grid; place-items: center; background: #f8fbf9 !important; border: 1.5px dashed #bdd7cd !important; border-radius: 11px !important; }
.asset-entry-card .file-input-container:hover { background: #f0f8f5 !important; border-color: var(--hub-mint) !important; }
.asset-entry-card .file-input-label { color: #7e918a; font-size: 11px; }
.asset-entry-card .file-input-label i { color: var(--hub-mint) !important; font-size: 27px; }
.asset-entry-card .file-input-label .primary-text { color: #207c68; font-size: 12px; }
.asset-entry-card .image-preview-item { width: 112px; height: 112px; }
.asset-entry-card .form-footer { margin: 15px -24px -24px !important; padding: 17px 24px !important; background: #f8faf9 !important; border-top: 1px solid #e8efeb !important; }
.asset-entry-card .btn-primary { color: #fff !important; background: var(--hub-mint) !important; border-color: var(--hub-mint) !important; }
.asset-entry-card .btn-primary:hover { background: #27aa90 !important; }

/* Modern retirement archive */
.retirement-hub-page { display: grid; gap: 16px; }
.retirement-summary-grid .archive { color: #fff; background: #155d4f; }
.retirement-summary-grid .document { color: #207e69; background: #e0f5ed; }
.retirement-summary-grid .attention { color: #946c19; background: #fbf1d8; }
.retirement-directory-head { min-height: 96px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-bottom: 1px solid #eaf0ed; }
.retirement-directory-head > div > span { color: var(--hub-mint); font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.retirement-directory-head h2 { margin: 5px 0 0; color: #183f35; font-size: 19px; letter-spacing: -.02em; }
.retirement-directory-head p { margin: 5px 0 0; color: #83958e; font-size: 11px; }
.retirement-pic { min-width: 145px; display: flex; align-items: center; gap: 8px; }
.retirement-pic > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--hub-mint); border-radius: 50%; font-size: 8px; font-weight: 800; }
.retirement-pic > div { min-width: 0; display: grid; }
.retirement-pic strong { max-width: 135px; overflow: hidden; color: #31564c; font-size: 10px; text-overflow: ellipsis; }
.retirement-pic small { max-width: 145px; margin-top: 3px; overflow: hidden; color: #96a49e; font-size: 8px; text-overflow: ellipsis; }
.retirement-date { color: #536d65; font-size: 10px; font-weight: 650; }
.retirement-proof { display: inline-flex; align-items: center; gap: 6px; color: #1e806b; font-size: 9px; font-weight: 700; text-decoration: none; }
.retirement-proof.unavailable { color: #9aa8a2; font-weight: 500; }
.retirement-detail-dialog #assetBuktiPersetujuan a { color: #19866f; font-weight: 750; text-decoration: none; }

@media (max-width: 1000px) {
    .asset-entry-layout { grid-template-columns: 1fr; }
    .asset-entry-guide { position: static; }
    .asset-entry-guide ol { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .asset-entry-guide li { grid-template-columns: 25px minmax(0, 1fr); border-top: 0; border-left: 1px solid rgba(255,255,255,.12); padding: 8px 12px; }
    .asset-entry-guide li:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
    .asset-entry-guide { padding: 20px; }
    .asset-entry-guide ol { grid-template-columns: 1fr; }
    .asset-entry-guide li { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 12px 0; }
    .asset-entry-card > form { padding-left: 17px; padding-right: 17px; }
    .asset-entry-card .form-header { padding: 18px !important; }
    .asset-entry-card .form-footer { margin-left: -17px !important; margin-right: -17px !important; padding: 15px 17px !important; }
    .retirement-directory-head { align-items: flex-start; flex-direction: column; }
    .retirement-directory-head .asset-tool-button { width: 100%; }
}

/* Official SIPAS-HKP identity */
.app-brand-official-mark { width: 36px; height: 36px; flex: 0 0 auto; object-fit: contain; }
.app-brand-official-logo { display: block; width: min(270px, 62vw); height: auto; object-fit: contain; }
.neo-brand img { display: block; width: 205px; height: auto; }
.auth-official-logo { display: block; width: min(330px, 76vw); height: auto; filter: drop-shadow(0 8px 18px rgba(2, 29, 70, .12)); }

/* Floating asset assistant */
.ai-assistant { position: fixed; right: 24px; bottom: 24px; z-index: 1200; font-family: inherit; }
.ai-launcher { min-width: 182px; min-height: 58px; padding: 8px 15px 8px 9px; display: flex; align-items: center; gap: 10px; color: #fff; background: #123f36; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; box-shadow: 0 17px 42px rgba(9, 57, 45, .24); cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.ai-launcher:hover { background: #18594a; box-shadow: 0 20px 48px rgba(9, 57, 45, .3); transform: translateY(-2px); }
.ai-launcher-icon { width: 41px; height: 41px; display: grid; place-items: center; flex: 0 0 auto; color: #174f42; background: #c8ff5c; border-radius: 13px; font-size: 15px; }
.ai-launcher-copy { display: grid; text-align: left; }
.ai-launcher-copy strong { font-size: 13px; line-height: 1.25; }
.ai-launcher-copy small { margin-top: 2px; color: #a9c6be; font-size: 9px; }
.ai-launcher-close { display: none; width: 41px; height: 41px; place-items: center; color: #174f42; background: #c8ff5c; border-radius: 13px; }
.ai-assistant.open .ai-launcher-icon, .ai-assistant.open .ai-launcher-copy { display: none; }
.ai-assistant.open .ai-launcher { min-width: 58px; padding: 8px; }
.ai-assistant.open .ai-launcher-close { display: grid; }

.ai-panel { position: absolute; right: 0; bottom: 72px; width: min(390px, calc(100vw - 32px)); height: min(590px, calc(100vh - 120px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; color: #24483f; background: #f7faf8; border: 1px solid #dce8e3; border-radius: 20px; box-shadow: 0 28px 80px rgba(7, 45, 36, .26); opacity: 0; pointer-events: none; transform: translateY(15px) scale(.98); transform-origin: right bottom; transition: opacity .2s ease, transform .2s ease; }
.ai-assistant.open .ai-panel { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.ai-panel-head { min-height: 75px; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; background: #123f36; }
.ai-panel-brand { min-width: 0; display: flex; align-items: center; gap: 10px; }
.ai-panel-brand > span { width: 44px; height: 44px; padding: 5px; display: grid; place-items: center; flex: 0 0 auto; background: #fff; border-radius: 13px; }
.ai-panel-brand img { width: 100%; height: 100%; object-fit: contain; }
.ai-panel-brand > div { min-width: 0; display: grid; }
.ai-panel-brand strong { font-size: 14px; }
.ai-panel-brand small { margin-top: 3px; color: #b8d2cb; font-size: 9px; }
.ai-panel-brand small i { width: 6px; height: 6px; margin-right: 5px; display: inline-block; background: #c8ff5c; border-radius: 50%; }
.ai-panel-head > button { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #c8ddd7; background: rgba(255,255,255,.08); border: 0; border-radius: 10px; cursor: pointer; }
.ai-panel-head > button:hover { color: #fff; background: rgba(255,255,255,.15); }

.ai-messages { min-height: 0; padding: 18px 15px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.ai-message { margin-bottom: 13px; display: flex; align-items: flex-start; gap: 8px; }
.ai-message > div { max-width: 84%; padding: 10px 12px; background: #fff; border: 1px solid #e2eae6; border-radius: 6px 14px 14px 14px; box-shadow: 0 3px 10px rgba(16, 74, 59, .035); }
.ai-message p { margin: 0; color: #31544b; font-size: 12px; line-height: 1.58; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-message p strong { color: #153f35; }
.ai-message small { margin-top: 7px; display: block; color: #8b9d96; font-size: 9px; line-height: 1.45; }
.ai-message-avatar { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; color: #195a4b; background: #dff7ee; border-radius: 9px; font-size: 10px; }
.ai-message.user { justify-content: flex-end; }
.ai-message.user > div { color: #fff; background: #1e806b; border-color: #1e806b; border-radius: 14px 6px 14px 14px; box-shadow: none; }
.ai-message.user p { color: #fff; }
.ai-message.error > div { background: #fff5f5; border-color: #f3d4d6; }
.ai-message.error p, .ai-message.error .ai-message-avatar { color: #a6464d; }
.ai-message.error .ai-message-avatar { background: #fae8e9; }
.ai-suggestions { margin: 8px 0 0 36px; display: flex; flex-wrap: wrap; gap: 6px; }
.ai-suggestions[hidden] { display: none; }
.ai-suggestions button { padding: 8px 10px; color: #276757; background: #ecf7f3; border: 1px solid #cfe7df; border-radius: 999px; font-size: 9px; line-height: 1.3; cursor: pointer; }
.ai-suggestions button:hover { color: #fff; background: #258b75; border-color: #258b75; }
.ai-typing > div { display: flex; align-items: center; gap: 4px; min-height: 37px; }
.ai-typing > div span { width: 6px; height: 6px; background: #70a79a; border-radius: 50%; animation: aiTyping 1.1s infinite ease-in-out; }
.ai-typing > div span:nth-child(2) { animation-delay: .14s; }
.ai-typing > div span:nth-child(3) { animation-delay: .28s; }
@keyframes aiTyping { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.ai-composer { padding: 12px 13px 13px; background: #fff; border-top: 1px solid #e1eae6; }
.ai-input-wrap { padding: 6px 6px 6px 12px; display: flex; align-items: flex-end; gap: 7px; background: #f7faf8; border: 1px solid #d7e4de; border-radius: 14px; transition: border-color .18s ease, box-shadow .18s ease; }
.ai-input-wrap:focus-within { border-color: #79cdbb; box-shadow: 0 0 0 3px rgba(57,190,162,.1); }
.ai-input-wrap textarea { width: 100%; min-height: 34px; max-height: 112px; padding: 7px 0; resize: none; color: #24483f; background: transparent; border: 0; outline: 0; font: inherit; font-size: 12px; line-height: 1.5; }
.ai-input-wrap textarea::placeholder { color: #96a7a0; }
.ai-input-wrap button { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; color: #174f42; background: #c8ff5c; border: 0; border-radius: 10px; cursor: pointer; }
.ai-input-wrap button:hover { background: #b6ed4b; }
.ai-input-wrap button:disabled { opacity: .55; cursor: wait; }
.ai-composer > small { margin-top: 7px; display: block; color: #93a29c; font-size: 8px; line-height: 1.4; text-align: center; }

@media (max-width: 640px) {
    .neo-brand img { width: 158px; }
    .ai-assistant { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
    .ai-launcher { min-width: 54px; min-height: 54px; padding: 7px; border-radius: 17px; }
    .ai-launcher-copy { display: none; }
    body.ai-panel-open { overflow: hidden; }
    .ai-panel { position: fixed; right: 0; bottom: 0; left: 0; width: auto; height: min(680px, calc(100dvh - 34px)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 21px 21px 0 0; transform: translateY(25px); }
    .ai-assistant.open .ai-panel { transform: translateY(0); }
    .ai-assistant.open .ai-launcher { opacity: 0; pointer-events: none; }
    .ai-panel-head { padding-top: 16px; }
    .ai-composer { padding-bottom: max(13px, env(safe-area-inset-bottom)); }
}

/* Modern story-driven sign in */
.auth-page-v2 {
    min-height: 100vh;
    padding: 24px;
    color: #173f35;
    background: #dfeae6;
}
.auth-shell-v2 {
    width: min(100%, 1480px);
    min-height: calc(100vh - 48px);
    margin: 0 auto;
    grid-template-columns: minmax(0, 1.16fr) minmax(440px, .84fr);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(23, 63, 53, .08);
    border-radius: 30px;
    box-shadow: 0 30px 80px rgba(25, 75, 61, .12);
}
.auth-story-v2 {
    position: relative;
    min-height: auto;
    padding: 40px clamp(34px, 4.5vw, 72px) 34px;
    overflow: hidden;
    color: #fff;
    background: #171b1a;
}
.auth-story-v2::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 230px;
    right: -125px;
    top: 43%;
    border: 1px solid rgba(200, 255, 92, .25);
    border-radius: 50%;
    transform: rotate(-18deg);
    pointer-events: none;
}
.auth-story-v2::after {
    content: "✦";
    position: absolute;
    right: clamp(26px, 5vw, 80px);
    top: 26%;
    color: #c8ff5c;
    font-size: 44px;
    line-height: 1;
    transform: rotate(12deg);
}
.auth-brand-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.auth-story-v2 .auth-official-logo {
    width: min(275px, 65vw);
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .2));
}
.auth-system-status {
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    color: #d6e2de;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.auth-system-status i {
    width: 7px;
    height: 7px;
    background: #c8ff5c;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(200, 255, 92, .1);
}
.auth-story-v2 .auth-story-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: clamp(70px, 10vh, 120px) 0 54px;
}
.auth-story-v2 .auth-story-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #dce7e3;
    font-size: 11px;
    letter-spacing: .12em;
}
.auth-story-v2 .auth-story-kicker b {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #171b1a;
    background: #c8ff5c;
    border-radius: 50%;
    font-size: 9px;
    letter-spacing: 0;
}
.auth-story-v2 h1 {
    max-width: 720px;
    margin: 24px 0 0;
    font-size: clamp(46px, 5.7vw, 82px);
    font-weight: 620;
    line-height: .98;
    letter-spacing: -.06em;
}
.auth-story-v2 h1 mark {
    padding: 0 7px 3px;
    color: #171b1a;
    background: #c8ff5c;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.auth-story-v2 p {
    max-width: 620px;
    margin: 28px 0 0;
    color: #acb9b5;
    font-size: 15px;
    line-height: 1.75;
}
.auth-journey {
    max-width: 660px;
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, .17);
    border-bottom: 1px solid rgba(255, 255, 255, .17);
}
.auth-journey article {
    min-width: 0;
    padding: 19px 22px;
    display: grid;
    border-left: 1px solid rgba(255, 255, 255, .17);
}
.auth-journey article:first-child { padding-left: 0; border-left: 0; }
.auth-journey article > span { color: #c8ff5c; font-size: 10px; font-weight: 800; }
.auth-journey strong { margin-top: 18px; font-size: 15px; }
.auth-journey small { margin-top: 5px; color: #85938e; font-size: 10px; }
.auth-story-v2 .auth-story-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #71807b;
    font-size: 10px;
}
.auth-story-v2 .auth-story-footer span:last-child { display: inline-flex; align-items: center; gap: 7px; }
.auth-story-v2 .auth-story-footer i { color: #c8ff5c; }
.auth-shell-v2 .auth-form-side {
    min-height: auto;
    padding: clamp(38px, 5vw, 82px);
    background: #fff;
}
.auth-card-v2 { width: min(100%, 510px); }
.auth-card-v2 .auth-back {
    margin-bottom: clamp(46px, 7vh, 86px);
    gap: 10px;
    color: #6f817a;
    font-size: 12px;
}
.auth-card-v2 .auth-back > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #204d42;
    background: #f1f6f3;
    border: 1px solid #e3ebe7;
    border-radius: 10px;
    transition: transform .18s ease, background .18s ease;
}
.auth-card-v2 .auth-back:hover > span { background: #e7f2ed; transform: translateX(-3px); }
.auth-card-heading { margin-bottom: 34px; }
.auth-access-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    color: #207d69;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.auth-access-label i { color: #39bea2; }
.auth-card-v2 h2 {
    margin: 0;
    color: #173f35;
    font-size: clamp(40px, 4vw, 58px);
    font-weight: 650;
    line-height: .96;
    letter-spacing: -.06em;
}
.auth-card-v2 .auth-card-subtitle {
    max-width: 420px;
    margin: 18px 0 0;
    color: #768981;
    font-size: 14px;
    line-height: 1.65;
}
.auth-card-v2 .auth-field { margin-bottom: 20px; }
.auth-card-v2 .auth-field label {
    margin-bottom: 9px;
    color: #294f45;
    font-size: 12px;
    font-weight: 800;
}
.auth-card-v2 .auth-input-wrap > i { left: 17px; color: #7b938a; font-size: 14px; }
.auth-card-v2 .auth-input {
    height: 56px;
    padding-left: 48px;
    color: #173f35;
    background: #f8fbf9;
    border-color: #dfe9e4;
    border-radius: 13px;
    font-size: 14px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.auth-card-v2 .auth-input::placeholder { color: #98a8a1; }
.auth-card-v2 .auth-input:hover { border-color: #c6d9d0; }
.auth-card-v2 .auth-input:focus {
    background: #fff;
    border-color: #39bea2;
    box-shadow: 0 0 0 4px rgba(57, 190, 162, .11);
}
.auth-card-v2 .auth-password-toggle { right: 12px; color: #668078; }
.auth-card-v2 .auth-options {
    margin: 3px 0 25px;
    color: #71847d;
    font-size: 12px;
}
.auth-card-v2 .auth-remember { font-weight: 650; }
.auth-card-v2 .auth-remember input { width: 16px; height: 16px; accent-color: #39bea2; }
.auth-card-v2 .auth-options a { color: #1a6656; }
.auth-card-v2 .auth-options a:hover { text-decoration: underline; }
.auth-card-v2 .auth-submit {
    height: 58px;
    padding: 0 9px 0 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: #173f35;
    border-radius: 14px;
    font-size: 13px;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.auth-card-v2 .auth-submit i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #173f35;
    background: #c8ff5c;
    border-radius: 11px;
}
.auth-card-v2 .auth-submit:hover {
    background: #20584a;
    box-shadow: 0 13px 28px rgba(23, 63, 53, .17);
    transform: translateY(-2px);
}
.auth-card-v2 .auth-security {
    margin-top: 18px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #597168;
    background: #f3f8f5;
    border: 1px solid #e5eee9;
    border-radius: 13px;
}
.auth-card-v2 .auth-security > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #1b725f;
    background: #dff2eb;
    border-radius: 10px;
}
.auth-card-v2 .auth-security > div { display: grid; }
.auth-card-v2 .auth-security strong { color: #345a50; font-size: 11px; }
.auth-card-v2 .auth-security small { margin-top: 3px; color: #7e918a; font-size: 10px; }
.auth-card-v2 .auth-error { font-size: 11px; }
.auth-help {
    margin: 25px 0 0;
    color: #8a9a94;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}
.auth-help strong { color: #4e6e64; }

@media (max-width: 1040px) {
    .auth-page-v2 { padding: 14px; }
    .auth-shell-v2 { min-height: calc(100vh - 28px); grid-template-columns: minmax(0, .95fr) minmax(400px, 1.05fr); border-radius: 24px; }
    .auth-story-v2 { padding-left: 34px; padding-right: 34px; }
    .auth-story-v2 h1 { font-size: clamp(43px, 6vw, 64px); }
    .auth-story-v2::after { display: none; }
    .auth-journey article { padding-left: 13px; padding-right: 13px; }
    .auth-shell-v2 .auth-form-side { padding: 44px; }
}

@media (max-width: 820px) {
    .auth-page-v2 { padding: 0; background: #fff; }
    .auth-shell-v2 { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; }
    .auth-story-v2 { padding: 26px 24px 28px; }
    .auth-brand-row { align-items: flex-start; }
    .auth-story-v2 .auth-official-logo { width: min(230px, 62vw); }
    .auth-story-v2 .auth-story-content { padding: 54px 0 18px; }
    .auth-story-v2 h1 { max-width: 620px; font-size: clamp(40px, 11vw, 62px); }
    .auth-story-v2 p { max-width: 600px; font-size: 14px; }
    .auth-journey { margin-top: 30px; }
    .auth-story-v2 .auth-story-footer { display: none; }
    .auth-shell-v2 .auth-form-side { padding: 46px 24px 64px; }
    .auth-card-v2 .auth-back { margin-bottom: 45px; }
}

@media (max-width: 520px) {
    .auth-system-status { width: 34px; padding: 0; justify-content: center; font-size: 0; }
    .auth-story-v2::before { right: -300px; }
    .auth-story-v2 .auth-story-content { padding: 34px 0 0; }
    .auth-story-v2 h1 { margin-top: 18px; font-size: clamp(34px, 10.5vw, 45px); line-height: 1; }
    .auth-story-v2 h1 mark { padding-right: 4px; padding-left: 4px; }
    .auth-story-v2 p { margin-top: 18px; font-size: 12px; line-height: 1.65; }
    .auth-journey { display: none; }
    .auth-shell-v2 .auth-form-side { padding-top: 38px; }
    .auth-card-v2 h2 { font-size: 43px; }
    .auth-card-v2 .auth-options { align-items: flex-start; }
    .auth-card-v2 .auth-security { align-items: flex-start; }
}

/* Story-driven public landing */
.neo-story { width: min(100%, 1240px); margin: 0 auto; padding: 92px 66px 82px; }
.neo-story-heading { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 28px; }
.neo-story-heading > span,
.neo-chapter-label { display: block; margin-bottom: 10px; color: #686868; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.neo-story-heading h2 { max-width: 760px; margin: 0; font-size: clamp(42px, 5.2vw, 66px); font-weight: 600; line-height: 1.02; letter-spacing: -.055em; }
.neo-story-copy { margin: 58px 0 46px 248px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; }
.neo-story-copy p { margin: 0; color: #4e4e4e; font-size: 15px; line-height: 1.75; }
.neo-story-copy .lead { color: #1d1d1d; font-size: 21px; font-weight: 560; line-height: 1.55; letter-spacing: -.018em; }
.neo-story-problems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid #1d1d1d; border-bottom: 1.5px solid #1d1d1d; }
.neo-story-problems article { min-height: 230px; padding: 25px 30px 28px; position: relative; border-left: 1px solid #d8d8d8; }
.neo-story-problems article:first-child { border-left: 0; }
.neo-story-problems article > span { color: #777; font-size: 10px; font-weight: 800; }
.neo-story-problems article > i { position: absolute; top: 22px; right: 28px; width: 40px; height: 40px; display: grid; place-items: center; color: #171717; background: var(--neo-lime); border: 1.5px solid #171717; border-radius: 50%; font-size: 14px; }
.neo-story-problems h3 { margin: 73px 0 11px; font-size: 21px; letter-spacing: -.025em; }
.neo-story-problems p { max-width: 280px; margin: 0; color: #666; font-size: 13px; line-height: 1.65; }
.neo-story-answer { margin-top: 46px; padding: 40px 44px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 26px; color: #fff; background: #191919; border-radius: 27px; }
.neo-story-answer-mark { align-self: start; color: var(--neo-lime); font-family: Georgia, serif; font-size: 76px; line-height: .8; }
.neo-story-answer small { color: var(--neo-lime); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.neo-story-answer p { max-width: 780px; margin: 10px 0 0; color: #f4f4f4; font-size: clamp(21px, 2.35vw, 31px); font-weight: 540; line-height: 1.3; letter-spacing: -.025em; }
.neo-story-arrow { width: 48px; height: 48px; display: grid; place-items: center; color: #171717; background: var(--neo-lime); border-radius: 50%; }
.neo-section-head > div h2,
.neo-results header > div h2 { max-width: 500px; }
.neo-results header > div { min-width: 0; }
.neo-closing { width: min(calc(100% - 56px), 1108px); margin: 0 auto 72px; padding: 62px; position: relative; overflow: hidden; background: var(--neo-lime); border: 2px solid #171717; border-radius: 28px; box-shadow: 0 8px 0 #171717; }
.neo-closing::after { content: "✦"; position: absolute; right: 55px; top: 28px; color: rgba(23,23,23,.12); font-size: 180px; line-height: 1; transform: rotate(12deg); }
.neo-closing > * { position: relative; z-index: 1; }
.neo-closing > span { font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.neo-closing h2 { max-width: 760px; margin: 20px 0 17px; font-size: clamp(39px, 5vw, 65px); font-weight: 600; line-height: 1.02; letter-spacing: -.055em; }
.neo-closing p { max-width: 680px; margin: 0 0 28px; color: #344121; font-size: 15px; line-height: 1.7; }

@media (max-width: 760px) {
    .neo-story { padding: 66px 22px 62px; }
    .neo-story-heading { grid-template-columns: 1fr; gap: 13px; }
    .neo-story-heading h2 { font-size: 43px; }
    .neo-story-copy { margin: 40px 0 35px; grid-template-columns: 1fr; gap: 22px; }
    .neo-story-copy .lead { font-size: 19px; }
    .neo-story-problems { grid-template-columns: 1fr; }
    .neo-story-problems article { min-height: 185px; border-top: 1px solid #d8d8d8; border-left: 0; }
    .neo-story-problems article:first-child { border-top: 0; }
    .neo-story-problems h3 { margin-top: 52px; }
    .neo-story-answer { padding: 30px 25px; grid-template-columns: auto minmax(0, 1fr); gap: 14px; border-radius: 22px; }
    .neo-story-answer-mark { font-size: 52px; }
    .neo-story-arrow { display: none; }
    .neo-closing { width: calc(100% - 44px); margin-bottom: 48px; padding: 42px 26px; border-radius: 23px; }
    .neo-closing::after { right: -25px; top: 25px; font-size: 135px; }
    .neo-closing h2 { font-size: 43px; }
}

@media (max-width: 420px) {
    .neo-hero h1,
    .neo-story-heading h2,
    .neo-closing h2 { font-size: 38px; }
    .neo-story-answer { grid-template-columns: 1fr; }
    .neo-story-answer-mark { height: 30px; }
    .neo-story-answer p { font-size: 20px; }
}

/* Instagram-style floating mobile navigation */
.app-mobile-bottom-nav { display: none; }

@media (max-width: 760px) {
    body.app-shell-auth { padding-bottom: 92px; }
    .app-mobile-bottom-nav {
        position: fixed;
        z-index: 420;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: 12px;
        width: min(calc(100% - 24px), 470px);
        height: 70px;
        margin: 0 auto;
        padding: 7px 8px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        background: rgba(255, 255, 255, .94);
        border: 1px solid rgba(207, 224, 217, .92);
        border-radius: 23px;
        box-shadow: 0 18px 45px rgba(10, 59, 46, .2);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
    .app-mobile-bottom-nav a {
        min-width: 0;
        height: 55px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        color: #85968f;
        border-radius: 16px;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .18s ease, background .18s ease, transform .18s ease;
    }
    .app-mobile-bottom-nav a > span {
        width: 29px;
        height: 29px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        font-size: 14px;
        transition: color .18s ease, background .18s ease, transform .18s ease;
    }
    .app-mobile-bottom-nav a small {
        overflow: hidden;
        font-size: 9px;
        font-weight: 720;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .app-mobile-bottom-nav a.active { color: #145f50; background: #edf7f3; }
    .app-mobile-bottom-nav a.active > span { color: #fff; background: var(--hub-mint); }
    .app-mobile-bottom-nav a:active { transform: scale(.94); }
    .app-mobile-bottom-nav .mobile-nav-primary { overflow: visible; background: transparent; }
    .app-mobile-bottom-nav .mobile-nav-primary > span {
        width: 48px;
        height: 48px;
        margin-top: -23px;
        color: #fff;
        background: var(--hub-forest);
        border: 5px solid #f4f8f6;
        border-radius: 17px;
        box-shadow: 0 9px 20px rgba(13, 88, 73, .27);
        font-size: 16px;
    }
    .app-mobile-bottom-nav .mobile-nav-primary small { margin-top: -3px; color: #41675e; }
    .app-mobile-bottom-nav .mobile-nav-primary.active > span { color: #173f35; background: var(--hub-lime); }
    .app-mobile-bottom-nav .mobile-nav-primary.active small { color: #145f50; }
    .ai-assistant { bottom: max(94px, calc(env(safe-area-inset-bottom) + 82px)); }
    .ai-assistant.open { bottom: max(12px, env(safe-area-inset-bottom)); }
}

@media (min-width: 821px) and (max-height: 800px) {
    .auth-page-v2 { padding: 14px; }
    .auth-shell-v2 { min-height: calc(100vh - 28px); }
    .auth-story-v2 { padding-top: 27px; padding-bottom: 24px; }
    .auth-story-v2 .auth-official-logo { width: min(235px, 62vw); }
    .auth-system-status { min-height: 30px; }
    .auth-story-v2 .auth-story-content { padding: 44px 0 22px; }
    .auth-story-v2 h1 { margin-top: 17px; font-size: clamp(42px, 4.7vw, 65px); }
    .auth-story-v2 p { margin-top: 18px; font-size: 13px; line-height: 1.65; }
    .auth-journey { margin-top: 24px; }
    .auth-journey article { padding-top: 12px; padding-bottom: 12px; }
    .auth-journey strong { margin-top: 9px; font-size: 13px; }
    .auth-shell-v2 .auth-form-side { padding-top: 30px; padding-bottom: 30px; }
    .auth-card-v2 .auth-back { margin-bottom: 28px; }
    .auth-card-heading { margin-bottom: 22px; }
    .auth-access-label { margin-bottom: 12px; }
    .auth-card-v2 h2 { font-size: clamp(39px, 3.8vw, 49px); }
    .auth-card-v2 .auth-card-subtitle { margin-top: 12px; font-size: 12px; }
    .auth-card-v2 .auth-field { margin-bottom: 14px; }
    .auth-card-v2 .auth-input { height: 50px; }
    .auth-card-v2 .auth-options { margin-bottom: 16px; }
    .auth-card-v2 .auth-submit { height: 52px; }
    .auth-card-v2 .auth-submit i { width: 36px; height: 36px; }
    .auth-card-v2 .auth-security { margin-top: 12px; padding: 11px 13px; }
    .auth-help { margin-top: 13px; }
}

/* Outgoing mail spreadsheet workspace */
.outgoing-mail-shell {
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe9e4;
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(22, 65, 54, .08);
}
.outgoing-mail-toolbar {
    padding: 23px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg, #f8fbf9 0%, #eef8f3 100%);
    border-bottom: 1px solid #e0ebe5;
}
.outgoing-mail-toolbar-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}
.outgoing-mail-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    background: #195f50;
    border-radius: 16px;
    box-shadow: 0 9px 20px rgba(25, 95, 80, .2);
    font-size: 19px;
}
.outgoing-mail-kicker {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #55756b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.outgoing-mail-kicker span {
    width: 7px;
    height: 7px;
    background: #34bd94;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(52, 189, 148, .13);
}
.outgoing-mail-toolbar h2 {
    margin: 0;
    color: #173f35;
    font-size: 22px;
    font-weight: 750;
    letter-spacing: -.025em;
}
.outgoing-mail-toolbar p {
    margin: 4px 0 0;
    color: #6d827b;
    font-size: 12px;
}
.outgoing-mail-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}
.outgoing-mail-button {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.outgoing-mail-button:hover { transform: translateY(-1px); }
.outgoing-mail-button.secondary {
    color: #28594d;
    background: #fff;
    border-color: #d7e5df;
}
.outgoing-mail-button.secondary:hover { background: #f6faf8; }
.outgoing-mail-button.primary {
    color: #173f35;
    background: #c8ff5c;
    box-shadow: 0 8px 18px rgba(102, 153, 29, .14);
}
.outgoing-mail-button.primary:hover { background: #baff42; }
.outgoing-mail-notice {
    padding: 10px 17px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #647970;
    background: #fbfcfb;
    border-bottom: 1px solid #e7eee9;
    font-size: 10px;
    line-height: 1.5;
}
.outgoing-mail-notice i { color: #2b806b; }
.outgoing-mail-frame-wrap {
    min-height: 680px;
    height: calc(100vh - 330px);
    position: relative;
    background: #f4f7f5;
    margin: 20px 24px 25px;
    overflow: hidden;
    border: 1px solid #dce7e2;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(21, 79, 65, .06);
}
.outgoing-mail-frame {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: block;
    background: #fff;
    border: 0;
}
.outgoing-mail-loading {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: #527168;
    background: #f5f9f7;
    transition: opacity .2s ease, visibility .2s ease;
}
.outgoing-mail-loading > span {
    width: 45px;
    height: 45px;
    margin-bottom: 5px;
    display: grid;
    place-items: center;
    color: #1e715e;
    background: #e1f3eb;
    border-radius: 14px;
    font-size: 18px;
}
.outgoing-mail-loading strong { color: #244e43; font-size: 13px; }
.outgoing-mail-loading small { color: #82948d; font-size: 10px; }
.outgoing-mail-loading.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.outgoing-mail-noscript { margin: 0; padding: 12px 17px; color: #8a5b24; background: #fff8e8; font-size: 11px; }

@media (max-width: 760px) {
    .outgoing-mail-shell { margin: 0 -10px; border-radius: 18px; }
    .outgoing-mail-toolbar { padding: 18px; align-items: flex-start; flex-direction: column; gap: 16px; }
    .outgoing-mail-icon { width: 45px; height: 45px; border-radius: 14px; font-size: 16px; }
    .outgoing-mail-toolbar h2 { font-size: 19px; }
    .outgoing-mail-toolbar p { font-size: 11px; line-height: 1.55; }
    .outgoing-mail-actions { width: 100%; }
    .outgoing-mail-button { flex: 1 1 0; padding: 0 11px; }
    .outgoing-mail-notice { align-items: flex-start; padding: 11px 15px; }
    .outgoing-mail-notice i { margin-top: 2px; }
    .outgoing-mail-frame-wrap { min-height: 620px; height: calc(100vh - 350px); margin: 11px 11px 14px; border-radius: 13px; }
}

/* Asset photos returned by the assistant */
.ai-message.assistant:has(.ai-asset-gallery) > div { width: min(100%, 300px); max-width: calc(100% - 36px); }
.ai-asset-gallery { margin-top: 10px; display: grid; gap: 8px; }
.ai-asset-card { overflow: hidden; background: #f8fbf9; border: 1px solid #dce9e4; border-radius: 12px; }
.ai-asset-media { height: 145px; position: relative; overflow: hidden; display: grid; place-items: center; color: #708980; background: #e9f1ed; }
.ai-asset-media > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; }
.ai-asset-card:hover .ai-asset-media > img { transform: scale(1.025); }
.ai-asset-media.is-unavailable > span { display: grid; place-items: center; gap: 6px; }
.ai-asset-media.is-unavailable i { font-size: 21px; }
.ai-asset-media.is-unavailable small { margin: 0; font-size: 9px; }
.ai-asset-photo-count { position: absolute; right: 8px; bottom: 8px; padding: 5px 7px; color: #fff; background: rgba(15, 55, 46, .82); border-radius: 999px; font-size: 8px; font-weight: 750; backdrop-filter: blur(6px); }
.ai-asset-card-body { padding: 10px 11px 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 8px; }
.ai-asset-card-body strong { overflow: hidden; color: #244c42; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ai-asset-card-body small { margin: 0; overflow: hidden; color: #81938c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ai-asset-card-body a { grid-column: 2; grid-row: 1 / span 2; padding: 6px 8px; color: #176b58; background: #dcf3ea; border-radius: 7px; font-size: 8px; font-weight: 800; text-decoration: none; }
.ai-asset-card-body a:hover { color: #fff; background: #258b75; }

@supports not selector(:has(*)) {
    .ai-message.assistant > div { max-width: 88%; }
}