:root {
    --bg-app: #f4f7fb;
    --bg-surface: #ffffff;
    --bg-elevated: #fbfdff;
    --bg-interactive: #f2f7fd;
    --text-primary: #0e1b2f;
    --text-secondary: #425b78;
    --text-muted: #667a94;
    --text-disabled: #93a4b8;
    --border-default: #d6e2f0;
    --border-strong: #b6c9de;
    --accent-primary: #168f63;
    --accent-primary-contrast: #f7fffb;
    --accent-secondary: #2c6cbf;
    --success: #1f9d55;
    --warning: #c98312;
    --danger: #c63b61;
    --focus-ring: #4c9aff;
    --disabled-bg: #eef3f8;
    --disabled-text: #94a6b8;
    --overlay-scrim: rgba(9, 18, 30, .42);
    --shadow-soft: 0 8px 24px rgba(15, 23, 42, .08);
    --shadow-strong: 0 18px 42px rgba(15, 23, 42, .14);
    --table-head-bg: #edf4fa;
    --table-head-text: #17324f;
    --table-row-bg: #ffffff;
    --table-row-alt-bg: #f8fbfe;
    --table-row-hover-bg: #eaf4ff;
    --table-sticky-bg: #f4f9fd;
    --chart-bg: #ffffff;
    --chart-grid: #dce7f2;
    --chart-axis: #5e7692;
    --chart-tooltip-bg: #0f1e32;
    --chart-tooltip-text: #f4f8ff;
    --status-info: #2c6cbf;
    --brand: #168f63;
    --brand-2: #54c484;
    --accent-soft: #ebfaf2;
    --accent-border: #cbeedb;
    --module-glow-a: #d6f5ee;
    --module-glow-b: #d7fff2;
    --module-glow-dark-a: rgba(18, 128, 189, .22);
    --module-glow-dark-b: rgba(16, 164, 140, .18);
    --orb-a-color: #22b8cf;
    --orb-b-color: #20c997;
    --page-gutter-mobile: .7rem;
    --card-padding-mobile: .72rem;
    --tap-size-min: 46px;
    --action-gap-mobile: .5rem;
    --bg: var(--bg-app);
    --card: var(--bg-surface);
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --line: var(--border-default);
    --border: var(--border-default);
}

body.dark {
    --bg-app: #0b1422;
    --bg-surface: #111d30;
    --bg-elevated: #16253c;
    --bg-interactive: #1a2c46;
    --text-primary: #eaf2ff;
    --text-secondary: #b7cae4;
    --text-muted: #8fa6c4;
    --text-disabled: #647892;
    --border-default: #314863;
    --border-strong: #486480;
    --accent-primary: #45c78b;
    --accent-primary-contrast: #052116;
    --accent-secondary: #7ab6ff;
    --success: #42c777;
    --warning: #f0b24d;
    --danger: #ff7d9a;
    --focus-ring: #8bc2ff;
    --disabled-bg: #152233;
    --disabled-text: #6f85a0;
    --overlay-scrim: rgba(2, 8, 18, .62);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, .32);
    --shadow-strong: 0 18px 46px rgba(0, 0, 0, .44);
    --table-head-bg: #1b2e46;
    --table-head-text: #eaf2ff;
    --table-row-bg: #111d30;
    --table-row-alt-bg: #15253b;
    --table-row-hover-bg: #203651;
    --table-sticky-bg: #1a2c46;
    --chart-bg: #111d30;
    --chart-grid: #2f4862;
    --chart-axis: #9db4d0;
    --chart-tooltip-bg: #0b1728;
    --chart-tooltip-text: #f4f8ff;
    --status-info: #7ab6ff;
    --bg: var(--bg-app);
    --card: var(--bg-surface);
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --line: var(--border-default);
    --border: var(--border-default);
    --brand: #2eb37c;
    --brand-2: #67d79b;
    --accent-soft: #163128;
    --accent-border: #2f6450;
}

body[data-module="presence"] {
    --brand: #168f63;
    --brand-2: #54c484;
    --accent-soft: #ebfaf2;
    --accent-border: #cbeedb;
}

body.dark[data-module="presence"] {
    --brand: #2eb37c;
    --brand-2: #67d79b;
    --accent-soft: #163128;
    --accent-border: #2f6450;
}

body[data-module="statistics"] {
    --brand: #6d4dff;
    --brand-2: #b56bff;
    --accent-soft: #f2eeff;
    --accent-border: #d8cbff;
    --module-glow-a: #e9ddff;
    --module-glow-b: #f1e8ff;
    --orb-a-color: #8f63ff;
    --orb-b-color: #c174ff;
}

body.dark[data-module="statistics"] {
    --brand: #8d73ff;
    --brand-2: #c78cff;
    --accent-soft: #231a45;
    --accent-border: #4d3a8e;
    --module-glow-dark-a: rgba(98, 68, 201, .25);
    --module-glow-dark-b: rgba(175, 88, 246, .22);
}

body[data-module="ranking"] {
    --brand: #0f6b94;
    --brand-2: #38bdf8;
    --accent-soft: #e8f6ff;
    --accent-border: #bfe7ff;
    --module-glow-a: #d8f0ff;
    --module-glow-b: #e7f7ff;
    --orb-a-color: #2ea9e8;
    --orb-b-color: #73d4ff;
}

body.dark[data-module="ranking"] {
    --brand: #49a3d8;
    --brand-2: #8ed7ff;
    --accent-soft: #143145;
    --accent-border: #2f6282;
    --module-glow-dark-a: rgba(45, 131, 182, .24);
    --module-glow-dark-b: rgba(70, 166, 218, .20);
}

body[data-module="tpas"] {
    --brand: #b96811;
    --brand-2: #f59f45;
    --accent-soft: #fff4e8;
    --accent-border: #f3d6b2;
    --module-glow-a: #ffe9cf;
    --module-glow-b: #fff3df;
    --orb-a-color: #ffb454;
    --orb-b-color: #f5d35e;
}

body.dark[data-module="tpas"] {
    --brand: #d98f2f;
    --brand-2: #ffc067;
    --accent-soft: #3a2915;
    --accent-border: #7f5830;
    --module-glow-dark-a: rgba(196, 124, 33, .24);
    --module-glow-dark-b: rgba(229, 172, 77, .19);
}

* {
    box-sizing: border-box;
}

html {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top right, var(--module-glow-a), transparent 40%),
        radial-gradient(circle at bottom left, var(--module-glow-b), transparent 42%),
        var(--bg-app);
    color: var(--text-primary);
    font-family: "IBM Plex Sans", sans-serif;
    min-height: 100dvh;
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow-x: hidden;
}

body.dark {
    background:
        radial-gradient(circle at top right, var(--module-glow-dark-a), transparent 46%),
        radial-gradient(circle at bottom left, var(--module-glow-dark-b), transparent 40%),
        var(--bg-app);
}

.bg-orb {
    position: fixed;
    width: 34rem;
    height: 34rem;
    border-radius: 999px;
    filter: blur(56px);
    opacity: .25;
    z-index: -1;
}

.orb-a { background: var(--orb-a-color); top: -16rem; left: -10rem; }
.orb-b { background: var(--orb-b-color); bottom: -16rem; right: -10rem; }

body.auth-mode {
    background:
        radial-gradient(circle at 50% 50%, rgba(56, 255, 180, .16), transparent 22%),
        radial-gradient(circle at 80% 36%, rgba(44, 255, 188, .22), transparent 18%),
        radial-gradient(circle at 20% 70%, rgba(0, 168, 124, .18), transparent 20%),
        linear-gradient(135deg, #041112 0%, #071e1f 32%, #0a2c28 64%, #061214 100%);
    overflow-x: hidden;
}

body.auth-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(12, 255, 173, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 255, 173, .05) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(82, 255, 191, .12), transparent 42%);
    background-size: 100% 3px, 64px 100%, 100% 100%;
    opacity: .55;
    pointer-events: none;
    z-index: -1;
}

body.auth-mode .bg-orb,
body.auth-mode .topbar,
body.auth-mode .status-footer {
    display: none;
}

body.auth-mode .boot-shell {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.6rem;
}

body.auth-mode .boot-card {
    width: min(100%, 560px);
    border-radius: 22px;
    border: 1px solid rgba(161, 255, 218, .14);
    background:
        radial-gradient(circle at top right, rgba(73, 255, 194, .08), transparent 28%),
        linear-gradient(180deg, rgba(9, 26, 25, .54), rgba(7, 19, 20, .7));
    box-shadow:
        0 26px 90px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(18px);
}

body.auth-mode .boot-card h1,
body.auth-mode .boot-card p {
    color: #effff7;
}

body.auth-mode .boot-card p {
    opacity: .76;
}

body.auth-mode .boot-badge {
    border-color: rgba(124, 255, 213, .2);
    background: rgba(14, 71, 57, .36);
    color: #caffea;
}

body.auth-mode .skeleton {
    background: rgba(255, 255, 255, .08);
}

body.auth-mode .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
}

body.booting .topbar,
body.booting .container,
body.booting .status-footer {
    visibility: hidden;
    pointer-events: none;
}

body.auth-mode .container {
    max-width: none;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 2rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
    border-bottom: 1px solid var(--border-default);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border-default) 82%, transparent);
}

body.dark .topbar {
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    border-bottom-color: var(--border-default);
}

.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
}

.brand-logo {
    width: 53px;
    height: 53px;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    background: transparent;
}

.brand-copy {
    display: grid;
    gap: .02rem;
}

.brand-title {
    line-height: 1;
}

.brand-subtitle {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.branding-upload-grid {
    align-items: stretch;
}

.branding-upload-card {
    display: grid;
    gap: .55rem;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--card) 88%, var(--accent-soft) 12%);
    min-width: 0;
}

.branding-preview {
    width: 100%;
    max-width: 240px;
    height: 88px;
    object-fit: contain;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
    padding: .5rem;
}

.branding-preview-icon {
    width: 64px;
    height: 64px;
    max-width: 64px;
}

body.dark .branding-preview {
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.brand-wrap {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.module-chip {
    background: #eef7ff;
    color: #1d4f73;
}

.module-switch {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
}

.module-toggle {
    padding: .42rem .78rem;
}

.module-toggle.active {
    border-color: color-mix(in srgb, var(--accent-primary) 72%, var(--border-strong));
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-surface));
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

body.dark .module-chip {
    background: color-mix(in srgb, var(--bg-interactive) 88%, transparent);
    color: var(--text-secondary);
    border-color: var(--border-default);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.container {
    width: min(1180px, calc(100% - 2rem));
    margin: 1.2rem auto;
    padding: 0 1rem;
    flex: 1 0 auto;
    min-width: 0;
    max-width: 100%;
}

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: var(--shadow-soft);
    animation: fade .35s ease;
    min-width: 0;
    max-width: 100%;
}

.sub-card {
    margin: 1rem 0;
    box-shadow: none;
}

.auth-card {
    max-width: 520px;
    margin: 2rem auto;
}

body.auth-mode .auth-card {
    width: min(100%, 500px);
    margin: 0;
    padding: 1.5rem;
    border: 1px solid rgba(161, 255, 218, .16);
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(73, 255, 194, .10), transparent 28%),
        linear-gradient(180deg, rgba(9, 26, 25, .56), rgba(7, 19, 20, .68));
    box-shadow:
        0 28px 90px rgba(0, 0, 0, .48),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(18px);
}

body.auth-mode .auth-card h2,
body.auth-mode .auth-card label,
body.auth-mode .auth-card .muted {
    color: #effff7;
}

body.auth-mode .auth-card h2 {
    margin: .2rem 0 0;
    font-size: clamp(2rem, 3vw, 2.35rem);
    line-height: 1.04;
    letter-spacing: -.03em;
}

body.auth-mode .auth-card .muted {
    opacity: .84;
}

body.auth-mode .auth-card .form-hint {
    margin-top: .55rem;
    margin-bottom: .9rem;
    max-width: 34ch;
    color: rgba(221, 244, 236, .74);
    line-height: 1.5;
}

body.auth-mode .auth-card input {
    min-height: 3.35rem;
    background: rgba(255, 255, 255, .09);
    border-color: rgba(161, 255, 218, .16);
    color: #effff7;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

body.auth-mode .auth-card input::placeholder {
    color: rgba(239, 255, 247, .58);
}

body.auth-mode .auth-card input:focus {
    border-color: rgba(94, 231, 164, .55);
    box-shadow:
        0 0 0 4px rgba(58, 201, 137, .12),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.auth-mode .auth-card .btn-primary {
    border: 0;
    background: linear-gradient(90deg, #06b46c, #5fe39f);
    color: #042014;
    font-weight: 700;
    min-height: 3.1rem;
    border-radius: 14px;
    box-shadow: 0 14px 26px rgba(9, 187, 110, .24);
}

.auth-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .9rem;
    flex-wrap: wrap;
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    padding: .34rem .72rem;
    border-radius: 999px;
    border: 1px solid rgba(124, 255, 213, .2);
    background: rgba(14, 71, 57, .36);
    color: #caffea;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.auth-mini-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: rgba(234, 255, 245, .86);
    font-size: .82rem;
    font-weight: 700;
}

.auth-mini-logo {
    width: 1.8rem;
    height: 1.8rem;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    padding: .18rem;
}

body.auth-mode .auth-card .inline-feedback {
    margin-top: .9rem;
    border-radius: 14px;
}

.tabs {
    display: flex;
    gap: .45rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.tab-btn {
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    padding: .55rem .8rem;
    min-height: var(--tap-size-min);
    cursor: pointer;
    color: var(--text-secondary);
    transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.tab-btn.active {
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-surface));
    border-color: color-mix(in srgb, var(--accent-primary) 72%, var(--border-strong));
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

.tab-btn:hover:not(.active) {
    background: var(--bg-interactive);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.panel-tabs {
    margin-bottom: 1rem;
}

.inner-tabs {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.stats-subpane {
    margin-top: .4rem;
    min-width: 0;
    max-width: 100%;
}

.module-tools {
    align-items: flex-end;
    justify-content: flex-end;
}

.wall-filter {
    display: grid;
    gap: .25rem;
    min-width: 180px;
}

.stats-selection-panel {
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent-border) 70%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--card));
}

.stats-selection-grid {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: .9rem;
    flex-wrap: wrap;
}

.stats-selection-grid .field-stack {
    min-width: 220px;
}

.stats-selection-legend {
    margin-top: .65rem;
    text-align: center;
    font-size: .92rem;
}

.stats-selection-actions {
    margin-top: .55rem;
    justify-content: center;
}

body.dark .stats-selection-panel {
    border-color: color-mix(in srgb, var(--border-strong) 72%, var(--accent-border));
    background:
        radial-gradient(circle at top right, rgba(141, 115, 255, .10), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 98%, #13243d), color-mix(in srgb, var(--bg-surface) 100%, #0e1829));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

body.dark .stats-selection-panel label,
body.dark .stats-selection-legend {
    color: var(--text-secondary);
}

body.dark .stats-selection-panel input,
body.dark .stats-selection-panel select {
    background: color-mix(in srgb, var(--bg-surface) 94%, #0b1422);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.flatpickr-day.stats-day-has-data {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    color: #0b3e9b;
}

.flatpickr-day.stats-day-has-data:hover,
.flatpickr-day.stats-day-has-data:focus {
    color: #0b3e9b;
}

.flatpickr-day.selected.stats-day-has-data,
.flatpickr-day.startRange.stats-day-has-data,
.flatpickr-day.endRange.stats-day-has-data {
    text-decoration: none;
    font-weight: 700;
}

body.dark .flatpickr-calendar {
    background: #0e223a;
    border-color: #32537b;
    box-shadow: 0 14px 36px rgba(2, 8, 23, .55);
}

body.dark .flatpickr-months .flatpickr-month,
body.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
body.dark .flatpickr-weekdays,
body.dark span.flatpickr-weekday {
    background: #0e223a;
    color: #dbeafe;
}

body.dark .flatpickr-day {
    color: #dbeafe;
}

body.dark .flatpickr-day.prevMonthDay,
body.dark .flatpickr-day.nextMonthDay {
    color: #8fb0d6;
}

body.dark .flatpickr-day.stats-day-has-data {
    color: #7cc4ff;
}

.stats-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .6rem;
    margin: .8rem 0;
}

.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    margin-top: .85rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable both-edges;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .94rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.stats-table th,
.stats-table td {
    border: 1px solid var(--border-default);
    padding: .55rem .6rem;
    text-align: center;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
}

.data-table th,
.data-table td {
    border: 1px solid var(--border-default);
    padding: .4rem .52rem;
    text-align: left;
    vertical-align: top;
    white-space: normal;
    color: var(--text-primary);
    background: var(--bg-surface);
}

.data-table th {
    background: var(--table-head-bg);
    color: var(--table-head-text);
}

.stats-table tbody tr:nth-child(even) td {
    background: var(--table-row-alt-bg);
}

.stats-table tbody tr:hover td {
    background: var(--table-row-hover-bg);
}

.stats-table td:first-child,
.stats-table th:first-child {
    background: var(--table-sticky-bg);
}

.stats-table-compact {
    font-size: 10px;
    min-width: 860px;
}

.stats-table-compact th,
.stats-table-compact td {
    padding: .25rem .35rem;
}

.stats-table {
    min-width: 620px;
    width: 100%;
}

.ranking-table {
    min-width: 980px;
}

.ranking-table td:nth-child(2) {
    min-width: 180px;
}

.stats-group-separator td {
    padding: .22rem .42rem;
    background: color-mix(in srgb, var(--bg-elevated) 90%, var(--accent-soft));
    border-top: 2px solid color-mix(in srgb, var(--border-strong) 76%, var(--accent-border));
    border-bottom: 1px solid color-mix(in srgb, var(--border-default) 86%, transparent);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    text-align: left;
}

.stats-group-separator span {
    display: inline-block;
    opacity: .92;
}

.stats-group-subtitle {
    margin-top: .15rem;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    opacity: .96;
    overflow-wrap: anywhere;
}

.item-top-actions {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.btn-icon {
    min-width: 2rem;
    padding: .24rem .4rem;
    line-height: 1;
    font-size: .95rem;
}

.stats-table th:first-child,
.stats-table td:first-child {
    text-align: left;
}

.stats-table th {
    background: var(--table-head-bg);
    color: var(--table-head-text);
}

.stat-positive {
    color: var(--success);
    font-weight: 700;
}

.stat-changed {
    color: var(--warning);
    font-weight: 700;
}

.stat-negative {
    color: var(--danger);
    font-weight: 700;
}

.stat-neutral {
    color: var(--text-secondary);
    font-weight: 700;
}

.stats-table td.stat-changed {
    background: color-mix(in srgb, var(--warning) 16%, var(--table-row-bg));
}

.stats-table td.stat-negative {
    background: color-mix(in srgb, var(--danger) 16%, var(--table-row-bg));
}

.form {
    display: grid;
    gap: .55rem;
}

.field-stack {
    display: grid;
    gap: .25rem;
}

.field-stack-compact {
    min-width: 240px;
}

.pane-intro {
    margin: 0 0 .85rem;
    padding: .72rem .82rem;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card) 90%, var(--bg));
}

.pane-intro strong {
    display: block;
    margin-bottom: .16rem;
    font-size: .92rem;
}

.pane-intro .muted {
    margin: 0;
    font-size: .85rem;
    line-height: 1.45;
}

.pane-intro-accent {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, #fff), transparent 54%),
        color-mix(in srgb, var(--card) 92%, var(--bg));
}

.compact-note {
    font-size: .9rem;
    line-height: 1.45;
}

.form-hint {
    margin: .2rem 0 1rem;
    font-size: .88rem;
    color: var(--muted);
}

.form-section {
    padding: .7rem .8rem;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand) 8%, transparent);
}

body.dark .form-section {
    background: color-mix(in srgb, var(--brand) 14%, transparent);
}

input, select {
    border: 1px solid var(--border-default);
    border-radius: 10px;
    padding: .65rem .72rem;
    font-family: inherit;
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}

textarea {
    border: 1px solid var(--border-default);
    border-radius: 10px;
    padding: .65rem .72rem;
    font-family: inherit;
    resize: vertical;
    min-height: 96px;
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.tab-btn:focus-visible,
.module-toggle:focus-visible {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 26%, transparent);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--disabled-bg);
    color: var(--disabled-text);
    border-color: color-mix(in srgb, var(--disabled-text) 30%, var(--border-default));
    cursor: not-allowed;
}

.inline-form {
    display: grid;
    grid-template-columns: 2fr 1.6fr 1fr auto;
    gap: .6rem;
    margin-bottom: 1rem;
}

.schedule-form-grid {
    grid-template-columns: 2fr 1fr 1fr auto;
}

.admin-create-grid {
    grid-template-columns: 1.4fr 1.4fr 1fr 1fr auto;
}

.admin-ogmo-grid {
    grid-template-columns: 1fr 1fr auto auto;
}

.scheduler-grid {
    grid-template-columns: 1.4fr 1fr 1fr auto;
}

.stats-admin-grid {
    grid-template-columns: 1.2fr 1.4fr .8fr 1fr;
}

.management-inner-tabs {
    margin-top: .8rem;
    margin-bottom: .7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    padding-bottom: .45rem;
}

.management-subpane {
    margin-top: .2rem;
}

.management-split {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: .75rem;
    margin-top: .75rem;
    min-width: 0;
}

.management-pane {
    padding: .8rem;
    font-size: .9rem;
    min-width: 0;
}

.management-pane h3 {
    margin-top: 0;
    margin-bottom: .45rem;
    font-size: 1rem;
}

.credentials-pane {
    position: relative;
    border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, #fff), transparent 48%),
        var(--card);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 10%, rgba(0, 17, 40, .08));
}

.credentials-pane::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 16px 0 0 16px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand) 92%, #fff),
        color-mix(in srgb, var(--brand) 58%, #fff)
    );
}

.credentials-pane h3 {
    color: color-mix(in srgb, var(--brand) 80%, var(--text));
}

.credentials-pane .item {
    background: color-mix(in srgb, var(--brand) 4%, var(--card));
}

.credentials-pane .muted {
    font-size: .78rem;
}

.credentials-pane label {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.credentials-pane input {
    padding: .54rem .66rem;
}

.credentials-pane .btn {
    padding: .48rem .72rem;
    font-size: .82rem;
}

.schedule-pane .item-top {
    margin-bottom: .38rem;
}

.queue-pane .item {
    padding: .7rem .78rem;
    min-width: 0;
}

.management-pane .item {
    padding: .62rem .7rem;
    min-width: 0;
}

.management-pane .muted,
.compact-line {
    font-size: .74rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wall-poller-save-hint {
    margin-top: -.35rem;
    margin-bottom: .55rem;
}

.wall-poller-readonly-hint {
    margin-top: -.2rem;
    margin-bottom: .55rem;
    color: color-mix(in srgb, #9a6700 70%, var(--text));
    font-weight: 700;
}

.wall-poller-save-footer {
    margin-top: .6rem;
    margin-bottom: .35rem;
}

.wall-poller-save-btn {
    box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 20%, transparent);
}

#saveWallPollerSettingsBtn {
    position: sticky;
    top: .35rem;
    z-index: 2;
}

body[data-wall-poller-readonly="1"] .wall-poller-save-btn {
    opacity: .75;
}

#adminStatsConfigMeta,
#credentialSummary,
.schedule-last-run,
.queue-pane .item,
.credentials-pane .item,
.timeline-compact,
.compact-disclosure > div {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.compact-admin-card .row {
    gap: .35rem;
}

.compact-admin-card .btn {
    padding: .42rem .65rem;
    font-size: .78rem;
}

.inline-color-chip {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    vertical-align: middle;
}

.inline-color-chip__swatch {
    width: .88rem;
    height: .88rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 42%, transparent);
}

.compact-disclosure {
    margin-top: .22rem;
    font-size: .74rem;
    min-width: 0;
    max-width: 100%;
}

.compact-disclosure summary {
    cursor: pointer;
    color: #30557c;
    font-weight: 700;
}

.timeline-compact {
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.schedule-group-disclosure {
    margin-top: .4rem;
}

.stats-schedule-filter-row {
    margin-top: .45rem;
    margin-bottom: .5rem;
    gap: .4rem;
}

.stats-schedule-filter-row .btn.active {
    border-color: color-mix(in srgb, var(--brand) 50%, var(--line));
    background: color-mix(in srgb, var(--brand) 18%, #fff);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 18%, transparent);
}

.schedule-group-disclosure summary {
    display: inline-block;
    padding: .28rem .55rem;
    border-radius: 999px;
    background: #f3f7ff;
    border: 1px solid #d7e2f4;
    font-size: .76rem;
}

.schedule-stack {
    display: grid;
    gap: .45rem;
    margin-top: .45rem;
}

.schedule-pane .sub-card {
    margin-top: .45rem;
    padding: .55rem .62rem;
}

.schedule-pane .sub-card .item-top strong,
.credentials-pane .item-top strong {
    font-size: .9rem;
}

.schedule-last-run {
    margin-top: .28rem;
    padding: .32rem .5rem;
    border-radius: 8px;
    font-size: .74rem;
    line-height: 1.35;
    border: 1px solid #d9e4f2;
    background: #f7fbff;
}

.schedule-last-run.status-success {
    border-color: #a9dfbf;
    background: #eefbf3;
    color: #1e6a3b;
}

.schedule-last-run.status-failed {
    border-color: #f1c0c0;
    background: #fff2f2;
    color: #8d2e2e;
}

.schedule-last-run.status-running {
    border-color: #b7ccf3;
    background: #eef4ff;
    color: #2c4f88;
}

.schedule-history-filters {
    margin-top: .45rem;
}

.schedule-history-filters .btn.active {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    background: color-mix(in srgb, var(--brand) 16%, #fff);
}

.worker-pane {
    margin-top: .75rem;
    font-size: .88rem;
}

.registry-table-wrap {
    margin-top: .65rem;
}

.worker-registry-table td,
.worker-registry-table th {
    font-size: .82rem;
    vertical-align: top;
}

.worker-registry-table td:nth-child(2) {
    min-width: 210px;
}

.worker-registry-table td:nth-child(7) {
    min-width: 220px;
}

.registry-name-cell {
    display: grid;
    gap: .12rem;
}

.registry-actions {
    white-space: nowrap;
    text-align: right;
}

.worker-card .item-top strong {
    font-size: .88rem;
}

.worker-card input {
    padding: .48rem .6rem;
    font-size: .8rem;
}

.skill-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .14rem .42rem;
    border-radius: 999px;
    border: 1px solid #cfe0ff;
    background: #edf4ff;
    color: #23486f;
    font-size: .72rem;
    font-weight: 700;
}

.cambio-alert-cell {
    color: #9f1239;
    font-weight: 700;
}

.cambio-alert-inline {
    margin-left: .25rem;
    font-size: .8rem;
    vertical-align: middle;
}

.fraud-row td {
    background: #fff1f3;
}

.fraud-alert-inline {
    color: #b91c1c;
    font-weight: 700;
}

body.dark .fraud-row td {
    background: #3b1b25;
}

body.dark .fraud-alert-inline,
body.dark .cambio-alert-cell {
    color: #fca5a5;
}

.btn {
    border: 1px solid var(--border-default);
    border-radius: 10px;
    padding: .62rem .95rem;
    min-height: var(--tap-size-min);
    cursor: pointer;
    font-weight: 600;
    transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
    background: var(--bg-interactive);
    color: var(--text-primary);
}

.btn-primary {
    color: var(--accent-primary-contrast);
    background: linear-gradient(90deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 55%, var(--brand-2)));
    border-color: transparent;
    box-shadow: 0 10px 20px color-mix(in srgb, var(--accent-primary) 26%, transparent);
}

.btn-ghost {
    color: var(--text-primary);
    border-color: var(--border-default);
    background: var(--bg-interactive);
}

.btn-danger {
    color: color-mix(in srgb, var(--danger) 82%, var(--text-primary));
    border-color: color-mix(in srgb, var(--danger) 36%, var(--border-default));
    background: color-mix(in srgb, var(--danger) 12%, var(--bg-surface));
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--border-strong) 24%, transparent);
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 1;
    background: var(--disabled-bg);
    color: var(--disabled-text);
    border-color: color-mix(in srgb, var(--disabled-text) 30%, var(--border-default));
    box-shadow: none;
    transform: none;
}

.row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.modal-actions {
    margin-top: .35rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .6rem;
}

.metric {
    border: 1px solid var(--border-default);
    border-radius: 14px;
    padding: .9rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 94%, white 6%), var(--bg-surface));
}

.metric span {
    color: var(--text-secondary);
    font-size: .86rem;
}

.metric strong {
    display: block;
    margin-top: .4rem;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.action-card {
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease;
}

.action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 18px color-mix(in srgb, var(--brand) 18%, rgba(22, 63, 112, .08));
}

.list {
    display: grid;
    gap: .6rem;
    min-width: 0;
    max-width: 100%;
}

.item {
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: .8rem;
    background: var(--bg-elevated);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.item-success {
    border-left: 4px solid var(--success);
    background: color-mix(in srgb, var(--success) 10%, var(--bg-elevated));
}

.item-failed {
    border-left: 4px solid var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-elevated));
}

.item-info {
    border-left: 4px solid var(--status-info);
    background: color-mix(in srgb, var(--accent-secondary) 10%, var(--bg-elevated));
}

.item-partial_success {
    border-left: 4px solid var(--warning, #f59e0b);
    background: color-mix(in srgb, var(--warning, #f59e0b) 10%, var(--bg-elevated));
}

.item-error {
    border-left: 4px solid var(--danger);
    background: color-mix(in srgb, var(--danger) 13%, var(--bg-elevated));
}

.item-top {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    align-items: center;
    min-width: 0;
}

.item-top > * {
    min-width: 0;
}

.chip {
    font-size: .78rem;
    padding: .22rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--border-default);
    background: var(--bg-interactive);
    color: var(--text-primary);
}

.chip.success { color: var(--success); border-color: color-mix(in srgb, var(--success) 42%, var(--border-default)); background: color-mix(in srgb, var(--success) 12%, var(--bg-surface)); }
.chip.failed { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, var(--border-default)); background: color-mix(in srgb, var(--danger) 12%, var(--bg-surface)); }
.chip.offline { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, var(--border-default)); background: color-mix(in srgb, var(--danger) 12%, var(--bg-surface)); }
.chip.online { color: var(--success); border-color: color-mix(in srgb, var(--success) 42%, var(--border-default)); background: color-mix(in srgb, var(--success) 12%, var(--bg-surface)); }
.chip.info { color: var(--accent-secondary); border-color: color-mix(in srgb, var(--accent-secondary) 42%, var(--border-default)); background: color-mix(in srgb, var(--accent-secondary) 12%, var(--bg-surface)); }

.log-box {
    min-height: 170px;
    background: #0f1d32;
    color: #d7eaff;
    border-radius: 12px;
    padding: .85rem;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.modal-rich {
    min-height: 170px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .85rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--card);
    color: var(--text);
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.worker-profile-modal {
    background: color-mix(in srgb, var(--card) 94%, var(--accent-soft));
    color: var(--text);
}

.worker-profile-modal .item {
    background: color-mix(in srgb, var(--card) 96%, #ffffff 4%);
    border-color: color-mix(in srgb, var(--line) 85%, transparent);
}

.worker-profile-modal strong,
.worker-profile-modal th,
.worker-profile-modal td,
.worker-profile-modal label {
    color: var(--text);
}

.worker-profile-modal .muted {
    color: var(--muted);
}

.worker-profile-modal .data-table th,
.worker-profile-modal .data-table td {
    border-color: #d8e0ea;
}

body:not(.dark) .worker-profile-modal,
body:not(.dark) .worker-profile-modal strong,
body:not(.dark) .worker-profile-modal th,
body:not(.dark) .worker-profile-modal td,
body:not(.dark) .worker-profile-modal label {
    color: #0e1b2f;
}

body:not(.dark) .worker-profile-modal .muted {
    color: #4b6487;
}

body.dark .worker-profile-modal .item {
    background: color-mix(in srgb, var(--card) 90%, #0f172a 10%);
}

.log-line {
    font-family: "Courier New", monospace;
    font-size: .88rem;
    line-height: 1.45;
    margin-bottom: .3rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.log-time {
    color: #9ec1f8;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.log-level {
    color: #bfd8ff;
}

.log-info {
    color: #d7eaff;
}

.log-success {
    color: #8ce5b0;
}

.log-warn {
    color: #ffd38f;
}

.log-error {
    color: #ffadbf;
}

.log-debug {
    color: #89d5ff;
}

.log-empty {
    color: #a0b4d4;
}

.log-final {
    border-left: 3px solid #4ec89b;
    padding-left: .45rem;
    background: rgba(78, 200, 155, .08);
    border-radius: 6px;
}

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

.toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    background: var(--chart-tooltip-bg);
    color: var(--chart-tooltip-text);
    padding: .7rem .9rem;
    border-radius: 10px;
    z-index: 90;
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-strong);
}

.status-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .7rem;
    border-top: 1px solid var(--border-default);
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    backdrop-filter: blur(7px);
    padding: .7rem 1rem;
    z-index: 5;
    margin-top: auto;
}

.status-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: .55rem .75rem;
    background: var(--bg-elevated);
    min-width: 0;
    overflow: hidden;
}

.status-card .muted,
.status-card strong,
.status-card span {
    overflow-wrap: anywhere;
}

.stats-summary-compact {
    font-size: .8rem;
}

.stats-summary-compact .item-top strong {
    font-size: 1.18rem;
}

.stats-summary-compact .muted {
    font-size: .86rem;
    line-height: 1.35;
}

.stats-summary-compact .stats-mini-grid {
    gap: .48rem;
    margin: .62rem 0;
}

.stats-cycle-bases {
    display: flex;
    flex-wrap: wrap;
    gap: .38rem;
    margin: .42rem 0 .3rem;
}

.stats-cycle-base-chip {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    background: color-mix(in srgb, var(--card) 78%, var(--primary-soft) 22%);
    color: var(--text);
    border-radius: 999px;
    padding: .2rem .56rem;
    font-size: .74rem;
    line-height: 1.2;
}

.stats-summary-compact .metric {
    border-radius: 11px;
    padding: .72rem;
}

.stats-summary-compact .metric span {
    font-size: .74rem;
}

.stats-summary-compact .metric strong {
    font-size: 1.18rem;
    margin-top: .28rem;
}

.stats-summary-compact .stats-table {
    font-size: .76rem;
}

.stats-summary-compact .stats-table th,
.stats-summary-compact .stats-table td {
    padding: .44rem .46rem;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-scrim);
    display: grid;
    place-items: center;
    z-index: 40;
    padding: 1rem;
}

#confirmModal {
    z-index: 80;
}

#logModal {
    z-index: 70;
}

#userManageModal {
    z-index: 65;
}

#platformAccountModal {
    z-index: 66;
}

#wizardModal {
    z-index: 85;
}

.modal-card {
    width: min(620px, 96vw);
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: 16px;
    box-shadow: var(--shadow-strong);
    padding: 1rem;
}

.site-legal-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 1rem 0 .35rem;
}

.site-legal-link {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: .72rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: .9;
}

.site-legal-link:hover {
    opacity: 1;
}

.terms-modal-card {
    width: min(760px, 96vw);
}

.terms-version-label {
    margin: .15rem 0 .5rem;
}

.terms-scroll-box {
    max-height: 52vh;
    overflow-y: auto;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    padding: .7rem;
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    font-size: 9px;
    line-height: 1.35;
    white-space: pre-wrap;
}

.terms-checkbox-wrap {
    margin-top: .65rem;
    align-items: flex-start;
}

.terms-checkbox-wrap span {
    font-size: .8rem;
    line-height: 1.3;
}

.terms-action-row {
    margin-top: .6rem;
}

#confirmMessage {
    white-space: pre-line;
}

.modal-lg {
    width: min(1100px, 96vw);
}

.status-title {
    font-size: .84rem;
    color: var(--muted);
}

.clock {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}

.primary-cta {
    min-width: 260px;
}

.wizard-card {
    width: min(700px, 96vw);
}

.wizard-progress {
    display: flex;
    gap: .4rem;
    margin: .75rem 0;
}

.wizard-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #c9d8ea;
    border: 1px solid #b7cce5;
}

.wizard-dot.active {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    border-color: transparent;
}

.offer-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: .85rem 0;
}

.offer-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 85%, var(--accent-soft));
    font-size: .84rem;
}

.offer-swatch {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    margin-right: .28rem;
    vertical-align: -0.12rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .15);
}

.offer-board-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    margin-top: .6rem;
}

.offer-activity-stack {
    display: grid;
    gap: .75rem;
    margin-top: .7rem;
}

.offer-activity-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: .75rem 0 .35rem;
}

.presence-view-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin: .85rem 0 1rem;
}

.presence-activity-select {
    min-width: 210px;
}

.offer-activity-block {
    display: grid;
    gap: .55rem;
    padding: .9rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 90%, var(--accent-soft) 10%);
}

.offer-activity-summary {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.offer-activity-summary span {
    font-size: .86rem;
    color: var(--muted);
    font-weight: 600;
}

.offer-port {
    min-height: 150px;
    border-radius: 14px;
    border: 1px solid var(--offer-group-border, rgba(18, 27, 45, .18));
    padding: .82rem;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(255, 255, 255, .18);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, .28), transparent 24%),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, .14), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--offer-group-bg, #ffffff) 90%, white), color-mix(in srgb, var(--offer-group-bg, #ffffff) 98%, rgba(255,255,255,.08)));
    color: var(--offer-group-text, #0B2236);
}

.offer-port-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .5rem;
    align-items: center;
    margin-bottom: .45rem;
}

.offer-port-title {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
}

.offer-port-note {
    grid-column: 3;
    justify-self: end;
    text-align: right;
    font-size: .9rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--offer-group-text, #18324f) 82%, transparent);
}

.offer-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .5rem;
    margin-top: .45rem;
}

.offer-card {
    display: grid;
    gap: .34rem;
    min-height: 100%;
    padding: .58rem .62rem;
    border-radius: 12px;
    border: 1px solid var(--offer-group-card-border, rgba(0, 0, 0, .10));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .72)),
        color-mix(in srgb, white 68%, var(--offer-group-bg, #ffffff) 32%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

.offer-card-row {
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    align-items: center;
    min-width: 0;
}

.offer-card-row-top {
    font-size: .78rem;
    color: color-mix(in srgb, var(--offer-card-text, #18324f) 84%, transparent);
}

.offer-card-loc,
.offer-card-vessel-name,
.offer-card-cargo {
    min-width: 0;
}

.offer-card-loc,
.offer-card-moment,
.offer-card-vessel-name,
.offer-card-request-id {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offer-card-loc {
    font-weight: 700;
    flex: 1 1 auto;
}

.offer-card-moment {
    flex: 0 0 auto;
    text-align: right;
}

.offer-card-row-middle {
    font-size: .92rem;
}

.offer-card-vessel-name {
    flex: 1 1 auto;
    font-weight: 700;
    color: var(--offer-card-text, #0B2236);
}

.offer-card-request-id {
    flex: 0 0 auto;
    font-size: .84rem;
    color: color-mix(in srgb, var(--offer-card-text, #18324f) 82%, transparent);
}

.offer-card-cargo {
    font-size: .82rem;
    line-height: 1.28;
    color: color-mix(in srgb, var(--offer-card-text, #0B2236) 92%, transparent);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.log-day-separator,
.run-day-separator {
    margin: .55rem 0 .25rem;
    padding: .2rem .5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-soft) 72%, var(--card));
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.stats-image-wrap {
    width: 100%;
    overflow: auto;
    max-height: 72vh;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card) 90%, var(--accent-soft));
    padding: .4rem;
    cursor: default;
}

.stats-image-wrap.is-draggable {
    cursor: grab;
}

.stats-image-wrap.is-dragging {
    cursor: grabbing;
}

.stats-image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--line);
}

.stats-image-tools {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    margin-bottom: .5rem;
}

.offer-tps { background: #00ffff; }
.offer-portocel { background: #ffcccc; }
.offer-capuaba { background: #97ff97; }
.offer-vix { background: #ffff91; }
.offer-tvv { background: #97cbff; }
.offer-paulgusa {
    background: #797979;
    color: #f5f7ff;
}
.offer-paulgusa .offer-port-note,
.offer-paulgusa .offer-card-loc,
.offer-paulgusa .offer-card-moment,
.offer-paulgusa .offer-card-request-id,
.offer-paulgusa .offer-card-cargo,
.offer-paulgusa .offer-card-vessel-name {
    color: #f5f7ff;
}
.offer-paulgusa .offer-card {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
}
.offer-peiu { background: #ffffff; }
.offer-other { background: color-mix(in srgb, var(--card) 92%, var(--accent-soft)); }

body.dark .offer-port {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 18px 34px rgba(2, 8, 23, .26), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

body.dark .offer-port,
body.dark .offer-port strong,
body.dark .offer-port .offer-card-loc,
body.dark .offer-port .offer-card-moment,
body.dark .offer-port .offer-card-request-id,
body.dark .offer-port .offer-card-cargo,
body.dark .offer-port .offer-card-vessel-name {
    color: #000000;
}

body.dark .offer-port-note {
    color: color-mix(in srgb, var(--offer-group-text, #1b2d80) 78%, transparent);
}

body.dark .offer-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .08)),
        color-mix(in srgb, white 16%, var(--offer-group-bg, #ffffff) 84%);
    border-color: var(--offer-group-card-border, rgba(0, 0, 0, .14));
}

body.dark .offer-activity-block {
    background: rgba(18, 33, 56, .68);
}

body.dark .offer-card-request-id,
body.dark .offer-card-moment {
    color: #e4efff;
}

.hidden { display: none !important; }

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.checkbox-inline input[type="checkbox"] {
    accent-color: var(--accent);
}

.escalados-filter-bar {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: .75rem;
    flex-wrap: wrap;
    margin: .35rem 0 .5rem;
}

.escalados-category-pills {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    width: 100%;
    align-items: stretch;
}

.escalados-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    color: var(--escalados-pill-text, #fff);
    background: var(--escalados-pill-bg, var(--bg-interactive));
    border-color: var(--escalados-pill-border, rgba(0, 0, 0, .12));
    width: 100%;
    min-width: 0;
}

.escalados-pill.is-active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), 0 0 0 1px rgba(11, 34, 54, .16);
}

body.dark .escalados-pill {
    border-color: color-mix(in srgb, var(--escalados-pill-bg, var(--bg-interactive)) 36%, var(--border-strong));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.dark .escalados-pill.is-active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), 0 0 0 1px rgba(69, 199, 139, .24);
}

.escalados-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--card) 92%, var(--accent-soft));
}

.escalados-activity-head {
    gap: .22rem;
}

.escalados-activity-meta {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
}

.escalados-table .stats-group-separator td {
    background: var(--escalados-request-bg, var(--bg-elevated));
    border-top: 2px solid var(--escalados-request-border, rgba(0, 0, 0, .14));
    border-bottom: 1px solid var(--escalados-request-border-soft, rgba(0, 0, 0, .12));
    color: var(--escalados-request-text, var(--text-primary));
}

body.dark .escalados-table .stats-group-separator td {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.harbor-date-filter {
    font-size: .82rem;
}

.harbor-filter-tools {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.harbor-quick-buttons {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.harbor-history-list .item {
    font-size: .66rem;
    line-height: 1.2;
    padding: .42rem .52rem;
}

.harbor-history-list .item .item-top strong {
    font-size: .98em;
}

.harbor-history-list .item .muted {
    font-size: 1em;
    line-height: 1.2;
}

.harbor-move-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .18rem .52rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.harbor-move-entry {
    background: rgba(16, 185, 129, .16);
    border-color: rgba(5, 150, 105, .28);
    color: #065f46;
}

.harbor-move-exit {
    background: rgba(246, 59, 59, 0.16);
    border-color: rgba(235, 37, 37, 0.28);
    color: #d81d1d;
}

.harbor-move-neutral {
    background: rgba(148, 163, 184, .2);
    border-color: rgba(100, 116, 139, .28);
    color: #334155;
}

.harbor-terminal-section {
    margin-top: .8rem;
}

.harbor-terminal-head {
    margin-bottom: .55rem;
}

.harbor-berths-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .75rem;
    align-items: stretch;
}

.harbor-berth-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    min-height: 388px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.34), transparent 28%),
        radial-gradient(circle at bottom left, rgba(15, 118, 110, 0.10), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--card) 92%, #eef8f6), color-mix(in srgb, var(--card) 88%, #ddeff0));
    padding: .9rem;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.harbor-berth-card.is-occupied {
    border-color: rgba(5, 150, 105, .35);
}

.harbor-berth-card.is-free {
    border-color: color-mix(in srgb, var(--line) 78%, #94a3b8);
}

.harbor-berth-card.is-conflict {
    border-color: rgba(220, 38, 38, .48);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.28), transparent 24%),
        radial-gradient(circle at top left, rgba(220, 38, 38, 0.18), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--card) 90%, #fff1ec), color-mix(in srgb, var(--card) 84%, #ffe2db));
    box-shadow: 0 18px 38px rgba(220, 38, 38, 0.12);
}

.harbor-berth-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .72rem;
}

.harbor-berth-head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.harbor-berth-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
}

.harbor-berth-title {
    font-size: .96rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.harbor-berth-status {
    display: inline-flex;
    margin-top: .24rem;
    padding: .16rem .5rem;
    border-radius: 999px;
    font-size: .69rem;
    font-weight: 800;
}

.harbor-berth-status.is-occupied {
    background: rgba(16, 185, 129, .15);
    color: #065f46;
}

.harbor-berth-status.is-free {
    background: rgba(148, 163, 184, .18);
    color: #334155;
}

.harbor-conflict-badge {
    padding: .22rem .58rem;
    border-radius: 999px;
    background: rgba(220, 38, 38, .14);
    color: #b91c1c;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.harbor-departure-badge {
    display: inline-block;
    margin-top: .28rem;
    padding: .16rem .46rem;
    border-radius: 10px;
    background: rgba(15, 118, 110, .10);
    color: #0f3d3b;
    border: 1px solid rgba(15, 118, 110, .18);
    font-size: .64rem;
    font-weight: 700;
    text-align: left;
    min-width: 162px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.harbor-departure-badge.is-idle {
    background: rgba(148, 163, 184, .14);
    color: #475569;
    border-color: rgba(100, 116, 139, .18);
}

.harbor-berth-body {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, auto));
    gap: .62rem;
    flex: 1 1 auto;
}

.harbor-lane {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .62rem .68rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, rgba(255, 255, 255, .45));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .71));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

.harbor-lane-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .69rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .22rem;
}

.harbor-lane-label-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: .14rem .42rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    color: inherit;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.harbor-vessel-main {
    font-size: .8rem;
    font-weight: 800;
    margin-bottom: .12rem;
    line-height: 1.16;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.harbor-vessel-main a {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.harbor-lane-content {
    min-width: 0;
}

.harbor-lane-mainline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
    min-width: 0;
}

.harbor-lane-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.harbor-lane-side {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    min-width: 132px;
}

.harbor-queue-line {
    display: flex;
    flex-wrap: wrap;
    gap: .28rem;
    align-items: center;
    min-height: 24px;
}

.harbor-queue-step {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: .24rem .46rem;
    border-radius: 999px;
    background: rgba(250, 204, 21, .18);
    color: #854d0e;
    font-size: .69rem;
    font-weight: 700;
    line-height: 1.16;
    gap: .3rem;
    max-width: 100%;
    min-width: min(100%, 250px);
    flex-wrap: nowrap;
}

.harbor-queue-step.is-conflict {
    background: rgba(220, 38, 38, .14);
    color: #b91c1c;
}

.harbor-queue-arrow {
    color: var(--muted);
    font-weight: 800;
}

.harbor-queue-copy {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 1 1 auto;
}

.harbor-queue-order {
    flex: 0 0 auto;
    white-space: nowrap;
}

.harbor-queue-vessel {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.harbor-queue-vessel a {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.harbor-queue-eta {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .62rem;
    text-align: right;
    min-width: 92px;
}

.harbor-history-date {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 92px;
    padding: .12rem .3rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    color: inherit;
    font-size: .62rem;
    font-weight: 700;
}

.harbor-conflict-note {
    padding: .52rem .64rem;
    border-radius: 12px;
    background: rgba(220, 38, 38, .08);
    color: #991b1b;
    font-size: .71rem;
    font-weight: 700;
}

.harbor-lane .muted {
    line-height: 1.22;
    font-size: .68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.harbor-berth-card.terminal-tps {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(circle at bottom left, rgba(0, 180, 180, 0.16), transparent 34%),
        linear-gradient(145deg, #8fffff, #4df6f6 48%, #bcffff);
}

.harbor-berth-card.terminal-capuaba {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(circle at bottom left, rgba(44, 138, 44, 0.14), transparent 34%),
        linear-gradient(145deg, #d9ffd3, #9fff99 50%, #c7ffbf);
}

.harbor-berth-card.terminal-vix {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(circle at bottom left, rgba(194, 168, 0, 0.14), transparent 34%),
        linear-gradient(145deg, #fffcc2, #fff787 52%, #fff4a8);
}

.harbor-berth-card.terminal-tvv {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(circle at bottom left, rgba(36, 106, 201, 0.15), transparent 34%),
        linear-gradient(145deg, #d9ecff, #98cbff 52%, #c9e2ff);
}

.harbor-berth-card.terminal-portocel {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(circle at bottom left, rgba(194, 73, 73, 0.14), transparent 34%),
        linear-gradient(145deg, #ffe2e2, #ffcaca 52%, #ffd7d7);
}

.harbor-berth-card.terminal-paul {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 38%),
        linear-gradient(180deg, #2b3138, color-mix(in srgb, #2b3138 90%, #525862));
    color: #f8fafc;
}

.harbor-berth-card.terminal-peiu {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.48), transparent 24%),
        radial-gradient(circle at bottom left, rgba(148, 163, 184, 0.12), transparent 34%),
        linear-gradient(145deg, #ffffff, #f6f8fb 54%, #eef3f9);
}

.harbor-berth-card.terminal-vix,
.harbor-berth-card.terminal-tvv,
.harbor-berth-card.terminal-portocel,
.harbor-berth-card.terminal-peiu {
    color: #0f172a;
}

.harbor-berth-card.terminal-vix .muted,
.harbor-berth-card.terminal-vix .harbor-berth-status.is-free,
.harbor-berth-card.terminal-vix .harbor-berth-status.is-occupied,
.harbor-berth-card.terminal-vix .harbor-lane-label,
.harbor-berth-card.terminal-vix .harbor-vessel-main,
.harbor-berth-card.terminal-vix .harbor-vessel-main a,
.harbor-berth-card.terminal-vix .harbor-lane,
.harbor-berth-card.terminal-tvv .muted,
.harbor-berth-card.terminal-tvv .harbor-berth-status.is-free,
.harbor-berth-card.terminal-tvv .harbor-berth-status.is-occupied,
.harbor-berth-card.terminal-tvv .harbor-lane-label,
.harbor-berth-card.terminal-tvv .harbor-vessel-main,
.harbor-berth-card.terminal-tvv .harbor-vessel-main a,
.harbor-berth-card.terminal-tvv .harbor-lane,
.harbor-berth-card.terminal-portocel .muted,
.harbor-berth-card.terminal-portocel .harbor-berth-status.is-free,
.harbor-berth-card.terminal-portocel .harbor-berth-status.is-occupied,
.harbor-berth-card.terminal-portocel .harbor-lane-label,
.harbor-berth-card.terminal-portocel .harbor-vessel-main,
.harbor-berth-card.terminal-portocel .harbor-vessel-main a,
.harbor-berth-card.terminal-portocel .harbor-lane,
.harbor-berth-card.terminal-peiu .muted,
.harbor-berth-card.terminal-peiu .harbor-berth-status.is-free,
.harbor-berth-card.terminal-peiu .harbor-berth-status.is-occupied,
.harbor-berth-card.terminal-peiu .harbor-lane-label,
.harbor-berth-card.terminal-peiu .harbor-vessel-main,
.harbor-berth-card.terminal-peiu .harbor-vessel-main a,
.harbor-berth-card.terminal-peiu .harbor-lane {
    color: #0f172a;
}

.harbor-berth-card.terminal-paul .muted,
.harbor-berth-card.terminal-paul .harbor-berth-status.is-free,
.harbor-berth-card.terminal-paul .harbor-berth-status.is-occupied,
.harbor-berth-card.terminal-paul .harbor-lane-label,
.harbor-berth-card.terminal-paul .harbor-vessel-main,
.harbor-berth-card.terminal-paul .harbor-vessel-main a {
    color: #f8fafc;
}

.harbor-berth-card.terminal-paul .harbor-lane {
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .96));
    border-color: rgba(15, 23, 42, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
}

.harbor-berth-card.terminal-paul .harbor-departure-badge {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
    color: #f8fafc;
}

.harbor-berth-card.terminal-paul .harbor-lane .muted,
.harbor-berth-card.terminal-paul .harbor-lane .harbor-vessel-main,
.harbor-berth-card.terminal-paul .harbor-lane .harbor-vessel-main a,
.harbor-berth-card.terminal-paul .harbor-lane .harbor-lane-label,
.harbor-berth-card.terminal-paul .harbor-lane .harbor-queue-step,
.harbor-berth-card.terminal-paul .harbor-lane .harbor-queue-vessel,
.harbor-berth-card.terminal-paul .harbor-lane .harbor-queue-eta {
    color: #0f172a;
    text-shadow: none;
}

@media (max-width: 900px) {
    .harbor-berths-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: .65rem;
    }

    .harbor-berth-card {
        min-height: 360px;
        padding: .8rem;
    }

    .harbor-lane {
        min-height: 74px;
    }

    .harbor-lane-side,
    .harbor-queue-eta,
    .harbor-history-date {
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .harbor-terminal-head {
        margin-bottom: .45rem;
    }

    .harbor-berths-grid {
        grid-template-columns: 1fr;
        gap: .55rem;
    }

    .harbor-berth-card {
        min-height: auto;
        padding: .75rem;
        border-radius: 16px;
    }

    .harbor-berth-head {
        gap: .55rem;
        margin-bottom: .58rem;
    }

    .harbor-berth-title {
        font-size: .92rem;
    }

    .harbor-berth-status {
        font-size: .66rem;
    }

    .harbor-departure-badge {
        display: block;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: .62rem;
        line-height: 1.18;
    }

    .harbor-conflict-badge {
        font-size: .67rem;
    }

    .harbor-lane {
        min-height: 0;
        padding: .58rem .62rem;
    }

    .harbor-vessel-main {
        font-size: .76rem;
    }

    .harbor-queue-step {
        font-size: .65rem;
        max-width: 100%;
        white-space: nowrap;
    }

    .harbor-lane-mainline {
        gap: .45rem;
    }

    .harbor-lane .muted {
        font-size: .66rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

body.dark .harbor-move-entry {
    background: rgba(16, 185, 129, .28);
    border-color: rgba(74, 222, 128, .4);
    color: #bbf7d0;
}

body.dark .harbor-move-exit {
    background: rgba(246, 59, 59, 0.28);
    border-color: rgba(250, 96, 96, 0.42);
    color: #febfbf;
}

body.dark .harbor-move-neutral {
    background: rgba(100, 116, 139, .34);
    border-color: rgba(148, 163, 184, .45);
    color: #e2e8f0;
}

body.dark .harbor-berth-card {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.06), transparent 24%),
        radial-gradient(circle at bottom left, rgba(45, 212, 191, 0.16), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--card) 94%, #112a30), color-mix(in srgb, var(--card) 86%, #0f2236));
    box-shadow: 0 18px 36px rgba(2, 8, 23, 0.32);
    color: var(--text-primary);
}

body.dark .harbor-berth-card.is-conflict {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 22%),
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.20), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--card) 90%, #351919), color-mix(in srgb, var(--card) 84%, #22131a));
}

body.dark .harbor-berth-status.is-occupied {
    background: rgba(16, 185, 129, .28);
    color: #bbf7d0;
}

body.dark .harbor-berth-status.is-free {
    background: rgba(100, 116, 139, .34);
    color: #e2e8f0;
}

body.dark .harbor-conflict-badge,
body.dark .harbor-conflict-note,
body.dark .harbor-queue-step.is-conflict {
    color: #fecaca;
}

body.dark .harbor-queue-step {
    background: rgba(250, 204, 21, .16);
    color: #fde68a;
}

body.dark .harbor-departure-badge {
    background: rgba(45, 212, 191, .14);
    border-color: rgba(45, 212, 191, .24);
    color: #ccfbf1;
}

body.dark .harbor-departure-badge.is-idle {
    background: rgba(100, 116, 139, .24);
    border-color: rgba(148, 163, 184, .22);
    color: #cbd5e1;
}

body.dark .harbor-lane {
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .06));
    border-color: rgba(148, 163, 184, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.dark .harbor-berth-card.terminal-tps,
body.dark .harbor-berth-card.terminal-capuaba,
body.dark .harbor-berth-card.terminal-vix,
body.dark .harbor-berth-card.terminal-tvv,
body.dark .harbor-berth-card.terminal-portocel,
body.dark .harbor-berth-card.terminal-paul,
body.dark .harbor-berth-card.terminal-peiu {
    box-shadow: 0 18px 36px rgba(2, 8, 23, 0.34);
}

body.dark .harbor-berth-card.terminal-tps {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 24%),
        radial-gradient(circle at bottom left, rgba(0, 180, 180, 0.22), transparent 34%),
        linear-gradient(145deg, #42d7df, #19cbd2 48%, #89ecf3);
    color: #08222a;
}

body.dark .harbor-berth-card.terminal-capuaba {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 24%),
        radial-gradient(circle at bottom left, rgba(44, 138, 44, 0.22), transparent 34%),
        linear-gradient(145deg, #98f39f, #5fd86c 50%, #baf0b7);
    color: #102417;
}

body.dark .harbor-berth-card.terminal-vix {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 24%),
        radial-gradient(circle at bottom left, rgba(194, 168, 0, 0.22), transparent 34%),
        linear-gradient(145deg, #fff1a8, #ffe36c 52%, #ffef92);
    color: #2a2206;
}

body.dark .harbor-berth-card.terminal-tvv {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 24%),
        radial-gradient(circle at bottom left, rgba(36, 106, 201, 0.22), transparent 34%),
        linear-gradient(145deg, #8ec0ff, #5c9fff 52%, #b7d7ff);
    color: #081b33;
}

body.dark .harbor-berth-card.terminal-portocel {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 24%),
        radial-gradient(circle at bottom left, rgba(194, 73, 73, 0.22), transparent 34%),
        linear-gradient(145deg, #ffbaba, #ff9696 52%, #ffc7c7);
    color: #341012;
}

body.dark .harbor-berth-card.terminal-peiu {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 24%),
        radial-gradient(circle at bottom left, rgba(148, 163, 184, 0.18), transparent 34%),
        linear-gradient(145deg, #f4f7fb, #dde6f0 54%, #eef4fa);
    color: #0f172a;
}

body.dark .harbor-berth-card.terminal-vix .muted,
body.dark .harbor-berth-card.terminal-vix .harbor-berth-status.is-free,
body.dark .harbor-berth-card.terminal-vix .harbor-berth-status.is-occupied,
body.dark .harbor-berth-card.terminal-vix .harbor-lane-label,
body.dark .harbor-berth-card.terminal-vix .harbor-vessel-main,
body.dark .harbor-berth-card.terminal-vix .harbor-vessel-main a,
body.dark .harbor-berth-card.terminal-vix .harbor-lane,
body.dark .harbor-berth-card.terminal-tvv .muted,
body.dark .harbor-berth-card.terminal-tvv .harbor-berth-status.is-free,
body.dark .harbor-berth-card.terminal-tvv .harbor-berth-status.is-occupied,
body.dark .harbor-berth-card.terminal-tvv .harbor-lane-label,
body.dark .harbor-berth-card.terminal-tvv .harbor-vessel-main,
body.dark .harbor-berth-card.terminal-tvv .harbor-vessel-main a,
body.dark .harbor-berth-card.terminal-tvv .harbor-lane,
body.dark .harbor-berth-card.terminal-portocel .muted,
body.dark .harbor-berth-card.terminal-portocel .harbor-berth-status.is-free,
body.dark .harbor-berth-card.terminal-portocel .harbor-berth-status.is-occupied,
body.dark .harbor-berth-card.terminal-portocel .harbor-lane-label,
body.dark .harbor-berth-card.terminal-portocel .harbor-vessel-main,
body.dark .harbor-berth-card.terminal-portocel .harbor-vessel-main a,
body.dark .harbor-berth-card.terminal-portocel .harbor-lane,
body.dark .harbor-berth-card.terminal-peiu .muted,
body.dark .harbor-berth-card.terminal-peiu .harbor-berth-status.is-free,
body.dark .harbor-berth-card.terminal-peiu .harbor-berth-status.is-occupied,
body.dark .harbor-berth-card.terminal-peiu .harbor-lane-label,
body.dark .harbor-berth-card.terminal-peiu .harbor-vessel-main,
body.dark .harbor-berth-card.terminal-peiu .harbor-vessel-main a,
body.dark .harbor-berth-card.terminal-peiu .harbor-lane,
body.dark .harbor-berth-card.terminal-tps .muted,
body.dark .harbor-berth-card.terminal-tps .harbor-berth-status.is-free,
body.dark .harbor-berth-card.terminal-tps .harbor-berth-status.is-occupied,
body.dark .harbor-berth-card.terminal-tps .harbor-lane-label,
body.dark .harbor-berth-card.terminal-tps .harbor-vessel-main,
body.dark .harbor-berth-card.terminal-tps .harbor-vessel-main a,
body.dark .harbor-berth-card.terminal-tps .harbor-lane,
body.dark .harbor-berth-card.terminal-capuaba .muted,
body.dark .harbor-berth-card.terminal-capuaba .harbor-berth-status.is-free,
body.dark .harbor-berth-card.terminal-capuaba .harbor-berth-status.is-occupied,
body.dark .harbor-berth-card.terminal-capuaba .harbor-lane-label,
body.dark .harbor-berth-card.terminal-capuaba .harbor-vessel-main,
body.dark .harbor-berth-card.terminal-capuaba .harbor-vessel-main a,
body.dark .harbor-berth-card.terminal-capuaba .harbor-lane {
    color: inherit;
}

body.dark .harbor-berth-card.terminal-tps .harbor-lane,
body.dark .harbor-berth-card.terminal-capuaba .harbor-lane,
body.dark .harbor-berth-card.terminal-vix .harbor-lane,
body.dark .harbor-berth-card.terminal-tvv .harbor-lane,
body.dark .harbor-berth-card.terminal-portocel .harbor-lane,
body.dark .harbor-berth-card.terminal-peiu .harbor-lane {
    background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .34));
    border-color: rgba(15, 23, 42, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}

.btn-sm {
    padding: .35rem .6rem;
    font-size: .78rem;
}

.presence-sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .65rem;
    margin-top: .65rem;
}

.presence-panels-stack {
    display: grid;
    gap: .8rem;
    margin-top: .6rem;
}

.presence-panel {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent-border));
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, .34), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, var(--accent-soft)), color-mix(in srgb, var(--card) 100%, #fff));
    box-shadow: 0 14px 28px rgba(15, 23, 42, .06);
}

.presence-panel-cadastro {
    border-color: color-mix(in srgb, #0f766e 20%, var(--line));
}

.presence-panel-registro {
    border-color: color-mix(in srgb, #2563eb 18%, var(--line));
}

.presence-panel .item-top {
    align-items: flex-start;
    padding-bottom: .45rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent-border));
}

.presence-activity-toolbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin-top: .65rem;
}

.presence-activity-toolbar label {
    font-size: .82rem;
    color: var(--muted);
}

.presence-sublist-switch {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .6rem;
}

.presence-sublist-switch .btn.active,
.presence-activity-toolbar .input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}

.stats-trend-focus {
    margin-top: .65rem;
    padding: .55rem .72rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, var(--accent-border));
    background: color-mix(in srgb, var(--card) 90%, var(--accent-soft));
    color: var(--text);
    font-size: .82rem;
    font-weight: 700;
}

.presence-sections-grid > .item {
    min-width: 0;
}

.presence-lines-wrap {
    margin-top: .38rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow-x: hidden;
    overflow-y: visible;
    background: color-mix(in srgb, var(--card) 96%, var(--accent-soft));
}

.presence-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}

.presence-line {
    margin: 0;
    padding: .12rem .2rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent-border));
    font-size: .70rem;
    line-height: 1.08;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.presence-line:first-child {
    border-top: 0;
}

.presence-merged-table-wrap .stats-table {
    font-size: .70rem;
    min-width: 930px;
    table-layout: fixed;
    width: 100%;
}

.presence-merged-table-wrap .stats-table th,
.presence-merged-table-wrap .stats-table td {
    padding: .2rem .28rem;
    line-height: 1.1;
}

.presence-merged-table-wrap .stats-table th:nth-child(1),
.presence-merged-table-wrap .stats-table td:nth-child(1),
.presence-merged-table-wrap .stats-table th:nth-child(3),
.presence-merged-table-wrap .stats-table td:nth-child(3),
.presence-merged-table-wrap .stats-table th:nth-child(4),
.presence-merged-table-wrap .stats-table td:nth-child(4),
.presence-merged-table-wrap .stats-table th:nth-child(5),
.presence-merged-table-wrap .stats-table td:nth-child(5),
.presence-merged-table-wrap .stats-table th:nth-child(6),
.presence-merged-table-wrap .stats-table td:nth-child(6),
.presence-merged-table-wrap .stats-table th:nth-child(7),
.presence-merged-table-wrap .stats-table td:nth-child(7),
.presence-merged-table-wrap .stats-table th:nth-child(8),
.presence-merged-table-wrap .stats-table td:nth-child(8) {
    white-space: nowrap;
}

.presence-sort-btn {
    width: 100%;
    text-align: left;
}

.presence-merged-risk-table th:nth-child(1),
.presence-merged-risk-table td:nth-child(1) {
    width: 58px;
}

.presence-merged-risk-table th:nth-child(2),
.presence-merged-risk-table td:nth-child(2) {
    width: 210px;
}

.presence-merged-risk-table th:nth-child(3),
.presence-merged-risk-table td:nth-child(3) {
    width: 66px;
}

.presence-merged-risk-table th:nth-child(4),
.presence-merged-risk-table td:nth-child(4),
.presence-merged-risk-table th:nth-child(5),
.presence-merged-risk-table td:nth-child(5),
.presence-merged-risk-table th:nth-child(6),
.presence-merged-risk-table td:nth-child(6),
.presence-merged-risk-table th:nth-child(7),
.presence-merged-risk-table td:nth-child(7) {
    width: 84px;
}

.presence-merged-risk-table th:nth-child(8),
.presence-merged-risk-table td:nth-child(8) {
    width: 98px;
}

.presence-merged-registro-table th:nth-child(1),
.presence-merged-registro-table td:nth-child(1) {
    width: 58px;
}

.presence-merged-registro-table th:nth-child(2),
.presence-merged-registro-table td:nth-child(2) {
    width: 220px;
}

.presence-merged-registro-table th:nth-child(3),
.presence-merged-registro-table td:nth-child(3) {
    width: 72px;
}

.presence-merged-registro-table th:nth-child(n+4),
.presence-merged-registro-table td:nth-child(n+4) {
    min-width: 82px;
    width: 82px;
    text-align: center;
    white-space: nowrap;
}

.presence-sublist-separator td {
    padding: .45rem .55rem;
    background: color-mix(in srgb, var(--accent-soft) 52%, var(--card));
    border-top: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent-border) 22%);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent-border) 22%);
    color: var(--text);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.probability-card {
    margin-top: .7rem;
}

.probability-card-top {
    align-items: center;
}

.probability-intro {
    margin-top: .28rem;
    line-height: 1.35;
}

.probability-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .55rem;
}

.probability-summary span {
    display: inline-flex;
    align-items: center;
    padding: .2rem .52rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--card) 85%, var(--accent-soft));
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: .78rem;
}

.probability-highlight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .55rem;
    padding: .82rem .95rem;
    border: 1px solid color-mix(in srgb, var(--line) 82%, rgba(16, 185, 129, .22));
    border-radius: 14px;
    background: color-mix(in srgb, var(--card) 92%, rgba(16, 185, 129, .08));
}

.probability-highlight-copy {
    display: grid;
    gap: .16rem;
    min-width: 0;
}

.probability-highlight-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 800;
}

.probability-highlight-name {
    font-size: 1rem;
    font-weight: 900;
    color: var(--text);
    line-height: 1.2;
}

.probability-highlight-meta {
    line-height: 1.3;
}

.probability-highlight-side {
    display: grid;
    justify-items: end;
    gap: .25rem;
    flex: 0 0 auto;
}

.probability-highlight-score {
    font-size: 1.18rem;
    font-weight: 900;
    color: var(--text);
    line-height: 1;
}

.probability-mobile-list {
    display: none;
    margin-top: .6rem;
    gap: .55rem;
}

.probability-mobile-card {
    display: grid;
    gap: .45rem;
    padding: .7rem .75rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 92%, var(--accent-soft));
}

.probability-mobile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .55rem;
}

.probability-mobile-head strong {
    color: var(--text);
    line-height: 1.22;
}

.probability-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .28rem .55rem;
    font-size: .76rem;
    color: var(--text);
}

.probability-mobile-grid strong {
    font-weight: 800;
}

.probability-mobile-meta {
    font-size: .72rem;
    line-height: 1.25;
}

.probability-table-wrap {
    margin-top: .6rem;
}

.probability-table td:first-child strong {
    color: var(--text);
}

.probability-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: .18rem .5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.probability-badge-high {
    background: rgba(16, 185, 129, .16);
    border-color: rgba(5, 150, 105, .25);
    color: #065f46;
}

.probability-badge-medium {
    background: rgba(245, 158, 11, .16);
    border-color: rgba(217, 119, 6, .25);
    color: #92400e;
}

.probability-badge-low {
    background: rgba(148, 163, 184, .18);
    border-color: rgba(100, 116, 139, .25);
    color: #334155;
}

body.dark .probability-summary span {
    background: color-mix(in srgb, var(--card) 88%, #0f172a 12%);
    border-color: #345277;
    color: #d1dff3;
}

body.dark .probability-highlight {
    background: color-mix(in srgb, var(--card) 86%, rgba(16, 185, 129, .12));
    border-color: color-mix(in srgb, #4ade80 24%, var(--line));
}

body.dark .probability-mobile-card {
    background: color-mix(in srgb, var(--card) 90%, #10213c 10%);
    border-color: var(--line);
}

body.dark .probability-badge-high {
    background: rgba(16, 185, 129, .22);
    border-color: rgba(74, 222, 128, .38);
    color: #bbf7d0;
}

body.dark .probability-badge-medium {
    background: rgba(245, 158, 11, .22);
    border-color: rgba(251, 191, 36, .38);
    color: #fde68a;
}

body.dark .probability-badge-low {
    background: rgba(100, 116, 139, .28);
    border-color: rgba(148, 163, 184, .38);
    color: #e2e8f0;
}

.row.compact {
    gap: .35rem;
}

.presence-row-group td {
    background: rgba(75, 85, 99, .18);
    font-weight: 800;
    color: #6b7280;
}

.presence-row-window td {
    background: rgba(226, 232, 240, .85);
    font-weight: 800;
    color: #1f2937;
}

.presence-row-red td {
    color: #c1121f;
    font-weight: 700;
}

.presence-row-group {
    background: rgba(75, 85, 99, .18);
    font-weight: 800;
    color: #6b7280;
}

.presence-row-window {
    background: rgba(226, 232, 240, .85);
    font-weight: 800;
    color: #1f2937;
}

.presence-row-red {
    color: #c1121f;
    font-weight: 700;
}

.presence-merged-risk-table th:nth-child(4),
.presence-merged-risk-table td:nth-child(4),
.presence-merged-risk-table th:nth-child(5),
.presence-merged-risk-table td:nth-child(5),
.presence-merged-risk-table th:nth-child(6),
.presence-merged-risk-table td:nth-child(6),
.presence-merged-risk-table th:nth-child(7),
.presence-merged-risk-table td:nth-child(7),
.presence-merged-risk-table th:nth-child(8),
.presence-merged-risk-table td:nth-child(8) {
    text-align: center;
}

.presence-risk-cell {
    text-align: center;
}

.presence-risk-cell-empty {
    text-align: center;
    color: var(--muted);
    font-weight: 700;
}

.presence-risk-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.35rem;
    padding: .16rem .42rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.harbor-mobile-meta {
    display: none;
}

.harbor-toolbar {
    display: grid;
    gap: .65rem;
    margin-top: .8rem;
}

.harbor-port-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.harbor-search-input {
    width: 100%;
    min-height: var(--tap-size-min);
}

.pager-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .6rem;
}

.ranking-table th {
    white-space: nowrap;
}

.ranking-sort-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.ranking-sort-btn:hover {
    text-decoration: underline;
}

.ranking-heat-cell {
    transition: background-color .18s ease;
}

.ranking-toolbar {
    align-items: center;
    gap: .75rem;
    margin: .35rem 0;
}

.ranking-view-buttons {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .35rem;
}

.ranking-view-block {
    margin-top: .55rem;
    padding: .7rem .8rem;
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent-border));
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, var(--accent-soft)), color-mix(in srgb, var(--card) 100%, #fff));
}

.ranking-view-block-label {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--muted);
}

.ranking-section-buttons {
    margin-top: .55rem;
}

.ranking-subsection-buttons {
    margin-top: .55rem;
}

.ranking-port-card {
    border: 1px solid color-mix(in srgb, var(--line) 76%, var(--ranking-port-color, var(--brand)));
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, .4), transparent 24%),
        radial-gradient(circle at top left, color-mix(in srgb, var(--ranking-port-color, #dbeafe) 20%, rgba(255,255,255,.0)), transparent 30%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--card) 86%, var(--ranking-port-color, #dbeafe) 14%),
            color-mix(in srgb, var(--card) 98%, white));
    box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
}

.ranking-port-card > .item {
    margin-top: .7rem;
    background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.58));
}

.ranking-port-filter-wrap {
    display: grid;
    gap: .32rem;
    margin-top: .55rem;
}

.ranking-port-filter-label {
    font-size: .76rem;
    font-weight: 700;
    color: var(--muted);
}

.ranking-port-filter-select {
    width: 100%;
}

.ranking-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .12rem;
    padding: .48rem .72rem;
    border-radius: 14px;
    font-size: .76rem;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, .08);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, background .14s ease;
    min-width: 160px;
    text-align: center;
}

.ranking-view-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
}

.ranking-view-btn.active {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), 0 8px 18px rgba(15, 23, 42, .12);
    transform: translateY(-1px);
}

.ranking-view-btn-title {
    font-size: .82rem;
    line-height: 1.1;
}

.ranking-view-btn-desc {
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.15;
    opacity: .82;
}

.ranking-view-btn.all {
    background: rgba(148, 163, 184, .22);
    color: #334155;
}

.ranking-view-btn.general {
    background: rgba(16, 185, 129, .18);
    color: #065f46;
}

.ranking-view-btn.general.active {
    background: linear-gradient(180deg, rgba(16, 185, 129, .28), rgba(16, 185, 129, .2));
    border-color: rgba(5, 150, 105, .35);
}

.ranking-view-btn.registered {
    background: rgba(59, 130, 246, .18);
    color: #1d4ed8;
}

.ranking-view-btn.registered.active {
    background: linear-gradient(180deg, rgba(59, 130, 246, .28), rgba(59, 130, 246, .2));
    border-color: rgba(29, 78, 216, .35);
}

.ranking-view-btn.same-function {
    background: rgba(245, 158, 11, .18);
    color: #b45309;
}

.ranking-view-btn.same-function.active {
    background: linear-gradient(180deg, rgba(245, 158, 11, .28), rgba(245, 158, 11, .2));
    border-color: rgba(180, 83, 9, .35);
}

.ranking-view-btn.divergent {
    background: rgba(220, 38, 38, .18);
    color: #b91c1c;
}

.ranking-view-btn.divergent.active {
    background: linear-gradient(180deg, rgba(220, 38, 38, .26), rgba(220, 38, 38, .18));
    border-color: rgba(185, 28, 28, .35);
}

.ranking-view-btn.compulsory {
    background: rgba(217, 119, 6, .18);
    color: #b45309;
}

.ranking-view-btn.compulsory.active {
    background: linear-gradient(180deg, rgba(217, 119, 6, .28), rgba(217, 119, 6, .2));
    border-color: rgba(180, 83, 9, .35);
}

.worker-report-shell {
    border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent-border));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 24%, transparent), transparent 24%),
        linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, var(--accent-soft) 2%), var(--card));
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
}

.worker-report-toolbar,
.worker-report-admin-search {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
    margin-top: .7rem;
}

.worker-report-admin-search .input {
    min-width: min(100%, 320px);
    flex: 1 1 260px;
}

.worker-report-search-results {
    display: grid;
    gap: .45rem;
    margin-top: .75rem;
}

.worker-report-result-btn {
    justify-content: space-between;
    text-align: left;
    width: 100%;
}

.worker-report-content {
    display: grid;
    gap: .9rem;
    margin-top: .85rem;
}

.worker-report-profile-meta {
    display: grid;
    gap: .4rem;
}

.worker-report-identity {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.worker-report-metrics {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.worker-report-metric {
    min-height: 100%;
}

.worker-report-grid {
    display: grid;
    gap: .85rem;
}

.worker-report-grid-main {
    grid-template-columns: 1fr;
}

.worker-report-grid-ratios,
.worker-report-grid-trends {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.worker-report-card {
    min-height: 100%;
}

.latest-embark-card {
    border: 2px solid color-mix(in srgb, var(--brand) 42%, var(--line));
    box-shadow: 0 14px 28px rgba(17, 46, 70, 0.12);
}

.previous-embark-item {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
}

.worker-report-donut-layout {
    display: flex;
    justify-content: center;
    padding: .35rem 0 .2rem;
}

.worker-report-donut {
    width: 188px;
    height: 188px;
    border-radius: 999px;
    background: var(--donut-fill, conic-gradient(#e2e8f0 0deg 360deg));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.worker-report-donut::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--card) 98%, white 2%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

.worker-report-donut-center {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    text-align: center;
}

.worker-report-donut-center strong {
    font-size: 1.45rem;
    line-height: 1;
}

.worker-report-donut-center span {
    font-size: .78rem;
    color: var(--muted);
    margin-top: .12rem;
}

.worker-report-legend {
    display: grid;
    gap: .45rem;
    margin-top: .75rem;
}

.worker-report-legend-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem;
    align-items: start;
}

.worker-report-legend-dot {
    width: .82rem;
    height: .82rem;
    margin-top: .15rem;
    border-radius: 999px;
    background: var(--legend-color, #94a3b8);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--card) 70%, transparent);
}

.worker-report-legend-copy {
    display: grid;
    gap: .08rem;
}

.worker-report-legend-copy span {
    color: var(--muted);
    font-size: .8rem;
}

.worker-report-table td:nth-child(1),
.worker-report-table th:nth-child(1),
.worker-report-table td:nth-child(3),
.worker-report-table th:nth-child(3) {
    white-space: normal;
}

.worker-report-ranking-separator {
    height: .25rem;
}

.stats-trend-toolbar {
    margin-top: .45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .65rem .8rem;
    border: 1px solid color-mix(in srgb, var(--border-default) 82%, var(--accent-border));
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 96%, var(--accent-soft)), var(--bg-surface));
}

.stats-trend-periods {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.stats-trend-periods .btn.active {
    border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-default));
    background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-surface));
}

@media (max-width: 720px) {
    .presence-activity-toolbar {
        align-items: stretch;
    }

    .presence-activity-toolbar .presence-activity-select {
        width: 100%;
    }

    .presence-sublist-switch {
        gap: .35rem;
    }

    .stats-trend-focus {
        font-size: .76rem;
        line-height: 1.3;
    }

    .stats-trend-toolbar {
        align-items: stretch;
    }

    .worker-report-identity {
        align-items: flex-start;
    }

    .worker-report-admin-search {
        align-items: stretch;
    }

    .worker-report-result-btn {
        flex-direction: column;
        align-items: flex-start;
    }

    .worker-report-donut {
        width: 160px;
        height: 160px;
    }
}

.stats-trend-subtabs {
    margin-top: .45rem;
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    padding: .2rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 94%, var(--accent-soft));
    border: 1px solid color-mix(in srgb, var(--border-default) 82%, var(--accent-border));
}

.stats-trend-subtabs .btn.active {
    border-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-default));
    background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-surface));
}

.admin-control-nav {
    margin: .55rem 0 .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.admin-control-pane {
    display: grid;
    gap: .9rem;
}

.admin-control-overview {
    display: grid;
    gap: .9rem;
}

.admin-control-metric-group {
    display: grid;
    gap: .55rem;
}

.admin-control-metric-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.admin-control-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.admin-control-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.admin-control-quick-actions .btn {
    min-width: 180px;
    justify-content: center;
}

.admin-collections-home {
    border: 1px solid color-mix(in srgb, var(--border-default) 82%, var(--accent-border));
    background: color-mix(in srgb, var(--bg-elevated) 96%, var(--accent-soft));
}

.danger-zone {
    border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--border-default));
    background: color-mix(in srgb, var(--danger) 7%, var(--bg-elevated));
}

.stats-trend-categories {
    margin-top: .45rem;
    display: flex;
    gap: .45rem .65rem;
    flex-wrap: wrap;
    padding: .55rem .7rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elevated) 96%, var(--accent-soft));
    border: 1px solid color-mix(in srgb, var(--border-default) 84%, var(--accent-border));
}

.stats-trend-cat-item {
    font-size: .78rem;
    padding: .22rem .45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
    color: var(--text-primary);
}

.stats-trend-dot {
    width: .62rem;
    height: .62rem;
    border-radius: 999px;
    background: var(--trend-color, #64748b);
    display: inline-block;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-surface) 75%, transparent);
}

.stats-trend-chart-wrap {
    margin-top: .55rem;
    border: 1px solid var(--border-default);
    border-radius: 16px;
    padding: .6rem .55rem .36rem;
    overflow: hidden;
    overflow-y: visible;
    position: relative;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--bg-surface) 36%, transparent), transparent 24%),
        linear-gradient(180deg, color-mix(in srgb, var(--chart-bg) 98%, var(--accent-soft)), var(--chart-bg));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 42%, transparent);
}

.stats-trend-svg {
    width: 100%;
    min-width: 0;
    height: 388px;
}

.stats-trend-hover-capture {
    cursor: crosshair;
    touch-action: none;
}

.stats-trend-series path {
    transition: stroke-width .14s ease;
}

.stats-trend-series:hover path {
    stroke-width: 2.8;
}

.stats-trend-cursor {
    pointer-events: none;
}

.stats-trend-hover-dot {
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .28));
}

.stats-trend-tooltip {
    position: absolute;
    z-index: 8;
    pointer-events: none;
    min-width: 170px;
    max-width: 260px;
    padding: .44rem .54rem;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: var(--chart-tooltip-bg);
    color: var(--chart-tooltip-text);
    box-shadow: var(--shadow-strong);
    font-size: .74rem;
}

.stats-trend-tooltip-title {
    font-weight: 800;
    margin-bottom: .25rem;
}

.stats-trend-tooltip-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .32rem;
    line-height: 1.18;
    margin-top: .15rem;
}

.stats-trend-tooltip-cat {
    opacity: .92;
}

.stats-trend-tooltip-extra {
    margin-top: .28rem;
    padding-top: .24rem;
    border-top: 1px solid color-mix(in srgb, var(--border-default) 72%, var(--accent-border));
}

.stats-reembarked-table-wrap {
    margin-top: .7rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border-default) 82%, #f59e0b 18%);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 96%, #fff7ed 4%), var(--bg-surface));
}

.stats-reembarked-table-wrap .stats-table th {
    background: color-mix(in srgb, var(--table-head-bg) 72%, #fff7ed);
}

.stats-reembarked-table-wrap .stats-table td,
.stats-reembarked-table-wrap .stats-table th {
    white-space: nowrap;
}

.stats-reembarked-table-wrap .stats-table td:nth-child(2),
.stats-reembarked-table-wrap .stats-table th:nth-child(2),
.stats-reembarked-table-wrap .stats-table td:nth-child(6),
.stats-reembarked-table-wrap .stats-table th:nth-child(6) {
    white-space: normal;
}

.stats-trend-svg text {
    font-size: 10.5px;
    fill: var(--chart-axis);
    pointer-events: none;
}

body.dark .stats-trend-chart-wrap {
    border-color: var(--border-default);
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.06), transparent 24%),
        linear-gradient(180deg, color-mix(in srgb, var(--chart-bg) 96%, #10213a), color-mix(in srgb, var(--chart-bg) 100%, #0b1729));
}

body.dark .stats-trend-toolbar,
body.dark .stats-trend-subtabs,
body.dark .stats-trend-categories,
body.dark .presence-panel {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 94%, #10213a), color-mix(in srgb, var(--bg-surface) 98%, #0b1729));
    border-color: var(--border-default);
}

body.dark .stats-table td:first-child,
body.dark .stats-table th:first-child {
    background: var(--table-sticky-bg);
    box-shadow: 1px 0 0 var(--border-default);
}

body.dark .ranking-port-card {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, .06), transparent 24%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--card) 88%, var(--ranking-port-color, #1d4ed8) 12%),
            color-mix(in srgb, var(--card) 92%, #0f172a));
    border-color: color-mix(in srgb, rgba(148, 163, 184, .22) 68%, var(--ranking-port-color, #1d4ed8));
}

body.dark .ranking-port-card > .item {
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .06));
}

body.dark .stats-reembarked-table-wrap {
    border-color: rgba(245, 158, 11, .24);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 96%, rgba(245, 158, 11, .06)), color-mix(in srgb, var(--bg-surface) 100%, transparent));
}

body.dark .stats-reembarked-table-wrap .stats-table th {
    background: color-mix(in srgb, var(--table-head-bg) 76%, rgba(245, 158, 11, .12));
}

body.dark .stats-trend-cat-item {
    background: color-mix(in srgb, var(--bg-interactive) 78%, transparent);
}

#statsTrendPanel,
#adminStatsTrendPanel {
    margin-top: 10px;
}

.ranking-name-cell {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.ranking-name-mainline {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
}

.ranking-cadastro-name {
    color: #0080FF;
    font-weight: 800;
}

.ranking-skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.ranking-skill-badge {
    display: inline-flex;
    align-items: center;
    padding: .1rem .38rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    color: #475569;
    font-size: .66rem;
    font-weight: 700;
}

@keyframes fade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 880px) {
    .inline-form { grid-template-columns: 1fr; }
    .admin-create-grid { grid-template-columns: 1fr; }
    .admin-ogmo-grid { grid-template-columns: 1fr; }
    .scheduler-grid { grid-template-columns: 1fr; }
    .stats-admin-grid { grid-template-columns: 1fr; }
    .management-split { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
    .status-footer { grid-template-columns: 1fr; }
    .topbar { flex-direction: column; align-items: flex-start; gap: .65rem; }
    .topbar-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
    .module-tools { width: 100%; justify-content: flex-start; }
    .modal-card, .modal-lg { width: 96vw; }
    .tabs,
    .panel-tabs,
    .inner-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .25rem;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .tabs .tab-btn,
    .panel-tabs .tab-btn,
    .inner-tabs .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .status-card {
        flex-wrap: wrap;
    }
    .container,
    .management-pane,
    .credentials-pane,
    .schedule-pane,
    .queue-pane,
    .sub-card,
    .inline-form > *,
    .admin-create-grid > *,
    .admin-ogmo-grid > *,
    .scheduler-grid > *,
    .stats-admin-grid > * {
        min-width: 0;
        max-width: 100%;
    }
    .admin-control-metric-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .admin-control-quick-actions .btn {
        min-width: 0;
        width: 100%;
    }
    #adminStatsConfigMeta,
    #credentialSummary,
    .schedule-last-run,
    .queue-pane .item,
    .management-pane .item,
    .credentials-pane .item,
    .compact-disclosure,
    .compact-disclosure > div,
    .timeline-compact,
    .log-box,
    .modal-card {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 640px) {
    .topbar {
        padding: .6rem .7rem;
        gap: .55rem;
    }
    .brand-wrap {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: .42rem;
        min-width: 0;
    }
    .brand {
        width: 100%;
        min-width: 0;
    }
    .brand {
        font-size: 1.2rem;
        gap: .5rem;
    }
    .brand-logo {
        width: 46px;
        height: 46px;
    }
    .brand-subtitle {
        display: none;
    }
    .module-switch {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .35rem;
        min-width: 0;
    }
    .module-toggle {
        width: 100%;
        text-align: center;
        padding: .46rem .38rem;
        font-size: .82rem;
    }
    .topbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .35rem;
        min-width: 0;
    }
    .topbar-actions .btn {
        width: 100%;
        font-size: .8rem;
        padding: .45rem .42rem;
    }
    #authStatus {
        grid-column: 1 / -1;
        font-size: .82rem;
    }
    .container {
        width: min(100%, calc(100% - (var(--page-gutter-mobile) * 2)));
        margin: .75rem auto 1rem;
        padding: 0;
        max-width: 100%;
    }
    .card {
        border-radius: 13px;
        padding: var(--card-padding-mobile);
        overflow: hidden;
    }
    .sub-card {
        margin: .52rem 0;
    }
    .tab-content {
        min-width: 0;
    }
    .item {
        padding: .66rem;
    }
    .item-top {
        align-items: flex-start;
        flex-direction: column;
        gap: .18rem;
    }
    .muted,
    .compact-line {
        font-size: .74rem;
        line-height: 1.22;
    }
    .queue-pane .item,
    .management-pane .item,
    .credentials-pane .item,
    .compact-disclosure > div,
    .timeline-compact,
    .log-line,
    .log-time,
    .wall-log-line-message,
    .wall-log-line-detail {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .stats-selection-grid .field-stack,
    .field-stack-compact {
        min-width: 0;
        width: 100%;
    }
    .stats-table,
    .data-table {
        font-size: .74rem;
    }
    .stats-table {
        min-width: 480px;
    }
    .stats-table-compact {
        min-width: 640px;
    }
    .ranking-table {
        min-width: 680px;
    }
    .stats-reembarked-table-wrap .stats-table {
        min-width: 640px;
    }
    .stats-table th {
        white-space: nowrap;
        text-align: center;
    }
    .stats-table th,
    .stats-table td,
    .data-table th,
    .data-table td {
        padding: .16rem .14rem;
        line-height: 1.08;
    }
    .stats-table td:first-child,
    .stats-table th:first-child {
        position: static;
        left: auto;
        z-index: auto;
        box-shadow: none;
    }
    .stats-selection-panel {
        padding: .58rem .56rem;
    }
    .stats-selection-grid {
        gap: .45rem;
    }
    .tabs,
    .panel-tabs,
    .inner-tabs,
    .ranking-view-buttons {
        gap: .38rem;
    }
    .offer-activity-filter,
    .presence-view-switch,
    .presence-sublist-switch,
    .stats-trend-subtabs,
    .stats-trend-categories,
    .escalados-category-pills,
    .harbor-port-filter,
    .ranking-view-buttons {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
        align-items: stretch;
        justify-items: stretch;
    }
    .offer-activity-filter .btn,
    .presence-view-switch .btn,
    .presence-sublist-switch .btn,
    .stats-trend-subtabs .btn,
    .stats-trend-categories .stats-trend-cat-item,
    .escalados-category-pills .btn,
    .harbor-port-filter .btn,
    .ranking-view-buttons .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .presence-sections-grid {
        grid-template-columns: 1fr;
        gap: .4rem;
    }
    .presence-panels-stack,
    .list {
        gap: .42rem;
    }
    .offer-activity-block,
    .presence-panel,
    .ranking-view-block {
        padding: .62rem .64rem;
    }
    .offer-activity-block .item-top,
    .presence-panel .item-top,
    .ranking-view-block .item-top {
        gap: .14rem;
    }
    .escalados-filter-bar {
        display: grid;
        gap: .42rem;
        align-items: stretch;
        justify-items: stretch;
    }
    .escalados-category-pills {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-self: stretch;
    }
    .escalados-check {
        width: 100%;
        justify-content: flex-start;
    }
    .presence-sections-grid .table-wrap {
        overflow-x: auto;
    }
    .table-wrap {
        margin-top: .42rem;
        border-radius: 10px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        border: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent-border));
        background: color-mix(in srgb, var(--card) 98%, var(--accent-soft));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.32);
        width: 100%;
        max-width: 100%;
    }

    .harbor-active-table {
        min-width: 560px;
        table-layout: auto;
        font-size: .69rem;
    }
    .harbor-active-table th,
    .harbor-active-table td {
        padding: .2rem .22rem;
        overflow-wrap: normal;
        word-break: normal;
    }
    .harbor-active-table td:nth-child(2) a {
        overflow-wrap: normal;
        word-break: normal;
        hyphens: auto;
    }
    .harbor-active-table th:nth-child(5),
    .harbor-active-table td:nth-child(5),
    .harbor-active-table th:nth-child(6),
    .harbor-active-table td:nth-child(6),
    .harbor-active-table th:nth-child(7),
    .harbor-active-table td:nth-child(7),
    .harbor-active-table th:nth-child(8),
    .harbor-active-table td:nth-child(8) {
        display: none;
    }
    .harbor-mobile-meta {
        display: block;
        margin-top: .18rem;
        font-size: .66rem;
        line-height: 1.2;
        opacity: .9;
    }

    .stats-comparison-table {
        min-width: 0;
        width: 100%;
    }
    .stats-summary-compact .stats-table {
        min-width: 0;
        width: 100%;
        font-size: .66rem;
    }
    .stats-summary-compact .stats-table th,
    .stats-summary-compact .stats-table td {
        padding: .12rem .14rem;
        line-height: 1.08;
    }

    .presence-merged-table-wrap .stats-table {
        min-width: 0;
        width: 100%;
        font-size: .60rem;
    }
    .presence-merged-table-wrap .stats-table th,
    .presence-merged-table-wrap .stats-table td {
        padding: .12rem;
        line-height: 1.01;
    }
    .presence-merged-risk-table th:nth-child(1),
    .presence-merged-risk-table td:nth-child(1),
    .presence-merged-registro-table th:nth-child(1),
    .presence-merged-registro-table td:nth-child(1) {
        min-width: 38px;
        width: 38px;
    }
    .presence-merged-risk-table th:nth-child(2),
    .presence-merged-risk-table td:nth-child(2),
    .presence-merged-registro-table th:nth-child(2),
    .presence-merged-registro-table td:nth-child(2) {
        min-width: 0;
        width: auto;
    }
    .presence-merged-risk-table th:nth-child(n+3),
    .presence-merged-risk-table td:nth-child(n+3),
    .presence-merged-registro-table th:nth-child(n+3),
    .presence-merged-registro-table td:nth-child(n+3) {
        min-width: 34px;
        width: 34px;
        white-space: nowrap;
        text-align: center;
    }
    .presence-merged-risk-table td:nth-child(2),
    .presence-merged-risk-table th:nth-child(2),
    .presence-merged-registro-table td:nth-child(2),
    .presence-merged-registro-table th:nth-child(2) {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .presence-merged-risk-table th:last-child,
    .presence-merged-risk-table td:last-child {
        min-width: 62px;
    }
    .presence-risk-pill {
        min-width: 2.9rem;
        padding: .14rem .32rem;
        font-size: .66rem;
    }

    .presence-lines-wrap {
        border-radius: 9px;
        overflow: visible;
        background: transparent;
        border-style: dashed;
    }
    .offer-activity-summary,
    .ranking-toolbar,
    .harbor-toolbar {
        gap: .35rem;
    }
    .harbor-toolbar {
        margin-top: .42rem;
    }
    .harbor-port-filter .btn,
    .offer-activity-filter .btn,
    .presence-view-switch .btn,
    .presence-sublist-switch .btn,
    .ranking-view-buttons .btn {
        padding: .34rem .48rem;
    }
    .presence-line {
        font-size: .78rem;
        padding: .28rem .36rem;
        line-height: 1.18;
    }
    .probability-summary {
        gap: .3rem;
    }
    .probability-summary span {
        font-size: .7rem;
        padding: .15rem .42rem;
    }
    .probability-card-top {
        align-items: flex-start;
    }
    .probability-highlight {
        display: grid;
        grid-template-columns: 1fr;
        padding: .72rem .74rem;
    }
    .probability-highlight-side {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .probability-highlight-name {
        font-size: .92rem;
    }
    .probability-highlight-score {
        font-size: 1.05rem;
    }
    .probability-mobile-list {
        display: grid;
    }
    .probability-mobile-grid {
        grid-template-columns: 1fr;
        gap: .18rem;
        font-size: .72rem;
    }
    .probability-table-wrap {
        display: none;
    }

    .escalados-table {
        min-width: 540px;
    }
    .escalados-table th:nth-child(1),
    .escalados-table th:nth-child(3),
    .escalados-table th:nth-child(4),
    .escalados-table th:nth-child(5),
    .escalados-table th:nth-child(6),
    .escalados-table th:nth-child(7),
    .escalados-table td:nth-child(1),
    .escalados-table td:nth-child(3),
    .escalados-table td:nth-child(4),
    .escalados-table td:nth-child(5),
    .escalados-table td:nth-child(6),
    .escalados-table td:nth-child(7) {
        white-space: nowrap;
    }
    .escalados-table td:nth-child(2) {
        white-space: normal;
        overflow-wrap: anywhere;
        min-width: 160px;
    }
    .escalados-table th:nth-child(4),
    .escalados-table td:nth-child(4),
    .escalados-table th:nth-child(5),
    .escalados-table td:nth-child(5) {
        display: none;
    }
    .escalados-table .stats-group-separator td {
        padding: .2rem .28rem;
        line-height: 1.1;
        font-size: .66rem;
    }

    .ranking-table td:nth-child(2) {
        min-width: 132px;
    }
    .ranking-table th,
    .ranking-table td {
        padding: .28rem .3rem;
    }
    .ranking-table th:nth-child(3),
    .ranking-table td:nth-child(3) {
        min-width: 88px;
    }
    .ranking-name-cell span {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .stats-summary-compact {
        font-size: .76rem;
    }
    .stats-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stats-trend-svg {
        min-width: 0;
        height: 238px;
    }
    .stats-trend-chart-wrap {
        padding: .35rem .25rem .22rem;
        border-radius: 14px;
    }
    .stats-trend-categories {
        padding: .38rem .42rem;
        gap: .32rem;
    }
    .stats-trend-cat-item {
        font-size: .7rem;
        padding: .2rem .28rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .32rem;
    }
    .stats-trend-cat-item input[type="checkbox"] {
        flex: 0 0 auto;
    }
    .btn {
        padding: .5rem .65rem;
    }
    .status-footer {
        padding: .55rem .55rem .7rem;
        gap: .5rem;
    }
    .status-card {
        border-radius: 10px;
        padding: .45rem .55rem;
        gap: .45rem;
    }
    #overviewStats.stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .4rem;
    }
    #adminMetrics.stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .4rem;
    }
    #overviewStats .metric {
        border-radius: 10px;
        padding: .42rem .38rem;
    }
    #adminMetrics .metric {
        border-radius: 10px;
        padding: .42rem .38rem;
    }
    #overviewStats .metric span {
        font-size: .64rem;
        line-height: 1.08;
    }
    #adminMetrics .metric span {
        font-size: .64rem;
        line-height: 1.08;
    }
    #overviewStats .metric strong {
        margin-top: .16rem;
        font-size: 1.02rem;
    }
    #adminMetrics .metric strong {
        margin-top: .16rem;
        font-size: 1.02rem;
    }
    .ranking-view-btn {
        min-width: 0;
        width: 100%;
        min-height: 56px;
    }
    .ranking-section-buttons {
        grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    }
    .ranking-subsection-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ranking-subsection-buttons[data-count="1"] {
        grid-template-columns: 1fr;
    }
    .ranking-view-btn-title,
    .ranking-view-btn-desc,
    .ranking-view-btn {
        text-align: center;
    }
    .offer-activity-filter .btn,
    .escalados-category-pills .btn,
    .presence-view-switch .btn,
    .presence-sublist-switch .btn,
    .ranking-view-buttons .btn,
    .stats-trend-subtabs .btn,
    .harbor-port-filter .btn {
        min-height: 44px;
        padding: .38rem .42rem;
    }
    .stats-trend-subtabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stats-trend-svg text {
        font-size: 11px;
    }
    .escalados-activity-head {
        display: grid;
        gap: .18rem;
    }
    .escalados-activity-meta {
        width: 100%;
        justify-content: space-between;
        gap: .38rem;
    }
    .escalados-activity-meta .btn-icon {
        flex: 0 0 auto;
    }
    .stats-reembarked-table-wrap .stats-table {
        min-width: 520px;
        font-size: .66rem;
    }
    .stats-reembarked-table-wrap .stats-table th,
    .stats-reembarked-table-wrap .stats-table td {
        padding: .16rem .18rem;
        line-height: 1.04;
    }
    .harbor-toolbar {
        position: sticky;
        top: 0;
        z-index: 4;
        padding-top: .2rem;
        background: color-mix(in srgb, var(--card) 96%, var(--bg));
    }
}

@media (max-width: 420px) {
    .tabs {
        gap: .32rem;
    }
    .tab-btn {
        padding: .48rem .58rem;
        font-size: .78rem;
    }
    .topbar-actions {
        grid-template-columns: 1fr;
    }
    .module-switch {
        grid-template-columns: 1fr;
    }
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #overviewStats.stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #adminMetrics.stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .metric {
        border-radius: 10px;
        padding: .55rem .5rem;
    }
    .metric span {
        font-size: .72rem;
    }
    .metric strong {
        margin-top: .24rem;
        font-size: 1.15rem;
    }
    .stats-trend-toolbar {
        align-items: flex-start;
    }
    .stats-trend-cat-item {
        width: 100%;
    }
}

body.booting .topbar,
body.booting .container,
body.booting .status-footer {
    visibility: visible;
    pointer-events: none;
    opacity: .18;
    transition: opacity .2s ease;
}

body.booting #appPanel,
body.booting #authCard {
    visibility: hidden;
}

.boot-shell {
    display: none;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 1.5rem;
    align-items: center;
    justify-content: center;
}

body.booting .boot-shell {
    display: flex;
}

.boot-card {
    display: grid;
    gap: 1rem;
    width: min(100%, 920px);
    padding: 1.2rem;
    border: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent-border) 20%);
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 82%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, white 8%), var(--card));
    box-shadow: 0 16px 36px rgba(0, 17, 40, .08);
}

.boot-card-auth {
    width: min(100%, 420px);
    justify-items: center;
    text-align: center;
    padding: 1.4rem 1.3rem;
}

.boot-card-auth p {
    max-width: 28ch;
}

.boot-loader {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.boot-loader span {
    width: .72rem;
    height: .72rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
    animation: boot-bounce 1.05s ease-in-out infinite;
}

.boot-loader span:nth-child(2) {
    animation-delay: .12s;
}

.boot-loader span:nth-child(3) {
    animation-delay: .24s;
}

.boot-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .45rem;
    padding: .36rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--accent-border);
    background: var(--accent-soft);
    color: var(--text);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.boot-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .8rem;
}

#loginBillingActions {
    margin-top: .35rem;
}

.subscription-card {
    border: 1px solid rgba(28, 72, 112, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 251, 255, 0.92));
}

.subscription-card-normal {
    border-color: color-mix(in srgb, var(--accent-border) 65%, var(--line) 35%);
}

.subscription-card-attention {
    border-color: rgba(206, 148, 39, 0.38);
    background: linear-gradient(135deg, rgba(255, 251, 231, 0.98), rgba(255, 255, 255, 0.94));
}

.subscription-card-urgent,
.subscription-card-expired {
    border-width: 2px;
}

.subscription-card-urgent {
    border-color: rgba(201, 102, 31, 0.42);
    background: linear-gradient(135deg, rgba(255, 242, 233, 0.99), rgba(255, 255, 255, 0.94));
}

.subscription-card-expired {
    border-color: rgba(177, 63, 63, 0.38);
    background: linear-gradient(135deg, rgba(255, 238, 238, 0.99), rgba(255, 255, 255, 0.95));
}

.subscription-emphasis {
    margin-top: .45rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.subscription-note {
    margin-top: .55rem;
    padding: .75rem .9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px dashed rgba(28, 72, 112, 0.16);
    color: var(--muted);
}

.worker-alerts-card {
    border: 1px solid rgba(22, 143, 99, 0.2);
    background: linear-gradient(135deg, rgba(235, 250, 242, 0.92), rgba(255, 255, 255, 0.96));
}

.worker-alerts-list {
    gap: .6rem;
}

.worker-alert-card {
    border: 1px solid rgba(22, 143, 99, 0.12);
    background: rgba(255, 255, 255, 0.78);
}

.worker-alert-card.is-unread {
    border-left: 4px solid color-mix(in srgb, var(--brand) 78%, #14532d);
}

.worker-alert-card.is-read {
    opacity: .96;
}

.worker-alert-card.is-nao-embarcado {
    border-color: rgba(201, 102, 31, 0.26);
}

.worker-alert-meta {
    margin-top: .55rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .35rem .7rem;
    font-size: .8rem;
    color: var(--muted);
}

.current-user-cell {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
}

.current-user-text {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 .18rem;
    border-radius: .24rem;
    background:
        linear-gradient(
            180deg,
            transparent 0,
            transparent 28%,
            rgba(250, 234, 88, .84) 28%,
            rgba(250, 234, 88, .84) 88%,
            transparent 88%,
            transparent 100%
        );
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.current-user-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .08rem .34rem;
    border-radius: 999px;
    background: rgba(250, 234, 88, .96);
    border: 1px solid rgba(202, 138, 4, .32);
    color: #854d0e;
    font-size: .64rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
}

.current-user-row td {
    box-shadow:
        inset 0 0 0 999px rgba(250, 234, 88, .10),
        inset 0 2px 0 rgba(202, 138, 4, .14),
        inset 0 -2px 0 rgba(202, 138, 4, .12);
}

.current-user-row td:first-child {
    box-shadow:
        inset 6px 0 0 rgba(234, 179, 8, .98),
        inset 0 0 0 999px rgba(250, 234, 88, .10),
        inset 0 2px 0 rgba(202, 138, 4, .14),
        inset 0 -2px 0 rgba(202, 138, 4, .12);
}

.current-user-row td:last-child {
    box-shadow:
        inset -1px 0 0 rgba(202, 138, 4, .16),
        inset 0 0 0 999px rgba(250, 234, 88, .10),
        inset 0 2px 0 rgba(202, 138, 4, .14),
        inset 0 -2px 0 rgba(202, 138, 4, .12);
}

.presence-merged-risk-table .current-user-row td:not(.presence-risk-cell-empty),
.ranking-table .current-user-row td:not(.ranking-heat-cell) {
    background-color: rgba(250, 234, 88, .16);
}

.escalados-table .current-user-row td {
    position: relative;
}

.admin-billing-readiness {
    margin-bottom: 14px;
}

.billing-readiness-card {
    border: 1px solid var(--accent-border);
    background:
        radial-gradient(circle at top right, rgba(22, 143, 99, 0.12), transparent 44%),
        linear-gradient(135deg, rgba(235, 250, 242, 0.92), rgba(255, 255, 255, 0.9));
}

.billing-readiness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.billing-check {
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(28, 72, 112, 0.12);
    background: rgba(255, 255, 255, 0.7);
}

.billing-check span {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.billing-check.ok span {
    color: #158c5c;
}

.billing-check.missing span {
    color: #c45a18;
}

.admin-billing-ops {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(28, 72, 112, 0.12);
}

.billing-ops-user,
.billing-event-item {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(28, 72, 112, 0.1);
}

.billing-ops-user .item-top {
    align-items: flex-start;
}

.billing-ops-user .row {
    gap: .45rem;
}

.billing-ops-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .55rem;
    margin-top: .75rem;
}

.presence-merged-registro-table {
    table-layout: fixed;
    min-width: 1180px;
}

.presence-merged-registro-table th,
.presence-merged-registro-table td {
    white-space: nowrap;
    vertical-align: top;
}

.presence-merged-registro-table th:nth-child(2),
.presence-merged-registro-table td:nth-child(2) {
    min-width: 210px;
    white-space: normal;
}

.presence-registro-dynamic-head {
    min-width: 108px;
    max-width: 132px;
}

.presence-registro-dynamic-head .presence-sort-btn {
    display: inline-block;
    max-width: 122px;
    line-height: 1.1;
    white-space: normal;
}

.presence-registro-dynamic-cell {
    max-width: 122px;
    white-space: normal;
    line-height: 1.2;
    word-break: break-word;
}

.backup-meta-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.billing-event-item .mono {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 12px;
}

.danger-text {
    color: #b13f3f;
    font-weight: 600;
}

.skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: color-mix(in srgb, var(--line) 70%, var(--card) 30%);
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-pill {
    grid-column: span 3;
    min-height: 2.7rem;
    border-radius: 999px;
}

.skeleton-card {
    grid-column: span 4;
    min-height: 8.5rem;
}

.workspace-switch {
    display: grid;
    gap: .35rem;
}

.workspace-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.workspace-hero {
    display: grid;
    gap: .45rem;
    margin-bottom: 1rem;
    padding: 1.15rem 1.15rem 1rem;
    border: 1px solid color-mix(in srgb, var(--line) 84%, var(--accent-border) 16%);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 36%),
        linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, white 8%), var(--card));
}

.workspace-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .28rem .6rem;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--text-primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.workspace-title {
    margin: 0;
    font-size: clamp(1.65rem, 2.4vw, 2.35rem);
    line-height: 1.04;
}

.workspace-description {
    margin: 0;
    max-width: 70ch;
    color: var(--text-secondary);
    line-height: 1.5;
}

.workspace-status-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .65rem;
    margin: .75rem 0 1rem;
}

.workspace-status-card {
    border: 1px solid var(--border-default);
    border-radius: 14px;
    padding: .8rem .9rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, #ffffff), var(--bg-surface));
    display: grid;
    gap: .22rem;
}

.workspace-status-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 800;
}

.workspace-status-value {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--text-primary);
}

.workspace-status-meta {
    font-size: .84rem;
    color: var(--muted);
    line-height: 1.35;
}

.workspace-status-card-ok {
    border-color: rgba(22, 143, 99, 0.2);
    background: linear-gradient(180deg, rgba(235, 250, 242, 0.92), #fff);
}

.workspace-status-card-attention {
    border-color: rgba(206, 148, 39, 0.32);
    background: linear-gradient(180deg, rgba(255, 251, 231, 0.96), #fff);
}

.workspace-status-card-urgent {
    border-color: rgba(201, 102, 31, 0.34);
    background: linear-gradient(180deg, rgba(255, 242, 233, 0.98), #fff);
}

.workspace-status-card-blocked {
    border-color: rgba(177, 63, 63, 0.34);
    background: linear-gradient(180deg, rgba(255, 238, 238, 0.98), #fff);
}

.section-status,
.inline-feedback {
    margin: .8rem 0 0;
    padding: .75rem .9rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 88%, var(--accent-soft) 12%);
    color: var(--text);
}

.section-status.hidden,
.inline-feedback.hidden {
    display: none;
}

.section-status[data-kind="loading"],
.inline-feedback.is-info {
    border-color: #91b8da;
    background: #f3f9ff;
    color: #18456a;
}

.section-status[data-kind="error"],
.inline-feedback.is-error {
    border-color: #e1a4b2;
    background: #fff5f7;
    color: #8f1f3f;
}

.section-status[data-kind="success"],
.inline-feedback.is-success {
    border-color: #9fd2b3;
    background: #f3fff7;
    color: #21613c;
}

.section-status[data-kind="empty"] {
    border-style: dashed;
    color: var(--muted);
}

.tab-content[data-state="loading"] .list,
.tab-content[data-state="loading"] .stats-grid {
    opacity: .45;
    pointer-events: none;
}

.toast {
    max-width: min(92vw, 360px);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .22);
}

.modal-overlay {
    padding: 1rem;
}

.modal-overlay:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-card:focus-visible {
    outline: 2px solid var(--accent-border);
    outline-offset: 3px;
}

.wall-log-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.wall-log-drawer.hidden {
    display: none;
}

.wall-log-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 16, 27, 0.38);
    backdrop-filter: blur(2px);
}

.wall-log-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(720px, 100vw);
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: .75rem;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(12, 18, 26, 0.98), rgba(8, 12, 19, 0.98));
    border-left: 1px solid rgba(141, 184, 218, 0.24);
    box-shadow: -18px 0 42px rgba(0, 0, 0, 0.28);
}

.wall-log-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    color: #eef5ff;
}

.wall-log-drawer-header h3 {
    margin: 0 0 .2rem;
    color: #f8fbff;
}

.wall-log-drawer-header .muted {
    color: #a9bfd8;
}

.wall-log-terminal {
    overflow: auto;
    border-radius: 18px;
    border: 1px solid rgba(141, 184, 218, 0.18);
    background:
        linear-gradient(180deg, rgba(14, 21, 31, 0.98), rgba(9, 14, 21, 0.98));
    padding: .85rem;
    display: grid;
    gap: .55rem;
    font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.wall-log-line {
    display: grid;
    grid-template-columns: 84px minmax(88px, 132px) 1fr;
    gap: .65rem;
    align-items: start;
    padding: .55rem .65rem;
    border-radius: 12px;
    border: 1px solid rgba(122, 159, 191, 0.14);
    background: rgba(255, 255, 255, 0.02);
    color: #deebfa;
    line-height: 1.45;
}

.wall-log-line-time {
    color: #8eb2d4;
    font-size: .82rem;
    white-space: nowrap;
}

.wall-log-line-headline {
    color: #f5fbff;
    font-weight: 700;
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.wall-log-line-message {
    color: #deebfa;
    font-size: .9rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wall-log-line-detail {
    margin-top: .12rem;
    color: #9db4cb;
    font-size: .82rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wall-log-line.tone-alert {
    border-color: rgba(224, 182, 66, 0.24);
    background: rgba(255, 212, 102, 0.06);
}

.wall-log-line.tone-running,
.wall-log-line.tone-info {
    border-color: rgba(90, 153, 217, 0.2);
}

.wall-log-line.tone-success {
    border-color: rgba(76, 193, 126, 0.24);
    background: rgba(72, 180, 118, 0.06);
}

.wall-log-line.tone-failed,
.wall-log-line.tone-error {
    border-color: rgba(225, 112, 112, 0.24);
    background: rgba(219, 85, 85, 0.07);
}

.wall-log-empty {
    padding: 1rem;
    border-radius: 14px;
    border: 1px dashed rgba(141, 184, 218, 0.22);
    color: #a9bfd8;
    text-align: center;
}

@media (max-width: 900px) {
    .wall-log-drawer-panel {
        width: 100vw;
    }

    .wall-log-line {
        grid-template-columns: 1fr;
    }
}

body.dark .boot-card,
body.dark .workspace-hero {
    background:
        radial-gradient(circle at top right, rgba(141, 115, 255, .14), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 98%, #13243d), color-mix(in srgb, var(--bg-surface) 100%, #0d1828));
    border-color: var(--border-strong);
    box-shadow: 0 18px 36px rgba(2, 8, 23, .24);
}

body.dark .workspace-status-card {
    border-color: var(--border-strong);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 96%, #13243d), color-mix(in srgb, var(--bg-surface) 100%, #0c1728));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

body.dark .workspace-label,
body.dark .workspace-status-label {
    color: var(--text-secondary);
}

body.dark .workspace-description,
body.dark .workspace-status-meta {
    color: var(--text-muted);
}

body.dark .workspace-eyebrow {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 84%, var(--accent-soft)), color-mix(in srgb, var(--bg-interactive) 92%, var(--accent-soft)));
    border-color: color-mix(in srgb, var(--border-strong) 70%, var(--accent-border));
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.dark .section-status[data-kind="loading"],
body.dark .inline-feedback.is-info {
    background: #142a44;
    border-color: #335b84;
    color: #d9ecff;
}

body.dark .section-status[data-kind="error"],
body.dark .inline-feedback.is-error {
    background: #3f1c28;
    border-color: #904258;
    color: #ffd7df;
}

body.dark .section-status[data-kind="success"],
body.dark .inline-feedback.is-success {
    background: #163324;
    border-color: #32684a;
    color: #dbffe6;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@keyframes boot-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .52;
    }
    40% {
        transform: translateY(-7px);
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .workspace-hero {
        padding: 1rem;
    }

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

    .skeleton-pill {
        grid-column: span 3;
    }

    .skeleton-card {
        grid-column: span 6;
    }
}

@media (max-width: 640px) {
    .boot-shell {
        width: min(100%, calc(100% - 1rem));
        padding: 0 .5rem;
    }

    .workspace-switch {
        width: 100%;
    }

    .module-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .workspace-description {
        font-size: .95rem;
    }

    .section-status,
    .inline-feedback {
        font-size: .92rem;
    }
}