:root {
    color-scheme: light;
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #edf1f7;
    --text: #111827;
    --muted: #5f6f82;
    --muted-2: #8794a6;
    --line: #d8dee8;
    --line-strong: #c2cbd8;
    --brand: #f38020;
    --blue: #1769e0;
    --blue-2: #0f5ccf;
    --ok: #0f766e;
    --warn: #b45309;
    --danger: #dc2626;
    --shadow: 0 8px 22px rgba(15,23,42,.06);
    --sidebar: #ffffff;
    --sidebar-text: #111827;
    --sidebar-muted: #607086;
    --sidebar-hover: #eef2f7;
    --topbar: rgba(255,255,255,.92);
    --focus: rgba(23,105,224,.18);
    --sidebar-width: 260px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #050505;
    --surface: #101113;
    --surface-2: #15171b;
    --surface-3: #1a1d22;
    --text: #f5f5f5;
    --muted: #a3adbb;
    --muted-2: #7d8795;
    --line: #272a2f;
    --line-strong: #383d46;
    --brand: #f38020;
    --blue: #2f7df6;
    --blue-2: #4d8df8;
    --ok: #3fc7b6;
    --warn: #f7a928;
    --danger: #ff5d57;
    --shadow: none;
    --sidebar: #070707;
    --sidebar-text: #f5f5f5;
    --sidebar-muted: #a7aeb8;
    --sidebar-hover: #181a1f;
    --topbar: rgba(5,5,5,.94);
    --focus: rgba(47,125,246,.22);
}
* { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-size: 14px; line-height: 1.4; font-weight: 450; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.fa-solid, .fa-regular, .fa-brands { width: 18px; min-width: 18px; text-align: center; }

.cf-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0,1fr); background: var(--bg); }
.cf-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--sidebar); color: var(--sidebar-text); border-right: 1px solid var(--line); padding: 0; display: flex; flex-direction: column; gap: 0; scrollbar-width: thin; }
.cf-sidebar::-webkit-scrollbar { width: 8px; }
.cf-sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.cf-account { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: -.015em; }
.brand-compact { width: 100%; }
.brand-copy { display: grid; min-width: 0; line-height: 1.15; }
.brand-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 165px; font-size: 14px; font-weight: 800; }
.brand-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; font-weight: 650; margin-top: 2px; }
.brand-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.brand-mark { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), #fbb35f); flex: 0 0 auto; font-size: 18px; }
.brand-mark.admin { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.icon-button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 8px; min-width: 34px; width: 34px; height: 34px; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.icon-button:hover { border-color: var(--line-strong); background: var(--surface-3); }

.quick-search { margin: 14px 16px 10px; min-height: 42px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 0 10px; color: var(--sidebar-muted); }
.quick-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); padding: 0; font-size: 13px; }
.quick-search kbd { color: var(--muted-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; font-size: 11px; line-height: 1.35; background: var(--surface-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.smart-nav { display: grid; gap: 0; padding: 0 0 14px; }
.smart-nav-compact .nav-section { color: var(--sidebar-muted); font-size: 13px; font-weight: 720; padding: 14px 20px 7px; line-height: 1.2; }
.smart-nav details { display: grid; gap: 0; }
.smart-nav summary { list-style: none; display: grid; grid-template-columns: 20px 1fr 14px; gap: 9px; align-items: center; color: var(--sidebar-muted); font-weight: 650; padding: 7px 16px; cursor: pointer; user-select: none; min-height: 36px; }
.smart-nav summary::-webkit-details-marker { display: none; }
.smart-nav details[open] summary .fa-chevron-right { transform: rotate(90deg); }
.nav-link, .logout button { display: grid; grid-template-columns: 20px 1fr 14px; gap: 9px; align-items: center; width: 100%; text-decoration: none; color: var(--sidebar-text); border: 0; background: transparent; border-radius: 0; padding: 7px 16px 7px 20px; cursor: pointer; text-align: left; min-height: 36px; font-size: 14px; font-weight: 650; }
.nav-link .nav-chevron { color: var(--muted-2); font-size: 11px; opacity: .9; }
.smart-nav details .nav-link { margin-left: 0; width: 100%; color: var(--sidebar-muted); }
.smart-nav summary:hover, .nav-link:hover, .logout button:hover { background: var(--sidebar-hover); color: var(--text); }
.nav-link.active { background: var(--sidebar-hover); color: var(--text); box-shadow: inset 3px 0 0 var(--brand); }
.logout { margin-top: auto; padding: 12px 0 14px; border-top: 1px solid var(--line); }
.logout button { color: var(--sidebar-muted); }

.cf-workspace { min-width: 0; display: grid; grid-template-rows: 58px 1fr; }
.cf-topbar { position: sticky; top: 0; z-index: 5; height: 58px; background: var(--topbar); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.mobile-menu { display: none; }
.topbar-title { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; }
.top-star { color: var(--muted-2); }
.dot { width: 9px; height: 9px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 0 4px rgba(63,199,182,.12); }
.dot.danger { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,93,87,.13); }
.pill, .badge { display: inline-flex !important; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted) !important; border-radius: 999px; padding: 2px 8px; font-size: 12px !important; line-height: 1.35; font-weight: 750; text-transform: capitalize; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 18px; color: var(--muted); }
.topbar-actions a { text-decoration: none; display: inline-flex; gap: 7px; align-items: center; font-weight: 650; }
.topbar-actions a:hover { color: var(--text); }
.top-theme { min-width: 30px; width: 30px; height: 30px; border-radius: 8px; }
.user-dot { color: var(--muted); }
.main { width: min(100%, 1480px); padding: 30px clamp(22px, 3vw, 44px); }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.cf-page-title h1 { display: flex; align-items: center; gap: 12px; }
.cf-page-title h1 i { width: 34px; min-width: 34px; color: var(--text); opacity: .95; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eyebrow { color: var(--brand); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 900; margin: 0 0 8px; }
h1 { margin: 0 0 8px; font-size: clamp(30px, 3.7vw, 42px); letter-spacing: -.045em; line-height: 1.05; font-weight: 850; }
h2 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.02em; font-weight: 800; }
h3 { margin: 0 0 10px; font-size: 15px; }
p { line-height: 1.52; }
.muted { color: var(--muted); margin-top: 0; }
.small { font-size: 13px; }
.grid { display: grid; gap: 16px; margin-bottom: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.main-right { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.compact-grid { gap: 16px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.stats-grid.admin-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat, .panel, .product-card, .auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); }
.flush-panel { padding: 0; overflow: hidden; }
.stat span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.stat strong { font-size: 30px; letter-spacing: -.045em; line-height: 1; font-weight: 850; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.panel-head a, .text-link { color: var(--blue-2); text-decoration: none; font-weight: 750; }
.panel-head a:hover, .text-link:hover { text-decoration: underline; }
.compact { padding: 16px; }

.row-card, .service-row { border-top: 1px solid var(--line); padding: 12px 0; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.row-card:first-of-type, .service-row:first-of-type { border-top: 0; }
.row-card span:not(.badge), .service-row span:not(.badge) { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.badge.active, .badge.paid, .badge.succeeded { background: rgba(63,199,182,.12); border-color: rgba(63,199,182,.30); color: var(--ok) !important; }
.badge.pending, .badge.open, .badge.running { background: rgba(247,169,40,.12); border-color: rgba(247,169,40,.30); color: var(--warn) !important; }
.badge.suspended, .badge.past_due, .badge.failed, .badge.disabled { background: rgba(255,93,87,.12); border-color: rgba(255,93,87,.30); color: var(--danger) !important; }
.resource-link { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--blue-2); text-decoration: none; }
.resource-link:first-of-type { border-top: 0; }
.mini-list { display: grid; gap: 0; }
.mini-list div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.mini-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-list span { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.product-card { display: grid; gap: 10px; }
.product-card p { color: var(--muted); min-height: 42px; }

.cf-domain-table { margin-bottom: 18px; }
.table-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 18px 20px; }
.table-toolbar h2 { margin-bottom: 3px; }
.table-search { min-width: min(100%, 520px); height: 40px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); overflow: hidden; color: var(--muted); }
.table-search input { border: 0; background: transparent; color: var(--text); padding: 0; height: 100%; outline: 0; }
.table-search button { height: 100%; border-radius: 0; border: 0; border-left: 1px solid var(--blue); color: var(--blue-2); background: transparent; padding: 0 18px; font-weight: 750; }
.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 13px 20px; text-align: left; border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
th { color: var(--text); font-weight: 800; background: rgba(127,127,127,.04); }
td { color: var(--muted); }
td a { color: var(--blue-2); font-weight: 800; text-decoration: none; }
td a:hover { text-decoration: underline; }
.check { color: var(--muted); margin-right: 4px; }
.under { color: var(--text); border-bottom: 1px solid currentColor; }
.ellipsis { text-align: right; color: var(--text); }

.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 7px; color: var(--text); font-weight: 650; font-size: 13px; }
input, select, textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; padding: 10px 12px; background: var(--surface-2); color: var(--text); outline: none; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus); }
button, .button, .primary { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); padding: 8px 13px; border-radius: 8px; text-decoration: none; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; }
button:hover, .button:hover { border-color: var(--line-strong); background: var(--surface-3); }
.primary, .button { background: var(--blue); color: white; border-color: var(--blue); }
.primary:hover, .button:hover { background: #1d4ed8; color: white; }
.button.secondary { background: var(--surface); color: var(--text); border-color: var(--line); }
.alert { border: 1px solid rgba(255,93,87,.34); background: rgba(255,93,87,.10); color: var(--danger); border-radius: 10px; padding: 10px 12px; margin: 10px 0; display: flex; gap: 8px; align-items: center; }
.alert.success { border-color: rgba(63,199,182,.34); background: rgba(63,199,182,.10); color: var(--ok); }
code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--text); }
.settings-grid { display: grid; gap: 16px; }
.settings-section { display: grid; gap: 12px; }
.settings-section h2 { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.secret-note { display: block; color: var(--muted); font-weight: 500; font-size: 12px; margin-top: 4px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.hero-overview { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; align-items: stretch; margin-bottom: 18px; }
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); min-height: 250px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-side { display: grid; gap: 16px; }
.tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; margin-bottom: 12px; background: var(--surface-2); }
.tabs button { border: 0; background: transparent; color: var(--muted); padding: 6px 10px; border-radius: 6px; min-height: 30px; }
.tabs button.active { background: var(--surface); color: var(--text); }
.chart-card { margin-top: 20px; }
.chart-window { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 14px; align-items: center; min-height: 170px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 14px; overflow: hidden; }
.chart-number { font-size: 28px; font-weight: 850; letter-spacing: -.04em; display: block; }
.chart { height: 130px; border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background-image: repeating-linear-gradient(to top, transparent 0 25px, var(--line) 26px), linear-gradient(180deg, rgba(47,125,246,.20), transparent); clip-path: polygon(0 58%, 8% 54%, 16% 62%, 24% 33%, 33% 55%, 42% 28%, 50% 49%, 58% 41%, 67% 61%, 75% 56%, 83% 24%, 91% 70%, 100% 46%, 100% 100%, 0 100%); }

.auth-body { min-height: 100vh; background: var(--bg); display: grid; place-items: center; padding: 24px; }
.auth-theme { position: fixed; right: 18px; top: 18px; z-index: 10; }
.google-card { width: min(980px,100%); min-height: 400px; display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,420px); gap: 42px; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 38px; box-shadow: var(--shadow); }
.google-left { display: flex; flex-direction: column; }
.google-left h1 { font-size: clamp(34px,5vw,50px); margin-top: 42px; }
.google-left p { color: var(--muted); font-size: 16px; max-width: 500px; }
.auth-brand { margin-bottom: 8px; }
.google-right { display: grid; align-content: center; }
.google-form { gap: 16px; }
.google-form input { border-radius: 5px; padding: 13px 12px; background: transparent; }
.google-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; }
.google-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 28px; }
.google-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-2); }
.consent-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 14px 0; background: var(--surface-2); }
.consent-box span { display: block; color: var(--muted); margin-top: 4px; }

@media (max-width: 1180px) {
    :root { --sidebar-width: 248px; }
    .hero-overview, .grid.main-right { grid-template-columns: 1fr; }
    .stats-grid.admin-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 920px) {
    .cf-shell { grid-template-columns: 1fr; }
    .cf-sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: min(86vw, 300px); transform: translateX(-105%); transition: transform .18s ease; box-shadow: 0 24px 60px rgba(0,0,0,.36); }
    body.sidebar-open .cf-sidebar { transform: translateX(0); }
    .mobile-menu { display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 8px; width: 34px; height: 34px; padding: 0; }
    .cf-topbar { padding: 0 14px; }
    .topbar-actions a span, .topbar-actions a:not(:last-child) { display: none; }
    .main { padding: 22px 16px; }
    .page-header, .grid.two, .stats-grid, .stats-grid.admin-stats, .cards, .chart-window, .hero-overview, .google-card, .table-toolbar { grid-template-columns: 1fr; display: grid; }
    .page-header { gap: 14px; }
    .table-search { min-width: 100%; }
    .google-card { padding: 28px 22px; gap: 22px; border-radius: 18px; }
    .google-left h1 { margin-top: 16px; }
    .google-chips { padding-top: 12px; }
}
@media (max-width: 560px) {
    h1 { font-size: 28px; }
    .topbar-title strong { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .page-actions .button { width: 100%; }
    th, td { padding: 11px 14px; }
}


/* Patch 005 compactness and WHMCS-style commerce additions */
:root { --sidebar-width: 248px; }
body { font-size: 13.5px; }
.cf-account { min-height: 54px; padding: 10px 14px; }
.quick-search { margin: 12px 14px 8px; min-height: 38px; }
.quick-search input { font-size: 12.5px; }
.smart-nav-compact .nav-section { font-size: 12px; padding: 12px 18px 6px; color: var(--sidebar-muted); }
.nav-link, .logout button { grid-template-columns: 18px 1fr; min-height: 32px; padding: 6px 14px 6px 18px; font-size: 13px; gap: 8px; font-weight: 680; }
.smart-nav summary { grid-template-columns: 18px 1fr 12px; min-height: 32px; padding: 6px 14px 6px 18px; gap: 8px; color: var(--sidebar-text); font-size: 13px; font-weight: 720; }
.nav-link .nav-chevron { display: none; }
.nav-group .nav-children { margin-left: 27px; border-left: 1px solid var(--line); padding: 2px 0 4px 0; }
.nav-group .nav-children .nav-link { padding-left: 14px; color: var(--sidebar-text); min-height: 31px; }
.nav-group .nav-children .nav-link.active { box-shadow: inset 2px 0 0 var(--brand); }
.nav-empty { display: block; color: var(--muted-2); font-size: 12px; padding: 7px 14px; }
.cf-workspace { grid-template-rows: 54px 1fr; }
.cf-topbar { height: 54px; padding: 0 22px; }
.main { padding: 26px clamp(20px, 2.6vw, 36px); }
h1 { font-size: clamp(28px, 3vw, 36px); }
h2 { font-size: 16px; }
.page-header { margin-bottom: 20px; }
.stat, .panel, .product-card, .auth-card { border-radius: 10px; padding: 14px 16px; }
.stat strong { font-size: 28px; }
.cards.compact-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.catalog-section { margin-bottom: 22px; }
.catalog-head { margin: 4px 0 10px; }
.product-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface-2); border-radius: 9px; color: var(--blue-2); font-size: 16px; }
.order-card { position: relative; gap: 9px; }
.order-card .badge { position: absolute; top: 14px; right: 14px; }
.mini-order-form { display: grid; gap: 9px; margin-top: 4px; }
.mini-order-form .actions { display: grid; grid-template-columns: 84px 1fr; gap: 8px; }
.icon-link { border: 0; background: transparent; padding: 0; min-height: 0; color: var(--muted); }
.icon-link:hover { background: transparent; color: var(--text); }
.empty-state { display: grid; gap: 8px; align-items: start; color: var(--muted); }
.empty-state strong { color: var(--text); font-size: 15px; }
.empty-state.inline { padding: 12px 0; }
.builder-form .main-right { margin-bottom: 16px; }
.check-row { display: flex !important; grid-template-columns: none !important; flex-direction: row; align-items: center; gap: 8px !important; color: var(--muted); }
.check-row input { width: auto; }
.module-config { margin-top: 12px; }
.connection-result { border: 1px solid var(--line); border-radius: 8px; padding: 10px; color: var(--muted); background: var(--surface-2); font-size: 12.5px; }
.connection-result.ok { border-color: rgba(63,199,182,.35); color: var(--ok); background: rgba(63,199,182,.10); }
.connection-result.fail { border-color: rgba(255,93,87,.35); color: var(--danger); background: rgba(255,93,87,.10); }
.checkout-card { align-content: start; }
[data-table-filter] { min-width: 0; }
@media (max-width: 1320px) { .cards.compact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1180px) { :root { --sidebar-width: 238px; } .cards.compact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cards.compact-cards { grid-template-columns: 1fr; } }

/* Patch 007: WHMCS-style credential flow */
.compact-alert{font-size:12px;line-height:1.4;padding:10px 12px;margin:0 0 12px 0}
.advanced-box{border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.025);padding:10px 12px;margin:4px 0 10px}
.advanced-box summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--muted);list-style:none;display:flex;gap:8px;align-items:center}
.advanced-box summary::-webkit-details-marker{display:none}
.advanced-box[open] summary{color:var(--text);margin-bottom:10px}
.connection-result.ok{border-color:rgba(20,184,166,.55);background:rgba(20,184,166,.12);color:#5eead4}
.connection-result.fail{border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.12);color:#fca5a5}
.empty-state.inline .button{margin-top:10px;width:max-content}
[data-theme="light"] .connection-result.ok{color:#0f766e;background:#ecfdf5}
[data-theme="light"] .connection-result.fail{color:#991b1b;background:#fef2f2}

/* Patch 008: explicit API-token vs WHM/root-password connection modes */
.credential-method{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 12px}
.method-card{display:grid!important;grid-template-columns:18px 1fr!important;align-items:start;gap:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:10px 12px!important;cursor:pointer}
.method-card input{margin-top:3px;width:auto}
.method-card strong{display:flex;align-items:center;gap:7px;color:var(--text);font-size:12.5px}
.method-card em{display:block;color:var(--muted);font-style:normal;font-size:11.5px;line-height:1.35;margin-top:3px}
.method-card:has(input:checked){border-color:rgba(47,125,246,.8);box-shadow:inset 0 0 0 1px rgba(47,125,246,.25);background:rgba(47,125,246,.08)}
.method-card:has(input:disabled){opacity:.52;cursor:not-allowed}
.field-help{color:var(--muted);font-size:11.5px;line-height:1.4;margin:-6px 0 8px}
.danger-note{color:#fca5a5}
[data-theme="light"] .danger-note{color:#b91c1c}
@media (max-width: 720px){.credential-method{grid-template-columns:1fr}}

/* Overlay Patch 036: branding, recents fix, and sitewide overflow containment */
html, body { max-width: 100%; overflow-x: clip; }
.cf-shell, .cf-workspace, .main, .panel, .stat, .product-card, .auth-card, .google-card { min-width: 0; }
.main { max-width: 100%; overflow-x: clip; }
.responsive-table, .table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.responsive-table table, .table-scroll table { width: 100%; }
td, th { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.actions, .page-actions, .topbar-actions, .compact-actions { flex-wrap: wrap; min-width: 0; }
.compact-actions { display: flex; gap: 6px; }
.compact-actions form { min-width: 0; }
.compact-actions .button, .compact-actions button { white-space: nowrap; }
.cf-topbar { min-width: 0; }
.topbar-title { min-width: 0; overflow: hidden; }
.topbar-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { flex-shrink: 0; }
.brand-logo-only { justify-content: center; min-height: 38px; }
.brand-logo-img { display: block; max-width: 138px; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.cf-account .brand-logo-img { max-width: 170px; max-height: 34px; }
body.sidebar-collapsed .brand-logo-img { max-width: 34px; max-height: 34px; }
.auth-brand-logo .brand-logo-img, .auth-logo-img { max-width: 210px; max-height: 54px; }
.brand-manager-v36 { margin-bottom: 16px; }
.brand-upload-grid-v36 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.brand-upload-card-v36 { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--surface-2); display: grid; gap: 12px; min-width: 0; }
.brand-preview-v36 { min-height: 92px; border: 1px dashed var(--line-strong); border-radius: 12px; display: grid; place-items: center; padding: 12px; overflow: hidden; }
.brand-preview-v36.light-preview { background: #ffffff; color: #111827; }
.brand-preview-v36.dark-preview { background: #09090b; color: #f8fafc; }
.brand-preview-v36 img { max-width: 100%; max-height: 70px; object-fit: contain; }
.brand-file-v36 { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 9px 10px; cursor: pointer; font-weight: 800; }
.brand-file-v36 input { display: none; }
.brand-upload-status-v36 { color: var(--muted); font-size: 12px; min-height: 18px; }
.google-left .auth-brand-logo { width: fit-content; margin-bottom: 20px; }
.google-left h1 { max-width: 560px; }
.google-left p { max-width: 560px; }
@media (max-width: 1200px) { .brand-upload-grid-v36 { grid-template-columns: repeat(2, minmax(0, 1fr)); } td, th { max-width: 280px; } }
@media (max-width: 720px) { .brand-upload-grid-v36 { grid-template-columns: 1fr; } .topbar-actions a span { display: none; } .cf-topbar { padding-inline: 14px; } td, th { max-width: 220px; } }