/* Akilli Ads Manager — Satoshi only (full family) */

:root,
[data-theme="dark"] {
    --bg: #0c0c0c;
    --bg-raised: #141414;
    --surface: #121212;
    --ink: #fcfce9;
    --muted: #9a9a86;
    --line: #2a2a26;
    --line-strong: #3d3d36;
    --danger: #fcfce9;
    --shadow: rgba(252, 252, 233, 0.12);
    --hover-fill: rgba(252, 252, 233, 0.05);
    --nav-fill: rgba(252, 252, 233, 0.06);
    --bar-bg: rgba(12, 12, 12, 0.92);
    --glow-a: rgba(252, 252, 233, 0.045);
    --glow-b: rgba(252, 252, 233, 0.03);
    --font-display: "Satoshi", system-ui, sans-serif;
    --font-body: "Satoshi", system-ui, sans-serif;
    --font-ui: "Satoshi", system-ui, sans-serif;
    --tracking-satoshi: -0.035em;
    color-scheme: dark;
}

[data-theme="light"] {
    --bg: #fcfce9;
    --bg-raised: #f5f5dc;
    --surface: #ffffff;
    --ink: #0c0c0c;
    --muted: #5c5c52;
    --line: #e4e4c8;
    --line-strong: #cfcfb0;
    --danger: #0c0c0c;
    --shadow: rgba(12, 12, 12, 0.14);
    --hover-fill: rgba(12, 12, 12, 0.05);
    --nav-fill: rgba(12, 12, 12, 0.06);
    --bar-bg: rgba(252, 252, 233, 0.92);
    --glow-a: rgba(12, 12, 12, 0.04);
    --glow-b: rgba(12, 12, 12, 0.03);
    color-scheme: light;
}

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

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

html {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

/* Theme-aware native controls + scrollbars */
select,
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
    color-scheme: inherit;
}

select,
select option,
select optgroup {
    background-color: var(--surface);
    color: var(--ink);
}

select option:checked,
select option:hover {
    background-color: var(--bg-raised);
    color: var(--ink);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) var(--bg-raised);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--bg-raised);
}

*::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 999px;
    border: 2px solid var(--bg-raised);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

*::-webkit-scrollbar-corner {
    background: var(--bg-raised);
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--ink);
    background: var(--bg);
    letter-spacing: var(--tracking-satoshi);
    -webkit-font-smoothing: antialiased;
}

/* Satoshi: tight tracking everywhere it is used */
.auth-brand,
.auth-lede,
.auth-alert,
.auth-field,
.auth-field input,
.app-user,
.app-logout,
.app-nav-link,
.app-copy,
.eyebrow,
.flash,
.empty-title,
.site-meta,
.site-facts dt,
.site-facts dd,
.meta-chips,
.meta-chip-label,
.meta-row-title,
.form-section-lede,
.btn-ghost,
.btn-ghost-danger {
    letter-spacing: var(--tracking-satoshi);
}

.paper-field {
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 90% 55% at 50% -15%, var(--glow-a) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 100%, var(--glow-b) 0%, transparent 55%);
}

/* --- Login --- */

.auth-stage {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
    overflow: hidden;
}

.auth-atmosphere {
    pointer-events: none;
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.55);
}

.auth-card {
    position: relative;
    z-index: 1;
    width: min(26rem, 100%);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 2.4rem 1.85rem 2.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.2rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    animation: auth-rise 420ms cubic-bezier(0.2, 0, 0, 1) both;
}

.auth-brand {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.auth-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.6rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--ink);
}

.auth-lede {
    margin: 0 0 0.35rem;
    font-size: 1.12rem;
    line-height: 1.45;
    color: var(--muted);
    font-weight: 400;
}

.auth-alert {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.2rem;
    background: var(--bg-raised);
    font-size: 1rem;
    color: var(--ink);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 0.35rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.auth-field > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.auth-field input {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.65rem 0.1rem 0.55rem;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: var(--tracking-satoshi);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.auth-field input::placeholder {
    color: var(--muted);
    opacity: 0.55;
}

.auth-field input:focus {
    outline: none;
    border-bottom-color: var(--ink);
    background: transparent;
    box-shadow: 0 1px 0 var(--ink);
}

.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
    transition: background-color 99999s ease-in-out 0s;
    box-shadow: 0 0 0 1000px var(--surface) inset;
    border-bottom: 1px solid var(--line-strong);
}

.auth-submit {
    margin-top: 0.55rem;
    min-height: 2.9rem;
    border: 1px solid var(--ink);
    border-radius: 0.15rem;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-submit:hover {
    background: var(--hover-fill);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--shadow);
}

.auth-submit:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--shadow);
}

@keyframes auth-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .auth-submit {
        animation: none;
        transition: none;
    }
}

/* --- Signed-in shell --- */

.app {
    min-height: 100vh;
}

.app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--bar-bg);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px);
}

.app-brand {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    line-height: 0;
}

.app-brand-logo {
    display: block;
    height: 2.75rem;
    width: auto;
    max-width: min(14rem, 46vw);
    object-fit: contain;
    object-position: left center;
}

.app-brand-text {
    line-height: 1;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.helix-mark {
    position: relative;
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}

.helix-mark-ring {
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(-25deg);
    opacity: 0.9;
}

.helix-mark-core {
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    background: var(--ink);
    opacity: 0.85;
}

.helix-engine-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 0.15rem;
    padding: 0.18rem 0.45rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--hover-fill);
    white-space: nowrap;
}

.auth-brand-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.auth-brand-logo {
    display: block;
    height: auto;
    width: min(16rem, 100%);
    max-height: 4.75rem;
    object-fit: contain;
    object-position: left center;
}

.auth-helix-tag {
    margin: 0.15rem 0 0;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: var(--tracking-satoshi);
    color: var(--muted);
}

.auth-brand-wrap .auth-brand {
    margin: 0;
}

.app-bar-right {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-left: auto;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 0.15rem;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--shadow);
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.theme-toggle:hover {
    background: var(--hover-fill);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--shadow);
}

.auth-theme {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2;
}

.app-user {
    color: var(--muted);
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.app-logout {
    border: 1px solid var(--line-strong);
    border-radius: 0.15rem;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: var(--tracking-satoshi);
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--shadow);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.app-logout:hover {
    background: var(--hover-fill);
}

.app-main {
    max-width: 40rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.app-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.05;
}

.app-copy {
    margin: 0;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1.5;
}

.app-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 1.25rem;
}

.app-nav-link {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    padding: 0.4rem 0.7rem;
    border-radius: 0.15rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.app-nav-link:hover,
.app-nav-link.is-active {
    color: var(--ink);
    background: var(--nav-fill);
}

.workspace {
    width: min(100% - 2rem, 92rem);
    max-width: none;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.workspace-narrow {
    width: min(100% - 2rem, 92rem);
}

.workspace-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.eyebrow {
    margin: 0 0 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-ghost-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.6rem;
    padding: 0.55rem 1.15rem;
    border-radius: 0.15rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.btn-primary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    box-shadow: 3px 3px 0 var(--shadow);
}

.btn-primary:hover {
    background: var(--hover-fill);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--shadow);
}

.btn-secondary {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--shadow);
}

.btn-secondary:hover {
    border-color: var(--ink);
}

.btn-ghost {
    background: transparent;
    color: var(--muted);
}

.btn-ghost:hover {
    color: var(--ink);
}

.btn-ghost-danger {
    background: transparent;
    color: var(--muted);
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 0.9rem;
}

.btn-ghost-danger:hover:not(:disabled) {
    color: #e8b4b4;
}

.btn-ghost-danger:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.flash {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 0.2rem;
    border: 1px solid var(--line-strong);
    background: var(--bg-raised);
    font-size: 1.05rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.flash-ok {
    border-color: #3d4636;
}

.flash-err {
    border-color: var(--line-strong);
}

.empty-panel {
    padding: 3rem 1.5rem;
    text-align: left;
    border: 1px dashed var(--line-strong);
    border-radius: 0.2rem;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
}

.empty-icon {
    color: var(--muted);
    opacity: 0.85;
}

.empty-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 400;
}

.site-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.site-item {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 22rem;
    height: 100%;
    padding: 1rem 1rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.2rem;
}

.site-item--summary {
    min-height: 19.5rem;
}

.site-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1 1 auto;
    min-width: 0;
}

.site-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.15;
}

.site-store {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    letter-spacing: var(--tracking-satoshi);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    word-break: break-all;
}

.site-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.15rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.15rem;
    background: color-mix(in srgb, var(--panel) 92%, var(--ink) 8%);
}

.site-stat-label {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.site-stat-value {
    font-family: var(--font-ui);
    font-size: 1.15rem;
    font-weight: 700;
}

.site-health {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: auto;
}

.site-health-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.15rem;
}

.site-health-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.15rem;
    background: color-mix(in srgb, var(--surface) 80%, var(--ink) 20%);
    color: var(--muted);
}

.site-health-row.is-ok .site-health-icon {
    background: rgba(184, 224, 184, 0.22);
    color: #b8e0b8;
}

.site-health-row.is-fail .site-health-icon {
    background: rgba(224, 160, 160, 0.22);
    color: #e0a0a0;
}

.site-health-row.is-unknown .site-health-icon {
    color: var(--muted);
}

html[data-theme="light"] .site-health-row.is-ok .site-health-icon {
    color: #1f6b3a;
}

html[data-theme="light"] .site-health-row.is-fail .site-health-icon {
    color: #9b2c2c;
}

.site-health-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.site-health-title {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.site-health-status {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
}

.site-health-row.is-ok .site-health-status {
    color: #b8e0b8;
}

.site-health-row.is-fail .site-health-status {
    color: #e0a0a0;
}

html[data-theme="light"] .site-health-row.is-ok .site-health-status {
    color: #1f6b3a;
}

html[data-theme="light"] .site-health-row.is-fail .site-health-status {
    color: #9b2c2c;
}

.site-health-time {
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: var(--tracking-satoshi);
}

.site-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-start;
}

.site-meta a,
.site-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-meta .meta-sep {
    display: none;
}

.site-meta a {
    color: var(--ink);
}

.site-facts {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.site-facts dt {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.site-facts dd {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
    word-break: break-all;
}

.meta-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.meta-chips li {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--muted);
    padding: 0.55rem 0.6rem;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: 0.15rem;
}

.meta-chip-top {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.meta-chip-ids {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.78rem;
}

.meta-chip-label {
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.site-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: 0.35rem;
    border-top: 1px solid var(--line);
}

.site-actions .btn-secondary,
.site-actions .btn-ghost-danger {
    width: 100%;
    min-height: 2.35rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.55rem;
}

.site-item .secret-vault {
    padding: 0.35rem 0.4rem;
}

.site-item .secret-blur {
    height: 0.55rem;
}

.stack-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section {
    padding: 1.4rem 1.35rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.2rem;
}

.form-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-section-title {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.form-section-lede {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.45;
}

.form-section-head .form-section-lede {
    margin-bottom: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem 1.35rem;
}

.form-span-2 {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.meta-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.meta-row {
    margin: 0;
    padding: 1rem 1rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.15rem;
    background: var(--bg-raised);
    min-width: 0;
}

.meta-row-title {
    padding: 0 0.25rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.meta-remove {
    margin-top: 0.85rem;
}

.secret-block {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.15rem;
}

.secret-label {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.secret-vault {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 0.15rem;
    background: var(--bg-raised);
}

.secret-vault-inline {
    flex: 1 1 12rem;
    min-width: 10rem;
}

.secret-mask {
    flex: 1 1 auto;
    min-width: 0;
    height: 1.15rem;
    display: flex;
    align-items: center;
}

.secret-blur {
    display: block;
    width: 100%;
    height: 0.7rem;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--ink) 18%, transparent),
        color-mix(in srgb, var(--ink) 42%, transparent),
        color-mix(in srgb, var(--ink) 18%, transparent)
    );
    filter: blur(3px);
    opacity: 0.85;
    user-select: none;
    pointer-events: none;
}

.secret-value {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    letter-spacing: var(--tracking-satoshi);
    color: var(--ink);
    word-break: break-all;
    user-select: text;
}

.secret-actions {
    display: inline-flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.secret-copy:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.secret-copy.is-copied {
    border-color: var(--ink);
}

.secret-vault.is-loading {
    opacity: 0.7;
}

/* Lucide icons */
.icon-sm,
i[data-lucide].icon-sm,
svg.lucide.icon-sm {
    width: 1em;
    height: 1em;
    stroke-width: 1.75;
    flex-shrink: 0;
}

.icon-lg,
i[data-lucide].icon-lg,
svg.lucide.icon-lg {
    width: 2.4rem;
    height: 2.4rem;
    stroke-width: 1.5;
}

svg.lucide {
    vertical-align: -0.125em;
}

.metrics-fetch-panel {
    margin-bottom: 1.5rem;
}

.metrics-fetch-form {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) minmax(9rem, 12rem) minmax(12rem, 1fr) auto;
    gap: 1rem;
    align-items: end;
}

.metrics-fetch-form select,
.metrics-fetch-form input[type="date"] {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.15rem;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.05rem;
    letter-spacing: var(--tracking-satoshi);
    color-scheme: inherit;
}

.metrics-fetch-form select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink) 50%),
        linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position:
        calc(100% - 1.15rem) calc(50% - 0.15rem),
        calc(100% - 0.75rem) calc(50% - 0.15rem);
    background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
    background-repeat: no-repeat;
    padding-right: 2.2rem;
}

.metrics-fetch-form select option,
.metrics-fetch-form select optgroup {
    background-color: var(--surface);
    color: var(--ink);
}

.metrics-fetch-form input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.85;
    filter: invert(0);
}

html[data-theme="dark"] .metrics-fetch-form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.metrics-fetch-form select:focus,
.metrics-fetch-form input[type="date"]:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--hover-fill);
}

.metrics-fetch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.metrics-fetch-actions .btn-secondary.is-loading {
    opacity: 0.65;
}

#metrics-fetch-status {
    margin-top: 1rem;
}

@media (max-width: 900px) {
    .metrics-fetch-form {
        grid-template-columns: 1fr;
    }
}

.metrics-table-wrap {
    overflow: auto;
    max-height: min(70vh, 42rem);
    border: 1px solid var(--line);
    border-radius: 0.2rem;
    background: var(--surface);
}

.metrics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.metrics-table th,
.metrics-table td {
    padding: 0.75rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.metrics-table th {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
    background: var(--bg-raised);
}

.metrics-table tbody tr:last-child td {
    border-bottom: 0;
}

.campaigns-table {
    table-layout: fixed;
    width: 100%;
}

.campaigns-table th,
.campaigns-table td {
    padding: 0.4rem 0.4rem;
    vertical-align: top;
}

.campaigns-table th:nth-child(1),
.campaigns-table td:nth-child(1) { width: 12%; } /* name */
.campaigns-table th:nth-child(2),
.campaigns-table td:nth-child(2) { width: 7%; } /* status */
.campaigns-table th:nth-child(3),
.campaigns-table td:nth-child(3) { width: 7%; } /* purchases */
.campaigns-table th:nth-child(4),
.campaigns-table td:nth-child(4) { width: 8%; } /* roas */
.campaigns-table th:nth-child(5),
.campaigns-table td:nth-child(5) { width: 9%; } /* cpr */
.campaigns-table th:nth-child(6),
.campaigns-table td:nth-child(6) { width: 8%; } /* budget */
.campaigns-table th:nth-child(7),
.campaigns-table td:nth-child(7) { width: 32%; } /* advice */
.campaigns-table th:nth-child(8),
.campaigns-table td:nth-child(8) { width: 17%; } /* budget change */

.campaign-advice-cell {
    min-width: 16rem;
}

.advice-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 22rem;
}

.advice-top {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.advice-engine {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 0.05rem;
}

.creative-score-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.12rem 0.45rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.15rem;
    background: var(--hover-fill);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    line-height: 1;
}

.creative-score-chip:hover {
    border-color: var(--ink);
}

.creative-score-chip.is-strong {
    border-color: rgba(143, 191, 159, 0.55);
    color: #8fbf9f;
}

.creative-score-chip.is-healthy {
    border-color: rgba(143, 191, 159, 0.35);
}

.creative-score-chip.is-watch {
    border-color: rgba(212, 181, 106, 0.55);
    color: #d4b56a;
}

.creative-score-chip.is-weak {
    border-color: rgba(224, 160, 160, 0.55);
    color: #e0a0a0;
}

html[data-theme="light"] .creative-score-chip.is-strong { color: #1a4d2e; }
html[data-theme="light"] .creative-score-chip.is-watch { color: #6a4c00; }
html[data-theme="light"] .creative-score-chip.is-weak { color: #6b1d1d; }

.creative-intel-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.55);
}

.creative-intel-overlay[hidden] {
    display: none;
}

.creative-intel-modal {
    width: min(28rem, 100%);
    max-height: min(85vh, 36rem);
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: 0.2rem;
    background: var(--surface);
    padding: 1.1rem 1.15rem 1.2rem;
}

.creative-intel-top {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.creative-intel-kicker {
    margin: 0 0 0.2rem;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.creative-intel-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
}

.creative-intel-score-wrap {
    margin-left: auto;
    text-align: right;
}

.creative-intel-score {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1;
}

.creative-intel-score.is-strong { color: #8fbf9f; }
.creative-intel-score.is-watch { color: #d4b56a; }
.creative-intel-score.is-weak { color: #e0a0a0; }
html[data-theme="light"] .creative-intel-score.is-strong { color: #1a4d2e; }
html[data-theme="light"] .creative-intel-score.is-watch { color: #6a4c00; }
html[data-theme="light"] .creative-intel-score.is-weak { color: #6b1d1d; }

.creative-intel-label {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--muted);
}

.creative-intel-lede {
    margin: 0 0 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--muted);
}

.creative-intel-actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.creative-intel-action {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.15rem;
    background: color-mix(in srgb, var(--panel) 90%, var(--ink) 10%);
}

.creative-intel-action strong {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
}

.creative-intel-action p {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--muted);
}

.creative-intel-action.is-creative_still_healthy {
    border-color: rgba(143, 191, 159, 0.4);
}

.creative-intel-action.is-creative_fatigue,
.creative-intel-action.is-change_hook,
.creative-intel-action.is-replace_thumbnail {
    border-color: rgba(212, 181, 106, 0.45);
}

.creative-intel-empty {
    color: var(--muted, #8a8a8a);
    font-size: 0.9rem;
    list-style: none;
}

.creative-genome-panel {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .creative-genome-panel {
    border-top-color: rgba(0, 0, 0, 0.08);
}

.creative-genome-kicker {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted, #8a8a8a);
}

.creative-genome-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 640px) {
    .creative-genome-cols {
        grid-template-columns: 1fr;
    }
}

.creative-genome-heading {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.creative-genome-heading.is-worst {
    color: #c98a8a;
}

html[data-theme="light"] .creative-genome-heading.is-worst {
    color: #8a3030;
}

.creative-genome-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.creative-genome-item {
    display: grid;
    gap: 0.15rem;
    font-size: 0.84rem;
}

.creative-genome-item strong {
    font-weight: 600;
}

.creative-genome-item span {
    font-size: 0.75rem;
    color: var(--muted, #8a8a8a);
}

.creative-genome-item.is-win strong {
    color: #8fbf9f;
}

.creative-genome-item.is-worst strong {
    color: #e0a0a0;
}

html[data-theme="light"] .creative-genome-item.is-win strong { color: #1a4d2e; }
html[data-theme="light"] .creative-genome-item.is-worst strong { color: #6b1d1d; }

.creative-genome-empty {
    color: var(--muted, #8a8a8a);
    font-size: 0.82rem;
}

.creative-genome-meta {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--muted, #8a8a8a);
}

.creative-genome-dna {
    margin-top: 1rem;
}

.creative-genome-chips {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.creative-genome-chip {
    font-size: 0.72rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

html[data-theme="light"] .creative-genome-chip {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
}

.advice-headline {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: var(--tracking-satoshi);
    color: var(--ink);
    line-height: 1.25;
}

.winner-finder-card {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    margin: 0 0 0.85rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid var(--line, #2a2a26);
    background: var(--surface, #121212);
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color 140ms ease, background 140ms ease;
}

.winner-finder-card:hover {
    border-color: var(--line-strong, #3d3d36);
    background: var(--bg-raised, #141414);
}

.winner-finder-card-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.winner-finder-card-title {
    font-size: 1rem;
    font-weight: 600;
}

.winner-finder-card-summary {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.35;
}

.winner-finder-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.winner-finder-card-stats em {
    font-style: normal;
    font-weight: 700;
    color: var(--ink);
    margin-right: 0.2rem;
}

.winner-finder-card-stats .is-ready em { color: #8fbf9f; }
.winner-finder-card-stats .is-attention em { color: #d4b56a; }
.winner-finder-card-stats .is-waste em { color: #e0a0a0; }
html[data-theme="light"] .winner-finder-card-stats .is-ready em { color: #1a4d2e; }
html[data-theme="light"] .winner-finder-card-stats .is-attention em { color: #6a4c00; }
html[data-theme="light"] .winner-finder-card-stats .is-waste em { color: #6b1d1d; }

.winner-finder-card-cta {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.alert-center-card {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    margin: 0 0 0.85rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid var(--line, #2a2a26);
    background: var(--surface, #121212);
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color 140ms ease, background 140ms ease;
}

.alert-center-card:hover {
    border-color: var(--line-strong, #3d3d36);
    background: var(--bg-raised, #141414);
}

.alert-center-card-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.alert-center-card-title {
    font-size: 1rem;
    font-weight: 600;
}

.alert-center-card-summary {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.35;
}

.alert-center-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.alert-center-card-stats em {
    font-style: normal;
    font-weight: 700;
    color: var(--ink);
    margin-right: 0.2rem;
}

.alert-center-card-stats .is-top {
    color: var(--ink);
}

.alert-center-card-cta {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.alert-center-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.55);
}

.alert-center-overlay[hidden] {
    display: none !important;
}

.alert-center-modal {
    width: min(720px, 100%);
    max-height: min(88vh, 900px);
    overflow: auto;
    border: 1px solid var(--line, #2a2a26);
    background: var(--bg-raised, #141414);
    color: var(--ink);
    padding: 1rem 1.1rem 1.2rem;
}

.alert-center-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.alert-center-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.alert-center-title {
    margin: 0;
    font-size: 1.25rem;
}

.alert-center-lede {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.alert-center-policy {
    margin: 0 0 0.85rem;
    font-size: 0.72rem;
    color: var(--muted);
}

.alert-center-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.alert-center-item {
    display: grid;
    gap: 0.3rem;
    padding: 0.65rem 0.7rem;
    border-left: 3px solid rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left-width: 3px;
}

html[data-theme="light"] .alert-center-item {
    border-color: rgba(0, 0, 0, 0.06);
}

.alert-center-item.is-critical { border-left-color: #e0a0a0; }
.alert-center-item.is-high { border-left-color: #d4b56a; }
.alert-center-item.is-opportunity { border-left-color: #8fbf9f; }
.alert-center-item.is-medium { border-left-color: #9a9a86; }

.alert-center-item-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    align-items: baseline;
}

.alert-center-rank {
    font-size: 0.72rem;
    color: var(--muted);
    min-width: 1rem;
}

.alert-center-camp {
    font-size: 0.72rem;
    color: var(--muted);
}

.alert-center-why,
.alert-center-action {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
}

.alert-center-action {
    color: var(--ink);
}

.alert-center-why {
    color: var(--muted);
}

.alert-center-evidence {
    margin: 0;
    padding-left: 1rem;
    color: var(--muted);
    font-size: 0.74rem;
}

.alert-center-empty {
    color: var(--muted);
    font-size: 0.85rem;
}

.experiment-card {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    margin: 0 0 0.85rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid var(--line, #2a2a26);
    background: var(--surface, #121212);
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.experiment-card:hover {
    border-color: var(--line-strong, #3d3d36);
    background: var(--bg-raised, #141414);
}

.experiment-card-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.experiment-card-title {
    font-size: 1rem;
    font-weight: 600;
}

.experiment-card-summary {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.35;
}

.experiment-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.experiment-card-stats em {
    font-style: normal;
    font-weight: 700;
    color: var(--ink);
    margin-right: 0.2rem;
}

.experiment-card-stats .is-run em { color: #d4b56a; }
.experiment-card-stats .is-rec em { color: #8fbf9f; }
html[data-theme="light"] .experiment-card-stats .is-run em { color: #6a4c00; }
html[data-theme="light"] .experiment-card-stats .is-rec em { color: #1a4d2e; }

.experiment-card-cta {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.experiment-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.55);
}

.experiment-overlay[hidden] {
    display: none !important;
}

.experiment-modal {
    width: min(760px, 100%);
    max-height: min(88vh, 900px);
    overflow: auto;
    border: 1px solid var(--line, #2a2a26);
    background: var(--bg-raised, #141414);
    color: var(--ink);
    padding: 1rem 1.1rem 1.2rem;
}

.experiment-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.experiment-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.experiment-title {
    margin: 0;
    font-size: 1.25rem;
}

.experiment-lede {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.experiment-heading {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
}

.experiment-body section {
    margin-bottom: 1rem;
}

.experiment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.experiment-item {
    display: grid;
    gap: 0.35rem;
    padding: 0.6rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .experiment-item {
    border-color: rgba(0, 0, 0, 0.06);
}

.experiment-item-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    align-items: baseline;
}

.experiment-item-top span {
    font-size: 0.72rem;
    color: var(--muted);
}

.experiment-protocol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.experiment-protocol li {
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.experiment-protocol li.is-change {
    border-color: rgba(212, 181, 106, 0.5);
    color: #d4b56a;
}

.experiment-protocol li.is-keep {
    color: var(--muted);
}

html[data-theme="light"] .experiment-protocol li.is-change {
    color: #6a4c00;
}

.experiment-why,
.experiment-meta {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
}

.experiment-start {
    justify-self: start;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
}

.experiment-rate {
    font-weight: 600;
    color: #8fbf9f !important;
}

html[data-theme="light"] .experiment-rate {
    color: #1a4d2e !important;
}

.experiment-empty {
    color: var(--muted);
    font-size: 0.82rem;
}

.winner-finder-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.55);
}

.winner-finder-overlay[hidden] {
    display: none !important;
}

.winner-finder-modal {
    width: min(920px, 100%);
    max-height: min(88vh, 900px);
    overflow: auto;
    border: 1px solid var(--line, #2a2a26);
    background: var(--bg-raised, #141414);
    color: var(--ink);
    padding: 1rem 1.1rem 1.2rem;
}

.winner-finder-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.winner-finder-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.winner-finder-title {
    margin: 0;
    font-size: 1.25rem;
}

.winner-finder-lede {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.winner-finder-boards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 800px) {
    .winner-finder-boards {
        grid-template-columns: 1fr;
    }
}

.winner-finder-board-title {
    margin: 0 0 0.55rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.winner-finder-board-title.is-ready { color: #8fbf9f; }
.winner-finder-board-title.is-attention { color: #d4b56a; }
.winner-finder-board-title.is-waste { color: #e0a0a0; }
html[data-theme="light"] .winner-finder-board-title.is-ready { color: #1a4d2e; }
html[data-theme="light"] .winner-finder-board-title.is-attention { color: #6a4c00; }
html[data-theme="light"] .winner-finder-board-title.is-waste { color: #6b1d1d; }

.winner-finder-list,
.winner-finder-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.winner-finder-item {
    display: grid;
    gap: 0.2rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .winner-finder-item {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.winner-finder-item-top {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
}

.winner-finder-item-num {
    font-size: 0.72rem;
    color: var(--muted);
    min-width: 1rem;
}

.winner-finder-item-tag {
    font-size: 0.68rem;
    color: var(--muted);
}

.winner-finder-item p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.35;
}

.winner-finder-item-meta {
    font-size: 0.72rem;
    color: var(--muted);
}

.winner-finder-empty {
    color: var(--muted);
    font-size: 0.82rem;
}

.winner-finder-cats {
    margin-top: 1.15rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .winner-finder-cats {
    border-top-color: rgba(0, 0, 0, 0.08);
}

.winner-finder-cat-list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    display: grid;
}

.winner-finder-cat-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
}

.winner-finder-cat-list span {
    color: var(--muted);
}

.advice-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.28rem 0.45rem;
}

.advice-stats > div {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.advice-stats span {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.advice-stats strong {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: var(--tracking-satoshi);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.advice-why {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--muted);
    letter-spacing: var(--tracking-satoshi);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.advice-stats strong.helix-fatigue-healthy { color: #8fbf9f; }
.advice-stats strong.helix-fatigue-watching { color: #d4b56a; }
.advice-stats strong.helix-fatigue-fatigued,
.advice-stats strong.helix-fatigue-critical { color: #e0a0a0; }

html[data-theme="light"] .advice-stats strong.helix-fatigue-healthy { color: #1a4d2e; }
html[data-theme="light"] .advice-stats strong.helix-fatigue-watching { color: #6a4c00; }
html[data-theme="light"] .advice-stats strong.helix-fatigue-fatigued,
html[data-theme="light"] .advice-stats strong.helix-fatigue-critical { color: #6b1d1d; }

.campaigns-main .metrics-table-wrap {
    max-height: min(78vh, 52rem);
}

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

@media (max-width: 720px) {
    .app-bar {
        flex-wrap: wrap;
    }

    .app-nav {
        order: 3;
        width: 100%;
        margin: 0.35rem 0 0;
    }

    .workspace-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-item {
        min-height: 0;
    }

    .site-facts,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-span-2 {
        grid-column: auto;
    }
}

/* Inventory matrix */
.inventory-form {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(14rem, 1fr) auto;
    gap: 1rem;
    align-items: end;
}

.inventory-form select,
.inventory-form input[type="search"] {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.15rem;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.05rem;
    letter-spacing: var(--tracking-satoshi);
}

.inventory-form select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink) 50%),
        linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position:
        calc(100% - 1.15rem) calc(50% - 0.15rem),
        calc(100% - 0.75rem) calc(50% - 0.15rem);
    background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
    background-repeat: no-repeat;
    padding-right: 2.2rem;
}

.inventory-form select option {
    background-color: var(--surface);
    color: var(--ink);
}

.inventory-form-actions {
    display: flex;
    gap: 0.55rem;
}

.inventory-picker {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.inventory-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.inventory-picker-tools {
    display: flex;
    gap: 0.35rem;
}

.btn-ghost {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    letter-spacing: var(--tracking-satoshi);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
}

.btn-ghost:hover {
    color: var(--ink);
}

.inventory-product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.55rem;
    margin-top: 1rem;
}

.inventory-product-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.65rem;
    row-gap: 0.15rem;
    align-items: start;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.15rem;
    background: var(--bg-raised);
    cursor: pointer;
}

.inventory-product-item input {
    grid-row: 1 / span 2;
    margin-top: 0.2rem;
    accent-color: var(--ink);
}

.inventory-product-title {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    letter-spacing: var(--tracking-satoshi);
    color: var(--ink);
}

.inventory-product-meta {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-satoshi);
}

.inventory-result-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.inventory-pdf-bar {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) auto;
    gap: 0.85rem;
    align-items: end;
    margin-bottom: 1rem;
}

.inventory-pdf-bar input[type="text"] {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.15rem;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.05rem;
    letter-spacing: var(--tracking-satoshi);
}

.inventory-grand {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    letter-spacing: var(--tracking-satoshi);
    color: var(--muted);
}

.inventory-matrix-wrap {
    max-height: none;
}

.inventory-matrix th,
.inventory-matrix td {
    text-align: center;
}

.inventory-matrix th:first-child,
.inventory-matrix td:first-child,
.inventory-size-cell {
    text-align: left;
    font-weight: 600;
}

.inventory-matrix .is-zero {
    color: var(--muted);
    opacity: 0.55;
}

.inventory-total-cell,
.inventory-grand-cell {
    font-weight: 700;
}

.inventory-matrix tfoot td {
    border-top: 1px solid var(--line-strong);
    background: var(--bg-raised);
}

.inventory-raw {
    margin-top: 1.25rem;
}

.inventory-raw summary {
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    letter-spacing: var(--tracking-satoshi);
    color: var(--muted);
    margin-bottom: 0.75rem;
}

@media (max-width: 900px) {
    .inventory-form,
    .inventory-pdf-bar {
        grid-template-columns: 1fr;
    }
}

/* Campaigns */
.campaigns-workspace {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.65rem 0.75rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-sizing: border-box;
}

.campaigns-page-head {
    width: 100%;
}

.campaigns-page-head .workspace-head {
    margin-bottom: 0;
}

.campaigns-page-head .flash {
    margin-bottom: 0;
}

.campaigns-store-head {
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
}

.campaigns-store-head-left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    width: 100%;
}

.campaigns-store-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.campaigns-store-title-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    min-width: 0;
}

.campaigns-store-title-block .app-title {
    margin: 0;
    font-size: clamp(1.55rem, 3.5vw, 2.1rem);
    line-height: 1.1;
}

.campaigns-store-subtitle {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: var(--tracking-satoshi);
    color: var(--muted);
    white-space: nowrap;
}

.campaigns-store-subtitle::before {
    content: "·";
    margin-right: 0.75rem;
    color: var(--line-strong);
}

.campaigns-back-btn {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 0.4rem;
    min-height: 1.85rem;
    padding: 0.22rem 0.65rem 0.22rem 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.15rem;
    background: color-mix(in srgb, var(--surface) 88%, var(--ink) 12%);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: var(--tracking-satoshi);
    text-decoration: none;
    box-shadow: 2px 2px 0 var(--shadow);
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.campaigns-back-btn:hover {
    background: var(--hover-fill);
    border-color: var(--ink);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--shadow);
}

.campaigns-back-btn:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.campaigns-head-helix {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    max-width: min(28rem, 100%);
    margin-left: auto;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.2rem;
    background:
        linear-gradient(155deg, color-mix(in srgb, var(--ink) 5%, transparent) 0%, transparent 55%),
        color-mix(in srgb, var(--panel) 92%, var(--ink) 8%);
    flex: 0 1 28rem;
}

.campaigns-head-helix-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    border-radius: 0.2rem;
    background: var(--hover-fill);
    color: var(--ink);
}

.campaigns-head-helix-body {
    min-width: 0;
}

.campaigns-head-helix-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.campaigns-head-helix-brand strong {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.helix-mark--head {
    width: 0.95rem;
    height: 0.95rem;
}

.campaigns-head-helix-body p {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    line-height: 1.4;
    letter-spacing: var(--tracking-satoshi);
    color: var(--muted);
}

.campaigns-head-helix-body em {
    font-style: normal;
    font-weight: 600;
    color: var(--ink);
}

.campaigns-picker-lede {
    margin: 0;
}

.campaigns-back-stores {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.campaigns-back-stores:hover {
    color: var(--ink);
    border-bottom-color: var(--line-strong);
}

@media (max-width: 900px) {
    .campaigns-store-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .campaigns-head-helix {
        margin-left: 0;
        max-width: none;
        flex: 1 1 auto;
    }
}

.store-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: 1rem;
    width: 100%;
    margin-top: 0.25rem;
}

.store-picker-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 11.5rem;
    padding: 1.15rem 1.15rem 1rem;
    text-decoration: none;
    color: inherit;
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--ink) 4%, transparent) 0%, transparent 42%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.2rem;
    overflow: hidden;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.store-picker-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: color-mix(in srgb, var(--ink) 35%, transparent);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.store-picker-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--ink) 7%, transparent) 0%, transparent 48%),
        var(--bg-raised);
}

.store-picker-card:hover::before {
    opacity: 1;
}

.store-picker-card:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.store-picker-kicker {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.store-picker-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.15;
    color: var(--ink);
}

.store-picker-domain {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--muted);
    letter-spacing: var(--tracking-satoshi);
    word-break: break-all;
}

.store-picker-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: var(--tracking-satoshi);
}

.store-picker-facts em {
    font-style: normal;
    font-weight: 600;
    color: var(--ink);
    margin-right: 0.2rem;
}

.store-picker-cta {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: var(--tracking-satoshi);
    color: var(--ink);
    opacity: 0.72;
    transition: opacity 0.15s ease;
}

.store-picker-card:hover .store-picker-cta {
    opacity: 1;
}

.campaigns-body {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    width: 100%;
}

.campaigns-body.has-summary {
    grid-template-columns: 14rem minmax(0, 1fr) 15rem;
}

.campaigns-sidebar {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.2rem;
    background: color-mix(in srgb, var(--panel) 94%, var(--ink) 6%);
}

.campaigns-sidebar--summary {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    border: none;
    background: transparent;
}

.campaigns-lock-note {
    margin: 0;
    padding: 0.95rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.2rem;
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--ink) 5%, transparent) 0%, transparent 50%),
        color-mix(in srgb, var(--panel) 92%, var(--ink) 8%);
}

.campaigns-lock-note-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.campaigns-lock-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.2rem;
    background: var(--hover-fill);
    color: var(--ink);
    flex: 0 0 auto;
}

.campaigns-lock-note-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    margin-left: auto;
}

.campaigns-lock-note-brand strong,
.campaigns-lock-note-title {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--ink);
    line-height: 1.2;
}

.helix-mark--lock {
    width: 0.95rem;
    height: 0.95rem;
}

.campaigns-lock-note-copy {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    line-height: 1.45;
    letter-spacing: var(--tracking-satoshi);
    color: var(--muted);
}

.campaigns-lock-note-copy em {
    font-style: normal;
    font-weight: 600;
    color: var(--ink);
}

.campaigns-lock-note-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.7rem 0 0;
    padding: 0.28rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--hover-fill);
}

.campaigns-lock-note-stat span {
    color: var(--ink);
}

.campaigns-sidebar-title {
    margin: 0 0 0.85rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.campaigns-main {
    min-width: 0;
}

.campaigns-filter-form--sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    align-items: stretch;
}

.campaigns-filter-form--sidebar .campaigns-fetch-actions {
    margin-top: 0.15rem;
}

.campaigns-filter-form--sidebar .campaigns-fetch-actions .btn-secondary {
    width: 100%;
}

.campaigns-fetch-form,
.campaigns-filter-form:not(.campaigns-filter-form--sidebar) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    align-items: end;
}

.campaigns-fetch-form select,
.campaigns-fetch-form input[type="date"],
.campaigns-filter-form select,
.campaigns-filter-form input[type="date"],
.campaigns-filter-form input[type="number"] {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.15rem;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.05rem;
    letter-spacing: var(--tracking-satoshi);
    color-scheme: inherit;
}

.campaigns-fetch-form select,
.campaigns-filter-form select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink) 50%),
        linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position:
        calc(100% - 1.15rem) calc(50% - 0.15rem),
        calc(100% - 0.75rem) calc(50% - 0.15rem);
    background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
    background-repeat: no-repeat;
    padding-right: 2.2rem;
}

.campaigns-fetch-form select option,
.campaigns-filter-form select option {
    background-color: var(--surface);
    color: var(--ink);
}

.campaigns-fetch-form input[type="date"]::-webkit-calendar-picker-indicator,
.campaigns-filter-form input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.85;
}

html[data-theme="dark"] .campaigns-fetch-form input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .campaigns-filter-form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.campaigns-filter-summary {
    margin: 0 0 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    letter-spacing: var(--tracking-satoshi);
    color: var(--muted);
}

.campaigns-sidebar-engine {
    margin: 0;
    padding: 0.9rem 0.85rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.2rem;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--ink) 5%, transparent) 0%, transparent 55%),
        color-mix(in srgb, var(--surface) 88%, var(--ink) 12%);
}

.campaigns-sidebar-engine-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.helix-mark--sidebar {
    width: 1.35rem;
    height: 1.35rem;
}

.campaigns-sidebar-engine-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.campaigns-sidebar-engine-kicker {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.campaigns-sidebar-engine-name {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--ink);
}

.campaigns-sidebar-engine-facts {
    margin: 0;
    display: grid;
    gap: 0.65rem;
}

.campaigns-sidebar-engine-facts > div {
    display: grid;
    gap: 0.15rem;
}

.campaigns-sidebar-engine-facts dt {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.campaigns-sidebar-engine-facts dd {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: var(--tracking-satoshi);
    color: var(--ink);
    line-height: 1.3;
    word-break: break-word;
}

.portfolio-budget-summary {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.2rem;
    background: color-mix(in srgb, var(--panel) 92%, var(--ink) 8%);
}

.portfolio-budget-summary--sidebar {
    position: static;
    margin: 0;
    padding: 1.1rem;
}

.portfolio-budget-summary.is-up {
    border-color: rgba(184, 224, 184, 0.45);
}

.portfolio-budget-summary.is-down {
    border-color: rgba(224, 160, 160, 0.45);
}

.portfolio-budget-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.85rem;
}

.portfolio-budget-summary--sidebar .portfolio-budget-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.portfolio-budget-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.portfolio-budget-sub {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: var(--tracking-satoshi);
    color: var(--muted);
}

.portfolio-budget-verdict {
    font-family: var(--font-ui);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: var(--tracking-satoshi);
}

.portfolio-budget-summary--sidebar .portfolio-budget-verdict {
    margin-top: 0.35rem;
    font-size: 1.2rem;
    line-height: 1.35;
}

.portfolio-budget-verdict.is-up {
    color: #b8e0b8;
}

.portfolio-budget-verdict.is-down {
    color: #e0a0a0;
}

.portfolio-budget-verdict.is-flat {
    color: var(--ink);
}

html[data-theme="light"] .portfolio-budget-verdict.is-up {
    color: #1f6b3a;
}

html[data-theme="light"] .portfolio-budget-verdict.is-down {
    color: #9b2c2c;
}

.portfolio-budget-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

.portfolio-budget-summary--sidebar .portfolio-budget-grid {
    grid-template-columns: 1fr;
    gap: 0;
}

.portfolio-budget-summary--sidebar .portfolio-budget-grid > div {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
}

.portfolio-budget-summary--sidebar .portfolio-budget-grid > div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.portfolio-budget-label {
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.portfolio-budget-value {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: var(--tracking-satoshi);
    color: var(--ink);
}

.portfolio-budget-value.is-up {
    color: #b8e0b8;
}

.portfolio-budget-value.is-down {
    color: #e0a0a0;
}

html[data-theme="light"] .portfolio-budget-value.is-up {
    color: #1f6b3a;
}

html[data-theme="light"] .portfolio-budget-value.is-down {
    color: #9b2c2c;
}

.portfolio-budget-note {
    margin: 0.75rem 0 0;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    letter-spacing: var(--tracking-satoshi);
    color: var(--muted);
}

.portfolio-budget-summary--sidebar .portfolio-budget-note {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
}

.btn-budget-apply-all {
    display: block;
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.65rem 0.85rem;
    border: 0;
    border-radius: 0.15rem;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: var(--tracking-satoshi);
    cursor: pointer;
    background: #c8d9c0;
    color: #0c0c0c;
}

.btn-budget-apply-all:hover:not(:disabled) {
    filter: brightness(1.05);
}

.btn-budget-apply-all:disabled,
.btn-budget-apply-all.is-loading {
    opacity: 0.65;
    cursor: not-allowed;
}

.portfolio-budget-summary.is-down .btn-budget-apply-all {
    background: #e0b8b0;
}

.portfolio-budget-summary.is-up .btn-budget-apply-all {
    background: #b8d4c4;
}

html[data-theme="light"] .btn-budget-apply-all {
    background: #1a3d2e;
    color: #f5f5f0;
}

html[data-theme="light"] .portfolio-budget-summary.is-down .btn-budget-apply-all {
    background: #5c1f1f;
    color: #fff5f5;
}

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

@media (max-width: 560px) {
    .portfolio-budget-grid {
        grid-template-columns: 1fr;
    }
}

.campaigns-fetch-actions .btn-primary.is-loading {
    opacity: 0.65;
}

.campaign-name {
    font-weight: 600;
}

.campaign-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.campaign-active-date {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: var(--tracking-satoshi);
    line-height: 1;
    padding: 0.28rem 0.45rem;
    border-radius: 0.15rem;
    color: var(--bg);
    background: var(--ink);
    white-space: nowrap;
}

.campaign-meta {
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: var(--tracking-satoshi);
    white-space: nowrap;
}

.campaign-budget-type {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-satoshi);
}

.campaign-status {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 0.15rem;
    color: var(--muted);
    white-space: nowrap;
}

.campaign-status.is-active {
    color: #b8e0b8;
    border-color: rgba(184, 224, 184, 0.35);
}

.campaign-status.is-paused {
    color: #e0c98a;
    border-color: rgba(224, 201, 138, 0.35);
}

.campaign-status.is-archived {
    color: var(--muted);
    opacity: 0.85;
}

.campaign-status.is-other,
.campaign-status.is-unknown {
    color: var(--ink);
}

html[data-theme="light"] .campaign-status.is-active {
    color: #1f6b3a;
    border-color: rgba(31, 107, 58, 0.35);
}

html[data-theme="light"] .campaign-status.is-paused {
    color: #8a6a16;
    border-color: rgba(138, 106, 22, 0.35);
}

.campaign-roas {
    font-weight: 600;
}

.campaign-trend {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    letter-spacing: var(--tracking-satoshi);
}

.campaign-trend.is-up {
    color: #b8e0b8;
}

.campaign-trend.is-down {
    color: #e0a0a0;
}

html[data-theme="light"] .campaign-trend.is-up {
    color: #1f6b3a;
}

html[data-theme="light"] .campaign-trend.is-down {
    color: #9b2c2c;
}

.campaign-advice {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    padding: 0.25rem 0.45rem;
    border-radius: 0.15rem;
    white-space: nowrap;
}

.campaign-advice.is-scale {
    color: #0c0c0c;
    background: #b8e0b8;
}

.campaign-advice.is-cut {
    color: #0c0c0c;
    background: #e0a0a0;
}

.campaign-advice.is-hold {
    color: #0c0c0c;
    background: #e0c98a;
}

.campaign-advice.is-data {
    color: var(--bg);
    background: var(--muted);
}

.campaign-advice-meta {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: var(--tracking-satoshi);
}

.campaign-budget-action {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.campaign-budget-action-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.campaign-budget-action-text .campaign-advice-meta {
    margin-top: 0;
}

.campaign-suggest {
    font-weight: 600;
    white-space: nowrap;
}

.campaign-suggest.is-up {
    color: #b8e0b8;
}

.campaign-suggest.is-down {
    color: #e0a0a0;
}

html[data-theme="light"] .campaign-suggest.is-up {
    color: #1f6b3a;
}

html[data-theme="light"] .campaign-suggest.is-down {
    color: #9b2c2c;
}

.campaign-suggest-flat {
    color: var(--muted);
}

.campaign-monitor {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 9.5rem;
}

.campaign-monitor-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 0.15rem;
    white-space: nowrap;
}

.campaign-monitor-pill.is-good {
    color: #0c0c0c;
    background: #b8e0b8;
}

.campaign-monitor-pill.is-watch {
    color: #0c0c0c;
    background: #e0c98a;
}

.campaign-monitor-pill.is-bad {
    color: #0c0c0c;
    background: #e0a0a0;
}

.campaign-monitor-pill.is-early {
    color: var(--bg);
    background: var(--muted);
}

.helix-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.28rem;
    max-width: 14rem;
}

.helix-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    padding: 0.12rem 0.35rem;
    border-radius: 0.12rem;
    border: 1px solid var(--line);
    color: var(--muted);
    background: transparent;
    white-space: nowrap;
}

.helix-badge.helix-shi {
    color: var(--text);
    border-color: var(--text);
    font-weight: 600;
}

.helix-badge.helix-fatigue-healthy {
    color: #1a4d2e;
    border-color: #8fbf9f;
}

.helix-badge.helix-fatigue-watching {
    color: #6a4c00;
    border-color: #d4b56a;
}

.helix-badge.helix-fatigue-fatigued,
.helix-badge.helix-fatigue-critical {
    color: #6b1d1d;
    border-color: #d0a0a0;
}

.helix-why {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 14rem;
    line-height: 1.25;
}

.campaign-monitor-meta,
.campaign-monitor-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.55rem;
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: var(--tracking-satoshi);
}

.campaign-monitor-stats span {
    white-space: nowrap;
}

.campaign-lock-only {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 16rem;
}

.campaign-lock-badge {
    display: inline-flex;
    width: fit-content;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    padding: 0.28rem 0.5rem;
    border-radius: 0.15rem;
    background: var(--ink);
    color: var(--bg);
}

.btn-budget-apply {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--line-strong);
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: var(--tracking-satoshi);
    padding: 0.28rem 0.5rem;
    min-height: 1.7rem;
    border-radius: 0.15rem;
    cursor: pointer;
    white-space: nowrap;
}

.btn-budget-apply:hover {
    opacity: 0.9;
}

.btn-budget-apply.is-loading,
.btn-budget-apply.is-done,
.btn-budget-apply.is-locked,
.btn-budget-apply:disabled {
    opacity: 0.65;
    cursor: default;
}

#campaigns-fetch-status {
    margin-top: 1rem;
}

@media (max-width: 1100px) {
    .campaigns-body,
    .campaigns-body.has-summary {
        grid-template-columns: 14rem minmax(0, 1fr);
    }

    .campaigns-sidebar--summary {
        grid-column: 1 / -1;
        order: -1;
        position: static;
    }

    .portfolio-budget-summary--sidebar {
        position: static;
    }

    .portfolio-budget-summary--sidebar .portfolio-budget-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1rem;
    }

    .portfolio-budget-summary--sidebar .portfolio-budget-grid > div {
        padding: 0;
        border-bottom: none;
    }
}

@media (max-width: 900px) {
    .campaigns-body,
    .campaigns-body.has-summary {
        grid-template-columns: 1fr;
    }

    .campaigns-sidebar {
        position: static;
    }

    .portfolio-budget-summary--sidebar .portfolio-budget-grid {
        grid-template-columns: 1fr;
    }

    .campaigns-fetch-form,
    .campaigns-filter-form:not(.campaigns-filter-form--sidebar) {
        grid-template-columns: 1fr;
    }
}

/* Campaign detail fullscreen */
.campaign-row-clickable {
    cursor: pointer;
}

.campaign-row-clickable:hover {
    background: color-mix(in srgb, var(--surface) 88%, var(--ink) 12%);
}

.campaign-row-clickable .campaign-name {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent);
    text-underline-offset: 0.18em;
}

body.campaign-detail-open {
    overflow: hidden;
}

.campaign-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
}

.campaign-detail-overlay[hidden] {
    display: none !important;
}

.campaign-detail-modal {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 0.25rem;
    background: var(--bg);
    color: var(--ink);
}

.campaign-detail-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1rem 1.25rem;
    align-items: start;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 92%, var(--ink) 8%);
}

.campaign-detail-kicker {
    margin: 0 0 0.25rem;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.campaign-detail-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
}

.campaign-detail-meta {
    margin: 0.35rem 0 0;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--muted);
    letter-spacing: var(--tracking-satoshi);
}

.campaign-detail-top-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
}

.campaign-detail-top-stats > div {
    min-width: 7.5rem;
}

.campaign-detail-top-stats span {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.campaign-detail-top-stats strong {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 700;
}

.campaign-detail-close {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.15rem;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    cursor: pointer;
}

.campaign-detail-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 0;
}

.campaign-detail-chart-panel {
    min-width: 0;
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: auto;
}

.campaign-detail-chart-head h3 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
}

.campaign-detail-chart-head p {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.campaign-detail-chart-wrap {
    flex: 1;
    min-height: 18rem;
    border: 1px solid var(--line);
    border-radius: 0.2rem;
    background: color-mix(in srgb, var(--surface) 94%, var(--ink) 6%);
    padding: 0.5rem;
}

.campaign-chart-stage {
    position: relative;
    width: 100%;
    height: 100%;
}

.campaign-chart-tooltip {
    position: absolute;
    z-index: 5;
    min-width: 10.5rem;
    max-width: 16rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.15rem;
    background: var(--ink);
    color: var(--bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    font-family: var(--font-ui);
}

.campaign-chart-tooltip[hidden] {
    display: none !important;
}

.campaign-chart-tooltip .tip-date {
    font-size: 0.72rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    opacity: 0.75;
}

.campaign-chart-tooltip .tip-cpr {
    margin-top: 0.25rem;
    font-size: 0.82rem;
}

.campaign-chart-tooltip .tip-cpr strong {
    display: block;
    margin-top: 0.1rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.campaign-chart-tooltip .tip-meta {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    opacity: 0.75;
}

.campaign-cpr-chart {
    display: block;
    width: 100%;
    height: auto;
}

.campaign-cpr-chart .chart-grid {
    stroke: var(--line);
    stroke-width: 1;
}

.campaign-cpr-chart .chart-axis {
    fill: var(--muted);
    font-family: var(--font-ui);
    font-size: 11px;
}

.campaign-cpr-chart .chart-ylabel {
    fill: var(--muted);
}

.campaign-cpr-chart .chart-line {
    fill: none;
    stroke: #d7c39a;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.campaign-cpr-chart .chart-area {
    fill: rgba(215, 195, 154, 0.14);
    stroke: none;
}

.campaign-cpr-chart .chart-point-hit {
    fill: transparent;
    stroke: none;
    cursor: pointer;
}

.campaign-cpr-chart .chart-point {
    fill: var(--ink);
    stroke: var(--bg);
    stroke-width: 1.5;
    pointer-events: none;
    transition: r 120ms ease;
}

.campaign-cpr-chart .chart-point-group.is-active .chart-point {
    fill: #d7c39a;
    stroke: var(--ink);
    r: 7;
}

.campaign-cpr-chart .chart-marker-line {
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    opacity: 0.85;
}

.campaign-cpr-chart .chart-empty {
    fill: var(--muted);
    font-family: var(--font-ui);
    font-size: 14px;
}

.campaign-detail-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: var(--tracking-satoshi);
}

.campaign-detail-legend i {
    display: inline-block;
    width: 0.9rem;
    height: 0.55rem;
    margin-right: 0.35rem;
    vertical-align: middle;
    border-radius: 0.1rem;
}

.legend-line {
    background: #d7c39a;
}

.legend-up {
    background: #b8e0b8;
}

.legend-down {
    background: #e0a0a0;
}

.campaign-detail-side {
    border-left: 1px solid var(--line);
    padding: 1rem 1rem 1.25rem;
    overflow: auto;
    background: color-mix(in srgb, var(--panel) 94%, var(--ink) 6%);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.campaign-detail-side h3 {
    margin: 0 0 0.55rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.ai-buyer-panel {
    display: grid;
    gap: 0.55rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.ai-buyer-kicker {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.ai-buyer-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink);
}

.ai-buyer-sub {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
}

.ai-buyer-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ai-buyer-prompt {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.72rem;
    padding: 0.28rem 0.45rem;
    cursor: pointer;
}

.ai-buyer-prompt:hover {
    border-color: var(--line-strong);
}

.ai-buyer-thread {
    max-height: 220px;
    overflow: auto;
    display: grid;
    gap: 0.55rem;
    padding-right: 0.15rem;
}

.ai-buyer-empty {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.4;
}

.ai-buyer-msg {
    display: grid;
    gap: 0.3rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.8rem;
    line-height: 1.35;
}

html[data-theme="light"] .ai-buyer-msg {
    border-color: rgba(0, 0, 0, 0.06);
}

.ai-buyer-msg.is-user {
    background: rgba(255, 255, 255, 0.04);
}

.ai-buyer-msg.is-assistant {
    background: transparent;
}

.ai-buyer-msg p {
    margin: 0;
}

.ai-buyer-evidence {
    margin: 0;
    padding-left: 1rem;
    color: var(--muted);
    font-size: 0.74rem;
}

.ai-buyer-next {
    margin: 0;
    font-size: 0.74rem;
    color: var(--ink);
}

.ai-buyer-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem;
}

.ai-buyer-form input {
    min-width: 0;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
}

.ai-buyer-send {
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
}

.scaling-sim {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.75rem;
}

.scaling-sim-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.scaling-sim-kicker {
    margin: 0 0 0.15rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.scaling-sim-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink);
}

.scaling-sim-note {
    margin: 0;
    font-size: 0.72rem;
    color: var(--muted);
}

.scaling-sim-slider-label {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    align-items: baseline;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.scaling-sim-change {
    font-size: 0.75rem;
    color: var(--muted);
}

.scaling-sim-change.is-up { color: #8fbf9f; }
.scaling-sim-change.is-down { color: #e0a0a0; }
html[data-theme="light"] .scaling-sim-change.is-up { color: #1a4d2e; }
html[data-theme="light"] .scaling-sim-change.is-down { color: #6b1d1d; }

.scaling-sim input[type="range"] {
    width: 100%;
    accent-color: var(--ink);
}

.scaling-sim-range {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--muted);
}

.scaling-sim-reset {
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
}

.scaling-sim-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

@media (max-width: 900px) {
    .scaling-sim-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.scaling-sim-metric {
    display: grid;
    gap: 0.15rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .scaling-sim-metric {
    border-color: rgba(0, 0, 0, 0.06);
}

.scaling-sim-metric span {
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.scaling-sim-metric strong {
    font-size: 0.92rem;
    font-weight: 600;
}

.scaling-sim-metric.is-ok strong { color: #8fbf9f; }
.scaling-sim-metric.is-bad strong { color: #e0a0a0; }
html[data-theme="light"] .scaling-sim-metric.is-ok strong { color: #1a4d2e; }
html[data-theme="light"] .scaling-sim-metric.is-bad strong { color: #6b1d1d; }

.scaling-sim-compare-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.scaling-sim-compare-bar .btn-secondary {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
}

.scaling-sim-compare {
    overflow: auto;
}

.scaling-sim-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.scaling-sim-table th,
.scaling-sim-table td {
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    white-space: nowrap;
}

html[data-theme="light"] .scaling-sim-table th,
html[data-theme="light"] .scaling-sim-table td {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.scaling-sim-table th {
    color: var(--muted);
    font-weight: 500;
}

.scaling-sim-table em {
    font-style: normal;
    color: var(--muted);
    font-size: 0.68rem;
}

.campaign-replay {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.7rem;
}

.campaign-replay-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.campaign-replay-kicker {
    margin: 0 0 0.15rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.campaign-replay-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink);
}

.campaign-replay-note {
    margin: 0;
    font-size: 0.72rem;
    color: var(--muted);
}

.campaign-replay-controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.55rem;
    align-items: center;
}

.campaign-replay-controls .btn-secondary {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
}

.campaign-replay-controls input[type="range"] {
    width: 100%;
    accent-color: var(--ink);
}

.campaign-replay-date {
    font-size: 0.78rem;
    color: var(--muted);
    min-width: 5.5rem;
    text-align: right;
}

.campaign-replay-frame {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

@media (max-width: 900px) {
    .campaign-replay-frame {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.campaign-replay-metric {
    display: grid;
    gap: 0.12rem;
    padding: 0.4rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .campaign-replay-metric {
    border-color: rgba(0, 0, 0, 0.06);
}

.campaign-replay-metric.is-wide {
    grid-column: 1 / -1;
}

.campaign-replay-metric span {
    font-size: 0.66rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.campaign-replay-metric strong {
    font-size: 0.88rem;
}

.campaign-replay-why {
    display: grid;
    gap: 0.45rem;
}

.campaign-replay-why-card {
    padding: 0.5rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .campaign-replay-why-card {
    border-color: rgba(0, 0, 0, 0.08);
}

.campaign-replay-why-card strong {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
}

.campaign-replay-why-card p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
}

.campaign-replay-why-card.is-perf strong { color: #d4b56a; }
.campaign-replay-why-card.is-rec strong { color: #8fbf9f; }
html[data-theme="light"] .campaign-replay-why-card.is-perf strong { color: #6a4c00; }
html[data-theme="light"] .campaign-replay-why-card.is-rec strong { color: #1a4d2e; }

.campaign-replay-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow: auto;
    display: grid;
    gap: 0.4rem;
}

.campaign-replay-item {
    padding: 0.4rem 0.45rem;
    border-left: 2px solid rgba(255, 255, 255, 0.12);
    opacity: 0.55;
    cursor: pointer;
}

html[data-theme="light"] .campaign-replay-item {
    border-left-color: rgba(0, 0, 0, 0.12);
}

.campaign-replay-item.is-past {
    opacity: 0.85;
}

.campaign-replay-item.is-active {
    opacity: 1;
    border-left-color: var(--ink);
    background: rgba(255, 255, 255, 0.03);
}

.campaign-replay-item.has-highlight {
    border-left-color: #d4b56a;
}

.campaign-replay-item.is-recommendation.has-highlight {
    border-left-color: #8fbf9f;
}

.campaign-replay-item-top {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 0.78rem;
}

.campaign-replay-item-top span {
    color: var(--muted);
    font-size: 0.7rem;
}

.campaign-replay-item p {
    margin: 0.2rem 0 0;
    font-size: 0.74rem;
    color: var(--muted);
    line-height: 1.35;
}

.campaign-replay-item-why {
    color: var(--ink) !important;
}

.campaign-detail-empty {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.45;
}

.campaign-detail-change-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.campaign-detail-change-list li {
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.15rem;
    background: var(--surface);
}

.campaign-detail-change-list li.is-up {
    border-color: rgba(184, 224, 184, 0.4);
}

.campaign-detail-change-list li.is-down {
    border-color: rgba(224, 160, 160, 0.4);
}

.change-when {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: var(--tracking-satoshi);
}

.change-delta {
    margin-top: 0.25rem;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
}

.campaign-detail-change-list li.is-up .change-delta {
    color: #b8e0b8;
}

.campaign-detail-change-list li.is-down .change-delta {
    color: #e0a0a0;
}

html[data-theme="light"] .campaign-detail-change-list li.is-up .change-delta {
    color: #1f6b3a;
}

html[data-theme="light"] .campaign-detail-change-list li.is-down .change-delta {
    color: #9b2c2c;
}

.change-path {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.campaign-detail-loading,
.campaign-detail-error {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    padding: 0.55rem 0.9rem;
    border-radius: 0.15rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    z-index: 2;
}

.campaign-detail-loading {
    background: var(--ink);
    color: var(--bg);
}

.campaign-detail-error {
    background: #e0a0a0;
    color: #0c0c0c;
}

@media (max-width: 960px) {
    .campaign-detail-top {
        grid-template-columns: 1fr;
    }

    .campaign-detail-body {
        grid-template-columns: 1fr;
    }

    .campaign-detail-side {
        border-left: 0;
        border-top: 1px solid var(--line);
        max-height: 40vh;
    }
}

/* Custom budget confirm */
body.budget-confirm-open {
    overflow: hidden;
}

.budget-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
}

.budget-confirm-overlay[hidden] {
    display: none !important;
}

.budget-confirm-modal {
    width: min(100%, 26rem);
    padding: 1.35rem 1.35rem 1.2rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.25rem;
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.budget-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.75rem;
    border-radius: 0.2rem;
    background: color-mix(in srgb, var(--surface) 80%, var(--ink) 20%);
    color: var(--ink);
}

.budget-confirm-overlay.is-up .budget-confirm-icon {
    background: rgba(184, 224, 184, 0.2);
    color: #b8e0b8;
}

.budget-confirm-overlay.is-down .budget-confirm-icon {
    background: rgba(224, 160, 160, 0.2);
    color: #e0a0a0;
}

html[data-theme="light"] .budget-confirm-overlay.is-up .budget-confirm-icon {
    color: #1f6b3a;
}

html[data-theme="light"] .budget-confirm-overlay.is-down .budget-confirm-icon {
    color: #9b2c2c;
}

.budget-confirm-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 1.2;
}

.budget-confirm-copy {
    margin: 0.45rem 0 0;
    font-size: 0.95rem;
    color: var(--muted);
}

.budget-confirm-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1.1rem 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.2rem;
    background: color-mix(in srgb, var(--panel) 92%, var(--ink) 8%);
}

.budget-confirm-facts span {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: var(--tracking-satoshi);
    text-transform: uppercase;
    color: var(--muted);
}

.budget-confirm-facts strong {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 700;
}

.budget-confirm-facts strong.is-up {
    color: #b8e0b8;
}

.budget-confirm-facts strong.is-down {
    color: #e0a0a0;
}

html[data-theme="light"] .budget-confirm-facts strong.is-up {
    color: #1f6b3a;
}

html[data-theme="light"] .budget-confirm-facts strong.is-down {
    color: #9b2c2c;
}

.budget-confirm-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0 0 1.15rem;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--muted);
    letter-spacing: var(--tracking-satoshi);
    line-height: 1.4;
}

.budget-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

.budget-confirm-actions .btn-primary,
.budget-confirm-actions .btn-secondary {
    min-width: 7.5rem;
}

.budget-toast {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 95;
    transform: translateX(-50%);
    max-width: min(92vw, 28rem);
    padding: 0.7rem 1rem;
    border-radius: 0.15rem;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    letter-spacing: var(--tracking-satoshi);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.budget-toast[hidden] {
    display: none !important;
}

.budget-toast.is-ok {
    background: #b8e0b8;
    color: #0c0c0c;
}

.budget-toast.is-err {
    background: #e0a0a0;
    color: #0c0c0c;
}

/* —— Competitor Intelligence —— */
.competitors-kicker {
    margin: 0 0 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted, #8a8a8a);
}

.competitors-head-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.competitors-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem;
}

.ci-stat {
    padding: 0.75rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--border, #333) 80%, transparent);
    background: color-mix(in srgb, var(--panel, #141414) 92%, transparent);
}

.ci-stat em {
    display: block;
    font-style: normal;
    font-family: var(--font-display, var(--font-ui));
    font-size: 1.55rem;
    line-height: 1.1;
}

.ci-stat span {
    font-size: 0.78rem;
    color: var(--muted, #8a8a8a);
}

.ci-stat.is-opp em { color: #8fbf9f; }
.ci-stat.is-threat em { color: #e0a0a0; }
.ci-stat.is-trend em { color: #d4b56a; }
html[data-theme="light"] .ci-stat.is-opp em { color: #1a4d2e; }
html[data-theme="light"] .ci-stat.is-threat em { color: #6b1d1d; }
html[data-theme="light"] .ci-stat.is-trend em { color: #6a4c00; }

.competitors-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 960px) {
    .competitors-grid {
        grid-template-columns: 1fr;
    }
}

.ci-signal-list,
.ci-comp-list,
.ci-snap-list,
.ci-gap-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ci-signal {
    padding: 0.7rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border, #333) 70%, transparent);
}

.ci-signal:last-child {
    border-bottom: 0;
}

.ci-signal strong {
    display: block;
    font-size: 0.95rem;
}

.ci-signal p {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    color: var(--muted, #8a8a8a);
}

.ci-signal.sev-high strong::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: #e0a0a0;
    vertical-align: middle;
}

.ci-empty {
    color: var(--muted, #8a8a8a);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.ci-monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.85rem;
}

.ci-monitor-card {
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--border, #333) 80%, transparent);
}

.ci-monitor-card h3 {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
}

.ci-meta,
.ci-mini-row {
    margin: 0.25rem 0;
    font-size: 0.82rem;
    color: var(--muted, #8a8a8a);
}

.ci-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ci-chip {
    display: inline-block;
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--border, #333) 90%, transparent);
    background: color-mix(in srgb, var(--panel, #141414) 85%, transparent);
}

.ci-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ci-compare-col h3 {
    margin: 0 0 0.45rem;
    font-size: 0.9rem;
}

.ci-span-all {
    grid-column: 1 / -1;
}

.competitors-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1rem;
    margin: 1rem 0;
}

@media (max-width: 960px) {
    .competitors-split,
    .ci-compare {
        grid-template-columns: 1fr;
    }
}

.ci-add-form,
.ci-snap-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.75rem;
    margin-bottom: 1rem;
}

.ci-snap-form .ci-span-2,
.ci-add-form .ci-span-2 {
    grid-column: 1 / -1;
}

.ci-snap-actions {
    grid-column: 1 / -1;
}

.ci-comp-item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.65rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border, #333) 70%, transparent);
}

.ci-comp-item > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ci-comp-item a {
    font-size: 0.8rem;
}

.ci-ads-table-wrap {
    overflow-x: auto;
}

.ci-ads-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ci-ads-table th,
.ci-ads-table td {
    text-align: left;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border, #333) 70%, transparent);
    white-space: nowrap;
}

.ci-subhead {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.95rem;
}

.ci-snap-item {
    padding: 0.4rem 0;
    font-size: 0.82rem;
    color: var(--muted, #8a8a8a);
    border-bottom: 1px solid color-mix(in srgb, var(--border, #333) 55%, transparent);
}

#ci-status.is-error {
    color: #e0a0a0;
}

/* —— Campaign Monitor —— */
.monitor-kicker {
    margin: 0 0 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted, #8a8a8a);
}

.monitor-head-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.monitor-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.95fr) minmax(0, 1.35fr);
    gap: 1rem;
    align-items: start;
}

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

.monitor-panel-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.monitor-picker-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.monitor-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

.monitor-search-field {
    flex: 1 1 14rem;
}

.monitor-picker-meta,
.monitor-board-meta {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted, #8a8a8a);
}

.monitor-campaign-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(70vh, 40rem);
    overflow: auto;
    border-top: 1px solid color-mix(in srgb, var(--border, #333) 70%, transparent);
}

.monitor-campaign-item {
    border-bottom: 1px solid color-mix(in srgb, var(--border, #333) 55%, transparent);
}

.monitor-campaign-item label {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.7rem 0.25rem;
    cursor: pointer;
}

.monitor-campaign-item input {
    margin-top: 0.25rem;
}

.monitor-campaign-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.monitor-campaign-text strong {
    font-size: 0.95rem;
}

.monitor-campaign-text em {
    font-style: normal;
    font-size: 0.8rem;
    color: var(--muted, #8a8a8a);
}

.monitor-campaign-item.is-watched {
    background: color-mix(in srgb, #8fbf9f 8%, transparent);
}

.monitor-board-table-wrap {
    overflow-x: auto;
}

.monitor-board-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.monitor-board-table th,
.monitor-board-table td {
    text-align: left;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border, #333) 70%, transparent);
    vertical-align: middle;
}

.monitor-board-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #8a8a8a);
}

.monitor-empty {
    color: var(--muted, #8a8a8a);
    font-size: 0.9rem;
    padding: 0.85rem 0.25rem;
    list-style: none;
}

.monitor-lock {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--border, #333) 80%, transparent);
    color: var(--muted, #8a8a8a);
}

.monitor-conf {
    margin-left: 0.4rem;
    font-size: 0.78rem;
    color: var(--muted, #8a8a8a);
}

#mon-status.is-error {
    color: #e0a0a0;
}

.btn-monitor-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--border, #333) 85%, transparent);
    border-radius: 0.15rem;
    background: transparent;
    color: inherit;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: var(--tracking-satoshi);
    cursor: pointer;
    white-space: nowrap;
}

.btn-monitor-move:hover:not(:disabled) {
    border-color: #8fbf9f;
}

.btn-monitor-move.is-on {
    background: color-mix(in srgb, #8fbf9f 18%, transparent);
    border-color: #8fbf9f;
}

.btn-monitor-move:disabled,
.btn-monitor-move.is-loading {
    opacity: 0.65;
    cursor: not-allowed;
}

.monitor-board-only {
    margin-top: 0.5rem;
}

.monitor-board-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.monitor-workspace .empty-panel {
    margin-top: 1rem;
}

.mon-th-raw {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.3rem;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--border, #333) 80%, transparent);
    color: var(--muted, #8a8a8a);
    vertical-align: middle;
}

.monitor-board-table tr.mon-row-open {
    cursor: pointer;
}

.monitor-board-table tr.mon-row-open:hover td {
    background: color-mix(in srgb, var(--panel, #141414) 70%, var(--ink, #fff) 8%);
}

.mon-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
}

.mon-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 1.25rem;
    background: color-mix(in srgb, #000 55%, transparent);
    backdrop-filter: blur(2px);
}

.mon-detail-overlay[hidden] {
    display: none !important;
}

body.mon-detail-open {
    overflow: hidden;
}

.mon-detail-modal {
    width: min(1100px, 100%);
    max-height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line-strong, #333);
    border-radius: 0.35rem;
    background: var(--bg, #0c0c0c);
    color: var(--ink, #f2f2f2);
    box-shadow: 0 24px 64px color-mix(in srgb, #000 55%, transparent);
}

.mon-detail-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line, #2a2a2a);
    background: color-mix(in srgb, var(--panel, #141414) 92%, var(--ink, #fff) 6%);
}

.mon-detail-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted, #8a8a8a);
}

.mon-detail-title {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.15;
}

.mon-detail-body {
    overflow: auto;
    padding: 1.1rem 1.25rem 1.35rem;
}

.mon-cpr-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mon-cpr-card-modal {
    gap: 1.25rem;
}

.mon-cpr-chart-wrap {
    min-width: 0;
}

.mon-cpr-svg {
    display: block;
    width: 100%;
    height: auto;
    background: color-mix(in srgb, #000 18%, transparent);
}

.mon-cpr-svg-lg {
    min-height: 20rem;
}

.mon-cpr-grid {
    stroke: color-mix(in srgb, var(--border, #333) 55%, transparent);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

.mon-cpr-val {
    fill: #d7e6d0;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-ui);
}

.mon-cpr-date {
    font-size: 12px;
}

.mon-cpr-range {
    align-self: flex-end;
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--muted, #8a8a8a);
}

.mon-cpr-day-table-wrap {
    margin-top: 0.85rem;
    overflow: auto;
    max-height: 16rem;
    border: 1px solid color-mix(in srgb, var(--border, #333) 70%, transparent);
}

.mon-cpr-day-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.mon-cpr-day-table th,
.mon-cpr-day-table td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--border, #333) 55%, transparent);
}

.mon-cpr-day-table th {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted, #8a8a8a);
    background: color-mix(in srgb, var(--panel, #141414) 88%, transparent);
    position: sticky;
    top: 0;
}

.mon-cpr-day-table tr:last-child td {
    border-bottom: 0;
}

.mon-cpr-base {
    stroke: color-mix(in srgb, var(--border, #444) 90%, transparent);
    stroke-width: 1;
}

.mon-cpr-line {
    fill: none;
    stroke: #8fbf9f;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.mon-cpr-dot {
    fill: #c8d9c0;
    stroke: #0c0c0c;
    stroke-width: 1;
}

.mon-cpr-axis {
    fill: var(--muted, #8a8a8a);
    font-size: 11px;
    font-family: var(--font-ui);
}

.mon-cpr-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mon-cpr-stats-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
}

.mon-cpr-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mon-cpr-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted, #8a8a8a);
}

.mon-cpr-latest,
.mon-cpr-cost {
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.mon-cpr-sub {
    font-size: 0.8rem;
    color: var(--muted, #8a8a8a);
}

@media (max-width: 720px) {
    .mon-detail-overlay {
        padding: 0.5rem;
    }

    .mon-cpr-svg-lg {
        min-height: 14rem;
    }

    .mon-cpr-range {
        margin-left: 0;
        width: 100%;
    }
}

/* legacy picker styles kept unused; board-only layout */
.monitor-layout,
.monitor-picker-panel {
    display: none !important;
}

/* CPA Engine */
.engine-page,
.engine-modal,
.engine-modal * {
    font-family: var(--font-ui);
    letter-spacing: var(--tracking-satoshi);
}

.engine-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0.75rem 0 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink);
}

.engine-muted {
    color: var(--muted);
    font-size: 0.95rem;
}

.engine-badge {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: var(--tracking-satoshi);
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 0;
    white-space: nowrap;
    color: var(--ink);
}

.engine-badge--scale,
.engine-badge--super_scale,
.engine-badge--stable_scale { color: #6dcea0; border-color: #6dcea0; }
.engine-badge--cut { color: #f0a0a0; border-color: #f0a0a0; }
.engine-badge--hold { color: #e0c56a; border-color: #e0c56a; }
.engine-badge--immune { color: #8eb6ea; border-color: #8eb6ea; }
.engine-badge--cooldown { color: #c4a5f0; border-color: #c4a5f0; }

html[data-theme="light"] .engine-badge--scale,
html[data-theme="light"] .engine-badge--super_scale,
html[data-theme="light"] .engine-badge--stable_scale { color: #0f6b3a; border-color: #0f6b3a; }
html[data-theme="light"] .engine-badge--cut { color: #9b1c1c; border-color: #9b1c1c; }
html[data-theme="light"] .engine-badge--hold { color: #9a6b00; border-color: #c4921a; }
html[data-theme="light"] .engine-badge--immune { color: #1d4f91; border-color: #1d4f91; }
html[data-theme="light"] .engine-badge--cooldown { color: #6b3fa0; border-color: #6b3fa0; }

.engine-asof {
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.engine-site-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

.engine-site-card {
    display: block;
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--line);
    background: var(--surface);
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.engine-site-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-1px);
}

.engine-site-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.engine-site-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.engine-site-go {
    color: var(--muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.engine-site-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.engine-stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
}

.engine-stat-num--cut { color: #f0a0a0; }
.engine-stat-num--scale { color: #6dcea0; }
html[data-theme="light"] .engine-stat-num--cut { color: #c0392b; }
html[data-theme="light"] .engine-stat-num--scale { color: #1e8449; }

.engine-stat-label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.engine-site-hint {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.engine-back {
    display: inline-block;
    margin-bottom: 0.55rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.95rem;
}

.engine-back:hover { color: var(--ink); text-decoration: underline; }

.engine-workspace {
    display: grid;
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    background: var(--surface);
    min-height: min(78vh, 52rem);
    max-height: calc(100vh - 7.5rem);
}

.engine-side {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1rem 1.15rem;
    border-right: 1px solid var(--line);
    overflow: auto;
    background: color-mix(in srgb, var(--ink) 3%, var(--surface));
}

.engine-side-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.engine-side-copy {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--muted);
}

.engine-back {
    display: inline-block;
    margin: 0;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.88rem;
}

.engine-back:hover { color: var(--ink); text-decoration: underline; }

.engine-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.15rem;
}

.engine-filter-bar--side {
    flex-direction: column;
    border-bottom: 0;
    gap: 0.15rem;
}

.engine-filter {
    appearance: none;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    padding: 0.4rem 0.35rem;
    cursor: pointer;
    text-align: left;
}

.engine-filter-bar--side .engine-filter {
    border-bottom: 0;
    border-left: 2px solid transparent;
    padding-left: 0.55rem;
}

.engine-filter strong {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    margin-right: 0.2rem;
}

.engine-filter:hover { color: var(--ink); }

.engine-filter.is-active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.engine-filter-bar--side .engine-filter.is-active {
    border-bottom-color: transparent;
    border-left-color: var(--ink);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.engine-filter--cut.is-active,
.engine-filter-bar--side .engine-filter--cut.is-active {
    border-bottom-color: #f0a0a0;
    border-left-color: #f0a0a0;
}

.engine-filter--scale.is-active,
.engine-filter-bar--side .engine-filter--scale.is-active {
    border-bottom-color: #6dcea0;
    border-left-color: #6dcea0;
}

html[data-theme="light"] .engine-filter--cut.is-active,
html[data-theme="light"] .engine-filter-bar--side .engine-filter--cut.is-active {
    border-bottom-color: #c0392b;
    border-left-color: #c0392b;
}

html[data-theme="light"] .engine-filter--scale.is-active,
html[data-theme="light"] .engine-filter-bar--side .engine-filter--scale.is-active {
    border-bottom-color: #1e8449;
    border-left-color: #1e8449;
}

.engine-budget-summary {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    padding: 0.75rem 0.85rem;
    background: var(--surface);
    display: grid;
    gap: 0.35rem;
}

.engine-budget-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.engine-budget-summary-value {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    text-align: right;
}

.engine-budget-summary-value.is-cut,
.engine-budget-net.is-cut { color: #f0a0a0; }
.engine-budget-summary-value.is-scale,
.engine-budget-net.is-scale { color: #6dcea0; }
html[data-theme="light"] .engine-budget-summary-value.is-cut,
html[data-theme="light"] .engine-budget-net.is-cut { color: #c0392b; }
html[data-theme="light"] .engine-budget-summary-value.is-scale,
html[data-theme="light"] .engine-budget-net.is-scale { color: #1e8449; }

.engine-budget-summary-row--result {
    margin-top: 0.2rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--line);
}

.engine-budget-summary-row--result .engine-budget-summary-label {
    color: var(--ink);
    font-weight: 600;
}

.engine-budget-summary-row--result .engine-budget-summary-value {
    font-size: 1.05rem;
}

.engine-budget-net {
    display: inline-block;
    margin-left: 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.engine-apply-all {
    width: 100%;
    margin-top: 0.55rem;
    min-height: 2.3rem;
    font-size: 0.88rem;
}

.engine-apply-all:disabled {
    opacity: 0.55;
    cursor: wait;
}

.engine-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.engine-list-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.engine-list-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--ink);
    padding: 0.85rem 1rem;
    cursor: pointer;
    font-family: var(--font-ui);
    letter-spacing: var(--tracking-satoshi);
    transition: background 0.12s ease;
}

.engine-list-item:last-child { border-bottom: 0; }
.engine-list-item:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.engine-list-item.is-active { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.engine-list-item:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.engine-camp--cut { border-left-color: #f0a0a0 !important; }
.engine-camp--super_scale,
.engine-camp--stable_scale { border-left-color: #6dcea0 !important; }
.engine-camp--hold { border-left-color: #e0c56a !important; }
.engine-camp--immune { border-left-color: #8eb6ea !important; }
.engine-camp--cooldown { border-left-color: #c4a5f0 !important; }

html[data-theme="light"] .engine-camp--cut { border-left-color: #c0392b !important; }
html[data-theme="light"] .engine-camp--super_scale,
html[data-theme="light"] .engine-camp--stable_scale { border-left-color: #1e8449 !important; }
html[data-theme="light"] .engine-camp--hold { border-left-color: #c4921a !important; }
html[data-theme="light"] .engine-camp--immune { border-left-color: #1d4f91 !important; }
html[data-theme="light"] .engine-camp--cooldown { border-left-color: #6b3fa0 !important; }

.engine-list-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.engine-list-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.engine-camp-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.engine-start-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.45rem;
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: var(--tracking-satoshi);
    white-space: nowrap;
    line-height: 1.2;
}

.engine-list-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.engine-list-cpp {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
}
.engine-list-cpp.is-bad { color: #f0a0a0; }
.engine-list-cpp.is-good { color: #6dcea0; }
html[data-theme="light"] .engine-list-cpp.is-bad { color: #c0392b; }
html[data-theme="light"] .engine-list-cpp.is-good { color: #1e8449; }
.engine-list-sep { opacity: 0.5; }

.engine-muted-inline {
    color: var(--muted);
    font-size: 0.85rem;
}

.engine-apply--compact {
    min-height: 2rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
    margin-left: auto;
    box-shadow: 2px 2px 0 var(--shadow);
}
.engine-apply--cut { border-color: #f0a0a0; color: #f0a0a0; background: transparent; }
.engine-apply--cut:hover:not(:disabled) { background: rgba(240, 160, 160, 0.12); }
.engine-apply--scale { border-color: #6dcea0; color: #6dcea0; background: transparent; }
.engine-apply--scale:hover:not(:disabled) { background: rgba(109, 206, 160, 0.12); }
html[data-theme="light"] .engine-apply--cut { border-color: #c0392b; color: #c0392b; }
html[data-theme="light"] .engine-apply--scale { border-color: #1e8449; color: #1e8449; }

.engine-board-empty {
    margin: 0;
    padding: 1rem;
    color: var(--muted);
    border-top: 1px solid var(--line);
}
.engine-camp.is-filtered-out { display: none; }

.engine-detail-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 0.75rem;
}

.engine-modal-budget-row {
    margin-bottom: 0.75rem;
}

.engine-metric-label {
    display: block;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}

.engine-metric-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.engine-delta-pct {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}
.engine-delta-pct.is-cut { color: #f0a0a0; }
.engine-delta-pct.is-scale { color: #6dcea0; }
html[data-theme="light"] .engine-delta-pct.is-cut { color: #c0392b; }
html[data-theme="light"] .engine-delta-pct.is-scale { color: #1e8449; }

.engine-detail-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    margin-bottom: 0.75rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.engine-detail-delta {
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

body.engine-modal-open { overflow: hidden; }
.engine-modal[hidden] { display: none !important; }

.engine-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: stretch;
}

.engine-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 10, 0.78);
}

.engine-modal-panel {
    position: relative;
    z-index: 1;
    margin: 0;
    width: 100%;
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem 1.5rem;
    overflow: auto;
    font-family: var(--font-ui);
    letter-spacing: var(--tracking-satoshi);
}

.engine-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.engine-modal-kicker {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.engine-modal-title {
    margin: 0.2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.engine-modal-sub {
    margin: 0.3rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.engine-modal-close {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    font-family: var(--font-ui);
}

.engine-modal-trends {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.engine-trend-card {
    border: 1px solid var(--line);
    padding: 0.65rem 0.8rem;
    background: var(--surface);
    color: var(--ink);
}

.engine-trend-card strong {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.engine-trend-val {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.engine-trend-val small {
    font-weight: 500;
    color: var(--muted);
    font-family: var(--font-ui);
}

.engine-arrow--up { color: #f0a0a0; }
.engine-arrow--down { color: #6dcea0; }
.engine-arrow--flat { color: var(--muted); }
html[data-theme="light"] .engine-arrow--up { color: #c0392b; }
html[data-theme="light"] .engine-arrow--down { color: #1e8449; }

.engine-modal-status { color: var(--muted); font-size: 0.88rem; margin-bottom: 0.65rem; }
.engine-modal-status.is-error { color: #f0a0a0; }

.engine-modal-chart-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 20rem;
    height: min(56vh, 34rem);
    border: 1px solid var(--line);
    padding: 0.5rem;
    background: var(--surface);
    overflow: hidden;
}

.engine-modal-chart-wrap canvas,
.engine-modal-chart-wrap svg.engine-svg-chart {
    position: absolute !important;
    inset: 0.5rem !important;
    width: calc(100% - 1rem) !important;
    height: calc(100% - 1rem) !important;
    display: block;
}

.engine-modal-note {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.engine-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.35rem 0 0.55rem;
}

.engine-chart-ranges {
    display: inline-flex;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.engine-chart-range {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.28rem 0.55rem;
    border-radius: 7px;
    cursor: pointer;
}

.engine-chart-range.is-active {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 28%, transparent);
    background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.engine-portfolio {
    margin: 1.25rem 0 1.75rem;
    padding: 1.1rem 1.15rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--panel, #141412) 92%, transparent);
}

.engine-portfolio-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem 1rem;
    margin-bottom: 0.75rem;
}

.engine-portfolio-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.engine-portfolio-sub {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.engine-portfolio-toolbar {
    margin-bottom: 0.65rem;
}

.engine-portfolio-sites {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
}

.engine-portfolio-site {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.4rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.engine-portfolio-site:hover {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 22%, transparent);
}

.engine-portfolio-site.is-active {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 30%, transparent);
    background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.engine-portfolio-status {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.engine-portfolio-status.is-error {
    color: #e08a8a;
}

.engine-portfolio-chart-wrap {
    min-height: 380px;
    height: 420px;
}

@media (max-width: 720px) {
    .engine-portfolio {
        padding: 0.9rem;
    }
    .engine-portfolio-chart-wrap {
        min-height: 300px;
        height: 340px;
    }
}


.engine-chart-reset {
    min-height: 1.9rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
}

.engine-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
    align-items: center;
    margin: 0 0 0.55rem;
    font-size: 0.76rem;
    color: var(--muted);
}

.engine-leg {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.engine-leg::before {
    content: "";
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.engine-leg--cpp { color: #f0a0a0; }
.engine-leg--ma { color: #c4a484; }
.engine-leg--ma::before { border-top: 2px dashed currentColor; height: 0; background: transparent; }
.engine-leg--budget { color: #8eb6ea; }
.engine-leg--target { color: #c4a484; opacity: 0.85; }
.engine-leg-zones {
    width: 100%;
    opacity: 0.9;
}

.engine-budget-events {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.55rem;
    margin: 0 0 0.7rem;
}

.engine-bev {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    background: color-mix(in srgb, var(--panel, var(--bg)) 90%, var(--ink) 4%);
}

.engine-bev.is-up { border-color: color-mix(in srgb, #6dcea0 35%, var(--line)); }
.engine-bev.is-down { border-color: color-mix(in srgb, #f0a0a0 35%, var(--line)); }

.engine-bev-top {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: baseline;
    margin-bottom: 0.2rem;
}

.engine-bev-date {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
}

.engine-bev-change {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
}

.engine-bev-label {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    color: var(--muted);
}

.engine-bev-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

.engine-bev-k {
    display: block;
    font-size: 0.68rem;
    color: var(--muted);
    margin-bottom: 0.1rem;
}

.engine-bev-grid strong {
    font-size: 0.84rem;
    font-weight: 650;
}

.engine-bev-response.is-better strong { color: #6dcea0; }
.engine-bev-response.is-worse strong { color: #f0a0a0; }
.engine-bev-response.is-muted {
    font-size: 0.78rem;
    color: var(--muted);
}

@media (max-width: 720px) {
    .engine-bev-grid {
        grid-template-columns: 1fr 1fr;
    }
    .engine-modal-chart-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.engine-target-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    color: var(--muted);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    white-space: nowrap;
}

.engine-cpp-target {
    margin: 0.85rem 0 1rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel, var(--bg)) 88%, var(--ink) 4%);
}

.engine-cpp-target-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.engine-cpp-target-hint {
    font-size: 0.78rem;
    color: var(--muted);
}

.engine-cpp-target-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.engine-cpp-prefix {
    color: var(--muted);
    font-weight: 600;
}

.engine-cpp-target-input {
    width: 7.5rem;
    min-height: 2.1rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
}

.engine-cpp-target-input:focus {
    outline: 2px solid color-mix(in srgb, var(--ink) 25%, transparent);
    outline-offset: 1px;
}

.engine-cpp-target-save,
.engine-cpp-target-clear {
    min-height: 2.1rem;
    padding: 0.35rem 0.7rem;
}

.engine-cpp-target-note {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
}

@media (max-width: 980px) {
    .engine-workspace {
        grid-template-columns: 1fr;
        max-height: none;
        min-height: 0;
    }
    .engine-side {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .engine-filter-bar--side {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .engine-filter-bar--side .engine-filter {
        border-left: 0;
        border-bottom: 2px solid transparent;
        padding-left: 0.55rem;
    }
    .engine-filter-bar--side .engine-filter.is-active {
        border-left-color: transparent;
        border-bottom-color: var(--ink);
        background: transparent;
    }
}

.engine-loading {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
}

.engine-loading[hidden] {
    display: none !important;
}

.engine-loading-card {
    width: min(100%, 22rem);
    padding: 1.5rem 1.35rem;
    border: 1px solid var(--line-strong);
    background: var(--bg);
    color: var(--ink);
    text-align: center;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.engine-spinner {
    width: 2.4rem;
    height: 2.4rem;
    margin: 0 auto 1rem;
    border: 3px solid var(--line);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: engine-spin 0.75s linear infinite;
}

@keyframes engine-spin {
    to { transform: rotate(360deg); }
}

.engine-loading-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
}

.engine-loading-copy {
    margin: 0.45rem 0 0;
    font-size: 0.88rem;
    color: var(--muted);
}

.engine-confirm .budget-confirm-icon {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.engine-apply-all.is-loading,
.engine-apply.is-loading {
    opacity: 0.65;
    cursor: wait;
}

.engine-queue-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(140, 180, 220, 0.55);
    color: #9ec4ea;
    white-space: nowrap;
}
html[data-theme="light"] .engine-queue-chip {
    color: #1d4f91;
    border-color: rgba(29, 79, 145, 0.35);
    background: rgba(29, 79, 145, 0.06);
}
.engine-queue-banner,
.engine-queue-note,
.engine-night-empty {
    margin: 0.75rem 0 1rem;
    font-size: 0.9rem;
    color: var(--muted, #9aa3b2);
}
.engine-queue-note {
    margin: 0.35rem 0 0.75rem;
}
.engine-night-report {
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}
html[data-theme="light"] .engine-night-report {
    border-color: rgba(0, 0, 0, 0.08);
    background: #fff;
}
.engine-night-report-title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
}
.engine-night-report-sum {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--muted, #9aa3b2);
}
.engine-night-report-table-wrap {
    overflow-x: auto;
}
.engine-night-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.engine-night-report-table th,
.engine-night-report-table td {
    text-align: left;
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}
html[data-theme="light"] .engine-night-report-table th,
html[data-theme="light"] .engine-night-report-table td {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
.engine-night-report-table th {
    font-weight: 600;
    color: var(--muted, #9aa3b2);
}
.engine-night-row--failed td {
    color: #f0a0a0;
}
html[data-theme="light"] .engine-night-row--failed td {
    color: #9b1c1c;
}

/* Catalog Launch panel */
.catalog-launch-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}
.catalog-launch-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.catalog-launch-title {
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: var(--tracking-satoshi);
}
.catalog-launch-sub {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.92rem;
    max-width: 42rem;
}
.catalog-launch-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.catalog-launch-status {
    margin: 0 0 1.25rem;
    font-size: 0.85rem;
    color: var(--muted);
}
.catalog-launch-status.is-ok { color: #7dd87d; }
.catalog-launch-status.is-error { color: #f0a0a0; }
html[data-theme="light"] .catalog-launch-status.is-ok { color: #1a6b1a; }
html[data-theme="light"] .catalog-launch-status.is-error { color: #9b1c1c; }
.catalog-launch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
    .catalog-launch-grid { grid-template-columns: 1fr; }
}
.catalog-launch-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    padding: 1rem 1.1rem;
}
.catalog-launch-card-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.catalog-launch-kv {
    margin: 0;
}
.catalog-launch-kv-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.84rem;
}
.catalog-launch-kv-row:last-child { border-bottom: 0; }
.catalog-launch-kv-row dt {
    margin: 0;
    color: var(--muted);
    flex-shrink: 0;
}
.catalog-launch-kv-row dd {
    margin: 0;
    text-align: right;
    word-break: break-word;
}
.catalog-launch-bar {
    margin-top: 0.75rem;
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}
.catalog-launch-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7dd87d, #a8e6a8);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.catalog-launch-section {
    margin-bottom: 1.5rem;
}
.catalog-launch-section-title {
    margin: 0 0 0.65rem;
    font-size: 1.05rem;
}
.catalog-launch-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}
.catalog-launch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}
.catalog-launch-table th,
.catalog-launch-table td {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.catalog-launch-table th {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.catalog-launch-empty {
    color: var(--muted);
    text-align: center;
    padding: 1.25rem !important;
}
.catalog-launch-muted {
    color: var(--muted);
    font-size: 0.78rem;
}
.catalog-launch-split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
}
@media (max-width: 900px) {
    .catalog-launch-split { grid-template-columns: 1fr; }
}
.catalog-launch-log {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 0.5rem;
}
.catalog-launch-log-row {
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    margin-bottom: 0.35rem;
    border-left: 3px solid var(--line-strong);
    background: var(--bg-raised);
}
.catalog-launch-log-row.is-success { border-left-color: #7dd87d; }
.catalog-launch-log-row.is-error { border-left-color: #f0a0a0; }
.catalog-launch-log-row.is-warn { border-left-color: #e6c87d; }
.catalog-launch-log-row time {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
}
.catalog-launch-log-type {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin: 0.15rem 0;
}
.catalog-launch-log-row p {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
}
.catalog-launch-runs {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 0.5rem;
}
.catalog-launch-run-row {
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--line);
}
.catalog-launch-run-row:last-child { border-bottom: 0; }
.catalog-launch-run-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.catalog-launch-run-row p {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}
.catalog-launch-badge {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    background: var(--nav-fill);
    border: 1px solid var(--line);
}
.catalog-launch-badge.is-success {
    background: rgba(125, 216, 125, 0.15);
    border-color: rgba(125, 216, 125, 0.35);
}
.catalog-launch-badge.is-error {
    background: rgba(240, 160, 160, 0.12);
    border-color: rgba(240, 160, 160, 0.35);
}
.catalog-launch-badge.is-warn {
    background: rgba(230, 200, 125, 0.12);
    border-color: rgba(230, 200, 125, 0.35);
}
.catalog-launch-err {
    color: #f0a0a0;
    font-size: 0.8rem;
}


/* �� Delivery panel �� */
.delivery-main { max-width: 1120px; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
.delivery-hero { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.delivery-title { margin: 0; font-size: 1.65rem; letter-spacing: -0.02em; }
.delivery-sub { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.92rem; max-width: 36rem; }
.delivery-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.delivery-select-wrap { margin: 0; }
.delivery-select, .delivery-search, .delivery-webhook-input {
  background: var(--nav-fill); border: 1px solid var(--line); color: inherit;
  border-radius: 8px; padding: 0.45rem 0.65rem; font: inherit; min-width: 10rem;
}
.delivery-status { margin: 0 0 1rem; font-size: 0.9rem; color: var(--muted); }
.delivery-status.is-ok { color: #7dd87d; }
.delivery-status.is-error { color: #f0a0a0; }
html[data-theme="light"] .delivery-status.is-ok { color: #1a6b1a; }
html[data-theme="light"] .delivery-status.is-error { color: #9b1c1c; }
.delivery-kpi-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 1.25rem;
}
@media (max-width: 960px) { .delivery-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .delivery-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.delivery-kpi {
  border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 0.9rem; background: var(--nav-fill);
}
.delivery-kpi-hero { grid-column: span 1; }
.delivery-kpi-label { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.delivery-kpi-value { margin: 0.25rem 0 0; font-size: 1.45rem; font-weight: 650; letter-spacing: -0.02em; }
.delivery-kpi-note { margin: 0.25rem 0 0; font-size: 0.72rem; color: var(--muted); }
.delivery-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.delivery-tab {
  border: 1px solid var(--line); background: transparent; color: inherit; border-radius: 999px;
  padding: 0.4rem 0.9rem; cursor: pointer; font: inherit; font-size: 0.88rem;
}
.delivery-tab.is-active { background: var(--nav-fill); border-color: color-mix(in srgb, var(--line) 40%, #8ab4ff); }
.delivery-panel { margin-bottom: 1.5rem; }
.delivery-section-title { margin: 0 0 0.65rem; font-size: 1.05rem; }
.delivery-section-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; justify-content: space-between; }
.delivery-sku-rule { margin: 0; font-size: 0.82rem; color: var(--muted); }
.delivery-search-wrap { display: block; margin-bottom: 0.65rem; }
.delivery-search { width: min(100%, 20rem); }
.delivery-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.delivery-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.delivery-table th, .delivery-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.delivery-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: color-mix(in srgb, var(--nav-fill) 70%, transparent); }
.delivery-table tr:last-child td { border-bottom: 0; }
.delivery-table tr.is-faded { opacity: 0.42; }
.delivery-table tr.is-faded:hover { opacity: 0.72; }
.delivery-empty { color: var(--muted); padding: 1rem !important; }
.delivery-badge {
  display: inline-block; padding: 0.12rem 0.45rem; border-radius: 999px; font-size: 0.72rem;
  background: var(--nav-fill); border: 1px solid var(--line);
}
.delivery-sku-link {
  background: none; border: 0; color: inherit; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; padding: 0;
}
.delivery-health { margin: 0; }
.delivery-health-row {
  display: grid; grid-template-columns: 11rem 1fr; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line);
}
.delivery-health-row dt { margin: 0; color: var(--muted); font-size: 0.85rem; }
.delivery-health-row dd { margin: 0; font-size: 0.9rem; word-break: break-word; }
.delivery-webhook-box { margin-top: 1rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--nav-fill); }
.delivery-webhook-input { width: 100%; margin-top: 0.35rem; }
.delivery-log { max-height: 22rem; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem 0.75rem; }
.delivery-log-item { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.delivery-log-item:last-child { border-bottom: 0; }
.delivery-muted { color: var(--muted); margin-left: auto; font-size: 0.78rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }