@font-face {
    font-family: "Inter";
    src: url("/static/assets/inter.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light;
    --terminal-bg: #0d1320;
    --terminal-ink: #dbeafe;
    --danger: #c2410c;
    --control-height: 36px;
    --control-radius: 6px;
    --control-padding: 10px;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}
.theme-blue {
    --accent: #2563eb;
    --accent-ink: #123b8d;
    --accent-soft: #eaf2ff;
}
.theme-orange {
    --accent: #ea580c;
    --accent-ink: #7c2d12;
    --accent-soft: #fff3e8;
}
.theme-green {
    --accent: #16a34a;
    --accent-ink: #14532d;
    --accent-soft: #eafaf1;
}
.theme-navy {
    --accent: #1c3885;
    --accent-ink: #172554;
    --accent-soft: #e8eefc;
}
.theme-yellow {
    --accent: #ca8a04;
    --accent-ink: #713f12;
    --accent-soft: #fff7cc;
}
.theme-dark {
    --accent: #111827;
    --accent-ink: #020617;
    --accent-soft: #e5e7eb;
}
.theme-products {
    --accent: #4f6fd8;
    --accent-ink: #273f91;
    --accent-soft: #edf1ff;
}
* {
    box-sizing: border-box;
}
html,
body {
    min-height: 100%;
}
body[data-color-mode="dark"] {
    color-scheme: dark;
    --bg: #0f141b;
    --ink: #edf2f7;
    --muted: #a8b3c2;
    --line: #263241;
    --paper: #151c26;
    --soft: #1e2733;
    --accent-ink: color-mix(in srgb, var(--accent) 38%, #f8fafc);
    --accent-soft: color-mix(in srgb, var(--accent) 8%, #151c26);
    --field: #101821;
    --terminal-bg: #080d18;
    --terminal-ink: #e4ecfb;
    --shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}
html {
    scroll-behavior: smooth;
}
button,
textarea,
input {
    font: inherit;
}
a {
    color: inherit;
    text-decoration: none;
}
.brand-lockup strong,
.brand-lockup small {
    display: block;
}
.brand-lockup small {
    margin-top: 2px;
    color: #9ca3af;
    font-size: 11px;
}
.rail-toggle {
    border: 1px solid rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.rail-toggle:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.1);
}
.module-nav {
    display: grid;
    align-content: start;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.nav-link:hover {
    transform: translateX(2px);
}
.nav-link.is-active {
    cursor: default;
    pointer-events: none;
}
.nav-line {
    background: var(--accent);
}
.side-footer {
    font-size: 12px;
}
.side-footer a {
    width: fit-content;
    border-bottom: 2px solid var(--accent);
}
.theme-toggle {
    width: fit-content;
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    transition: background-color 160ms ease, transform 160ms ease;
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
.theme-toggle:focus {
    outline: 0;
}
.theme-toggle:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
.sidebar-collapsed .brand-lockup span,
.sidebar-collapsed .nav-link span:last-child,
.sidebar-collapsed .side-footer {
    display: none;
}
.sidebar-collapsed .brand-lockup,
.sidebar-collapsed .nav-link {
    justify-content: center;
    padding-inline: 0;
}
.sidebar-collapsed .rail-toggle {
    width: 46px;
    margin-inline: auto;
}
.section-kicker {
    margin: 0 0 6px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
h1,
h2,
p {
    margin-top: 0;
}
h1 {
    margin-bottom: 6px;
    line-height: 1.05;
    letter-spacing: 0;
}
h2 {
    font-size: 16px;
}
p {
    color: var(--muted);
    line-height: 1.45;
}
.overview-hero,
.sheet-hero,
.meli-hero,
.server-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: center;
    gap: 18px;
    border-left: 8px solid var(--accent);
}

.server-hero h1 {
    max-width: 760px;
}
.server-hero {
    grid-template-columns: 230px minmax(0, 1fr);
    background: linear-gradient(90deg, #111827 0%, #111827 36%, var(--paper) 36%, var(--paper) 100%);
}
.server-hero > div {
    display: flex;
    flex-direction: column;
}
.server-hero .module-art {
    justify-self: center;
    grid-row: 1;
}
body[data-color-mode="dark"] .server-hero .section-kicker,
body[data-color-mode="dark"] .server-hero h1 {
    color: var(--ink);
}
body[data-color-mode="dark"] .server-hero p {
    color: var(--muted);
}
.module-art {
    max-width: 180px;
    justify-self: end;
}

.module-board {
    display: grid;
    border-top: 1px solid var(--line);
}
.module-lane {
    display: grid;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line);
}
.module-lane,
.status-row {
    transition: background-color 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.module-lane:hover,
.status-row:hover {
    transform: translateY(-1px);
}
.module-lane strong,
.module-lane small {
    display: block;
}
.module-lane small {
    margin-top: 4px;
    color: var(--muted);
}
.state-pill {
    min-width: 110px;
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    text-align: center;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.state-pill[data-running="true"] {
    border-color: color-mix(in srgb, var(--accent) 40%, #ffffff);
    background: var(--accent-soft);
    color: var(--accent-ink);
}
.status-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
    border: 1px solid var(--line);
    background: var(--paper);
}
.status-row {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.status-row.is-active {
    background: var(--accent-soft);
    cursor: default;
    pointer-events: none;
}
.status-row span {
    color: var(--muted);
}
.status-row strong {
    color: var(--accent-ink);
}
.work-surface {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(420px, 1.28fr);
    border: 1px solid var(--line);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.monitor-surface {
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    background: var(--paper);
    box-shadow: var(--shadow);
}
.monitor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 54px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.monitor-head h2 {
    margin-bottom: 4px;
}
.monitor-head p {
    margin-bottom: 0;
}
.server-monitor {
    display: grid;
    transition: opacity 160ms ease;
}
.server-monitor.is-loading {
    opacity: 0.64;
}
.monitor-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) 110px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 46px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--line);
    animation: rowIn 180ms ease both;
}
.monitor-row:last-child {
    border-bottom: 0;
}
.monitor-row span {
    font-weight: 800;
}
.monitor-row strong {
    justify-self: start;
    min-width: 82px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
}
body[data-color-mode="dark"] .monitor-row strong {
    background: #12351e;
    color: #86efac;
}
.monitor-row em {
    min-width: 0;
    color: var(--muted);
    font-style: normal;
    overflow-wrap: anywhere;
}
.monitor-row[data-state="atenção"] strong {
    background: #fef3c7;
    color: #92400e;
}
.monitor-row[data-state="erro"] strong {
    background: #fee2e2;
    color: #991b1b;
}
.monitor-row[data-state="attention"] strong {
    background: #fef3c7;
    color: #92400e;
}
.monitor-row[data-state="error"] strong {
    background: #fee2e2;
    color: #991b1b;
}
body[data-color-mode="dark"] .monitor-row[data-state="attention"] strong {
    background: #3a2b0a;
    color: #fde68a;
}
body[data-color-mode="dark"] .monitor-row[data-state="error"] strong {
    background: #3d1116;
    color: #fecaca;
}
.notification-empty {
    padding: 12px 16px;
    color: var(--muted);
}
.notification-item {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 42px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    animation: rowIn 180ms ease both;
}
.notification-item strong,
.notification-item span,
.notification-item em {
    min-width: 0;
    overflow-wrap: anywhere;
}
.notification-item span,
.notification-item em {
    color: var(--muted);
}
.notification-item em {
    font-size: 12px;
    font-style: normal;
}
.notification-item[data-state="read"] {
    border-left-color: var(--line);
}
.input-zone {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 16px 18px;
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg, var(--accent-soft), #ffffff 58%);
}
body[data-color-mode="dark"] .input-zone {
    background: linear-gradient(180deg, var(--accent-soft), var(--paper) 46%);
}
.inline-error {
    border: 1px solid #e56a6a;
    background: #fff0f0;
    color: #8f1d1d;
    padding: 9px 10px;
    font-size: 13px;
    line-height: 1.35;
}
.app-confirm {
    position: fixed;
    inset: 0;
    z-index: 300;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 24px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}
.app-confirm:not([open]) {
    display: none;
}
dialog.app-confirm::backdrop {
    background-color: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(2px);
}
.app-confirm-head,
.app-confirm-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.app-confirm-head img {
    width: 36px;
    height: 36px;
}
.app-confirm p {
    margin: 20px 0;
    line-height: 1.5;
}
.app-confirm-actions {
    justify-content: flex-end;
}
body[data-color-mode="dark"] .inline-error {
    background: #3a1818;
    color: #ffd6d6;
}
.field-hint {
    display: block;
    margin-top: -5px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.field-hint a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}
.result-zone {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(360px, 1fr);
}
label {
    color: var(--accent-ink);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    resize: none;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--field);
    color: var(--ink);
    outline: 0;
    line-height: 1.45;
}
body[data-color-mode="dark"] textarea,
body[data-color-mode="dark"] input,
body[data-color-mode="dark"] select,
body[data-color-mode="dark"] .queue-list,
body[data-color-mode="dark"] .queue-item,
body[data-color-mode="dark"] .flat-action,
body[data-color-mode="dark"] .state-pill {
    background: var(--field);
    color: var(--ink);
}
body[data-color-mode="dark"] textarea,
body[data-color-mode="dark"] input,
body[data-color-mode="dark"] select,
body[data-color-mode="dark"] .queue-list,
body[data-color-mode="dark"] .flat-action,
body[data-color-mode="dark"] .state-pill {
    border-color: color-mix(in srgb, var(--line) 70%, #ffffff 10%);
}
body[data-color-mode="dark"] textarea::placeholder,
body[data-color-mode="dark"] input::placeholder {
    color: #7f8ea3;
}

.text-filter-switch {
    top: 3px;
    right: 3px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}
.text-filter-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.queue-list {
    display: grid;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.78);
}
.queue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--accent-ink);
    font-size: 12px;
    text-transform: uppercase;
}
.queue-head span,
.queue-empty {
    color: var(--muted);
    font-size: 12px;
    text-transform: none;
}
.queue-items {
    display: grid;
    gap: 6px;
    max-height: 172px;
    overflow: auto;
}
.queue-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    padding: 5px 7px;
    border-left: 5px solid #ef4444;
    background: #ffffff;
    color: var(--ink);
    font-size: 13px;
    animation: rowIn 150ms ease both;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.queue-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.queue-item strong {
    color: var(--muted);
    font-size: 12px;
}
.queue-item[data-state="running"] {
    border-left-color: #f59e0b;
    background: #fffbeb;
}
.queue-item[data-state="waiting"] {
    border-left-color: #60a5fa;
    background: #eff6ff;
}
.queue-item[data-state="done"] {
    border-left-color: #22c55e;
    background: #f0fdf4;
}
.queue-item[data-state="error"] {
    border-left-color: #991b1b;
    background: #fee2e2;
}
.queue-item[data-state="canceling"],
.queue-item[data-state="canceled"] {
    border-left-color: #64748b;
    background: #f1f5f9;
}
body[data-script="nfd"] .queue-item {
    border-left-color: #22c55e;
    background: #f0fdf4;
}
body[data-script="nfd"] .queue-item[data-state="done"] {
    border-left-color: #ef4444;
    background: #fff1f2;
}
body[data-color-mode="dark"] .queue-item[data-state="running"] {
    background: #2a210d;
}
body[data-color-mode="dark"] .queue-item[data-state="waiting"] {
    background: #10233f;
}
body[data-color-mode="dark"] .queue-item[data-state="done"],
body[data-color-mode="dark"][data-script="nfd"] .queue-item {
    background: #102416;
}
body[data-color-mode="dark"] .queue-item[data-state="canceling"],
body[data-color-mode="dark"] .queue-item[data-state="canceled"] {
    background: #17202d;
}
body[data-color-mode="dark"][data-script="nfd"] .queue-item[data-state="done"],
body[data-color-mode="dark"] .queue-item[data-state="error"] {
    background: #2b1114;
}
.action-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}
.primary-action,
.flat-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    padding: 0 var(--control-padding);
    border: 1px solid var(--accent);
    border-radius: var(--control-radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    transition: transform 150ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
.primary-action {
    background: var(--accent);
    color: #ffffff;
}
.flat-action {
    background: #ffffff;
    color: var(--accent-ink);
}
.danger-action {
    border-color: #b91c1c;
    color: #991b1b;
}
button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

body[data-color-mode="dark"] .flat-action {
    color: var(--ink);
}
.primary-action:hover,
.flat-action:hover {
    transform: translateY(-1px);
}
pre {
    min-height: 270px;
    max-height: 56vh;
    margin: 0;
    padding: 12px 14px;
    overflow: auto;
    background: var(--terminal-bg);
    color: var(--terminal-ink);
    font: 13px/1.55 "Cascadia Mono", Consolas, monospace;
    tab-size: 4;
    white-space: pre;
    opacity: 0.92;
    transition: opacity 160ms ease, color 160ms ease, background-color 160ms ease;
}
.terminal-wrap {
    position: relative;
    min-width: 0;
}
.terminal-wrap pre {
    width: 100%;
    height: 100%;
}
.terminal-copy {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.08);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}
.terminal-copy:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

pre.is-visible {
    opacity: 1;
}
pre[data-mode="error"] {
    color: #fed7aa;
}
pre[data-mode="success"] {
    color: #dcfce7;
}
pre[data-mode="pending"] {
    color: #fde68a;
}
.login-box {
    background: #ffffff;
    border-top: 8px solid #111827;
    box-shadow: var(--shadow);
}
.login-box .brand-lockup {
    color: var(--ink);
}
.login-box form {
    display: grid;
    gap: 14px;
}
.login-context {
    display: grid;
    gap: 4px;
    margin-bottom: 2px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}
.login-context strong {
    color: var(--ink);
    font-size: 13px;
}
input {
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--control-padding);
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--field);
    color: var(--ink);
}
select {
    min-height: var(--control-height);
    padding: 0 var(--control-padding);
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
}
.visibility-filter:has([data-planilha-type]:checked) [data-planilha-return-options] {
    display: none;
}

body[data-color-mode="dark"] select {
    background: var(--field);
}
body[data-color-mode="dark"] .login-box,
body[data-color-mode="dark"] .module-board,
body[data-color-mode="dark"] .work-surface,
body[data-color-mode="dark"] .monitor-surface,
body[data-color-mode="dark"] .overview-hero,
body[data-color-mode="dark"] .sheet-hero,
body[data-color-mode="dark"] .meli-hero {
    background: var(--paper);
}
body[data-color-mode="dark"] .server-hero {
    background: linear-gradient(90deg, #05070b 0%, #05070b 36%, var(--paper) 36%, var(--paper) 100%);
    border-color: #38bdf8;
}
.is-busy button {
    cursor: progress;
    opacity: 0.78;
}
@keyframes rowIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 1080px) {
    .overview-hero,
    .sheet-hero,
    .meli-hero,
    .server-hero,
    .work-surface {
        grid-template-columns: 1fr;
    }
    .input-zone {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .module-art {
        justify-self: start;
    }
    .server-hero {
        background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 68%, var(--accent-soft) 68%, var(--accent-soft) 100%);
    }
    .server-hero .module-art {
        grid-row: auto;
    }
    .status-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .app-frame {
        grid-template-columns: 1fr;
    }
    .side-panel {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 6px solid var(--accent);
    }
    .module-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sidebar-collapsed .app-frame {
        grid-template-columns: 1fr;
    }
    .sidebar-collapsed .brand-lockup span,
    .sidebar-collapsed .nav-link span:last-child {
        display: block;
    }
    .sidebar-collapsed .side-footer {
        display: grid;
    }
    .page {
        padding: 18px;
    }
    .overview-hero,
    .sheet-hero,
    .meli-hero,
    .server-hero {
        padding: 22px;
    }
    .module-lane {
        grid-template-columns: 64px 1fr;
    }
    .module-lane .state-pill {
        grid-column: 2;
        justify-self: start;
    }
    .module-lane img {
        width: 64px;
        height: 48px;
    }
    .status-rail {
        grid-template-columns: 1fr;
    }
    .monitor-head,
    .monitor-row,
    .notification-item {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .monitor-head {
        display: grid;
    }
}

.language-picker {
    display: grid;
    gap: 2px;
    color: var(--shell-muted, #697582);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.language-picker select {
    min-width: 92px;
    padding: 5px 8px;
    border: 1px solid var(--shell-border, #dce4ea);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: none;
}
.login-language-picker {
    position: fixed;
    top: 18px;
    left: 18px;
}
.workspace-page-content {
    max-width: 1240px;
    margin: 0 auto;
}
.workspace-hero,
.workspace-surface {
    border: 1px solid #dce5ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(43, 70, 91, .08);
}
.workspace-hero {
    padding: 8px 0 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.workspace-kicker {
    color: #3377ac;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.workspace-hero h1 {
    margin: 0;
    color: #182b3b;
    font-size: 26px;
}
.workspace-nav-title {
    display: block;
    padding: 14px 9px 4px;
    color: #98a1af;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.operations-shell .workspace-nav-link svg {
    width: 20px;
    min-width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    opacity: .7;
}
.operations-shell .workspace-nav-link:hover svg,
.operations-shell .workspace-nav-link.is-active svg { opacity: 1; }
.operations-shell.sidebar-collapsed .workspace-nav-title { display: none; }
.compact-language-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #e1e4ea;
    border-radius: 8px;
    background: #f3f5f8;
}
.compact-language-picker svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}
.compact-language-picker select {
    min-width: 0;
    width: auto;
    height: 24px;
    min-height: 0;
    padding: 0 18px 0 2px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 10px;
    font-weight: 800;
}
.operations-shell.workspace-page .workspace-topbar { grid-template-columns: minmax(0, 1fr) auto; }
.operations-shell.workspace-page .topbar-context { display: none; }
.operations-shell.workspace-page .topbar-actions { grid-column: 2; }
.operations-shell.workspace-page #topbar-user { display: none; }
.workspace-surface {
    display: grid;
    gap: 28px;
    margin-top: 18px;
    padding: 28px;
}
.workspace-account-form {
    display: grid;
    gap: 12px;
}
.workspace-form-grid input {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #ccd8e0;
    border-radius: 8px;
    background: #fbfdff;
    color: #1b2c3b;
}
.workspace-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.workspace-form-grid label {
    display: grid;
    gap: 6px;
    color: #314657;
    font-size: 12px;
    font-weight: 700;
}
.workspace-form-grid label small { color: #82909b; font-weight: 400; }
.workspace-toolbar,
.workspace-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.workspace-toolbar { margin: 22px 0 12px; }
.workspace-toolbar-minimal { justify-content: flex-end; margin: 0 0 24px; }
.workspace-section-heading h2 { margin: 5px 0 0; color: #182b3b; font-size: 22px; }
.workspace-muted { color: #718290; font-size: 11px; }
.workspace-commerce-grid { display: grid; grid-template-columns: repeat(auto-fill, 272px); justify-content: start; gap: 16px; }
.workspace-commerce-card,
.workspace-empty {
    border: 1px solid #dce5ec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(43, 70, 91, .06);
}
.workspace-commerce-card { padding: 0; overflow: hidden; border: 0; background: linear-gradient(115deg, #4777d4, #42c4d9); color: #fff; box-shadow: 0 8px 15px rgba(54, 91, 160, .16); }
.workspace-commerce-card > summary { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 120px; padding: 18px; cursor: pointer; list-style: none; }
.workspace-commerce-card > summary::-webkit-details-marker { display: none; }
.workspace-commerce-card > summary:hover { background: linear-gradient(115deg, #3f70cf, #39bbd2); }
.workspace-commerce-card .dashboard-tool-copy strong,
.workspace-commerce-card .dashboard-tool-copy small { color: #fff; }
.workspace-commerce-card .dashboard-tool-copy small { margin-top: 7px; opacity: .78; }
.workspace-commerce-media { color: #4777d4; font-size: 18px; font-weight: 800; }
.workspace-service-form { display: grid; gap: 14px; padding: 16px; background: #fff; }
.workspace-service-list { display: grid; gap: 2px; }
.workspace-service-row { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: 6px; color: #314657; font-size: 12px; cursor: pointer; }
.workspace-service-row:hover { background: #f2f7fb; }
.workspace-service-row input { width: 15px; height: 15px; margin: 0; accent-color: #4777d4; }
.workspace-service-apply { width: 100%; }
.workspace-dashboard-panel { min-height: 0; padding: 24px; }
.workspace-dashboard-panel .dashboard-tools.module-board { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.workspace-dashboard-panel .workspace-commerce-grid { grid-template-columns: repeat(auto-fill, 272px); }
.workspace-dashboard-panel .dashboard-tools .module-lane,
.workspace-commerce-card > summary { min-width: 0; }
.workspace-dashboard-panel .dashboard-tool-copy { min-width: 0; }
.workspace-dashboard-panel .dashboard-tool-copy strong,
.workspace-dashboard-panel .dashboard-tool-copy small { overflow-wrap: anywhere; }
.workspace-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.workspace-file-surface { display: grid; gap: 18px; }
.workspace-file-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(3, 190px) auto; align-items: center; gap: 10px; }
.workspace-file-toolbar > :is(input, select) { min-width: 0; height: 40px; }
.workspace-file-picker { position: relative; width: 190px; }
.workspace-file-picker summary { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; padding: 0 12px; border: 1px solid #dce5ec; border-radius: 7px; background: #f8fbfd; color: #52697a; cursor: pointer; font-size: 11px; font-weight: 700; list-style: none; }
.workspace-file-picker summary::-webkit-details-marker { display: none; }
.workspace-file-picker summary::after { margin-left: 9px; content: "⌄"; font: 14px/1 sans-serif; }
.workspace-file-picker[open] summary { border-color: #9cc8ec; background: #eaf4ff; color: #1f6598; }
.workspace-file-picker-panel { position: absolute; z-index: 70; top: calc(100% + 6px); right: 0; display: grid; gap: 8px; width: 280px; padding: 10px; border: 1px solid #dce5ec; border-radius: 9px; background: #fff; box-shadow: 0 14px 30px rgba(25, 50, 69, 0.14); }
.workspace-file-picker-panel > input { width: 100%; }
[data-file-type-options] { display: grid; max-height: 240px; overflow-y: auto; }
[data-file-type-options] label { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 5px; color: #52697a; font: 700 10px ui-monospace, monospace; cursor: pointer; }
[data-file-type-options] input { flex: 0 0 14px; width: 14px; height: 14px; min-height: 0; margin: 0; }
[data-file-type-options] label:hover { background: #f1f6fa; }
.workspace-file-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.workspace-file-row {
    display: grid;
    grid-template-rows: 128px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e3e9ee;
    border-radius: 10px;
    background: #fff;
}
.workspace-file-preview { display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid #edf1f4; background: #f3f6f8; }
.workspace-file-preview img { width: 100%; height: 100%; object-fit: contain; }
.workspace-file-preview > span { max-width: 90%; overflow: hidden; color: #9aa7b1; font: 800 11px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.workspace-file-copy { display: grid; align-content: start; min-width: 0; gap: 5px; padding: 11px; }
.workspace-file-copy > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-file-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.workspace-file-copy em { padding: 3px 6px; border-radius: 5px; background: #fff2d7; color: #875a00; font-size: 9px; font-style: normal; font-weight: 800; }
.workspace-file-row strong { overflow-wrap: anywhere; color: #314657; font-size: 12px; }
.workspace-file-row small { overflow-wrap: anywhere; color: #82909b; font-size: 10px; }
.workspace-file-row:hover { border-color: #a9c9e1; box-shadow: 0 8px 20px rgba(37, 77, 107, .1); }
.workspace-file-type {
    width: fit-content;
    max-width: 110px;
    overflow: hidden;
    padding: 5px 7px;
    border-radius: 6px;
    background: #f1f4f7;
    color: #52697a;
    font: 700 10px ui-monospace, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.workspace-empty-copy { grid-column: 1 / -1; margin: 18px 0 0; color: #718290; font-size: 12px; }
.workspace-form-surface { margin-top: 0; }
.workspace-url-preview { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 12px; border-radius: 8px; background: #f2f7fb; color: #5e7381; font: 11px ui-monospace, monospace; }
.workspace-empty { padding: 34px; text-align: center; }
.workspace-empty h2 { margin-top: 0; color: #182b3b; }
.workspace-empty p { color: #718290; }
.operations-shell[data-color-mode="dark"] .workspace-surface {
    border-color: #2f4050;
    background: #16222d;
}
.operations-shell[data-color-mode="dark"] .workspace-hero h1,
.operations-shell[data-color-mode="dark"] .workspace-form-grid label { color: #edf5fb; }
.operations-shell[data-color-mode="dark"] .workspace-form-grid input { border-color: #3b4e5f; background: #101a23; color: #edf5fb; }
.operations-shell[data-color-mode="dark"] .workspace-empty { border-color: #2f4050; background: #16222d; color: #edf5fb; }
.operations-shell[data-color-mode="dark"] .workspace-section-heading h2,
.operations-shell[data-color-mode="dark"] .workspace-empty h2 { color: #edf5fb; }
.operations-shell[data-color-mode="dark"] .workspace-url-preview { border-color: #304352; background: #101a23; }
.operations-shell[data-color-mode="dark"] .compact-language-picker { border-color: #304352; background: #101a23; }
.operations-shell[data-color-mode="dark"] .workspace-file-row strong { color: #dce8f0; }
.operations-shell[data-color-mode="dark"] .workspace-file-row { border-color: #2b3b49; background: #16222d; }
.operations-shell[data-color-mode="dark"] .workspace-file-preview { border-color: #2b3b49; background: #101a23; }
.operations-shell[data-color-mode="dark"] .workspace-file-row:hover { border-color: #4777a0; }
.operations-shell[data-color-mode="dark"] .workspace-file-picker summary,
.operations-shell[data-color-mode="dark"] .workspace-file-picker-panel,
.operations-shell[data-color-mode="dark"] .workspace-file-type { background: #101a23; border-color: #304352; color: #aac0d0; }
.operations-shell[data-color-mode="dark"] .workspace-file-picker[open] summary,
.operations-shell[data-color-mode="dark"] [data-file-type-options] label:hover { background: #1d3c57; color: #d8efff; }
.operations-shell[data-color-mode="dark"] .workspace-service-form { background: #16222d; }
.operations-shell[data-color-mode="dark"] .workspace-service-row { color: #dce8f0; }
.operations-shell[data-color-mode="dark"] .workspace-service-row:hover { background: #1d3c57; }
.workspace-preview-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; color: #64748b; font-size: 10px; }
.workspace-preview-back strong { color: #2563eb; font-size: 11px; }
.workspace-preview main button:disabled { cursor: not-allowed; opacity: .45; }
@media (max-width: 680px) {
    .workspace-hero { align-items: flex-start; padding: 24px; }
    .workspace-form-grid { grid-template-columns: 1fr; }
    .workspace-file-toolbar { grid-template-columns: minmax(0, 1fr); }
    .workspace-file-picker { width: 100%; }
    .workspace-file-picker-panel { right: auto; left: 0; width: 100%; }
    .workspace-file-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
    .workspace-dashboard-panel .workspace-commerce-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Product detail redesign, following the supplied internal catalog reference */
.products-page:has(.ml-pdp) {
    min-height: calc(100vh - 48px);
    background: #f5f5f5;
}
.ml-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 4px;
    color: #999999;
    font-size: 12px;
}
.ml-breadcrumb a {
    color: #333333;
}
.ml-breadcrumb a:hover,
.ml-back:hover {
    color: #3483fa;
}
.ml-top-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0 14px;
}
.ml-back {
    color: #3483fa;
    font-size: 12px;
    font-weight: 700;
}
.ml-top-actions .product-settings-trigger {
    min-height: 36px;
    border-color: #d4d4d4;
    border-radius: 6px;
    color: #444444;
}
.ml-pdp {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(0, 1fr) 260px;
    align-items: start;
    gap: 16px;
    padding-top: 8px;
}
.ml-gallery {
    display: grid;
    gap: 10px;
}
.ml-gallery-main {
    display: grid;
    place-items: center;
    min-height: 420px;
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
}
.ml-gallery-main img {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
}
.ml-gallery-main span {
    color: #7d8490;
    text-align: center;
}
.ml-gallery-main span strong,
.ml-gallery-main span small {
    display: block;
}
.ml-gallery-main span small {
    margin-top: 6px;
    color: #a0a6b0;
}

.ml-info {
    display: grid;
    align-content: start;
    gap: 10px;
}
.ml-condition,
.ml-record-box > span {
    margin: 0;
    color: #666666;
    font-size: 12px;
}
.ml-info h1 {
    margin: 4px 0 0;
    color: #111111;
    font-size: 22px;
    font-weight: 650;
    line-height: 1.25;
}
.ml-sku {
    color: #6b6b6b;
    font-size: 12px;
}
.ml-price {
    margin: 6px 0 10px;
    color: #111111;
    font-size: 34px;
    font-weight: 500;
}
.ml-description {
    margin: 0 0 6px;
    color: #555555;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-line;
}
.ml-label {
    margin: 10px 0 6px;
    color: #555555;
    font-size: 12px;
    font-weight: 700;
}
.ml-specs {
    width: 100%;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
}
.ml-specs-scroll {
    max-height: 360px;
    overflow-y: auto;
}
.ml-specs :is(th, td) {
    padding: 10px 14px;
    border: 0;
    font-size: 13px;
    text-align: left;
}
.ml-specs tr:nth-child(odd) :is(th, td) {
    background: #eceff1;
}
.ml-specs th {
    width: 36%;
    color: #666666;
    font-weight: 700;
}
.ml-specs td {
    color: #111111;
    overflow-wrap: anywhere;
}
.ml-variation-picker > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ml-variation-picker button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    background: #ffffff;
    color: #333333;
    cursor: pointer;
    font-size: 13px;
}
.ml-variation-picker button:hover,
.ml-variation-picker button.is-selected {
    border-color: #3483fa;
    color: #3483fa;
}
.ml-variation-picker button.is-selected {
    box-shadow: inset 0 0 0 1px #3483fa;
    font-weight: 700;
}
.ml-variation-picker p {
    margin: 10px 0 0;
    color: #777777;
    font-size: 11px;
}
.ml-record-box {
    position: sticky;
    top: 64px;
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.ml-record-box > strong {
    color: #00a650;
    font-size: 13px;
}
.ml-record-box > p {
    margin: 0;
    padding: 11px 0;
    border-block: 1px solid #eeeeee;
    color: #555555;
    font-size: 12px;
}

.ml-record-box > div {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid #00a650;
    border-radius: 6px;
}
.ml-record-box > div strong {
    color: #00a650;
    font-size: 12px;
}
.ml-record-box > div span,
.ml-record-box > div small {
    color: #444444;
    font-size: 11px;
    overflow-wrap: anywhere;
}
.product-custom-fields {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    padding-top: 4px;
}
.product-custom-fields > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.product-custom-fields > header strong,
.product-custom-fields > header span {
    display: block;
}
.product-custom-fields > header strong {
    color: #242a34;
    font-size: 12px;
}
.product-custom-fields > header span {
    margin-top: 3px;
    color: #858c97;
    font-size: 10px;
}
.product-custom-fields > div {
    display: grid;
    gap: 8px;
}
.product-custom-field {
    display: grid;
    grid-template-columns: minmax(140px, 0.45fr) minmax(180px, 1fr) auto;
    align-items: end;
    gap: 8px;
}
.product-custom-field-actions {
    display: flex;
    gap: 5px;
}
.product-custom-field-actions button {
    width: 34px;
    height: 38px;
    border: 1px solid #d7dce4;
    border-radius: 6px;
    background: #ffffff;
    color: #56606d;
    cursor: pointer;
    font-size: 16px;
}
.product-custom-field-actions button:last-child {
    border-color: #e2b9b9;
    background: #fff5f5;
    color: #a63f3f;
    font-size: 20px;
}
.product-custom-field-actions button:disabled {
    cursor: default;
    opacity: 0.35;
}
.operations-shell[data-color-mode="dark"] .products-page:has(.ml-pdp) {
    background: #0d151e;
}
.operations-shell[data-color-mode="dark"] :is(.ml-breadcrumb a, .ml-info h1, .ml-price, .ml-specs td) {
    color: #edf2f7;
}
.operations-shell[data-color-mode="dark"] :is(.ml-gallery-main, .ml-record-box, .ml-variation-picker button) {
    border-color: #344252;
    background: #111821;
    color: #e7edf4;
}
.operations-shell[data-color-mode="dark"] .ml-specs tr:nth-child(odd) :is(th, td) {
    background: #17212c;
}
.operations-shell[data-color-mode="dark"] :is(.ml-condition, .ml-sku, .ml-label, .ml-specs th, .ml-record-box > span, .ml-record-box > p, .ml-record-box > div span, .ml-record-box > div small) {
    color: #9aa9b8;
}
.operations-shell[data-color-mode="dark"] .product-custom-fields > header strong {
    color: #edf2f7;
}

/* Profile overview redesign, following the supplied Steam-style reference */
.profile-overview-page .work-profile {
    min-height: calc(100vh - 48px);
    background: #0d1620;
}
.steam-profile-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    align-items: center;
    gap: 30px;
    min-height: 232px;
    padding: 34px 40px;
    overflow: hidden;
    border-bottom: 1px solid rgba(90, 130, 160, 0.28);
    background: url("/static/assets/trello-board-dark.jpg") center / cover;
}
.steam-profile-head::before {
    position: absolute;
    inset: 0;
    background: rgba(9, 18, 10, 0.22);
    content: "";
    pointer-events: none;
}
.steam-profile-head-inner {
    position: relative;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    gap: 26px;
    min-width: 0;
}
.steam-avatar-form {
    display: grid;
    align-content: start;
    gap: 6px;
    width: 164px;
}
.steam-avatar-wrap {
    position: relative;
    display: block;
    width: 164px;
    height: 164px;
    padding: 6px;
    border: 1px solid rgba(135, 185, 205, 0.55);
    border-radius: 3px;
    background: rgba(10, 20, 28, 0.7);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 14px 40px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.steam-avatar {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #173542;
    color: #ffffff;
    font-size: 52px;
    font-weight: 400;
}
.steam-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.steam-avatar-wrap small {
    position: absolute;
    right: 6px;
    bottom: 6px;
    left: 6px;
    padding: 7px;
    background: rgba(7, 13, 18, 0.82);
    color: #d7e7ee;
    font-size: 10px;
    text-align: center;
    opacity: 0;
    transition: opacity 120ms ease;
}
.steam-avatar-wrap:hover small,
.steam-avatar-wrap:focus-within small {
    opacity: 1;
}
.steam-avatar-wrap.is-readonly {
    cursor: default;
}
.steam-status .profile-online-dot.is-inactive {
    background: #8da5b2;
}
.steam-xp-bar .profile-view-progress {
    width: 100%;
}
.steam-avatar-form #profile-photo-name {
    color: #a9bfcc;
    font-size: 9px;
}
.steam-avatar-form .profile-photo-save {
    min-height: 28px;
    border-radius: 3px;
    background: #2b6a63;
}
.steam-identity {
    min-width: 0;
    color: #c6d4df;
}
.steam-identity .steam-kicker {
    margin: 0 0 8px;
    color: #7bc9db;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}
.steam-identity h1 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 300;
}
.steam-status {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 12px;
    color: #a9bfcc;
    font-size: 12px;
}
.steam-status .profile-online-dot {
    background: #59bf40;
}
.profile-overview-page .profile-online-dot {
    background: #59bf40;
}
.steam-role {
    display: inline-flex;
    padding: 4px 10px;
    border: 1px solid rgba(122, 196, 222, 0.4);
    border-radius: 999px;
    background: rgba(26, 159, 255, 0.12);
    color: #7fd6f0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.steam-level {
    position: relative;
    padding: 20px;
    border: 1px solid rgba(120, 180, 205, 0.22);
    border-radius: 4px;
    background: rgba(12, 22, 30, 0.68);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.steam-level small {
    display: block;
    margin-bottom: 6px;
    color: #7ec0ce;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.steam-level > strong {
    display: block;
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
}
.steam-xp-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}
.steam-xp-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1a9fff, #59bf40);
}
.steam-level em {
    display: block;
    margin-top: 8px;
    color: #8fa3af;
    font-size: 10px;
    font-style: normal;
}
.steam-profile-tabs {
    padding: 8px 40px;
    border-bottom: 1px solid rgba(90, 130, 160, 0.24);
    background: #121b25;
}
.steam-profile-tabs .profile-tabs {
    display: flex;
    gap: 8px;
}
.steam-profile-tabs .profile-tabs a,
.steam-profile-tabs .profile-tabs > span {
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #9fb0bd;
    font-size: 12px;
    font-weight: 700;
}
.steam-profile-tabs .profile-tabs a:hover {
    border-color: rgba(102, 192, 244, 0.2);
    background: rgba(102, 192, 244, 0.08);
    color: #d7e3ec;
}
.steam-profile-tabs .profile-tabs > span {
    border-color: rgba(102, 192, 244, 0.34);
    background: rgba(26, 159, 255, 0.13);
    color: #66c0f4;
}
.profile-overview-page .profile-photo-error {
    width: min(100% - 40px, 1040px);
    margin: 16px auto 0;
}
.steam-profile-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    width: min(100% - 40px, 1040px);
    margin: 24px auto 60px;
}
.profile-subpage-shell {
    grid-template-columns: minmax(0, 1fr);
}
.profile-subpage-shell .steam-main {
    min-width: 0;
}
.steam-main {
    display: grid;
    align-content: start;
    gap: 16px;
}
.steam-panel,
.profile-overview-page .profile-security-panel {
    overflow: hidden;
    border: 1px solid rgba(120, 170, 195, 0.2);
    border-radius: 4px;
    background: rgba(20, 31, 42, 0.72);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}
.steam-panel > header {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(120, 170, 195, 0.18);
    background: linear-gradient(90deg, rgba(26, 86, 100, 0.5), rgba(54, 30, 72, 0.5));
}
.steam-panel > header h2,
.steam-sidebar h2 {
    margin: 0;
    color: #e3edf2;
    font-size: 15px;
    font-weight: 400;
}
.steam-panel > header p {
    margin: 3px 0 0;
    color: #8da8b4;
    font-size: 11px;
}
.steam-panel-body {
    padding: 14px 16px 18px;
}
.profile-overview-page .profile-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    background: transparent;
}
.profile-overview-page .profile-stat-row > div {
    padding: 12px;
    border-radius: 4px;
    background: rgba(9, 16, 23, 0.7);
}
.profile-overview-page .profile-stat-row strong {
    font-size: 24px;
}
.profile-overview-page .profile-activity-panel {
    margin: 0;
    background: rgba(20, 31, 42, 0.72);
}
.profile-overview-page .profile-activity-panel .server-monitor {
    padding-block: 8px;
}
.profile-overview-page .profile-activity-panel .monitor-row {
    grid-template-columns: 150px 120px minmax(0, 1fr);
    gap: 12px;
    min-height: 42px;
    padding: 9px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: #dce7ec;
    font-size: 12px;
}
.profile-overview-page .profile-activity-panel .monitor-row strong {
    justify-self: start;
    min-width: 70px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(45, 170, 120, 0.16);
    color: #6fe0b0;
    font-size: 9px;
    text-align: center;
    text-transform: uppercase;
}
.profile-overview-page .profile-security-panel {
    margin: 0;
    background: rgba(20, 31, 42, 0.72);
}
.steam-sidebar {
    display: grid;
    align-content: start;
    gap: 20px;
}
.steam-sidebar .steam-panel {
    padding: 16px;
}
.steam-sidebar h2 {
    margin-bottom: 10px;
}
.steam-sidebar p,
.steam-sidebar small {
    color: #9babb5;
}
.steam-sidebar a {
    display: block;
    padding: 7px 0;
    color: #d6dfe5;
    font-size: 12px;
}
.steam-sidebar a:hover {
    color: #66c0f4;
}
.profile-overview-page[data-color-mode="light"] .work-profile {
    background: #edf2f4;
    color: #24323b;
}
.profile-overview-page[data-color-mode="light"] .steam-profile-head {
    border-color: #c9dbe3;
    background-image: url("/static/assets/trello-board-light.jpg");
}
.profile-overview-page[data-color-mode="light"] .steam-profile-head::before {
    background: transparent;
}
.profile-overview-page[data-color-mode="light"] :is(.steam-identity h1, .steam-level > strong, .steam-panel > header h2, .steam-sidebar h2, .profile-security-panel h2, .profile-stat-row strong) {
    color: #1f303a;
}
.profile-overview-page[data-color-mode="light"] :is(.steam-identity, .steam-status, .steam-level em, .steam-panel > header p, .steam-sidebar p, .steam-sidebar small, .steam-sidebar a, .profile-stat-row span) {
    color: #667985;
}
.profile-steam-page[data-color-mode="light"] .steam-profile-tabs {
    border-color: #d3dfe4;
    background: #f7f9fa;
}
.profile-steam-page[data-color-mode="light"] .steam-profile-tabs .profile-tabs a {
    color: #475865;
}
.profile-steam-page[data-color-mode="light"] .steam-profile-tabs .profile-tabs a:hover,
.profile-steam-page[data-color-mode="light"] .steam-profile-tabs .profile-tabs > span {
    border-color: #b9d1dc;
    background: #e5f1f5;
    color: #24566c;
}
.profile-overview-page[data-color-mode="light"] :is(.steam-panel, .profile-security-panel, .steam-level) {
    border-color: #d8e1e6;
    background: #ffffff;
    color: #24323b;
    box-shadow: 0 12px 30px rgba(38, 55, 67, 0.1);
}
.profile-overview-page[data-color-mode="light"] .steam-panel > header {
    border-color: #d8e1e6;
    background: linear-gradient(90deg, #dceef2, #ece5f1);
}
.profile-overview-page[data-color-mode="light"] .profile-stat-row > div {
    background: #f4f7f8;
}
.profile-overview-page[data-color-mode="light"] .profile-activity-panel .monitor-row {
    border-color: #dce5e9;
    color: #24323b;
}
.profile-overview-page[data-color-mode="light"] .profile-activity-panel .monitor-row strong {
    background: #dcefe3;
    color: #18764b;
}
.profile-overview-page[data-color-mode="light"] .profile-activity-panel .monitor-row em {
    color: #667985;
}
@media (max-width: 1080px) {
    .ml-pdp,
    .steam-profile-head,
    .steam-profile-shell {
        grid-template-columns: minmax(0, 1fr);
    }
    .ml-record-box {
        position: static;
    }
    .steam-level {
        width: min(100%, 360px);
    }
}
@media (max-width: 760px) {
    .ml-top-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .ml-gallery-main {
        min-height: 300px;
    }
    .product-custom-field {
        grid-template-columns: minmax(0, 1fr);
    }
    .product-custom-field-actions {
        justify-content: flex-end;
    }
    .steam-profile-head {
        padding: 24px 20px;
    }
    .steam-profile-head-inner {
        grid-template-columns: minmax(0, 1fr);
    }
    .steam-profile-tabs {
        padding: 0 8px;
        overflow-x: auto;
    }
    .steam-profile-tabs .profile-tabs a,
    .steam-profile-tabs .profile-tabs > span {
        padding-inline: 12px;
        white-space: nowrap;
    }
    .steam-profile-shell {
        width: min(100% - 24px, 1040px);
    }
    .profile-overview-page .profile-stat-row,
    .profile-overview-page .profile-activity-panel .monitor-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Compact operational controls and account surfaces */
.topbar-actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
}
.topbar-actions .topbar-user {
    grid-column: auto;
}
.topbar-actions .theme-toggle {
    width: auto;
    min-width: 42px;
    height: 32px;
    padding: 0 9px;
    border-color: #e1e4ea;
    background: #f3f5f8;
    color: #4b5563;
    font-size: 10px;
    font-weight: 700;
}
.topbar-actions .theme-toggle::before {
    content: none;
}
.operations-shell.trello-board-page .topbar-actions .theme-toggle,
.operations-shell.profile-steam-page .topbar-actions .theme-toggle {
    border-color: var(--shell-chrome-border);
    background: var(--shell-chrome-hover);
    color: var(--shell-chrome-text);
}
.trello-intake-fields textarea {
    resize: none;
}
.trello-card-stack {
    min-width: 0;
    overflow-x: hidden;
}
.trello-result-card {
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
}
.trello-link-preview {
    max-width: 100%;
}
.marketplace-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.marketplace-subpage-hero {
    grid-template-columns: minmax(0, 1fr) auto;
}
.marketplace-setup-card {
    display: grid;
    min-width: 176px;
    gap: 3px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-left: 3px solid #d89b35;
    border-radius: 7px;
    background: var(--paper);
}
.marketplace-setup-card[data-state="ready"] {
    border-left-color: #3ca879;
}
.marketplace-setup-card span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
}
.marketplace-setup-card strong {
    color: var(--ink);
    font-size: 12px;
}
.marketplace-setup-card a {
    margin-top: 4px;
    color: var(--accent-ink);
    font-size: 10px;
    font-weight: 700;
}
.marketplace-setup-card > div {
    display: flex;
    gap: 12px;
}
.webhook-surface {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
.webhook-surface > header,
.webhook-event > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.webhook-overview {
    min-height: 72px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--soft);
}
.webhook-endpoint {
    justify-items: end;
    max-width: min(58%, 680px);
}
.webhook-endpoint span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}
.webhook-surface > header div,
.webhook-event > header div {
    display: grid;
    gap: 3px;
}
.webhook-surface code {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--muted);
}
.webhook-list {
    display: grid;
    gap: 10px;
    padding: 16px;
}
.webhook-event {
    display: grid;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid #d89b35;
    border-radius: 8px;
    background: var(--paper);
}
.webhook-event > header span {
    width: max-content;
    color: #9b5e00;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}
.webhook-event time,
.webhook-event dt {
    color: var(--muted);
    font-size: 11px;
}
.webhook-event dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}
.webhook-event dl div {
    min-width: 0;
}
.webhook-event dd {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 12px;
}
.webhook-event details {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}
.webhook-event summary {
    cursor: pointer;
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 700;
}
.webhook-event pre {
    max-height: 420px;
    margin: 12px 0 0;
    padding: 14px;
    overflow: auto;
    border-radius: 6px;
    background: var(--soft);
    color: var(--ink);
    font-size: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.webhook-list .product-empty {
    min-height: 180px;
}
@media (max-width: 760px) {
    .webhook-surface > header,
    .webhook-event > header {
        align-items: flex-start;
        flex-direction: column;
    }
    .webhook-surface code {
        max-width: 100%;
    }
    .webhook-endpoint {
        justify-items: start;
        max-width: 100%;
    }
    .webhook-event dl {
        grid-template-columns: minmax(0, 1fr);
    }
}

.profile-tabs b {
    min-width: 17px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #d64f5f;
    color: #fff;
    font-size: 9px;
    text-align: center;
}

.profile-section-card,
.profile-section-page .monitor-surface,
.profile-section-page .server-stat {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(9, 16, 23, 0.8);
    color: #dce7ed;
    box-shadow: none;
}
.profile-section-card {
    padding: 20px;
}
.profile-section-card h2,
.profile-section-page .monitor-head h2,
.profile-section-page .server-stat strong {
    color: #f3f7f9;
}
.profile-section-card p,
.profile-section-page .monitor-head p,
.profile-section-page .server-stat span,
.profile-section-page .server-stat small {
    color: #93a9b5;
}
.profile-section-card input,
.profile-section-card textarea,
.profile-section-page select {
    border-color: #314554;
    background: #111e27;
    color: #eef5f7;
}

.profile-notification-head .flat-action {
    flex: 0 0 auto;
    border-color: #36576a;
    background: #183544;
    color: #d7edf4;
}
.steam-panel > header.profile-notification-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.notification-list {
    display: grid;
    gap: 8px;
}
.notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border-left: 3px solid #389bc5;
    background: #111e27;
}
.notification-item[data-state="read"] {
    border-left-color: #40515b;
    opacity: 0.72;
}
.notification-item > div {
    display: grid;
    gap: 4px;
}
.notification-item strong,
.notification-item span,
.notification-item em {
    display: block;
}
.notification-item strong {
    color: #f3f7f9;
}
.notification-item span,
.notification-item em,
.notification-empty {
    color: #93a9b5;
    font-size: 11px;
}
.notification-item .flat-action {
    flex: 0 0 auto;
    border-color: #36576a;
    background: #183544;
    color: #d7edf4;
}
.operations-shell.trello-board-page[data-color-mode="light"],
.operations-shell.profile-steam-page[data-color-mode="light"] {
    --shell-chrome: #e6edf1;
    --shell-chrome-border: #cbd6dc;
    --shell-chrome-hover: #d5e1e7;
    --shell-chrome-active: #c5d9e2;
    --shell-chrome-text: #21313a;
}
.operations-shell.profile-steam-page[data-color-mode="light"] .tool-jump input {
    border-color: #cbd6dc;
    background: #f5f8fa;
    color: #21313a;
}
.profile-steam-page[data-color-mode="light"] .work-profile {
    background: #c7d8df;
}
@media (max-width: 760px) {
    .topbar-actions {
        grid-column: 3;
    }
    .topbar-actions .theme-toggle {
        min-width: 38px;
        padding-inline: 7px;
    }
    .topbar-actions .topbar-user {
        max-width: 88px;
    }
    .marketplace-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .marketplace-hero-actions .module-art {
        display: none;
    }
    
    
    
    
    
    .notification-item {
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}
/* Service UI */
:root {
    --bg: #f6f7f9;
    --ink: #18181b;
    --muted: #71717a;
    --line: #e4e4e7;
    --paper: #ffffff;
    --soft: #f4f4f5;
    --accent: #6a95ff;
    --accent-ink: #3557ad;
    --accent-soft: #eef3ff;
    --field: #ffffff;
    --sidebar: #ffffff;
    --shadow: 0 1px 2px rgba(24, 24, 27, 0.05), 0 8px 24px rgba(24, 24, 27, 0.04);
}
html[data-color-mode="dark"] body {
    color-scheme: dark;
    --bg: #09090b;
    --ink: #fafafa;
    --muted: #a1a1aa;
    --line: #2a2a2e;
    --paper: #111113;
    --soft: #1a1a1d;
    --accent-ink: color-mix(in srgb, var(--accent) 58%, #ffffff);
    --accent-soft: color-mix(in srgb, var(--accent) 12%, #111113);
    --field: #111113;
    --sidebar: #111113;
    --terminal-bg: #070709;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.2);
}
body {
    margin: 0;
    min-width: 280px;
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    transition: background-color 180ms ease, color 180ms ease;
}
.app-frame {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    transition: grid-template-columns 220ms ease;
}
.side-panel {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px;
    overflow: hidden;
    background: var(--sidebar);
    color: var(--ink);
    border-right: 1px solid var(--line);
    transition: border-color 180ms ease, width 220ms ease;
}
.brand-lockup {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    min-width: 0;
    padding: 0 6px;
}
.brand-lockup img {
    width: 32px;
    object-fit: cover;
    height: 32px;
    border-radius: 7px;
}
.brand-lockup small {
    color: var(--muted);
}
.user-avatar,
.profile-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-weight: 900;
}
.rail-toggle {
    width: 34px;
    height: 34px;
    margin: 0;
    align-self: flex-end;
    border-color: var(--line);
    border-radius: 6px;
    background: var(--soft);
    color: var(--ink);
}
.module-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.nav-link {
    min-height: 38px;
    padding: 0 9px;
    color: var(--muted);
    border-radius: 6px;
}
.nav-link:hover,
.nav-link.is-active {
    background: var(--accent-soft);
    color: var(--accent-ink);
}
.nav-line {
    width: 3px;
    height: 16px;
    border-radius: 3px;
}
.side-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 2px 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.side-footer > span {
    width: 100%;
}
.side-footer a {
    color: var(--ink);
    border: 0;
}
.theme-toggle,
.login-theme {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--soft);
    color: var(--ink);
}
.theme-toggle::before,
.login-theme::before {
    content: none;
}
.sidebar-collapsed .app-frame {
    grid-template-columns: 76px minmax(0, 1fr);
}
.page {
    min-width: 0;
    width: min(100%, 1600px);
    margin-inline: auto;
    padding: 24px clamp(20px, 3vw, 42px) 48px;
}
.overview-hero,
.sheet-hero,
.meli-hero,
.server-hero {
    min-height: 112px;
    margin-bottom: 20px;
    padding: 8px 0 20px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}
.server-hero,
html[data-color-mode="dark"] body .server-hero {
    background: transparent;
}
.server-hero > div {
    align-items: flex-start;
    text-align: left;
}
.server-hero .section-kicker,
.server-hero h1 {
    color: var(--ink);
}
h1 {
    font-size: 32px;
}
.module-art {
    width: 92px;
    height: 72px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: none;
}

.module-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.module-lane {
    position: relative;
    grid-template-columns: 48px minmax(0, 1fr);
    align-content: start;
    min-height: 138px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}
.module-lane:hover {
    border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
    background: var(--paper);
}
.module-lane img {
    width: 46px;
    height: 46px;
    padding: 6px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--accent-soft);
}
.module-lane .state-pill {
    grid-column: 2;
    justify-self: start;
    min-width: 82px;
}
.state-pill,
.monitor-row strong {
    border-radius: 6px;
}
.work-surface,
.monitor-surface,
.login-box {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}
.input-zone,
html[data-color-mode="dark"] body .input-zone {
    background: var(--paper);
}
.monitor-head {
    background: var(--soft);
}
.skeleton-row > *,
.is-skeleton {
    display: block;
    border-radius: 5px;
    background: color-mix(in srgb, var(--muted) 16%, transparent);
    color: transparent !important;
    animation: skeletonPulse 1.2s ease-in-out infinite alternate;
}

.skeleton-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.8fr) 100px minmax(180px, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
}
.skeleton-row span,
.skeleton-row strong,
.skeleton-row em {
    height: 11px;
}
.skeleton-row strong {
    width: 72px;
}
.login-page {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 20px;
    background: var(--bg);
}
.login-box {
    width: min(100%, 420px);
    padding: 28px;
}
.login-box .brand-lockup {
    padding: 0;
    margin-bottom: 24px;
}
.unavailable-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    background: #0b0f14;
    color: #f0f3f6;
}
.unavailable-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    width: min(100%, 780px);
    overflow: hidden;
    border: 1px solid #30363d;
    border-radius: 8px;
    background: #161b22;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}
.unavailable-code {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 360px;
    border-left: 1px solid #30363d;
    background: #11161d;
    color: #f85149;
}
.unavailable-code small {
    color: #8b949e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
}
.unavailable-code strong {
    margin-top: 6px;
    font-size: 68px;
    line-height: 1;
}
.unavailable-content {
    padding: 42px;
}
.unavailable-content .brand-lockup {
    margin-bottom: 54px;
    padding: 0;
    color: #f0f3f6;
}
.unavailable-status {
    color: #f85149;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.unavailable-content h1 {
    margin: 9px 0 12px;
    color: #f0f3f6;
    font-size: 30px;
}
.unavailable-content > p {
    margin: 0;
    max-width: 440px;
    color: #9da7b3;
    font-size: 14px;
    line-height: 1.6;
}
.unavailable-path {
    display: block;
    margin-top: 22px;
    overflow: hidden;
    color: #8b949e;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.unavailable-action {
    display: inline-flex;
    margin-top: 24px;
    padding: 9px 14px;
    border: 1px solid #3d444d;
    border-radius: 6px;
    background: #21262d;
    color: #f0f3f6;
    font-size: 13px;
    font-weight: 700;
}
.unavailable-action:hover {
    border-color: #8b949e;
    background: #30363d;
}
.unavailable-shell[data-error-code="404"] .unavailable-code,
.unavailable-shell[data-error-code="404"] .unavailable-status {
    color: #d29922;
}
@media (max-width: 620px) {
    .unavailable-shell {
        grid-template-columns: minmax(0, 1fr);
    }
    .unavailable-code {
        grid-row: 1;
        min-height: 150px;
        border-bottom: 1px solid #30363d;
        border-left: 0;
    }
    .unavailable-content {
        padding: 28px 24px;
    }
    .unavailable-content .brand-lockup {
        margin-bottom: 36px;
    }
}
.login-theme {
    position: fixed;
    top: 18px;
    right: 18px;
}
@keyframes skeletonPulse {
    to { opacity: 0.46; }
}
@media (max-width: 1120px) {
    .module-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .app-frame,
    .sidebar-collapsed .app-frame {
        grid-template-columns: minmax(0, 1fr);
    }
    .side-panel {
        position: sticky;
        top: 0;
        z-index: 50;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px;
        height: auto;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .brand-lockup {
        grid-column: 1;
    }
    .rail-toggle {
        grid-column: 2;
        grid-row: 1;
    }
    .module-nav,
    .side-footer {
        grid-column: 1 / -1;
    }
    .module-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 34vh;
        overflow-y: auto;
    }
    .sidebar-collapsed .module-nav,
    .sidebar-collapsed .side-footer {
        display: none;
    }
    .page {
        padding: 18px 14px 36px;
    }
    h1 {
        font-size: 26px;
    }
    .overview-hero,
    .sheet-hero,
    .meli-hero,
    .server-hero {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 4px 0 16px;
    }
    .module-art {
        width: 64px;
        height: 58px;
    }
    
    .module-board,
    .work-surface {
        grid-template-columns: minmax(0, 1fr);
    }
    .module-lane {
        min-height: 126px;
    }
    .action-line {
        align-items: stretch;
    }
    .action-line button {
        flex: 1 1 140px;
    }
    .monitor-row,
    .notification-item,
    .skeleton-row {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 420px) {
    .module-nav {
        grid-template-columns: minmax(0, 1fr);
    }
    .overview-hero,
    .sheet-hero,
    .meli-hero,
    .server-hero {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 760px) {
    .rail-toggle {
        position: absolute;
        top: 12px;
        right: 12px;
        justify-self: end;
        align-self: center;
    }
    .side-panel .module-nav,
    .side-panel .side-footer {
        display: none;
    }
    .mobile-menu-open .module-nav {
        display: grid;
    }
    .mobile-menu-open .side-footer {
        display: flex;
    }
}
@media (max-width: 760px) {
    .side-panel .rail-toggle {
        display: block !important;
        z-index: 3;
        background: var(--ink);
        color: var(--paper);
        border-color: var(--ink);
    }
}
.profile-avatar:not(.is-skeleton) {
    color: var(--accent-ink) !important;
}
/* Profile and administration */
.brand-mark {
    display: grid;
    flex: 0 0 auto;
    border-radius: 7px;
}
.brand-lockup > span {
    min-width: 0;
}
.brand-lockup small a:hover {
    color: var(--accent-ink);
}
.user-avatar,
.profile-avatar {
    overflow: hidden;
}
.user-avatar img,
.profile-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.logout-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-left: auto;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, #dc2626 28%, var(--line)) !important;
    border-radius: 6px;
    background: color-mix(in srgb, #dc2626 7%, var(--paper));
    color: #b91c1c !important;
    font-weight: 800;
}
.logout-link:hover {
    border-color: #dc2626 !important;
    background: color-mix(in srgb, #dc2626 12%, var(--paper));
}
html[data-color-mode="dark"] body .logout-link {
    color: #fca5a5 !important;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    font-size: 26px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--line));
}

.profile-photo-error {
    margin-bottom: 14px;
    border-radius: 6px;
}

.connection-surface {
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.55fr);
    align-items: stretch;
}
.connection-form {
    gap: 16px;
    padding: 20px;
    background: var(--paper);
}
.connection-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
}
.connection-field {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.connection-field-wide {
    grid-column: 1 / -1;
}
.connection-field input {
    min-width: 0;
    height: var(--control-height);
    background: var(--paper);
}
.connection-field .field-hint {
    min-height: 32px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}
.connection-field .field-hint a {
    color: var(--accent-ink);
    font-weight: 800;
}
.connection-actions {
    justify-content: flex-end;
    margin-top: 2px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.connection-status {
    display: block;
    min-height: 100%;
    padding: 12px;
    border-left: 1px solid var(--line);
    background: var(--soft);
}
.connection-status .server-monitor {
    align-content: start;
    gap: 8px;
}
.connection-status .monitor-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}
.connection-status .monitor-row strong {
    justify-self: start;
}
.visibility-filter {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.filter-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 7px;
}
.filter-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    text-transform: none;
    cursor: pointer;
}
.filter-options label:hover {
    border-color: var(--accent);
}
.filter-options label:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
    background: var(--accent-soft);
    color: var(--accent-ink);
}
.filter-options input {
    width: 16px;
    min-height: 16px;
    margin: 0;
    accent-color: var(--accent);
}

.visibility-filter {
    position: sticky;
    top: 10px;
    z-index: 3;
    border-left: 4px solid var(--accent);
    background: var(--paper);
    box-shadow: var(--shadow);
}
.visibility-filter > label {
    color: var(--accent-ink);
}
.visibility-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}
.date-range-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr)) auto;
    align-items: end;
    gap: 8px;
}
.date-range-controls > label:not(.text-filter-switch) {
    display: grid;
    gap: 6px;
}
.date-range-controls input[type="date"] {
    min-width: 0;
    background: var(--field);
}
.visibility-controls input[type="text"] {
    min-width: 0;
    background: var(--field);
}
.text-filter-switch {
    position: static;
    display: grid;
    place-items: center;
    min-width: 116px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-ink);
}
.text-filter-switch span::before {
    content: "Hide matches";
}
.text-filter-switch input:checked + span::before {
    content: "Show matches";
}
.planilha-type-switch span::before {
    content: "Returns 🔁";
}
.planilha-type-switch input:checked + span::before {
    content: "Wallet 💵";
}

.admin-user-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    background: var(--accent-soft);
    color: var(--accent-ink);
}
.admin-user-copy {
    min-width: 0;
}
.admin-user-copy span,
.admin-user-copy em {
    display: block;
}

.feedback-form {
    gap: 22px;
    padding: 26px;
}

.feedback-form .action-line small {
    color: var(--muted);
}
.feedback-form .field {
    display: grid;
    gap: 9px;
}
.feedback-form textarea {
    min-height: 210px;
    resize: vertical;
}
.feedback-deep-trigger {
    position: fixed;
    z-index: 160;
    width: 118px;
    padding: 3px;
    overflow: hidden;
    border: 1px solid #66c0f4;
    border-radius: 3px;
    background: #101820;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
    cursor: pointer;
    transform: rotate(42deg);
    transition: opacity 260ms ease, transform 260ms ease;
}
.feedback-deep-trigger img {
    display: block;
    width: 100%;
}
.feedback-deep-trigger:hover {
    transform: rotate(42deg) scale(1.06);
}
.feedback-deep-trigger.is-collected {
    opacity: 0;
    transform: rotate(42deg) scale(0.04);
}
.achievement-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 200;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: min(340px, calc(100vw - 32px));
    padding: 8px;
    border: 1px solid #3d5868;
    border-radius: 4px;
    background: linear-gradient(135deg, #17242e, #10171d);
    color: #f3f7f9;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5);
    animation: achievementToast 280ms ease-out both;
}
.achievement-toast img {
    width: 72px;
    height: 44px;
    object-fit: cover;
}
.achievement-toast span,
.achievement-toast small,
.achievement-toast strong {
    display: block;
}
.achievement-toast small {
    margin-bottom: 4px;
    color: #66c0f4;
    font-size: 10px;
    text-transform: uppercase;
}
.achievement-toast strong {
    font-size: 14px;
}
@keyframes achievementToast {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

.server-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.server-stat {
    display: grid;
    gap: 6px;
    min-height: 82px;
    padding: 14px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--muted);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}
.server-stat[data-state="ok"] {
    border-top-color: #16a34a;
}
.server-stat[data-state="attention"] {
    border-top-color: #d97706;
}
.server-stat span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.server-stat strong {
    font-size: 18px;
}
.server-stat small {
    color: var(--muted);
}
.server-monitor-head {
    background: var(--paper);
}
.server-surface .server-monitor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    background: var(--soft);
}
.server-surface .monitor-row {
    grid-template-columns: minmax(130px, 0.7fr) 100px minmax(0, 1fr);
    min-height: 64px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}
@media (max-width: 1080px) {
    .connection-surface {
        grid-template-columns: minmax(0, 1fr);
    }
    .connection-status {
        border-top: 1px solid var(--line);
        border-left: 0;
    }
    
}
@media (max-width: 760px) {
    .connection-fields,
    .server-summary,
    .server-surface .server-monitor {
        grid-template-columns: minmax(0, 1fr);
    }
    
    .connection-field-wide {
        grid-column: auto;
    }
    .visibility-filter {
        top: 72px;
    }
    .visibility-controls,
    .date-range-controls {
        grid-template-columns: minmax(0, 1fr);
    }
    .text-filter-switch {
        width: 100%;
    }
    .admin-user-avatar {
        display: none;
    }
    .server-surface .monitor-row {
        grid-template-columns: minmax(0, 1fr);
    }
}
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* Screenshots */
.capture-page {
    --accent: #0f766e;
    --accent-ink: #115e59;
    --accent-soft: #e5f7f4;
}
.capture-audit {
    display: grid;
    gap: 16px;
}
.capture-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 128px;
    padding: 24px 26px;
    border-left: 8px solid #2dd4bf;
    border-radius: 8px;
    background: #111827;
    color: #f8fafc;
    box-shadow: var(--shadow);
}
.capture-hero h1 {
    margin: 0;
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: -0.045em;
}
.capture-tabs {
    display: flex;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}
.capture-tabs button {
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.capture-tabs button:hover {
    background: var(--soft);
    color: var(--ink);
}
.capture-tabs button[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    background: var(--accent-soft);
    color: var(--accent-ink);
}
.capture-tab-panel {
    display: grid;
    gap: 16px;
}
.capture-tab-panel[hidden] {
    display: none;
}
.capture-create-form {
    width: min(100%, 760px);
    margin: 0 auto;
}
.capture-error,
.capture-clean {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 5px solid #16a34a;
    border-radius: 7px;
    background: var(--paper);
}
.capture-error {
    border-left-color: #dc2626;
    color: #b91c1c;
}
.capture-clean {
    display: flex;
    gap: 10px;
}
.capture-alert {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    background: color-mix(in srgb, #f59e0b 9%, var(--paper));
}
.capture-alert-copy {
    display: flex;
    align-items: center;
    gap: 12px;
}
.capture-alert-copy > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f59e0b;
    color: #291800;
    font-size: 20px;
    font-weight: 900;
}
.capture-alert h2 {
    margin: 0;
}
.capture-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}
.capture-preview {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 8px;
    border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--line));
    border-radius: 7px;
    background: var(--paper);
}
.capture-preview img {
    width: 116px;
    height: 72px;
    border-radius: 5px;
    object-fit: cover;
    background: var(--soft);
}
.capture-preview-placeholder {
    display: grid;
    place-items: center;
    width: 116px;
    height: 72px;
    border-radius: 5px;
    background: var(--soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.capture-preview strong,
.capture-preview small {
    display: block;
    overflow-wrap: anywhere;
}
.capture-preview small {
    margin-top: 5px;
    color: var(--muted);
}
.capture-console {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}
.capture-form,
.capture-organizer {
    display: grid;
    align-content: start;
    gap: 14px;
    overflow: hidden;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}
.capture-organizer {
    border-left: 1px solid var(--line);
    background: var(--paper);
}
.capture-form textarea {
    min-height: 180px;
    resize: none;
    background: var(--field);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.capture-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
.capture-source-options,
.capture-month-options,
.capture-organize-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}
.capture-source-options legend,
.capture-month-options legend,
.capture-organize-scope legend {
    width: 100%;
    margin: 0;
    margin: 0 0 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.capture-source-options label,
.capture-month-options label,
.capture-organize-scope label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 130px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--soft);
    cursor: pointer;
}
.capture-source-options label:has(input:checked),
.capture-month-options label:has(input:checked),
.capture-organize-scope label:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-ink);
}
.capture-source-options input,
.capture-month-options input,
.capture-organize-scope input {
    width: 16px;
    min-height: 16px;
    margin: 0;
    accent-color: var(--accent);
}
.capture-month-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.capture-month-options legend {
    grid-column: 1 / -1;
}
.capture-month-options label {
    min-width: 0;
    padding: 8px 9px;
    background: var(--paper);
}
.capture-organize-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.capture-organize-scope legend {
    grid-column: 1 / -1;
}
.capture-organize-scope label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
}
.capture-organize-scope input {
    width: 16px;
    min-height: 16px;
    margin: 1px 0 0;
    accent-color: var(--accent);
}
.capture-job-panel {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}
.capture-job-panel[hidden] {
    display: none;
}
.capture-job-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}
.capture-job-panel .queue-list {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}
.capture-job-output pre {
    min-height: 130px;
    max-height: 320px;
    margin: 0;
}
.capture-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.capture-result-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}
.capture-result-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    font-weight: 900;
}
.capture-result-panel header strong {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    border-radius: 5px;
    background: var(--soft);
}
.capture-found header {
    border-top: 4px solid #16a34a;
}
.capture-missing header {
    border-top: 4px solid #dc2626;
}
.capture-result-list article {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.capture-result-list article:last-child {
    border-bottom: 0;
}
.capture-result-mark {
    color: #16a34a;
    font-size: 18px;
    font-weight: 900;
}
.capture-result-list strong,
.capture-result-list a {
    display: block;
}
.capture-result-list a small {
    margin-left: 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.capture-result-list a {
    margin-top: 4px;
    color: var(--accent-ink);
    font-size: 12px;
    overflow-wrap: anywhere;
}
.capture-missing-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 14px;
}
.capture-missing-list code {
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, #dc2626 30%, var(--line));
    border-radius: 5px;
    background: color-mix(in srgb, #dc2626 7%, var(--paper));
}
.capture-empty {
    margin: 0;
    padding: 20px 16px;
}
@media (max-width: 840px) {
    .capture-hero,
    .capture-console,
    .capture-results {
        grid-template-columns: minmax(0, 1fr);
    }
    .capture-organizer {
        border-top: 1px solid var(--line);
        border-left: 0;
    }
    .capture-hero {
        align-items: start;
    }
}
@media (max-width: 520px) {
    .capture-hero,
    .capture-form,
    .capture-organizer {
        padding: 18px;
    }
    .capture-month-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .capture-form-footer,
    .capture-clean {
        align-items: stretch;
        flex-direction: column;
    }
    .capture-preview {
        grid-template-columns: minmax(0, 1fr);
    }
    .capture-preview img {
        width: 100%;
        height: 140px;
    }
}
/* Playwright */
.playwright-analysis-panel,
.playwright-compare-panel,
.playwright-access-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}
.playwright-analysis-panel,
.playwright-compare-panel {
    padding: 0;
}
.playwright-compare-panel {
    display: grid;
    gap: 16px;
}
.playwright-access-panel {
    margin-top: 0;
    overflow: hidden;
}
.playwright-account {
    --account-accent: #2563eb;
    display: grid;
    grid-template-columns: minmax(170px, 0.9fr) 120px minmax(180px, 1.1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    border-left: 4px solid var(--account-accent);
}
.playwright-account[data-account-tone="1"],
.playwright-analysis-account[data-account-tone="1"] { --account-accent: #7c3aed; }
.playwright-account[data-account-tone="2"],
.playwright-analysis-account[data-account-tone="2"] { --account-accent: #0f766e; }
.playwright-account[data-account-tone="3"],
.playwright-analysis-account[data-account-tone="3"] { --account-accent: #c2410c; }
.playwright-account-action {
    min-width: 86px;
}
.playwright-account:last-child {
    border-bottom: 0;
}
.playwright-account span strong,
.playwright-account span small {
    display: block;
    overflow-wrap: anywhere;
}
.playwright-account span small,
.playwright-account em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}
.playwright-account > strong {
    justify-self: start;
    padding: 5px 8px;
    border-radius: 5px;
    background: var(--soft);
    font-size: 11px;
    text-transform: uppercase;
}
.playwright-account[data-state="running"] > strong {
    background: #dcfce7;
    color: #166534;
}
.playwright-account[data-state="starting"] > strong,
.playwright-account[data-state="login_required"] > strong {
    background: #fef3c7;
    color: #92400e;
}
.playwright-account[data-state="error"] > strong {
    background: #fee2e2;
    color: #991b1b;
}
.playwright-analysis-form {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    align-items: stretch;
    gap: 0;
}
.playwright-analysis-form label,
.playwright-analysis-form label span {
    display: grid;
    gap: 6px;
}
.playwright-analysis-form label span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.playwright-analysis-form input,
.playwright-analysis-form textarea {
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
}
.playwright-analysis-codes {
    grid-column: auto;
    padding: 20px;
    border-right: 1px solid var(--line);
}
.playwright-analysis-codes textarea {
    min-height: 138px;
    padding: 12px;
    resize: none;
}
.playwright-analysis-results {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}
.playwright-attention-panel {
    border-color: #f59e0b;
    background: color-mix(in srgb, #f59e0b 7%, var(--paper));
}
.playwright-attention-panel .playwright-section-head > strong {
    margin-left: auto;
    color: #92400e;
    font-size: 12px;
}
.playwright-attention-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}
.playwright-attention-list article {
    display: grid;
    grid-template-columns: minmax(170px, 0.6fr) 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-left: 4px solid #d97706;
    border-radius: 6px;
    background: var(--paper);
}
.playwright-attention-list strong,
.playwright-attention-list small {
    display: block;
}
.playwright-attention-list small {
    color: var(--muted);
    font-size: 11px;
}
.playwright-attention-list article[data-attention="external_carrier_refund"] {
    border-left-color: #dc2626;
}
.playwright-analysis-account {
    --account-accent: #2563eb;
    display: grid;
    grid-template-columns: minmax(160px, 0.5fr) minmax(240px, 1fr);
    gap: 8px 18px;
    padding: 14px;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    border-left: 4px solid var(--account-accent);
    border-radius: 0;
    box-shadow: none;
}
.playwright-analysis-account > div:first-child {
    padding: 8px 10px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--account-accent) 10%, var(--paper));
}
.playwright-analysis-account > div:first-child strong {
    color: var(--account-accent);
}
.playwright-analysis-account > div strong,
.playwright-analysis-account > div small {
    display: block;
}
.playwright-analysis-account small,
.playwright-analysis-account p,
.playwright-analysis-account em,
.playwright-analysis-orders small {
    color: var(--muted);
    font-size: 11px;
}
.playwright-analysis-account p,
.playwright-analysis-account em {
    margin: 0;
    font-style: normal;
}
.playwright-analysis-orders {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 7px;
}
.playwright-analysis-orders span {
    --order-accent: var(--muted);
    --order-strength: 7%;
    padding: 9px 10px;
    border-left: 3px solid var(--order-accent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--order-accent) var(--order-strength), var(--paper));
}
.playwright-analysis-orders strong,
.playwright-analysis-orders small {
    display: block;
}
.playwright-analysis-orders small {
    color: var(--order-accent);
}
.playwright-analysis-orders span[data-order-tone="cancelled"] { --order-accent: #dc2626; --order-strength: 9%; }
.playwright-analysis-orders span[data-order-tone="returning"] { --order-accent: #2563eb; --order-strength: 10%; }
.playwright-analysis-orders span[data-order-tone="lost"] { --order-accent: #991b1b; --order-strength: 18%; }
.playwright-analysis-orders span[data-order-tone="partial"] { --order-accent: #c2410c; --order-strength: 11%; }
.playwright-analysis-orders span[data-order-tone="refunded"] { --order-accent: #7c3aed; --order-strength: 10%; }
.playwright-analysis-orders span[data-order-tone="returned"] { --order-accent: #15803d; --order-strength: 10%; }
.playwright-analysis-orders span[data-order-tone="cte"] { --order-accent: #0f766e; --order-strength: 10%; }
.playwright-analysis-orders span[data-order-tone="review"] { --order-accent: #a16207; --order-strength: 11%; }
.playwright-analysis-orders span[data-order-tone="ignored"] { --order-accent: #64748b; --order-strength: 7%; }
.playwright-analysis-orders span[data-state="unresolved"] {
    background: #fef3c7;
}
.playwright-compare-results {
    display: grid;
    gap: 14px;
    max-height: 520px;
    min-width: 0;
    padding: 12px;
    overflow: auto;
}
.playwright-compare-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}
.playwright-compare-summary span {
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--soft);
}
.playwright-compare-summary strong {
    font-size: 19px;
}
.playwright-compare-summary small,
.playwright-compare-orders small,
.playwright-differences summary span {
    color: var(--muted);
    font-size: 10px;
}
.playwright-compare-notice {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
}
.playwright-compare-notice[data-state="success"] {
    background: #dcfce7;
    color: #166534;
}
.playwright-compare-notice[data-state="attention"] {
    background: #fef3c7;
    color: #92400e;
}
.playwright-compare-results section {
    display: grid;
    gap: 8px;
}
.playwright-compare-results h3 {
    margin: 0;
    font-size: 12px;
}
.playwright-compare-orders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
}
.playwright-compare-orders span {
    display: grid;
    gap: 2px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow-wrap: anywhere;
}
.playwright-differences {
    display: grid;
    gap: 7px;
}
.playwright-differences details {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}
.playwright-differences summary {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
}
.playwright-difference-table {
    display: grid;
    border-top: 1px solid var(--line);
    font-size: 11px;
}
.playwright-difference-table > div {
    display: grid;
    grid-template-columns: minmax(110px, 0.8fr) repeat(2, minmax(120px, 1fr));
}
.playwright-difference-table span,
.playwright-difference-table strong {
    padding: 8px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
}
.playwright-difference-table > div > :last-child {
    border-right: 0;
}
.playwright-difference-head {
    background: var(--soft);
    font-weight: 800;
}
@media (max-width: 980px) {
    .playwright-analysis-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .playwright-analysis-form .capture-form-footer {
        grid-column: 1 / -1;
    }
}
@media (max-width: 680px) {
    .playwright-account {
        grid-template-columns: minmax(0, 1fr);
    }
    .playwright-attention-list article {
        grid-template-columns: minmax(0, 1fr);
    }
    .playwright-attention-list article .flat-action {
        justify-self: start;
    }
    .playwright-analysis-form,
    .playwright-analysis-account {
        grid-template-columns: minmax(0, 1fr);
    }
    .playwright-compare-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .playwright-difference-table > div {
        grid-template-columns: minmax(90px, 0.7fr) repeat(2, minmax(100px, 1fr));
    }
}
/* Operational layout */
.playwright-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.playwright-hero {
    margin-bottom: 0;
}
.playwright-route {
    display: grid;
    grid-auto-flow: column;
    gap: 8px;
    justify-self: end;
}
.playwright-route span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.playwright-activity-panel,
.playwright-browser-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}
.playwright-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--accent) 4%, var(--paper));
}
.playwright-section-head h2 {
    margin: 0;
}
.playwright-section-head .primary-action {
    margin-left: auto;
}
.playwright-section-number {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
}
.playwright-analysis-controls {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 20px;
    background: var(--soft);
}
.playwright-analysis-controls label,
.playwright-analysis-controls label span {
    display: grid;
    gap: 6px;
}
.playwright-analysis-actions {
    display: grid;
    grid-template-columns: auto minmax(130px, 1fr);
    gap: 8px;
    margin-top: 2px;
}
.playwright-activity-panel .playwright-analysis-results {
    margin: 0;
    padding: 12px;
}
.playwright-analysis-results > .capture-empty,
.playwright-compare-results > .capture-empty {
    border: 1px dashed var(--line);
    border-radius: 6px;
    background: var(--soft);
    text-align: center;
}
.playwright-analysis-account:last-child {
    border-bottom: 0;
}
.playwright-tools-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(270px, 0.6fr);
    align-items: start;
    gap: 16px;
}
.playwright-browser-action {
    display: grid;
    padding: 16px;
}
.playwright-access-panel .playwright-section-head {
    margin: 0;
    padding: 10px 16px;
}
/* Screenshot workspace */
.capture-hero .section-kicker {
    color: #5eead4;
}
.capture-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -22px -22px 4px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--accent) 5%, var(--paper));
}
.capture-section-head h2 {
    margin: 0;
}
.capture-organizer .capture-section-head {
    background: color-mix(in srgb, #2563eb 5%, var(--paper));
}
@media (max-width: 980px) {
    .playwright-analysis-form,
    .playwright-tools-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .playwright-analysis-codes {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}
@media (max-width: 840px) {
    .playwright-route {
        justify-self: start;
    }
}
@media (max-width: 680px) {
    .playwright-route {
        grid-auto-flow: row;
        width: 100%;
    }
    .playwright-analysis-actions {
        grid-template-columns: minmax(0, 1fr);
    }
    .playwright-section-head {
        flex-wrap: wrap;
    }
    .playwright-section-head .primary-action {
        width: 100%;
        margin-left: 0;
    }
}
@media (max-width: 520px) {
    .capture-section-head {
        margin: -18px -18px 4px;
    }
}

#profile-photo-name {
    min-width: 0;
    padding: 0 10px;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reference-led operational surfaces */
.app-workspace {
    min-width: 0;
}
.workspace-topbar {
    display: none;
}
.operations-shell {
    --idw-blue: #6288ff;
    --idw-soft: #f5f6f8;
    --idw-line: #e8eaf0;
    --idw-muted: #89909f;
    background: #f3f4f6;
    color: #20242c;
}
.operations-shell .app-frame {
    grid-template-columns: 244px minmax(0, 1fr);
}
.operations-shell.sidebar-collapsed .app-frame {
    grid-template-columns: 50px minmax(0, 1fr);
}
.operations-shell .side-panel {
    z-index: 60;
    gap: 8px;
    width: auto;
    padding: 12px;
    background: #ffffff;
    border-color: #dfe2e8;
}
.operations-shell .side-panel .brand-lockup {
    min-height: 40px;
}
.operations-shell .side-panel .brand-lockup img {
    width: 30px;
    height: 30px;
    border-radius: 5px;
}
.operations-shell.sidebar-collapsed .side-panel .brand-lockup > span,
.operations-shell.sidebar-collapsed .side-panel .side-footer {
    display: none;
}
.operations-shell .side-panel .rail-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-top: -6px;
    align-self: flex-start;
    padding: 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #929baa;
    cursor: pointer;
}
.operations-shell .side-panel .rail-toggle:hover {
    background: #eef4fc;
    color: #6288ff;
}
.operations-shell .side-panel .rail-toggle img {
    width: 12px;
    height: 12px;
    transition: transform 160ms ease;
}
.operations-shell:not(.sidebar-collapsed) .side-panel .rail-toggle img {
    transform: rotate(180deg);
}
.operations-shell .module-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}
.operations-shell .nav-link {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 40px;
    padding: 0 9px;
    border-radius: 8px;
    transform: none;
}
.operations-shell .nav-link .nav-line {
    display: none;
}
.operations-shell .nav-link img {
    width: 21px;
    min-width: 21px;
    height: 21px;
    object-fit: contain;
    opacity: 0.7;
}
.operations-shell.sidebar-collapsed .side-panel {
    padding: 8px 4px;
}
.operations-shell.sidebar-collapsed .side-panel .brand-lockup {
    justify-content: center;
    padding: 0;
}
.operations-shell.sidebar-collapsed .side-panel .rail-toggle {
    align-self: center;
}
.operations-shell.sidebar-collapsed .module-nav {
    overflow: visible;
}
.operations-shell.sidebar-collapsed .nav-link {
    display: grid;
    place-items: center;
    width: 40px;
    padding: 0;
}
.operations-shell.sidebar-collapsed .nav-link > span:last-child {
    display: none;
}
.operations-shell .nav-link:hover,
.operations-shell .nav-link.is-active {
    background: #eaf3ff;
}
.operations-shell .nav-link:hover img,
.operations-shell .nav-link.is-active img {
    opacity: 1;
}
.operations-shell .workspace-topbar {
    position: sticky;
    top: 0;
    z-index: 55;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) minmax(0, 1fr);
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 24px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e1e4ea;
    backdrop-filter: blur(10px);
}
.topbar-context {
    grid-column: 2;
    min-width: 0;
}
.topbar-context .tool-jump,
.topbar-context .trello-loading-count {
    grid-column: auto;
}
.topbar-context .trello-loading-count {
    display: block;
    text-align: center;
}
.topbar-context .trello-loading-count[hidden] {
    display: none;
}
.trello-sync-anchor {
    position: absolute;
    top: 6px;
    left: 24px;
}
.trello-sync-toggle {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--shell-chrome-border);
    border-radius: 9px;
    background: var(--shell-chrome-hover);
    color: var(--shell-chrome-text);
}
.trello-sync-toggle svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.trello-sync-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 80;
    display: flex;
    flex-wrap: wrap;
    width: 430px;
    padding: 12px;
    gap: 10px;
    align-items: end;
    border: 1px solid var(--shell-chrome-border);
    border-radius: 10px;
    background: var(--shell-chrome);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.trello-sync-filters {
    flex: 1 0 100%;
    border-top: 1px solid var(--shell-chrome-border);
    color: var(--shell-chrome-text);
}
.trello-sync-filters summary {
    padding: 8px 0 0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}
.trello-sync-filters > div {
    display: grid;
    padding-top: 10px;
    gap: 10px;
}
.trello-sync-panel .trello-skip-completed {
    display: flex;
    align-items: center;
}
.trello-sync-codes textarea {
    width: 100%;
    height: 64px;
    padding: 8px;
    resize: none;
    border: 1px solid var(--shell-chrome-border);
    border-radius: 7px;
    background: var(--shell-chrome-hover);
    color: var(--shell-chrome-text);
    font: inherit;
}
.trello-sync-panel[hidden] {
    display: none;
}
.trello-sync-panel label {
    display: grid;
    min-width: 0;
    gap: 5px;
    color: var(--shell-chrome-text);
    font-size: 11px;
    font-weight: 700;
}
.trello-sync-panel select {
    width: 140px;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--shell-chrome-border);
    border-radius: 7px;
    background: var(--shell-chrome-hover);
    color: var(--shell-chrome-text);
    color-scheme: dark;
}
.trello-range-toggle {
    width: 128px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--shell-chrome-border);
    border-radius: 7px;
    background: var(--shell-chrome-hover);
    color: var(--shell-chrome-text);
    font: inherit;
    text-align: left;
}
.trello-range-calendar {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 280px;
    padding: 12px;
    border: 1px solid var(--shell-chrome-border);
    border-radius: 10px;
    background: var(--shell-chrome);
    color: var(--shell-chrome-text);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.trello-range-calendar[hidden] {
    display: none;
}
.trello-calendar-week,
.trello-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.trello-calendar-week {
    margin-bottom: 5px;
    color: var(--shell-chrome-muted);
    font-size: 10px;
    text-align: center;
}
.trello-calendar-days button {
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
}
.trello-calendar-days button:hover,
.trello-calendar-days button.is-in-range {
    background: var(--shell-chrome-hover);
}
.trello-calendar-days button.is-selected {
    background: var(--accent);
    color: #fff;
}
.trello-range-calendar footer {
    display: flex;
    min-height: 34px;
    margin-top: 10px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--shell-chrome-border);
    color: var(--shell-chrome-muted);
    font-size: 11px;
}
.operations-shell.trello-board-page[data-color-mode="light"] .trello-sync-panel select {
    color-scheme: light;
}
.shell-navigating .app-workspace {
    cursor: progress;
}
.shell-navigating .app-workspace > main {
    opacity: 0.82;
}
.app-workspace > main {
    transition: opacity 100ms ease;
}
.shell-page-entering {
    animation: 150ms ease-out both shell-page-in;
}
@keyframes shell-page-in {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
}
.operations-shell.trello-board-page,
.operations-shell.profile-steam-page {
    --shell-chrome: #1d2125;
    --shell-chrome-border: #343a40;
    --shell-chrome-hover: #2b3137;
    --shell-chrome-active: #3a5262;
    --shell-chrome-text: #dce3e8;
}
.operations-shell.profile-steam-page {
    --shell-chrome: #171f28;
    --shell-chrome-border: #263746;
    --shell-chrome-hover: #22313d;
    --shell-chrome-active: #16475a;
}
.operations-shell.trello-board-page .side-panel,
.operations-shell.trello-board-page .workspace-topbar,
.operations-shell.profile-steam-page .side-panel,
.operations-shell.profile-steam-page .workspace-topbar {
    border-color: var(--shell-chrome-border);
    background: var(--shell-chrome);
    color: var(--shell-chrome-text);
}
.operations-shell.trello-board-page .brand-lockup,
.operations-shell.trello-board-page .nav-link,
.operations-shell.trello-board-page .side-footer,
.operations-shell.trello-board-page .topbar-user,
.operations-shell.profile-steam-page .brand-lockup,
.operations-shell.profile-steam-page .nav-link,
.operations-shell.profile-steam-page .side-footer,
.operations-shell.profile-steam-page .topbar-user {
    color: var(--shell-chrome-text);
}
.operations-shell.trello-board-page .nav-link:hover,
.operations-shell.trello-board-page .nav-link.is-active,
.operations-shell.trello-board-page .topbar-user:hover,
.operations-shell.profile-steam-page .nav-link:hover,
.operations-shell.profile-steam-page .nav-link.is-active,
.operations-shell.profile-steam-page .topbar-user:hover {
    background: var(--shell-chrome-active);
}
.operations-shell.trello-board-page .side-panel .rail-toggle:hover,
.operations-shell.profile-steam-page .side-panel .rail-toggle:hover {
    background: var(--shell-chrome-hover);
}
.operations-shell.profile-steam-page .tool-jump input {
    border-color: var(--shell-chrome-border);
    background: #101820;
    color: var(--shell-chrome-text);
}
.topbar-menu {
    display: none;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: #7d8491;
    font-size: 0;
}
.topbar-menu img {
    width: 12px;
    height: 12px;
}
.tool-jump {
    grid-column: 2;
    position: relative;
}
.tool-jump span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.tool-jump input {
    width: 100%;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #e1e4ec;
    border-radius: 14px;
    background: #f7f8fb;
    color: #303640;
    font-size: 12px;
}
.topbar-user {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 9px 5px 5px;
    border-radius: 9px;
    color: #20242c;
    font-size: 12px;
    font-weight: 700;
}
.topbar-user .user-avatar {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 11px;
}
.topbar-user strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-user:hover {
    background: #f3f5f8;
}
.topbar-user.is-static {
    cursor: default;
}
.topbar-user.is-static:hover {
    background: transparent;
}
.idw-page {
    min-height: calc(100vh - 48px);
    padding: 0 14px 34px;
    background: #f3f4f6;
}
@media (min-width: 1081px) {
    .operations-shell .module-page .work-surface {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .operations-shell .module-page .work-surface.webhook-surface {
        grid-template-columns: minmax(0, 1fr);
    }
}
.operations-shell .module-page .input-zone,
.operations-shell .module-page .result-zone {
    min-width: 0;
}
.operations-shell .module-page .queue-columns,
.operations-shell .module-page .queue-item {
    display: grid;
    grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.4fr) 78px;
    align-items: center;
    gap: 12px;
}
.operations-shell .module-page .queue-columns {
    padding: 7px 0;
    border-bottom: 1px solid #e7e9ef;
    color: #858b96;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.operations-shell .module-page .queue-item {
    padding: 7px;
}
.operations-shell .module-page .queue-item > small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.operations-shell [data-planilha-return-options] {
    grid-template-columns: minmax(0, 1fr);
}
.page-crumb {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 42px;
    margin: 0 -14px 22px;
    padding: 0 14px;
    border-bottom: 1px solid #e4e6eb;
    background: #f7f7f8;
    color: #6485f7;
    font-size: 12px;
}
.page-crumb a,
.page-crumb span {
    position: relative;
    color: inherit;
}
.page-crumb a::after,
.page-crumb span:last-child::after {
    position: absolute;
    right: 0;
    bottom: -14px;
    left: 0;
    height: 2px;
    background: #6689ff;
    content: "";
}
.dashboard-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 0 2px 18px;
}
.dashboard-title h1 {
    margin: 0;
    color: #161a21;
    font-size: 25px;
    font-weight: 500;
}
.dashboard-title p {
    margin: 5px 0 0;
    color: #9096a2;
    font-size: 11px;
}
.dashboard-availability {
    padding: 7px 10px;
    border-radius: 5px;
    background: #6689ff;
    color: #ffffff;
    font-size: 11px;
}
.dashboard-panel {
    min-height: 620px;
    padding: 22px 28px 44px;
    border-radius: 11px 11px 0 0;
    background: #ffffff;
    box-shadow: 0 3px 20px rgba(35, 43, 57, 0.06);
}
.dashboard-tab {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 45px;
    margin-bottom: 38px;
    padding: 0 16px;
    border-bottom: 1px solid #e6e8ed;
    color: #6084ff;
    font-size: 12px;
}
.dashboard-tab span {
    align-self: stretch;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #6084ff;
}
.dashboard-tools.module-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}
.dashboard-tools .module-lane {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    align-items: center;
    min-height: 136px;
    padding: 21px 24px;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(115deg, #4777d4, #42c4d9);
    color: #ffffff;
    box-shadow: 0 8px 15px rgba(54, 91, 160, 0.16);
}
.dashboard-tools .module-lane:hover {
    background: linear-gradient(115deg, #3f70cf, #39bbd2);
    box-shadow: 0 10px 20px rgba(54, 91, 160, 0.22);
    transform: translateY(-1px);
}
.dashboard-tool-media {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}
.dashboard-tools .module-lane .dashboard-tool-media img {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
}
.dashboard-tool-copy {
    align-self: center;
    display: block;
    padding-left: 12px;
}
.dashboard-tool-copy strong,
.dashboard-tool-copy small {
    display: block;
    color: #ffffff;
    text-decoration: none;
}
.dashboard-availability[href] {
    cursor: pointer;
}
.dashboard-tool-copy strong {
    font-size: 17px;
    font-weight: 500;
}
.dashboard-tool-copy small {
    margin-top: 7px;
    opacity: 0.78;
    font-size: 11px;
}
.dashboard-tools .state-pill {
    grid-column: 1 / -1;
    justify-self: start;
    min-width: 0;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    font-size: 10px;
    font-style: normal;
}

/* Search and NFD operational table */
.terminal-workspace {
    padding-bottom: 46px;
}
.terminal-window {
    min-height: 650px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #ffffff;
    box-shadow: 0 3px 18px rgba(38, 45, 59, 0.07);
}
.terminal-window-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 20px;
    border-bottom: 1px solid #e6e8ed;
}
.terminal-window-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.terminal-window-head img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.terminal-window-head strong,
.terminal-window-head small {
    display: block;
}
.terminal-window-head strong {
    font-size: 14px;
}
.terminal-window-head small {
    margin-top: 2px;
    color: #9298a4;
    font-size: 10px;
}
.terminal-view-label {
    padding: 6px 9px;
    border: 1px solid #e2e5eb;
    border-radius: 5px;
    background: #f8f9fb;
    color: #6485f7;
    font-size: 11px;
}
.terminal-intake.input-zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px 16px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #e7e9ee;
    background: #ffffff;
}
.terminal-intake-fields > label {
    display: block;
    margin-bottom: 7px;
    color: #4d5460;
    font-size: 11px;
    font-weight: 700;
}
.terminal-intake-fields {
    grid-column: 1 / -1;
}
.terminal-intake-fields textarea {
    min-height: 112px;
    resize: none;
    border-color: #dfe3eb;
    background: #f8f9fb;
    color: #262b34;
}
.terminal-intake-fields input[type="password"] {
    width: min(100%, 420px);
    height: 40px;
    margin-top: 3px;
    border-color: #dfe3eb;
    background: #f8f9fb;
}
.terminal-filter-menu {
    position: relative;
    justify-self: start;
    min-width: 180px;
    border: 1px solid #e6e8ee;
    border-radius: 5px;
    background: #ffffff;
}
.terminal-filter-menu > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 35px;
    padding: 0 11px;
    color: #454c57;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.terminal-filter-menu > summary::-webkit-details-marker {
    display: none;
}
.terminal-filter-menu > summary span {
    color: #949aa5;
    font-size: 9px;
    font-weight: 500;
}
.terminal-filter-menu .filter-options {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 4px;
    width: 330px;
    padding: 10px;
    border: 1px solid #dfe3ea;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(30, 38, 53, 0.13);
}
.terminal-filter-menu .filter-options label {
    min-height: 30px;
    padding: 6px 8px;
    border-radius: 4px;
    color: #555d69;
    font-size: 10px;
}
.terminal-filter-menu .filter-options label:hover {
    background: #f2f5fa;
}
.marketplace-filter-menu {
    margin-top: 2px;
}
.terminal-intake .action-line {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}
.terminal-intake .primary-action,
.terminal-intake .flat-action,
.terminal-toolbar .flat-action {
    min-height: 35px;
    padding: 0 14px;
    font-size: 11px;
}
.terminal-intake .primary-action {
    background: #6387fb;
}
body[data-script="nfd"] .terminal-intake .primary-action {
    border-color: #ea580c;
    background: #ea580c;
}
.operation-notice {
    margin: 12px 24px 0;
    padding: 9px 12px;
    border-left: 3px solid #e3a03f;
    border-radius: 4px;
    background: #fff9ee;
    color: #7e5b25;
    font-size: 11px;
}
.order-grid {
    min-width: 0;
    border-bottom: 1px solid #e7e9ef;
    background: #ffffff;
}
.order-grid .queue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 20px;
    border-bottom: 1px solid #e7e9ef;
}
.order-grid .queue-head strong {
    font-size: 13px;
}
.order-grid .queue-head span {
    color: #8f95a1;
    font-size: 10px;
}
.terminal-page:not(.job-view) .order-grid {
    display: none;
}
.order-table-scroll {
    position: relative;
    max-height: calc(100vh - 270px);
    min-height: 320px;
    overflow: auto;
    scrollbar-gutter: stable;
}
.order-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}
.order-table thead {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #ffffff;
}
.order-table th,
.order-table td {
    min-width: 150px;
    max-width: 300px;
    height: 46px;
    padding: 7px 14px;
    overflow: hidden;
    border-bottom: 1px solid rgba(219, 234, 254, 0.78);
    background: #ffffff;
    color: #535b68;
    font-size: 12px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}
.order-table thead th {
    height: 40px;
    color: #7a8290;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.order-table tbody tr:hover > * {
    background: #eff6ff;
    box-shadow: inset 0 1px rgba(96, 165, 250, 0.16), inset 0 -1px rgba(96, 165, 250, 0.16);
}
.order-table .order-row-number {
    position: sticky;
    left: 0;
    z-index: 8;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    color: #99a0ab;
    text-align: center;
}
.order-table .order-code-column {
    position: sticky;
    left: 42px;
    z-index: 8;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    color: #343b46;
    font-weight: 700;
}
.order-table thead .order-row-number,
.order-table thead .order-code-column {
    z-index: 24;
}
.order-table .order-status-column {
    min-width: 106px;
    width: 106px;
}
.order-table .order-status-column span {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    background: #dfe5ea;
    color: #6c737e;
    font-size: 9px;
}
.order-table tr[data-state="running"] .order-status-column span,
.order-table tr[data-state="done"] .order-status-column span {
    background: #dbeee8;
    color: #367564;
}
.order-table tr[data-state="error"] .order-status-column span {
    background: #f7e5e5;
    color: #a65f5f;
}
.order-empty-row td {
    height: 96px;
    color: #8b929e;
    text-align: center;
}
.terminal-page.intake-collapsed .terminal-intake-fields {
    display: none;
}
.terminal-page.intake-collapsed .terminal-filter-menu {
    display: none;
}
.terminal-page.intake-collapsed .terminal-intake.input-zone {
    display: block;
    padding-top: 0;
}
.terminal-page.intake-collapsed .terminal-intake .action-line {
    margin: 0 -20px;
    padding: 10px 20px;
    border-top: 1px solid #eceef2;
}
.terminal-results {
    padding: 14px 24px 24px;
}
.terminal-drawer {
    border: 1px solid #e5e7ec;
    border-radius: 7px;
    background: #fafbfc;
}
.terminal-drawer > summary {
    padding: 11px 13px;
    color: #626a77;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.terminal-toolbar {
    padding: 8px 12px;
    border-top: 1px solid #e5e7ec;
}
.terminal-drawer .terminal-wrap,
.terminal-drawer pre {
    min-height: 170px;
    max-height: 380px;
    margin: 0;
    border-radius: 0;
}

/* Work profile, following the supplied Steam profile composition */
.profile-steam-page {
    background: #0d1620;
    color: #d7e3ec;
}
.work-profile {
    min-height: calc(100vh - 48px);
    background: radial-gradient(circle at 72% 20%, rgba(29, 111, 139, 0.34), transparent 34%), linear-gradient(135deg, #101c26 0%, #17384a 44%, #121a28 100%);
}

.profile-photo-save {
    min-height: 30px;
    border: 0;
    border-radius: 2px;
    background: #5b4772;
    color: #ffffff;
    font-size: 11px;
}

.profile-activity-panel > h2 {
    margin: 0;
    padding: 11px 12px;
    background: linear-gradient(90deg, rgba(22, 72, 84, 0.96), rgba(54, 30, 72, 0.96));
}
.profile-activity-panel > h2 {
    margin: 0;
    color: #e3edf2;
    font-size: 16px;
    font-weight: 400;
}

.profile-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 12px 10px;
    background: rgba(9, 16, 23, 0.78);
}
.profile-stat-row > div {
    padding: 4px 8px;
}
.profile-stat-row strong,
.profile-stat-row span {
    display: block;
}
.profile-stat-row strong {
    color: #ffffff;
    font-size: 28px;
    font-weight: 300;
}
.profile-stat-row span {
    margin-top: 5px;
    color: #8fa0aa;
}
.profile-activity-panel {
    margin-top: 12px;
    background: rgba(8, 13, 19, 0.78);
}
.profile-activity-panel .monitor-row {
    grid-template-columns: 145px 130px minmax(0, 1fr);
    gap: 12px;
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(20, 29, 38, 0.58);
    color: #dce7ec;
}
.profile-activity-panel .monitor-row em {
    color: #8fa0aa;
}
.profile-security-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 18px;
    background: rgba(8, 13, 19, 0.78);
}
.profile-security-panel h2 {
    margin: 0;
    font-size: 14px;
}
.profile-security-panel p {
    margin: 6px 0 0;
    color: #899da8;
    font-size: 11px;
}
.profile-security-panel > strong {
    padding: 6px 9px;
    background: #2b6a63;
    color: #d9fff6;
    font-size: 10px;
}

.profile-online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: #57cbde;
}

/* Trello board */
.trello-board-page {
    background: #1d2024;
    color: #f2f3f4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
}
.trello-board-shell {
    position: relative;
    min-height: calc(100vh - 48px);
    overflow: hidden;
    background: url("/static/assets/trello-board-dark.jpg") center / cover fixed;
}
.trello-board-shell::before {
    position: absolute;
    inset: 0;
    background: rgba(9, 18, 10, 0.22);
    content: "";
    pointer-events: none;
}
.trello-board-head,
.trello-board-canvas,
.trello-log {
    position: relative;
    z-index: 1;
}
.trello-board-head {
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 12px;
}
.trello-board-head > div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.trello-board-head span,
.trello-board-head .trello-log > summary {
    color: #ffffff;
    font-size: 12px;
}
.trello-new-search {
    display: none;
    min-height: 32px;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}
.trello-sync-complete {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 35;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #1f845a;
    border-radius: 8px;
    background: #1f845a;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}
.trello-sync-complete[hidden] {
    display: none;
}
.trello-sync-alert {
    position: fixed;
    top: 76px;
    left: 50%;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid #f87168;
    border-radius: 9px;
    background: #fff1f0;
    color: #7a271a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
    transform: translateX(-50%);
}
.trello-sync-alert[hidden] {
    display: none;
}
.trello-sync-alert button {
    border: 0;
    border-radius: 6px;
    padding: 7px 10px;
    background: #c9372c;
    color: #ffffff;
    cursor: pointer;
}
.trello-order-dialog {
    width: min(560px, calc(100vw - 32px));
    border: 1px solid #3c444d;
    border-radius: 12px;
    padding: 0;
    background: #101204;
    color: #e8eaec;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}
.trello-order-dialog::backdrop {
    background: rgba(0, 0, 0, 0.58);
}
.trello-order-dialog form {
    display: grid;
    gap: 14px;
    padding: 18px;
}
.trello-order-dialog header,
.trello-order-dialog footer {
    display: flex;
    align-items: center;
    gap: 10px;
}
.trello-order-dialog header div {
    display: grid;
    gap: 2px;
}
.trello-order-dialog header small {
    color: #9fadbc;
}
.trello-order-dialog header > button {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #9fadbc;
    font-size: 24px;
    cursor: pointer;
}
.trello-order-dialog textarea {
    width: 100%;
    height: min(46vh, 360px);
    box-sizing: border-box;
    resize: none;
    border: 1px solid #56606b;
    border-radius: 8px;
    padding: 12px;
    background: #22272b;
    color: #e8eaec;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.trello-order-dialog footer span {
    flex: 1;
}
.trello-order-error {
    margin: -6px 0 0;
    color: #f87168;
    font-size: 12px;
}
.trello-results-view .trello-new-search {
    display: inline-flex;
}
.trello-board-canvas {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: calc(100vh - 104px);
    padding: 0 12px 24px;
    overflow-x: auto;
}
.trello-board-page:not(.trello-results-view) .trello-board-canvas {
    justify-content: center;
    padding-top: clamp(34px, 8vh, 78px);
}
.trello-board-page.trello-results-view .trello-board-canvas {
    justify-content: flex-start;
}
.trello-board-page.trello-append-view .trello-board-canvas {
    justify-content: flex-start;
}
.trello-board-results {
    display: contents;
}
.trello-list {
    display: flex;
    flex-direction: column;
    flex: 0 0 272px;
    height: calc(100dvh - 116px);
    max-height: calc(100vh - 116px);
    padding: 0 0 12px;
    overflow: hidden;
    border-radius: 12px;
    background: #101204;
    color: #e8eaec;
}
.trello-list > header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding: 10px 12px 6px;
}
.trello-list > header h2 {
    margin: 0;
    font-size: 14px;
}
.trello-list > header span {
    color: #afb4ba;
}
.trello-intake-list {
    flex-basis: min(540px, calc(100vw - 110px));
    height: auto;
    max-height: none;
    padding: 12px;
    background: #101204;
    box-shadow: 0 16px 48px rgba(4, 9, 4, 0.34);
}
.trello-intake-fields > label {
    display: block;
    margin-bottom: 7px;
    color: #b9bec3;
    font-size: 11px;
}
.trello-intake-fields textarea {
    min-height: 210px;
    border: 0;
    border-radius: 8px;
    background: #242629;
    color: #ffffff;
}
.trello-intake-list .action-line {
    display: block;
    margin-top: 8px;
}
.trello-intake-list .action-line .primary-action {
    width: 100%;
}
.trello-intake-list .primary-action,
.trello-intake-list .flat-action {
    min-height: 34px;
    padding: 0 10px;
    font-size: 10px;
}

.trello-card-stack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 0 8px;
    overflow-y: auto;
    gap: 8px;
    scrollbar-gutter: stable;
}
.trello-result-card {
    flex: 0 0 auto;
    padding: 12px;
    border-radius: 8px;
    background: #292b2f;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.trello-result-card strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
}
.trello-result-card p {
    margin: 7px 0;
    color: #c6c9cd;
    font-size: 12px;
    line-height: 1.35;
}
.trello-result-card button {
    display: inline-block;
    padding: 4px 7px;
    border: 0;
    border-radius: 3px;
    background: #286b8b;
    color: #e1f6ff;
    font-size: 10px;
    cursor: pointer;
}
.trello-link-preview {
    display: block;
    margin: 0 0 8px;
    overflow: hidden;
    color: #9ea7ad;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trello-result-card[data-link-kind="cashback"] {
    border-left: 3px solid #4bce97;
}
.trello-result-card[data-link-kind="standard"] {
    border-left: 3px solid #579dff;
}
.trello-result-card > small {
    display: block;
    margin-top: 8px;
    color: #9ea7ad;
    font-size: 10px;
}
.trello-result-card[data-state="running"] {
    border-left: 3px solid #579dff;
}
.trello-list.is-completed .trello-result-card,
.trello-list.is-checked .trello-result-card {
    border-left: 3px solid #4bce97;
}
.trello-list.is-failed .trello-result-card {
    border-left: 3px solid #f87168;
}
.trello-list.is-other .trello-result-card {
    border-left: 3px solid #f5cd47;
}
.trello-list.is-other .trello-result-card[data-completed="true"] {
    border-left-color: #4bce97;
}
.trello-other-link {
    display: block;
    overflow: hidden;
    color: #8fcbff;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trello-list-footer {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    margin: 10px 8px 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.trello-list-footer[hidden] {
    display: flex;
    visibility: hidden;
}
.trello-list-footer button {
    border: 0;
    background: transparent;
    color: #b6c2cf;
    font-size: 11px;
    cursor: pointer;
}
.trello-list-footer button:first-child {
    padding: 6px 9px;
    border: 1px solid #1f845a;
    border-radius: 6px;
    background: #1f845a;
    color: #ffffff;
    font-weight: 700;
}
.trello-list-footer button:first-child[data-completed="true"] {
    background: #ffffff;
    color: #1f845a;
}
.trello-list-footer button:disabled {
    cursor: wait;
    opacity: 0.65;
}
.trello-list.is-links > header h2 {
    color: #8fcbff;
}
.trello-list.is-missing .trello-result-card {
    border-left: 3px solid #d66262;
}
.trello-results-view .trello-intake-list {
    display: none;
}
.trello-log {
    position: relative;
    width: auto;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.16);
}
.trello-log > summary {
    padding: 8px 11px;
    cursor: pointer;
    list-style: none;
}
.trello-log > summary::-webkit-details-marker {
    display: none;
}
.trello-log > div {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    width: min(460px, calc(100vw - 24px));
    padding: 10px;
    border-radius: 7px;
    background: rgba(29, 31, 35, 0.98);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}
.trello-log pre {
    max-height: 260px;
}
.trello-loading-count {
    grid-column: 2;
    justify-self: center;
    color: var(--shell-chrome-text);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .dashboard-tools.module-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
    
}
@media (max-width: 860px) {
    .dashboard-tools.module-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    
    
    
    
}
@media (max-width: 760px) {
    .operations-shell .app-frame {
        display: block;
    }
    .operations-shell .side-panel {
        display: none;
    }
    .operations-shell.mobile-menu-open .side-panel {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 90;
        display: flex;
        width: min(320px, 88vw);
        height: 100dvh;
        padding: 14px 12px;
        overflow-y: auto;
        box-shadow: 16px 0 36px rgba(17, 24, 39, 0.24);
    }
    .operations-shell.mobile-menu-open .side-panel .brand-lockup {
        justify-content: flex-start;
        padding-right: 0;
    }
    .operations-shell.mobile-menu-open .side-panel .brand-lockup > span,
    .operations-shell.mobile-menu-open .side-panel .rail-toggle,
    .operations-shell.mobile-menu-open .side-panel .side-footer {
        display: flex;
    }
    .operations-shell.mobile-menu-open .side-panel .brand-lockup > span {
        display: block;
    }
    .operations-shell.mobile-menu-open .side-panel .rail-toggle {
        display: grid;
        place-items: center;
        position: static;
        align-self: flex-start;
        width: 30px;
    }
    .operations-shell.mobile-menu-open .side-panel .module-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        max-height: none;
    }
    .operations-shell.mobile-menu-open .side-panel .nav-link {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        padding: 0 10px;
    }
    .operations-shell.mobile-menu-open .side-panel .nav-link .nav-line,
    .operations-shell.mobile-menu-open .side-panel .nav-link > span:last-child {
        display: block;
    }
    .operations-shell .workspace-topbar {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        padding: 0 10px;
    }
    .topbar-menu {
        display: grid;
        place-items: center;
    }
    .tool-jump {
        grid-column: 2;
    }
    .topbar-user {
        max-width: 120px;
    }
    .topbar-user .user-avatar {
        width: 26px;
        min-width: 26px;
        height: 26px;
    }
    .dashboard-panel {
        padding: 16px;
    }
    .dashboard-tools.module-board {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .queue-columns {
        display: none;
    }
    .terminal-intake.input-zone {
        grid-template-columns: minmax(0, 1fr);
    }
    .terminal-filter-menu,
    .terminal-intake .action-line {
        width: 100%;
    }
    .terminal-filter-menu .filter-options {
        width: min(330px, calc(100vw - 68px));
    }
    .terminal-intake .action-line {
        justify-content: stretch;
    }
    .terminal-intake .action-line button {
        flex: 1;
    }
    .queue-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px 12px;
        padding-block: 9px;
    }
    .queue-item > small {
        grid-column: 1 / -1;
        grid-row: 2;
        white-space: normal;
    }
    
    
    
    
    
    .profile-stat-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .profile-activity-panel .monitor-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .trello-board-head {
        padding-inline: 14px;
    }
    .trello-board-head span {
        display: none;
    }
    .trello-board-canvas {
        padding-inline: 10px;
    }
    .trello-list {
        flex-basis: min(86vw, 300px);
    }
    .trello-intake-list {
        flex-basis: min(92vw, 520px);
    }
}

/* Shared color modes */
.theme-toggle,
.login-theme {
    display: grid;
    place-items: center;
}
.topbar-actions .theme-toggle {
    width: 34px;
    min-width: 34px;
    padding: 0;
}
.theme-icon {
    width: 18px;
    height: 18px;
}
.theme-icon-sun,
.theme-toggle[data-mode="dark"] .theme-icon-moon,
html[data-color-mode="dark"] .login-theme .theme-icon-moon {
    display: none;
}
.theme-toggle[data-mode="dark"] .theme-icon-sun,
html[data-color-mode="dark"] .login-theme .theme-icon-sun {
    display: block;
    filter: invert(1);
}
.operations-shell[data-color-mode="light"] {
    background: #f3f4f6;
    color: #20242c;
}
.operations-shell[data-color-mode="dark"] {
    background: #0b1017;
    color: #e7edf4;
}
.operations-shell[data-color-mode="dark"] .side-panel,
.operations-shell[data-color-mode="dark"] .workspace-topbar {
    border-color: #283442;
    background: #111821;
    color: #e7edf4;
}
.operations-shell[data-color-mode="dark"] .brand-lockup,
.operations-shell[data-color-mode="dark"] .nav-link,
.operations-shell[data-color-mode="dark"] .side-footer,
.operations-shell[data-color-mode="dark"] .topbar-user {
    color: #dce5ee;
}
.operations-shell[data-color-mode="dark"] .nav-link:hover,
.operations-shell[data-color-mode="dark"] .nav-link.is-active,
.operations-shell[data-color-mode="dark"] .topbar-user:hover,
.operations-shell[data-color-mode="dark"] .side-panel .rail-toggle:hover {
    background: #1d2a38;
}
.operations-shell[data-color-mode="dark"] .tool-jump input,
.operations-shell[data-color-mode="dark"] .topbar-actions .theme-toggle {
    border-color: #2e3b49;
    background: #18222d;
    color: #e7edf4;
}
.operations-shell[data-color-mode="dark"] .side-panel .rail-toggle img,
.operations-shell[data-color-mode="dark"] .logout-link img {
    filter: invert(1);
}
.operations-shell .side-footer {
    justify-content: center;
}
.operations-shell .side-footer .logout-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
}
.operations-shell .side-footer .logout-link:hover {
    background: var(--accent-soft);
}
.logout-link img {
    width: 18px;
    height: 18px;
}
.operations-shell.sidebar-collapsed .side-panel .side-footer {
    display: flex;
    padding: 8px 0 0;
}
.operations-shell.sidebar-collapsed .side-panel .logout-link {
    width: 40px;
    padding: 0;
}
.operations-shell.sidebar-collapsed .logout-link span {
    display: none;
}

/* Search and NFD */
.terminal-view-label {
    cursor: pointer;
}
.operations-shell[data-color-mode="dark"] .idw-page,
.operations-shell[data-color-mode="dark"] .terminal-window,
.operations-shell[data-color-mode="dark"] .terminal-intake.input-zone,
.operations-shell[data-color-mode="dark"] .order-grid,
.operations-shell[data-color-mode="dark"] .order-table,
.operations-shell[data-color-mode="dark"] .order-table thead,
.operations-shell[data-color-mode="dark"] .order-table th,
.operations-shell[data-color-mode="dark"] .order-table td {
    border-color: #293543;
    background: #111821;
    color: #dce5ee;
}
.operations-shell[data-color-mode="dark"] .page-crumb,
.operations-shell[data-color-mode="dark"] .terminal-window-head,
.operations-shell[data-color-mode="dark"] .terminal-drawer,
.operations-shell[data-color-mode="dark"] .terminal-toolbar {
    border-color: #293543;
    background: #151e28;
}
.operations-shell[data-color-mode="dark"] .terminal-view-label,
.operations-shell[data-color-mode="dark"] .terminal-filter-menu,
.operations-shell[data-color-mode="dark"] .terminal-filter-menu .filter-options,
.operations-shell[data-color-mode="dark"] .terminal-intake-fields textarea,
.operations-shell[data-color-mode="dark"] .terminal-intake-fields input[type="password"] {
    border-color: #344252;
    background: #0d151e;
    color: #e7edf4;
}
.operations-shell[data-color-mode="dark"] .terminal-filter-menu > summary,
.operations-shell[data-color-mode="dark"] .terminal-filter-menu .filter-options label,
.operations-shell[data-color-mode="dark"] .terminal-intake-fields > label,
.operations-shell[data-color-mode="dark"] .terminal-drawer > summary {
    color: #c8d3df;
}
.operations-shell[data-color-mode="dark"] .terminal-filter-menu .filter-options label:hover,
.operations-shell[data-color-mode="dark"] .order-table tbody tr:hover > * {
    background: #1b2937;
}
.operations-shell[data-color-mode="dark"] .order-table .order-code-column {
    color: #eef3f8;
}
.operations-shell[data-color-mode="dark"] .terminal-page.intake-collapsed .terminal-intake .action-line {
    border-color: #293543;
}
.operations-shell[data-color-mode="dark"] :is(.nav-link img, .dashboard-tool-media img, .module-art, .terminal-window-head img) {
    filter: brightness(0) invert(1);
}
.operations-shell[data-color-mode="dark"] .dashboard-tool-media {
    background: rgba(15, 23, 42, 0.34);
}

/* Dashboard and operational modules */
.operations-shell[data-color-mode="dark"] .dashboard-title h1 {
    color: #f1f5f9;
}
.operations-shell[data-color-mode="dark"] .dashboard-panel,
.operations-shell[data-color-mode="dark"] .module-page :is(.overview-hero, .sheet-hero, .meli-hero, .server-hero, .work-surface, .playwright-analysis-panel, .playwright-compare-panel, .playwright-access-panel, .playwright-activity-panel, .playwright-browser-panel, .capture-form, .capture-organizer, .capture-result-panel, .capture-job-panel, .server-stat, .monitor-surface) {
    border-color: #293543;
    background: #111821;
    color: #e7edf4;
}
.operations-shell[data-color-mode="dark"] .module-page :is(h1, h2, strong, label) {
    color: #eef3f8;
}
.operations-shell[data-color-mode="dark"] .module-page :is(textarea, input, select, .queue-item, .monitor-row, .playwright-account, .playwright-analysis-account, .capture-preview, .capture-source-options label, .capture-month-options label, .capture-organize-scope label) {
    border-color: #344252;
    background: #0d151e;
    color: #e7edf4;
}
.operations-shell[data-color-mode="dark"] .dashboard-tab,
.operations-shell[data-color-mode="dark"] .module-page .queue-columns {
    border-color: #293543;
}

/* Profile, Administration, Feedback and Notifications */
.feedback-preview {
    align-self: start;
}
.feedback-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 24px;
}
.feedback-only-page {
    padding: clamp(20px, 3vw, 36px) 0 60px;
}
.feedback-only-page .steam-profile-shell {
    margin-top: 0;
    margin-bottom: 0;
}
.feedback-only-tabs {
    width: min(100% - 40px, 1040px);
    margin: 0 auto 12px;
    padding: 0;
}
.achievement-only-page {
    padding: clamp(20px, 3vw, 36px) 0 60px;
}
.achievement-only-page .steam-profile-shell {
    margin-top: 0;
}
.achievement-grid {
    display: grid;
    gap: 12px;
}
.achievement-card {
    overflow: hidden;
    border: 1px solid #2d414f;
    border-radius: 4px;
    background: #111e27;
}
.achievement-card summary {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px;
    cursor: pointer;
    list-style: none;
}
.achievement-card summary::-webkit-details-marker {
    display: none;
}
.achievement-card summary > img {
    width: 120px;
    height: 74px;
    object-fit: cover;
}
.achievement-card summary span,
.achievement-card summary strong,
.achievement-card summary small {
    display: block;
}
.achievement-card summary strong {
    color: #f3f7f9;
    font-size: 15px;
}
.achievement-card summary small {
    margin-top: 5px;
    color: #93a9b5;
    font-size: 10px;
}
.achievement-details {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: 20px;
    padding: 18px;
    border-top: 1px solid #2d414f;
    background: #0d1820;
}
.achievement-details img {
    width: 100%;
}
.achievement-details h2 {
    color: #f3f7f9;
}
.achievement-details p {
    color: #93a9b5;
}
.achievement-empty {
    padding: 18px;
}
@media (max-width: 760px) {
    .achievement-details {
        grid-template-columns: minmax(0, 1fr);
    }
}
.feedback-preview > h2 {
    margin: 0 0 14px;
}
.feedback-preview .notification-item {
    align-items: flex-start;
}
.admin-access-list {
    display: grid;
    gap: 10px;
}
.admin-user-card {
    overflow: hidden;
    border: 1px solid #2d414f;
    border-radius: 5px;
    background: #111e27;
}
.admin-user-card > summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}
.admin-owner-summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}
.admin-owner-card {
    border-color: #367c98;
    background: #153343;
}
.admin-user-card > summary::-webkit-details-marker {
    display: none;
}
.admin-user-card > summary::after {
    color: #7e9aa9;
    content: "+";
    font-size: 18px;
}
.admin-user-card[open] > summary::after {
    content: "−";
}
.admin-user-card[open] > summary {
    border-bottom: 1px solid #2d414f;
}
.admin-user-copy,
.admin-access-summary {
    display: grid;
    min-width: 0;
    gap: 2px;
}
.admin-user-copy strong,
.admin-access-summary strong {
    overflow: hidden;
    color: #f3f7f9;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-user-copy em,
.admin-access-summary em {
    color: #8da5b2;
    font-size: 10px;
    font-style: normal;
}
.admin-access-summary {
    justify-items: end;
}
.admin-access-form {
    display: grid;
    gap: 16px;
    padding: 16px;
}
.admin-role-field {
    display: grid;
    gap: 6px;
    width: min(100%, 260px);
}
.admin-role-field > span,
.admin-permission-grid legend {
    color: #9bb1bd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.admin-permission-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}
.admin-permission-grid legend {
    grid-column: 1 / -1;
    margin-bottom: 2px;
}
.admin-permission-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #304653;
    border-radius: 5px;
    background: #0d1820;
    color: #dce7ed;
    cursor: pointer;
}
.admin-permission-grid label:has(input:checked) {
    border-color: #367c98;
    background: #153343;
}
.admin-permission-grid input {
    width: 15px;
    min-height: 15px;
    margin: 0;
    accent-color: #48a8ce;
}
.admin-access-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.profile-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.profile-person-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #2d414f;
    border-radius: 5px;
    background: #111e27;
}
.profile-person-card:hover {
    border-color: #367c98;
    background: #153343;
}
.profile-person-card .admin-user-avatar {
    width: 42px;
    height: 42px;
    overflow: hidden;
}
.profile-person-card .admin-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-achievement-list {
    display: grid;
    gap: 8px;
}
.profile-achievement-list article {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #2d414f;
    border-radius: 5px;
    background: #111e27;
}
.profile-achievement-list img {
    width: 64px;
    height: 40px;
    object-fit: cover;
}
.profile-achievement-list span {
    display: grid;
    gap: 3px;
}
.profile-achievement-list strong {
    color: #f3f7f9;
}
.profile-achievement-list small {
    color: #8da5b2;
}
.notification-item > aside {
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
    gap: 5px;
}
.notification-item time,
.notification-read-state {
    color: #8195a1;
    font-size: 10px;
    font-style: normal;
}
@media (max-width: 760px) {
    .feedback-workspace,
    .admin-permission-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .admin-user-card > summary {
        grid-template-columns: 38px minmax(0, 1fr) 16px;
    }
    .admin-owner-summary {
        grid-template-columns: 38px minmax(0, 1fr);
    }
    .admin-owner-summary .flat-action {
        grid-column: 2;
        justify-self: start;
    }
    .admin-access-summary {
        display: none;
    }
}
.profile-steam-page[data-color-mode="light"] .work-profile {
    background: #edf2f4;
    color: #24323b;
}

.profile-steam-page[data-color-mode="light"] .steam-profile-head .steam-identity h1,
.profile-steam-page[data-color-mode="light"] .steam-profile-head .steam-status {
    color: #ffffff;
    text-shadow: 0 1px 5px rgba(6, 17, 24, 0.95);
}
.profile-steam-page[data-color-mode="light"] .steam-profile-head .steam-kicker {
    color: #9be8ff;
    text-shadow: 0 1px 4px rgba(6, 17, 24, 0.9);
}
.profile-steam-page[data-color-mode="light"] .steam-profile-head .steam-role {
    border-color: rgba(155, 232, 255, 0.65);
    background: rgba(8, 31, 43, 0.72);
    color: #b9efff;
}
.profile-steam-page[data-color-mode="light"] :is(.profile-stat-row strong, .profile-section-card h2, .profile-section-page .monitor-head h2, .profile-section-page .server-stat strong) {
    color: #1f303a;
}
.profile-steam-page[data-color-mode="light"] :is(.profile-section-card p, .profile-section-page .monitor-head p, .profile-section-page .server-stat span, .profile-section-page .server-stat small, .profile-stat-row span) {
    color: #667985;
}
.profile-steam-page[data-color-mode="light"] :is(.profile-section-card, .profile-section-page .monitor-surface, .profile-section-page .server-stat, .profile-stat-row, .profile-activity-panel, .profile-security-panel) {
    border-color: #d8e1e6;
    background: #ffffff;
    color: #24323b;
}
.profile-steam-page[data-color-mode="light"] :is(.profile-section-card input, .profile-section-card textarea, .profile-section-page select) {
    border-color: #ccd8de;
    background: #f8fafb;
    color: #24323b;
}
.profile-steam-page[data-color-mode="light"] .profile-activity-panel .monitor-row,
.profile-steam-page[data-color-mode="light"] .notification-item {
    border-color: #dce5e9;
    background: #f4f7f8;
    color: #24323b;
}
.profile-steam-page[data-color-mode="light"] .notification-item strong {
    color: #1f303a;
}
.profile-steam-page[data-color-mode="light"] :is(.notification-item span, .notification-item em, .notification-item time, .notification-read-state, .notification-empty) {
    color: #526a78;
}
.profile-steam-page[data-color-mode="light"] .notification-item[data-state="read"] {
    opacity: 1;
}
.profile-steam-page[data-color-mode="light"] .achievement-card {
    border-color: #d5e0e5;
    background: #ffffff;
}
.profile-steam-page[data-color-mode="light"] .achievement-card summary strong,
.profile-steam-page[data-color-mode="light"] .achievement-details h2 {
    color: #1f303a;
}
.profile-steam-page[data-color-mode="light"] .achievement-card summary small,
.profile-steam-page[data-color-mode="light"] .achievement-details p {
    color: #667985;
}
.profile-steam-page[data-color-mode="light"] .achievement-details {
    border-color: #d5e0e5;
    background: #f4f7f8;
}
.profile-steam-page[data-color-mode="light"] .profile-notification-head .flat-action,
.profile-steam-page[data-color-mode="light"] .notification-item .flat-action,
.profile-steam-page[data-color-mode="light"] .admin-access-actions .flat-action,
.profile-steam-page[data-color-mode="light"] .achievement-card .flat-action {
    border-color: #b9d1dc;
    background: #e5f1f5;
    color: #24566c;
}
.profile-steam-page[data-color-mode="light"] .admin-user-card {
    border-color: #d5e0e5;
    background: #f7fafb;
}
.profile-steam-page[data-color-mode="light"] :is(.profile-person-card, .profile-achievement-list article) {
    border-color: #d5e0e5;
    background: #f7fafb;
}
.profile-steam-page[data-color-mode="light"] .profile-person-card:hover {
    border-color: #8ebdce;
    background: #e4f2f6;
}
.profile-steam-page[data-color-mode="light"] .profile-achievement-list strong {
    color: #1f303a;
}
.profile-steam-page[data-color-mode="light"] .profile-achievement-list small {
    color: #667985;
}
.profile-steam-page[data-color-mode="light"] .admin-owner-card {
    border-color: #8ebdce;
    background: #e4f2f6;
}
.profile-steam-page[data-color-mode="light"] .admin-user-card[open] > summary {
    border-color: #d5e0e5;
}
.profile-steam-page[data-color-mode="light"] :is(.admin-user-copy strong, .admin-access-summary strong) {
    color: #1f303a;
}
.profile-steam-page[data-color-mode="light"] :is(.admin-user-copy em, .admin-access-summary em, .admin-role-field > span, .admin-permission-grid legend) {
    color: #667985;
}
.profile-steam-page[data-color-mode="light"] .admin-permission-grid label {
    border-color: #d5e0e5;
    background: #ffffff;
    color: #24323b;
}
.profile-steam-page[data-color-mode="light"] .admin-permission-grid label:has(input:checked) {
    border-color: #8ebdce;
    background: #e4f2f6;
}

/* Trello */
.trello-board-page[data-color-mode="light"] .trello-board-shell {
    background-image: url("/static/assets/trello-board-light.jpg");
}
.trello-board-page[data-color-mode="light"] .trello-board-shell::before {
    background: transparent;
}
.trello-board-page[data-color-mode="light"] .trello-board-head span,
.trello-board-page[data-color-mode="light"] .trello-log > summary {
    color: #1f2d35;
}
.trello-board-page[data-color-mode="light"] .trello-new-search,
.trello-board-page[data-color-mode="light"] .trello-log {
    border-color: #bdcbd2;
    background: rgba(255, 255, 255, 0.82);
    color: #24323b;
}
.trello-board-page[data-color-mode="light"] .trello-list,
.trello-board-page[data-color-mode="light"] .trello-intake-list {
    background: #ffffff;
    color: #24323b;
    box-shadow: 0 12px 30px rgba(33, 48, 58, 0.14);
}
.trello-board-page[data-color-mode="light"] .trello-order-dialog {
    border-color: #bdcbd2;
    background: #ffffff;
    color: #24323b;
}
.trello-board-page[data-color-mode="light"] .trello-order-dialog textarea {
    border-color: #bdcbd2;
    background: #f4f6f7;
    color: #24323b;
}
.trello-board-page[data-color-mode="light"] .trello-intake-fields > label,
.trello-board-page[data-color-mode="light"] .trello-list > header span,
.trello-board-page[data-color-mode="light"] .trello-result-card p,
.trello-board-page[data-color-mode="light"] .trello-link-preview,
.trello-board-page[data-color-mode="light"] .trello-result-card > small,
.trello-board-page[data-color-mode="light"] .trello-list-footer button:last-child {
    color: #647680;
}
.trello-board-page[data-color-mode="light"] .trello-list-footer {
    border-color: #d8e0e4;
}
.trello-board-page[data-color-mode="light"] .trello-intake-fields textarea,
.trello-board-page[data-color-mode="light"] .trello-result-card {
    border-color: #d8e0e4;
    background: #f1f4f5;
    color: #24323b;
}
.trello-board-page[data-color-mode="light"] .trello-result-card strong {
    color: #1f2d35;
}

/* Products */
.products-page {
    padding-bottom: 48px;
}
.products-title,
.product-variation-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.products-title {
    padding: 0 2px 20px;
}
.products-title h1 {
    margin: 0;
    color: #171b23;
    font-size: 26px;
    font-weight: 650;
}
.products-title p {
    margin: 6px 0 0;
    font-size: 12px;
}
.product-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 180px auto;
    align-items: end;
    gap: 10px;
    margin-bottom: 18px;
}
.product-search {
    display: flex;
    min-width: 0;
}
.product-editor label,
.product-variation-form label,
.product-variation-create label {
    display: grid;
    gap: 6px;
    color: #68707d;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.product-search input,
.product-editor :is(input, textarea),
.product-variation-form :is(input, textarea),
.product-variation-create :is(input, textarea) {
    width: 100%;
    border: 1px solid #dfe3e9;
    border-radius: 6px;
    background: #ffffff;
    color: #202631;
    font-size: 12px;
    text-transform: none;
}
.product-search input,
.product-editor input,
.product-variation-form input,
.product-variation-create input {
    height: 38px;
    padding: 0 11px;
}
.product-search input {
    height: 35px;
}
.product-filter-menu {
    width: 100%;
}
.product-filter-menu .filter-options {
    grid-template-columns: minmax(180px, 1fr);
    width: 220px;
}
.product-add {
    min-height: 35px;
    padding-inline: 14px;
    font-size: 11px;
}
.product-editor textarea,
.product-variation-form textarea,
.product-variation-create textarea {
    min-height: 82px;
    padding: 9px 11px;
    resize: none;
}
.product-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}
.product-card {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 150px;
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 5px 16px rgba(34, 44, 62, 0.06);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.product-card:hover {
    border-color: #bfcaf2;
    box-shadow: 0 9px 24px rgba(34, 44, 62, 0.1);
    transform: translateY(-1px);
}
.product-card[hidden] {
    display: none;
}
.product-card-image {
    display: grid;
    place-items: center;
    padding: 12px;
    background: #f4f5f7;
}
.product-card-image img {
    width: 100%;
    height: 126px;
    object-fit: contain;
}
.product-card-image em {
    color: #a0a6b0;
    font-size: 10px;
    font-style: normal;
}
.product-card-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px 18px;
}
.product-card-copy strong {
    color: #1a202b;
    font-size: 16px;
    line-height: 1.25;
}
.product-card-copy small {
    margin-top: 7px;
    overflow: hidden;
    color: #858d99;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-card-copy b {
    margin-top: auto;
    padding-top: 14px;
    color: #202631;
    font-size: 14px;
}
.product-empty {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    min-height: 260px;
    border: 1px dashed #ccd2dc;
    border-radius: 11px;
    background: #ffffff;
    color: #717986;
}
.product-empty[hidden] {
    display: none;
}
.product-empty strong,
.product-empty span {
    display: block;
}
.product-create-dialog {
    width: min(460px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(22, 28, 40, 0.28);
}
.product-create-dialog::backdrop {
    background: rgba(17, 24, 39, 0.48);
}
.product-create-dialog form {
    display: grid;
    gap: 15px;
    padding: 22px;
}
.product-create-dialog header,
.product-create-dialog form > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.product-create-dialog h2 {
    margin: 0;
}
.product-create-dialog header > button {
    border: 0;
    background: transparent;
    color: #7d8490;
    cursor: pointer;
    font-size: 24px;
}
.product-create-dialog label {
    display: grid;
    gap: 6px;
    color: #68707d;
    font-size: 11px;
    font-weight: 700;
}
.product-create-dialog input {
    height: 40px;
    padding: 0 11px;
    border: 1px solid #dfe3e9;
    border-radius: 6px;
}
.product-notice {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #cbd8ff;
    border-radius: 7px;
    background: #edf2ff;
    color: #2c478e;
    font-size: 11px;
}
.product-notice.is-error {
    border-color: #fecaca;
    background: #fff1f2;
    color: #b42318;
}

.product-settings-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #dfe3e9;
    border-radius: 7px;
    background: #ffffff;
    color: #343b46;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}
.product-settings-trigger span:first-child {
    font-size: 17px;
    line-height: 1;
}

.product-editor {
    padding: 26px;
}

.product-image-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.product-file-input {
    min-width: 0;
    height: auto !important;
    padding: 5px !important;
    border: 1px dashed #c8d0dc !important;
    border-radius: 7px;
    background: #fff;
    color: #68707d;
    font: inherit;
}
.product-file-input::file-selector-button {
    margin-right: 10px;
    padding: 8px 12px;
    border: 0;
    border-radius: 5px;
    background: #eaf0ff;
    color: #315ea8;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.product-file-input::file-selector-button:hover {
    background: #dce7ff;
}

.product-variation-picker {
    margin-top: 28px;
}
.product-variation-picker > span {
    color: #4a515d;
    font-size: 11px;
    font-weight: 700;
}
.product-variation-picker > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}
.product-variation-picker button {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid #dce1e8;
    border-radius: 6px;
    background: #ffffff;
    color: #333a45;
    cursor: pointer;
    font-size: 10px;
}
.product-variation-picker button.is-selected {
    border-color: #6380df;
    box-shadow: inset 0 0 0 1px #6380df;
    color: #314eaa;
}
.product-variation-picker p {
    margin: 10px 0 0;
    color: #858c97;
    font-size: 10px;
}
.product-editor,
.product-variation-form {
    display: grid;
    align-content: start;
    gap: 13px;
}

.product-editor {
    background: #fafbfc;
}
.product-editor header span,
.product-editor header strong {
    display: block;
}
.product-editor header span {
    color: #8b929d;
    font-size: 9px;
    text-transform: uppercase;
}
.product-editor header strong {
    margin-top: 4px;
    color: #242a34;
    font-size: 14px;
}
.product-variation-section {
    margin-top: 20px;
    padding: 22px;
    border: 1px solid #e2e5ea;
    border-radius: 11px;
    background: #ffffff;
}
.product-variation-section > header {
    margin-bottom: 18px;
}
.product-variation-section h2 {
    margin: 0;
    color: #202631;
    font-size: 18px;
}
.product-variation-section > header > span {
    color: #858c97;
    font-size: 10px;
}
.product-variation-form {
    padding: 16px;
    border: 1px solid #e3e6eb;
    border-radius: 9px;
    background: #fafbfc;
}
.product-settings-dialog {
    width: min(1040px, calc(100vw - 32px));
    max-height: min(880px, calc(100vh - 32px));
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background: #ffffff;
    color: #202631;
    box-shadow: 0 24px 70px rgba(22, 28, 40, 0.32);
}
.product-settings-dialog::backdrop {
    background: rgba(17, 24, 39, 0.58);
}
.product-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #e2e5ea;
}
.product-settings-head h2 {
    margin: 0;
    font-size: 20px;
}
.product-settings-head > button {
    border: 0;
    background: transparent;
    color: #7d8490;
    cursor: pointer;
    font-size: 26px;
}
.product-settings-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 22px;
    border-bottom: 1px solid #e2e5ea;
    background: #f7f8fa;
}
.product-settings-tabs button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #68707d;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
}
.product-settings-tabs button:hover {
    background: #eef1f5;
    color: #29313c;
}
.product-settings-tabs button.is-active {
    border-color: #b8c9f8;
    background: #eaf0ff;
    color: #3157bb;
}
.product-settings-body {
    max-height: calc(100vh - 178px);
    padding: 20px;
    overflow-y: auto;
}
.product-settings-panel[hidden] {
    display: none;
}
.product-settings-general {
    display: grid;
    grid-template-columns: minmax(240px, 0.7fr) minmax(420px, 1.3fr);
    gap: 16px;
}
.product-settings-general > .product-editor:only-child {
    grid-column: 1 / -1;
}
.product-settings-dialog .product-editor {
    padding: 18px;
    border: 1px solid #e3e6eb;
    border-radius: 9px;
}
.product-information-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-information-editor > header,
.product-information-editor > .product-custom-fields,
.product-information-editor > button {
    grid-column: 1 / -1;
}

.product-image-settings {
    align-self: start;
    padding: 18px;
    border: 1px solid #e3e6eb;
    border-radius: 9px;
    background: #fafbfc;
}
.product-image-settings > strong {
    color: #242a34;
    font-size: 13px;
}
.product-image-settings > p {
    margin: 6px 0 16px;
    color: #858c97;
    font-size: 10px;
}
.product-settings-dialog .product-variation-section {
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: transparent;
}
.product-variation-create {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid #cdd7f7;
    border-radius: 9px;
    background: #f7f9ff;
}
.product-variation-create[hidden] {
    display: none;
}
.product-variation-create header strong,
.product-variation-create header span {
    display: block;
}
.product-variation-create header strong {
    color: #242a34;
    font-size: 13px;
}
.product-variation-create header span {
    margin-top: 4px;
    color: #858c97;
    font-size: 10px;
}
.product-variation-create-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.product-variation-create > button {
    justify-self: end;
    min-width: 180px;
}
.product-variation-image {
    grid-column: 1 / -1;
}
.product-variation-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.product-variation-card {
    align-self: start;
    overflow: hidden;
    border: 1px solid #e3e6eb;
    border-radius: 9px;
    background: #fafbfc;
}
.product-variation-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    cursor: pointer;
    list-style: none;
}
.product-variation-card > summary::-webkit-details-marker {
    display: none;
}
.product-variation-card > summary::after {
    content: "+";
    margin-left: auto;
    color: #7d8490;
    font-size: 18px;
}
.product-variation-card[open] > summary::after {
    content: "−";
}
.product-variation-card > summary strong {
    color: #242a34;
    font-size: 12px;
}
.product-variation-card > summary img {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    object-fit: cover;
}
.product-variation-card > summary span {
    color: #858c97;
    font-size: 10px;
}
.product-variation-card .product-variation-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
    border: 0;
    border-top: 1px solid #e3e6eb;
    border-radius: 0;
    background: transparent;
}
.product-variation-card .product-variation-form label:last-of-type,
.product-variation-card .product-variation-form button {
    grid-column: 1 / -1;
}
.operations-shell[data-color-mode="dark"] .products-title h1,
.operations-shell[data-color-mode="dark"] .product-card-copy :is(strong, b),
.operations-shell[data-color-mode="dark"] .product-editor header strong,
.operations-shell[data-color-mode="dark"] .product-variation-section h2,
.operations-shell[data-color-mode="dark"] .product-variation-form > strong {
    color: #edf2f7;
}
.operations-shell[data-color-mode="dark"] :is(.product-card, .product-empty, .product-variation-section, .product-variation-card, .product-create-dialog, .product-settings-dialog) {
    border-color: #293543;
    background: #111821;
    color: #dce5ee;
}
.operations-shell[data-color-mode="dark"] :is(.product-card-image, .product-editor, .product-variation-form, .product-variation-create, .product-image-settings) {
    border-color: #293543;
    background: #151e28;
}
.operations-shell[data-color-mode="dark"] :is(.product-search input, .product-editor input, .product-editor textarea, .product-variation-form input, .product-variation-form textarea, .product-variation-create input, .product-variation-create textarea, .product-create-dialog input, .product-variation-picker button, .product-file-input) {
    border-color: #344252;
    background: #0d151e;
    color: #e7edf4;
}
.operations-shell[data-color-mode="dark"] .product-file-input::file-selector-button {
    background: #172944;
    color: #9fc0ff;
}
.operations-shell[data-color-mode="dark"] .product-settings-trigger {
    border-color: #344252;
    background: #111821;
    color: #e7edf4;
}
.operations-shell[data-color-mode="dark"] .product-settings-head {
    border-color: #293543;
}
.operations-shell[data-color-mode="dark"] .product-settings-tabs {
    border-color: #293543;
    background: #0d151e;
}
.operations-shell[data-color-mode="dark"] .product-settings-tabs button {
    color: #9aa9b8;
}
.operations-shell[data-color-mode="dark"] .product-settings-tabs button:hover {
    background: #17212c;
    color: #edf2f7;
}
.operations-shell[data-color-mode="dark"] .product-settings-tabs button.is-active {
    border-color: #385a8f;
    background: #172944;
    color: #8fb7ff;
}
.operations-shell[data-color-mode="dark"] .product-settings-dialog :is(.product-editor, .product-variation-card .product-variation-form) {
    border-color: #293543;
}
.operations-shell[data-color-mode="dark"] .product-variation-card > summary strong {
    color: #edf2f7;
}
.operations-shell[data-color-mode="dark"] .product-variation-create header strong {
    color: #edf2f7;
}
.operations-shell[data-color-mode="dark"] .ml-description {
    color: #aab8c6;
}
.operations-shell[data-color-mode="dark"] .product-custom-field-actions button {
    border-color: #344252;
    background: #0d151e;
    color: #aab8c6;
}
.operations-shell[data-color-mode="dark"] .product-custom-field-actions button:last-child {
    border-color: #663c45;
    background: #21151a;
    color: #f1a1ad;
}
.operations-shell[data-color-mode="dark"] .product-settings-head h2,
.operations-shell[data-color-mode="dark"] .product-image-settings > strong {
    color: #edf2f7;
}
@media (max-width: 1180px) {
    
    .product-settings-general {
        grid-template-columns: minmax(0, 1fr);
    }
    .product-editor {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .product-editor header,
    .product-editor button {
        grid-column: 1 / -1;
    }
}
@media (max-width: 760px) {
    .products-title,
    .product-variation-section > header,
    .product-image-form {
        align-items: stretch;
        flex-direction: column;
    }
    .product-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }
    .product-image-form {
        grid-template-columns: minmax(0, 1fr);
    }
    .product-catalog,
    .product-variation-create-fields,
    .product-variation-list,
    .product-editor {
        grid-template-columns: minmax(0, 1fr);
    }
    
    
    .product-editor header,
    .product-editor button {
        grid-column: auto;
    }
}
.products-page .ml-variation-picker {
    margin-top: 0;
}
.products-page .ml-variation-picker > span {
    display: block;
    margin: 10px 0 6px;
    color: #555555;
    font-size: 12px;
    font-weight: 700;
}
.products-page .ml-variation-picker > div {
    gap: 8px;
    margin-top: 0;
}
.products-page .ml-variation-picker button {
    min-height: 38px;
    padding: 0 14px;
    border-color: rgba(0, 0, 0, 0.12);
    color: #333333;
    font-size: 13px;
}
.products-page .ml-variation-picker button.is-selected {
    border-color: #3483fa;
    box-shadow: inset 0 0 0 1px #3483fa;
    color: #3483fa;
}
.product-editor .product-custom-fields {
    grid-column: 1 / -1;
}
.operations-shell[data-color-mode="dark"] .products-page .ml-variation-picker > span {
    color: #9aa9b8;
}
.operations-shell[data-color-mode="dark"] .products-page .ml-variation-picker button {
    border-color: #344252;
    background: #111821;
    color: #e7edf4;
}

/* Operational color modes */
.dashboard-tools .module-lane {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto;
    align-content: center;
    justify-content: stretch;
    gap: 14px;
}
.dashboard-tool-copy {
    padding-left: 0;
}
.operations-shell[data-color-mode="dark"]:not(.trello-board-page):not(.profile-steam-page) {
    --bg: #0b1118;
    --ink: #e8eef5;
    --muted: #9aaabc;
    --line: #2b3948;
    --paper: #121b25;
    --soft: #18232f;
    --field: #0e1721;
    --sidebar: #101821;
    --terminal-bg: #09131d;
    --terminal-ink: #dbe8f7;
}
.operations-shell[data-color-mode="dark"]:not(.trello-board-page):not(.profile-steam-page) :is(.side-panel, .workspace-topbar) {
    border-color: var(--line);
    background: var(--sidebar);
}
.operations-shell[data-color-mode="dark"]:not(.trello-board-page):not(.profile-steam-page) :is(.idw-page, .module-page) {
    background: var(--bg);
}
.operations-shell[data-color-mode="dark"] .dashboard-panel {
    border: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}
.operations-shell[data-color-mode="dark"] .dashboard-tools.module-board {
    background: transparent;
}
.operations-shell[data-color-mode="dark"] .dashboard-title p {
    color: var(--muted);
}
.operations-shell[data-color-mode="dark"]:not(.trello-board-page):not(.profile-steam-page) .module-page :is(.overview-hero, .sheet-hero, .meli-hero, .server-hero, .work-surface, .monitor-surface, .playwright-analysis-panel, .playwright-compare-panel, .playwright-access-panel, .playwright-activity-panel, .playwright-browser-panel, .capture-form, .capture-organizer, .capture-result-panel, .capture-job-panel, .server-stat) {
    border-color: var(--line);
    background: var(--paper);
    color: var(--ink);
}
.operations-shell[data-color-mode="dark"]:not(.trello-board-page):not(.profile-steam-page) .module-page :is(.input-zone, .monitor-head, .server-monitor-head, .server-surface .server-monitor, .playwright-section-head, .playwright-analysis-controls, .capture-section-head, .visibility-filter, .queue-list) {
    border-color: var(--line);
    background: var(--soft);
    color: var(--ink);
}
.operations-shell[data-color-mode="dark"]:not(.trello-board-page):not(.profile-steam-page) .module-page :is(textarea, input, select, .flat-action, .filter-options label, .monitor-row, .capture-preview, .capture-source-options label, .capture-month-options label, .capture-organize-scope label) {
    border-color: #344657;
    background: var(--field);
    color: var(--ink);
}
.operations-shell[data-color-mode="dark"]:not(.trello-board-page):not(.profile-steam-page) .module-page :is(.queue-item, .playwright-account, .playwright-analysis-account, .playwright-attention-list article) {
    background: var(--field);
    color: var(--ink);
}
.operations-shell[data-color-mode="dark"]:not(.trello-board-page):not(.profile-steam-page) .module-page :is(pre, .terminal-wrap, .result-zone) {
    background: var(--terminal-bg);
}
.operations-shell[data-color-mode="dark"]:not(.trello-board-page):not(.profile-steam-page) .module-page :is(.section-kicker, label, .queue-head, .visibility-filter > label) {
    color: var(--accent-ink);
}
.operations-shell[data-color-mode="dark"]:not(.trello-board-page):not(.profile-steam-page) .module-page :is(p, small, em, .queue-empty, .capture-empty) {
    color: var(--muted);
}
/* Focused operational refinements */
.login-box form {
    gap: 20px;
}
.login-box .field {
    display: grid;
    gap: 8px;
}
.profile-status-shell {
    grid-template-columns: minmax(0, 1fr);
}
.profile-status-card {
    border-color: rgba(102, 192, 244, 0.38);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}
.profile-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 24px;
}
.profile-status-grid > div {
    display: grid;
    align-content: center;
    gap: 6px;
    min-height: 118px;
    padding: 20px;
    border: 1px solid rgba(120, 170, 195, 0.2);
    border-radius: 6px;
    background: rgba(9, 16, 23, 0.7);
}
.profile-status-grid strong {
    color: #f3f7f9;
    font-size: 28px;
}
.profile-status-grid span,
.profile-status-grid small {
    color: #93a9b5;
}
.profile-status-grid .profile-online-dot {
    display: inline-block;
    width: 10px;
    min-height: 10px;
}
.profile-status-grid > div:first-child {
    grid-template-columns: auto 1fr;
}
.profile-status-grid > div:first-child strong {
    align-self: center;
}
.profile-status-grid > div:first-child small {
    grid-column: 1 / -1;
}
.planilha-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
}
.planilha-option {
    display: grid;
    align-content: end;
    gap: 7px;
}
.planilha-option > span,
.planilha-option > label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}
.planilha-option .text-filter-switch {
    width: 100%;
}
.marketplace-tool-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.marketplace-tool-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
    color: var(--ink);
    font-size: 11px;
    font-weight: 750;
}
.marketplace-tool-links a:hover {
    border-color: var(--accent);
    color: var(--accent-ink);
}
.connection-surface {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trello-board-page.trello-append-view .trello-intake-list {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 50;
    display: flex;
    width: min(540px, calc(100vw - 40px));
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.ml-pdp {
    grid-template-columns: minmax(360px, 1fr) minmax(0, 1fr);
}
.product-settings-trigger {
    justify-content: center;
    width: 38px;
    padding: 0;
}
.product-settings-product-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.product-settings-general > .product-editor:first-child {
    grid-column: 1 / -1;
}
.product-settings-product-actions form {
    margin: 0;
}
.product-image-settings {
    display: grid;
    gap: 12px;
}
.product-image-picker {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px dashed #c8d0dc;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}
.product-image-settings .product-image-picker {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}
.product-image-settings .product-image-preview {
    width: 160px;
    height: 120px;
}
[data-product-base-settings][hidden] {
    display: none;
}
.product-image-picker > span:nth-child(2) {
    display: grid;
    gap: 4px;
}
.product-image-picker small {
    color: #858c97;
    font-size: 10px;
}
.product-image-preview {
    display: grid;
    place-items: center;
    width: 72px;
    height: 58px;
    overflow: hidden;
    border-radius: 6px;
    background: #eef1f5;
    color: #858c97;
    font-size: 9px;
}
.product-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-image-picker .product-file-input {
    position: absolute;
    width: 1px;
    height: 1px !important;
    padding: 0 !important;
    opacity: 0;
}
.product-custom-fields > header {
    justify-content: flex-end;
}
.operations-shell[data-color-mode="dark"] .product-image-picker {
    border-color: #3c4a5b;
    background: #111821;
    color: #edf2f7;
}
.operations-shell[data-color-mode="dark"] .product-image-preview {
    background: #1b2632;
}
@media (max-width: 1080px) {
    .connection-surface {
        grid-template-columns: minmax(0, 1fr);
    }
}
.profile-steam-page[data-color-mode="light"] .profile-status-grid > div {
    border-color: #d8e1e6;
    background: #f4f7f8;
}
.profile-steam-page[data-color-mode="light"] .profile-status-grid strong {
    color: #1f303a;
}
.profile-steam-page[data-color-mode="light"] .profile-status-grid :is(span, small) {
    color: #667985;
}
@media (max-width: 760px) {
    .capture-organize-scope,
    .profile-status-grid,
    .planilha-options {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Landing page */
.landing-page {
    --bg: #0b1120;
    --ink: #edf2f7;
    --muted: #94a3b8;
    --line: #1e293b;
    --paper: #111827;
    --soft: #1e293b;
    --field: #0f172a;
    color-scheme: dark;
}
html[data-color-mode="light"] .landing-page {
    --bg: #f8fafc;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --paper: #ffffff;
    --soft: #f1f5f9;
    --field: #ffffff;
    color-scheme: light;
}
.landing-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
}
.landing-header {
    padding: 0 32px;
    border-bottom: 1px solid var(--line);
}
.landing-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1136px;
    margin: 0 auto;
    padding: 16px 0;
}
.landing-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.landing-brand img {
    height: 28px;
}
.landing-brand strong {
    font-size: 16px;
}
.landing-nav {
    display: flex;
    gap: 24px;
}
.landing-nav a {
    color: var(--muted);
    font-size: 14px;
    transition: color 160ms;
}
.landing-nav a:hover {
    color: var(--ink);
}
.landing-main {
    flex: 1;
}
.landing-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 80px 32px 64px;
    max-width: 1200px;
    margin: 0 auto;
}
.landing-kicker {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.landing-hero h1 {
    font-size: 42px;
    line-height: 1.1;
    margin: 8px 0 16px;
    letter-spacing: -0.02em;
}
.landing-hero p {
    font-size: 16px;
    line-height: 1.6;
    max-width: 480px;
}
.landing-hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
.landing-hero-actions .primary-action,
.landing-hero-actions .flat-action {
    display: inline-flex;
    padding: 10px 24px;
    border-radius: var(--control-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms, transform 160ms;
}
.landing-hero-actions .primary-action {
    background: var(--accent);
    color: #fff;
    border: none;
}
.landing-hero-actions .primary-action:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}
.landing-hero-actions .flat-action {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
}
.landing-hero-actions .flat-action:hover {
    color: var(--ink);
    border-color: var(--muted);
}
.landing-preview-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}
.landing-preview-header {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.landing-preview-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--line);
}
.landing-preview-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.landing-preview-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--soft);
    font-size: 13px;
    font-weight: 500;
}
.landing-preview-row img {
    width: 18px;
    height: 18px;
}
.landing-features {
    padding: 64px 32px;
    max-width: 1200px;
    margin: 0 auto;
}
.landing-features,
.landing-access {
    scroll-margin-top: 24px;
}
.landing-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.landing-feature-card {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    transition: border-color 160ms, transform 160ms;
}
.landing-feature-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.landing-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.landing-feature-icon img {
    width: 22px;
    height: 22px;
}
.landing-feature-card h3 {
    font-size: 16px;
    margin: 0 0 8px;
}
.landing-feature-card p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}
.landing-access {
    padding: 64px 32px;
    display: flex;
    justify-content: center;
}
.landing-access-box {
    width: 100%;
    max-width: 400px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 32px;
}
.landing-access-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}
.landing-access-brand img {
    height: 32px;
}
.landing-access-brand strong {
    font-size: 18px;
}
.landing-access-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    overflow: hidden;
}
.landing-access-tabs a,
.landing-access-tabs span {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    transition: background 160ms;
}
.landing-access-tabs span {
    background: var(--accent);
    color: #fff;
}
.landing-access-tabs a {
    color: var(--muted);
}
.landing-access-tabs a:hover {
    background: var(--soft);
}
.landing-access-box .field {
    margin-bottom: 16px;
}
.landing-access-box .field label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
}
.landing-access-box .field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--field);
    color: var(--ink);
    font-size: 14px;
}
.landing-access-box .field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.landing-access-box .primary-action {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: var(--control-radius);
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 160ms, transform 160ms;
}
.landing-access-box .primary-action:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.landing-footer {
    text-align: center;
    padding: 24px 32px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
}
@media (max-width: 768px) {
    .landing-hero {
        grid-template-columns: 1fr;
        padding: 40px 20px;
        gap: 32px;
    }
    .landing-hero h1 {
        font-size: 28px;
    }
    .landing-hero-visual {
        display: none;
    }
    .landing-header {
        padding: 0 20px;
    }
    .landing-header-inner {
        padding: 12px 0;
    }
    .landing-features {
        padding: 40px 20px;
    }
    .landing-access {
        padding: 40px 20px;
    }
}

/* Dedicated sign-in page */
.auth-login-page {
    --auth-navy: #0b1730;
    --auth-navy-soft: #14284d;
    --auth-blue: #3478f6;
    --auth-blue-dark: #1f5fd1;
    --auth-ink: #172033;
    --auth-muted: #697386;
    --auth-line: #dce2eb;
    --auth-surface: #f7f9fc;
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--auth-surface);
    color: var(--auth-ink);
}
.auth-login-shell {
    display: grid;
    grid-template-columns: minmax(360px, 0.92fr) minmax(500px, 1.08fr);
    min-height: 100dvh;
}
.auth-login-intro {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: clamp(32px, 5vw, 72px);
    overflow: hidden;
    background: var(--auth-navy);
    color: #f8fbff;
}
.auth-login-intro::before,
.auth-login-intro::after {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.auth-login-intro::before {
    top: -20%;
    right: -32%;
    width: min(40vw, 580px);
    aspect-ratio: 1;
    border: 1px solid rgba(91, 151, 255, 0.22);
    box-shadow: 0 0 0 80px rgba(52, 120, 246, 0.035), 0 0 0 160px rgba(52, 120, 246, 0.025);
}
.auth-login-intro::after {
    right: -90px;
    bottom: -140px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(52, 120, 246, 0.2), transparent 68%);
}
.auth-login-brand,
.auth-login-mobile-brand a {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 12px;
}
.auth-login-brand img,
.auth-login-mobile-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}
.auth-login-brand span,
.auth-login-mobile-brand strong {
    font-size: 18px;
    font-weight: 760;
    letter-spacing: -0.02em;
}
.auth-login-intro-content {
    width: min(100%, 550px);
    margin: auto 0;
    padding: 72px 0;
}
.auth-login-eyebrow,
.auth-login-step {
    display: block;
    color: #75a8ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.auth-login-intro h1 {
    max-width: 580px;
    margin: 16px 0 22px;
    font-size: clamp(42px, 5vw, 70px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.055em;
}
.auth-login-intro-content > p {
    max-width: 520px;
    margin: 0;
    color: #acb9cf;
    font-size: 15px;
    line-height: 1.7;
}
.auth-login-points {
    display: grid;
    gap: 15px;
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
}
.auth-login-points li {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #d5deed;
    font-size: 13px;
}
.auth-login-points span {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border: 1px solid rgba(117, 168, 255, 0.32);
    border-radius: 50%;
    color: #75a8ff;
    font-size: 9px;
    font-weight: 800;
}
.auth-login-intro-footer {
    margin: 0;
    color: #687995;
    font-size: 11px;
}
.auth-login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    padding: clamp(32px, 6vw, 96px);
    background: var(--auth-surface);
}
.auth-login-mobile-brand {
    display: none;
}
.auth-login-card {
    width: min(100%, 440px);
    margin: auto;
}
.auth-login-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: clamp(44px, 7vh, 76px);
    color: var(--auth-muted);
    font-size: 12px;
    font-weight: 650;
    transition: color 160ms ease, transform 160ms ease;
}
.auth-login-back:hover {
    color: var(--auth-blue-dark);
    transform: translateX(-2px);
}
.auth-login-step {
    color: var(--auth-blue-dark);
}
.auth-login-heading h2 {
    margin: 12px 0 10px;
    color: var(--auth-ink);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 720;
    line-height: 1.05;
    letter-spacing: -0.045em;
}
.auth-login-heading p {
    max-width: 390px;
    margin: 0;
    color: var(--auth-muted);
    font-size: 14px;
    line-height: 1.6;
}
.auth-login-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding: 12px 14px;
    border: 1px solid #f2c5c8;
    border-radius: 9px;
    background: #fff2f3;
    color: #9f2730;
}
.auth-login-error > span {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    border-radius: 50%;
    background: #c63d48;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
.auth-login-error p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}
.auth-login-form {
    display: grid;
    gap: 20px;
    margin-top: 34px;
}
.auth-login-field {
    display: grid;
    gap: 8px;
}
.auth-login-field label {
    color: #303a4d;
    font-size: 12px;
    font-weight: 700;
}
.auth-login-field input {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border: 1px solid var(--auth-line);
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: var(--auth-ink);
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(24, 38, 63, 0.025);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.auth-login-field input::placeholder {
    color: #a2aaba;
}
.auth-login-field input:focus {
    border-color: var(--auth-blue);
    box-shadow: 0 0 0 3px rgba(52, 120, 246, 0.12);
}
.auth-login-field small {
    color: var(--auth-muted);
    font-size: 11px;
}
.auth-login-code {
    letter-spacing: 0.32em;
    text-align: center;
    font-size: 18px !important;
    font-weight: 700;
}
.auth-login-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
    margin-top: 4px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    background: var(--auth-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 9px 24px rgba(52, 120, 246, 0.2);
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.auth-login-submit:hover {
    background: var(--auth-blue-dark);
    box-shadow: 0 11px 28px rgba(31, 95, 209, 0.25);
    transform: translateY(-1px);
}
.auth-login-submit:focus-visible,
.auth-login-back:focus-visible,
.auth-login-brand:focus-visible,
.auth-login-register a:focus-visible {
    outline: 3px solid rgba(52, 120, 246, 0.32);
    outline-offset: 3px;
}
.auth-login-register {
    margin: 28px 0 0;
    color: var(--auth-muted);
    font-size: 12px;
    text-align: center;
}
.auth-login-register a {
    color: var(--auth-blue-dark);
    font-weight: 750;
}
.auth-login-register a:hover {
    text-decoration: underline;
}
.auth-login-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: auto auto 0;
    color: #929bad;
    font-size: 10px;
}
.auth-login-security span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #42aa70;
    box-shadow: 0 0 0 3px rgba(66, 170, 112, 0.12);
}
@media (max-width: 900px) {
    .auth-login-shell {
        grid-template-columns: minmax(0, 1fr);
    }
    .auth-login-intro {
        display: none;
    }
    .auth-login-panel {
        justify-content: flex-start;
        padding: 28px max(24px, calc((100vw - 440px) / 2));
    }
    .auth-login-mobile-brand {
        display: block;
        margin-bottom: clamp(56px, 10vh, 96px);
    }
    .auth-login-card {
        margin: 0 auto auto;
    }
    .auth-login-back {
        display: none;
    }
    .auth-login-security {
        padding-top: 52px;
    }
}
@media (max-width: 520px) {
    .auth-login-panel {
        min-height: 100svh;
        padding: 22px 20px 24px;
    }
    .auth-login-mobile-brand {
        margin-bottom: 52px;
    }
    .auth-login-mobile-brand img {
        width: 36px;
        height: 36px;
    }
    .auth-login-heading h2 {
        font-size: 34px;
    }
    .auth-login-form {
        margin-top: 28px;
    }
}

/* Commerce listing page */
.commerce-page-content {
    padding: 0 32px 48px;
}
.commerce-hero {
    padding: 32px 0;
}
.commerce-hero h1 {
    font-size: 24px;
    margin-bottom: 4px;
}
.commerce-empty {
    text-align: center;
    padding: 64px 32px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    margin-top: 16px;
}
.commerce-empty h2 {
    font-size: 18px;
    margin-bottom: 8px;
}
.commerce-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.commerce-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    transition: border-color 160ms, transform 160ms;
    cursor: pointer;
}
.commerce-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.commerce-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}
.commerce-card-info {
    flex: 1;
    min-width: 0;
}
.commerce-card-info strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}
.commerce-card-info small {
    font-size: 12px;
    color: var(--muted);
}
.commerce-card-services {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.commerce-service-tag {
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
.commerce-card-arrow {
    color: var(--muted);
    font-size: 18px;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .commerce-page-content {
        padding: 0 16px 32px;
    }
    .commerce-grid {
        grid-template-columns: 1fr;
    }
}
.landing-hero-visual {
    min-width: 0;
}