/* ==========================================================================
   OdotMail — new design (upgrade) theme
   Loaded only by layouts in app/Views/upgrade/layouts, after app.css.
   Everything is scoped to body.od so the current design is never affected.
   Figma: "My New Odot Design".
   ========================================================================== */

/* -- Tokens --------------------------------------------------------------- */
body.od {
    --od-paper: #ffffff;
    --od-cloud: #f4f7fa;
    --od-ink: #0f2236;
    --od-muted: #5a6b7d;
    --od-faint: #8a99a8;
    --od-line: #e2e8ef;
    --od-blue: #1273c4;
    --od-blue-dark: #0e5fa3;
    --od-sky: #39a8ea;
    --od-tint: #e8f3fc;
    --od-ok: #149c6b;
    --od-ok-tint: #e6f5ee;
    --od-queued: #c98a0b;
    --od-queued-tint: #fbf3e3;
    --od-bad: #d0422f;
    --od-bad-tint: #fbebe8;
    --od-radius: 10px;
    --od-radius-lg: 16px;
    --od-shadow: 0 1px 2px rgba(15, 34, 54, .04);
    --od-shadow-lg: 0 24px 56px -8px rgba(15, 34, 54, .14);

    /* Remap app.css tokens so existing pages inherit the new look */
    --primary: var(--od-blue);
    --primary-dark: var(--od-blue-dark);
    --secondary: var(--od-ink);
    --secondary-lt: #1c3450;
    --accent: var(--od-cloud);
    --accent-md: #eaeff4;
    --surface: var(--od-paper);
    --surface-soft: var(--od-cloud);
    --ink: var(--od-ink);
    --ink-soft: #2a3d52;
    --muted: var(--od-muted);
    --line: var(--od-line);
    --danger: var(--od-bad);
    --danger-lt: var(--od-bad-tint);
    --success: var(--od-ok);
    --success-lt: var(--od-ok-tint);
    --warning: var(--od-queued);
    --warning-lt: var(--od-queued-tint);
    --info-lt: var(--od-tint);
    --sidebar-w: 256px;
    --font: "Manrope", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

    font-family: var(--font);
    font-size: 15px;
    letter-spacing: -0.005em;
    color: var(--od-ink);
    background: var(--od-cloud);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings keep their colour from app.css (var(--secondary), remapped above) so
   pages that set their own heading colour, e.g. white on dark banners, still win. */
body.od h1, body.od h2, body.od h3, body.od h4 { font-family: var(--font); font-weight: 600; letter-spacing: -0.02em; }
body.od h1 { letter-spacing: -0.03em; }
body.od h4 { text-transform: none; letter-spacing: 0; }
body.od code, body.od pre, body.od kbd { font-family: var(--mono); }
body.od ::selection { background: rgba(18, 115, 196, .16); }
body.od :focus-visible { outline: 2px solid var(--od-blue); outline-offset: 2px; }

.od-ico { flex-shrink: 0; display: block; }

/* -- Shell: sidebar ------------------------------------------------------- */
body.od .dashboard-wrap { min-height: 100vh; }

body.od .sidebar {
    background: var(--od-paper);
    border-right: 1px solid var(--od-line);
    width: var(--sidebar-w);
}
body.od .sidebar-brand {
    border-bottom: 0;
    padding: 1.25rem 1.1rem .75rem;
    gap: .55rem;
}
body.od .od-brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--od-ink); }
body.od .od-brand:hover { text-decoration: none; }
body.od .od-wordmark { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.04em; color: var(--od-ink); }

body.od .sidebar-nav { padding: .25rem .75rem 1rem; }
body.od .sidebar-section {
    padding: 1rem .65rem .3rem;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--od-faint);
}
body.od .sidebar-link {
    gap: .65rem;
    padding: .44rem .65rem;
    margin: 1px 0;
    border-left: 0;
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 500;
    color: var(--od-ink);
}
body.od .sidebar-link .od-ico { color: var(--od-muted); }
body.od .sidebar-link:hover { background: var(--od-cloud); color: var(--od-ink); border-left: 0; }
body.od .sidebar-link:hover .od-ico { color: var(--od-ink); }
body.od .sidebar-link.active { background: var(--od-tint); color: var(--od-blue); font-weight: 600; }
body.od .sidebar-link.active .od-ico { color: var(--od-blue); }
body.od .od-count {
    margin-left: auto;
    min-width: 20px;
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    text-align: center;
    background: var(--od-blue);
    color: #fff;
}
body.od .od-count.is-warn { background: var(--od-queued); }

body.od .sidebar-footer { border-top: 1px solid var(--od-line); padding: .75rem; }
body.od .od-me {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem; border-radius: var(--od-radius); background: var(--od-cloud);
}
body.od .od-avatar {
    width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--od-blue); color: #fff; font-size: .72rem; font-weight: 600;
}
body.od .od-me-name { font-size: .82rem; font-weight: 600; color: var(--od-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.od .od-me-sub { font-size: .72rem; color: var(--od-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.od .od-me > .od-avatar, body.od .od-me > .od-icon-btn, body.od .od-me > form { flex: none; }
body.od:not(.od-admin) .od-me { gap: .5rem; }
body.od:not(.od-admin) .od-me .od-icon-btn { width: 28px; height: 28px; }
body.od .od-me-text { min-width: 0; flex: 1; }
body.od .od-icon-btn {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid transparent; background: transparent; color: var(--od-muted);
    cursor: pointer; padding: 0; text-decoration: none;
}
body.od .od-icon-btn:hover { background: var(--od-paper); border-color: var(--od-line); color: var(--od-ink); text-decoration: none; }

body.od .sidebar-close-btn { border-color: var(--od-line); color: var(--od-muted); border-radius: 8px; }

/* -- Shell: top bar ------------------------------------------------------- */
body.od .dash-main { padding: 0; background: var(--od-cloud); display: flex; flex-direction: column; }
body.od .od-topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem 2.5rem;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--od-line);
}
body.od .od-search {
    display: flex; align-items: center; gap: .6rem;
    width: min(420px, 100%);
    padding: .5rem .75rem;
    border-radius: var(--od-radius);
    border: 1px solid transparent;
    background: var(--od-cloud);
    color: var(--od-faint);
    font: inherit; font-size: .84rem; text-align: left;
    cursor: pointer;
}
body.od .od-search:hover { border-color: var(--od-line); }
body.od .od-search span { flex: 1; }
body.od .od-kbd {
    font-family: var(--font); font-size: .7rem; color: var(--od-faint);
    padding: .1rem .4rem; border-radius: 6px; border: 1px solid var(--od-line); background: var(--od-paper);
}
body.od .od-spacer { flex: 1; }
body.od .od-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .65rem; border-radius: 999px;
    font-size: .75rem; font-weight: 500; white-space: nowrap;
}
body.od .od-chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
body.od .od-chip.is-live { background: var(--od-tint); color: var(--od-blue); }
body.od .od-chip.is-pending { background: var(--od-queued-tint); color: var(--od-queued); }
body.od .od-bell { position: relative; border: 1px solid var(--od-line); width: 36px; height: 36px; }
body.od .od-bell .od-dot {
    position: absolute; top: 7px; right: 8px; width: 7px; height: 7px;
    border-radius: 999px; background: var(--od-queued); border: 2px solid #fff;
}

body.od .od-content { padding: 2rem 2.5rem 3rem; flex: 1; min-width: 0; }

/* -- Command palette ------------------------------------------------------ */
.od-palette[hidden] { display: none; }
.od-palette {
    position: fixed; inset: 0; z-index: 99990;
    display: flex; justify-content: center; align-items: flex-start;
    padding: 12vh 1rem 1rem;
    background: rgba(15, 34, 54, .32);
}
.od-palette-card {
    width: min(560px, 100%);
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 30px 70px -10px rgba(15, 34, 54, .35);
    font-family: "Manrope", "Source Sans 3", system-ui, sans-serif;
}
.od-palette-input {
    display: flex; align-items: center; gap: .65rem;
    padding: .9rem 1.1rem; border-bottom: 1px solid #e2e8ef; color: #8a99a8;
}
.od-palette-input input {
    flex: 1; border: 0 !important; outline: 0 !important; box-shadow: none !important;
    padding: 0 !important; font: inherit; font-size: 1rem; color: #0f2236; background: transparent;
}
.od-palette-list { max-height: 50vh; overflow-y: auto; padding: .4rem; margin: 0; list-style: none; }
.od-palette-list a {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem .7rem; border-radius: 9px;
    color: #0f2236; font-size: .9rem; text-decoration: none;
}
.od-palette-list a .od-ico { color: #5a6b7d; }
.od-palette-list a small { margin-left: auto; color: #8a99a8; font-size: .75rem; }
.od-palette-list a.is-active, .od-palette-list a:hover { background: #e8f3fc; color: #1273c4; text-decoration: none; }
.od-palette-list a.is-active .od-ico { color: #1273c4; }
.od-palette-empty { padding: 1.4rem; text-align: center; color: #8a99a8; font-size: .88rem; }

/* -- Flash messages ------------------------------------------------------- */
body.od .alert {
    border-radius: var(--od-radius);
    border: 1px solid transparent;
    border-left-width: 1px;
    font-size: .88rem;
    padding: .8rem 1rem;
    margin-bottom: 1.25rem;
}
body.od .alert.success { background: var(--od-ok-tint); color: #0c6b49; border-color: rgba(20, 156, 107, .2); }
body.od .alert.error   { background: var(--od-bad-tint); color: #9b2c1f; border-color: rgba(208, 66, 47, .2); }
body.od .alert.warning { background: var(--od-queued-tint); color: #8a5d05; border-color: rgba(201, 138, 11, .25); }
body.od .alert.info    { background: var(--od-tint); color: var(--od-blue-dark); border-color: rgba(18, 115, 196, .18); }

/* -- Page header ---------------------------------------------------------- */
body.od .dash-header { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.5rem; align-items: flex-end; }
body.od .dash-header h1 {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    display: flex; align-items: center; gap: .6rem;
}
body.od .dash-header h1 > i { font-size: .7em; color: var(--od-blue) !important; }
body.od .dash-header .subtitle { font-size: .95rem; color: var(--od-muted); margin-top: .35rem; max-width: 70ch; }

/* -- Buttons -------------------------------------------------------------- */
body.od .btn {
    font-family: var(--font);
    font-weight: 500;
    font-size: .86rem;
    letter-spacing: -0.005em;
    border-width: 1px;
    border-radius: var(--od-radius);
    min-height: 38px;
    padding: .55rem 1rem;
    box-shadow: var(--od-shadow);
}
body.od .btn-sm { min-height: 32px; padding: .4rem .75rem; font-size: .8rem; border-radius: 8px; }
body.od .btn-lg { min-height: 46px; padding: .75rem 1.3rem; font-size: .95rem; }
body.od .btn-secondary { background: var(--od-ink); border-color: var(--od-ink); }
body.od .btn-outline { background: var(--od-paper); color: var(--od-ink); border-color: var(--od-line); }
body.od .btn-outline:hover { background: var(--od-cloud); color: var(--od-ink); border-color: #cfd8e2; }
body.od .btn-danger { background: var(--od-bad); border-color: var(--od-bad); }
body.od .btn-outline-light { background: var(--od-paper); color: var(--od-ink); border-color: var(--od-line); }
body.od .btn-outline-light:hover { background: var(--od-cloud); color: var(--od-ink); }

/* -- Panels, stats, badges, tables --------------------------------------- */
body.od .panel {
    border-radius: var(--od-radius-lg);
    border-color: var(--od-line);
    box-shadow: var(--od-shadow);
    padding: 1.4rem 1.5rem;
}
body.od .panel[style*="border-top"] { border-top-width: 1px !important; border-top-color: var(--od-line) !important; }
body.od .panel-accent { border-left: 1px solid var(--od-line); }
body.od .panel-header { border-bottom-color: var(--od-line); padding-bottom: .8rem; margin-bottom: 1.1rem; }
body.od .panel-header h2, body.od .panel-header h3 { font-size: 1.02rem !important; font-weight: 600; }
body.od .panel-header h2 > i, body.od .panel-header h3 > i { color: var(--od-muted); font-size: .9em; }

body.od .stats-grid { gap: 0; background: var(--od-paper); border: 1px solid var(--od-line); border-radius: var(--od-radius-lg); overflow: hidden; }
body.od .stat-card { border: 0; border-left: 1px solid var(--od-line); border-radius: 0; box-shadow: none; background: transparent; }
body.od .stat-card:first-child { border-left: 0; }
body.od .stat-card-icon { border-radius: 10px; }
body.od .stat-label { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--od-muted); }
body.od .stat-value { font-weight: 600; letter-spacing: -0.03em; color: var(--od-ink); }

body.od .badge {
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: .74rem;
    padding: .25rem .6rem;
}

body.od .table-wrap { border-radius: var(--od-radius); }
body.od .table th {
    background: var(--od-cloud);
    border-bottom: 1px solid var(--od-line);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: .76rem;
    color: var(--od-muted);
}
body.od .table td { border-bottom-color: var(--od-line); color: var(--od-ink); }
body.od .table tbody tr:hover td { background: #f8fafc; }

/* -- Forms ---------------------------------------------------------------- */
body.od label { font-weight: 500; color: var(--od-ink); }
body.od input[type="text"], body.od input[type="email"], body.od input[type="password"],
body.od input[type="number"], body.od input[type="url"], body.od input[type="search"],
body.od input[type="tel"], body.od input[type="date"], body.od select, body.od textarea {
    font-family: var(--font);
    border: 1px solid var(--od-line);
    border-radius: var(--od-radius);
    background-color: var(--od-paper);
    font-size: .9rem;
}
body.od input:focus, body.od select:focus, body.od textarea:focus {
    border-color: var(--od-blue);
    box-shadow: 0 0 0 3px rgba(18, 115, 196, .15);
}

/* -- Global dialogs & toasts (restyle of the shared Dialog system) ------- */
body.od .cDialog-card, body.od .cNotify-toast { font-family: var(--font); border-radius: 16px; }
body.od .cDialog-head.cdh-blue { background: var(--od-blue); }
body.od .cDialog-head.cdh-red { background: var(--od-bad); }
body.od .cDialog-btn { border-radius: 10px; font-weight: 500; }
body.od .cDialog-btn-primary { background: var(--od-blue); }
body.od .cDialog-btn-danger { background: var(--od-bad); }
body.od .cDialog-inp { border-radius: 10px; }
body.od .cDialog-inp:focus { border-color: var(--od-blue); }
body.od .cNotify-toast.cn-info { border-left-color: var(--od-blue); }
body.od .cn-info .cNotify-ico { color: var(--od-blue); }
body.od .cn-info .cNotify-bar { background: var(--od-blue); }

/* -- Mobile --------------------------------------------------------------- */
body.od .dash-mobile-topbar {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--od-line);
}
body.od .dash-mobile-brand-text { color: var(--od-ink); }
body.od .dash-mobile-brand-text small { color: var(--od-faint); }
body.od .dash-hamburger { border-color: var(--od-line); border-radius: 10px; }
body.od .dash-hamburger span { background: var(--od-ink); }
body.od .dash-sidebar-backdrop { background: rgba(15, 34, 54, .35); }

@media (max-width: 960px) {
    body.od .sidebar { border-right: 1px solid var(--od-line) !important; }
    body.od .od-topbar { position: static; padding: .6rem 1rem; }
    body.od .od-search { width: auto; flex: 1; }
    body.od .od-search .od-kbd, body.od .od-hide-sm { display: none; }
    body.od .od-content { padding: 1.25rem 1rem 2rem; }
    body.od .stats-grid { grid-template-columns: 1fr 1fr; }
    body.od .stat-card { border-left: 0; border-top: 1px solid var(--od-line); }
}

@media (prefers-reduced-motion: reduce) {
    body.od *, body.od *::before, body.od *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Page components for redesigned views (app/Views/upgrade/...)
   ========================================================================== */
body.od .od-page { display: flex; flex-direction: column; gap: 1.5rem; }
body.od .od-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
body.od .od-head h1 { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: var(--od-ink); }
body.od .od-head p { margin: .4rem 0 0; color: var(--od-muted); font-size: .98rem; }
body.od .od-crumb { font-size: .82rem; color: var(--od-faint); margin-bottom: .35rem; }
body.od .od-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

body.od .od-panel { background: var(--od-paper); border: 1px solid var(--od-line); border-radius: var(--od-radius-lg); box-shadow: var(--od-shadow); min-width: 0; }
body.od .od-panel-pad { padding: 1.35rem 1.5rem; }
body.od .od-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.1rem 1.5rem; }
body.od .od-panel-head h2, body.od .od-panel h2 { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em; color: var(--od-ink); }
body.od .od-panel-sub { font-size: .78rem; color: var(--od-faint); margin-top: .15rem; }
body.od .od-link { font-size: .86rem; font-weight: 500; color: var(--od-blue); text-decoration: none; }
body.od .od-link:hover { text-decoration: underline; }

body.od .od-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--od-paper); border: 1px solid var(--od-line); border-radius: var(--od-radius-lg); box-shadow: var(--od-shadow); }
body.od .od-metric { padding: 1.15rem 1.4rem; border-left: 1px solid var(--od-line); min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
body.od .od-metric:first-child { border-left: 0; }
body.od .od-metric-label { font-size: .84rem; color: var(--od-muted); }
body.od .od-metric-value { font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; color: var(--od-ink); font-variant-numeric: tabular-nums; }
body.od .od-metric-sub { font-size: .76rem; color: var(--od-faint); }
body.od .od-metric-sub.is-ok { color: var(--od-ok); font-weight: 500; }
body.od .od-metric-sub.is-warn { color: var(--od-queued); font-weight: 500; }
body.od .od-metric-sub.is-bad { color: var(--od-bad); font-weight: 500; }

body.od .od-meter { height: 6px; border-radius: 999px; background: var(--od-cloud); overflow: hidden; }
body.od .od-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--od-blue); }
body.od .od-meter.is-warn > span { background: var(--od-queued); }

body.od .od-status { letter-spacing: 0; line-height: 1.3; display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .6rem .22rem .5rem; border-radius: 999px; font-size: .76rem; font-weight: 500; white-space: nowrap; }
body.od .od-status::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
body.od .od-status.is-ok { background: var(--od-ok-tint); color: var(--od-ok); }
body.od .od-status.is-queued { background: var(--od-queued-tint); color: var(--od-queued); }
body.od .od-status.is-bad { background: var(--od-bad-tint); color: var(--od-bad); }
body.od .od-status.is-info { background: var(--od-tint); color: var(--od-blue); }
body.od .od-status.is-muted { background: var(--od-cloud); color: var(--od-muted); }

body.od .od-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.5rem; align-items: stretch; }

body.od .od-table-wrap { overflow-x: auto; }
body.od .od-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
body.od .od-table th { text-align: left; font-size: .76rem; font-weight: 500; color: var(--od-muted); background: var(--od-cloud); padding: .6rem 1.5rem; border-top: 1px solid var(--od-line); white-space: nowrap; }
body.od .od-table td { padding: .85rem 1.5rem; border-top: 1px solid var(--od-line); color: var(--od-muted); vertical-align: middle; }
body.od .od-table td.is-strong { color: var(--od-ink); font-weight: 500; }
body.od .od-table td.is-ink { color: var(--od-ink); }
body.od .od-table td.is-trunc { max-width: 1px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.od .od-table tbody tr:hover td { background: #fafcfd; }
body.od .od-empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--od-muted); font-size: .9rem; border-top: 1px solid var(--od-line); }

body.od .od-kv { display: flex; align-items: center; gap: .75rem; }
body.od .od-kv-text { flex: 1; min-width: 0; }
body.od .od-kv-label { font-size: .76rem; color: var(--od-faint); }
body.od .od-kv-value { font-size: .95rem; font-weight: 500; color: var(--od-ink); overflow-wrap: anywhere; }
body.od .od-divider { height: 1px; background: var(--od-line); border: 0; margin: 0; }

body.od .od-keybox { display: flex; align-items: center; gap: .5rem; padding: .75rem .9rem; border-radius: var(--od-radius); background: var(--od-cloud); font-family: var(--mono); font-size: .86rem; color: var(--od-ink); overflow: hidden; }
body.od .od-keybox span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body.od .od-note { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1.1rem; border-radius: 12px; font-size: .88rem; }
body.od .od-note .od-ico { margin-top: 1px; }
body.od .od-note strong { display: block; font-weight: 600; }
body.od .od-note.is-warn { background: var(--od-queued-tint); color: #7a5405; }
body.od .od-note.is-ok { background: var(--od-ok-tint); color: #0c6b49; }
body.od .od-note.is-info { background: var(--od-tint); color: var(--od-blue-dark); }

body.od .od-legend { display: flex; gap: 1rem; font-size: .78rem; color: var(--od-muted); }
body.od .od-legend span { display: inline-flex; align-items: center; gap: .4rem; }
body.od .od-legend i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
body.od .od-chart { width: 100%; height: auto; display: block; }
body.od .od-chart text { font-family: var(--font); font-size: 12px; fill: var(--od-faint); }
body.od .od-chart .is-today { fill: var(--od-ink); font-weight: 600; }

@media (max-width: 1100px) {
    body.od .od-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    body.od .od-metrics { grid-template-columns: 1fr 1fr; }
    body.od .od-metric:nth-child(3) { border-left: 0; }
    body.od .od-metric:nth-child(n+3) { border-top: 1px solid var(--od-line); }
    body.od .od-table th, body.od .od-table td { padding-left: 1rem; padding-right: 1rem; }
    body.od .od-panel-head, body.od .od-panel-pad { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* -- Filters, pager ------------------------------------------------------- */
body.od .od-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.od .od-filters { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: 1rem 1.5rem; }
body.od .od-filter { position: relative; display: block; margin: 0; flex: 0 0 auto; }
body.od .od-filter select, body.od .od-filter input { min-height: 38px; padding: .45rem .75rem; font-size: .86rem; width: auto; min-width: 150px; }
body.od .od-filter select { padding-right: 2rem; }
body.od .od-filter-search { flex: 1 1 240px; }
body.od .od-filter-search .od-ico { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--od-faint); pointer-events: none; }
body.od .od-filter-search input { width: 100%; padding-left: 2.2rem; background: var(--od-cloud); border-color: transparent; }
body.od .od-filter-search input:focus { background: var(--od-paper); }
body.od .od-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.5rem; border-top: 1px solid var(--od-line); font-size: .84rem; color: var(--od-muted); }
body.od .od-pages { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
body.od .od-page-n { min-width: 32px; height: 32px; padding: 0 .5rem; display: inline-grid; place-items: center; border-radius: 8px; color: var(--od-ink); text-decoration: none; font-size: .84rem; }
body.od .od-page-n:hover { background: var(--od-cloud); text-decoration: none; }
body.od .od-page-n.is-on { background: var(--od-tint); color: var(--od-blue); font-weight: 600; }
body.od .od-page-gap { color: var(--od-faint); padding: 0 .2rem; }

/* -- Drawer --------------------------------------------------------------- */
.od-drawer-bd[hidden] { display: none; }
.od-drawer-bd { position: fixed; inset: 0; z-index: 9990; background: rgba(15, 34, 54, 0); transition: background .2s ease; }
.od-drawer-bd.is-open { background: rgba(15, 34, 54, .28); }
.od-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%);
    display: flex; flex-direction: column; background: #fff;
    box-shadow: -24px 0 60px -20px rgba(15, 34, 54, .3);
    transform: translateX(100%); transition: transform .22s ease;
    font-family: "Manrope", "Source Sans 3", system-ui, sans-serif;
}
.od-drawer-bd.is-open .od-drawer { transform: translateX(0); }
.od-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid #e2e8ef; }
.od-drawer-head h2 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; color: #0f2236; }
.od-drawer-body { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; }
body.od .od-note.is-bad { background: var(--od-bad-tint); color: #8f2a1d; }
body.od .od-err { display: block; margin-top: .4rem; font-family: var(--mono); font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
body.od .od-dl { margin: 0; display: grid; gap: .1rem; }
body.od .od-dl > div { display: grid; grid-template-columns: 130px 1fr; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--od-line); font-size: .86rem; }
body.od .od-dl dt { color: var(--od-muted); }
body.od .od-dl dd { margin: 0; color: var(--od-ink); overflow-wrap: anywhere; }
body.od .od-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--od-cloud); margin-bottom: .75rem; }
body.od .od-seg button { border: 0; background: transparent; font: inherit; font-size: .82rem; color: var(--od-muted); padding: .35rem .8rem; border-radius: 8px; cursor: pointer; }
body.od .od-seg button.is-on { background: var(--od-paper); color: var(--od-ink); box-shadow: 0 1px 3px rgba(15, 34, 54, .1); }
body.od .od-preview { width: 100%; min-height: 360px; border: 1px solid var(--od-line); border-radius: 12px; background: #fff; }
body.od .od-preview[hidden], body.od .od-source[hidden] { display: none; }
body.od .od-source { margin: 0; max-height: 380px; overflow: auto; padding: 1rem; border-radius: 12px; background: var(--od-cloud); font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
body.od .od-file { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem .8rem; border: 1px solid var(--od-line); border-radius: 10px; color: var(--od-ink); font-size: .86rem; text-decoration: none; }
body.od .od-file:hover { background: var(--od-cloud); text-decoration: none; }
body.od .od-file small { color: var(--od-faint); }

/* -- Code & key blocks ---------------------------------------------------- */
body.od .od-code { margin: 0; padding: .85rem 1rem; border-radius: var(--od-radius); background: var(--od-cloud); color: var(--od-ink); font-family: var(--mono); font-size: .84rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; border: 0; }
body.od .od-newkey { background: var(--od-ok-tint); border-color: rgba(20, 156, 107, .35); }
body.od .od-newkey h2 { color: var(--od-ok); }
body.od .od-newkey .od-keybox span { white-space: normal; overflow-wrap: anywhere; }

/* -- Template cards ------------------------------------------------------- */
body.od .od-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
body.od .od-tpl { overflow: hidden; display: flex; flex-direction: column; }
body.od .od-tpl[hidden] { display: none; }
body.od .od-tpl-thumb { display: block; position: relative; height: 180px; overflow: hidden; background: var(--od-cloud); border-bottom: 1px solid var(--od-line); }
body.od .od-tpl-thumb iframe { position: absolute; top: 0; left: 0; width: 250%; height: 250%; border: 0; transform: scale(.4); transform-origin: 0 0; pointer-events: none; background: #fff; }
body.od .od-tpl-body { padding: 1rem 1.15rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
body.od .od-tpl-name { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.od .od-tpl-subject { font-size: .84rem; color: var(--od-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.od .od-tpl-vars { display: flex; flex-wrap: wrap; gap: .3rem; }
body.od .od-tpl-vars code { font-size: .74rem; color: var(--od-blue); background: var(--od-tint); padding: .12rem .45rem; border-radius: 6px; }
body.od .od-tpl-foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .76rem; color: var(--od-faint); }
body.od .od-danger-text { color: var(--od-bad) !important; }
@media (max-width: 760px) { body.od section[aria-label="Using templates via API"] { grid-template-columns: 1fr !important; } }

/* -- Forms (new design) --------------------------------------------------- */
body.od .od-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
body.od .od-form fieldset[disabled] { opacity: .55; }
body.od .od-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.25rem; }
body.od .od-field { display: flex; flex-direction: column; gap: .4rem; margin: 0; font-weight: 400; min-width: 0; }
body.od .od-field > span { font-size: .84rem; font-weight: 500; color: var(--od-ink); }
body.od .od-field > small { font-size: .76rem; color: var(--od-faint); }
body.od .od-field input, body.od .od-field select, body.od .od-field textarea { width: 100%; min-height: 42px; }
body.od .od-span-2 { grid-column: span 2; }
body.od .od-span-4 { grid-column: 1 / -1; }
@media (max-width: 760px) { body.od .od-form-grid { grid-template-columns: 1fr; } body.od .od-span-2 { grid-column: auto; } }

/* -- Tabs and dark code --------------------------------------------------- */
body.od .od-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--od-cloud); align-self: flex-start; }
body.od .od-tabs button { border: 0; background: transparent; font: inherit; font-size: .82rem; color: var(--od-muted); padding: .35rem .75rem; border-radius: 8px; cursor: pointer; }
body.od .od-tabs button.is-on { background: var(--od-paper); color: var(--od-ink); box-shadow: 0 1px 3px rgba(15, 34, 54, .1); }
body.od .od-codebar { display: flex; align-items: center; justify-content: space-between; padding: .45rem .5rem .45rem .9rem; background: #0b1522; border-radius: 12px 12px 0 0; color: #98a9bb; font-size: .78rem; font-weight: 500; }
body.od .od-code-dark { background: #0b1522; color: #e2e8ef; border-radius: 0 0 12px 12px; white-space: pre; overflow-x: auto; overflow-wrap: normal; font-size: .8rem; }
body.od .smtp-panel[hidden] { display: none; }

/* -- Steps, periods, rows ------------------------------------------------- */
body.od .od-step-dot { width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; display: grid; place-items: center; font-size: .82rem; font-weight: 600; background: var(--od-cloud); color: var(--od-muted); }
body.od .od-step-dot.is-on { background: var(--od-blue); color: #fff; }
body.od .od-step-dot.is-done { background: var(--od-ok); color: #fff; }
body.od .od-periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .7rem; }
body.od .od-period { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .8rem .95rem; border: 1px solid var(--od-line); border-radius: 12px; background: var(--od-paper); cursor: pointer; text-align: left; font: inherit; color: var(--od-ink); transition: border-color .15s, background .15s; }
body.od .od-period:hover { border-color: #c5d3e0; }
body.od .od-period.is-on, body.od .od-period.sel { border-color: var(--od-blue); box-shadow: inset 0 0 0 1px var(--od-blue); background: var(--od-tint); }
body.od .od-period-label { font-size: .82rem; font-weight: 500; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
body.od .od-period-label em { font-style: normal; font-size: .66rem; font-weight: 600; color: #fff; background: var(--od-ok); padding: .08rem .45rem; border-radius: 999px; }
body.od .od-period strong { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
body.od .od-period small { font-size: .74rem; color: var(--od-faint); }
body.od .od-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.5rem; border-top: 1px solid var(--od-line); }
body.od .od-inline-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
body.od .od-inline-form select { width: auto; min-height: 38px; padding: .45rem 2rem .45rem .75rem; font-size: .86rem; }
body.od .od-tile { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--od-tint); color: var(--od-blue); }
body.od .od-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
body.od .od-checks li { position: relative; padding-left: 1.6rem; font-size: .92rem; color: var(--od-ink); }
body.od .od-checks li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 10px; height: 6px; border-left: 2px solid var(--od-ok); border-bottom: 2px solid var(--od-ok); transform: rotate(-45deg); }
body.od .od-radio-tab { display: inline-flex; margin: 0; cursor: pointer; font-weight: 400; }
body.od .od-radio-tab input { position: absolute; opacity: 0; pointer-events: none; }
body.od .od-radio-tab span { font-size: .84rem; color: var(--od-muted); padding: .38rem .8rem; border-radius: 8px; }
body.od .od-radio-tab input:checked + span { background: var(--od-paper); color: var(--od-ink); box-shadow: 0 1px 3px rgba(15, 34, 54, .1); }
body.od .od-radio-tab input:focus-visible + span { outline: 2px solid var(--od-blue); }
body.od .od-panel-focus { border-color: var(--od-blue); box-shadow: 0 0 0 1px var(--od-blue); }
body.od .od-bars { display: grid; gap: .7rem; }
body.od .od-bar-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 60px; gap: 1rem; align-items: center; font-size: .88rem; }
body.od .od-bar-row strong { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* -- KYC detail modal (shared partial) in the new look -------------------- */
body.od .identity-modal__backdrop { background: rgba(15, 34, 54, .4); backdrop-filter: blur(3px); }
body.od .identity-modal__panel { border-radius: 18px; background: var(--od-cloud); font-family: var(--font); border: 0; }
body.od .identity-modal__header { background: var(--od-paper); color: var(--od-ink); border-bottom: 1px solid var(--od-line); }
body.od .identity-modal__header:after { display: none; }
body.od .identity-modal__header h2 { color: var(--od-ink); font-weight: 600; }
body.od .identity-modal__eyebrow { color: var(--od-blue); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .8rem; }
body.od .identity-modal__header p { color: var(--od-muted); }
body.od .identity-modal__close { border: 1px solid var(--od-line); background: var(--od-paper); color: var(--od-muted); border-radius: 10px; }
body.od .identity-field { border-radius: 10px; border-color: var(--od-line); }
body.od .identity-field dt { text-transform: none; letter-spacing: 0; }
body.od .identity-address { background: var(--od-tint); color: var(--od-ink); border-left: 0; border-radius: 12px; }
body.od .identity-address span { color: var(--od-blue); text-transform: none; letter-spacing: 0; }
body.od .identity-chip { border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 500; }
body.od .identity-dossier__portrait { border-radius: 14px; background: var(--od-paper); }
body.od .identity-modal__footer button { background: var(--od-blue); border-radius: 10px; }

/* -- Address field, choice cards, numbered steps -------------------------- */
body.od .od-addr { display: flex; align-items: stretch; border: 1px solid var(--od-line); border-radius: var(--od-radius); overflow: hidden; background: var(--od-paper); }
body.od .od-addr:focus-within { border-color: var(--od-blue); box-shadow: 0 0 0 3px rgba(18, 115, 196, .15); }
body.od .od-addr input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; border-radius: 0; font-family: var(--mono); }
body.od .od-addr span { display: flex; align-items: center; padding: 0 .9rem; background: var(--od-cloud); color: var(--od-muted); font-family: var(--mono); font-size: .88rem; border-left: 1px solid var(--od-line); white-space: nowrap; }
body.od .od-avail { min-height: 1.2rem; font-size: .84rem; color: var(--od-muted); }
body.od .od-avail.is-ok { color: var(--od-ok); }
body.od .od-avail.is-bad { color: var(--od-bad); }
body.od .od-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
body.od .od-choice { display: flex; flex-direction: column; gap: .35rem; text-align: left; padding: 1rem 1.1rem; border: 1px solid var(--od-line); border-radius: 14px; background: var(--od-paper); cursor: pointer; font: inherit; color: var(--od-ink); }
body.od .od-choice strong { font-weight: 600; font-size: .98rem; display: flex; align-items: center; gap: .5rem; }
body.od .od-choice strong em { font-style: normal; font-size: .7rem; font-weight: 600; color: var(--od-blue); background: var(--od-tint); padding: .1rem .5rem; border-radius: 999px; }
body.od .od-choice span { font-size: .86rem; color: var(--od-muted); line-height: 1.5; }
body.od .od-choice.sel { border-color: var(--od-blue); box-shadow: inset 0 0 0 1px var(--od-blue); background: var(--od-tint); }
body.od .od-mono { font-family: var(--mono); font-size: .82rem; }
body.od .od-wrap { overflow-wrap: anywhere; word-break: break-word; min-width: 220px; }
body.od .od-warn-text { color: var(--od-queued); }
body.od .od-step-dot.is-warn { background: var(--od-queued-tint); color: var(--od-queued); }
body.od .od-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: .7rem; }
body.od .od-steps li { counter-increment: s; position: relative; padding-left: 2.2rem; font-size: .9rem; color: var(--od-ink); line-height: 1.5; }
body.od .od-steps li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid var(--od-blue); color: var(--od-blue); font-size: .76rem; font-weight: 600; display: grid; place-items: center; }
@media (max-width: 760px) { body.od .od-choice-grid { grid-template-columns: 1fr; } }

/* -- Buy rows, summary, pay choice, checkbox ------------------------------ */
body.od .od-buy-list { display: grid; gap: .5rem; }
body.od .od-buy-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; grid-template-rows: auto auto; column-gap: .75rem; row-gap: .1rem; align-items: center; padding: .7rem .8rem; border: 1px solid var(--od-line); border-radius: 12px; }
body.od .od-buy-row.is-selected { border-color: var(--od-blue); background: var(--od-tint); }
body.od .od-buy-row .od-check { grid-row: 1; grid-column: 1; }
body.od .od-buy-row small { grid-row: 2; grid-column: 1; font-size: .74rem; color: var(--od-faint); padding-left: 1.65rem; }
body.od .od-buy-row input[type="number"] { grid-row: 1 / span 2; grid-column: 2; min-height: 36px; padding: .35rem .5rem; text-align: center; }
body.od .od-buy-row strong { grid-row: 1 / span 2; grid-column: 3; text-align: right; font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
body.od .od-check { display: inline-flex; align-items: center; gap: .6rem; margin: 0; cursor: pointer; font-weight: 500; flex-direction: row; }
body.od .od-check input { width: 17px; height: 17px; accent-color: var(--od-blue); margin: 0; }
body.od .od-summary { border-radius: 12px; background: var(--od-cloud); padding: .8rem 1rem; display: grid; gap: .4rem; font-size: .86rem; }
body.od .od-summary > div { display: flex; justify-content: space-between; color: var(--od-muted); }
body.od .od-summary strong { color: var(--od-ink); font-weight: 600; }
body.od .od-summary .is-total strong { font-size: 1.15rem; }
body.od .od-pay { margin: 0; cursor: pointer; flex-direction: row; }
body.od .od-pay input { position: absolute; opacity: 0; }
body.od .od-pay span { display: flex; align-items: center; justify-content: center; width: 100%; padding: .6rem; border: 1px solid var(--od-line); border-radius: 10px; font-size: .86rem; font-weight: 500; color: var(--od-ink); }
body.od .od-pay input:checked + span { border-color: var(--od-blue); box-shadow: inset 0 0 0 1px var(--od-blue); background: var(--od-tint); color: var(--od-blue); }
body.od .od-pay input:focus-visible + span { outline: 2px solid var(--od-blue); outline-offset: 2px; }
/* KYC widget-code modal (shared partial) */
body.od #kycWidgetCodeModal button, body.od #kycWidgetCodeModal input, body.od #kycWidgetCodeModal select { font-family: var(--font); }
body.od .btn:disabled, body.od .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* -- Chips, message list, centred modal ----------------------------------- */
body.od .od-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
body.od .od-qchip { border: 1px solid var(--od-line); background: var(--od-paper); border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .82rem; font-weight: 500; color: var(--od-ink); cursor: pointer; }
body.od .od-qchip.sel, body.od .od-qchip:hover { border-color: var(--od-blue); background: var(--od-tint); color: var(--od-blue); }
body.od .od-msgs { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--od-line); display: grid; gap: .4rem; }
body.od .od-msgs[hidden] { display: none; }
body.od .od-msgs > div { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); gap: .75rem; align-items: center; font-size: .82rem; }
.od-modal-bd { display: flex; align-items: center; justify-content: center; padding: 1rem; }
.od-modal-bd[hidden] { display: none; }
.od-modal { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 18px; box-shadow: 0 30px 70px -10px rgba(15, 34, 54, .35); transform: translateY(12px); opacity: 0; transition: transform .2s ease, opacity .2s ease; font-family: "Manrope", "Source Sans 3", system-ui, sans-serif; }
.od-modal-bd.is-open .od-modal { transform: none; opacity: 1; }

/* -- Responsive overrides (beat inline grid-template-columns on the pages) - */
@media (max-width: 1100px) {
    body.od .od-grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 900px) {
    body.od .od-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body.od .od-metric { border-left: 0 !important; border-top: 1px solid var(--od-line); }
    body.od .od-metric:nth-child(-n+2) { border-top: 0; }
    body.od .od-metric:nth-child(even) { border-left: 1px solid var(--od-line) !important; }
    body.od .ai-mode-managed { grid-template-columns: 1fr !important; }
    body.od section[aria-label="Using templates via API"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
    body.od .od-head { align-items: flex-start; }
    body.od .od-head h1 { font-size: 1.65rem; }
    body.od .od-actions { width: 100%; }
    body.od .od-actions > .btn, body.od .od-actions > form { flex: 1 1 auto; }
    body.od .od-actions > form .btn { width: 100%; }
    body.od .od-metric-value { font-size: 1.55rem; }
    body.od .od-panel-pad { padding: 1.1rem; }
    body.od .od-periods { grid-template-columns: 1fr 1fr; }
    body.od .od-inline-form { width: 100%; }
    body.od .od-inline-form .btn { flex: 1; }
    body.od .od-row { padding: .9rem 1.1rem; }
    body.od .od-msgs > div { grid-template-columns: 1fr auto; }
    body.od .od-bar-row { grid-template-columns: 90px minmax(0, 1fr) 44px; }
    body.od .od-dl > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* Off-canvas sidebar: shadow only while open (closed drawer leaked a grey strip) */
@media (max-width: 960px) {
  body.od .sidebar { box-shadow: none !important; }
  body.od .sidebar.open { box-shadow: 8px 0 40px rgba(15, 34, 54, .18) !important; }
}

/* -- Photography ------------------------------------------------------------
   od-hero: page intro card, copy left + photo right (photo on top on phones).
   od-photo: captioned photo card for side columns. Images live in
   public/assets/upgrade/img (optimised copies of /new_images). */
body.od .od-hero {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    background: var(--od-paper); border: 1px solid var(--od-line); border-radius: 20px;
    overflow: hidden; box-shadow: var(--od-shadow); min-height: 230px;
}
body.od .od-hero > .od-head {
    flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 2rem 2.25rem; gap: 1.25rem;
}
body.od .od-hero-media { position: relative; min-height: 200px; background: var(--od-cloud); }
body.od .od-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.od .od-hero-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 38%);
}
body.od .od-hero-tag {
    position: absolute; z-index: 1; right: 1rem; bottom: 1rem;
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
    border-radius: 999px; padding: .4rem .8rem; font-size: .78rem; font-weight: 500; color: var(--od-ink);
    box-shadow: 0 6px 20px rgba(15, 34, 54, .12);
}
body.od .od-hero-tag i { width: 7px; height: 7px; border-radius: 999px; background: #12a36d; }

body.od .od-photo {
    position: relative; margin: 0; border-radius: 16px; overflow: hidden;
    aspect-ratio: 16 / 10; background: var(--od-cloud); box-shadow: var(--od-shadow);
}
body.od .od-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.od .od-photo figcaption {
    position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.1rem 1rem; color: #fff;
    background: linear-gradient(180deg, rgba(8, 18, 30, 0) 0%, rgba(8, 18, 30, .78) 100%);
    display: flex; flex-direction: column; gap: .15rem;
}
body.od .od-photo figcaption strong { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
body.od .od-photo figcaption span { font-size: .82rem; color: rgba(255, 255, 255, .82); }

@media (max-width: 760px) {
    body.od .od-hero { grid-template-columns: minmax(0, 1fr); }
    body.od .od-hero-media { order: -1; min-height: 170px; }
    body.od .od-hero-media::after { background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 45%); }
    body.od .od-hero > .od-head { padding: 1.25rem 1.25rem 1.5rem; }
}

/* Phones: wide tables scroll sideways instead of crushing columns to "Re: S..." */
@media (max-width: 760px) {
    body.od .od-table-wrap { -webkit-overflow-scrolling: touch; }
    body.od .od-table-wrap > .od-table { min-width: 620px; }
    body.od .od-table th, body.od .od-table td { white-space: nowrap; }
}
/* od-photo with the caption under the image (for photos that carry their own artwork) */
body.od .od-photo.is-cap-below { display: flex; flex-direction: column; aspect-ratio: auto; background: var(--od-paper); border: 1px solid var(--od-line); }
body.od .od-photo.is-cap-below img { height: 190px; flex: none; }
body.od .od-photo.is-cap-below figcaption { position: static; background: none; color: var(--od-ink); padding: .9rem 1.1rem 1rem; }
body.od .od-photo.is-cap-below figcaption span { color: var(--od-muted); }
@media (max-width: 520px) {
    body.od .od-metrics[aria-label="Steps"] { grid-template-columns: minmax(0, 1fr) !important; }
    body.od .od-metrics[aria-label="Steps"] .od-metric { border-left: 0 !important; border-top: 1px solid var(--od-line); }
    body.od .od-metrics[aria-label="Steps"] .od-metric:first-child { border-top: 0; }
}

/* ==========================================================================
   REFINEMENT LAYER (v2): calm, borderless, Apple-Settings / Fluent feel.
   Everything above still applies; this block only overrides. Delete this
   block to return to the v1 look.
   Principles: one canvas, surfaces float on it with a hairline ring instead
   of borders; chrome (sidebar, top bar) sits on the canvas, not in white
   bands; radius grows with size (chip 999 / control 10 / panel 18).
   ========================================================================== */
body.od {
    --od-cloud: #f3f4f6;
    --od-fill: #f1f3f5;
    --od-ink: #0e1726;
    --od-muted: #5b6576;
    --od-faint: #8a93a3;
    --od-line: #e7e9ee;
    --od-tint: #eaf3fb;
    --od-ok: #13a06b;
    --od-ok-tint: #e7f6ef;
    --od-radius: 10px;
    --od-radius-lg: 18px;
    --od-ring: 0 0 0 1px rgba(14, 23, 38, .06);
    --od-shadow: 0 0 0 1px rgba(14, 23, 38, .05), 0 1px 2px rgba(14, 23, 38, .04), 0 4px 16px -8px rgba(14, 23, 38, .06);
    --od-lift: 0 0 0 1px rgba(14, 23, 38, .06), 0 1px 3px rgba(14, 23, 38, .08);
    font-size: 14.5px;
    background: var(--od-cloud);
}

/* Chrome on the canvas */
body.od .sidebar { background: var(--od-cloud); border-right: 0; }
body.od .sidebar-brand { padding: 1.35rem 1.25rem 1rem; }
body.od .sidebar-nav { padding: 0 .85rem 1rem; }
body.od .sidebar-section { padding: 1.1rem .7rem .35rem; font-size: .74rem; color: var(--od-faint); }
body.od .sidebar-link { padding: .42rem .7rem; border-radius: 9px; font-size: .87rem; font-weight: 450; color: #2b3444; }
body.od .sidebar-link .od-ico { color: #7a8494; }
body.od .sidebar-link:hover { background: rgba(14, 23, 38, .045); color: var(--od-ink); }
body.od .sidebar-link.active { background: var(--od-paper); color: var(--od-ink); font-weight: 550; box-shadow: var(--od-lift); }
body.od .sidebar-link.active .od-ico { color: var(--od-blue); }
body.od .sidebar-footer { border-top: 0; padding: .85rem; }
body.od .od-me { background: var(--od-paper); box-shadow: var(--od-ring); border-radius: 12px; }

body.od .dash-main { background: var(--od-cloud); }
body.od .od-topbar { background: rgba(243, 244, 246, .82); border-bottom: 0; padding: .9rem 2.5rem .5rem; }
body.od .od-search { background: var(--od-paper); box-shadow: var(--od-ring); border: 0; border-radius: 10px; }
body.od .od-search:hover { box-shadow: 0 0 0 1px rgba(14, 23, 38, .12); }
body.od .od-kbd { background: var(--od-fill); border: 0; }
body.od .od-bell { background: var(--od-paper); border: 0; box-shadow: var(--od-ring); border-radius: 10px; }
body.od .od-content { padding: 1.25rem 2.5rem 3.5rem; width: 100%; max-width: none; }

/* Page head: quieter, tighter */
body.od .od-page { gap: 1.25rem; }
body.od .od-head { margin-bottom: .5rem; }
body.od .od-head h1 { font-size: clamp(1.65rem, 2.3vw, 2.15rem); letter-spacing: -.035em; }
body.od .od-head p { font-size: .95rem; max-width: 64ch; }
body.od .od-crumb a { color: var(--od-muted); text-decoration: none; }
body.od .od-crumb a:hover { color: var(--od-blue); }

/* Surfaces: no borders, hairline ring */
body.od .od-panel, body.od .od-metrics, body.od .panel, body.od .stats-grid,
body.od .od-hero, body.od .od-photo.is-cap-below {
    border: 0; box-shadow: var(--od-shadow); border-radius: var(--od-radius-lg);
}
body.od .od-panel-pad { padding: 1.4rem 1.5rem; }
body.od .od-panel-head { padding: 1.15rem 1.5rem .9rem; }
body.od .od-panel-head h2, body.od .od-panel h2 { font-size: 1.02rem; letter-spacing: -.012em; }
body.od .od-panel-sub { font-size: .8rem; }

/* Two-column layouts keep their natural height (no stretched empty cards) */
body.od .od-grid-2 { align-items: start; gap: 1.25rem; }

/* Metrics: one grouped surface, inset dividers */
body.od .od-metric { padding: 1.2rem 1.4rem 1.25rem; border-left: 0 !important; position: relative; }
body.od .od-metric + .od-metric::before { content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; width: 1px; background: var(--od-line); }
body.od .od-metric-label { font-size: .8rem; }
body.od .od-metric-value { font-size: 1.85rem; letter-spacing: -.045em; }

/* Tables: flush, calm header, row rules */
body.od .od-table th { background: transparent; border-top: 0; border-bottom: 1px solid var(--od-line); font-size: .75rem; color: var(--od-faint); padding-top: .5rem; padding-bottom: .6rem; }
body.od .od-table td { border-top: 0; border-bottom: 1px solid var(--od-line); padding-top: .9rem; padding-bottom: .9rem; }
body.od .od-table tbody tr:last-child td { border-bottom: 0; }
body.od .od-table tbody tr:hover td { background: #fafbfc; }
body.od .od-empty { border-top: 0; }

/* Controls */
body.od .btn { border-radius: 10px; min-height: 36px; padding: .5rem .95rem; box-shadow: none; }
body.od .btn-sm { min-height: 30px; padding: .35rem .7rem; border-radius: 8px; }
body.od .btn-lg { min-height: 44px; padding: .7rem 1.25rem; }
body.od .btn-primary { box-shadow: 0 1px 2px rgba(18, 115, 196, .3), inset 0 1px 0 rgba(255, 255, 255, .12); }
body.od .btn-primary:hover { background: var(--od-blue-dark); border-color: var(--od-blue-dark); }
body.od .btn-outline, body.od .btn-outline-light { border-color: transparent; background: var(--od-paper); box-shadow: 0 0 0 1px rgba(14, 23, 38, .1), 0 1px 2px rgba(14, 23, 38, .04); }
body.od .btn-outline:hover, body.od .btn-outline-light:hover { background: #f8f9fb; border-color: transparent; }

body.od input[type="text"], body.od input[type="email"], body.od input[type="password"],
body.od input[type="number"], body.od input[type="url"], body.od input[type="search"],
body.od input[type="tel"], body.od input[type="date"], body.od select, body.od textarea {
    background-color: var(--od-fill); border-color: transparent; border-radius: 10px;
    transition: background-color .15s ease, box-shadow .15s ease;
}
body.od input:hover:not(:focus), body.od select:hover:not(:focus), body.od textarea:hover:not(:focus) { background-color: #eceef1; }
body.od input:focus, body.od select:focus, body.od textarea:focus { background-color: var(--od-paper); border-color: var(--od-blue); box-shadow: 0 0 0 3px rgba(18, 115, 196, .14); }

body.od .od-status { font-size: .74rem; padding: .2rem .55rem .2rem .45rem; }
body.od .od-note { border-radius: 14px; padding: .95rem 1.15rem; }

/* Photography */
body.od .od-photo { border-radius: var(--od-radius-lg); box-shadow: var(--od-shadow); }
body.od .od-hero { min-height: 250px; }
body.od .od-hero > .od-head { padding: 2.25rem 2.5rem; margin: 0; }
body.od .od-hero > .od-head h1 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
body.od .od-img-missing { display: none !important; }
body.od .od-hero:has(.od-img-missing) { grid-template-columns: minmax(0, 1fr); min-height: 0; }

/* Mobile chrome: one bar, canvas coloured */
@media (max-width: 960px) {
    body.od .sidebar { background: var(--od-cloud); border-right: 0 !important; }
    body.od .dash-mobile-topbar { background: rgba(243, 244, 246, .88); border-bottom: 1px solid rgba(14, 23, 38, .06); }
    body.od .dash-hamburger { border: 0; background: var(--od-paper); box-shadow: var(--od-ring); }
    body.od .od-topbar { background: transparent; padding: .85rem 1rem 0; }
    body.od .od-content { padding: 1rem 1rem 2.5rem; }
}
@media (max-width: 760px) {
    body.od .od-hero > .od-head { padding: 1.25rem 1.25rem 1.5rem; }
}
@media (max-width: 900px) { body.od .od-metric:nth-child(odd)::before { display: none; } }
@media (max-width: 520px) { body.od .od-metrics[aria-label="Steps"] .od-metric::before { display: none; } }

/* v2: selection tiles. Unselected = quiet filled well; selected = white, lifted, blue ring */
body.od .od-period, body.od .od-choice, body.od .od-buy-row, body.od .od-pay span, body.od .od-qchip {
    border: 0; background: var(--od-fill); box-shadow: none;
    transition: background-color .15s ease, box-shadow .15s ease;
}
body.od .od-period:hover, body.od .od-choice:hover, body.od .od-qchip:hover, body.od .od-pay:hover span { background: #e9ecf0; color: var(--od-ink); }
body.od .od-period.is-on, body.od .od-period.sel, body.od .od-choice.sel,
body.od .od-buy-row.is-selected, body.od .od-pay input:checked + span, body.od .od-qchip.sel {
    background: var(--od-paper); border: 0;
    box-shadow: 0 0 0 2px var(--od-blue), 0 4px 14px -6px rgba(18, 115, 196, .35);
}
body.od .od-pay input:checked + span, body.od .od-qchip.sel { color: var(--od-blue); }
body.od .od-period strong { font-size: 1.15rem; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
body.od .od-period small { color: var(--od-faint); }
body.od .od-periods { gap: .6rem; }
body.od .od-summary { background: var(--od-fill); border-radius: 12px; }
body.od .od-keybox, body.od .od-code { background: var(--od-fill); }
body.od .od-tabs { background: var(--od-fill); }
body.od .od-tabs button.is-on, body.od .od-radio-tab input:checked + span { box-shadow: var(--od-lift); }
body.od .od-tile { background: var(--od-tint); border-radius: 12px; }
@media (max-width: 960px) { body.od .od-topbar .od-spacer { display: none; } body.od .od-topbar .od-search { flex: 1; width: auto; } }
@media (max-width: 760px) { body.od .od-table td.is-trunc { max-width: 260px; width: auto; } }

/* 2-column form grid variant */
body.od .od-form-grid.od-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { body.od .od-form-grid.od-cols-2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   CLASSIC ADAPTER (v2): pages not yet rebuilt still render their classic
   markup inside the new shell. These rules bring that markup in line with
   the v2 look without touching the classic PHP files.
   ========================================================================== */
/* Page titles: no icon glued to the heading */
body.od .dash-header h1 > i { display: none; }
body.od .dash-header { margin-bottom: 1.25rem; }
body.od .dash-header h1 { font-size: clamp(1.65rem, 2.3vw, 2.15rem); letter-spacing: -.035em; }

/* Surfaces: accent stripes become the calm hairline surface */
body.od .panel[style*="border-top"] { border-top: 0 !important; }
body.od .panel[style*="border-left"] { border-left: 0 !important; }
body.od .panel[style*="linear-gradient"] { background: var(--od-paper) !important; }
body.od .panel.panel-soft { background: var(--od-fill); box-shadow: none; }
body.od .panel-header { border-bottom: 0; padding-bottom: .2rem; margin-bottom: .9rem; }
body.od .panel-header h2 > i, body.od .panel-header h3 > i { display: none; }

/* Labels: sentence case, no tracking */
body.od .od-content [style*="text-transform:uppercase"],
body.od .od-content [style*="text-transform: uppercase"] { text-transform: none !important; letter-spacing: 0 !important; }
body.od .form-label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .84rem; color: var(--od-ink); }
body.od .form-label > i { display: none; }
body.od .input-hint, body.od .form-hint { color: var(--od-faint); font-size: .78rem; }

/* Badges: soft pills */
body.od .badge-success { background: var(--od-ok-tint); color: var(--od-ok); }
body.od .badge-warning { background: var(--od-queued-tint); color: var(--od-queued); }
body.od .badge-danger { background: var(--od-bad-tint); color: var(--od-bad); }
body.od .badge-primary, body.od .badge-info { background: var(--od-tint); color: var(--od-blue); }
body.od .badge-muted { background: var(--od-fill); color: var(--od-muted); }

/* Tables inside classic panels */
body.od .table th { background: transparent; border-bottom: 1px solid var(--od-line); color: var(--od-faint); font-size: .75rem; }
body.od .table td { border-bottom-color: var(--od-line); }

/* Empty states and code */
body.od .empty-state { color: var(--od-muted); }
body.od .empty-state > i { color: #c3c9d2; }
body.od .code-block { background: #0b1522; color: #dfe7f1; border: 0; border-radius: 12px; font-size: .8rem; }
body.od .code-header { border-radius: 12px 12px 0 0; }

/* Stat cards: left-aligned numbers in ink */
body.od .stat-card { text-align: left; }
body.od .stat-value { color: var(--od-ink) !important; }

/* Full-width content: keep the 7-day chart a sensible height on wide screens */
body.od .od-chart { max-height: 280px; }

/* Fix: dark code blocks keep their dark surface (the v2 .od-code fill must not win) */
body.od .od-code.od-code-dark, body.od pre.od-code-dark { background: #0b1522; color: #e2e8ef; }

/* Sidebar back to the approved Figma look: white surface, hairline edge, tinted active item */
body.od .sidebar { background: var(--od-paper); border-right: 1px solid var(--od-line); }
body.od .sidebar-link { color: var(--od-ink); font-weight: 500; }
body.od .sidebar-link:hover { background: var(--od-cloud); color: var(--od-ink); }
body.od .sidebar-link.active { background: var(--od-tint); color: var(--od-blue); font-weight: 600; box-shadow: none; }
body.od .sidebar-link.active .od-ico { color: var(--od-blue); }
body.od .sidebar-footer { border-top: 1px solid var(--od-line); }
body.od .od-me { background: var(--od-cloud); box-shadow: none; }
body.od .sidebar, body.od .sidebar-nav { scrollbar-width: thin; scrollbar-color: #d5dae1 transparent; }
body.od .sidebar::-webkit-scrollbar, body.od .sidebar-nav::-webkit-scrollbar { width: 6px; }
body.od .sidebar::-webkit-scrollbar-thumb, body.od .sidebar-nav::-webkit-scrollbar-thumb { background: #d5dae1; border-radius: 999px; }
@media (max-width: 960px) { body.od .sidebar { background: var(--od-paper); } }

/* ==========================================================================
   MODALS AND POP-UPS (new design). Restyles the shared components without
   touching their markup or scripts: Dialog (confirm/alert/prompt), toasts,
   the KYC widget-code modal and the KYC record modal.
   Language: white card, 18px radius, plain header with a tinted icon tile,
   calm footer, sentence-case labels, filled inputs.
   ========================================================================== */

/* -- Dialog: confirm / alert / prompt ------------------------------------- */
body.od .cDialog-bd { background: rgba(14, 23, 38, .42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
body.od .cDialog-card { max-width: 420px; border-radius: 18px; box-shadow: 0 30px 70px -12px rgba(14, 23, 38, .35), 0 0 0 1px rgba(14, 23, 38, .05); }
body.od .cDialog-head, body.od .cDialog-head.cdh-blue, body.od .cDialog-head.cdh-red, body.od .cDialog-head.cdh-orange { background: var(--od-paper); padding: 1.4rem 1.5rem .2rem; gap: .85rem; align-items: center; }
body.od .cDialog-head h3 { color: var(--od-ink); font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em; margin: 0; }
body.od .cDialog-head-brand { display: none; }
body.od .cDialog-head-ico { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; background: var(--od-tint); color: var(--od-blue); }
body.od .cDialog-head.cdh-red .cDialog-head-ico { background: var(--od-bad-tint); color: var(--od-bad); }
body.od .cDialog-head.cdh-orange .cDialog-head-ico { background: var(--od-queued-tint); color: var(--od-queued); }
body.od .cDialog-body { padding: .8rem 1.5rem 1.3rem; }
body.od .cDialog-text { color: var(--od-muted); font-size: .92rem; line-height: 1.6; margin: 0; }
body.od .cDialog-text strong { color: var(--od-ink); }
body.od .cDialog-inp { margin-top: .9rem; border: 0; border-radius: 10px; background: var(--od-fill); min-height: 42px; font-family: var(--font); }
body.od .cDialog-inp:focus { background: var(--od-paper); box-shadow: 0 0 0 3px rgba(18, 115, 196, .14), 0 0 0 1px var(--od-blue); outline: 0; }
body.od .cDialog-foot { background: #fafbfc; border-top: 1px solid var(--od-line); padding: .9rem 1.5rem; gap: .5rem; }
body.od .cDialog-btn { border-radius: 10px; min-height: 38px; padding: .5rem 1rem; font-family: var(--font); font-size: .88rem; font-weight: 500; box-shadow: none; }
body.od .cDialog-btn > i { display: none; }
body.od .cDialog-btn-cancel { background: var(--od-paper); color: var(--od-ink); border: 0; box-shadow: 0 0 0 1px rgba(14, 23, 38, .12); }
body.od .cDialog-btn-cancel:hover { background: var(--od-fill); }
body.od .cDialog-btn-primary { background: var(--od-blue); color: #fff; border: 0; }
body.od .cDialog-btn-primary:hover { background: var(--od-blue-dark); }
body.od .cDialog-btn-danger { background: var(--od-bad); color: #fff; border: 0; }

/* -- Toasts ----------------------------------------------------------------- */
body.od .cNotify-toast { border: 0; border-radius: 14px; background: var(--od-paper); box-shadow: 0 18px 40px -14px rgba(14, 23, 38, .35), 0 0 0 1px rgba(14, 23, 38, .06); overflow: hidden; }
body.od .cNotify-toast.cn-success, body.od .cNotify-toast.cn-error, body.od .cNotify-toast.cn-warning, body.od .cNotify-toast.cn-info { border-left: 0; }
body.od .cNotify-ico { width: 32px; height: 32px; margin: .75rem 0 .75rem .8rem; border-radius: 10px; font-size: .85rem; align-self: flex-start; }
body.od .cn-success .cNotify-ico { background: var(--od-ok-tint); color: var(--od-ok); }
body.od .cn-error .cNotify-ico { background: var(--od-bad-tint); color: var(--od-bad); }
body.od .cn-warning .cNotify-ico { background: var(--od-queued-tint); color: var(--od-queued); }
body.od .cn-info .cNotify-ico { background: var(--od-tint); color: var(--od-blue); }
body.od .cNotify-body { padding: .8rem .4rem .8rem .75rem; }
body.od .cNotify-ttl { font-size: .88rem; font-weight: 600; color: var(--od-ink); }
body.od .cNotify-msg { font-size: .82rem; color: var(--od-muted); }
body.od .cNotify-bar { height: 2px; opacity: .6; }

/* -- KYC widget-code modal (partials/kyc_widget_code_modal.php) ------------ */
body.od .kw-modal__backdrop { background: rgba(14, 23, 38, .42); backdrop-filter: blur(4px); }
body.od .kw-modal__panel { width: min(860px, calc(100vw - 2rem)); background: var(--od-paper); border: 0; border-radius: 20px; box-shadow: 0 30px 70px -12px rgba(14, 23, 38, .35); }
body.od .kw-modal__head { background: var(--od-paper); color: var(--od-ink); border-bottom: 1px solid var(--od-line); padding: 1.4rem 1.6rem 1.2rem; align-items: flex-start; }
body.od .kw-modal__head span { color: var(--od-faint); font-size: .8rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
body.od .kw-modal__head span i { display: none; }
body.od .kw-modal__head h2 { color: var(--od-ink); font-size: 1.35rem; font-weight: 600; letter-spacing: -.025em; margin: .2rem 0 .15rem; }
body.od .kw-modal__head p { color: var(--od-muted); font-size: .88rem; }
body.od .kw-modal__head > button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--od-muted); }
body.od .kw-modal__head > button:hover { background: var(--od-fill); color: var(--od-ink); }
body.od .kw-modal__body { padding: 1.25rem 1.6rem 1.5rem; background: var(--od-paper); display: flex; flex-direction: column; gap: 1rem; }
body.od .kw-flow { margin: 0; gap: .5rem; }
body.od .kw-flow > div { border: 0; border-radius: 12px; background: var(--od-fill); color: var(--od-muted); font-size: .82rem; font-weight: 500; padding: .6rem .8rem; }
body.od .kw-flow > div.is-gate { background: var(--od-paper); color: var(--od-ink); box-shadow: 0 0 0 2px var(--od-blue); }
body.od .kw-flow b { border-radius: 999px; background: var(--od-paper); color: var(--od-blue); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--od-blue); }
body.od .kw-flow > div.is-gate b { background: var(--od-blue); color: #fff; box-shadow: none; }
body.od .kw-flow > i { color: #b8bec8; font-size: .75rem; }
body.od .kw-safe { margin: 0; border: 0; border-radius: 14px; background: var(--od-ok-tint); color: #0c6b49; padding: .9rem 1.1rem; }
body.od .kw-safe strong { font-size: .88rem; font-weight: 600; }
body.od .kw-safe p { font-size: .82rem; }
body.od .kw-config { border: 0; padding: 0; background: transparent; }
body.od .kw-config__grid { gap: 1rem 1.25rem; }
body.od .kw-config label > span { color: var(--od-ink); font-size: .84rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
body.od .kw-config input, body.od .kw-config select, body.od .kw-config textarea { border: 0; border-radius: 10px; background: var(--od-fill); color: var(--od-ink); font-size: .9rem; min-height: 42px; padding: .6rem .8rem; }
body.od .kw-config textarea { min-height: 76px; }
body.od .kw-config input:focus, body.od .kw-config select:focus, body.od .kw-config textarea:focus { background: var(--od-paper); box-shadow: 0 0 0 3px rgba(18, 115, 196, .14), 0 0 0 1px var(--od-blue); outline: 0; }
body.od .kw-config input[type=color] { padding: .3rem; cursor: pointer; }
body.od .kw-config input[type=checkbox] { min-height: 0; width: 17px; height: 17px; accent-color: var(--od-blue); }
body.od .kw-config small { color: var(--od-faint); font-size: .78rem; }
body.od .kw-check span { font-size: .88rem !important; font-weight: 400 !important; color: var(--od-ink) !important; }
body.od .kw-config__actions { border-top: 1px solid var(--od-line); margin-top: 1.1rem; padding-top: 1rem; }
body.od .kw-config__actions > span { color: var(--od-muted); font-size: .84rem; }
body.od .kw-config__actions button, body.od .kw-code__head button { border-radius: 10px; min-height: 38px; padding: .5rem 1rem; font: 500 .88rem var(--font); }
body.od .kw-config__actions button i, body.od .kw-code__head button i { display: none; }
body.od .kw-save { background: var(--od-blue); color: #fff; }
body.od .kw-save:hover { background: var(--od-blue-dark); }
body.od .kw-rotate { background: var(--od-paper); color: var(--od-ink); box-shadow: 0 0 0 1px rgba(14, 23, 38, .12); }
body.od .kw-rotate:hover { background: var(--od-fill); }
body.od .kw-code { margin: 0; border: 0; border-radius: 14px; background: #0b1522; overflow: hidden; }
body.od .kw-code__head { border-bottom: 1px solid rgba(255, 255, 255, .07); padding: .8rem 1rem; }
body.od .kw-code__head span { font-size: .88rem; font-weight: 600; }
body.od .kw-code__head small { color: #8a99ad; font-size: .78rem; }
body.od .kw-code__head button { background: rgba(255, 255, 255, .1); color: #fff; }
body.od .kw-code__head button:hover { background: rgba(255, 255, 255, .18); }
body.od .kw-code pre { color: #dfe7f1; font: .8rem/1.65 var(--mono); padding: 1rem 1.1rem; }
body.od .kw-proof { margin: 0; border: 0; border-radius: 14px; background: var(--od-fill); padding: .9rem 1.1rem; }
body.od .kw-proof span { color: var(--od-muted); font-size: .8rem; text-transform: none; }
body.od .kw-proof code { color: var(--od-ink); font-size: .8rem; background: none; border: 0; padding: 0; }
body.od .kw-proof a { color: var(--od-blue); font-size: .86rem; font-weight: 500; }
body.od .kw-proof a i { display: none; }

/* -- KYC record modal (partials/kyc_detail_modal.php) --------------------- */
body.od .identity-modal__backdrop { background: rgba(14, 23, 38, .42); backdrop-filter: blur(4px); }
body.od .identity-modal__panel { background: var(--od-paper); border: 0; border-radius: 20px; box-shadow: 0 30px 70px -12px rgba(14, 23, 38, .35); }
body.od .identity-modal__header { background: var(--od-paper); color: var(--od-ink); border-bottom: 1px solid var(--od-line); padding: 1.4rem 1.6rem 1.2rem; }
body.od .identity-modal__header::after { display: none; }
body.od .identity-modal__eyebrow { color: var(--od-faint); font-size: .8rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
body.od .identity-modal__eyebrow i { display: none; }
body.od .identity-modal__header h2 { color: var(--od-ink); font-size: 1.35rem; font-weight: 600; }
body.od .identity-modal__header p { color: var(--od-muted); font: .8rem var(--mono); }
body.od .identity-modal__close { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--od-muted); }
body.od .identity-modal__close:hover { background: var(--od-fill); color: var(--od-ink); }
body.od .identity-modal__body { padding: 1.25rem 1.6rem 1.5rem; }
body.od .identity-modal__loading i { color: var(--od-blue); }
body.od .identity-dossier__portrait { border: 0; border-radius: 16px; background: var(--od-fill); overflow: hidden; }
body.od .identity-dossier__portrait span { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .8rem; }
body.od .identity-chip { border-radius: 999px; font-size: .74rem; font-weight: 500; text-transform: none; letter-spacing: 0; padding: .22rem .6rem; background: var(--od-fill); color: var(--od-muted); }
body.od .identity-chip.is-success { background: var(--od-ok-tint); color: var(--od-ok); }
body.od .identity-chip.is-failed { background: var(--od-bad-tint); color: var(--od-bad); }
body.od .identity-chip.is-api { background: var(--od-tint); color: var(--od-blue); }
body.od .identity-address { border-left: 0; border-radius: 14px; background: #0b1522; }
body.od .identity-address span { color: #8a99ad; font-size: .76rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
body.od .identity-field { border: 0; border-radius: 12px; background: var(--od-fill); }
body.od .identity-field dt { color: var(--od-muted); font-size: .74rem; text-transform: none; letter-spacing: 0; }
body.od .identity-field dd { color: var(--od-ink); font-size: .88rem; font-weight: 500; }
body.od .identity-raw { border: 0; border-radius: 14px; background: var(--od-fill); overflow: hidden; }
body.od .identity-raw summary { color: var(--od-ink); font-size: .86rem; font-weight: 500; }
body.od .identity-raw pre { background: #0b1522; color: #dfe7f1; font: .78rem/1.6 var(--mono); }
body.od .identity-modal__footer { background: #fafbfc; border-top: 1px solid var(--od-line); color: var(--od-muted); font-size: .8rem; padding: .9rem 1.6rem; }
body.od .identity-modal__footer span i { color: var(--od-faint); }
body.od .identity-modal__footer button { border-radius: 10px; min-height: 38px; padding: .5rem 1rem; background: var(--od-paper); color: var(--od-ink); font: 500 .88rem var(--font); box-shadow: 0 0 0 1px rgba(14, 23, 38, .12); }
body.od .identity-modal__footer button:hover { background: var(--od-fill); }

@media (max-width: 680px) {
    body.od .kw-modal__body, body.od .identity-modal__body { padding: 1rem; }
    body.od .kw-modal__head, body.od .identity-modal__header { padding: 1.1rem 1rem 1rem; }
    body.od .kw-modal__panel, body.od .identity-modal__panel { border-radius: 16px; }
}
/* Fix: modal sections keep their natural height so the modal body scrolls instead of squashing the embed code */
body.od .kw-modal__body > * { flex-shrink: 0; }
body.od .kw-modal__body { overscroll-behavior: contain; }
body.od .kw-code pre { max-height: 240px; overflow: auto; }

/* ==========================================================================
   CLASSIC ADAPTER, PART 2 (inner-page audit, 2026-09-24).
   Fixes found by rendering every not-yet-rebuilt dashboard page in the new
   design: compose, dev widget form/docs, document builder, renewal wizard
   and logs, social boost tools, template editor, automation submission.
   ========================================================================== */

/* Buttons ---------------------------------------------------------------- */
/* "Secondary" was navy in the current design; the token remap turned it black. In the
   new design it is the quiet outlined button. */
body.od .btn.btn-secondary { background: var(--od-paper); color: var(--od-ink); border-color: transparent; box-shadow: 0 0 0 1px rgba(14, 23, 38, .12); }
body.od .btn.btn-secondary:hover { background: var(--od-fill); color: var(--od-ink); }
/* Back links drawn as solid buttons: make them quiet */
body.od .od-content .btn:has(> .fa-arrow-left):not(.btn-outline) { background: var(--od-paper); color: var(--od-ink); border-color: transparent; box-shadow: 0 0 0 1px rgba(14, 23, 38, .12); }
/* Delete buttons that only set a red text colour on the (blue) default button */
body.od .od-content .btn:has(> .fa-trash):not(.btn-danger):not(.btn-outline) { background: var(--od-paper) !important; color: var(--od-bad) !important; border-color: transparent !important; box-shadow: 0 0 0 1px rgba(208, 66, 47, .35); }
body.od .od-content .btn:has(> .fa-trash):not(.btn-danger):not(.btn-outline):hover { background: var(--od-bad-tint) !important; }
/* Red used as a main action colour (e.g. Ad campaigns): main actions are blue in the new design */
body.od .od-content .btn[style*="#ef4444"], body.od .od-content .btn[style*="#EF4444"] { background: var(--od-blue) !important; border-color: var(--od-blue) !important; color: #fff !important; }

/* Headings and labels ------------------------------------------------------ */
body.od .od-content h1 > i.fa-solid:first-child, body.od .od-content h1 > i.fa-regular:first-child { display: none; }
body.od .dw-section { text-transform: none; letter-spacing: 0; color: var(--od-ink); font-size: .95rem; font-weight: 600; border-top-color: var(--od-line); }
body.od .dw-section .text-muted { font-weight: 400; }
body.od .wz-step-label { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 500; }
body.od .tpl-editor-label { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* Surfaces --------------------------------------------------------------- */
/* Coloured stripe accents on plain divs (e.g. Audience strategies) */
body.od .od-content div[style*="border-left:3px solid"], body.od .od-content div[style*="border-left: 3px solid"],
body.od .od-content div[style*="border-left:4px solid"], body.od .od-content div[style*="border-left: 4px solid"] { border-left: 0 !important; border-radius: 12px !important; }
/* Code blocks with a header bar: one calm dark surface */
body.od .code-block { border-radius: 14px; }
/* Wrapper divs: the classic white-space:pre turned the markup indentation into blank lines */
body.od div.code-block { padding: 0; overflow: hidden; white-space: normal; }
body.od div.code-block > pre { margin: 0; padding: .9rem 1.1rem 1rem; background: transparent; border: 0; color: #dfe7f1; font: .8rem/1.65 var(--mono); }
body.od .code-block > .code-header, body.od .code-header { background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); padding: .5rem .6rem .5rem 1.1rem; }
body.od .code-header span { color: #8a99ad; text-transform: none; letter-spacing: 0; font-family: var(--font); }
body.od .code-header .lang-tag { background: rgba(255, 255, 255, .08); color: #c6d2e0; border-radius: 6px; font-family: var(--mono); }
body.od .code-header .btn { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; box-shadow: none; }
body.od .code-header .btn:hover { background: rgba(255, 255, 255, .18); }
body.od .code-header .btn > i { display: none; }

/* Inputs: date/time pickers match the other filled inputs */
body.od input[type="datetime-local"], body.od input[type="time"], body.od input[type="month"], body.od input[type="week"] {
    font-family: var(--font); background-color: var(--od-fill); border: 1px solid transparent; border-radius: 10px; min-height: 40px; padding: .45rem .75rem; font-size: .9rem; color: var(--od-ink);
}
body.od input[type="date"] { min-height: 40px; padding: .45rem .75rem; }
body.od input[type="file"] { font-family: var(--font); font-size: .86rem; color: var(--od-muted); }
body.od input[type="file"]::file-selector-button { font: 500 .84rem var(--font); margin-right: .75rem; padding: .45rem .9rem; border: 0; border-radius: 9px; background: var(--od-paper); color: var(--od-ink); box-shadow: 0 0 0 1px rgba(14, 23, 38, .12); cursor: pointer; }

/* Font Awesome Pro-only icon names used by some pages: map to free equivalents */
.fa-file-certificate::before { content: "\f559"; } /* award */
.fa-memo-pad::before { content: "\f249"; }         /* note-sticky */
.fa-grid-2::before { content: "\f009"; }           /* table-cells-large */
.fa-input-text::before { content: "\f246"; }       /* i-cursor */

/* ==========================================================================
   ADMIN CONSOLE (upgrade/layouts/admin.php, body.od-admin)
   Figma "04 · Admin console": the sidebar uses the dark colour mode
   (paper #0B1522, ink #EAF1F8, muted #98A9BB, faint #6C7E91, brand #4AAEF0,
   tint #132D47, hairline #22364D). The content area stays light.
   ========================================================================== */
body.od.od-admin .sidebar, body.od.od-admin .sidebar.admin-sidebar { background: #0b1522; border-right: 1px solid #0b1522 !important; color: #eaf1f8; width: 248px; }
body.od.od-admin .od-brand, body.od.od-admin .od-wordmark { color: #eaf1f8; }
body.od.od-admin .od-admin-tag { margin-left: .15rem; padding: .1rem .45rem; border-radius: 6px; background: #132d47; color: #4aaef0; font-size: .7rem; font-weight: 600; }
body.od.od-admin .sidebar-nav { padding: .25rem .75rem 1rem; }
body.od.od-admin .sidebar-section { color: #6c7e91; text-transform: none; letter-spacing: 0; font-size: .74rem; font-weight: 500; padding: .8rem .65rem .25rem; border: 0; }
body.od.od-admin .sidebar-link { color: #eaf1f8; font-weight: 500; font-size: .85rem; padding: .36rem .65rem; border-radius: 8px; border-left: 0; }
body.od.od-admin .sidebar-link .od-ico { color: #98a9bb; }
body.od.od-admin .sidebar-link:hover { background: #111e2e; color: #fff; }
body.od.od-admin .sidebar-link:hover .od-ico { color: #eaf1f8; }
body.od.od-admin .sidebar-link.active { background: #132d47; color: #4aaef0; font-weight: 600; box-shadow: none; }
body.od.od-admin .sidebar-link.active .od-ico { color: #4aaef0; }
body.od.od-admin .od-count { background: #4aaef0; color: #0b1522; }
body.od.od-admin .sidebar-footer { border-top: 0; padding: .75rem; }
body.od.od-admin .od-me { background: #111e2e; border-radius: 10px; padding: .6rem; border: 0; }
body.od.od-admin .od-avatar { background: #1273c4; color: #fff; }
body.od.od-admin .od-me-name { color: #eaf1f8; }
body.od.od-admin .od-me-sub, body.od.od-admin .od-me-sub a { color: #6c7e91; text-decoration: none; }
body.od.od-admin .od-me-sub a:hover { color: #4aaef0; }
body.od.od-admin .od-icon-btn { background: transparent; border-color: transparent; color: #98a9bb; }
body.od.od-admin .od-icon-btn:hover { background: #16263a; border-color: #22364d; color: #eaf1f8; }
body.od.od-admin .sidebar-close-btn { border-color: #22364d; color: #98a9bb; background: transparent; }
body.od.od-admin .sidebar::-webkit-scrollbar-thumb, body.od.od-admin .sidebar-nav::-webkit-scrollbar-thumb { background: #22364d; }
body.od.od-admin .sidebar { scrollbar-color: #22364d transparent; }
body.od.od-admin .dash-main { padding-top: 0; }
@media (min-width: 961px) { body.od.od-admin .od-content { padding-top: 32px; } }
@media (max-width: 960px) { body.od.od-admin .sidebar { background: #0b1522; } }

/* Admin sidebar, measured from the Figma frame (Admin sidebar 32:32): 248px, padding 18/12,
   items 13px medium with 15px icons and 5/10 padding, group labels 12px regular. */
body.od.od-admin .sidebar-brand { padding: 18px 12px 12px 20px; border: 0; }
body.od.od-admin .od-brand { gap: 9px; }
body.od.od-admin .od-wordmark { font-size: 20px; font-weight: 600; letter-spacing: -0.6px; }
body.od.od-admin .od-admin-tag { margin-left: 1px; padding: 2px 7px; font-size: 12px; letter-spacing: .1px; }
body.od.od-admin .sidebar-nav { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 1px; }
body.od.od-admin .sidebar-section { padding: 10px 0 3px 10px; margin: 0; font-size: 12px; font-weight: 400; letter-spacing: .1px; line-height: 1.4; }
body.od.od-admin .sidebar-link { gap: 10px; padding: 5px 10px; font-size: 13px; line-height: 1.4; margin: 0; }
body.od.od-admin .sidebar-link svg { width: 15px; height: 15px; flex: none; }
body.od.od-admin .sidebar-footer { padding: 0 12px 18px; }
body.od.od-admin .od-me { padding: 10px; gap: 10px; border-radius: 10px; }
body.od.od-admin .od-avatar { width: 30px; height: 30px; background: #4aaef0; color: #0b1522; font-size: 12px; font-weight: 600; }
body.od.od-admin .od-me-name { font-size: 13px; font-weight: 500; }
body.od.od-admin .od-me-sub { font-size: 12px; letter-spacing: .1px; }
body.od.od-admin .od-linkbtn { padding: 0; border: 0; background: none; font: inherit; color: #6c7e91; cursor: pointer; }
body.od.od-admin .od-linkbtn:hover { color: #4aaef0; }
body.od.od-admin .od-me .od-icon-btn { width: 28px; height: 28px; }

/* ==========================================================================
   Admin · Overview (Figma node 9:6)
   ========================================================================== */
body.od-admin .oa { display: flex; flex-direction: column; gap: 24px; font-family: var(--font); color: #0f2236; }
body.od.od-admin .od-content:has(> .oa) { padding: 32px 40px 48px; }
body.od-admin .oa-head { display: flex; align-items: flex-end; gap: 16px; }
body.od-admin .oa-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
body.od-admin .oa-head h1 { margin: 0; font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -1px; color: #0f2236; }
body.od-admin .oa-head p { margin: 0; font-size: 15px; line-height: 1.55; color: #5a6b7d; }
body.od-admin .oa-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 10px; background: #fff; border: 1px solid #e2e8ef; color: #0f2236; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
body.od-admin .oa-btn:hover { background: #f4f7fa; text-decoration: none; color: #0f2236; }
body.od-admin .oa-ghost { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; color: #1273c4; font-size: 15px; font-weight: 500; text-decoration: none; }
body.od-admin .oa-ghost:hover { text-decoration: underline; }

body.od-admin .oa-alert { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: #fbf3e3; border: 1px solid #c98a0b; }
body.od-admin .oa-alert > svg { flex: none; color: #c98a0b; }
body.od-admin .oa-alert > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 500; }
body.od-admin .oa-alert strong { font-size: 15px; line-height: 1.55; font-weight: 500; color: #0f2236; }
body.od-admin .oa-alert span { font-size: 13px; line-height: 1.4; color: #5a6b7d; }

body.od-admin .oa-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid #e2e8ef; border-radius: 16px; }
body.od-admin .oa-metrics > div { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; min-width: 0; }
body.od-admin .oa-metrics > div + div { border-left: 1px solid #e2e8ef; }
body.od-admin .oa-metrics .l { font-size: 13px; font-weight: 500; line-height: 1.4; color: #5a6b7d; }
body.od-admin .oa-metrics strong { font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -1px; color: #0f2236; font-variant-numeric: tabular-nums; }
body.od-admin .oa-metrics .s { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .1px; color: #8a99a8; }
body.od-admin .oa-metrics .s.is-ok { color: #149c6b; }
body.od-admin .oa-metrics .s.is-bad { color: #d0422f; }

body.od-admin .oa-row { display: flex; gap: 24px; align-items: stretch; }
body.od-admin .oa-card { background: #fff; border: 1px solid #e2e8ef; border-radius: 16px; min-width: 0; }
body.od-admin .oa-queue { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 22px 24px; }
body.od-admin .oa-pool { width: 440px; flex: none; display: flex; flex-direction: column; }
body.od-admin .oa-pad { padding-left: 24px; padding-right: 24px; }
body.od-admin .oa-card-head { display: flex; align-items: center; gap: 10px; }
body.od-admin .oa-card-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.od-admin .oa-card-head h2 { flex: 1; margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.2px; color: #0f2236; }
body.od-admin .oa-card-head > div > span { font-size: 12px; line-height: 1.4; letter-spacing: .1px; color: #8a99a8; }
body.od-admin .oa-pool > .oa-card-head { padding-top: 20px; padding-bottom: 20px; }
body.od-admin .oa-flush > .oa-card-head { padding-top: 18px; padding-bottom: 18px; }
body.od-admin .oa-mini { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #e2e8ef; border-radius: 8px; background: #fff; color: #0f2236; font: 500 13px/1.4 var(--font); cursor: pointer; }
body.od-admin .oa-mini:hover { background: #f4f7fa; }

body.od-admin .oa-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
body.od-admin .oa-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
body.od-admin .oa-pill.is-ok { background: #e6f5ee; color: #149c6b; }
body.od-admin .oa-pill.is-q { background: #fbf3e3; color: #c98a0b; }
body.od-admin .oa-pill.is-bad { background: #fbebe8; color: #d0422f; }
body.od-admin .oa-pill.is-info { background: #e8f3fc; color: #1273c4; }

body.od-admin .oa-qbar { display: flex; gap: 3px; height: 12px; border-radius: 6px; background: #f4f7fa; overflow: hidden; }
body.od-admin .oa-qbar i { display: block; height: 100%; }
body.od-admin .oa-qbar i[style="width:0"] { display: none; }
body.od-admin .oa-qbar .ok { background: #149c6b; }
body.od-admin .oa-qbar .info { background: #1273c4; }
body.od-admin .oa-qbar .q { background: #c98a0b; }
body.od-admin .oa-qbar .bad { background: #d0422f; }
body.od-admin .oa-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
body.od-admin .oa-legend > div { display: flex; flex-direction: column; gap: 4px; }
body.od-admin .oa-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.4; letter-spacing: .1px; color: #5a6b7d; }
body.od-admin .oa-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 999px; }
body.od-admin .oa-legend .ok::before { background: #149c6b; }
body.od-admin .oa-legend .info::before { background: #1273c4; }
body.od-admin .oa-legend .q::before { background: #c98a0b; }
body.od-admin .oa-legend .bad::before { background: #d0422f; }
body.od-admin .oa-legend strong { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.2px; color: #0f2236; font-variant-numeric: tabular-nums; }
body.od-admin .oa-hr { margin: 0; border: 0; height: 1px; background: #e2e8ef; }
body.od-admin .oa-sub { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: #5a6b7d; }
body.od-admin .oa-muted { margin: 0; font-size: 13px; color: #8a99a8; }
body.od-admin .oa-muted.oa-pad { padding-bottom: 20px; }
body.od-admin .oa-chan { display: flex; align-items: center; gap: 16px; }
body.od-admin .oa-chan > div { width: 250px; flex: none; display: flex; flex-direction: column; gap: 1px; }
body.od-admin .oa-chan strong { font-size: 15px; font-weight: 500; line-height: 1.55; color: #0f2236; }
body.od-admin .oa-chan > div span { font-size: 12px; line-height: 1.4; letter-spacing: .1px; color: #8a99a8; }
body.od-admin .oa-track { flex: 1; min-width: 0; height: 8px; border-radius: 4px; background: #f4f7fa; overflow: hidden; }
body.od-admin .oa-track i { display: block; height: 100%; border-radius: 4px; background: #1273c4; }
body.od-admin .oa-chan b { width: 36px; text-align: right; font-size: 13px; font-weight: 600; line-height: 1.4; color: #0f2236; }

body.od-admin .oa-pool-row { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid #e2e8ef; }
body.od-admin .oa-pool-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.od-admin .oa-pool-row code { font: 400 13px/1.6 "Geist Mono", var(--mono); color: #0f2236; background: none; padding: 0; overflow-wrap: anywhere; }
body.od-admin .oa-pool-row span:not(.oa-pill) { font-size: 12px; line-height: 1.4; letter-spacing: .1px; color: #8a99a8; }

body.od-admin .oa-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid #edf1f5; font-size: 13px; }
body.od-admin .oa-pager-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
body.od-admin .oa-pager-links a, body.od-admin .oa-pager-links span { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 500; color: #0f2236; text-decoration: none; }
body.od-admin .oa-pager-links a { border: 1px solid #dfe6ee; background: #fff; }
body.od-admin .oa-pager-links a:hover { border-color: #1273c4; color: #1273c4; }
body.od-admin .oa-pager-links a:focus-visible { outline: 2px solid #1273c4; outline-offset: 2px; }
body.od-admin .oa-pager-links .is-on { background: #1273c4; color: #fff; }
body.od-admin .oa-pager-links .is-off { color: #b3bfcb; }
body.od-admin .oa-pager-links .oa-pager-gap { min-width: 20px; padding: 0; color: #8a99a8; }

body.od-admin .oa-find { display: flex; align-items: center; gap: 8px; width: 260px; padding: 7px 12px; border-radius: 8px; background: #f4f7fa; margin: 0; }
body.od-admin .oa-find svg { color: #8a99a8; flex: none; }
body.od-admin .oa-find input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; height: auto !important; font: 500 13px/1.4 var(--font); color: #0f2236; outline: none; }
body.od-admin .oa-find input::placeholder { color: #8a99a8; }
body.od-admin .oa-find:focus-within { box-shadow: 0 0 0 2px rgba(18, 115, 196, .35); }
body.od-admin .oa-table-wrap { overflow-x: auto; }
body.od-admin .oa-table { width: 100%; border-collapse: collapse; margin: 0; }
body.od-admin .oa-table th { padding: 10px 24px; background: #f4f7fa; border-top: 1px solid #e2e8ef; border-bottom: 0; text-align: left; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: .1px; color: #5a6b7d; text-transform: none; }
body.od-admin .oa-table td { padding: 13px 24px; border-top: 1px solid #e2e8ef; border-bottom: 0; font-size: 15px; line-height: 1.55; color: #0f2236; vertical-align: middle; }
body.od-admin .oa-table td.oa-dim { color: #5a6b7d; font-variant-numeric: tabular-nums; }
/* New developers: many columns, so tighter cells that keep each value on one line. */
body.od-admin .oa-table.is-wide th, body.od-admin .oa-table.is-wide td { padding: 11px 14px; white-space: nowrap; }
body.od-admin .oa-table.is-wide td { font-size: 14px; }
body.od-admin .oa-table.is-wide th:first-child, body.od-admin .oa-table.is-wide td:first-child { padding-left: 24px; }
body.od-admin .oa-table .oa-num { text-align: right; font-variant-numeric: tabular-nums; }
body.od-admin .oa-table .oa-sub { display: block; font-size: 12px; line-height: 1.35; color: #7a8a9b; }
body.od-admin .oa-table tbody tr:hover td { background: #fafbfc; }
body.od-admin .oa-who { display: flex; flex-direction: column; text-decoration: none; }
body.od-admin .oa-who strong { font-size: 15px; font-weight: 500; line-height: 1.55; color: #0f2236; }
body.od-admin .oa-who span { font-size: 12px; line-height: 1.4; letter-spacing: .1px; color: #8a99a8; }
body.od-admin .oa-who:hover { text-decoration: none; }
body.od-admin .oa-who:hover strong { color: #1273c4; }

@media (max-width: 1200px) { body.od-admin .oa-row { flex-direction: column; } body.od-admin .oa-pool { width: auto; } }
@media (max-width: 900px) {
    body.od-admin .oa-metrics { grid-template-columns: 1fr 1fr; }
    body.od-admin .oa-metrics > div:nth-child(3) { border-left: 0; }
    body.od-admin .oa-metrics > div:nth-child(n+3) { border-top: 1px solid #e2e8ef; }
    body.od-admin .oa-legend { grid-template-columns: 1fr 1fr; gap: 16px; }
    body.od-admin .oa-chan > div { width: 42%; }
    body.od.od-admin .od-content:has(> .oa) { padding: 20px 16px 32px; }
    body.od-admin .oa-head h1 { font-size: 30px; }
    body.od-admin .oa-alert, body.od-admin .oa-card-head { flex-wrap: wrap; }
    body.od-admin .oa-find { width: 100%; }
}
body.od-admin .oa-pool-row code { border: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; border-radius: 0; display: block; }
body.od.od-admin .od-me-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.od.od-admin .od-me-text { min-width: 0; }
body.od.od-admin .od-me .od-icon-btn { width: 20px; height: 20px; padding: 0; border: 0; }
body.od.od-admin .od-me .od-icon-btn:hover { background: none; color: #4aaef0; }
body.od.od-admin .od-me { gap: 8px; }
body.od.od-admin .od-me .od-icon-btn { width: 16px; height: 16px; }
body.od.od-admin .od-me .od-avatar { margin-right: 2px; }

/* ==========================================================================
   FIGMA EXACT (2026-09-24). Values read from the Figma file with the Figma MCP,
   frame "Dashboard · Overview" (node 6:6). The v2 refinement layer above drifted
   from the file (canvas #f3f4f6, hairline #e7e9ee, shadow rings, 14.5px menu);
   this block restores the file's tokens and shell measurements. It is last, so it wins.
   ========================================================================== */
body.od {
    --od-cloud: #f4f7fa;
    --od-fill: #f4f7fa;
    --od-ink: #0f2236;
    --od-muted: #5a6b7d;
    --od-faint: #8a99a8;
    --od-line: #e2e8ef;
    --od-tint: #e8f3fc;
    --od-ok: #149c6b;
    --od-ok-tint: #e6f5ee;
    --od-queued: #c98a0b;
    --od-queued-tint: #fbf3e3;
    --od-bad: #d0422f;
    --od-bad-tint: #fbebe8;
    --od-radius: 10px;
    --od-radius-lg: 16px;
    /* Surfaces are outlined with the hairline, never shadowed */
    --od-ring: 0 0 0 1px #e2e8ef;
    --od-shadow: none;
    --od-lift: none;
    --od-card: 0 0 0 1px #e2e8ef;
    background: #f4f7fa;
}
body.od .dash-main { background: #f4f7fa; }

/* Cards, strips, panels: white, 1px #e2e8ef, radius 16, no shadow */
body.od .od-panel, body.od .od-metrics, body.od .od-hero,
body.od .od-content .card, body.od .od-content .panel, body.od .od-content .stat-card {
    background: #fff; border: 1px solid #e2e8ef; border-radius: 16px; box-shadow: none;
}

/* Sidebar (developer app) — Figma "Sidebar" 6:7 (widened to 280px on request), white, hairline right,
   padding 20/14, items 13px medium, 16px icons, 6/10 padding, radius 8 */
body.od.od-dashboard:not(.od-admin) .sidebar { background: #fff; border-right: 1px solid #e2e8ef !important; width: 280px; }
body.od.od-dashboard:not(.od-admin) .sidebar-brand { padding: 20px 14px 18px 22px; border: 0; }
body.od.od-dashboard:not(.od-admin) .od-wordmark { font-size: 20px; font-weight: 600; letter-spacing: -0.6px; color: #0f2236; }
body.od.od-dashboard:not(.od-admin) .od-brand { gap: 9px; }
body.od.od-dashboard:not(.od-admin) .sidebar-nav { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 2px; }
body.od.od-dashboard:not(.od-admin) .sidebar-section { padding: 14px 0 4px 10px; margin: 0; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: .1px; color: #8a99a8; text-transform: none; }
body.od.od-dashboard:not(.od-admin) .sidebar-link { gap: 10px; padding: 6px 10px; margin: 0; border-radius: 8px; font-size: 13px; font-weight: 500; line-height: 1.4; color: #0f2236; box-shadow: none; border-left: 0; }
body.od.od-dashboard:not(.od-admin) .sidebar-link svg { width: 16px; height: 16px; flex: none; }
body.od.od-dashboard:not(.od-admin) .sidebar-link .od-ico { color: #5a6b7d; }
body.od.od-dashboard:not(.od-admin) .sidebar-link:hover { background: #f4f7fa; color: #0f2236; }
body.od.od-dashboard:not(.od-admin) .sidebar-link.active { background: #e8f3fc; color: #1273c4; font-weight: 600; box-shadow: none; }
body.od.od-dashboard:not(.od-admin) .sidebar-link.active .od-ico { color: #1273c4; }
body.od.od-dashboard:not(.od-admin) .sidebar-footer { padding: 0 14px 20px; border: 0; }
body.od.od-dashboard:not(.od-admin) .od-me { background: #f4f7fa; box-shadow: none; border: 0; border-radius: 10px; padding: 10px; gap: 10px; }
body.od.od-dashboard:not(.od-admin) .od-avatar { width: 32px; height: 32px; background: #1273c4; color: #fff; font-size: 12px; font-weight: 600; }
body.od.od-dashboard:not(.od-admin) .od-me-name { font-size: 13px; font-weight: 500; color: #0f2236; }
body.od.od-dashboard:not(.od-admin) .od-me-sub { font-size: 12px; letter-spacing: .1px; color: #8a99a8; }

/* Top bar — Figma "Top bar" 6:142: white, hairline bottom, padding 14/40, gap 12 */
body.od .od-topbar { background: #fff; border-bottom: 1px solid #e2e8ef; padding: 14px 40px; gap: 12px; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.od .od-search { width: 420px; max-width: 100%; padding: 9px 12px; gap: 10px; border: 0; border-radius: 10px; background: #f4f7fa; box-shadow: none; font-size: 13px; font-weight: 500; color: #8a99a8; }
body.od .od-search:hover { box-shadow: 0 0 0 1px #e2e8ef; }
body.od .od-kbd { background: #fff; border: 1px solid #e2e8ef; border-radius: 6px; padding: 2px 6px; font-size: 12px; color: #8a99a8; }
body.od .od-chip { padding: 3px 10px 3px 8px; font-size: 13px; font-weight: 500; }
body.od .od-bell { width: 36px; height: 36px; background: #fff; border: 1px solid #e2e8ef; border-radius: 10px; box-shadow: none; }

/* Content — Figma "Content": padding 32/40, gap 24; page title Heading/H1 */
body.od .od-content { padding: 32px 40px 48px; }
body.od .od-head { margin-bottom: 0; }
body.od .od-head h1, body.od .dash-header h1 { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -1px; color: #0f2236; }
body.od .od-head p, body.od .dash-header .subtitle { font-size: 15px; line-height: 1.55; color: #5a6b7d; margin-top: 4px; }

/* Metric strip — Figma "Metrics": cells 20/24, label 13 medium muted, value 32 semibold */
body.od .od-metric { padding: 20px 24px; gap: 6px; border-left-color: #e2e8ef; }
body.od .od-metric-label { font-size: 13px; font-weight: 500; line-height: 1.4; color: #5a6b7d; }
body.od .od-metric-value { font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -1px; color: #0f2236; }
body.od .od-metric-sub { font-size: 12px; line-height: 1.4; letter-spacing: .1px; }

/* Panel heads — Heading/H3 20px; sub = UI/Caption */
body.od .od-panel-title, body.od .od-panel-head h2 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.2px; color: #0f2236; }
body.od .od-panel-sub { font-size: 12px; line-height: 1.4; letter-spacing: .1px; color: #8a99a8; }

@media (max-width: 960px) {
    body.od .od-topbar { padding: 10px 16px; }
    body.od .od-search { width: auto; flex: 1; }
    body.od .od-content { padding: 20px 16px 32px; }
    body.od .od-head h1, body.od .dash-header h1 { font-size: 30px; }
    body.od.od-dashboard:not(.od-admin) .sidebar { width: 280px; }
}

/* Tables — Figma table rows (6:266/6:277): header 10/24 on #f4f7fa, 12px regular muted; rows 13/24, 15px */
body.od .od-table th { background: #f4f7fa; border-top: 1px solid #e2e8ef; border-bottom: 0; padding: 10px 24px; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: .1px; color: #5a6b7d; }
body.od .od-table td { border-top: 1px solid #e2e8ef; border-bottom: 0; padding: 13px 24px; font-size: 15px; line-height: 1.55; color: #5a6b7d; }
body.od .od-table td.is-strong { color: #0f2236; font-weight: 500; }
body.od .od-table td.is-ink { color: #0f2236; }
@media (max-width: 960px) { body.od .od-table th, body.od .od-table td { padding-left: 16px; padding-right: 16px; } }

/* Deliveries: email details open in a centred modal — details column + full email preview */
body.od .od-split tr.is-clickable { cursor: pointer; }
body.od .od-split tr.is-sel td { background: #f4f7fa; }
body.od #view-modal { display: flex; align-items: center; justify-content: center; padding: 24px; }
body.od #view-modal[hidden] { display: none; }
body.od #view-modal .od-modal { max-height: none; position: relative; top: auto; right: auto; bottom: auto; width: min(1120px, 100%); height: min(860px, calc(100vh - 48px)); border-radius: 16px; transform: translateY(12px) scale(.98); opacity: 0; transition: transform .2s ease, opacity .2s ease; box-shadow: 0 32px 80px -16px rgba(15, 34, 54, .4); overflow: hidden; }
body.od #view-modal.is-open .od-modal { transform: none; opacity: 1; }
body.od #view-modal .od-modal-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
body.od #view-modal .od-modal-side { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.2rem 1.4rem 1.6rem; overflow-y: auto; border-right: 1px solid #e2e8ef; }
body.od #view-modal .od-modal-main { display: flex; flex-direction: column; min-height: 0; padding: 1.2rem 1.4rem 1.4rem; background: #f4f7fa; }
body.od #view-modal .od-modal-main .od-seg { align-self: flex-start; background: #fff; }
body.od #view-modal .od-modal-main .od-preview { flex: 1; min-height: 0; height: 100%; }
body.od #view-modal .od-modal-main .od-source { flex: 1; min-height: 0; max-height: none; background: #fff; border: 1px solid var(--od-line); }
body.od #view-modal .od-dl > div { grid-template-columns: 90px 1fr; }
@media (max-width: 860px) {
    body.od #view-modal { padding: 0; }
    body.od #view-modal .od-modal { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; }
    body.od #view-modal .od-modal-body { display: block; overflow-y: auto; }
    body.od #view-modal .od-modal-side { border-right: 0; overflow: visible; }
    body.od #view-modal .od-modal-main .od-preview { flex: none; height: 70vh; }
    body.od #view-modal .od-modal-main .od-source { flex: none; max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) { body.od #view-modal .od-modal { transition: none; } }

/* ==========================================================================
   Compose (Figma "Dashboard · Compose", node 14:33)
   ========================================================================== */
body.od .cp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-top: 24px; }
body.od .cp-card { background: #fff; border: 1px solid #e2e8ef; border-radius: 16px; min-width: 0; }
body.od .cp-pad { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
body.od .cp-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
body.od .cp-row2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
body.od .cp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.od .cp-label { font-size: 13px; font-weight: 500; line-height: 1.4; color: #0f2236; margin: 0; }
body.od .cp-label span { font-weight: 400; color: #8a99a8; margin-left: 4px; }
body.od .cp-label-row { display: flex; align-items: center; justify-content: space-between; }
body.od .cp-ccbcc { display: inline-flex; gap: 12px; }
body.od .cp-ccbcc button { padding: 0; border: 0; background: none; font: 500 13px/1.4 var(--font); color: #1273c4; cursor: pointer; }
body.od .cp-ccbcc button:hover { text-decoration: underline; }
body.od .cp-input, body.od input.cp-input, body.od select.cp-input {
    width: 100%; height: 42px; padding: 0 12px; border: 1px solid #e2e8ef; border-radius: 10px; background: #fff;
    font: 400 15px/1.4 var(--font); color: #0f2236; box-shadow: none; min-height: 0;
}
body.od .cp-input:focus { outline: none; border-color: #1273c4; box-shadow: 0 0 0 3px rgba(18, 115, 196, .14); }
body.od .cp-input::placeholder { color: #8a99a8; }
body.od .cp-hint { font-size: 12px; line-height: 1.4; color: #8a99a8; }
body.od .cp-hint:empty { display: none; }
body.od .cp-from-note-wrap { background: none !important; border: 0 !important; padding: 0; }
body.od .cp-from-note { font-size: 12px; line-height: 1.5; color: #149c6b; }
body.od .cp-from-note i { margin-right: 2px; }
body.od .cp-from-note code { font: 12px var(--mono); background: #f4f7fa; padding: 1px 5px; border-radius: 4px; }
body.od .cp-warn { padding: 10px 12px; border-radius: 10px; background: #fbf3e3; color: #7a5406; font-size: 13px; line-height: 1.5; }
body.od .cp-warn a { color: #1273c4; font-weight: 500; }

/* Send via: segmented control */
body.od .cp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #f4f7fa; border: 1px solid #e2e8ef; }
body.od .cp-seg label { margin: 0; cursor: pointer; }
body.od .cp-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.od .cp-seg span, body.od .cp-seg-link { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; font: 500 13px/1 var(--font); color: #5a6b7d; text-decoration: none; white-space: nowrap; }
body.od .cp-seg input:checked + span { background: #fff; color: #0f2236; box-shadow: 0 0 0 1px #e2e8ef, 0 1px 2px rgba(15, 34, 54, .06); }
body.od .cp-seg input:focus-visible + span { outline: 2px solid rgba(18, 115, 196, .4); }
body.od .cp-seg-link:hover { color: #1273c4; }

/* AI assist strip */
body.od .cp-ai { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: #e8f3fc; }
body.od .cp-ai-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #1273c4; }
body.od .cp-tones { display: inline-flex; gap: 6px; flex-wrap: wrap; }
body.od .cp-tone { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid #cfe3f5; background: #fff; font: 500 12.5px/1 var(--font); color: #0f2236; cursor: pointer; }
body.od .cp-tone:hover { border-color: #1273c4; }
body.od .cp-tone.is-on { background: #1273c4; border-color: #1273c4; color: #fff; }
body.od .cp-ai-actions { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; flex-basis: 100%; }
body.od .cp-ai-actions button { padding: 0; border: 0; background: none; font: 500 13px/1.6 var(--font); color: #1273c4; cursor: pointer; }
body.od .cp-ai-actions button:hover { text-decoration: underline; }
body.od .cp-ai-actions .cp-ai-main { font-weight: 600; }
body.od .cp-ai-status { margin-left: auto; font-size: 12px; color: #5a6b7d; }

/* Editor */
body.od .cp-editor { border: 1px solid #e2e8ef; border-radius: 12px; overflow: hidden; }
body.od .cp-editor-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #e2e8ef; }
body.od .cp-modes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #f4f7fa; }
body.od .cp-modes .ctab, body.od .cp-modes .ctab.active { height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent !important; color: #5a6b7d !important; font: 500 12.5px/1 var(--font); cursor: pointer; }
body.od .cp-modes .ctab.active { background: #fff !important; color: #0f2236 !important; box-shadow: 0 0 0 1px #e2e8ef; }
body.od .cp-editor .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid #e2e8ef; background: #fff; padding: 8px 10px; font-family: var(--font); }
body.od .cp-editor .ql-container.ql-snow { border: 0; font: 15px/1.6 var(--font); color: #0f2236; }
body.od .cp-editor .ql-editor { min-height: 260px; padding: 16px 18px; }
body.od .cp-editor .ql-editor.ql-blank::before { color: #8a99a8; font-style: normal; left: 18px; }
body.od .cp-editor .ql-snow .ql-stroke { stroke: #5a6b7d; }
body.od .cp-editor .ql-snow .ql-fill { fill: #5a6b7d; }
body.od .cp-editor .ql-snow .ql-picker { color: #5a6b7d; }
body.od .cp-editor .ql-snow button:hover .ql-stroke, body.od .cp-editor .ql-snow .ql-active .ql-stroke { stroke: #1273c4; }
body.od .cp-code { width: 100%; min-height: 300px; padding: 16px 18px; border: 0; border-radius: 0; font: 13px/1.6 var(--mono); color: #0f2236; background: #f4f7fa; resize: vertical; }

/* Attachments */
body.od .cp-attach { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.od .cp-attach-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px dashed #c9d4e0; border-radius: 10px; font: 500 13px/1 var(--font); color: #0f2236; cursor: pointer; margin: 0; }
body.od .cp-attach-btn:hover { border-color: #1273c4; color: #1273c4; }
body.od .cp-files { font-size: 13px; color: #5a6b7d; }
body.od .cp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

body.od .cp-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid #e2e8ef; }
body.od .cp-foot > span { flex: 1; font-size: 13px; color: #5a6b7d; }

/* Side column */
body.od .cp-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.od .cp-h { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.2px; color: #0f2236; }
body.od .cp-kv { display: flex; align-items: center; gap: 10px; }
body.od .cp-kv > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.od .cp-kv span:not(.cp-pill) { font-size: 12px; line-height: 1.4; color: #8a99a8; }
body.od .cp-kv strong { font-size: 15px; font-weight: 500; line-height: 1.5; color: #0f2236; overflow-wrap: anywhere; }
body.od .cp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
body.od .cp-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
body.od .cp-pill.is-ok { background: #e6f5ee; color: #149c6b; }
body.od .cp-pill.is-q { background: #fbf3e3; color: #c98a0b; }
body.od .cp-pill.is-info { background: #e8f3fc; color: #1273c4; }
body.od .cp-big { display: flex; align-items: baseline; gap: 8px; }
body.od .cp-big strong { font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -1px; color: #0f2236; }
body.od .cp-big span { font-size: 13px; color: #5a6b7d; }
body.od .cp-meter { display: block; height: 6px; border-radius: 3px; background: #f4f7fa; overflow: hidden; }
body.od .cp-meter i { display: block; height: 100%; border-radius: 3px; background: #1273c4; }
body.od .cp-meter.is-q i { background: #c98a0b; }
body.od .cp-meter.is-bad i { background: #d0422f; }
body.od .cp-note { margin: 0; font-size: 12px; line-height: 1.5; color: #8a99a8; }
body.od .cp-tip { display: block; padding: 16px 18px; border-radius: 16px; background: #e8f3fc; color: #1273c4; font-size: 13px; line-height: 1.55; text-decoration: none; }
body.od .cp-tip strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
body.od .cp-tip:hover { background: #dcecfa; text-decoration: none; }

/* AI overlay */
body.od .cp-ai-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(15, 34, 54, .45); align-items: center; justify-content: center; }
body.od .cp-ai-card { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 360px; padding: 28px 32px; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 24px 60px -12px rgba(15, 34, 54, .35); }
body.od .cp-ai-card strong { font-size: 16px; font-weight: 600; color: #0f2236; }
body.od .cp-ai-card #aiOverlayMsg { font-size: 13px; line-height: 1.5; color: #5a6b7d; }
body.od .cp-ai-spark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 999px; background: #e8f3fc; color: #1273c4; }
body.od .cp-ai-dots { display: flex; gap: 6px; margin-top: 10px; }
body.od .ai-dot { width: 8px; height: 8px; border-radius: 50%; background: #1273c4; display: inline-block; animation: cpBounce 1.2s infinite ease-in-out; }
body.od .ai-dot:nth-child(2) { animation-delay: .15s; }
body.od .ai-dot:nth-child(3) { animation-delay: .3s; }
@keyframes cpBounce { 0%, 80%, 100% { transform: translateY(0); opacity: .3; } 40% { transform: translateY(-6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.od .ai-dot { animation: none; opacity: .7; } }

@media (max-width: 1100px) { body.od .cp-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    body.od .cp-row2 { grid-template-columns: 1fr; }
    body.od .cp-body { padding: 18px 16px; }
    body.od .cp-foot { flex-wrap: wrap; padding: 12px 16px; }
    body.od .cp-foot > span { flex-basis: 100%; }
}
body.od .cp-attach-btn { flex-direction: row; white-space: nowrap; }
body.od .cp-attach-btn svg { display: inline-block; flex: none; }
body.od .cp-kv { flex-wrap: wrap; }
body.od .cp-kv strong { overflow-wrap: normal; word-break: normal; }
body.od .cp-kv > div { min-width: 150px; }

/* Templates: the real template drawn as a small white page centred on the grey band (Figma 14:711 cards) */
body.od .od-tpl-thumb { height: 150px; background: #f4f7fa; border-bottom: 1px solid #e2e8ef; }
body.od .od-tpl-thumb iframe { top: 18px; left: 50%; width: 640px; height: 640px; margin-left: -320px; transform: scale(.34); transform-origin: top center; border-radius: 18px; box-shadow: 0 0 0 3px #e2e8ef, 0 12px 30px -12px rgba(15, 34, 54, .25); }

/* SMTP "Use it in your language": light code panel with ink text, as in Figma 20:1155 */
body.od .smtp-panel .od-codebar { background: #eef2f6; color: #5a6b7d; border: 1px solid #e2e8ef; border-bottom: 0; }
body.od .smtp-panel .od-codebar .btn { background: #fff; color: #0f2236; border: 1px solid #e2e8ef; box-shadow: none; }
body.od .smtp-panel pre.od-code.od-code-dark { background: #f4f7fa; color: #0f2236; border: 1px solid #e2e8ef; border-top: 0; font: 13px/1.6 "Geist Mono", var(--mono); }

/* ==========================================================================
   Automation list (Figma "Dashboard · Automation", node 15:423)
   ========================================================================== */
body.od .od-metric-value + .od-metric-sub.is-warn, body.od .od-metric-sub.is-warn { color: #c98a0b; }
body.od .au2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
body.od .au2-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.od .au2-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
body.od .au2-top { display: flex; align-items: flex-start; gap: 14px; }
body.od .au2-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #e8f3fc; color: #1273c4; }
body.od .au2-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.od .au2-name { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.2px; color: #0f2236; text-decoration: none; }
body.od .au2-name:hover { color: #1273c4; text-decoration: none; }
body.od .au2-desc { font-size: 13px; line-height: 1.5; color: #5a6b7d; }
body.od .au2-switch { position: relative; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: #d5dde6; cursor: pointer; flex: none; margin-top: 4px; transition: background .15s ease; }
body.od .au2-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15, 34, 54, .2); transition: transform .15s ease; }
body.od .au2-switch.is-on { background: #1273c4; }
body.od .au2-switch.is-on i { transform: translateX(16px); }
body.od .au2-switch:focus-visible { outline: 2px solid rgba(18, 115, 196, .45); outline-offset: 2px; }
body.od .au2-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-left: 54px; }
body.od .au2-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #f4f7fa; border: 1px solid #e2e8ef; font-size: 12px; font-weight: 500; color: #0f2236; white-space: nowrap; }
body.od .au2-chip::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: #1273c4; }
body.od .au2-dash { width: 14px; height: 1px; background: #c9d4e0; }
body.od .au2-more { font-size: 12px; color: #8a99a8; }
body.od .au2-foot { display: flex; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid #e2e8ef; }
body.od .au2-foot > span { flex: 1; font-size: 13px; color: #5a6b7d; }
body.od .au2-copy { padding: 0; border: 0; background: none; font: 500 14px/1.4 var(--font); color: #1273c4; cursor: pointer; }
body.od .au2-copy:hover { text-decoration: underline; }
body.od .au2-empty { font-size: 14px; line-height: 1.6; color: #5a6b7d; }
body.od .au2-empty strong { display: block; font-size: 16px; color: #0f2236; margin-bottom: 4px; }

body.od .au2-describe { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 88px; }
body.od .au2-describe h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.2px; color: #0f2236; }
body.od .au2-describe h2 svg { color: #1273c4; }
body.od .au2-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
body.od .au2-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: #0f2236; margin: 0; }
body.od .au2-form input, body.od .au2-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #e2e8ef; border-radius: 10px; background: #fff; font: 400 15px/1.5 var(--font); color: #0f2236; box-shadow: none; }
body.od .au2-form textarea { resize: vertical; min-height: 140px; }
body.od .au2-form input:focus, body.od .au2-form textarea:focus { outline: none; border-color: #1273c4; box-shadow: 0 0 0 3px rgba(18, 115, 196, .14); }
body.od .au2-form .btn { align-self: flex-start; }
body.od .au2-hint { margin: -6px 0 0; font-size: 12px; line-height: 1.5; color: #8a99a8; }

@media (max-width: 1100px) { body.od .au2-grid { grid-template-columns: 1fr; } body.od .au2-describe { position: static; } }
@media (max-width: 640px) { body.od .au2-steps { padding-left: 0; } body.od .au2-foot { flex-wrap: wrap; gap: 10px; } }
body.od .au2-name { font-size: 17px; letter-spacing: -.15px; }

/* ==========================================================================
   Affiliate portal (upgrade/affiliate/*) — Figma "Dashboard · Refer and earn" (27:608).
   ========================================================================== */
body.od .af-page { gap: 1.5rem; }
body.od .af-head { align-items: flex-end; margin-bottom: 0; }
body.od .af-rank-badge { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 10px; height: 28px; padding: 0 12px; border-radius: 999px; background: #eef5fc; color: #1273c4; font-size: 13px; font-weight: 700; letter-spacing: 0; }
body.od .af-withdraw { min-height: 40px; padding: 0 18px; }
body.od .af-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--od-line); margin-top: -.25rem; overflow-x: auto; scrollbar-width: none; }
body.od .af-tabs::-webkit-scrollbar { display: none; }
body.od .af-tabs a { padding: 0 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 15px; color: var(--od-muted); text-decoration: none; white-space: nowrap; }
body.od .af-tabs a:hover { color: var(--od-ink); }
body.od .af-tabs a.is-on { color: var(--od-blue); border-bottom-color: var(--od-blue); font-weight: 500; }
body.od .af-tabs a:focus-visible { outline: 2px solid var(--od-blue); outline-offset: 2px; border-radius: 4px; }
body.od .af-ok { color: var(--od-ok); }
body.od .af-note { margin: 0; font-size: .86rem; color: var(--od-muted); line-height: 1.55; }
body.od .af-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
body.od .af-row.af-row-even { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
body.od .af-row > .od-panel-pad { display: flex; flex-direction: column; gap: 1.1rem; }

/* Earnings chart */
body.od .af-chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1rem; height: 200px; padding-top: .5rem; }
body.od .af-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
body.od .af-bar { width: min(36px, 70%); border-radius: 4px 4px 0 0; background: #b8dcf5; min-height: 4px; }
body.od .af-col.is-now .af-bar { background: var(--od-blue); }
body.od .af-amt { font-size: 11px; color: var(--od-faint); font-variant-numeric: tabular-nums; min-height: 14px; }
body.od .af-col.is-now .af-amt { color: var(--od-ink); font-weight: 500; }
body.od .af-x { font-size: 12px; color: var(--od-faint); margin-top: 4px; }
body.od .af-col.is-now .af-x { color: var(--od-ink); }

/* Referral link card */
body.od .af-linkbox { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 10px; background: var(--od-cloud); box-shadow: inset 0 0 0 1px var(--od-line); color: var(--od-faint); }
body.od .af-linkbox input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 0; min-height: 32px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: var(--od-ink); }
body.od .af-linkbox input:focus { outline: none; }
body.od .af-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
body.od .af-facts dt { font-size: 12px; color: var(--od-faint); margin-bottom: 4px; }
body.od .af-facts dd { margin: 0; font-size: 15px; color: var(--od-ink); }
body.od .af-share { display: flex; flex-wrap: wrap; gap: 8px; }
body.od .af-share .btn { min-height: 40px; }

/* Lists, empty states, filters */
body.od .af-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2.5rem 1.5rem 2.75rem; text-align: center; border-top: 1px solid var(--od-line); }
body.od .af-empty strong { font-size: 15px; font-weight: 600; color: var(--od-ink); }
body.od .af-empty .aff-art { width: 180px; margin-bottom: 6px; }
body.od .af-set-art { width: 200px; margin: -8px auto 4px; }
body.od .af-empty span { font-size: .88rem; color: var(--od-muted); max-width: 46ch; }
body.od .af-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--od-cloud); flex-wrap: wrap; }
body.od .af-seg a { padding: .38rem .75rem; border-radius: 8px; font-size: .82rem; color: var(--od-muted); text-decoration: none; }
body.od .af-seg a span { margin-left: 4px; color: var(--od-faint); font-variant-numeric: tabular-nums; }
body.od .af-seg a.is-on { background: var(--od-paper); color: var(--od-ink); box-shadow: 0 1px 3px rgba(15, 34, 54, .1); }
body.od .af-textbtn { border: 0; background: none; padding: 0; font: inherit; font-size: .86rem; font-weight: 500; color: var(--od-blue); cursor: pointer; }
body.od .af-textbtn:hover { text-decoration: underline; }
body.od .alert.af-warn { background: var(--od-queued-tint); color: #8a5e05; border-color: transparent; }
body.od .alert.af-warn a { color: inherit; font-weight: 600; }
body.od .af-tips { margin: 0; padding-left: 1.1rem; display: grid; gap: .6rem; font-size: .9rem; color: var(--od-muted); line-height: 1.55; }
body.od .af-snips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0 1.5rem 1.5rem; }
body.od .af-snip { border-radius: 12px; background: var(--od-cloud); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
body.od .af-snip-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
body.od .af-snip-head strong { font-size: .9rem; font-weight: 600; color: var(--od-ink); }
body.od .af-snip p { margin: 0; font-size: .88rem; color: var(--od-muted); line-height: 1.6; }
body.od .af-form { display: flex; flex-direction: column; gap: 1rem; }
body.od .af-list { margin: 0; display: grid; }
body.od .af-list div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--od-line); font-size: .9rem; }
body.od .af-list div:last-child { border-bottom: 0; }
body.od .af-list dt { color: var(--od-muted); }
body.od .af-list dd { margin: 0; color: var(--od-ink); font-weight: 500; }
body.od .af-private { display: flex; align-items: center; gap: .5rem; padding: .75rem .9rem; border-radius: 10px; background: var(--od-tint); color: #0e5fa3; }

/* Withdraw dialog */
body.od .af-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 1rem; background: rgba(15, 34, 54, .4); }
body.od .af-modal[hidden] { display: none; }
body.od .af-dialog { width: min(440px, 100%); background: var(--od-paper); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 24px 64px -12px rgba(15, 34, 54, .35); }
body.od .af-dialog h2 { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--od-ink); }
body.od .af-dialog-foot { display: flex; justify-content: flex-end; gap: .5rem; }

@media (max-width: 1100px) {
    body.od .af-row, body.od .af-row.af-row-even { grid-template-columns: 1fr; }
    body.od .af-snips { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    body.od .af-head .af-withdraw { width: 100%; }
    body.od .af-facts { grid-template-columns: 1fr 1fr; }
    body.od .af-chart { height: 170px; gap: .4rem; }
    body.od .af-snips { padding: 0 1rem 1rem; }
}
body.od .af-row.af-row-even { grid-template-columns: 1fr; }
body.od .af-page .od-table td:first-child { white-space: nowrap; }

/* ==========================================================================
   Phones: nothing may widen the page, and content sits closer to the edges.
   ========================================================================== */
/* A scroll wrapper must contain its absolutely positioned children (e.g. the visually
   hidden "Actions" column header), or they escape it and widen the whole page — which
   also pushes the menu button off-screen on phones. */
body.od .od-table-wrap { position: relative; }
body.od .od-content { overflow-wrap: break-word; }
body.od .od-content code, body.od .od-content .od-mono { overflow-wrap: anywhere; }

@media (max-width: 760px) {
    /* The classic stylesheet pads .dash-main by 1.2rem on phones (!important); in this design the
       content area sets its own gutter, so that extra padding only pushed every card inwards. */
    body.od .dash-main { padding: 0 !important; }
    body.od .od-content { padding: 12px 8px 28px !important; }
    /* Panel headings: the title takes the room, an action link stays on one line beside it. */
    body.od .od-panel-head { flex-wrap: wrap; align-items: flex-start; row-gap: .4rem; }
    body.od .od-panel-head > div:first-child { flex: 1 1 200px; min-width: 0; }
    body.od .od-panel-head > .od-link, body.od .od-panel-head > .btn, body.od .od-panel-head > a { flex: none; white-space: nowrap; }
    /* Segmented tabs (e.g. billing period) fill the width in one row instead of wrapping. */
    body.od .od-tabs { flex-wrap: nowrap; width: 100%; align-self: stretch; }
    body.od .od-tabs button { flex: 1 1 0; min-width: 0; padding: .45rem .3rem; white-space: nowrap; text-align: center; }
    /* Filter bars (e.g. Deliveries): search on its own row, the other fields two to a row, all full width. */
    body.od .od-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px !important; }
    body.od .od-filters > .od-filter { min-width: 0; }
    body.od .od-filters > .od-filter-search { grid-column: 1 / -1; }
    body.od .od-filters .od-filter select, body.od .od-filters .od-filter input { width: 100%; min-width: 0; }
    body.od .od-filters > .btn { width: 100%; justify-content: center; }
    /* A table with no rows: drop the scroll width so the "nothing yet" message is not cut off. */
    body.od .od-table-wrap > .od-table:has(td.od-empty[colspan]) { min-width: 0; }
    body.od .od-table:has(td.od-empty[colspan]) thead { display: none; }
    body.od .od-page { gap: 1rem; }
    body.od .od-panel-pad { padding: 14px !important; }
    body.od .od-panel-head { padding-left: 14px !important; padding-right: 14px !important; }
    body.od .od-table th, body.od .od-table td { padding-left: 12px; padding-right: 12px; }
    body.od .od-metric { padding: 14px !important; }
    body.od .od-topbar { padding-left: 10px !important; padding-right: 10px !important; }

    /* KYC "Add units" rows: keep the price on one line */
    body.od .od-buy-row { grid-template-columns: minmax(0, 1fr) 64px 78px; column-gap: .5rem; padding: .6rem .7rem; }
    body.od .od-buy-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 1.6rem; }
    body.od .od-buy-row input[type="number"] { padding: .3rem .25rem; }
}

/* Verification history on phones: each record becomes a compact card. */
@media (max-width: 600px) {
    body.od .od-table-wrap > .kh-table { min-width: 0; }
    body.od .kh-table, body.od .kh-table tbody { display: block; }
    body.od .kh-table thead { display: none; }
    body.od .kh-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-top: 1px solid var(--od-line); }
    body.od .kh-table tbody tr:first-child { border-top: 0; }
    body.od .kh-table td { display: block; padding: 0 !important; border: 0 !important; background: none !important; }
    body.od .kh-table td:nth-child(1) { grid-column: 1; grid-row: 1; min-width: 0; }
    body.od .kh-table td:nth-child(6) { grid-column: 2; grid-row: 1; justify-self: end; }
    body.od .kh-table td:nth-child(4) { grid-column: 1; grid-row: 2; max-width: none; font-size: .9rem; }
    body.od .kh-table td:nth-child(7) { grid-column: 2; grid-row: 2; justify-self: end; font-size: .8rem; color: var(--od-muted); }
    body.od .kh-table td:nth-child(2), body.od .kh-table td:nth-child(3), body.od .kh-table td:nth-child(5) { display: none; }
    body.od .kh-table .kh-ref { font-size: .78rem; white-space: normal; overflow-wrap: anywhere; }
    body.od .kh-table td.od-empty { grid-column: 1 / -1; }
}

/* Sidebar tags: "New" for recently added pages, "Hot" for the one to push. */
body.od .od-tag { margin-left: auto; flex: none; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1.5; letter-spacing: .01em; }
body.od .od-tag.is-new { background: #e6f5ee; color: #0f7a52; }
body.od .od-tag.is-hot { background: #fde8e4; color: #c0341d; }
body.od .od-tag + .od-count { margin-left: 6px; }