:root {
    /* Paces Galaxy (Coderthemes) */
    --paces-primary: #6c7cff;
    --paces-primary-hover: #515dbf;
    --paces-primary-rgb: 108, 124, 255;
    --paces-body-bg: #fdfdfd;
    --paces-surface: #ffffff;
    --paces-surface-2: #f3f5ff;
    --paces-border: #edf2f9;
    --paces-border-soft: #edf2f9;
    --paces-text: #212529;
    --paces-muted: #6c757d;
    --paces-radius: 6px;
    --paces-control-radius: 6px;
    --paces-shadow: 2px 8px 16px rgba(57, 62, 80, 0.07);
    --paces-success: #3ce6c2;
    --paces-info: #4fd1ff;
    --paces-warning: #ffb84d;
    --paces-danger: #ff5c8a;

    --adm-bg: var(--paces-body-bg);
    --adm-panel: var(--paces-surface);
    --adm-panel-2: var(--paces-surface-2);
    --adm-border: var(--paces-border);
    --adm-text: var(--paces-text);
    --adm-muted: var(--paces-muted);
    --adm-primary: var(--paces-primary);
    --adm-primary-soft: rgba(var(--paces-primary-rgb), .15);
    --adm-danger: var(--paces-danger);
    --adm-danger-soft: rgba(255, 92, 138, .15);
    --adm-success: var(--paces-success);
    --adm-success-soft: rgba(60, 230, 194, .15);
    --adm-warning: var(--paces-warning);
    --adm-warning-soft: rgba(255, 184, 77, .15);
    --adm-surface: var(--paces-surface);
    --adm-surface-2: #f6f7fb;
    --adm-surface-hover: #eaf2ff;
    --adm-radius: var(--paces-radius);
    --adm-font: "Play", system-ui, -apple-system, sans-serif;
    --adm-display: "Play", system-ui, sans-serif;
    --adm-shadow: var(--paces-shadow);
    --adm-shadow-lg: 2px 12px 28px rgba(57, 62, 80, 0.1);
    --adm-sidebar-width: 245px;
    --adm-topbar-height: 65px;
    --adm-scrollbar-size: 8px;
    --adm-scrollbar-track: transparent;
    --adm-scrollbar-thumb: rgba(100, 116, 139, .32);
    --adm-scrollbar-thumb-hover: rgba(71, 85, 105, .5);
    color-scheme: light;
}

* { box-sizing: border-box; }

.oct-admin-app,
.oct-admin-sidebar,
.oct-admin-modal-dialog,
.oct-opg-bank-picker-menu,
.oct-admin-field-help-popover {
    scrollbar-width: thin;
    scrollbar-color: var(--adm-scrollbar-thumb) var(--adm-scrollbar-track);
}

.oct-admin-app::-webkit-scrollbar,
.oct-admin-sidebar::-webkit-scrollbar,
.oct-admin-modal-dialog::-webkit-scrollbar,
.oct-opg-bank-picker-menu::-webkit-scrollbar,
.oct-admin-field-help-popover::-webkit-scrollbar {
    width: var(--adm-scrollbar-size);
    height: var(--adm-scrollbar-size);
}

.oct-admin-app::-webkit-scrollbar-track,
.oct-admin-sidebar::-webkit-scrollbar-track,
.oct-admin-modal-dialog::-webkit-scrollbar-track,
.oct-opg-bank-picker-menu::-webkit-scrollbar-track,
.oct-admin-field-help-popover::-webkit-scrollbar-track {
    background: var(--adm-scrollbar-track);
}

.oct-admin-app::-webkit-scrollbar-thumb,
.oct-admin-sidebar::-webkit-scrollbar-thumb,
.oct-admin-modal-dialog::-webkit-scrollbar-thumb,
.oct-opg-bank-picker-menu::-webkit-scrollbar-thumb,
.oct-admin-field-help-popover::-webkit-scrollbar-thumb {
    background-color: var(--adm-scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.oct-admin-app::-webkit-scrollbar-thumb:hover,
.oct-admin-sidebar::-webkit-scrollbar-thumb:hover,
.oct-admin-modal-dialog::-webkit-scrollbar-thumb:hover,
.oct-opg-bank-picker-menu::-webkit-scrollbar-thumb:hover,
.oct-admin-field-help-popover::-webkit-scrollbar-thumb:hover {
    background-color: var(--adm-scrollbar-thumb-hover);
}

.oct-admin-app::-webkit-scrollbar-corner,
.oct-admin-modal-dialog::-webkit-scrollbar-corner {
    background: transparent;
}

body {
    margin: 0;
    font-family: var(--adm-font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--adm-text);
    background: var(--adm-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

.oct-admin-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background:
        radial-gradient(ellipse 70% 55% at 15% 10%, rgba(108, 124, 255, .14), transparent 55%),
        radial-gradient(ellipse 55% 45% at 90% 85%, rgba(14, 165, 233, .12), transparent 50%),
        #f4f7fb;
}

/* —— Login Paces Auth Basic (skin Galaxy) —— */
.oct-admin-login--paces {
    position: relative;
    overflow: hidden;
    font-family: "Play", system-ui, sans-serif;
    background: #fdfdfd;
    place-items: stretch;
    padding: 0;
}

.oct-auth-decor {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    line-height: 0;
}

.oct-auth-decor img {
    width: min(520px, 62vw);
    height: auto;
    opacity: .42;
    display: block;
}

.oct-auth-decor--tr {
    top: 0;
    right: 0;
}

.oct-auth-decor--bl {
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
}

.oct-auth-box {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem 1.75rem;
    width: 100%;
}

.oct-auth-card {
    width: min(460px, 100%);
    padding: 2rem 1.75rem 1.65rem;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #edf2f9;
    box-shadow: 2px 8px 16px rgba(57, 62, 80, 0.07);
}

.oct-auth-brand {
    text-align: center;
    margin-bottom: 1.35rem;
}

.oct-auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.oct-auth-logo img {
    max-height: 28px;
    width: auto;
    object-fit: contain;
}

.oct-auth-title {
    margin: 0 0 0.45rem;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    color: #212529;
    line-height: 1.35;
}

.oct-auth-lead {
    margin: 0 auto;
    max-width: 22rem;
    font-size: 13px;
    line-height: 1.5;
    color: #6c757d;
    font-weight: 400;
}

.oct-admin-login--paces .oct-admin-alert {
    margin-bottom: 1rem;
}

.oct-auth-form {
    display: grid;
    gap: 0.95rem;
}

.oct-auth-field {
    display: grid;
    gap: 0.35rem;
}

.oct-auth-field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #495057;
}

.oct-auth-req {
    color: #e5513e;
    font-weight: 600;
}

.oct-auth-field input,
.oct-auth-password-wrap input {
    width: 100%;
    border: 1px solid #edf2f9;
    border-radius: 6px;
    background: #fff;
    color: #212529;
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.oct-auth-field input:focus,
.oct-auth-password-wrap input:focus {
    outline: none;
    border-color: rgba(108, 124, 255, .45);
    box-shadow: 0 0 0 0.2rem rgba(108, 124, 255, .12);
}

.oct-auth-password-wrap {
    position: relative;
}

.oct-auth-password-wrap input {
    padding-right: 2.6rem;
}

.oct-auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #98a6ad;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}

.oct-auth-password-toggle:hover {
    color: #6c7cff;
    background: #f3f5ff;
}

.oct-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.oct-auth-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    color: #495057;
    font-weight: 400;
    cursor: pointer;
}

.oct-auth-check input {
    width: 1rem;
    height: 1rem;
    accent-color: #6c7cff;
    margin: 0;
}

.oct-auth-link {
    font-size: 0.8125rem;
    color: #6c757d;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}

.oct-auth-link:hover {
    color: #6c7cff;
}

.oct-auth-submit {
    width: 100%;
    margin-top: 0.15rem;
    border-radius: 6px !important;
    font-weight: 700 !important;
    padding: 0.7rem 1rem !important;
    background: #6c7cff !important;
    border-color: #6c7cff !important;
}

.oct-auth-submit:hover {
    background: #515dbf !important;
    border-color: #515dbf !important;
}

.oct-auth-help {
    margin: 1.15rem 0 0;
    text-align: center;
    font-size: 0.8125rem;
    color: #6c757d;
    line-height: 1.45;
}

.oct-auth-help strong {
    color: #495057;
    font-weight: 600;
}

.oct-auth-copy {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: 0.8125rem;
    color: #98a6ad;
}

.oct-admin-login-card {
    width: min(420px, 100%);
    padding: 1.75rem 1.6rem;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--adm-shadow-lg);
    backdrop-filter: blur(12px);
}

.oct-admin-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.oct-admin-brand strong {
    display: block;
    font-family: var(--adm-display);
    font-weight: 700;
    letter-spacing: -.02em;
}

.oct-admin-brand span { color: var(--adm-muted); font-size: .85rem; }

.oct-admin-form,
.oct-admin-grid {
    display: grid;
    gap: .85rem;
}

.oct-admin-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oct-admin-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oct-admin-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oct-admin-span-2 { grid-column: span 2; }
.oct-admin-span-3 { grid-column: span 3; }
.oct-admin-span-4 { grid-column: span 4; }

.oct-admin-form label,
.oct-admin-grid label {
    display: grid;
    gap: .4rem;
}

.oct-admin-form span,
.oct-admin-grid span {
    font-size: 12px;
    font-weight: 700;
    color: #6c757d;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    width: 100%;
    border: 1px solid #edf2f9;
    border-radius: 6px;
    background: #fff;
    color: var(--adm-text);
    padding: .62rem .85rem;
    font: inherit;
    font-size: 13px;
    color-scheme: light;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

select option {
    background: #fff;
    color: var(--adm-text);
}

textarea { resize: vertical; min-height: 88px; }

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgba(108, 124, 255, .55);
    box-shadow: 0 0 0 0.2rem rgba(108, 124, 255, .12);
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none;
    cursor: pointer;
    opacity: 0.7;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

input[readonly] {
    opacity: .75;
    cursor: not-allowed;
    background: #f6f7fb;
}

.oct-admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1px solid transparent;
    border-radius: var(--paces-radius);
    padding: .65rem 1rem;
    font-weight: 400;
    font-size: .875rem;
    cursor: pointer;
    background: transparent;
    color: var(--adm-text);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.oct-admin-btn:hover {
    transform: none;
}

.oct-admin-btn:active {
    transform: none;
}

.oct-admin-btn-primary {
    background: var(--paces-primary);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
}

.oct-admin-btn-primary:hover {
    background: var(--paces-primary-hover);
    box-shadow: none;
}

.oct-admin-btn-ghost {
    border-color: var(--paces-border);
    background: #fff;
    color: #495057;
}

.oct-admin-btn-ghost:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.oct-admin-btn-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.oct-admin-btn-danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.oct-admin-btn-sm {
    padding: .42rem .78rem;
    font-size: .78rem;
    border-radius: .65rem;
}

.oct-admin-alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .9rem 1.05rem;
    border-radius: var(--paces-radius);
    margin-bottom: 1rem;
    font-size: .88rem;
    line-height: 1.45;
}

.oct-admin-alert i {
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: .05rem;
}

.oct-admin-alert-error {
    background: rgba(255, 92, 138, .15);
    border: 1px solid rgba(255, 92, 138, .3);
    color: #bf4568;
}

.oct-admin-alert-error i {
    color: #ff5c8a;
}

.oct-admin-alert-success {
    background: rgba(60, 230, 194, .15);
    border: 1px solid rgba(60, 230, 194, .3);
    color: #2dad92;
}

.oct-admin-alert-success i {
    color: #3ce6c2;
}

.oct-admin-alert-warning {
    background: rgba(255, 184, 77, .15);
    border: 1px solid rgba(255, 184, 77, .3);
    color: #bf8a3a;
}

.oct-admin-alert-warning i {
    color: #ffb84d;
}

.oct-admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1200;
    border-bottom: 1px solid var(--paces-border);
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.oct-admin-topbar::after {
    display: none;
}

.oct-admin-topbar-inner,
.oct-admin-layout {
    width: calc(100% - 1.25rem);
    max-width: none;
    margin: 0 auto;
}

.oct-admin-topbar-inner {
    position: relative;
    min-height: var(--adm-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.oct-admin-topbar-start {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.oct-admin-menu-toggle {
    display: none;
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background .15s ease, color .15s ease;
}

.oct-admin-menu-toggle:hover {
    background: #eaf2ff;
    border-color: transparent;
    color: #6c7cff;
}

.oct-admin-topbar .oct-admin-brand {
    margin-bottom: 0;
    gap: .7rem;
}

.oct-admin-topbar .oct-admin-brand img {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .7rem;
    box-shadow: 0 4px 12px rgba(108, 124, 255, .18);
}

.oct-admin-topbar .oct-admin-brand strong {
    font-size: 1rem;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.oct-admin-brand span {
    display: block;
    color: var(--adm-muted);
    font-size: .72rem;
    font-weight: 600;
    margin-top: .12rem;
    letter-spacing: .01em;
}

.oct-admin-topbar-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

a.oct-admin-topbar-icon-btn {
    text-decoration: none;
}

.oct-admin-topbar-icon-btn {
    position: relative;
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0;
    transition: background .15s ease, color .15s ease;
}

.oct-admin-topbar-icon-btn:hover {
    color: #6c7cff;
    background: #eaf2ff;
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

.oct-admin-topbar-icon-btn.is-notify-pulse {
    animation: octAdminNotifyPulse .55s ease 2;
}

@keyframes octAdminNotifyPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.oct-admin-notify-wrap,
.oct-admin-user-wrap {
    position: relative;
}

.oct-admin-notify-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: .95rem;
    height: .95rem;
    padding: 0 .22rem;
    border-radius: 999px;
    background: #ff5c8a;
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    line-height: .95rem;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: none;
}

.oct-admin-notify-badge.is-hidden,
.oct-admin-notify-badge[hidden] {
    display: none !important;
}

.oct-admin-notify-menu,
.oct-admin-user-menu {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    z-index: 1400;
    min-width: min(360px, calc(100vw - 2rem));
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: #fff;
    box-shadow: var(--paces-shadow);
    overflow: hidden;
}

.oct-admin-user-menu {
    min-width: 240px;
}

.oct-admin-notify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--paces-border);
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--adm-text);
}

.oct-admin-notify-head > strong,
.oct-admin-notify-head > span:first-child {
    font-size: 14px;
    font-weight: 700;
}

.oct-admin-notify-count {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: .35rem;
    padding: .2rem .55rem;
    border-radius: 6px;
    background: rgba(60, 230, 194, .15);
    color: #2dad92;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.oct-admin-notify-count[hidden] {
    display: none !important;
}

.oct-admin-notify-mark-all {
    border: 0;
    background: transparent;
    color: #6c7cff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.oct-admin-notify-mark-all:hover {
    color: #515dbf;
}

.oct-admin-notify-list {
    max-height: 320px;
    overflow: auto;
}

.oct-admin-notify-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--paces-border);
    background: transparent;
    color: inherit;
    text-align: left;
    padding: .85rem 1rem;
    cursor: pointer;
    font: inherit;
}

.oct-admin-notify-item:last-child {
    border-bottom: 0;
}

.oct-admin-notify-item:hover {
    background: #f3f5ff;
}

.oct-admin-notify-item.is-unread {
    background: rgba(108, 124, 255, .08);
}

.oct-admin-notify-item-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    background: #f3f5ff;
    color: #6c7cff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.oct-admin-notify-item.is-unread .oct-admin-notify-item-icon {
    background: rgba(108, 124, 255, .18);
}

.oct-admin-notify-item-body {
    min-width: 0;
    flex: 1;
}

.oct-admin-notify-item-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: .15rem;
    color: var(--adm-text);
}

.oct-admin-notify-item-message {
    font-size: 12px;
    color: var(--adm-muted);
    line-height: 1.45;
}

.oct-admin-notify-item-time {
    margin-top: .3rem;
    font-size: 11px;
    color: #98a6ad;
}

.oct-admin-notify-empty {
    padding: 1.35rem 1rem;
    color: var(--adm-muted);
    font-size: 13px;
    text-align: center;
}

.oct-admin-notify-section {
    padding: .45rem 1rem .25rem;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--adm-muted);
    background: rgba(148, 163, 184, .08);
    border-bottom: 1px solid var(--paces-border);
}

.oct-admin-notify-item.is-unread .oct-admin-notify-item-title {
    font-weight: 800;
}

.oct-admin-notify-item-dot {
    width: .5rem;
    height: .5rem;
    margin-top: .4rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: #6c7cff;
}

.oct-admin-notify-item-check {
    margin-top: .1rem;
    flex-shrink: 0;
    font-size: .85rem;
    color: #22c55e;
}

.oct-admin-notify-item.is-read .oct-admin-notify-item-icon {
    background: rgba(148, 163, 184, .14);
    color: #98a2b3;
}

.oct-admin-notify-item.is-read .oct-admin-notify-item-title {
    font-weight: 600;
    color: var(--adm-muted);
}

.oct-admin-notify-item.is-read .oct-admin-notify-item-message {
    opacity: .75;
}

.oct-admin-notify-item.is-just-read {
    box-shadow: inset 3px 0 0 #22c55e;
}

.oct-admin-nav-badge[hidden] {
    display: none !important;
}

.oct-admin-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--adm-text);
    padding: .28rem .55rem .28rem .28rem;
    cursor: pointer;
    font: inherit;
    max-width: min(240px, 42vw);
    box-shadow: none;
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition: background .15s ease, color .15s ease, outline-color .15s ease;
}

.oct-admin-user-trigger:hover {
    background: #eaf2ff;
    border-color: transparent;
    outline-color: transparent;
    transform: none;
    box-shadow: none;
    color: #6c7cff;
}

.oct-admin-user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(108, 124, 255, .15);
    color: #515dbf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: none;
}

.oct-admin-user-meta {
    display: grid;
    gap: .05rem;
    min-width: 0;
    text-align: left;
}

.oct-admin-user-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}

.oct-admin-user-role {
    font-size: 11px;
    color: var(--adm-muted);
    font-weight: 400;
}

.oct-admin-user-trigger .bi-chevron-down {
    font-size: .72rem;
    color: var(--adm-muted);
    margin-left: .1rem;
}

.oct-admin-user-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .7rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--paces-border);
    background: transparent;
    color: var(--adm-text);
    text-decoration: none;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
}

.oct-admin-user-item:last-child {
    border-bottom: 0;
}

.oct-admin-user-item:hover {
    background: #f3f5ff;
    color: #6c7cff;
}

.oct-admin-user-item.is-danger {
    color: #bf4568;
}

.oct-admin-user-item.is-danger:hover {
    background: rgba(255, 92, 138, .12);
    color: #bf4568;
}

@media (max-width: 760px) {
    .oct-admin-topbar-inner {
        gap: .55rem;
        min-height: 3.5rem;
    }

    .oct-admin-topbar-actions {
        gap: .3rem;
    }

    .oct-admin-topbar .oct-admin-brand strong {
        font-size: .92rem;
    }

    .oct-admin-brand span {
        font-size: .68rem;
        max-width: 9.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .oct-admin-user-meta,
    .oct-admin-user-trigger .bi-chevron-down {
        display: none;
    }

    .oct-admin-user-trigger {
        padding: .28rem;
        max-width: none;
    }

    .oct-admin-topbar-icon-btn {
        width: 2.25rem;
        height: 2.25rem;
    }

    .oct-admin-notify-menu {
        right: -.25rem;
        min-width: min(320px, calc(100vw - 1.25rem));
    }

    .oct-admin-demo-card-main {
        flex: 1 1 100%;
    }

    .oct-opg-account-card:hover,
    .oct-admin-opg-card:hover,
    .oct-admin-settings-card:hover,
    .oct-admin-quick-action:hover,
    .oct-dash-kpi:hover {
        transform: none;
    }
}

.oct-admin-layout {
    display: grid;
    grid-template-columns: var(--adm-sidebar-width) 1fr;
    gap: 0;
    padding: 0 0 2.5rem;
    align-items: start;
}

.oct-admin-sidebar {
    position: sticky;
    top: calc(var(--adm-topbar-height) + 1rem);
    align-self: start;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--adm-topbar-height) - 2rem);
    overflow: auto;
    padding: .85rem .7rem;
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: var(--paces-surface);
    box-shadow: none;
}

.oct-admin-sidebar-head {
    padding: .3rem .45rem .8rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.oct-admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.oct-admin-sidebar-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: .7rem;
    background: var(--paces-primary);
    color: #fff;
    font-size: .88rem;
    box-shadow: 0 6px 14px rgba(108, 124, 255, .28);
    flex-shrink: 0;
    overflow: hidden;
}

.oct-admin-sidebar-brand-mark.has-image {
    background: transparent;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}

.oct-admin-sidebar-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: .7rem;
}

.oct-admin-brand img {
    border-radius: 50%;
    object-fit: cover;
}

.oct-admin-sidebar-brand strong {
    display: block;
    font-family: var(--adm-display);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--adm-text);
    line-height: 1.15;
}

.oct-admin-sidebar-brand span {
    display: block;
    font-size: .66rem;
    font-weight: 500;
    color: var(--adm-muted);
    margin-top: .1rem;
}

.oct-admin-nav {
    display: grid;
    gap: .35rem;
    flex: 1;
}

.oct-admin-nav-group {
    display: grid;
    gap: .12rem;
    padding: .15rem 0 .45rem;
    margin: 0;
    border-bottom: 0;
}

.oct-admin-nav-group + .oct-admin-nav-group {
    margin-top: .1rem;
    padding-top: .35rem;
    border-top: 1px solid rgba(15, 23, 42, .05);
}

.oct-admin-nav-group:last-child,
.oct-admin-nav-group--footer {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.oct-admin-nav-label {
    padding: .4rem .55rem .2rem;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.oct-admin-nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #6c757d;
    text-align: left;
    padding: .5rem .75rem;
    font-weight: 400;
    font-size: .9125rem;
    letter-spacing: 0;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.oct-admin-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: color .15s ease;
}

.oct-admin-nav-btn i {
    width: auto;
    text-align: center;
    font-size: inherit;
    opacity: 1;
    line-height: 1;
}

.oct-admin-nav-btn > span:not(.oct-admin-nav-icon) {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.oct-admin-nav-badge {
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #fecaca, #fee2e2);
    color: #b91c1c;
    font-style: normal;
    font-size: .6rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .15rem;
    box-shadow: 0 1px 2px rgba(185, 28, 28, .12);
}

.oct-admin-nav-btn:hover {
    background: #eaf2ff;
    border-color: transparent;
    color: var(--paces-primary);
    box-shadow: none;
}

.oct-admin-nav-btn:hover .oct-admin-nav-icon {
    background: transparent;
    color: var(--paces-primary);
    transform: none;
}

.oct-admin-nav-btn.is-active {
    background: #f3f5ff;
    border-color: transparent;
    color: var(--paces-primary);
    font-weight: 700;
    box-shadow: none;
}

.oct-admin-nav-btn.is-active::before {
    display: none;
}

.oct-admin-nav-btn.is-active .oct-admin-nav-icon {
    background: transparent;
    color: var(--paces-primary);
    box-shadow: none;
}

.oct-admin-nav-btn.is-active .oct-admin-nav-icon {
    background: transparent;
    color: var(--paces-primary);
    box-shadow: none;
}

.oct-admin-nav-branch {
    display: grid;
    gap: .12rem;
}

.oct-admin-nav-parent .oct-admin-nav-caret {
    margin-left: auto;
    font-size: .68rem;
    color: #94a3b8;
    transition: transform .18s ease, color .15s ease;
}

.oct-admin-nav-branch.is-open > .oct-admin-nav-parent .oct-admin-nav-caret {
    transform: rotate(180deg);
    color: #64748b;
}

.oct-admin-nav-parent.is-branch-active {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, .04);
    color: #334155;
}

.oct-admin-nav-parent.is-branch-active .oct-admin-nav-icon {
    background: #e2e8f0;
    color: #475569;
}

.oct-admin-nav-submenu {
    display: grid;
    gap: .08rem;
    margin: .1rem 0 .15rem .6rem;
    padding: .12rem 0 .12rem .5rem;
    border-left: 2px solid #e2e8f0;
}

.oct-admin-nav-submenu[hidden] {
    display: none !important;
}

.oct-admin-nav-subbtn .oct-admin-nav-badge {
    margin-left: auto;
}

.oct-admin-nav-subbtn .oct-admin-nav-icon {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: .42rem;
    font-size: .68rem;
}

.oct-admin-nav-sublabel {
    display: grid;
    gap: .05rem;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}

.oct-admin-nav-sublabel small {
    font-size: .62rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.2;
}

.oct-admin-nav-subbtn.is-soon {
    opacity: .78;
}

.oct-admin-nav-soon {
    margin-left: auto;
    margin-right: .1rem;
    padding: .12rem .35rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, .16);
    color: #b45309;
    font-style: normal;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    flex-shrink: 0;
}

.oct-tx-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: .85rem;
}

.oct-tx-kpi {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem .95rem;
    border-radius: .85rem;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.oct-tx-kpi-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.05rem;
}

.oct-tx-kpi.tone-success .oct-tx-kpi-icon {
    background: rgba(34, 197, 94, .14);
    color: #16a34a;
}

.oct-tx-kpi.tone-info .oct-tx-kpi-icon {
    background: rgba(108, 124, 255, .12);
    color: #6c7cff;
}

.oct-tx-kpi.tone-warning .oct-tx-kpi-icon {
    background: rgba(245, 158, 11, .16);
    color: #d97706;
}

.oct-tx-kpi-body {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.oct-tx-kpi-body > span {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}

.oct-tx-kpi-body strong {
    font-size: 1.15rem;
    color: #0f172a;
    line-height: 1.2;
}

.oct-tx-kpi-body small {
    font-size: .72rem;
    color: #94a3b8;
}

.oct-tx-toolbar {
    flex-wrap: wrap;
    align-items: flex-end;
}

.oct-tx-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .65rem;
    align-items: flex-end;
}

.oct-tx-filter {
    display: grid;
    gap: .2rem;
}

.oct-tx-filter .oct-admin-input,
.oct-tx-filter .oct-admin-select {
    min-height: 2rem;
    font-size: .82rem;
}

.oct-tx-id {
    font-size: .72rem;
    background: #f1f5f9;
    padding: .15rem .35rem;
    border-radius: .35rem;
}

@media (max-width: 900px) {
    .oct-tx-kpi-grid {
        grid-template-columns: 1fr;
    }
}

[data-panel="billing"]:not([data-billing-view="billing-automation"]) #octBillingStats {
    display: none !important;
}

[data-panel="billing"]:not([data-billing-view="billing-automation"]) .oct-billing-run-cycle {
    display: none !important;
}

.oct-admin-subtabs--nav-driven[hidden] {
    display: none !important;
}

.oct-billing-soon-card {
    display: grid;
    justify-items: start;
    gap: .55rem;
    max-width: 36rem;
    padding: 1.25rem 1.35rem;
    border: 1px dashed #cbd5e1;
    border-radius: 1rem;
    background: #f8fafc;
    color: #475569;
}

.oct-billing-soon-card > i {
    font-size: 1.5rem;
    color: #f59e0b;
}

.oct-billing-soon-card strong {
    font-size: 1.05rem;
    color: #0f172a;
}

.oct-billing-soon-card span {
    font-size: .88rem;
    line-height: 1.45;
}

.oct-admin-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: .9rem;
}

.oct-admin-settings-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    width: 100%;
    text-align: left;
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: var(--paces-surface);
    padding: .95rem 2rem .95rem 1rem;
    min-height: 80px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    box-shadow: var(--paces-shadow);
}

.oct-admin-settings-card::after {
    content: "\F285";
    font-family: "bootstrap-icons";
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    color: #cbd5e1;
    transition: color .15s ease;
}

.oct-admin-settings-card:hover {
    transform: none;
    border-color: rgba(var(--paces-primary-rgb), .35);
    background: var(--paces-surface-2);
    box-shadow: none;
}

.oct-admin-settings-card:hover::after {
    color: var(--paces-primary);
    transform: translateY(-50%);
}

.oct-admin-settings-card::after {
    content: "\F285";
    font-family: "bootstrap-icons";
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    color: #cbd5e1;
    transition: color .15s ease, transform .15s ease;
}

.oct-admin-settings-card:hover {
    transform: none;
    border-color: #d7ddff;
    background: #f3f5ff;
    box-shadow: var(--paces-shadow);
}

.oct-admin-settings-card:hover::after {
    color: #6c7cff;
    transform: translateY(-50%);
}

.oct-admin-settings-card-icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f3f5ff;
    color: #6c7cff;
    border: 0;
    font-size: 1.1rem;
    transition: transform .16s ease;
}

.oct-admin-settings-card:hover .oct-admin-settings-card-icon {
    transform: scale(1.05);
}

.oct-admin-settings-card:nth-child(12n+1) .oct-admin-settings-card-icon {
    background: #f3f5ff;
    color: #6c7cff;
}

.oct-admin-settings-card:nth-child(12n+2) .oct-admin-settings-card-icon {
    background: #ecfeff;
    color: #0891b2;
}

.oct-admin-settings-card:nth-child(12n+3) .oct-admin-settings-card-icon {
    background: #ecfdf5;
    color: #059669;
}

.oct-admin-settings-card:nth-child(12n+4) .oct-admin-settings-card-icon {
    background: #fff7ed;
    color: #ea580c;
}

.oct-admin-settings-card:nth-child(12n+5) .oct-admin-settings-card-icon {
    background: #fef3c7;
    color: #b45309;
}

.oct-admin-settings-card:nth-child(12n+6) .oct-admin-settings-card-icon {
    background: #f0fdf4;
    color: #16a34a;
}

.oct-admin-settings-card:nth-child(12n+7) .oct-admin-settings-card-icon {
    background: #f3f5ff;
    color: #515dbf;
}

.oct-admin-settings-card:nth-child(12n+8) .oct-admin-settings-card-icon {
    background: #ecfdf5;
    color: #0f766e;
}

.oct-admin-settings-card:nth-child(12n+9) .oct-admin-settings-card-icon {
    background: #ecfeff;
    color: #0e7490;
}

.oct-admin-settings-card:nth-child(12n+10) .oct-admin-settings-card-icon {
    background: #f1f5f9;
    color: #475569;
}

.oct-admin-settings-card:nth-child(12n+11) .oct-admin-settings-card-icon {
    background: #fef2f2;
    color: #dc2626;
}

.oct-admin-settings-card:nth-child(12n+12) .oct-admin-settings-card-icon {
    background: #f3f5ff;
    color: #6c7cff;
}

.oct-admin-settings-card-copy {
    min-width: 0;
    display: grid;
    gap: .22rem;
}

.oct-admin-settings-card-copy strong {
    font-family: var(--adm-display);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--adm-text, #0f172a);
    line-height: 1.2;
}

.oct-admin-settings-card-copy small {
    font-size: .74rem;
    color: var(--adm-muted, #64748b);
    line-height: 1.4;
    font-weight: 500;
}

.oct-admin-sidebar-foot {
    margin-top: .55rem;
    padding-top: .65rem;
    border-top: 1px solid rgba(15, 23, 42, .06);
    display: grid;
    gap: .35rem;
}

.oct-admin-sidebar-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .5rem .75rem;
    border-radius: var(--paces-radius);
    border: 1px solid transparent;
    background: transparent;
    color: #6c757d;
    font-size: .8125rem;
    font-weight: 400;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.oct-admin-sidebar-link i {
    font-size: .9rem;
    color: inherit;
}

.oct-admin-sidebar-link:hover {
    background: #eaf2ff;
    border-color: transparent;
    color: #6c7cff;
    box-shadow: none;
}

.oct-admin-sidebar-link:hover i {
    color: #6c7cff;
}

.oct-admin-sidebar-backdrop {
    display: none;
}

.oct-admin-main {
    min-width: 0;
}

.oct-admin-page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1.1rem;
    padding: 0 0 .85rem;
    border-bottom: 1px solid var(--paces-border);
}

.oct-admin-page-main-title {
    margin: 0;
    font-family: var(--adm-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--adm-text);
    line-height: 1.3;
}

.oct-admin-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--adm-muted);
}

.oct-admin-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    max-width: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oct-admin-breadcrumb li + li::before {
    content: "/";
    margin-right: .35rem;
    color: #98a6ad;
    font-weight: 400;
}

.oct-admin-breadcrumb button {
    border: 0;
    background: transparent;
    color: #6c7cff;
    font: inherit;
    font-size: inherit;
    padding: 0;
    cursor: pointer;
}

.oct-admin-breadcrumb button:hover {
    color: #515dbf;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.oct-admin-breadcrumb .is-active {
    color: var(--adm-text);
    font-weight: 700;
}

.oct-admin-panel {
    display: none;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: var(--paces-surface);
    box-shadow: var(--paces-shadow);
}

.oct-admin-panel.is-active { display: block; }

.oct-admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.oct-admin-kpi-grid--dashboard {
    gap: .9rem;
}

.oct-admin-kpi-card {
    padding: 1.05rem 1.1rem;
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: #fff;
    box-shadow: var(--paces-shadow);
}

.oct-dash-kpi {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1.15rem 1.2rem;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.oct-dash-kpi::before {
    display: none;
}

.oct-dash-kpi:hover {
    transform: none;
    box-shadow: var(--paces-shadow);
    border-color: var(--paces-border);
}

.oct-dash-kpi:hover {
    transform: none;
    box-shadow: var(--paces-shadow);
}

.oct-dash-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: #f3f5ff;
    color: #6c7cff;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.oct-dash-kpi.is-warning {
    background: #fff;
    border-color: var(--paces-border);
}

.oct-dash-kpi.is-warning::before { display: none; }

.oct-dash-kpi.is-warning .oct-dash-kpi-icon {
    background: rgba(255, 184, 77, .15);
    color: #bf8a3a;
}

.oct-dash-kpi.is-danger {
    background: #fff;
    border-color: var(--paces-border);
}

.oct-dash-kpi.is-danger::before { display: none; }

.oct-dash-kpi.is-danger .oct-dash-kpi-icon {
    background: rgba(255, 92, 138, .15);
    color: #bf4568;
}

.oct-dash-kpi.is-success {
    background: #fff;
    border-color: var(--paces-border);
}

.oct-dash-kpi.is-success::before { display: none; }

.oct-dash-kpi.is-success .oct-dash-kpi-icon {
    background: rgba(60, 230, 194, .15);
    color: #2dad92;
}

.oct-dash-kpi.is-neutral {
    background: #fff;
    border-color: var(--paces-border);
}

.oct-dash-kpi.is-neutral::before { display: none; }

.oct-dash-kpi.is-neutral .oct-dash-kpi-icon {
    background: #f3f5ff;
    color: var(--paces-primary);
}

.oct-dash-kpi-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.oct-dash-kpi-body strong {
    display: block;
    font-family: var(--adm-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    margin: .35rem 0 .2rem;
    color: var(--adm-text);
    order: 2;
}

.oct-dash-kpi-body span {
    display: block;
    color: var(--adm-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    order: 1;
}

.oct-dash-kpi-body small {
    display: block;
    margin-top: .15rem;
    color: var(--adm-muted);
    font-size: 12px;
    font-weight: 400;
    order: 3;
}

.oct-admin-kpi-card strong {
    display: block;
    font-family: var(--adm-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    margin-bottom: .3rem;
    color: var(--adm-text);
}

.oct-admin-kpi-card span {
    color: var(--adm-muted);
    font-size: .8125rem;
    font-weight: 400;
}

.oct-admin-kpi-card.is-warning strong { color: #bf8a3a; }
.oct-admin-kpi-card.is-danger strong { color: #bf4568; }
.oct-admin-kpi-card.is-success strong { color: #2dad92; }

.oct-admin-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.oct-admin-stack--compact {
    display: grid;
    gap: .55rem;
}

.oct-admin-overview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .75rem .8rem;
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: #fff;
    transition: background .15s ease, border-color .15s ease;
}

.oct-admin-overview-item:hover {
    background: #f3f5ff;
    border-color: #d7ddff;
}

.oct-admin-overview-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .65rem;
    background: #e2e8f0;
    color: #475569;
    font-size: .68rem;
    font-weight: 700;
    flex-shrink: 0;
}

.oct-admin-overview-avatar.is-invoice {
    background: #f3f5ff;
    color: #6c7cff;
    font-size: .85rem;
}

.oct-admin-overview-copy {
    flex: 1;
    min-width: 0;
}

.oct-admin-overview-item strong {
    display: block;
    font-size: .8rem;
    font-weight: 650;
    color: var(--adm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oct-admin-overview-item small {
    display: block;
    color: var(--adm-muted);
    font-size: .7rem;
    margin-top: .12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oct-admin-section-label {
    margin: 0 0 .7rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.oct-admin-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.oct-admin-quick-action {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .95rem 1rem;
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: #fff;
    color: var(--adm-text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    box-shadow: var(--paces-shadow);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.oct-admin-quick-action:hover {
    transform: none;
    border-color: #d7ddff;
    background: #f3f5ff;
    box-shadow: var(--paces-shadow);
}

.oct-admin-quick-action-chevron {
    margin-left: auto;
    font-size: .85rem;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color .15s ease, transform .15s ease;
}

.oct-admin-quick-action:hover .oct-admin-quick-action-chevron {
    color: #8b97ff;
    transform: translateX(2px);
}

.oct-admin-demo-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.35rem;
    margin: 0 0 1.1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: var(--paces-surface);
    box-shadow: var(--paces-shadow);
    overflow: hidden;
}

.oct-admin-demo-card::after {
    display: none;
}

.oct-admin-demo-card-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    min-width: min(100%, 280px);
    flex: 1 1 280px;
}

.oct-admin-demo-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--paces-control-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paces-primary);
    color: #fff;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: none;
}

.oct-admin-demo-card-kicker {
    display: inline-block;
    margin-bottom: .2rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8b97ff;
}

.oct-admin-demo-card-copy strong {
    display: block;
    font-family: var(--adm-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #0f172a;
    margin-bottom: .15rem;
}

.oct-admin-demo-card-copy p {
    margin: 0 0 .45rem;
    font-size: .78rem;
    color: #64748b;
    line-height: 1.4;
}

.oct-admin-demo-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 650;
    color: #6c7cff;
    word-break: break-all;
}

.oct-admin-demo-link:hover {
    color: #515dbf;
    text-decoration: underline;
}

.oct-admin-demo-creds {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}

.oct-admin-demo-cred {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .5rem .4rem .6rem;
    border: 1px solid #eaf2ff;
    border-radius: .7rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
}

.oct-admin-demo-cred span {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
}

.oct-admin-demo-cred code {
    font-size: .82rem;
    font-weight: 700;
    color: #0f172a;
    background: transparent;
}

html[data-adm-theme="dark"] .oct-admin-demo-card {
    background:
        radial-gradient(ellipse 55% 120% at 0% 50%, rgba(108, 124, 255, .22), transparent 60%),
        linear-gradient(135deg, rgba(108, 124, 255, .18), rgba(15, 23, 42, .92));
    border-color: rgba(139, 154, 212, .28);
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-demo-card-kicker {
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-admin-demo-card-copy strong {
    color: #f8fafc;
}

html[data-adm-theme="dark"] .oct-admin-demo-card-copy p {
    color: #94a3b8;
}

html[data-adm-theme="dark"] .oct-admin-demo-link {
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-admin-demo-cred {
    background: rgba(15, 23, 42, .75);
    border-color: rgba(148, 163, 184, .22);
}

html[data-adm-theme="dark"] .oct-admin-demo-cred code {
    color: #e2e8f0;
}

.oct-admin-quick-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    background: #f3f5ff;
    color: #6c7cff;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform .18s ease;
}

.oct-admin-quick-action:hover .oct-admin-quick-action-icon {
    transform: scale(1.06);
}

.oct-admin-quick-action:nth-child(1) .oct-admin-quick-action-icon {
    background: #fff7ed;
    color: #ea580c;
}

.oct-admin-quick-action:nth-child(2) .oct-admin-quick-action-icon {
    background: #f3f5ff;
    color: #6c7cff;
}

.oct-admin-quick-action:nth-child(3) .oct-admin-quick-action-icon {
    background: #fef3c7;
    color: #b45309;
}

.oct-admin-quick-action:nth-child(4) .oct-admin-quick-action-icon {
    background: #ecfdf5;
    color: #059669;
}

.oct-admin-quick-action:nth-child(5) .oct-admin-quick-action-icon {
    background: #ecfeff;
    color: #0891b2;
}

.oct-admin-quick-action:nth-child(6) .oct-admin-quick-action-icon {
    background: #f1f5f9;
    color: #475569;
}

.oct-admin-quick-action-copy {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.oct-admin-quick-action-copy strong {
    font-size: .84rem;
    font-weight: 650;
    color: var(--adm-text);
}

.oct-admin-quick-action-copy small {
    font-size: .7rem;
    color: var(--adm-muted);
    font-weight: 500;
}

.oct-admin-quick-action i {
    font-size: inherit;
    color: inherit;
}

.oct-admin-quick-action span {
    font-size: inherit;
    font-weight: inherit;
}

.oct-admin-empty {
    color: var(--adm-muted);
    font-size: .86rem;
    padding: .5rem 0;
}

.oct-admin-empty--card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 7.5rem;
    padding: 1.35rem 1rem;
    border: 1px dashed #edf2f9;
    border-radius: var(--paces-radius);
    color: #6c757d;
    font-size: .8125rem;
    font-weight: 400;
    text-align: center;
    background: #fdfdfd;
}

.oct-admin-empty--card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: rgba(60, 230, 194, .15);
    color: #2dad92;
    font-size: 1.15rem;
}

.oct-dash-kpi.is-warning .oct-dash-kpi-body strong,
.oct-dash-kpi.is-danger .oct-dash-kpi-body strong,
.oct-dash-kpi.is-success .oct-dash-kpi-body strong,
.oct-dash-kpi.is-neutral .oct-dash-kpi-body strong {
    color: var(--adm-text);
}

.oct-admin-panel-head { margin-bottom: 1rem; }
.oct-admin-panel-head h1 {
    margin: 0 0 .35rem;
    font-family: var(--adm-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--adm-text);
    /* Title lives in .oct-admin-page-title; keep actions/description here */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.oct-admin-panel-head--dashboard {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
    padding-bottom: 0;
    border-bottom: 0;
}

.oct-admin-panel-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.oct-admin-panel-head > div > p,
.oct-admin-panel-head p {
    margin: 0;
    color: var(--adm-muted);
    max-width: 40rem;
    line-height: 1.45;
    font-size: 13px;
}

.oct-admin-eyebrow {
    margin: 0 0 .35rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #98a6ad;
}

.oct-admin-panel--overview.is-active {
    animation: octDashIn .35s ease both;
}

@keyframes octDashIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.oct-admin-kpi-grid--dashboard .oct-dash-kpi {
    animation: octDashIn .4s ease both;
}

.oct-admin-kpi-grid--dashboard .oct-dash-kpi:nth-child(1) { animation-delay: .04s; }
.oct-admin-kpi-grid--dashboard .oct-dash-kpi:nth-child(2) { animation-delay: .08s; }
.oct-admin-kpi-grid--dashboard .oct-dash-kpi:nth-child(3) { animation-delay: .12s; }
.oct-admin-kpi-grid--dashboard .oct-dash-kpi:nth-child(4) { animation-delay: .16s; }

.oct-admin-panel-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end;
}

.oct-admin-card--dashboard {
    border-radius: var(--paces-radius);
    padding: 1rem 1.05rem 1.05rem;
    background: #fff;
    border: 1px solid var(--paces-border);
    box-shadow: var(--paces-shadow);
}

.oct-admin-card--dashboard .oct-admin-card-head {
    margin-bottom: .85rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid rgba(15, 23, 42, .05);
}

.oct-admin-card--dashboard .oct-admin-card-head strong {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .88rem;
    font-weight: 700;
}

.oct-admin-card-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: #f3f5ff;
    color: #6c7cff;
    font-size: .85rem;
}

.oct-admin-card-head-icon.is-warning {
    background: rgba(255, 184, 77, .15);
    color: #bf8a3a;
}

.oct-admin-card-head-icon.is-danger {
    background: rgba(255, 92, 138, .15);
    color: #bf4568;
}

#octOverviewRefreshBtn.is-loading {
    opacity: .7;
    pointer-events: none;
}

.oct-admin-panel-head p {
    margin: 0;
    color: var(--adm-muted);
    max-width: 40rem;
    line-height: 1.45;
    font-size: 13px;
}

.oct-admin-field-hint {
    margin: -.35rem 0 .25rem;
    color: var(--adm-muted);
    font-size: .78rem;
    line-height: 1.45;
}

.oct-admin-field-hint code {
    color: #b4bcff;
}

.oct-admin-subtitle {
    margin: 1rem 0 0;
    font-size: .95rem;
    color: var(--adm-text);
}

.oct-admin-checkbox {
    display: flex !important;
    align-items: center;
    gap: .55rem;
    flex-direction: row !important;
}

.oct-admin-checkbox input {
    width: auto;
}

.oct-admin-label-row,
.oct-admin-checkbox-text {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.oct-admin-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(108, 124, 255, .15);
    color: #515dbf;
    cursor: pointer;
    font-size: .95rem;
    line-height: 1;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.oct-admin-help-btn:hover,
.oct-admin-help-btn.is-open {
    background: rgba(108, 124, 255, .22);
    color: #6c7cff;
}

.oct-admin-field-help-popover {
    position: fixed;
    z-index: 1400;
    width: min(320px, calc(100vw - 2rem));
    padding: .75rem .85rem;
    border: 1px solid rgba(139, 154, 212, .35);
    border-radius: .75rem;
    background: #0f172a;
    color: #e2e8f0;
    font-size: .82rem;
    line-height: 1.5;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .1);
}

.oct-admin-stack {
    display: grid;
    gap: 1rem;
}

.oct-admin-card {
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: #fff;
    padding: 1.1rem;
    box-shadow: var(--paces-shadow);
}

.oct-admin-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: .9rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--paces-border);
}

.oct-admin-card--dashboard .oct-admin-card-head strong,
.oct-admin-card-head strong {
    font-size: 14px;
    font-weight: 700;
}

.oct-admin-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
}

.oct-admin-check {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--adm-muted);
}

.oct-admin-savebar,
#octContentSavebar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

.oct-admin-help {
    margin: .65rem 0 0;
    color: var(--adm-muted);
    font-size: .78rem;
}

.oct-admin-select {
    width: auto;
    min-width: 11rem;
    border: 1px solid #edf2f9;
    background: #fff;
    color: var(--adm-text);
    border-radius: 6px;
    padding: .55rem .75rem;
    font-size: 13px;
    color-scheme: light;
}

.oct-admin-order-card .oct-admin-order-date {
    color: var(--adm-muted);
    font-size: .78rem;
}

.oct-admin-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.oct-admin-order-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.oct-admin-order-card-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    justify-content: flex-end;
}

.oct-admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid var(--adm-border);
    border-radius: .7rem;
    background: #fff;
    color: var(--adm-muted);
    cursor: pointer;
    padding: 0;
    font-size: .95rem;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.oct-admin-icon-btn:hover {
    color: var(--adm-primary);
    background: var(--adm-primary-soft);
    border-color: #d7ddff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(108, 124, 255, .1);
}

.oct-admin-icon-btn--primary {
    color: var(--adm-primary);
    border-color: #d7ddff;
    background: var(--adm-primary-soft);
}

.oct-admin-icon-btn--primary:hover {
    background: #eaf2ff;
    color: #515dbf;
}

.oct-admin-icon-btn--danger {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.oct-admin-icon-btn--danger:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.oct-admin-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .65rem;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    border: 0;
    background: rgba(108, 124, 255, .15);
    color: #515dbf;
}

.oct-admin-status--pending {
    background: rgba(255, 184, 77, .15);
    color: #bf8a3a;
}

.oct-admin-status--approved {
    background: rgba(60, 230, 194, .15);
    color: #2dad92;
}

.oct-admin-status--rejected {
    background: rgba(255, 92, 138, .15);
    color: #bf4568;
}

.oct-admin-modal-dialog--wide {
    width: min(860px, 100%);
}

.oct-admin-modal-dialog--plan {
    width: min(820px, 100%);
}

.oct-admin-modal-dialog--plan .oct-plan-modal-grid {
    align-items: start;
}

.oct-admin-modal-dialog--plan .oct-plan-modal-grid > label {
    min-width: 0;
    width: 100%;
}

.oct-admin-modal-dialog--plan .oct-plan-modal-grid > label > input[type="text"],
.oct-admin-modal-dialog--plan .oct-plan-modal-grid > label > input[type="number"],
.oct-admin-modal-dialog--plan .oct-plan-modal-grid > label > select {
    width: 100%;
    min-width: 0;
    height: 2.35rem;
    box-sizing: border-box;
}

.oct-admin-modal-dialog--plan .oct-plan-modal-grid > label > textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.oct-admin-modal-dialog--plan .oct-plan-modal-grid .oct-admin-help {
    margin: 0;
    line-height: 1.25;
    min-height: 1.9em;
}

.oct-admin-modal-dialog--plan .oct-admin-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.oct-admin-modal-dialog--plan .oct-admin-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oct-admin-modal-dialog--plan .oct-admin-span-4 {
    grid-column: 1 / -1;
}

.oct-admin-modal-dialog--plan .oct-admin-span-2 {
    grid-column: span 2;
}

.oct-fx-source-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.oct-fx-source-card {
    display: grid;
    gap: .25rem;
    padding: .95rem 1rem;
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: #fff;
    box-shadow: var(--paces-shadow);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.oct-fx-source-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.oct-fx-source-card strong {
    font-family: var(--adm-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--adm-text);
}

.oct-fx-source-card small {
    color: var(--adm-muted);
    font-size: 12px;
    line-height: 1.35;
}

.oct-fx-source-card:hover {
    transform: none;
    border-color: #d7ddff;
    background: #f3f5ff;
}

.oct-fx-source-card.is-selected,
.oct-fx-source-card:has(input:checked) {
    border-color: rgba(108, 124, 255, .35);
    background: #f3f5ff;
    box-shadow: 0 0 0 0.2rem rgba(108, 124, 255, .12);
}

.oct-fx-rate-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.oct-fx-rate-card {
    padding: 1rem 1.05rem;
}

.oct-fx-rate-card.is-active {
    border-color: rgba(108, 124, 255, .35);
    box-shadow: 0 0 0 0.2rem rgba(108, 124, 255, .1);
}

.oct-fx-rate-card .oct-admin-card-head {
    margin-bottom: .45rem;
}

.oct-fx-rate-value {
    margin: 0;
    font-family: var(--adm-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--adm-text);
}

.oct-fx-pill {
    display: inline-flex;
    align-items: center;
    padding: .2rem .5rem;
    border-radius: 6px;
    background: rgba(108, 124, 255, .08);
    border: 0;
    color: #6c757d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.oct-fx-rate-card.is-active .oct-fx-pill {
    background: rgba(108, 124, 255, .15);
    border-color: transparent;
    color: #515dbf;
}

.oct-fx-next {
    margin-top: .55rem;
    padding: .45rem .55rem;
    border-radius: .65rem;
    background: #fffbeb;
    color: #92400e;
    font-size: .72rem;
}

@media (max-width: 900px) {
    .oct-fx-source-grid,
    .oct-fx-rate-cards {
        grid-template-columns: 1fr;
    }
}

.oct-brand-logo-field {
    display: grid;
    gap: .45rem;
    margin-bottom: .25rem;
}

.oct-brand-logo-field-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--adm-muted);
}

.oct-brand-logo-field-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.oct-brand-logo-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .1);
    background: #f3f5ff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(108, 124, 255, .12);
}

.oct-brand-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.oct-brand-logo-fallback {
    color: #64748b;
    font-size: 1.35rem;
}

.oct-brand-logo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
    min-width: min(280px, 100%);
}

.oct-brand-logo-actions .oct-admin-help {
    flex: 1 1 100%;
    margin: 0;
}

.oct-brand-crop-stage {
    position: relative;
    width: 320px;
    max-width: 100%;
    margin: 0 auto .85rem;
    border-radius: 50%;
    overflow: hidden;
    background: #0f172a;
    touch-action: none;
    user-select: none;
    aspect-ratio: 1;
    box-shadow: 0 0 0 3px rgba(108, 124, 255, .35);
}

.oct-brand-crop-stage canvas {
    display: block;
    width: 100%;
    height: auto;
    cursor: grab;
}

.oct-brand-crop-stage canvas:active {
    cursor: grabbing;
}

.oct-brand-crop-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 49%, rgba(15, 23, 42, .55) 50%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28);
}

.oct-brand-crop-zoom {
    display: grid;
    gap: .35rem;
    margin-bottom: .35rem;
}

.oct-brand-crop-zoom span {
    font-size: .72rem;
    font-weight: 650;
    color: var(--adm-muted);
}

.oct-brand-crop-zoom input[type="range"] {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.oct-admin-modal-dialog--plan .oct-admin-modal-header,
.oct-admin-modal-dialog--plan .oct-admin-modal-footer {
    padding: .7rem .9rem;
}

.oct-admin-modal-dialog--plan .oct-admin-modal-header h2 {
    font-size: 1rem;
}

.oct-admin-modal-dialog--plan .oct-admin-modal-body {
    padding: .75rem .9rem;
}

.oct-admin-modal-sections--compact {
    gap: .65rem;
}

.oct-admin-detail-section--compact {
    padding: .7rem .75rem;
    border-radius: .75rem;
}

.oct-admin-detail-section--compact .oct-admin-detail-section-title {
    margin: 0 0 .55rem;
    font-size: .76rem;
    gap: .4rem;
}

.oct-admin-detail-section--compact .oct-admin-grid {
    gap: .55rem .6rem;
}

.oct-admin-detail-section--compact label {
    gap: .22rem;
}

.oct-admin-detail-section--compact label > span {
    font-size: .68rem;
    font-weight: 650;
}

.oct-admin-modal-dialog--plan input[type="text"],
.oct-admin-modal-dialog--plan input[type="number"],
.oct-admin-modal-dialog--plan textarea,
.oct-admin-modal-dialog--plan select {
    padding: .42rem .6rem;
    border-radius: .5rem;
    font-size: .82rem;
    line-height: 1.25;
}

.oct-admin-modal-dialog--plan textarea {
    min-height: 72px;
}

@media (max-width: 720px) {
    .oct-admin-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.oct-admin-order-detail {
    display: grid;
    gap: 1rem;
}

.oct-admin-order-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1.25rem;
}

.oct-admin-order-detail-grid p {
    margin: 0 0 .35rem;
}

.oct-admin-order-detail-grid strong {
    color: var(--adm-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.oct-admin-order-receipt {
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: var(--paces-radius);
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.oct-admin-order-receipt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .95rem;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.oct-admin-order-receipt-body {
    padding: 1rem;
    display: grid;
    place-items: center;
    min-height: 180px;
}

.oct-admin-order-receipt-body img,
.oct-admin-order-receipt-body iframe {
    max-width: 100%;
    max-height: 420px;
    border: 0;
    border-radius: .55rem;
    background: #fff;
}

.oct-admin-order-receipt-empty {
    color: var(--adm-muted);
    font-size: .85rem;
    text-align: center;
}

@media (max-width: 720px) {
    .oct-admin-order-detail-grid {
        grid-template-columns: 1fr;
    }
}

.oct-admin-opg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .95rem;
}

.oct-admin-opg-card {
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: #fff;
    box-shadow: var(--paces-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}

.oct-admin-opg-card:hover {
    transform: none;
    border-color: #d7ddff;
    box-shadow: var(--paces-shadow);
    background: #fff;
}

.oct-admin-opg-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
    padding: .95rem .95rem 0;
}

.oct-admin-opg-icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 999px;
    border: 0;
    background: #f3f5ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #6c7cff;
    box-shadow: none;
}

.oct-admin-opg-body {
    padding: .65rem .85rem;
    display: grid;
    gap: .55rem;
}

.oct-admin-opg-body label {
    display: grid;
    gap: .25rem;
}

.oct-admin-opg-body label span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--adm-muted);
}

.oct-admin-opg-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: .2rem .5rem;
    border-radius: 6px;
    border: 0;
    background: rgba(108, 124, 255, .15);
    color: #515dbf;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.oct-admin-opg-rows {
    display: grid;
    gap: .45rem;
    margin-top: .15rem;
}

.oct-admin-opg-row-field span {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--adm-muted);
}

.oct-admin-opg-foot {
    border-top: 1px solid var(--adm-border);
    padding: .55rem .85rem .75rem;
    display: flex;
    justify-content: flex-end;
}

.oct-opg-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: .95rem;
}

.oct-opg-cards-grid--plans {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .8rem;
}

.oct-opg-plan-card .oct-opg-account-top {
    padding: .7rem .8rem 0;
}

.oct-opg-plan-card .oct-opg-account-icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .65rem;
    border: 0;
    background: var(--paces-primary);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(108, 124, 255, .22);
}

.oct-opg-plan-card .oct-opg-account-icon-fallback {
    font-size: .8rem;
    color: #fff;
    border-radius: .65rem;
}

.oct-opg-plan-card .oct-opg-account-status {
    font-size: .62rem;
}

.oct-opg-plan-card .oct-opg-account-dot {
    width: 7px;
    height: 7px;
}

.oct-opg-plan-card .oct-opg-account-body {
    padding: .55rem .8rem .65rem;
    gap: .35rem;
}

.oct-opg-plan-card .oct-opg-account-title {
    font-family: var(--adm-display);
    font-size: .88rem;
    letter-spacing: -.015em;
    line-height: 1.25;
}

.oct-opg-plan-card .oct-opg-account-badge {
    padding: .14rem .4rem;
    font-size: .58rem;
}

.oct-opg-plan-card .oct-opg-account-rows {
    gap: .3rem;
    margin-top: .1rem;
}

.oct-opg-plan-card .oct-opg-account-row-label {
    font-size: .56rem;
}

.oct-opg-plan-card .oct-opg-account-row-value {
    font-size: .74rem;
}

.oct-opg-plan-card .oct-opg-account-foot--plans {
    gap: .5rem;
    padding: .55rem .8rem .7rem;
}

.oct-opg-plan-card .oct-opg-plan-toggle-item {
    font-size: .66rem;
    gap: .28rem;
}

.oct-opg-plan-card .oct-opg-account-btn {
    width: 1.85rem;
    height: 1.85rem;
    font-size: .78rem;
    border-radius: .55rem;
}

.oct-opg-cards-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 8rem;
    padding: 1.35rem 1rem;
    border: 1px dashed #edf2f9;
    border-radius: var(--paces-radius);
    color: #6c757d;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    background: #fdfdfd;
}

.oct-opg-account-card {
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: var(--paces-surface);
    box-shadow: var(--paces-shadow);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}

.oct-opg-account-card:hover {
    transform: none;
    border-color: #d7ddff;
    box-shadow: var(--paces-shadow);
    background: #fff;
}

.oct-opg-account-card.is-disabled {
    opacity: .72;
}

.oct-opg-account-card.is-disabled:hover {
    transform: none;
    box-shadow: var(--paces-shadow);
}

.oct-opg-account-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
    padding: .95rem .95rem 0;
}

.oct-opg-account-icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 999px;
    border: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f3f5ff;
    box-shadow: none;
}

.oct-opg-account-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oct-opg-account-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: .95rem;
    font-weight: 700;
    color: #6c7cff;
    background: #f3f5ff;
}

.oct-opg-account-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 11px;
    font-weight: 700;
    color: var(--adm-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.oct-opg-account-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #98a6ad;
}

.oct-opg-account-dot.active {
    background: #3ce6c2;
    box-shadow: 0 0 0 3px rgba(60, 230, 194, .18);
}

.oct-opg-account-body {
    padding: .7rem .95rem;
    display: grid;
    gap: .5rem;
    flex: 1;
}

.oct-opg-account-title {
    margin: 0;
    font-family: var(--adm-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--adm-text);
}

.oct-opg-account-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: .2rem .5rem;
    border-radius: 6px;
    border: 0;
    background: rgba(108, 124, 255, .15);
    color: #515dbf;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.oct-opg-account-rows {
    display: grid;
    gap: .5rem;
    margin-top: .2rem;
    padding-top: .55rem;
    border-top: 1px solid var(--paces-border);
}

.oct-opg-account-row {
    display: grid;
    gap: .12rem;
}

.oct-opg-account-row-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--adm-muted);
}

.oct-opg-account-row-value {
    font-size: .8rem;
    font-weight: 600;
    color: var(--adm-text);
    word-break: break-word;
}

.oct-opg-account-foot {
    border-top: 1px solid rgba(15, 23, 42, .06);
    padding: .65rem .95rem .85rem;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

.oct-opg-account-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
}

.oct-opg-account-btn {
    width: 2.05rem;
    height: 2.05rem;
    border-radius: .6rem;
    border: 1px solid rgba(15, 23, 42, .08);
    background: #fff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.oct-opg-account-btn:hover {
    border-color: #d7ddff;
    background: #f3f5ff;
    color: #6c7cff;
    transform: translateY(-1px);
}

.oct-opg-account-btn-danger:hover {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

.oct-opg-account-toggle-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.oct-opg-account-toggle-wrap input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.oct-opg-account-toggle {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: rgba(71, 85, 105, .85);
    position: relative;
    transition: background .2s ease, box-shadow .2s ease;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.oct-opg-account-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .28);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}

.oct-opg-account-toggle-wrap input:focus-visible + .oct-opg-account-toggle {
    outline: 2px solid rgba(139, 154, 212, .45);
    outline-offset: 2px;
}

.oct-opg-account-toggle-wrap input:checked + .oct-opg-account-toggle {
    background: var(--paces-primary);
    box-shadow: 0 0 0 1px rgba(139, 154, 212, .35), 0 4px 14px rgba(108, 124, 255, .28);
}

.oct-opg-account-toggle-wrap input:checked + .oct-opg-account-toggle::after {
    transform: translateX(16px);
}

.oct-opg-account-foot--plans {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    padding-top: .65rem;
    padding-bottom: .85rem;
}

.oct-opg-catalog-card.is-disabled {
    opacity: .72;
}

.oct-opg-catalog-card.is-disabled .oct-opg-account-title {
    color: var(--adm-muted);
}

.oct-opg-plan-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
}

.oct-opg-plan-toggle-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 500;
    color: var(--adm-muted);
}

.oct-opg-account-toggle-wrap--sm .oct-opg-account-toggle {
    width: 30px;
    height: 17px;
}

.oct-opg-account-toggle-wrap--sm .oct-opg-account-toggle::after {
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
}

.oct-opg-account-toggle-wrap--sm input:checked + .oct-opg-account-toggle::after {
    transform: translateX(13px);
}

.oct-opg-account-foot--plans .oct-opg-account-actions {
    justify-content: flex-end;
    margin-top: .15rem;
}

.oct-admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: none;
    place-items: center;
    padding: 1rem;
}

.oct-admin-modal.is-open {
    display: grid;
    animation: octModalIn .2s ease both;
}

.oct-admin-modal[hidden] {
    display: none !important;
}

.oct-admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.oct-admin-modal-dialog {
    position: relative;
    width: min(640px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: var(--adm-panel);
    box-shadow: 2px 16px 40px rgba(57, 62, 80, 0.16);
    animation: octDialogIn .22s ease both;
}

@keyframes octModalIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes octDialogIn {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

.oct-admin-modal-header,
.oct-admin-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--adm-border);
}

.oct-admin-modal-header {
    background: #fff;
}

.oct-admin-modal-footer {
    border-bottom: 0;
    border-top: 1px solid var(--paces-border);
    justify-content: flex-end;
    background: #fdfdfd;
}

.oct-admin-modal-header h2 {
    margin: 0;
    font-family: var(--adm-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
}

.oct-admin-modal-close {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid transparent;
    border-radius: var(--paces-radius);
    background: transparent;
    color: var(--adm-muted);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.oct-admin-modal-close:hover {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #0f172a;
}

.oct-admin-modal-body {
    padding: 1.1rem 1.15rem;
    display: grid;
    gap: 1rem;
}

.oct-admin-credentials-box {
    border: 1px solid var(--adm-border);
    border-radius: .75rem;
    padding: .85rem;
    background: #f8fafc;
}

.oct-admin-credentials-title {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--adm-muted);
    margin-bottom: .65rem;
}

.oct-admin-payment-qr {
    display: flex;
    gap: .85rem;
    align-items: center;
    margin-bottom: .9rem;
    padding: .75rem;
    border-radius: 12px;
    border: 1px dashed rgba(148, 163, 184, .45);
    background: #fff;
}

.oct-admin-payment-qr-preview {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #e2e8f0;
    color: #64748b;
    flex: 0 0 auto;
}

.oct-admin-payment-qr-preview.is-empty {
    border: 1px solid rgba(148, 163, 184, .35);
}

.oct-admin-payment-qr-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oct-admin-payment-qr-preview i {
    font-size: 1.5rem;
}

.oct-admin-payment-qr-meta {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.oct-admin-payment-qr-meta strong {
    color: var(--adm-text);
    font-size: .9rem;
}

.oct-admin-payment-qr-meta span {
    color: var(--adm-muted);
    font-size: .78rem;
}

.oct-admin-payment-qr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .35rem;
}

.oct-admin-btn-sm {
    padding: .35rem .7rem !important;
    font-size: .78rem !important;
}

.oct-opg-account-qr {
    margin-top: .7rem;
    width: 88px;
    height: 88px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .25);
    background: #fff;
}

.oct-opg-account-qr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.oct-admin-modal-open {
    overflow: hidden;
}

body.oct-admin-modal-open .oct-admin-sidebar {
    pointer-events: none;
}

.oct-opg-bank-picker {
    position: relative;
}

.oct-opg-bank-picker-toggle {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--adm-border);
    border-radius: .65rem;
    background: #fff;
    color: var(--adm-text);
    padding: .55rem .75rem;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.oct-opg-bank-picker-toggle img {
    width: 28px;
    height: 28px;
    border-radius: .45rem;
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
}

.oct-opg-bank-picker-toggle .oct-opg-bank-placeholder {
    width: 28px;
    height: 28px;
    border-radius: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--adm-primary-soft);
    color: var(--adm-muted);
}

.oct-opg-bank-picker-menu {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    z-index: 20;
    display: none;
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--adm-border);
    border-radius: .75rem;
    background: var(--adm-panel);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .1);
}

.oct-opg-bank-picker-menu.is-open {
    display: block;
}

.oct-opg-bank-picker-search {
    position: sticky;
    top: 0;
    padding: .55rem;
    background: var(--adm-panel);
    border-bottom: 1px solid var(--adm-border);
}

.oct-opg-bank-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    cursor: pointer;
    text-align: left;
}

.oct-opg-bank-option:hover,
.oct-opg-bank-option.is-active {
    background: rgba(108, 124, 255, .14);
}

.oct-opg-bank-option img {
    width: 28px;
    height: 28px;
    border-radius: .45rem;
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
}

.oct-opg-bank-option-label {
    font-size: .84rem;
    font-weight: 600;
}

.oct-opg-bank-abbr {
    width: 28px;
    height: 28px;
    border-radius: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .62rem;
    font-weight: 800;
    color: #fff;
}

@media (max-width: 1100px) {
    .oct-admin-page-title {
        align-items: flex-start;
        flex-direction: column;
        gap: .45rem;
    }

    .oct-admin-kpi-grid,
    .oct-admin-quick-actions,
    .oct-fx-source-grid,
    .oct-fx-rate-cards,
    .oct-billing-charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oct-admin-overview-grid { grid-template-columns: 1fr; }
    .oct-admin-panel-head--dashboard {
        flex-direction: column;
        align-items: flex-start;
    }
    .oct-admin-panel-head-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .oct-admin-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .oct-opg-cards-grid,
    .oct-opg-cards-grid--plans,
    .oct-admin-opg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .oct-admin-kpi-grid,
    .oct-admin-kpi-grid--dashboard,
    .oct-admin-quick-actions,
    .oct-admin-settings-grid,
    .oct-opg-cards-grid,
    .oct-opg-cards-grid--plans,
    .oct-admin-opg-grid,
    .oct-fx-source-grid,
    .oct-fx-rate-cards,
    .oct-billing-charts-grid,
    .oct-clients-kpi-grid { grid-template-columns: 1fr; }

    .oct-admin-overview-item {
        flex-wrap: wrap;
    }

    .oct-admin-overview-copy {
        flex: 1 1 calc(100% - 3rem);
    }

    .oct-admin-demo-card {
        padding: .95rem 1rem;
    }

    .oct-admin-demo-creds {
        width: 100%;
    }

    .oct-admin-demo-cred {
        flex: 1 1 auto;
    }

    .oct-admin-panel-head h1 {
        font-size: 1.3rem;
    }

    .oct-dash-kpi-body strong,
    .oct-billing-kpi-body strong {
        font-size: 1.4rem;
    }

    .oct-admin-quick-action-chevron,
    .oct-admin-settings-card::after {
        display: none;
    }

    .oct-admin-settings-card {
        padding-right: 1.05rem;
    }
}

/* —— Paces Galaxy shell (desktop fixed sidenav) —— */
@media (min-width: 901px) {
    .oct-admin-topbar {
        margin-left: var(--adm-sidebar-width);
        width: auto;
    }

    .oct-admin-topbar-inner,
    .oct-admin-layout {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .oct-admin-topbar-inner {
        padding: 0 1.35rem;
        box-sizing: border-box;
    }

    .oct-admin-layout {
        display: block;
        padding: 0;
    }

    .oct-admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1300;
        width: var(--adm-sidebar-width);
        max-height: none;
        border-radius: 0;
        border: 0;
        border-right: 1px solid var(--paces-border);
        box-shadow: none;
        padding: 1rem .75rem 1.1rem;
    }

    .oct-admin-sidebar-head {
        padding: .35rem .45rem 1rem;
        margin-bottom: .45rem;
        border-bottom: 1px solid var(--paces-border);
    }

    .oct-admin-main {
        margin-left: var(--adm-sidebar-width);
        padding: 1.25rem 1.5rem 3rem;
        box-sizing: border-box;
    }
}

@media (max-width: 900px) {
    .oct-admin-menu-toggle { display: inline-flex; }

    .oct-admin-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem 0 1.25rem;
    }

    .oct-admin-topbar-inner,
    .oct-admin-layout {
        width: calc(100% - .85rem);
    }

    .oct-admin-sidebar {
        position: fixed;
        top: var(--adm-topbar-height);
        left: 0;
        bottom: 0;
        z-index: 1300;
        width: min(var(--adm-sidebar-width), calc(100vw - 2.5rem));
        max-height: none;
        transform: translateX(-110%);
        transition: transform .2s ease;
        border-radius: 0 var(--paces-radius) var(--paces-radius) 0;
        box-shadow: 12px 0 32px rgba(57, 62, 80, .14);
        border: 1px solid var(--paces-border);
        border-left: 0;
    }

    body.oct-admin-sidebar-open .oct-admin-sidebar {
        transform: translateX(0);
    }

    body.oct-admin-sidebar-open .oct-admin-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: var(--adm-topbar-height) 0 0 0;
        z-index: 1250;
        background: rgba(15, 23, 42, .4);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .oct-admin-nav-btn {
        font-size: .8rem;
        padding: .42rem .4rem .42rem .35rem;
    }

    .oct-admin-panel {
        padding: 1rem;
        border-radius: 1rem;
    }

    .oct-admin-panel-head-row {
        flex-direction: column;
        align-items: stretch;
    }

    .oct-admin-panel-head-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .oct-admin-subtabs,
    .oct-client-edit-tabs,
    .oct-client-edit-subtabs,
    .oct-billing-filter-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: .15rem;
    }

    .oct-admin-subtab,
    .oct-client-edit-tab,
    .oct-client-edit-subtab,
    .oct-billing-pill {
        flex: 0 0 auto;
    }

    .oct-admin-modal {
        padding: .55rem;
        align-items: flex-end;
    }

    .oct-admin-modal-dialog,
    .oct-admin-modal-dialog--wide,
    .oct-admin-modal-dialog--plan,
    .oct-admin-modal-dialog--client,
    .oct-admin-modal-dialog--client-create,
    .oct-admin-modal-dialog--invoice {
        width: 100%;
        max-height: min(92vh, 100%);
        border-radius: var(--paces-radius) 1.1rem .75rem .75rem;
    }

    .oct-admin-modal-header,
    .oct-admin-modal-footer,
    .oct-admin-modal-body {
        padding-left: .95rem;
        padding-right: .95rem;
    }

    .oct-admin-modal-footer {
        flex-wrap: wrap;
    }

    .oct-admin-grid-2,
    .oct-admin-grid-3,
    .oct-admin-grid-4,
    .oct-admin-span-2,
    .oct-admin-span-3,
    .oct-admin-span-4 { grid-column: auto; grid-template-columns: 1fr; }

    .oct-tx-kpi-grid {
        grid-template-columns: 1fr;
    }

    .oct-billing-toolbar,
    .oct-clients-toolbar {
        align-items: stretch;
    }

    .oct-billing-toolbar-end {
        justify-content: flex-start;
        flex: 1 1 100%;
    }
}

/* Toast notifications (shared with public site notify.js) */
.oct-toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 3000;
    display: grid;
    gap: .75rem;
    width: min(420px, calc(100vw - 2rem));
    pointer-events: none;
}

.oct-toast {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .75rem;
    align-items: start;
    padding: .95rem 1rem .95rem .85rem;
    border-radius: .9rem;
    border: 1px solid var(--adm-border);
    background: #fff;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
    overflow: hidden;
    pointer-events: auto;
    transform: translateX(calc(100% + 1.5rem));
    opacity: 0;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .32s ease;
}

.oct-toast.is-visible {
    transform: translateX(0);
    opacity: 1;
}

.oct-toast.is-leaving {
    transform: translateX(calc(100% + 1.5rem));
    opacity: 0;
}

.oct-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .65rem;
    font-size: 1rem;
    flex-shrink: 0;
}

.oct-toast-body { min-width: 0; padding-top: .1rem; }

.oct-toast-title {
    display: block;
    margin-bottom: .15rem;
    font-size: .88rem;
    color: var(--adm-text);
}

.oct-toast-message {
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--adm-muted);
}

.oct-toast-close {
    border: 0;
    background: transparent;
    color: var(--adm-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: .15rem;
    border-radius: .35rem;
}

.oct-toast-close:hover {
    color: var(--adm-text);
    background: var(--adm-surface-hover);
}

.oct-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    animation-name: oct-toast-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.oct-toast.is-paused .oct-toast-progress {
    animation-play-state: paused;
}

.oct-toast--success { border-color: rgba(34, 197, 94, .35); }
.oct-toast--success .oct-toast-icon { background: rgba(34, 197, 94, .15); color: var(--adm-success); }
.oct-toast--success .oct-toast-progress { background: linear-gradient(90deg, var(--adm-success), rgba(34, 197, 94, .35)); }

.oct-toast--error { border-color: rgba(248, 113, 113, .35); }
.oct-toast--error .oct-toast-icon { background: rgba(248, 113, 113, .15); color: #f87171; }
.oct-toast--error .oct-toast-progress { background: linear-gradient(90deg, #f87171, rgba(248, 113, 113, .35)); }

.oct-toast--warning { border-color: rgba(251, 191, 36, .35); }
.oct-toast--warning .oct-toast-icon { background: rgba(251, 191, 36, .15); color: #fbbf24; }
.oct-toast--warning .oct-toast-progress { background: linear-gradient(90deg, #fbbf24, rgba(251, 191, 36, .35)); }

.oct-toast--info { border-color: rgba(139, 154, 212, .35); }
.oct-toast--info .oct-toast-icon { background: rgba(108, 124, 255, .15); color: #8b97ff; }
.oct-toast--info .oct-toast-progress { background: linear-gradient(90deg, #8b97ff, rgba(139, 154, 212, .35)); }

@keyframes oct-toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 640px) {
    .oct-toast-stack {
        left: 1rem;
        right: 1rem;
        width: auto;
    }

    .oct-toast {
        transform: translateY(-1rem);
    }

    .oct-toast.is-visible,
    .oct-toast.is-leaving {
        transform: translateY(0);
    }

    .oct-toast.is-leaving {
        opacity: 0;
        transform: translateY(-1rem);
    }
}

/* Confirm / prompt dialogs */
body.oct-dialog-open {
    overflow: hidden;
}

.oct-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .22s ease;
}

.oct-dialog-overlay.is-visible {
    opacity: 1;
}

.oct-dialog {
    width: min(460px, 100%);
    padding: 1.35rem 1.35rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid var(--adm-border);
    background: var(--adm-panel);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .14);
    transform: translateY(12px) scale(.98);
    transition: transform .24s cubic-bezier(.22, 1, .36, 1);
}

.oct-dialog-overlay.is-visible .oct-dialog {
    transform: translateY(0) scale(1);
}

.oct-dialog-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .75rem;
    margin-bottom: .85rem;
    font-size: 1.2rem;
}

.oct-dialog-icon--default,
.oct-dialog-icon--info {
    background: rgba(108, 124, 255, .15);
    color: #8b97ff;
}

.oct-dialog-icon--success {
    background: rgba(34, 197, 94, .15);
    color: var(--adm-success);
}

.oct-dialog-icon--danger {
    background: rgba(239, 68, 68, .15);
    color: #f87171;
}

.oct-dialog-icon--warning {
    background: rgba(251, 191, 36, .15);
    color: #fbbf24;
}

.oct-dialog-title {
    margin: 0 0 .45rem;
    font-size: 1.05rem;
    line-height: 1.35;
}

.oct-dialog-message {
    margin: 0;
    color: var(--adm-muted);
    font-size: .92rem;
    line-height: 1.5;
}

.oct-dialog-field {
    display: block;
    margin-top: .85rem;
}

.oct-dialog-input {
    width: 100%;
    min-height: 88px;
    resize: vertical;
    border: 1px solid var(--adm-border);
    border-radius: .75rem;
    background: #fff;
    color: var(--adm-text);
    padding: .75rem .85rem;
    font: inherit;
}

.oct-dialog-input:focus {
    outline: none;
    border-color: #8b97ff;
    box-shadow: 0 0 0 3px rgba(108, 124, 255, .18);
}

.oct-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: 1.15rem;
}

.oct-dialog-btn {
    border: 0;
    border-radius: 999px;
    padding: .62rem 1rem;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, opacity .15s ease;
}

.oct-dialog-btn:hover {
    transform: translateY(-1px);
}

.oct-dialog-btn-ghost {
    background: var(--adm-surface-hover);
    color: var(--adm-text);
    border: 1px solid var(--adm-border);
}

.oct-dialog-btn-primary {
    background: var(--adm-primary);
    color: #fff;
}

.oct-dialog-btn-danger {
    background: var(--adm-danger);
    color: #fff;
}

.oct-admin-code-block {
    margin: .75rem 0 0;
    padding: .85rem 1rem;
    border-radius: .75rem;
    border: 1px solid var(--adm-border);
    background: #0f172a;
    color: #e2e8f0;
    font-size: .82rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}

.oct-admin-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

/* Sub-pestañas internas (Galaxy tabs) */
.oct-admin-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem;
    margin-bottom: 1rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--paces-border);
    border-radius: 0;
    background: transparent;
}

.oct-admin-subtab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--adm-muted);
    padding: .7rem .95rem;
    font: inherit;
    font-size: .8125rem;
    font-weight: 400;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.oct-admin-subtab:hover {
    color: var(--paces-primary);
    background: transparent;
}

.oct-admin-subtab.is-active {
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--paces-primary);
    color: var(--paces-primary);
    font-weight: 700;
    box-shadow: none;
}

.oct-admin-subtab:hover {
    color: var(--paces-primary);
    background: transparent;
}

.oct-admin-subpanel {
    display: none;
}

.oct-admin-subpanel.is-active {
    display: block;
}

/* Facturación */
.oct-billing-meta {
    font-size: .78rem;
    color: var(--adm-muted);
    white-space: nowrap;
}

.oct-billing-kpi-grid {
    margin-bottom: 1.1rem;
}

.oct-billing-kpi-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.05rem 1.1rem;
    position: relative;
    overflow: hidden;
}

.oct-billing-kpi-icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.oct-billing-kpi-icon--success {
    background: #dcfce7;
    color: #16a34a;
}

.oct-billing-kpi-icon--warning {
    background: #fef3c7;
    color: #d97706;
}

.oct-billing-kpi-icon--danger {
    background: #fee2e2;
    color: #dc2626;
}

.oct-billing-kpi-icon--info {
    background: #eaf2ff;
    color: #6c7cff;
}

.oct-billing-kpi-body strong {
    display: block;
    font-family: var(--adm-display);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: .2rem;
}

.oct-billing-kpi-body span {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--adm-text);
}

.oct-billing-kpi-body small {
    display: block;
    margin-top: .2rem;
    font-size: .7rem;
    color: var(--adm-muted);
}

.oct-billing-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0 .85rem;
}

.oct-billing-toolbar-end {
    flex: 1 1 220px;
    display: flex;
    justify-content: flex-end;
}

.oct-billing-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.oct-billing-pill {
    border: 1px solid var(--paces-border);
    background: #fff;
    color: var(--adm-muted);
    border-radius: 6px;
    padding: .4rem .85rem;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.oct-billing-pill:hover {
    color: var(--paces-primary);
    border-color: #d7ddff;
    background: #f3f5ff;
}

.oct-billing-pill.is-active {
    background: rgba(108, 124, 255, .15);
    border-color: rgba(108, 124, 255, .3);
    color: #515dbf;
    font-weight: 700;
}

.oct-billing-search {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: min(100%, 320px);
    border: 1px solid var(--adm-border);
    border-radius: 999px;
    padding: .35rem .75rem;
    background: #fff;
    color: var(--adm-muted);
}

.oct-billing-search input {
    border: 0;
    background: transparent;
    color: var(--adm-text);
    width: 100%;
    font: inherit;
    font-size: .82rem;
    outline: none;
}

.oct-billing-table-wrap {
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--paces-shadow);
}

.oct-billing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.oct-billing-table thead {
    background: #f8fafc;
}

.oct-billing-table th,
.oct-billing-table td {
    padding: .78rem .9rem;
    text-align: left;
    border-bottom: 1px solid var(--paces-border);
    vertical-align: middle;
}

.oct-billing-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    font-weight: 700;
}

.oct-billing-table tbody tr {
    transition: background .12s ease;
}

.oct-billing-table tbody tr:hover {
    background: #f3f5ff;
}

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

.oct-billing-table tbody tr.is-overdue {
    background: rgba(255, 92, 138, .06);
}

.oct-billing-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right !important;
}

.oct-billing-cell-main strong {
    display: block;
    font-weight: 700;
}

.oct-billing-cell-main small {
    display: block;
    color: var(--adm-muted);
    font-size: .72rem;
    margin-top: .12rem;
}

.oct-billing-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.oct-billing-amount.is-free {
    color: var(--adm-muted);
    font-weight: 600;
}

.oct-billing-amount.is-trial {
    color: var(--adm-muted);
    font-weight: 600;
}

.oct-billing-amount-dual {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    line-height: 1.25;
}

.oct-billing-col-amount,
.oct-billing-col-pay {
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}

.oct-billing-col-amount .oct-billing-amount,
.oct-billing-col-amount .oct-billing-amount-dual {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oct-billing-cell-client strong,
.oct-billing-cell-plan strong {
    font-size: .84rem;
    letter-spacing: -.01em;
}

.oct-billing-pay-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    box-sizing: border-box;
    padding: .25rem .55rem;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    border: 0;
    vertical-align: middle;
}

.oct-billing-pay-badge-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oct-admin-pay-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    object-fit: contain;
    flex-shrink: 0;
}

.oct-admin-pay-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    color: #fff;
    font-size: 9px;
    line-height: 1;
}

.oct-admin-pay-tipo-cell,
.oct-admin-pay-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.oct-admin-pay-method-native {
    display: none !important;
}

.oct-admin-pay-picker {
    position: relative;
    width: 100%;
    z-index: 1;
}

.oct-admin-pay-picker.is-open {
    z-index: 40;
}

.oct-admin-pay-picker-toggle {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-input-bg, #fff);
    color: var(--adm-text);
    padding: .45rem .65rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.oct-admin-pay-picker-toggle:focus {
    outline: none;
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 3px rgba(var(--paces-primary-rgb), .18);
}

.oct-admin-pay-picker-value {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex: 1;
    min-width: 0;
}

.oct-admin-pay-picker-caret {
    margin-left: auto;
    color: var(--adm-muted);
    flex-shrink: 0;
}

.oct-admin-pay-picker-menu {
    position: absolute;
    top: calc(100% + .3rem);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-surface);
    box-shadow: var(--adm-shadow);
}

.oct-admin-pay-picker-menu[hidden] {
    display: none !important;
}

.oct-admin-pay-picker-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--adm-text);
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .65rem;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.oct-admin-pay-picker-option:hover,
.oct-admin-pay-picker-option.is-active {
    background: var(--adm-surface-hover);
}

.oct-admin-pay-method-label {
    font-size: .84rem;
    font-weight: 600;
}

.oct-billing-pay-badge--free {
    color: #817961;
    background: rgba(172, 161, 129, .15);
}

.oct-billing-pay-badge--none {
    color: #6c757d;
    background: rgba(108, 124, 255, .08);
}

.oct-billing-pay-badge--cup {
    color: #3b9dbf;
    background: rgba(79, 209, 255, .15);
}

.oct-billing-pay-badge--ves {
    color: #bf8a3a;
    background: rgba(255, 184, 77, .15);
}

.oct-billing-pay-badge--usd {
    color: #2dad92;
    background: rgba(60, 230, 194, .15);
}

.oct-billing-pay-badge--crypto {
    color: #515dbf;
    background: rgba(108, 124, 255, .15);
}

.oct-billing-pay-badge--apolopay {
    color: #6d28d9;
    background: rgba(109, 40, 217, .12);
}

.oct-billing-status-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .28rem;
}

.oct-billing-report-badge {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    color: #9a3412;
    background: rgba(255, 184, 77, .22);
    border: 1px solid rgba(255, 184, 77, .45);
    white-space: nowrap;
}

.oct-billing-report-badge i {
    font-size: .78rem;
}

.oct-admin-icon-btn.is-warning {
    color: #b45309;
    background: rgba(255, 184, 77, .18);
}

tr.is-payment-reported td {
    background: rgba(255, 184, 77, .06);
}

.oct-billing-payment-report-card {
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(255, 184, 77, .35);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 184, 77, .1), rgba(255, 184, 77, .03));
}

.oct-billing-payment-report-card h3 {
    margin: 0 0 .7rem;
    font-size: .95rem;
}

.oct-billing-payment-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem .9rem;
}

.oct-billing-payment-report-grid > div {
    display: grid;
    gap: .15rem;
}

.oct-billing-payment-report-grid span {
    font-size: .75rem;
    color: var(--adm-muted);
}

.oct-billing-payment-report-grid strong {
    font-size: .9rem;
    word-break: break-word;
}

.oct-billing-notes-pre {
    white-space: pre-wrap;
    font-weight: 600;
}

.oct-billing-row-actions {
    display: inline-flex;
    gap: .35rem;
    justify-content: flex-end;
}

.oct-billing-empty {
    display: grid;
    gap: .35rem;
    justify-items: center;
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--adm-muted);
}

.oct-billing-empty[hidden] {
    display: none !important;
}

.oct-billing-empty i {
    font-size: 1.6rem;
    opacity: .65;
}

.oct-billing-empty strong {
    color: var(--adm-text);
}

.oct-admin-modal-dialog--invoice {
    width: min(760px, 100%);
    max-height: min(92vh, 900px);
}

.oct-billing-invoice-preview-wrap {
    border: 1px solid var(--adm-border);
    border-radius: 14px;
    overflow: hidden;
    background: #eef2f7;
}

.oct-billing-invoice-preview {
    width: 100%;
    min-height: 420px;
    border: 0;
    display: block;
    background: #eef2f7;
}

.oct-billing-invoice-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin-bottom: 1rem;
    font-size: .82rem;
    color: var(--adm-muted);
}

.oct-billing-invoice-meta strong {
    color: var(--adm-text);
}

.oct-billing-checkbox-label {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.oct-billing-checkbox-label input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--adm-accent);
}

.oct-billing-field-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.oct-billing-field-label .bi {
    color: var(--adm-muted);
    font-size: .95rem;
}

.oct-billing-amount-label {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.oct-billing-money-field {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.5rem;
    padding: .2rem .65rem .2rem .45rem;
    border: 1px solid var(--adm-border);
    border-radius: .65rem;
    background: var(--adm-input-bg, #fff);
}

.oct-billing-currency-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}

.oct-billing-currency-flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

.oct-billing-money-field .oct-billing-money-value {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: .35rem 0 !important;
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.oct-billing-currency-code {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--adm-muted);
}

.oct-admin-status--active,
.oct-admin-status--paid {
    background: rgba(60, 230, 194, .15);
    border-color: transparent;
    color: #2dad92;
}

.oct-admin-status--suspended,
.oct-admin-status--overdue {
    background: rgba(255, 92, 138, .15);
    border-color: transparent;
    color: #bf4568;
}

.oct-admin-status--due {
    background: rgba(255, 184, 77, .15);
    border-color: transparent;
    color: #bf8a3a;
}

.oct-admin-status--cancelled {
    background: rgba(172, 161, 129, .15);
    border-color: transparent;
    color: #817961;
}

@media (max-width: 900px) {
    .oct-billing-table-wrap {
        overflow-x: auto;
    }

    .oct-billing-table {
        min-width: 880px;
    }

    .oct-billing-col-amount,
    .oct-billing-col-pay {
        white-space: normal;
    }

    .oct-billing-pay-badge {
        max-width: 9.5rem;
    }
}

.oct-admin-form-section {
    display: grid;
    gap: .85rem;
}

.oct-admin-form-section-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

/* Modales mejorados */
.oct-admin-modal-header--rich {
    align-items: flex-start;
}

.oct-admin-modal-header-main {
    flex: 1;
    min-width: 0;
}

.oct-admin-modal-subtitle {
    margin: .25rem 0 0;
    color: var(--adm-muted);
    font-size: 12px;
    font-weight: 400;
}

.oct-admin-modal-status {
    flex-shrink: 0;
}

.oct-admin-modal-sections {
    display: grid;
    gap: 1rem;
}

.oct-admin-detail-section {
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    padding: 1rem;
    background: #fdfdfd;
    box-shadow: none;
}

.oct-admin-detail-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .85rem;
    font-size: .88rem;
    font-weight: 800;
    color: #cbd5e1;
}

.oct-admin-detail-section-title i {
    color: #b4bcff;
}

.oct-admin-detail-kv {
    display: grid;
    gap: .65rem;
}

.oct-admin-detail-kv-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: .75rem;
    align-items: start;
    font-size: .86rem;
}

.oct-admin-detail-kv-row dt {
    margin: 0;
    color: var(--adm-muted);
    font-weight: 700;
}

.oct-admin-detail-kv-row dd {
    margin: 0;
    word-break: break-word;
}

.oct-admin-detail-kv-row dd code {
    font-size: .78rem;
    word-break: break-all;
}

/* Tema claro */
html[data-adm-theme="light"] {
    --adm-scrollbar-thumb: rgba(100, 116, 139, .35);
    --adm-scrollbar-thumb-hover: rgba(71, 85, 105, .55);
    --adm-bg: #fdfdfd;
    --adm-panel: #ffffff;
    --adm-panel-2: #f3f5ff;
    --adm-border: #edf2f9;
    --adm-text: #212529;
    --adm-muted: #6c757d;
    --adm-primary: #6c7cff;
    --adm-primary-soft: rgba(108, 124, 255, .15);
    --adm-danger: #ff5c8a;
    --adm-danger-soft: rgba(255, 92, 138, .15);
    --adm-success: #3ce6c2;
    --adm-success-soft: rgba(60, 230, 194, .15);
    --adm-warning: #ffb84d;
    --adm-warning-soft: rgba(255, 184, 77, .15);
    --adm-surface: #ffffff;
    --adm-surface-2: #f6f7fb;
    --adm-surface-hover: #eaf2ff;
    --adm-shadow: 2px 8px 16px rgba(57, 62, 80, 0.07);
    --adm-shadow-lg: 2px 12px 28px rgba(57, 62, 80, 0.1);
    color-scheme: light;
}

html[data-adm-theme="light"] body {
    color: var(--adm-text);
    background: var(--adm-bg);
}

html[data-adm-theme="light"] input[type="text"],
html[data-adm-theme="light"] input[type="email"],
html[data-adm-theme="light"] input[type="password"],
html[data-adm-theme="light"] input[type="tel"],
html[data-adm-theme="light"] input[type="search"],
html[data-adm-theme="light"] input[type="number"],
html[data-adm-theme="light"] input[type="url"],
html[data-adm-theme="light"] input[type="date"],
html[data-adm-theme="light"] input[type="time"],
html[data-adm-theme="light"] input[type="datetime-local"],
html[data-adm-theme="light"] textarea,
html[data-adm-theme="light"] select {
    background: #fff;
    color: #212529;
    border-color: #edf2f9;
    color-scheme: light;
}

html[data-adm-theme="light"] input:focus,
html[data-adm-theme="light"] textarea:focus,
html[data-adm-theme="light"] select:focus,
html[data-adm-theme="light"] input[type="date"]:focus,
html[data-adm-theme="light"] input[type="time"]:focus,
html[data-adm-theme="light"] input[type="datetime-local"]:focus {
    outline: none;
    border-color: rgba(108, 124, 255, .55);
    box-shadow: 0 0 0 0.2rem rgba(108, 124, 255, .12);
}

html[data-adm-theme="light"] .oct-admin-btn {
    color: #334155;
}

html[data-adm-theme="light"] .oct-admin-btn-primary {
    color: #fff;
    background: var(--paces-primary);
}

html[data-adm-theme="light"] .oct-admin-btn-primary:hover {
    background: var(--paces-primary-hover);
}

html[data-adm-theme="light"] .oct-admin-btn-ghost {
    background: #fff;
    border-color: #d5dde8;
    color: #475569;
}

html[data-adm-theme="light"] .oct-admin-btn-ghost:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

html[data-adm-theme="light"] .oct-admin-btn-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

html[data-adm-theme="light"] .oct-admin-alert-error {
    background: rgba(255, 92, 138, .15);
    border-color: rgba(255, 92, 138, .3);
    color: #bf4568;
}

html[data-adm-theme="light"] .oct-admin-alert-success {
    background: rgba(60, 230, 194, .15);
    border-color: rgba(60, 230, 194, .3);
    color: #2dad92;
}

html[data-adm-theme="light"] .oct-admin-alert-warning {
    background: rgba(255, 184, 77, .15);
    border-color: rgba(255, 184, 77, .3);
    color: #bf8a3a;
}

html[data-adm-theme="light"] .oct-admin-topbar {
    background: #ffffff;
    border-bottom-color: var(--paces-border);
    box-shadow: none;
}

html[data-adm-theme="light"] .oct-admin-topbar-icon-btn {
    background: transparent;
    border-color: transparent;
    color: #6c757d;
    border-radius: 6px;
}

html[data-adm-theme="light"] .oct-admin-topbar-icon-btn:hover {
    background: #eaf2ff;
    border-color: transparent;
    color: #6c7cff;
}

html[data-adm-theme="light"] .oct-admin-notify-menu,
html[data-adm-theme="light"] .oct-admin-user-menu {
    background: #fff;
    border-color: #edf2f9;
    box-shadow: var(--paces-shadow);
}

html[data-adm-theme="light"] .oct-admin-notify-item.is-unread {
    background: rgba(108, 124, 255, .08);
}

html[data-adm-theme="light"] .oct-admin-user-trigger {
    background: transparent;
    border-color: transparent;
}

html[data-adm-theme="light"] .oct-admin-notify-mark-all {
    color: #6c7cff;
}

html[data-adm-theme="light"] .oct-admin-notify-mark-all:hover {
    color: #515dbf;
}

html[data-adm-theme="light"] .oct-admin-menu-toggle {
    background: transparent;
    color: #6c757d;
    border-color: transparent;
}

html[data-adm-theme="light"] .oct-admin-sidebar {
    background: var(--paces-surface);
    border-color: var(--paces-border);
    box-shadow: none;
}

html[data-adm-theme="light"] .oct-admin-nav-group {
    border-bottom-color: transparent;
}

html[data-adm-theme="light"] .oct-admin-nav-label {
    color: #94a3b8;
}

html[data-adm-theme="light"] .oct-admin-nav-btn {
    color: #6c757d;
}

html[data-adm-theme="light"] .oct-admin-nav-btn:hover {
    background: #eaf2ff;
    border-color: transparent;
    color: #6c7cff;
}

html[data-adm-theme="light"] .oct-admin-nav-btn.is-active {
    background: #f3f5ff;
    border-color: transparent;
    color: #6c7cff;
    box-shadow: none;
}

html[data-adm-theme="light"] .oct-admin-nav-btn.is-active .oct-admin-nav-icon {
    background: transparent;
    color: #6c7cff;
    box-shadow: none;
}

html[data-adm-theme="light"] body.oct-admin-sidebar-open .oct-admin-sidebar-backdrop {
    background: rgba(15, 23, 42, .28);
}

html[data-adm-theme="light"] .oct-admin-panel {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: var(--adm-shadow);
}

html[data-adm-theme="light"] .oct-admin-card,
html[data-adm-theme="light"] .oct-admin-kpi-card:not(.oct-dash-kpi),
html[data-adm-theme="light"] .oct-admin-detail-section,
html[data-adm-theme="light"] .oct-admin-overview-item,
html[data-adm-theme="light"] .oct-admin-quick-action {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: none;
}

html[data-adm-theme="light"] .oct-admin-kpi-card.oct-dash-kpi {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

html[data-adm-theme="light"] .oct-admin-kpi-card.is-warning:not(.oct-dash-kpi) strong { color: #d97706; }
html[data-adm-theme="light"] .oct-admin-kpi-card.is-danger:not(.oct-dash-kpi) strong { color: #dc2626; }
html[data-adm-theme="light"] .oct-admin-kpi-card.is-success:not(.oct-dash-kpi) strong { color: #16a34a; }

html[data-adm-theme="light"] .oct-admin-overview-item {
    background: #f8fafc;
}

html[data-adm-theme="light"] .oct-admin-quick-action {
    color: #0f172a;
    background: #fff;
}

html[data-adm-theme="light"] .oct-admin-quick-action:hover {
    background: linear-gradient(180deg, #f6f7fb 0%, #fff 100%);
    border-color: #d7ddff;
}

html[data-adm-theme="light"] .oct-admin-quick-action i {
    color: inherit;
}

html[data-adm-theme="light"] .oct-admin-eyebrow,
html[data-adm-theme="light"] .oct-admin-section-label {
    color: #94a3b8;
}

html[data-adm-theme="light"] .oct-admin-empty--card {
    background:
        radial-gradient(ellipse 70% 80% at 50% 20%, rgba(34, 197, 94, .08), transparent 65%),
        #f8fafc;
    border-color: #d4e4d8;
}

html[data-adm-theme="light"] .oct-admin-card--dashboard {
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

html[data-adm-theme="light"] .oct-admin-status--pending {
    background: rgba(255, 184, 77, .15);
    border-color: transparent;
    color: #bf8a3a;
}

html[data-adm-theme="light"] .oct-admin-status--approved {
    background: rgba(60, 230, 194, .15);
    border-color: transparent;
    color: #2dad92;
}

html[data-adm-theme="light"] .oct-admin-status--rejected {
    background: rgba(255, 92, 138, .15);
    border-color: transparent;
    color: #bf4568;
}

html[data-adm-theme="light"] .oct-admin-select {
    background: #fff;
    border-color: #edf2f9;
    color-scheme: light;
}

html[data-adm-theme="light"] .oct-admin-savebar,
html[data-adm-theme="light"] #octContentSavebar {
    display: none !important;
}

html[data-adm-theme="light"] .oct-admin-help-btn:hover,
html[data-adm-theme="light"] .oct-admin-help-btn.is-open {
    background: #eaf2ff;
    color: #515dbf;
}

html[data-adm-theme="light"] .oct-admin-field-help-popover {
    background: #fff;
    color: #334155;
    border-color: #d7ddff;
    box-shadow: var(--adm-shadow-lg);
}

html[data-adm-theme="light"] .oct-admin-order-receipt {
    background: #f8fafc;
}

html[data-adm-theme="light"] .oct-admin-modal-backdrop {
    background: rgba(15, 23, 42, .42);
}

html[data-adm-theme="light"] .oct-admin-modal-dialog,
html[data-adm-theme="light"] .oct-dialog {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 24px 56px rgba(15, 23, 42, .16);
}

html[data-adm-theme="light"] .oct-admin-modal-header {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

html[data-adm-theme="light"] .oct-admin-modal-footer {
    background: #fafbfc;
}

html[data-adm-theme="light"] .oct-admin-credentials-box,
html[data-adm-theme="light"] .oct-dialog-input {
    background: #f8fafc;
    border-color: #e2e8f0;
}

html[data-adm-theme="light"] .oct-opg-bank-picker-toggle {
    background: #fff;
    color: #0f172a;
    border-color: #cbd5e1;
}

html[data-adm-theme="light"] .oct-opg-bank-picker-toggle .oct-opg-bank-placeholder {
    background: #e2e8f0;
    color: #64748b;
}

html[data-adm-theme="light"] .oct-opg-bank-option {
    color: #0f172a;
}

html[data-adm-theme="light"] .oct-opg-bank-option:hover,
html[data-adm-theme="light"] .oct-opg-bank-option.is-active {
    background: #f3f5ff;
}

html[data-adm-theme="light"] .oct-admin-code-block {
    background: #f1f5f9;
    color: #334155;
    border-color: #e2e8f0;
}

html[data-adm-theme="light"] .oct-billing-table-wrap {
    background: #fff;
    border-color: rgba(15, 23, 42, .07);
}

html[data-adm-theme="light"] .oct-billing-table thead {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

html[data-adm-theme="light"] .oct-billing-table tbody tr:hover {
    background: rgba(108, 124, 255, .04);
}

html[data-adm-theme="light"] .oct-billing-table tbody tr.is-overdue {
    background: rgba(239, 68, 68, .05);
}

html[data-adm-theme="light"] .oct-billing-pay-badge--free {
    color: #817961;
    background: rgba(172, 161, 129, .15);
    border-color: transparent;
}

html[data-adm-theme="light"] .oct-billing-pay-badge--none {
    color: #6c757d;
    background: rgba(108, 124, 255, .08);
    border-color: transparent;
}

html[data-adm-theme="light"] .oct-billing-pay-badge--cup {
    color: #3b9dbf;
    background: rgba(79, 209, 255, .15);
    border-color: transparent;
}

html[data-adm-theme="light"] .oct-billing-pay-badge--ves {
    color: #bf8a3a;
    background: rgba(255, 184, 77, .15);
    border-color: transparent;
}

html[data-adm-theme="light"] .oct-billing-pay-badge--usd {
    color: #2dad92;
    background: rgba(60, 230, 194, .15);
    border-color: transparent;
}

html[data-adm-theme="light"] .oct-billing-report-badge {
    color: #9a3412;
    background: rgba(251, 191, 36, .2);
    border-color: rgba(245, 158, 11, .45);
}

html[data-adm-theme="light"] tr.is-payment-reported td {
    background: rgba(251, 191, 36, .08);
}

html[data-adm-theme="light"] .oct-billing-payment-report-card {
    background: linear-gradient(180deg, rgba(251, 191, 36, .12), rgba(251, 191, 36, .04));
    border-color: rgba(245, 158, 11, .35);
}

html[data-adm-theme="light"] .oct-billing-pay-badge--crypto {
    color: #515dbf;
    background: rgba(108, 124, 255, .15);
    border-color: transparent;
}

html[data-adm-theme="light"] .oct-billing-pill {
    background: #fff;
    border-color: #edf2f9;
    color: #6c757d;
}

html[data-adm-theme="light"] .oct-billing-pill.is-active {
    background: rgba(108, 124, 255, .15);
    border-color: rgba(108, 124, 255, .3);
    color: #515dbf;
}

html[data-adm-theme="light"] .oct-billing-search {
    background: #fff;
    border-color: #edf2f9;
}

html[data-adm-theme="light"] .oct-billing-kpi-icon--success { background: rgba(60, 230, 194, .15); color: #2dad92; }
html[data-adm-theme="light"] .oct-billing-kpi-icon--warning { background: rgba(255, 184, 77, .15); color: #bf8a3a; }
html[data-adm-theme="light"] .oct-billing-kpi-icon--danger { background: rgba(255, 92, 138, .15); color: #bf4568; }
html[data-adm-theme="light"] .oct-billing-kpi-icon--info { background: rgba(108, 124, 255, .15); color: #515dbf; }

html[data-adm-theme="light"] .oct-admin-subtabs {
    background: transparent;
    border-color: var(--paces-border);
}

html[data-adm-theme="light"] .oct-admin-subtab {
    color: #6c757d;
}

html[data-adm-theme="light"] .oct-admin-subtab:hover {
    color: #6c7cff;
    background: transparent;
}

html[data-adm-theme="light"] .oct-admin-subtab.is-active {
    background: transparent;
    border-color: transparent;
    border-bottom-color: #6c7cff;
    color: #6c7cff;
    box-shadow: none;
}

html[data-adm-theme="light"] .oct-admin-detail-section-title {
    color: #334155;
}

html[data-adm-theme="light"] .oct-admin-detail-section-title i {
    color: #6c7cff;
}

html[data-adm-theme="light"] .oct-admin-detail-kv dt {
    color: #94a3b8;
}

html[data-adm-theme="light"] .oct-admin-detail-kv dd {
    color: #0f172a;
}

html[data-adm-theme="light"] .oct-admin-field-hint code {
    background: #f3f5ff;
    color: #515dbf;
    border: 1px solid #eaf2ff;
    padding: .1rem .35rem;
    border-radius: .35rem;
}

html[data-adm-theme="light"] .oct-toast {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: var(--adm-shadow-lg);
}

html[data-adm-theme="light"] .oct-toast-close:hover {
    background: #f1f5f9;
}

html[data-adm-theme="light"] .oct-dialog-btn-ghost {
    background: #f8fafc;
    color: #334155;
    border-color: #cbd5e1;
}

html[data-adm-theme="light"] .oct-admin-login-card {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: var(--adm-shadow-lg);
}

html[data-adm-theme="light"] .oct-admin-login--paces {
    background: #fdfdfd;
}

html[data-adm-theme="light"] .oct-auth-card {
    background: #fff;
}

html[data-adm-theme="light"] .oct-auth-title {
    color: #212529;
}

html[data-adm-theme="light"] .oct-admin-panel-head h1,
html[data-adm-theme="light"] .oct-admin-modal-header h2,
html[data-adm-theme="light"] .oct-admin-brand strong {
    color: #0f172a;
}

html[data-adm-theme="light"] a:not(.oct-admin-btn) {
    color: #6c7cff;
}

html[data-adm-theme="light"] .oct-admin-order-receipt-body a,
html[data-adm-theme="light"] .oct-admin-detail-kv a {
    color: #6c7cff;
}

html[data-adm-theme="light"] .oct-opg-account-card {
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    border-color: rgba(15, 23, 42, .07);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

html[data-adm-theme="light"] .oct-opg-account-card:hover {
    border-color: #d7ddff;
    box-shadow: 0 12px 28px rgba(108, 124, 255, .1);
}

html[data-adm-theme="light"] .oct-opg-account-icon {
    background: #f3f5ff;
    border-color: rgba(15, 23, 42, .06);
}

html[data-adm-theme="light"] .oct-opg-plan-card .oct-opg-account-icon {
    background: var(--paces-primary);
    border: none;
}

html[data-adm-theme="light"] .oct-opg-account-title {
    color: #0f172a;
}

html[data-adm-theme="light"] .oct-opg-account-badge {
    background: #f3f5ff;
    border-color: #d7ddff;
    color: #515dbf;
}

html[data-adm-theme="light"] .oct-opg-account-row-value {
    color: #0f172a;
}

html[data-adm-theme="light"] .oct-opg-account-foot {
    border-top-color: rgba(15, 23, 42, .06);
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

html[data-adm-theme="light"] .oct-opg-account-btn {
    background: #fff;
    border-color: rgba(15, 23, 42, .08);
    color: #64748b;
}

html[data-adm-theme="light"] .oct-opg-account-btn:hover {
    background: #f3f5ff;
    border-color: #d7ddff;
    color: #515dbf;
}

html[data-adm-theme="light"] .oct-opg-cards-empty {
    background:
        radial-gradient(ellipse 70% 80% at 50% 20%, rgba(108, 124, 255, .07), transparent 65%),
        #f8fafc;
    border-color: #d4e0ef;
}

html[data-adm-theme="light"] .oct-admin-status--active,
html[data-adm-theme="light"] .oct-admin-status--paid {
    background: rgba(60, 230, 194, .15);
    border-color: transparent;
    color: #2dad92;
}

html[data-adm-theme="light"] .oct-admin-status--suspended,
html[data-adm-theme="light"] .oct-admin-status--overdue {
    background: rgba(255, 92, 138, .15);
    border-color: transparent;
    color: #bf4568;
}

html[data-adm-theme="light"] .oct-admin-status--due {
    background: rgba(255, 184, 77, .15);
    border-color: transparent;
    color: #bf8a3a;
}

html[data-adm-theme="light"] .oct-opg-account-toggle {
    background: #cbd5e1;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}

html[data-adm-theme="light"] .oct-opg-account-toggle-wrap input:checked + .oct-opg-account-toggle {
    background: var(--paces-primary);
}

html[data-adm-theme="light"] .oct-admin-icon-btn {
    background: #fff;
    border-color: #cbd5e1;
    color: #64748b;
}

html[data-adm-theme="light"] .oct-admin-icon-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

html[data-adm-theme="light"] .oct-admin-icon-btn--primary {
    color: #6c7cff;
    border-color: #d7ddff;
}

html[data-adm-theme="light"] .oct-admin-icon-btn--primary:hover {
    background: #f3f5ff;
    color: #515dbf;
}

html[data-adm-theme="light"] .oct-admin-icon-btn--danger {
    color: #dc2626;
    border-color: #fecaca;
}

html[data-adm-theme="light"] .oct-admin-icon-btn--danger:hover {
    background: #fef2f2;
    color: #b91c1c;
}

html[data-adm-theme="light"] .oct-admin-status--cancelled {
    background: #f1f5f9;
    color: #64748b;
}

/* Billing stats charts */
.oct-billing-charts-toolbar {
    margin: 0 0 .85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.oct-billing-year-pick {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--adm-muted);
}

.oct-billing-year-pick .oct-admin-select {
    min-width: 6.5rem;
}

.oct-billing-monthly-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .65rem;
}

.oct-billing-year-table .oct-billing-col-num,
.oct-billing-year-table .oct-billing-col-center {
    text-align: center;
    width: 4.5rem;
}

.oct-billing-month-name {
    font-weight: 600;
}

.oct-billing-amount-sub {
    display: block;
    margin-top: .15rem;
    font-size: .75rem;
    color: var(--adm-muted);
    font-weight: 500;
}

.oct-billing-dual-usd {
    font-size: .88rem;
    font-weight: 700;
    color: var(--adm-text);
}

.oct-billing-dual-bs {
    font-size: .78rem;
    color: var(--adm-muted);
    font-weight: 500;
}

.oct-billing-flag {
    margin-right: .2rem;
}

.oct-billing-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.oct-billing-chart-card {
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: #fff;
    box-shadow: var(--paces-shadow);
    padding: 0;
    overflow: hidden;
    min-width: 0;
}

.oct-billing-chart-head {
    padding: .85rem 1rem .4rem;
    border-bottom: 1px solid var(--paces-border);
}

.oct-billing-chart-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.oct-billing-chart-head p {
    margin: .2rem 0 0;
    color: var(--adm-muted);
    font-size: 12px;
}

.oct-billing-chart-body {
    position: relative;
    height: 260px;
    padding: .5rem 1rem 1rem;
}

.oct-billing-monthly-table-wrap {
    margin-top: .25rem;
}

@media (max-width: 900px) {
    .oct-billing-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* Billing automation (legacy cards retained for other styles) */
.oct-billing-stats-layout,
.oct-billing-auto-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.oct-billing-stats-hints {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: .75rem;
    color: var(--adm-muted);
    font-size: .9rem;
    line-height: 1.45;
}

.oct-billing-stats-hints strong {
    color: var(--adm-text);
}

.oct-billing-stats-hints em {
    font-style: normal;
    color: var(--adm-text);
}

.oct-billing-auto-card {
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-panel);
    overflow: hidden;
}

.oct-billing-auto-card--wide {
    grid-column: 1 / -1;
}

.oct-billing-auto-card-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .85rem;
    background: #0f172a;
    color: #f8fafc;
    font-size: .82rem;
    font-weight: 700;
}

.oct-billing-auto-card-body {
    padding: .9rem;
    display: grid;
    gap: .85rem;
}

.oct-billing-auto-form {
    display: grid;
    gap: .85rem;
}

.oct-billing-auto-actions {
    display: flex;
    justify-content: flex-end;
}

.oct-billing-auto-notify-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.oct-billing-scheduler-badge {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem .85rem;
    border-radius: .75rem;
    border: 1px solid var(--adm-border);
    background: rgba(255, 255, 255, .03);
}

.oct-billing-scheduler-badge i {
    font-size: 1.15rem;
    margin-top: .1rem;
}

.oct-billing-scheduler-badge strong {
    display: block;
    font-size: .88rem;
}

.oct-billing-scheduler-badge small {
    display: block;
    margin-top: .15rem;
    color: var(--adm-muted);
    font-size: .78rem;
}

.oct-billing-scheduler-badge.is-ok {
    border-color: rgba(34, 197, 94, .35);
    background: rgba(34, 197, 94, .08);
}

.oct-billing-scheduler-badge.is-ok i { color: #22c55e; }

.oct-billing-scheduler-badge.is-warn {
    border-color: rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .08);
}

.oct-billing-scheduler-badge.is-warn i { color: #f59e0b; }

.oct-billing-scheduler-badge.is-bad {
    border-color: rgba(239, 68, 68, .35);
    background: rgba(239, 68, 68, .08);
}

.oct-billing-scheduler-badge.is-bad i { color: #ef4444; }

.oct-billing-cron-box {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .85rem;
    border-radius: .65rem;
    border: 1px solid var(--adm-border);
    background: rgba(0, 0, 0, .18);
}

.oct-billing-cron-box code {
    flex: 1;
    font-size: .78rem;
    word-break: break-all;
    color: #cbd5e1;
}

@media (max-width: 900px) {
    .oct-billing-stats-layout,
    .oct-billing-auto-grid,
    .oct-billing-auto-notify-grid {
        grid-template-columns: 1fr;
    }
}

html[data-adm-theme="light"] .oct-billing-scheduler-badge {
    background: #f8fafc;
}

html[data-adm-theme="light"] .oct-billing-cron-box {
    background: #f8fafc;
}

html[data-adm-theme="light"] .oct-billing-cron-box code {
    color: #334155;
}

/* —— Logs de acceso —— */
.oct-visitor-logs-filters {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}

.oct-visitor-logs-filters .oct-admin-input,
.oct-visitor-logs-filters input[type="search"] {
    flex: 1 1 240px;
    min-width: 180px;
    height: 40px;
    border-radius: .65rem;
    border: 1px solid var(--adm-border, #334155);
    background: var(--adm-surface-2, rgba(255,255,255,.04));
    color: inherit;
    padding: 0 .85rem;
}

.oct-visitor-logs-table-wrap {
    overflow: auto;
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: #fff;
    box-shadow: var(--paces-shadow);
}

.oct-visitor-logs-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
    font-size: 13px;
}

.oct-visitor-logs-table th,
.oct-visitor-logs-table td {
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--paces-border);
    text-align: left;
    vertical-align: middle;
}

.oct-visitor-logs-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 1;
}

.oct-visitor-logs-table tbody tr {
    transition: background .12s ease;
}

.oct-visitor-logs-table tbody tr:hover {
    background: rgba(108, 124, 255, .04);
}

.oct-visitor-logs-table code {
    font-size: .78rem;
    color: #b4bcff;
}

.oct-visitor-logs-empty {
    text-align: center;
    color: var(--adm-muted, #94a3b8);
    padding: 1.5rem !important;
}

.oct-visitor-country {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.oct-visitor-flag {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

.oct-visitor-type {
    display: inline-flex;
    align-items: center;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
}

.oct-visitor-type.is-ok {
    background: #f0fdf4;
    color: #15803d;
}

.oct-visitor-type.is-bad {
    background: #fef2f2;
    color: #b91c1c;
}

.oct-admin-btn.is-danger,
#octVisitorLogsClearBtn.is-danger {
    color: #dc2626;
}

html[data-adm-theme="light"] .oct-visitor-logs-table-wrap {
    background: #fff;
    border-color: rgba(15, 23, 42, .07);
}

html[data-adm-theme="light"] .oct-visitor-logs-table th {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

html[data-adm-theme="light"] .oct-visitor-logs-table code {
    color: #515dbf;
}

html[data-adm-theme="light"] .oct-visitor-type {
    background: #f1f5f9;
    color: #475569;
}

html[data-adm-theme="light"] .oct-visitor-type.is-ok {
    background: #ecfdf5;
    color: #047857;
}

html[data-adm-theme="light"] .oct-visitor-type.is-bad {
    background: #fef2f2;
    color: #b91c1c;
}

/* —— Diseño web: selector de temas —— */
.oct-theme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.oct-theme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    border: 1px solid var(--adm-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .03);
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.oct-theme-card:hover {
    border-color: rgba(139, 154, 212, .45);
    transform: translateY(-1px);
}

.oct-theme-card.is-selected {
    border-color: #8b97ff;
    box-shadow: 0 0 0 1px rgba(139, 154, 212, .35), 0 12px 28px rgba(2, 6, 23, .35);
}

.oct-theme-card-preview {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #0b1220;
}

.oct-theme-card-preview--classic {
    background:
        radial-gradient(circle at 70% 20%, rgba(108, 124, 255, .45), transparent 45%),
        radial-gradient(circle at 20% 80%, rgba(34, 211, 238, .28), transparent 40%),
        linear-gradient(160deg, #060b14, #0f172a 55%, #111827);
}

.oct-theme-card-body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .85rem 1rem 1rem;
}

.oct-theme-card-body strong {
    font-size: .95rem;
}

.oct-theme-card-body em {
    font-style: normal;
    font-size: .78rem;
    color: var(--adm-muted);
}

.oct-theme-card-check {
    position: absolute;
    top: .55rem;
    right: .55rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .72);
    color: #94a3b8;
    font-size: 1rem;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease;
}

.oct-theme-card.is-selected .oct-theme-card-check {
    opacity: 1;
    color: #38bdf8;
}

.oct-theme-picker-note {
    margin: 1.1rem 0 0;
    color: var(--adm-muted);
    font-size: .85rem;
}

.oct-theme-picker-note a {
    color: #b4bcff;
    text-decoration: underline;
}

html[data-adm-theme="light"] .oct-theme-card {
    background: #fff;
    border-color: #e2e8f0;
}

html[data-adm-theme="light"] .oct-theme-card.is-selected {
    border-color: #6c7cff;
    box-shadow: 0 0 0 1px rgba(108, 124, 255, .2), 0 10px 24px rgba(15, 23, 42, .08);
}

html[data-adm-theme="light"] .oct-theme-card-check {
    background: rgba(255, 255, 255, .9);
    color: #94a3b8;
}

html[data-adm-theme="light"] .oct-theme-card.is-selected .oct-theme-card-check {
    color: #6c7cff;
}

html[data-adm-theme="light"] .oct-theme-picker-note a {
    color: #515dbf;
}

.oct-theme-card-preview--hercules {
    background:
        linear-gradient(135deg, #f3f5ff 0%, #ffffff 45%, #eaf2ff 100%);
    position: relative;
}
.oct-theme-card-preview--hercules::after {
    content: "";
    position: absolute;
    right: 12%;
    top: 18%;
    width: 38%;
    height: 58%;
    border-radius: .7rem;
    background: #6c7cff;
    box-shadow: 0 10px 22px rgba(108, 124, 255, .35);
}

.oct-theme-card-preview--truobox {
    background:
        radial-gradient(circle at 20% 20%, rgba(59,110,245,.22), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(147,197,253,.35), transparent 40%),
        #ffffff;
    position: relative;
}
.oct-theme-card-preview--truobox::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 12%;
    height: 16%;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 14px rgba(15,23,42,.08);
}
.oct-theme-card-preview--truobox::after {
    content: "";
    position: absolute;
    right: 14%;
    bottom: 14%;
    width: 36%;
    height: 42%;
    border-radius: .45rem .45rem .2rem .2rem;
    background: #111827;
    box-shadow: 0 10px 18px rgba(15,23,42,.2);
}

/* —— Dark mode Galaxy (Paces official) —— */
html[data-adm-theme="dark"] {
    --paces-body-bg: #17181e;
    --paces-surface: rgba(255, 255, 255, 0.06);
    --paces-surface-2: #192033;
    --paces-border: rgba(229, 243, 255, 0.09);
    --paces-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    --adm-bg: #17181e;
    --adm-panel: rgba(255, 255, 255, 0.06);
    --adm-panel-2: #192033;
    --adm-border: rgba(229, 243, 255, 0.09);
    --adm-text: #f1f3f5;
    --adm-muted: #8495ab;
    --adm-primary: #6c7cff;
    --adm-primary-soft: rgba(108, 124, 255, .18);
    --adm-danger: #ff5c8a;
    --adm-danger-soft: rgba(255, 92, 138, .16);
    --adm-success: #3ce6c2;
    --adm-success-soft: rgba(60, 230, 194, .16);
    --adm-warning: #ffb84d;
    --adm-warning-soft: rgba(255, 184, 77, .16);
    --adm-surface: rgba(255, 255, 255, 0.06);
    --adm-surface-2: #1c1f2e;
    --adm-surface-hover: rgba(255, 255, 255, .05);
    --adm-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    --adm-shadow-lg: 0 0 40px rgba(0, 0, 0, .45);
    --adm-scrollbar-thumb: rgba(148, 163, 184, .28);
    --adm-scrollbar-thumb-hover: rgba(148, 163, 184, .48);
    color-scheme: dark;
}

html[data-adm-theme="dark"] body {
    color: var(--adm-text);
    background:
        linear-gradient(to bottom right, rgba(16, 16, 30, 0.85), #0a142b),
        url("/admin/assets/paces/galaxy.jpg") center / cover no-repeat;
    background-attachment: fixed;
}

html[data-adm-theme="dark"] .oct-admin-login,
html[data-adm-theme="dark"] .oct-admin-login--paces {
    background:
        linear-gradient(to bottom right, rgba(16, 16, 30, 0.88), #0a142b),
        url("/admin/assets/paces/galaxy.jpg") center / cover no-repeat;
    background-attachment: fixed;
}

html[data-adm-theme="dark"] .oct-auth-decor img {
    opacity: .18;
    filter: brightness(0.65);
}

html[data-adm-theme="dark"] .oct-auth-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(229, 243, 255, 0.09);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

html[data-adm-theme="dark"] .oct-auth-title {
    color: #f1f3f5;
}

html[data-adm-theme="dark"] .oct-auth-lead,
html[data-adm-theme="dark"] .oct-auth-help,
html[data-adm-theme="dark"] .oct-auth-copy,
html[data-adm-theme="dark"] .oct-auth-link {
    color: #8495ab;
}

html[data-adm-theme="dark"] .oct-auth-field label,
html[data-adm-theme="dark"] .oct-auth-check {
    color: #bccee4;
}

html[data-adm-theme="dark"] .oct-auth-field input,
html[data-adm-theme="dark"] .oct-auth-password-wrap input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(229, 243, 255, 0.09);
    color: #f1f3f5;
}

html[data-adm-theme="dark"] .oct-auth-field input:focus,
html[data-adm-theme="dark"] .oct-auth-password-wrap input:focus {
    border-color: rgba(108, 124, 255, .55);
    box-shadow: 0 0 0 0.2rem rgba(108, 124, 255, .2);
}

html[data-adm-theme="dark"] .oct-auth-password-toggle:hover {
    background: rgba(255, 255, 255, .05);
    color: #bccee4;
}

html[data-adm-theme="dark"] .oct-auth-help strong {
    color: #ced6df;
}

html[data-adm-theme="dark"] .oct-admin-login-card,
html[data-adm-theme="dark"] .oct-admin-sidebar,
html[data-adm-theme="dark"] .oct-admin-panel,
html[data-adm-theme="dark"] .oct-admin-card,
html[data-adm-theme="dark"] .oct-admin-kpi-card,
html[data-adm-theme="dark"] .oct-dash-kpi,
html[data-adm-theme="dark"] .oct-admin-quick-action,
html[data-adm-theme="dark"] .oct-admin-settings-card,
html[data-adm-theme="dark"] .oct-opg-account-card,
html[data-adm-theme="dark"] .oct-admin-opg-card,
html[data-adm-theme="dark"] .oct-fx-source-card,
html[data-adm-theme="dark"] .oct-billing-chart-card,
html[data-adm-theme="dark"] .oct-billing-table-wrap,
html[data-adm-theme="dark"] .oct-clients-table-wrap,
html[data-adm-theme="dark"] .oct-visitor-logs-table-wrap,
html[data-adm-theme="dark"] .oct-admin-demo-card,
html[data-adm-theme="dark"] .oct-admin-notify-menu,
html[data-adm-theme="dark"] .oct-admin-user-menu,
html[data-adm-theme="dark"] .oct-admin-modal-dialog {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(229, 243, 255, 0.09);
    border-style: dashed;
    color: var(--adm-text);
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-topbar {
    background: rgba(35, 39, 55, 0.72);
    border-bottom: 1px solid rgba(229, 243, 255, 0.09);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-savebar,
html[data-adm-theme="dark"] .oct-admin-user-trigger,
html[data-adm-theme="dark"] .oct-admin-topbar-icon-btn,
html[data-adm-theme="dark"] .oct-admin-menu-toggle {
    background: transparent;
    border-color: transparent;
    color: #adb5bf;
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-topbar-icon-btn:hover,
html[data-adm-theme="dark"] .oct-admin-menu-toggle:hover,
html[data-adm-theme="dark"] .oct-admin-user-trigger:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e0eeff;
}

html[data-adm-theme="dark"] .oct-admin-sidebar {
    background: #1c1f2e;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.03);
}

html[data-adm-theme="dark"] .oct-admin-sidebar-head,
html[data-adm-theme="dark"] .oct-admin-sidebar-foot {
    border-color: rgba(255, 255, 255, 0.03);
}

html[data-adm-theme="dark"] .oct-admin-sidebar-brand strong {
    color: #ced6df;
}

html[data-adm-theme="dark"] .oct-admin-nav-btn {
    color: #8495ab;
}

html[data-adm-theme="dark"] .oct-admin-nav-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #bccee4;
}

html[data-adm-theme="dark"] .oct-admin-nav-btn.is-active {
    background: rgba(255, 255, 255, 0.05);
    color: #ced6df;
}

html[data-adm-theme="dark"] .oct-admin-nav-btn.is-active .oct-admin-nav-icon,
html[data-adm-theme="dark"] .oct-admin-nav-btn:hover .oct-admin-nav-icon {
    background: transparent;
    color: inherit;
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-page-title {
    border-bottom-color: rgba(229, 243, 255, 0.09);
}

html[data-adm-theme="dark"] .oct-admin-page-main-title {
    color: #f1f3f5;
}

html[data-adm-theme="dark"] .oct-admin-breadcrumb,
html[data-adm-theme="dark"] .oct-admin-breadcrumb .is-active {
    color: #8495ab;
}

html[data-adm-theme="dark"] .oct-admin-breadcrumb button {
    color: #8b97ff;
}

html[data-adm-theme="dark"] input[type="text"],
html[data-adm-theme="dark"] input[type="email"],
html[data-adm-theme="dark"] input[type="password"],
html[data-adm-theme="dark"] input[type="tel"],
html[data-adm-theme="dark"] input[type="search"],
html[data-adm-theme="dark"] input[type="number"],
html[data-adm-theme="dark"] input[type="url"],
html[data-adm-theme="dark"] input[type="date"],
html[data-adm-theme="dark"] input[type="time"],
html[data-adm-theme="dark"] input[type="datetime-local"],
html[data-adm-theme="dark"] textarea,
html[data-adm-theme="dark"] select,
html[data-adm-theme="dark"] .oct-admin-select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(229, 243, 255, 0.09);
    color: #f1f3f5;
}

html[data-adm-theme="dark"] input:focus,
html[data-adm-theme="dark"] textarea:focus,
html[data-adm-theme="dark"] select:focus {
    border-color: rgba(108, 124, 255, .55);
    box-shadow: 0 0 0 0.2rem rgba(108, 124, 255, .2);
}

html[data-adm-theme="dark"] .oct-admin-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(229, 243, 255, 0.12);
    color: #bccee4;
}

html[data-adm-theme="dark"] .oct-admin-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(108, 124, 255, .35);
    color: #e0eeff;
}

html[data-adm-theme="dark"] .oct-admin-subtabs {
    background: transparent;
    border-bottom-color: rgba(229, 243, 255, 0.09);
}

html[data-adm-theme="dark"] .oct-admin-subtab {
    color: #8495ab;
}

html[data-adm-theme="dark"] .oct-admin-subtab.is-active,
html[data-adm-theme="dark"] .oct-admin-subtab:hover {
    color: #8b97ff;
    background: transparent;
    border-bottom-color: #6c7cff;
}

html[data-adm-theme="dark"] .oct-billing-table thead,
html[data-adm-theme="dark"] .oct-clients-table thead th,
html[data-adm-theme="dark"] .oct-visitor-logs-table th {
    background: rgba(255, 255, 255, 0.04);
    color: #8495ab;
    border-color: rgba(229, 243, 255, 0.09);
}

html[data-adm-theme="dark"] .oct-billing-table th,
html[data-adm-theme="dark"] .oct-billing-table td,
html[data-adm-theme="dark"] .oct-clients-table tbody td,
html[data-adm-theme="dark"] .oct-visitor-logs-table td {
    border-color: rgba(229, 243, 255, 0.09);
}

html[data-adm-theme="dark"] .oct-billing-table tbody tr:hover,
html[data-adm-theme="dark"] .oct-clients-table tbody tr:hover td,
html[data-adm-theme="dark"] .oct-admin-notify-item:hover,
html[data-adm-theme="dark"] .oct-admin-user-item:hover,
html[data-adm-theme="dark"] .oct-admin-overview-item:hover,
html[data-adm-theme="dark"] .oct-admin-settings-card:hover,
html[data-adm-theme="dark"] .oct-admin-quick-action:hover {
    background: rgba(255, 255, 255, 0.05);
}

html[data-adm-theme="dark"] .oct-admin-notify-item.is-unread {
    background: rgba(108, 124, 255, 0.12);
}

html[data-adm-theme="dark"] .oct-admin-user-avatar,
html[data-adm-theme="dark"] .oct-admin-notify-item-icon,
html[data-adm-theme="dark"] .oct-dash-kpi-icon,
html[data-adm-theme="dark"] .oct-admin-settings-card-icon {
    background: rgba(108, 124, 255, 0.18);
    color: #8b97ff;
}

html[data-adm-theme="dark"] .oct-admin-detail-section {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(229, 243, 255, 0.09);
    border-style: dashed;
}

html[data-adm-theme="dark"] .oct-admin-empty--card,
html[data-adm-theme="dark"] .oct-opg-cards-empty {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(229, 243, 255, 0.12);
    color: #8495ab;
}

html[data-adm-theme="dark"] .oct-admin-modal-header,
html[data-adm-theme="dark"] .oct-admin-modal-footer,
html[data-adm-theme="dark"] .oct-admin-notify-head,
html[data-adm-theme="dark"] .oct-billing-chart-head,
html[data-adm-theme="dark"] .oct-admin-card-head {
    background: transparent;
    border-color: rgba(229, 243, 255, 0.09);
}

html[data-adm-theme="dark"] .oct-admin-nav-group + .oct-admin-nav-group {
    border-top-color: rgba(148, 163, 184, .1);
}

html[data-adm-theme="dark"] .oct-admin-nav-icon {
    background: transparent;
    color: inherit;
}

html[data-adm-theme="dark"] .oct-admin-nav-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: transparent;
    color: #bccee4;
}

html[data-adm-theme="dark"] .oct-admin-nav-btn:hover .oct-admin-nav-icon {
    background: transparent;
    color: inherit;
}

html[data-adm-theme="dark"] .oct-admin-nav-btn.is-active {
    background: rgba(255, 255, 255, 0.05);
    border-color: transparent;
    color: #ced6df;
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-nav-btn.is-active::before {
    display: none;
}

html[data-adm-theme="dark"] .oct-admin-nav-parent.is-branch-active {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(148, 163, 184, .12);
    color: #e2e8f0;
}

html[data-adm-theme="dark"] .oct-admin-nav-parent.is-branch-active .oct-admin-nav-icon {
    background: rgba(255, 255, 255, .08);
    color: #cbd5e1;
}

html[data-adm-theme="dark"] .oct-admin-nav-parent .oct-admin-nav-caret {
    color: #64748b;
}

html[data-adm-theme="dark"] .oct-admin-nav-submenu {
    border-left-color: rgba(148, 163, 184, .2);
}

html[data-adm-theme="dark"] .oct-admin-nav-sublabel small {
    color: #64748b;
}

html[data-adm-theme="dark"] .oct-admin-nav-soon {
    background: rgba(245, 158, 11, .2);
    color: #fbbf24;
}

html[data-adm-theme="dark"] .oct-billing-soon-card {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(148, 163, 184, .28);
    color: #94a3b8;
}

html[data-adm-theme="dark"] .oct-billing-soon-card strong {
    color: #e2e8f0;
}

html[data-adm-theme="dark"] .oct-admin-settings-card {
    background: linear-gradient(180deg, rgba(30, 41, 59, .95) 0%, rgba(15, 23, 42, .9) 100%);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-settings-card:hover {
    background: linear-gradient(180deg, rgba(108, 124, 255, .16) 0%, rgba(15, 23, 42, .92) 100%);
    border-color: rgba(139, 154, 212, .35);
}

html[data-adm-theme="dark"] .oct-admin-settings-card::after {
    color: #475569;
}

html[data-adm-theme="dark"] .oct-admin-settings-card:hover::after {
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-admin-settings-card-icon {
    background: rgba(108, 124, 255, .18);
    border: 0;
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-admin-settings-card-copy strong {
    color: #f8fafc;
}

html[data-adm-theme="dark"] .oct-admin-settings-card-copy small {
    color: #94a3b8;
}

html[data-adm-theme="dark"] .oct-admin-modal-dialog--client,
html[data-adm-theme="dark"] .oct-admin-modal-dialog--client-create {
    background: #0f172a;
}

html[data-adm-theme="dark"] .oct-admin-modal-dialog--client .oct-admin-modal-header,
html[data-adm-theme="dark"] .oct-client-edit-tabs {
    background: linear-gradient(180deg, rgba(30, 41, 59, .98) 0%, rgba(15, 23, 42, .98) 100%);
    border-bottom-color: rgba(148, 163, 184, .14);
}

html[data-adm-theme="dark"] .oct-admin-modal-dialog--client .oct-admin-modal-body,
html[data-adm-theme="dark"] .oct-admin-modal-dialog--client-create .oct-admin-modal-body {
    background: #0b1220;
}

html[data-adm-theme="dark"] .oct-client-edit-tab:hover {
    background: rgba(108, 124, 255, .16);
    border-color: rgba(139, 154, 212, .28);
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-client-edit-tab.is-active {
    background: var(--paces-primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(108, 124, 255, .3);
}

html[data-adm-theme="dark"] .oct-client-edit-subtabs {
    background: rgba(15, 23, 42, .55);
    border-color: rgba(148, 163, 184, .16);
}

html[data-adm-theme="dark"] .oct-client-edit-subtab.is-active {
    background: rgba(108, 124, 255, .18);
    border-color: rgba(139, 154, 212, .3);
    color: #b4bcff;
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-client-edit-card,
html[data-adm-theme="dark"] .oct-client-billing-table-wrap,
html[data-adm-theme="dark"] .oct-cron-card,
html[data-adm-theme="dark"] .oct-cron-install-card {
    background: rgba(15, 23, 42, .72);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-client-edit-card h3,
html[data-adm-theme="dark"] .oct-cron-install-card h3 {
    color: #f8fafc;
}

html[data-adm-theme="dark"] .oct-client-edit-card h3 i {
    background: rgba(108, 124, 255, .18);
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-client-billing-table thead th {
    background: rgba(30, 41, 59, .95);
    color: #94a3b8;
    border-bottom-color: rgba(148, 163, 184, .14);
}

html[data-adm-theme="dark"] .oct-cron-card-head {
    background: var(--paces-primary);
}

html[data-adm-theme="dark"] .oct-opg-account-card,
html[data-adm-theme="dark"] .oct-admin-opg-card {
    background: rgba(15, 23, 42, .72);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-opg-account-card:hover,
html[data-adm-theme="dark"] .oct-admin-opg-card:hover {
    border-color: rgba(139, 154, 212, .35);
    box-shadow: none;
    transform: none;
}

html[data-adm-theme="dark"] .oct-opg-account-icon {
    background: rgba(108, 124, 255, .16);
    border-color: rgba(139, 154, 212, .22);
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-opg-account-icon-fallback {
    background: transparent;
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-opg-plan-card .oct-opg-account-icon {
    background: var(--paces-primary);
}

html[data-adm-theme="dark"] .oct-opg-account-title {
    color: #f8fafc;
}

html[data-adm-theme="dark"] .oct-opg-account-badge {
    background: rgba(108, 124, 255, .18);
    border-color: rgba(139, 154, 212, .3);
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-opg-account-rows,
html[data-adm-theme="dark"] .oct-opg-account-foot {
    border-top-color: rgba(148, 163, 184, .14);
}

html[data-adm-theme="dark"] .oct-opg-account-foot {
    background: rgba(15, 23, 42, .45);
}

html[data-adm-theme="dark"] .oct-opg-account-btn {
    background: rgba(15, 23, 42, .55);
    border-color: rgba(148, 163, 184, .22);
    color: #cbd5e1;
}

html[data-adm-theme="dark"] .oct-opg-account-btn:hover {
    background: rgba(108, 124, 255, .16);
    border-color: rgba(139, 154, 212, .35);
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-opg-cards-empty {
    background: rgba(15, 23, 42, .45);
    border-color: rgba(148, 163, 184, .2);
    color: #94a3b8;
}

html[data-adm-theme="dark"] .oct-fx-source-card {
    background: rgba(15, 23, 42, .55);
    border-color: rgba(148, 163, 184, .16);
}

html[data-adm-theme="dark"] .oct-fx-source-card.is-selected,
html[data-adm-theme="dark"] .oct-fx-source-card:has(input:checked) {
    background: rgba(108, 124, 255, .16);
    border-color: rgba(139, 154, 212, .35);
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-billing-kpi-icon--success {
    background: rgba(74, 222, 128, .14);
    color: #4ade80;
}

html[data-adm-theme="dark"] .oct-billing-kpi-icon--warning {
    background: rgba(251, 191, 36, .14);
    color: #fbbf24;
}

html[data-adm-theme="dark"] .oct-billing-kpi-icon--danger {
    background: rgba(248, 113, 113, .14);
    color: #f87171;
}

html[data-adm-theme="dark"] .oct-billing-kpi-icon--info {
    background: rgba(139, 154, 212, .16);
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-billing-chart-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(229, 243, 255, 0.09);
    border-style: dashed;
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-nav-btn.is-active .oct-admin-nav-icon {
    background: transparent;
    color: inherit;
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-nav-badge {
    background: rgba(239, 68, 68, .2);
    color: #fecaca;
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-sidebar-link {
    border-color: transparent;
    background: rgba(255, 255, 255, .03);
    color: #94a3b8;
}

html[data-adm-theme="dark"] .oct-admin-sidebar-link i {
    color: #64748b;
}

html[data-adm-theme="dark"] .oct-admin-sidebar-link:hover {
    background: rgba(108, 124, 255, .12);
    border-color: rgba(139, 154, 212, .35);
    color: #b4bcff;
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-sidebar-link:hover i {
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-admin-topbar {
    background: rgba(35, 39, 55, 0.72);
    border-bottom-color: rgba(229, 243, 255, 0.09);
}

html[data-adm-theme="dark"] .oct-admin-topbar::after {
    display: none;
}

html[data-adm-theme="dark"] .oct-admin-notify-badge {
    border-color: #232737;
}

html[data-adm-theme="dark"] .oct-admin-notify-head {
    background: transparent;
}

html[data-adm-theme="dark"] .oct-admin-savebar,
html[data-adm-theme="dark"] #octContentSavebar {
    display: none !important;
}

html[data-adm-theme="dark"] input[type="text"],
html[data-adm-theme="dark"] input[type="email"],
html[data-adm-theme="dark"] input[type="password"],
html[data-adm-theme="dark"] input[type="tel"],
html[data-adm-theme="dark"] input[type="search"],
html[data-adm-theme="dark"] input[type="number"],
html[data-adm-theme="dark"] input[type="url"],
html[data-adm-theme="dark"] input[type="date"],
html[data-adm-theme="dark"] input[type="time"],
html[data-adm-theme="dark"] input[type="datetime-local"],
html[data-adm-theme="dark"] textarea,
html[data-adm-theme="dark"] select {
    background: rgba(2, 6, 23, .65);
    color: #fff;
    border-color: var(--adm-border);
    color-scheme: dark;
}

html[data-adm-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-adm-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-adm-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
}

html[data-adm-theme="dark"] .oct-admin-btn {
    color: #fff;
}

html[data-adm-theme="dark"] .oct-admin-btn-primary {
    background: var(--paces-primary);
    color: #fff;
}

html[data-adm-theme="dark"] .oct-admin-btn-ghost {
    background: transparent;
    border-color: rgba(148, 163, 184, .28);
    color: #e2e8f0;
}

html[data-adm-theme="dark"] .oct-admin-btn-ghost:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(148, 163, 184, .4);
    color: #fff;
}

html[data-adm-theme="dark"] .oct-admin-btn-danger {
    background: rgba(239, 68, 68, .16);
    border-color: rgba(239, 68, 68, .35);
    color: #fecaca;
}

html[data-adm-theme="dark"] .oct-admin-modal-header {
    background: linear-gradient(180deg, rgba(30, 41, 59, .95) 0%, rgba(15, 23, 42, .98) 100%);
    border-bottom-color: rgba(148, 163, 184, .14);
}

html[data-adm-theme="dark"] .oct-admin-modal-footer {
    background: rgba(15, 23, 42, .75);
    border-top-color: rgba(148, 163, 184, .14);
}

html[data-adm-theme="dark"] .oct-admin-modal-close:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(148, 163, 184, .22);
    color: #f8fafc;
}

html[data-adm-theme="dark"] .oct-billing-table-wrap,
html[data-adm-theme="dark"] .oct-clients-table-wrap,
html[data-adm-theme="dark"] .oct-visitor-logs-table-wrap {
    background: rgba(15, 23, 42, .55);
    border-color: rgba(148, 163, 184, .16);
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-billing-table thead,
html[data-adm-theme="dark"] .oct-clients-table thead th,
html[data-adm-theme="dark"] .oct-visitor-logs-table th {
    background: rgba(30, 41, 59, .9);
    color: #94a3b8;
}

html[data-adm-theme="dark"] .oct-billing-table tbody tr:hover,
html[data-adm-theme="dark"] .oct-clients-table tbody tr:hover td,
html[data-adm-theme="dark"] .oct-visitor-logs-table tbody tr:hover {
    background: rgba(108, 124, 255, .08);
}

html[data-adm-theme="dark"] .oct-admin-subtabs {
    background: rgba(15, 23, 42, .45);
    border-color: rgba(148, 163, 184, .16);
}

html[data-adm-theme="dark"] .oct-admin-subtab.is-active {
    background: rgba(108, 124, 255, .18);
    border-color: rgba(139, 154, 212, .3);
    color: #b4bcff;
    box-shadow: none;
}



html[data-adm-theme="dark"] .oct-admin-quick-action-icon {
    background: rgba(108, 124, 255, .16);
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-admin-quick-action i {
    color: inherit;
}

html[data-adm-theme="dark"] .oct-admin-quick-action:hover {
    background: rgba(108, 124, 255, .1);
    border-color: rgba(139, 154, 212, .35);
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-kpi-card.is-warning:not(.oct-dash-kpi) strong { color: #fbbf24; }
html[data-adm-theme="dark"] .oct-admin-kpi-card.is-danger:not(.oct-dash-kpi) strong { color: #f87171; }
html[data-adm-theme="dark"] .oct-admin-kpi-card.is-success:not(.oct-dash-kpi) strong { color: #4ade80; }

html[data-adm-theme="dark"] .oct-dash-kpi {
    background: rgba(15, 23, 42, .55);
    border-color: rgba(148, 163, 184, .16);
}

html[data-adm-theme="dark"] .oct-dash-kpi.is-warning {
    background: linear-gradient(165deg, rgba(251, 191, 36, .12) 0%, rgba(15, 23, 42, .55) 60%);
    border-color: rgba(251, 191, 36, .22);
}

html[data-adm-theme="dark"] .oct-dash-kpi.is-danger {
    background: linear-gradient(165deg, rgba(248, 113, 113, .12) 0%, rgba(15, 23, 42, .55) 60%);
    border-color: rgba(248, 113, 113, .22);
}

html[data-adm-theme="dark"] .oct-dash-kpi.is-success {
    background: linear-gradient(165deg, rgba(74, 222, 128, .12) 0%, rgba(15, 23, 42, .55) 60%);
    border-color: rgba(74, 222, 128, .22);
}

html[data-adm-theme="dark"] .oct-dash-kpi.is-neutral {
    background: linear-gradient(165deg, rgba(108, 124, 255, .14) 0%, rgba(15, 23, 42, .55) 60%);
    border-color: rgba(139, 154, 212, .22);
}

html[data-adm-theme="dark"] .oct-dash-kpi-icon {
    background: rgba(148, 163, 184, .12);
    color: #94a3b8;
}

html[data-adm-theme="dark"] .oct-dash-kpi.is-warning .oct-dash-kpi-icon {
    background: rgba(251, 191, 36, .14);
    color: #fbbf24;
}

html[data-adm-theme="dark"] .oct-dash-kpi.is-danger .oct-dash-kpi-icon {
    background: rgba(248, 113, 113, .14);
    color: #f87171;
}

html[data-adm-theme="dark"] .oct-dash-kpi.is-success .oct-dash-kpi-icon {
    background: rgba(74, 222, 128, .14);
    color: #4ade80;
}

html[data-adm-theme="dark"] .oct-dash-kpi.is-neutral .oct-dash-kpi-icon {
    background: rgba(108, 124, 255, .16);
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-admin-overview-item {
    background: rgba(15, 23, 42, .45);
    border-color: rgba(148, 163, 184, .16);
}

html[data-adm-theme="dark"] .oct-admin-overview-avatar {
    background: rgba(148, 163, 184, .16);
    color: #cbd5e1;
}

html[data-adm-theme="dark"] .oct-admin-overview-avatar.is-invoice {
    background: rgba(108, 124, 255, .16);
    color: #b4bcff;
}

html[data-adm-theme="dark"] .oct-admin-card-head-icon {
    background: rgba(148, 163, 184, .12);
    color: #94a3b8;
}

html[data-adm-theme="dark"] .oct-admin-card-head-icon.is-warning {
    background: rgba(251, 191, 36, .14);
    color: #fbbf24;
}

html[data-adm-theme="dark"] .oct-admin-card-head-icon.is-danger {
    background: rgba(248, 113, 113, .14);
    color: #f87171;
}

html[data-adm-theme="dark"] .oct-admin-eyebrow,
html[data-adm-theme="dark"] .oct-admin-section-label {
    color: #64748b;
}

html[data-adm-theme="dark"] .oct-admin-empty--card {
    background:
        radial-gradient(ellipse 70% 80% at 50% 20%, rgba(74, 222, 128, .08), transparent 65%),
        rgba(15, 23, 42, .35);
    border-color: rgba(74, 222, 128, .22);
}

html[data-adm-theme="dark"] .oct-admin-empty--card i {
    background: rgba(74, 222, 128, .14);
    color: #4ade80;
}

html[data-adm-theme="dark"] .oct-admin-card--dashboard {
    background: linear-gradient(180deg, rgba(30, 41, 59, .9) 0%, rgba(15, 23, 42, .85) 100%);
}

html[data-adm-theme="dark"] .oct-admin-panel-head--dashboard {
    border-bottom-color: rgba(148, 163, 184, .12);
}

html[data-adm-theme="dark"] .oct-admin-quick-action-chevron {
    color: #475569;
}

@media (prefers-reduced-motion: reduce) {
    .oct-admin-panel--overview.is-active,
    .oct-admin-kpi-grid--dashboard .oct-dash-kpi,
    .oct-dash-kpi,
    .oct-admin-quick-action,
    .oct-admin-quick-action-icon,
    .oct-admin-quick-action-chevron,
    .oct-admin-settings-card,
    .oct-admin-settings-card-icon,
    .oct-admin-settings-card::after,
    .oct-admin-modal.is-open,
    .oct-admin-modal-dialog,
    .oct-admin-btn {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

html[data-adm-theme="dark"] .oct-admin-topbar-icon-btn:hover,
html[data-adm-theme="dark"] .oct-admin-user-trigger:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(139, 154, 212, .35);
    color: #fff;
    box-shadow: none;
}

html[data-adm-theme="dark"] .oct-admin-alert-error {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .35);
    color: #fecaca;
}

html[data-adm-theme="dark"] .oct-admin-alert-success {
    background: rgba(34, 197, 94, .12);
    border-color: rgba(34, 197, 94, .35);
    color: #bbf7d0;
}

html[data-adm-theme="dark"] .oct-admin-alert-warning {
    background: rgba(251, 191, 36, .12);
    border-color: rgba(251, 191, 36, .35);
    color: #fde68a;
}

/* —— Redes sociales (Ajustes) —— */
.oct-admin-social-session-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--adm-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .03);
}

.oct-admin-social-session-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .85rem;
    background: rgba(139, 154, 212, .14);
    color: #8b97ff;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.oct-admin-social-session-copy {
    flex: 1;
    min-width: 0;
}

.oct-admin-social-session-copy strong {
    display: block;
    font-size: .95rem;
    margin-bottom: .2rem;
}

.oct-admin-social-session-copy p {
    margin: 0;
    font-size: .86rem;
    color: var(--adm-muted, #94a3b8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.oct-admin-social-session-copy code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    color: inherit;
}

.oct-admin-social-session-sep {
    opacity: .5;
}

.oct-admin-social-session-country {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.oct-admin-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .9rem;
}

.oct-admin-social-card {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--adm-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .03);
    transition: opacity .15s ease, border-color .15s ease;
}

.oct-admin-social-card.is-disabled {
    opacity: .72;
}

.oct-admin-social-card-head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.oct-admin-social-card-icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .75rem;
    background: rgba(139, 154, 212, .12);
    color: #b4bcff;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.oct-admin-social-card-title {
    flex: 1;
    min-width: 0;
}

.oct-admin-social-card-title strong {
    display: block;
    font-size: .95rem;
}

.oct-admin-social-card-title small {
    color: var(--adm-muted, #94a3b8);
    font-size: .75rem;
}

.oct-admin-social-url {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
}

.oct-admin-social-url span {
    font-size: .78rem;
    font-weight: 600;
    color: var(--adm-muted, #94a3b8);
}

html[data-adm-theme="light"] .oct-admin-social-session-card,
html[data-adm-theme="light"] .oct-admin-social-card {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

html[data-adm-theme="light"] .oct-admin-social-session-icon,
html[data-adm-theme="light"] .oct-admin-social-card-icon {
    background: #f3f5ff;
    color: #6c7cff;
}

html[data-adm-theme="light"] .oct-admin-social-session-copy p,
html[data-adm-theme="light"] .oct-admin-social-card-title small,
html[data-adm-theme="light"] .oct-admin-social-url span {
    color: #64748b;
}

.oct-admin-social-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .9rem;
    margin-bottom: 1.1rem;
}

.oct-admin-social-option-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem;
    border: 1px solid var(--adm-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .03);
}

.oct-admin-social-option-copy {
    flex: 1;
    min-width: 0;
}

.oct-admin-social-option-copy strong {
    display: block;
    font-size: .95rem;
    margin-bottom: .2rem;
}

.oct-admin-social-option-copy small {
    color: var(--adm-muted, #94a3b8);
    font-size: .78rem;
}

.oct-admin-align-switch {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .25rem;
    border: 1px solid var(--adm-border);
    border-radius: .85rem;
    background: rgba(15, 23, 42, .25);
}

.oct-admin-align-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 2rem;
    padding: .25rem .65rem;
    border: 0;
    border-radius: .65rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

.oct-admin-align-btn.is-active {
    background: rgba(139, 154, 212, .22);
    color: #d7ddff;
}

html[data-adm-theme="light"] .oct-admin-social-option-card {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

html[data-adm-theme="light"] .oct-admin-social-option-copy small {
    color: #64748b;
}

html[data-adm-theme="light"] .oct-admin-align-switch {
    background: #f8fafc;
    border-color: #e2e8f0;
}

html[data-adm-theme="light"] .oct-admin-align-btn.is-active {
    background: #eaf2ff;
    color: #515dbf;
}

/* —— Conexión flotante (sticky vertical) —— */
.oct-admin-conn-float {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    z-index: 70;
    width: min(17.5rem, calc(100vw - 1.5rem));
    pointer-events: none;
    animation: octAdminConnFloatIn .45s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes octAdminConnFloatIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.oct-admin-conn-float-card {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .9rem;
    border-radius: var(--paces-radius);
    border: 1px solid rgba(148, 163, 184, .22);
    background: rgba(15, 23, 42, .88);
    box-shadow: 0 18px 40px rgba(2, 6, 23, .35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #e2e8f0;
}

.oct-admin-conn-float-head {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.oct-admin-conn-float-icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .8rem;
    background: rgba(139, 154, 212, .16);
    color: #b4bcff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.oct-admin-conn-float-title {
    flex: 1;
    min-width: 0;
}

.oct-admin-conn-float-title strong {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.oct-admin-conn-float-title small {
    display: block;
    font-size: .7rem;
    color: #94a3b8;
}

.oct-admin-conn-float-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: #cbd5e1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.oct-admin-conn-float-refresh:hover {
    background: rgba(139, 154, 212, .16);
    border-color: rgba(139, 154, 212, .4);
    color: #d7ddff;
}

.oct-admin-conn-float-refresh.is-spinning i {
    display: inline-block;
    animation: octAdminConnSpin .7s linear infinite;
}

@keyframes octAdminConnSpin {
    to { transform: rotate(360deg); }
}

.oct-admin-conn-float-body {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.oct-admin-conn-float-row {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .55rem .65rem;
    border-radius: .75rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(148, 163, 184, .12);
}

.oct-admin-conn-float-row > span:first-child {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.oct-admin-conn-float-row code,
.oct-admin-conn-float-row em,
.oct-admin-conn-float-country {
    font-style: normal;
    font-size: .82rem;
    font-weight: 600;
    color: #f8fafc;
    word-break: break-word;
}

.oct-admin-conn-float-row code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
}

.oct-admin-conn-float-country {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.oct-admin-conn-float.is-loading .oct-admin-conn-float-row code,
.oct-admin-conn-float.is-loading .oct-admin-conn-float-row em,
.oct-admin-conn-float.is-loading .oct-admin-conn-float-country {
    opacity: .55;
}

html[data-adm-theme="light"] .oct-admin-conn-float-card {
    background: rgba(255, 255, 255, .94);
    border-color: #e2e8f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .12);
    color: #0f172a;
}

html[data-adm-theme="light"] .oct-admin-conn-float-icon {
    background: #f3f5ff;
    color: #6c7cff;
}

html[data-adm-theme="light"] .oct-admin-conn-float-title small {
    color: #64748b;
}

html[data-adm-theme="light"] .oct-admin-conn-float-refresh {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}

html[data-adm-theme="light"] .oct-admin-conn-float-refresh:hover {
    background: #f3f5ff;
    border-color: #d7ddff;
    color: #515dbf;
}

html[data-adm-theme="light"] .oct-admin-conn-float-row {
    background: #f8fafc;
    border-color: #eef2f7;
}

html[data-adm-theme="light"] .oct-admin-conn-float-row > span:first-child {
    color: #64748b;
}

html[data-adm-theme="light"] .oct-admin-conn-float-row code,
html[data-adm-theme="light"] .oct-admin-conn-float-row em,
html[data-adm-theme="light"] .oct-admin-conn-float-country {
    color: #0f172a;
}

@media (max-width: 720px) {
    .oct-admin-conn-float {
        right: .75rem;
        bottom: .75rem;
        width: min(15.5rem, calc(100vw - 1.25rem));
    }
}

/* —— Clientes (portal) table —— */
.oct-clients-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: .35rem;
}

.oct-clients-toolbar {
    margin-top: .35rem;
}

.oct-clients-page-size {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
}

.oct-clients-page-size .oct-admin-select {
    min-width: 4.2rem;
}

.oct-clients-table-wrap {
    margin-top: .25rem;
    overflow-x: auto;
    border: 1px solid var(--paces-border);
    border-radius: var(--paces-radius);
    background: #fff;
    box-shadow: var(--paces-shadow);
}

.oct-clients-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.oct-clients-table thead th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: 700;
    padding: .78rem .9rem;
    border-bottom: 1px solid var(--paces-border);
    background: #f8fafc;
    white-space: nowrap;
}

.oct-clients-table tbody td {
    padding: .85rem .9rem;
    border-bottom: 1px solid var(--paces-border);
    vertical-align: middle;
    color: var(--adm-text);
}

.oct-clients-table tbody tr:last-child td {
    border-bottom: none;
}

.oct-clients-table tbody tr {
    transition: background .12s ease;
}

.oct-clients-table tbody tr:hover td {
    background: rgba(108, 124, 255, .04);
}

.oct-clients-name {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}

.oct-clients-name-link {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    max-width: 100%;
}

.oct-clients-name-link strong {
    color: #0f172a;
    transition: color .15s ease;
}

.oct-clients-name-link:hover strong,
.oct-clients-name-link:focus-visible strong {
    color: var(--adm-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.oct-clients-name-link:focus-visible {
    outline: none;
}

.oct-clients-status-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    margin-top: .45rem;
    flex-shrink: 0;
    background: #94a3b8;
}

.oct-clients-status-dot.is-active {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

.oct-clients-status-dot.is-disabled {
    background: #f59e0b;
}

.oct-clients-sub {
    font-size: .75rem;
    margin-top: .12rem;
}

.oct-clients-badge {
    display: inline-flex;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.oct-clients-badge.is-active {
    background: rgba(60, 230, 194, .15);
    color: #2dad92;
}

.oct-clients-badge.is-disabled {
    background: rgba(255, 184, 77, .15);
    color: #bf8a3a;
}

.oct-clients-col-actions {
    width: 1%;
    white-space: nowrap;
}

.oct-clients-actions {
    display: inline-flex;
    gap: .3rem;
}

.oct-clients-action {
    width: 2rem;
    height: 2rem;
    border-radius: .55rem;
    border: 1px solid var(--adm-border);
    background: transparent;
    color: var(--adm-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.oct-clients-action:hover {
    color: var(--adm-text);
    border-color: rgba(108, 124, 255, .35);
}

.oct-clients-action.is-edit:hover { color: #6c7cff; }
.oct-clients-action.is-key:hover { color: #0f766e; }
.oct-clients-action.is-portal:hover { color: #2563eb; }
.oct-clients-action.is-warn:hover { color: #d97706; }
.oct-clients-action.is-ok:hover { color: #16a34a; }
.oct-clients-action.is-danger:hover {
    color: #dc2626;
    border-color: rgba(220, 38, 38, .35);
    background: rgba(220, 38, 38, .06);
}

.oct-clients-footer {
    margin: .65rem 0 0;
    font-size: .8rem;
    color: var(--adm-muted);
}

.oct-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.oct-sort-icon {
    font-size: .8em;
    opacity: .35;
    transition: opacity .15s;
}

.oct-sort-btn:hover .oct-sort-icon {
    opacity: .8;
}

.oct-sortable.is-sorted,
.oct-sortable.is-sorted .oct-sort-btn {
    color: #2563eb;
}

.oct-sortable.is-sorted .oct-sort-icon {
    opacity: 1;
}

.oct-pager-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
}

.oct-pager {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}

.oct-pager-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--adm-text, #334155);
    background: var(--adm-surface, #fff);
    border: 1px solid var(--adm-border, #e2e8f0);
    border-radius: .5rem;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.oct-pager-btn:hover:not(:disabled) {
    border-color: #2563eb;
    color: #2563eb;
}

.oct-pager-btn.is-current {
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
    cursor: default;
}

.oct-pager-btn:disabled:not(.is-current) {
    opacity: .4;
    cursor: not-allowed;
}

.oct-pager-gap {
    padding: 0 .2rem;
    color: var(--adm-muted);
}

@media (max-width: 900px) {
    .oct-clients-kpi-grid {
        grid-template-columns: 1fr;
    }
}

html[data-adm-theme="light"] .oct-clients-table-wrap {
    background: #fff;
    border-color: rgba(15, 23, 42, .07);
}

html[data-adm-theme="light"] .oct-clients-table thead th {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* —— Editar cliente (estilo MikroISP: tabs + split + tiles) —— */
.oct-admin-modal-dialog--client-create {
    width: min(640px, 100%);
    background: #eef3f9;
}

.oct-admin-modal-dialog--client-create .oct-admin-modal-header,
.oct-admin-modal-dialog--client-create .oct-admin-modal-body,
.oct-admin-modal-dialog--client-create .oct-admin-modal-footer {
    background: #fff;
}

.oct-admin-modal-dialog--client-create .oct-admin-modal-body {
    background: #eef3f9;
    padding: .95rem 1.05rem 1.1rem;
}

.oct-admin-modal-dialog--client-create .oct-client-edit-card {
    margin: 0;
}

.oct-admin-modal-dialog--client-create input[type="text"],
.oct-admin-modal-dialog--client-create input[type="email"],
.oct-admin-modal-dialog--client-create input[type="number"],
.oct-admin-modal-dialog--client-create select {
    width: 100%;
    padding: .48rem .65rem;
    border: 1px solid #e2e8f0;
    border-radius: .65rem;
    background: #fff;
    font-size: .84rem;
    min-height: 2.15rem;
}

.oct-client-create-email-opt {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .75rem;
    font-size: .8rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

.oct-client-create-email-opt input {
    width: auto;
    min-height: 0;
}

.oct-client-create-password-row {
    display: flex;
    align-items: stretch;
    gap: .35rem;
}

.oct-client-create-password-row input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .02em;
}

.oct-client-create-password-row .oct-admin-btn {
    flex: 0 0 auto;
    padding: .35rem .55rem;
    min-height: 2.15rem;
}

.oct-admin-modal-dialog--client {
    width: min(980px, 100%);
    max-height: min(92vh, 880px);
    background: #eef3f9;
}

.oct-admin-modal-dialog--client .oct-admin-modal-header {
    padding: .95rem 1.15rem .5rem;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border-bottom: none;
}

.oct-admin-modal-dialog--client .oct-admin-modal-header h2 {
    font-family: var(--adm-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
}

.oct-client-edit-subtitle {
    margin: .25rem 0 0;
    font-size: .78rem;
    color: var(--adm-muted);
}

.oct-client-edit-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .15rem 1rem .75rem;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.oct-client-edit-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: .82rem;
    font-weight: 650;
    padding: .48rem .8rem;
    border-radius: .7rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.oct-client-edit-tab i {
    font-size: .95rem;
}

.oct-client-edit-tab:hover {
    color: #515dbf;
    background: #f3f5ff;
    border-color: #eaf2ff;
}

.oct-client-edit-tab.is-active {
    color: #fff;
    background: var(--paces-primary);
    border-color: transparent;
    box-shadow: none;
}

.oct-client-edit-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0 0 .8rem;
    padding: .4rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: .85rem;
}

.oct-client-edit-subtab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: .8rem;
    font-weight: 650;
    padding: .42rem .75rem;
    border-radius: .6rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.oct-client-edit-subtab i {
    font-size: .9rem;
}

.oct-client-edit-subtab:hover {
    color: #515dbf;
    background: rgba(255, 255, 255, .8);
}

.oct-client-edit-subtab.is-active {
    color: #515dbf;
    background: #fff;
    border-color: #d7ddff;
    box-shadow: 0 4px 12px rgba(108, 124, 255, .1);
}

.oct-client-billing-subpane {
    display: none;
}

.oct-client-billing-subpane.is-active {
    display: block;
}

.oct-client-billing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
}

.oct-client-billing-toolbar .oct-clients-page-size {
    margin-right: auto;
}

.oct-clients-prod-row {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .2rem;
}

.oct-clients-prod {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .12rem .4rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.oct-clients-prod.is-license {
    color: #0f4c81;
    background: #e8f2fb;
    border-color: #c5ddf3;
}

.oct-clients-prod.is-iptv {
    color: #6b21a8;
    background: #f3e8ff;
    border-color: #e9d5ff;
}

.oct-clients-prod.is-reseller {
    color: #9a3412;
    background: #ffedd5;
    border-color: #fed7aa;
}

.oct-client-billing-search {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
}

.oct-client-billing-search input {
    min-width: 12rem;
    padding: .38rem .55rem;
    border: 1px solid #e2e8f0;
    border-radius: .45rem;
    background: #fff;
    font-size: .82rem;
}

.oct-client-billing-table-wrap {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 1rem;
    overflow: auto;
    position: relative;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.oct-client-billing-table {
    width: 100%;
    margin: 0;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.oct-client-billing-table thead th {
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
    white-space: nowrap;
    text-align: left;
    padding: .72rem .7rem;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    overflow: hidden;
    text-overflow: ellipsis;
}

.oct-client-billing-table tbody td {
    font-size: .8rem;
    vertical-align: middle;
    padding: .72rem .7rem;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    text-align: left;
    overflow: hidden;
}

.oct-client-billing-table tbody tr:last-child td {
    border-bottom: none;
}

/* Anchos fijos para que Pago y Total no se monten */
.oct-client-billing-table th:nth-child(1),
.oct-client-billing-table td:nth-child(1) { width: 12%; }
.oct-client-billing-table th:nth-child(2),
.oct-client-billing-table td:nth-child(2) { width: 9%; }
.oct-client-billing-table th:nth-child(3),
.oct-client-billing-table td:nth-child(3) { width: 9%; }
.oct-client-billing-table th:nth-child(4),
.oct-client-billing-table td:nth-child(4) { width: 9%; }
.oct-client-billing-table th:nth-child(5),
.oct-client-billing-table td:nth-child(5) { width: 15%; } /* Pago */
.oct-client-billing-table th:nth-child(6),
.oct-client-billing-table td:nth-child(6) { width: 12%; } /* Total */
.oct-client-billing-table th:nth-child(7),
.oct-client-billing-table td:nth-child(7) { width: 9%; }
.oct-client-billing-table th:nth-child(8),
.oct-client-billing-table td:nth-child(8) { width: 10%; }
.oct-client-billing-table th:nth-child(9),
.oct-client-billing-table td:nth-child(9) { width: 7%; }

.oct-client-billing-table .oct-billing-col-pay,
.oct-client-billing-table .oct-billing-col-amount {
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}

.oct-client-billing-table .oct-billing-pay-badge {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
}

.oct-client-billing-table .oct-billing-amount,
.oct-client-billing-table .oct-billing-amount-dual {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 0;
}

.oct-client-billing-table-wrap .oct-billing-empty {
    min-height: 10rem;
}

.oct-client-billing-footer {
    margin: .45rem 0 0;
    font-size: .75rem;
    color: #64748b;
}

.oct-client-inv-type {
    color: #c2410c;
    font-weight: 650;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.oct-client-balance-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
}

.oct-client-balance-tile {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .65rem;
    padding: .7rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.oct-client-balance-tile span {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
}

.oct-client-balance-tile strong {
    font-size: 1.05rem;
    color: #0f172a;
    font-weight: 750;
}

.oct-client-balance-tile.tone-rose { border-left: 3px solid #f43f5e; }
.oct-client-balance-tile.tone-amber { border-left: 3px solid #f59e0b; }
.oct-client-balance-tile.tone-green { border-left: 3px solid #22c55e; }

.oct-client-edit-info {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.oct-client-info-order {
    overflow: hidden;
}

.oct-client-info-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid #e2e8f0;
}

.oct-client-info-order-head h3 {
    margin: 0;
    font-size: 1rem;
}

.oct-client-info-order-head p {
    margin: .2rem 0 0;
    font-size: .78rem;
    color: #64748b;
}

.oct-client-info-order-head code {
    font-size: .72rem;
}

.oct-client-info-order .oct-admin-modal-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.oct-client-info-order .oct-admin-detail-section {
    margin: 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: .55rem;
    padding: .65rem .75rem;
}

@media (max-width: 860px) {
    .oct-client-info-order .oct-admin-modal-sections {
        grid-template-columns: 1fr;
    }
}

.oct-client-config-split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: .75rem;
    align-items: stretch;
}

.oct-cron-schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
    margin-bottom: .85rem;
}

.oct-cron-card {
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: var(--paces-radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.oct-cron-card-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--paces-primary);
    color: #fff;
    font-family: var(--adm-display);
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: -.01em;
    padding: .75rem 1rem;
}

.oct-cron-card-body {
    padding: .95rem 1.05rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.oct-cron-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(7.5rem, .7fr);
    gap: .65rem;
    align-items: center;
    margin: 0;
}

.oct-cron-row > span {
    font-size: .82rem;
    font-weight: 650;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.oct-cron-row > span i {
    color: #8b97ff;
    font-size: .85rem;
    cursor: help;
}

.oct-cron-row input[type="time"] {
    width: 100%;
}

.oct-cron-install-card {
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: var(--paces-radius);
    padding: 1rem 1.05rem 1.1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.oct-cron-install-card h3 {
    margin: 0 0 .35rem;
    font-family: var(--adm-display);
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: -.015em;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.oct-cron-install-card > p {
    margin: 0 0 .65rem;
    font-size: .8rem;
    color: #64748b;
}

@media (max-width: 860px) {
    .oct-cron-schedule-grid {
        grid-template-columns: 1fr;
    }

    .oct-cron-row {
        grid-template-columns: 1fr;
    }
}

.oct-client-config-card .oct-client-config-head {
    margin-bottom: .75rem;
}

.oct-client-config-card .oct-client-config-head h3 {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .95rem;
}

.oct-client-config-card .oct-client-config-head p {
    margin: .25rem 0 0;
    font-size: .75rem;
    color: #64748b;
}

.oct-client-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem .65rem;
}

.oct-client-config-grid label,
.oct-client-config-stack label {
    display: flex;
    flex-direction: column;
    gap: .28rem;
    margin: 0;
}

.oct-client-config-grid label > span,
.oct-client-config-stack label > span {
    font-size: .72rem;
    font-weight: 650;
    color: #334155;
}

.oct-client-config-stack {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.oct-client-config-card .oct-admin-field-hint {
    margin: 0;
    font-size: .72rem;
    line-height: 1.35;
    color: #64748b;
}

@media (max-width: 860px) {
    .oct-client-config-split {
        grid-template-columns: 1fr;
    }

    .oct-client-config-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .oct-client-balance-tiles {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .oct-client-balance-tiles {
        grid-template-columns: 1fr;
    }

    .oct-client-billing-search {
        width: 100%;
    }

    .oct-client-billing-search input {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.oct-admin-modal-dialog--client .oct-admin-modal-body {
    padding: .95rem 1.05rem 1.1rem;
    overflow: auto;
    background: #eef3f9;
}

.oct-client-edit-pane {
    display: none;
}

.oct-client-edit-pane.is-active {
    display: block;
}

.oct-client-edit-split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, .85fr);
    gap: .9rem;
    align-items: start;
}

.oct-client-edit-card {
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: var(--paces-radius);
    padding: 1rem 1.05rem 1.1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.oct-client-edit-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    margin-bottom: .85rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid rgba(15, 23, 42, .05);
}

.oct-client-edit-card-head h3 {
    margin: 0;
}

.oct-client-edit-card h3 {
    margin: 0 0 .75rem;
    font-family: var(--adm-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.oct-client-edit-card h3 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: .5rem;
    background: #f3f5ff;
    color: #6c7cff;
    font-size: .85rem;
}

.oct-client-edit-form {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .65rem .7rem;
}

.oct-client-edit-form label {
    display: grid;
    gap: .28rem;
    grid-column: span 2;
    min-width: 0;
}

.oct-client-edit-form label > span {
    font-size: .72rem;
    font-weight: 650;
    color: #334155;
}

.oct-client-edit-form label > span em {
    color: #ef4444;
    font-style: normal;
    font-weight: 700;
}

.oct-client-edit-form .oct-cef-half {
    grid-column: span 3;
}

.oct-client-edit-form .oct-cef-third {
    grid-column: span 2;
}

.oct-client-edit-form .oct-cef-grow {
    grid-column: span 4;
}

.oct-client-edit-form .oct-cef-full {
    grid-column: 1 / -1;
}

.oct-client-edit-panel-url-row {
    display: flex;
    align-items: stretch;
    gap: .4rem;
}

.oct-client-edit-panel-url-row input {
    flex: 1 1 auto;
    min-width: 0;
}

.oct-client-edit-panel-url-row .oct-admin-btn {
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.oct-client-edit-form--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oct-client-edit-form--3 label {
    grid-column: span 1;
}

.oct-admin-modal-dialog--client input[type="text"],
.oct-admin-modal-dialog--client input[type="email"],
.oct-admin-modal-dialog--client input[type="number"],
.oct-admin-modal-dialog--client input[type="date"],
.oct-admin-modal-dialog--client select {
    width: 100%;
    padding: .42rem .55rem;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    background: #fff;
    font-size: .82rem;
    line-height: 1.25;
    min-height: 2.05rem;
    color: #0f172a;
}

.oct-admin-modal-dialog--client input[readonly] {
    background: #f8fafc;
    color: #64748b;
}

.oct-admin-modal-dialog--client input:focus,
.oct-admin-modal-dialog--client select:focus {
    outline: none;
    border-color: #b4bcff;
    box-shadow: 0 0 0 3px rgba(108, 124, 255, .12);
}

.oct-admin-modal-dialog--client .oct-admin-field-hint {
    margin: .55rem 0 0;
    font-size: .72rem;
    line-height: 1.4;
}

.oct-client-billing-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
}

.oct-client-billing-tile {
    border-radius: .55rem;
    padding: .55rem .6rem;
    min-height: 3.4rem;
    display: grid;
    align-content: center;
    gap: .15rem;
}

.oct-client-billing-tile span {
    font-size: .65rem;
    font-weight: 650;
    color: #475569;
    text-transform: none;
}

.oct-client-billing-tile strong {
    font-size: .78rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    word-break: break-word;
}

.oct-client-billing-tile.tone-amber { background: #fef3c7; }
.oct-client-billing-tile.tone-green { background: #dcfce7; }
.oct-client-billing-tile.tone-rose { background: #ffe4e6; }
.oct-client-billing-tile.tone-violet { background: #ede9fe; }
.oct-client-billing-tile.tone-orange { background: #ffedd5; }
.oct-client-billing-tile.tone-cyan { background: #cffafe; }
.oct-client-billing-tile.tone-slate { background: #e2e8f0; }
.oct-client-billing-tile.tone-blue { background: #eaf2ff; }

.oct-client-edit-reminders {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
}

.oct-client-edit-subs {
    display: grid;
    gap: .5rem;
}

.oct-client-edit-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .55rem .75rem;
    padding: .65rem .75rem;
    border: 1px solid #e2e8f0;
    border-radius: .65rem;
    background: #f8fafc;
}

.oct-client-edit-sub-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    width: 100%;
    justify-content: flex-end;
}

.oct-client-edit-sub-actions .oct-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.oct-client-edit-sub-actions .oct-admin-btn.is-danger {
    color: #b91c1c;
}

.oct-client-edit-sub-actions .oct-admin-btn.is-danger:hover {
    background: rgba(185, 28, 28, .08);
    border-color: rgba(185, 28, 28, .25);
}

.oct-client-edit-sub-meta {
    min-width: 0;
    flex: 1 1 12rem;
}

.oct-client-edit-sub-meta strong {
    display: inline;
    font-size: .84rem;
}

.oct-client-edit-sub-meta em {
    font-style: normal;
    color: var(--adm-muted);
    font-size: .72rem;
}

.oct-client-edit-sub-meta span {
    display: block;
    margin-top: .12rem;
    font-size: .72rem;
    color: var(--adm-muted);
    font-weight: 500;
}

.oct-client-edit-sub-panel-link {
    color: var(--adm-primary);
    font-weight: 650;
    text-decoration: none;
}

.oct-client-edit-sub-panel-link:hover {
    text-decoration: underline;
}

.oct-client-edit-sub-panel-link i {
    font-size: .7rem;
}

.oct-client-edit-sub-date {
    display: grid;
    gap: .18rem;
    width: 9.5rem;
    flex: 0 0 auto;
}

.oct-client-edit-sub-date--wide {
    width: 12.5rem;
}

.oct-client-edit-sub-date select {
    width: 100%;
}

.oct-client-edit-sub-date > span {
    font-size: .68rem;
    font-weight: 650;
    color: var(--adm-muted);
}

.oct-client-edit-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    background: #fff;
    border-top: 1px solid var(--adm-border);
}

.oct-client-edit-footer-end {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.oct-client-edit-save {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent !important;
    color: var(--adm-primary) !important;
    border: 1.5px solid var(--adm-primary) !important;
    box-shadow: none !important;
    font-weight: 650;
}

.oct-client-edit-save:hover {
    background: var(--adm-primary-soft) !important;
}

@media (max-width: 860px) {
    .oct-client-edit-split {
        grid-template-columns: 1fr;
    }

    .oct-client-billing-tiles {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .oct-client-edit-form,
    .oct-client-edit-form--3 {
        grid-template-columns: 1fr;
    }

    .oct-client-edit-form label,
    .oct-client-edit-form .oct-cef-half,
    .oct-client-edit-form .oct-cef-third,
    .oct-client-edit-form .oct-cef-grow,
    .oct-client-edit-form .oct-cef-full,
    .oct-client-edit-form--3 label {
        grid-column: auto;
    }

    .oct-client-billing-tiles {
        grid-template-columns: 1fr;
    }

    .oct-client-edit-tabs {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .oct-admin-modal-dialog--client .oct-admin-modal-header {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .oct-admin-modal-dialog--client .oct-admin-modal-body {
        padding: .75rem;
    }

    .oct-client-edit-card {
        padding: .85rem .9rem .95rem;
    }

    .oct-client-edit-sub-date {
        width: 100%;
    }
}

.oct-panel-domains-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:.35rem}
.oct-panel-domain-row{display:grid;grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr) auto;gap:.55rem;align-items:center;margin-bottom:.55rem}
.oct-panel-domain-enable{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--adm-muted);white-space:nowrap;margin:0}
.oct-panel-domain-enable input{width:auto;margin:0}
@media (max-width:720px){.oct-panel-domain-row{grid-template-columns:1fr}}

.oct-apolopay-icon {
    width: 1.1em;
    height: 1.1em;
    object-fit: contain;
    vertical-align: -.15em;
    flex-shrink: 0;
}

:root {
    --oct-admin-loader-logo: url('/assets/favicon-32.png?v=2');
    --oct-orbit-ring-a: #1e3a8a;
    --oct-orbit-ring-b: #2563eb;
    --oct-orbit-ring-c: #38bdf8;
}

@keyframes oct-brand-orbit-spin {
    to { transform: rotate(360deg); }
}

@keyframes oct-brand-orbit-spin-rev {
    to { transform: rotate(-360deg); }
}

@keyframes oct-brand-orbit-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 14px 32px rgba(2, 6, 23, .35); }
    50% { transform: scale(1.03); box-shadow: 0 18px 40px rgba(37, 99, 235, .28); }
}

.oct-admin-processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(7, 13, 26, .62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.oct-admin-processing-overlay[hidden] {
    display: none !important;
}

.oct-admin-processing-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow: 0 2px 12px rgba(2, 6, 23, .55);
    text-align: center;
    max-width: min(36rem, 92vw);
}

.oct-admin-processing-box > span {
    display: block;
    line-height: 1.35;
    word-break: break-word;
}

.oct-admin-processing-count {
    margin-top: -.5rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: #93c5fd;
}

.oct-admin-processing-count.is-error {
    color: #fca5a5;
}

.oct-admin-processing-count[hidden],
.oct-admin-processing-roll[hidden] {
    display: none !important;
}

.oct-admin-processing-roll {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    box-sizing: border-box;
    width: min(30rem, 88vw);
    padding: .7rem 1rem;
    overflow: hidden;
    text-align: left;
    letter-spacing: 0;
    text-shadow: none;
    background: rgba(15, 23, 42, .55);
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: .75rem;
}

.oct-admin-processing-roll__prev,
.oct-admin-processing-roll__cur {
    position: relative;
    min-height: 1.2em;
    padding-left: 1.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.oct-admin-processing-roll__prev::before,
.oct-admin-processing-roll__cur::before {
    position: absolute;
    left: 0;
    width: 1rem;
    font-weight: 700;
}

.oct-admin-processing-roll__prev {
    color: #94a3b8;
    font-size: .8rem;
    font-weight: 500;
}

.oct-admin-processing-roll__prev:not(:empty)::before {
    content: "✓";
    color: #34d399;
}

.oct-admin-processing-roll__cur {
    color: #f8fafc;
    font-size: .9rem;
    font-weight: 700;
}

.oct-admin-processing-roll__cur::before {
    content: "●";
    color: #60a5fa;
}

.oct-admin-processing-roll.is-error .oct-admin-processing-roll__cur {
    color: #fecaca;
    white-space: normal;
}

.oct-admin-processing-roll.is-error .oct-admin-processing-roll__cur::before {
    content: "✕";
    color: #f87171;
}

.oct-admin-processing-roll.is-rolling .oct-admin-processing-roll__prev,
.oct-admin-processing-roll.is-rolling .oct-admin-processing-roll__cur {
    animation: oct-processing-roll-up .35s ease-out;
}

@keyframes oct-processing-roll-up {
    from { transform: translateY(.9rem); opacity: .2; }
    to { transform: translateY(0); opacity: 1; }
}

.oct-brand-orbit {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    flex-shrink: 0;
}

.oct-brand-orbit__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    pointer-events: none;
    box-sizing: border-box;
}

.oct-brand-orbit__ring--a {
    border-top-color: var(--oct-orbit-ring-a);
    border-right-color: var(--oct-orbit-ring-b);
    animation: oct-brand-orbit-spin 1.15s linear infinite;
}

.oct-brand-orbit__ring--b {
    inset: .42rem;
    border-width: 2.5px;
    border-bottom-color: var(--oct-orbit-ring-c);
    border-left-color: rgba(96, 165, 250, .85);
    animation: oct-brand-orbit-spin-rev 1.55s linear infinite;
}

.oct-brand-orbit__ring--c {
    inset: .85rem;
    border-width: 2px;
    border-top-color: rgba(56, 189, 248, .55);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: rgba(37, 99, 235, .45);
    animation: oct-brand-orbit-spin 2.1s linear infinite;
}

.oct-brand-orbit__disc {
    position: absolute;
    inset: 1.35rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, .95);
    box-shadow: 0 14px 32px rgba(2, 6, 23, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: oct-brand-orbit-pulse 2.4s ease-in-out infinite;
}

.oct-brand-orbit__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 50%;
}

/* Factura manual / edición desde la ficha del cliente (formato por líneas) */
.oct-inv-form .oct-admin-field-hint:empty { display: none; }
.oct-inv-lines {
    margin-top: .85rem;
    border: 1px solid #e2e8f0;
    border-radius: .65rem;
    overflow: hidden;
    background: #fff;
}
.oct-inv-lines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}
.oct-inv-lines-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    padding: .55rem .6rem;
    border-bottom: 1px solid #e2e8f0;
}
.oct-inv-lines-table td {
    padding: .45rem .6rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.oct-inv-lines-table .oct-admin-input { width: 100%; margin: 0; }
.oct-inv-lines-table .col-price { width: 8.5rem; }
.oct-inv-lines-table .col-qty { width: 6rem; }
.oct-inv-lines-table .col-total { width: 7rem; text-align: right; font-weight: 700; color: #0f172a; }
.oct-inv-lines-table th.col-total { text-align: right; }
.oct-inv-lines-table .col-action { width: 2.6rem; text-align: center; }
.oct-inv-lines-table .col-price input,
.oct-inv-lines-table .col-qty input { text-align: right; }
.oct-inv-lines-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .55rem .6rem;
    background: #fbfdff;
}
.oct-inv-bottom {
    display: grid;
    grid-template-columns: 1fr 17rem;
    gap: .85rem;
    margin: .85rem 0 .6rem;
    align-items: start;
}
.oct-inv-notes { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.oct-inv-notes span { font-size: .78rem; font-weight: 600; color: #475569; }
.oct-inv-summary {
    border: 1px solid #e2e8f0;
    border-radius: .65rem;
    background: #f8fafc;
    padding: .35rem .75rem;
}
.oct-inv-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .4rem 0;
    font-size: .84rem;
    color: #475569;
}
.oct-inv-summary-row + .oct-inv-summary-row { border-top: 1px dashed #e2e8f0; }
.oct-inv-summary-row strong { color: #0f172a; }
.oct-inv-summary-row input { width: 7.5rem; text-align: right; margin: 0; }
.oct-inv-summary-row.is-total strong { font-size: 1.05rem; color: #1d4ed8; }
@media (max-width: 720px) {
    .oct-inv-bottom { grid-template-columns: 1fr; }
    .oct-inv-lines-table .col-price { width: 6rem; }
    .oct-inv-lines-table .col-qty { width: 4.5rem; }
}

.oct-wa-team-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .85rem;
    font-weight: 600;
}

.oct-wa-team-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .4rem .5rem;
    min-height: 2.6rem;
    border: 1px solid var(--adm-border, #e2e8f0);
    border-radius: .5rem;
    background: var(--adm-surface, #fff);
    cursor: text;
}

.oct-wa-team-chips input {
    flex: 1;
    min-width: 14rem;
    border: 0 !important;
    outline: 0;
    box-shadow: none !important;
    background: transparent !important;
    padding: .2rem !important;
    font: inherit;
    color: inherit;
}

.oct-wa-team-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .35rem .2rem .65rem;
    border-radius: 999px;
    background: rgba(37, 211, 102, .14);
    color: #128c4a;
    font-size: .8rem;
    font-weight: 700;
}

.oct-wa-team-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: .6rem;
    cursor: pointer;
}

.oct-wa-team-chip button:hover {
    background: rgba(18, 140, 74, .18);
}

.oct-admin-link-btn {
    border: 0;
    background: none;
    padding: 0;
    color: #2563eb;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

.oct-wa-tpl {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.oct-wa-tpl-list {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .6rem;
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 14px;
    background: #fff;
}

.oct-wa-tpl-group {
    margin: .5rem .4rem .2rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}

.oct-wa-tpl-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .55rem .7rem;
    border: 0;
    border-radius: 10px;
    background: none;
    text-align: left;
    font-size: .88rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
}

.oct-wa-tpl-item:hover { background: rgba(148, 163, 184, .12); }
.oct-wa-tpl-item.is-active { background: rgba(37, 211, 102, .14); color: #0b6b36; }
.oct-wa-tpl-item.is-off .oct-wa-tpl-item-title { opacity: .55; }
.oct-wa-tpl-item-title { flex: 1; min-width: 0; }

.oct-wa-tpl-badge {
    padding: .1rem .45rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, .16);
    color: #b45309;
    font-size: .68rem;
    font-weight: 800;
}

.oct-wa-tpl-badge.is-off { background: rgba(148, 163, 184, .2); color: #475569; }

.oct-wa-tpl-editor {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 14px;
    background: #fff;
}

.oct-wa-tpl-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .8rem;
}

.oct-wa-tpl-head h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
.oct-wa-tpl-head p { margin: 0; }

.oct-wa-tpl-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    gap: 1rem;
}

.oct-wa-tpl-text {
    width: 100%;
    min-height: 260px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem;
    line-height: 1.5;
    resize: vertical;
}

.oct-wa-tpl-vars-label { margin: .6rem 0 .3rem; font-size: .78rem; font-weight: 700; color: #64748b; }
.oct-wa-tpl-vars { display: flex; flex-wrap: wrap; gap: .35rem; }

.oct-wa-tpl-var {
    padding: .2rem .55rem;
    border: 1px solid rgba(37, 99, 235, .25);
    border-radius: 999px;
    background: rgba(37, 99, 235, .07);
    color: #1d4ed8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .76rem;
    cursor: pointer;
}

.oct-wa-tpl-var:hover { background: rgba(37, 99, 235, .15); }
.oct-wa-tpl-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.oct-wa-tpl-preview-label { margin-bottom: .35rem; font-size: .78rem; font-weight: 700; color: #64748b; }

.oct-wa-tpl-chat {
    min-height: 260px;
    padding: 1rem .8rem;
    border-radius: 12px;
    background: #efeae2;
}

.oct-wa-tpl-bubble {
    max-width: 100%;
    padding: .55rem .7rem;
    border-radius: 0 10px 10px 10px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    color: #111b21;
    font-size: .85rem;
    line-height: 1.45;
    word-break: break-word;
}

.oct-wa-tpl-bubble code { padding: 0 .2rem; border-radius: 4px; background: rgba(0, 0, 0, .06); font-size: .8rem; }

@media (max-width: 1100px) {
    .oct-wa-tpl, .oct-wa-tpl-body { grid-template-columns: 1fr; }
}

.oct-wa-tpl-channels { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }

.oct-wa-tpl-channel {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
}

.oct-wa-tpl-channel span { font-weight: 600; opacity: .75; }
.oct-wa-tpl-channel.is-active { color: #fff; border-color: transparent; }
.oct-wa-tpl-channel.is-whatsapp.is-active { background: #16a34a; }
.oct-wa-tpl-channel.is-email.is-active { background: #2563eb; }
.oct-wa-tpl-channel.is-telegram.is-active { background: #0ea5e9; }

.oct-wa-tpl-subject { display: block; margin-bottom: .6rem; }
.oct-wa-tpl-subject span { display: block; margin-bottom: .25rem; font-size: .78rem; font-weight: 700; color: #475569; }
.oct-wa-tpl-subject input { width: 100%; }

.oct-wa-tpl-var.is-block { border-color: #ddd6fe; background: #f5f3ff; color: #6d28d9; }
.oct-wa-tpl-var.is-block:hover { background: #ede9fe; }
.oct-admin-field-hint .oct-wa-tpl-var { cursor: default; padding: 0 .4rem; }

.oct-wa-tpl-mail {
    width: 100%;
    min-height: 460px;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 12px;
    background: #f1f5f9;
}

.oct-wa-tpl-chat.is-telegram { background: #7ea6c9; }
.oct-wa-tpl-chat.is-telegram .oct-wa-tpl-bubble { border-radius: 10px; }

.oct-wa-tpl-tg-keys { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin-top: .35rem; }

.oct-wa-tpl-tg-keys span {
    padding: .4rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .55);
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    color: #0f172a;
}

.oct-wa-tpl-body:has(.oct-wa-tpl-mail) { grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); }

.oct-admin-panel-head-actions[hidden] { display: none !important; }

/* Saldo a favor del cliente */
.oct-client-balance-tiles:has(.tone-wallet) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.oct-client-balance-tile.tone-wallet {
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(16, 185, 129, .45);
}

.oct-client-balance-tile.tone-wallet span,
.oct-client-balance-tile.tone-wallet strong { color: #fff; }

.oct-wallet-card { border: 1.5px solid rgba(16, 185, 129, .45); }

.oct-wallet-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.oct-wallet-card-head h3 { margin: 0; }

.oct-wallet-card-actions {
    display: flex;
    gap: .4rem;
}

.oct-admin-btn.oct-wallet-btn-add {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

.oct-admin-btn.oct-wallet-btn-add:hover { background: #059669; border-color: #059669; }

.oct-admin-btn.oct-wallet-btn-sub {
    color: #dc2626;
    border-color: rgba(220, 38, 38, .35);
}

.oct-wallet-pay { margin-right: .35rem; }

.oct-wallet-num,
.oct-admin-table th.oct-wallet-num,
.oct-admin-table td.oct-wallet-num { text-align: right; white-space: nowrap; }
.oct-wallet-in { color: #059669; font-weight: 750; }
.oct-wallet-out { color: #dc2626; font-weight: 750; }

.oct-wallet-sub {
    display: block;
    font-size: .74rem;
    color: #64748b;
}

.oct-admin-icon-btn.oct-wallet-ok {
    color: #059669;
    background: rgba(16, 185, 129, .12);
}

.oct-wallet-modal { max-width: 460px; }

.oct-wallet-dir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #e2e8f0;
    border-radius: .6rem;
    overflow: hidden;
}

.oct-wallet-dir button {
    padding: .6rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
}

.oct-wallet-dir button.is-active { background: #10b981; color: #fff; }
.oct-wallet-dir button[data-wallet-dir="sub"].is-active { background: #dc2626; }

.oct-wallet-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: .6rem;
    cursor: pointer;
}

.oct-wallet-check input {
    width: 17px;
    height: 17px;
    margin-top: .15rem;
    accent-color: #10b981;
}

.oct-wallet-check b { display: block; font-size: .86rem; }
.oct-wallet-check small { display: block; font-size: .76rem; color: #64748b; font-weight: 500; }

.oct-wallet-preview {
    display: grid;
    gap: .3rem;
    padding: .75rem .9rem;
    border-radius: .6rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: .86rem;
}

.oct-wallet-preview div { display: flex; justify-content: space-between; gap: .5rem; }
.oct-wallet-preview .is-in { color: #059669; }
.oct-wallet-preview .is-out { color: #dc2626; }
.oct-wallet-preview .is-total { font-weight: 800; padding-top: .3rem; border-top: 1px dashed #cbd5e1; }
.oct-wallet-preview.is-invalid .is-total { color: #dc2626; }

.oct-admin-btn.oct-admin-btn-primary.oct-wallet-save { background: #10b981; border-color: #10b981; box-shadow: none; }
.oct-admin-btn.oct-admin-btn-primary.oct-wallet-save:hover { background: #059669; border-color: #059669; }
.oct-admin-btn.oct-admin-btn-primary.oct-wallet-save.is-sub { background: #dc2626; border-color: #dc2626; }

html[data-adm-theme="dark"] .oct-client-balance-tile.tone-wallet { box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px rgba(16, 185, 129, .5); }
html[data-adm-theme="dark"] .oct-wallet-preview { background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .2); }
html[data-adm-theme="dark"] .oct-wallet-dir { border-color: rgba(148, 163, 184, .25); }
html[data-adm-theme="dark"] .oct-wallet-dir button { color: #cbd5e1; }
html[data-adm-theme="dark"] .oct-wallet-in,
html[data-adm-theme="dark"] .oct-wallet-preview .is-in { color: #6ee7b7; }
html[data-adm-theme="dark"] .oct-wallet-out,
html[data-adm-theme="dark"] .oct-wallet-preview .is-out { color: #fca5a5; }

@media (max-width: 900px) {
    .oct-client-balance-tiles:has(.tone-wallet) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}