:root {
    --sky-50: #f0f9ff;
    --sky-100: #e0f2fe;
    --sky-200: #bae6fd;
    --sky-300: #7dd3fc;
    --sky-600: #0284c7;
    --navy: #0b1f3a;
    --gold: #c9a227;
    --gold-soft: #e8d48b;
    --glass: rgba(255, 255, 255, 0.72);
    --shadow: 0 24px 60px rgba(11, 31, 58, 0.14);
    --theme-login-bg: #0284c7;
    --theme-login-btn: #0b1f3a;
    --theme-user-bg: #dbeafe;
    --theme-user-btn: #0284c7;
    --theme-user-text: #0b1f3a;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: "Manrope", "Segoe UI", sans-serif;
    color: var(--theme-user-text, var(--navy));
    background:
        radial-gradient(circle at 12% 18%, rgba(125, 211, 252, 0.35), transparent 36%),
        linear-gradient(180deg, var(--theme-user-bg, #dbeafe) 0%, color-mix(in srgb, var(--theme-user-bg, #dbeafe) 70%, #fff) 100%);
}

.page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
}

.shell {
    width: min(1080px, 100%);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 28px;
    align-items: stretch;
}
.shell-single {
    width: min(440px, 100%);
    grid-template-columns: 1fr;
}

.hero, .card {
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.hero {
    padding: 42px;
    color: #fff;
    background:
        linear-gradient(160deg, rgba(11, 31, 58, 0.92), rgba(2, 132, 199, 0.78)),
        url("data:image/svg+xml,%3Csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='80' cy='80' r='60' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='2'/%3E%3C/svg%3E");
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--gold), #f5e6a8);
    color: var(--navy);
    box-shadow: 0 10px 24px rgba(201, 162, 39, 0.35);
    transition: transform .35s ease, box-shadow .35s ease;
}

.brand-mark:hover {
    transform: translateY(-3px) rotate(-6deg);
    box-shadow: 0 16px 30px rgba(201, 162, 39, 0.45);
}

.hero h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    margin: 28px 0 12px;
}

.hero p { opacity: .88; max-width: 36ch; }

.features {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.feature {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    transition: transform .3s ease, background .3s ease;
}

.feature:hover {
    transform: translateX(6px);
    background: rgba(255,255,255,0.16);
}

.card {
    background: var(--glass);
    backdrop-filter: blur(18px);
    padding: 36px 32px;
    border: 1px solid rgba(255,255,255,0.7);
}

.card h2 {
    margin: 0 0 8px;
    font-size: 28px;
}

.muted { color: #4b6280; font-size: 14px; }

.form { margin-top: 28px; display: grid; gap: 16px; }

label { font-size: 13px; font-weight: 700; }

.input, .otp-input {
    width: 100%;
    border: 1px solid #c7ddf3;
    background: #fff;
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 16px;
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.input:hover, .otp-input:hover {
    transform: translateY(-1px);
    border-color: var(--sky-300);
}

.input:focus, .otp-input:focus {
    border-color: var(--sky-600);
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
}

.channels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.channel {
    position: relative;
}

.channel input { position: absolute; opacity: 0; }

.channel span {
    display: block;
    text-align: center;
    padding: 12px 10px;
    border-radius: 14px;
    border: 1px solid #d7e8f8;
    background: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all .28s ease;
}

.channel input:checked + span,
.channel span:hover {
    background: linear-gradient(135deg, #0b1f3a, #0369a1);
    color: #fff;
    box-shadow: 0 12px 24px rgba(3, 105, 161, 0.28);
    transform: translateY(-2px);
}

.btn {
    border: 0;
    border-radius: 16px;
    padding: 15px 18px;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--theme-user-btn, #0b1f3a), var(--theme-login-btn, #0284c7));
    box-shadow: 0 14px 28px rgba(2, 132, 199, 0.28);
    transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
}

.btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 20px 36px rgba(2, 132, 199, 0.38);
}

.btn-ghost {
    background: transparent;
    color: var(--navy);
    box-shadow: none;
    border: 1px solid #c7ddf3;
}

.btn-ghost:hover {
    background: #fff;
}

.alert {
    padding: 12px 14px;
    border-radius: 14px;
    background: #ecfdf3;
    color: #166534;
    font-size: 14px;
}

.error { color: #b91c1c; font-size: 13px; }

.otp-row {
    display: flex;
    justify-content: center;
}

.otp-card { animation: cardIn .45s ease; }
@keyframes cardIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.otp-input {
    text-align: center;
    letter-spacing: 10px;
    font-size: 24px;
    font-weight: 800;
    max-width: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.otp-input:focus {
    transform: scale(1.02);
    box-shadow: 0 12px 28px rgba(2, 132, 199, .22);
}
.btn:disabled,
.btn-ghost:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.actions { display: grid; gap: 10px; }

.dash {
    width: min(980px, 100%);
}

.dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.stat-card h2 { margin: 8px 0 0; font-size: 26px; }

.tile {
    background: var(--glass);
    border-radius: 22px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: var(--shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}

.tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 50px rgba(11, 31, 58, 0.16);
}

@media (max-width: 880px) {
    .shell, .grid-3 { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}
.sidebar-brand-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    background: transparent;
    margin: 0 auto;
}
.sidebar-brand-text {
    display: block;
    width: 100%;
    margin: 0;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    text-align: center;
    color: var(--navy);
}
.logo-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}
.logo-img-lg { max-width: min(240px, 100%); }
.navbar-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    height: 32px;
    max-width: min(180px, 42vw);
}
.brand-logo {
    display: block;
    height: 32px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    background: transparent;
}
.brand-text {
    font-weight: 800;
    color: var(--navy);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.logo-link.light .logo-img { filter: drop-shadow(0 8px 16px rgba(0,0,0,.18)); }

.app-body { min-height: 100vh; min-height: 100dvh; }
.app-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}
.sidebar {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255,255,255,.7);
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}
.side-nav { display: grid; gap: 8px; }
.side-nav a,
.nav-drop {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}
.side-nav a {
    text-decoration: none;
    color: var(--navy);
    padding: 11px 12px;
    border-radius: 14px;
    transition: background .25s ease, transform .25s ease;
}
.side-nav a:hover, .side-nav a.active {
    background: linear-gradient(135deg, #0b1f3a, #0284c7);
    color: #fff;
    transform: translateX(4px);
}
.nav-group { display: grid; gap: 6px; margin-top: 8px; }
.nav-badge {
    margin-left: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: inline-grid;
    place-items: center;
}
.nav-label {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #5b7390;
    padding: 8px 12px 0;
    font-weight: 800;
}
.nav-drop {
    width: 100%;
    border: 0;
    background: #fff;
    color: var(--navy);
    padding: 11px 12px;
    border-radius: 14px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
.nav-drop:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 20px rgba(2, 132, 199, .12);
}
.nav-drop-label { display: inline-flex; align-items: center; gap: 8px; }
.nav-sub { display: none; padding-left: 8px; }
.nav-group.open > .nav-sub { display: grid; gap: 6px; }
.preview-img { margin: 8px 0 12px; }
.favicon-preview { width: 32px; height: 32px; object-fit: contain; display: block; margin: 8px 0 12px; }

.side-out { width: 100%; margin-top: auto; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(219, 234, 254, .92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.6);
}
.topbar-user { flex: 1; min-width: 0; }
.profile-float { position: relative; margin-left: auto; }
.profile-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 18px rgba(11, 31, 58, .12);
    cursor: pointer;
    font-size: 16px;
}
.profile-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 200px;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 8px;
    z-index: 70;
}
.profile-float.open .profile-menu { display: grid; }
.profile-menu a,
.profile-logout {
    text-decoration: none;
    color: var(--navy);
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.profile-menu a:hover,
.profile-logout:hover { background: #e0f2fe; }
.menu-mini { font-size: 13px; width: 18px; text-align: center; }
.profile-meta {
    padding: 8px 12px 10px;
    border-bottom: 1px solid #e0f2fe;
    margin-bottom: 6px;
}
.profile-meta strong { display: block; font-size: 14px; }
.menu-btn {
    display: inline-grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    flex: 0 0 auto;
    border: 0;
    background: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    z-index: 60;
    box-shadow: 0 6px 14px rgba(11, 31, 58, .08);
}
.menu-btn span {
    display: block;
    width: 12px;
    height: 1.5px;
    background: var(--navy);
    border-radius: 99px;
}
.app-shell.nav-closed {
    grid-template-columns: 1fr;
}
.app-shell.nav-closed .sidebar {
    display: none;
}
.chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.app-content { padding: 0 22px 28px; }

.slider {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: 0;
    box-shadow: none;
    margin-bottom: 14px;
    padding: 6px;
    background: rgba(255,255,255,.2);
}
.slide-img {
    padding: 0;
    min-height: 0;
    background: transparent;
}
.slide-img img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 14px;
}
.slide {
    display: none;
    padding: 28px;
    color: #fff;
    min-height: 0;
}
.slide.is-active { display: block; animation: fade .5s ease; }
.slide.slide-img {
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
}
.slide.slide-img img {
    width: 100%;
    height: auto !important;
    object-fit: contain !important;
}
.slide-kicker { letter-spacing: .12em; text-transform: uppercase; font-size: 12px; opacity: .85; }
.tone-one { background: linear-gradient(135deg, #0b1f3a, #0284c7); }
.tone-two { background: linear-gradient(135deg, #075985, #38bdf8); }
.tone-three { background: linear-gradient(135deg, #1e3a5f, #c9a227); }
.dots {
    position: absolute;
    right: 16px;
    bottom: 14px;
    display: flex;
    gap: 6px;
}
.dots button {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    border: 0;
    background: rgba(255,255,255,.4);
    cursor: pointer;
}
.dots button.on { width: 22px; background: #fff; }
@keyframes fade { from { opacity: .4 } to { opacity: 1 } }

.wallet-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
}
.wallet-home-grid {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 8px;
    justify-content: end;
    margin-left: auto;
}
.wallet-home-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    padding: 8px 10px;
}
.wallet-home-card h2 { margin: 2px 0 0; font-size: 16px; white-space: nowrap; }
.wallet-home-card .muted { margin: 0; font-size: 11px; }
@media (max-width: 700px) {
    .wallet-home-grid { grid-template-columns: repeat(2, minmax(0, max-content)); }
    .wallet-home-card h2 { font-size: 13px; }
}
.wallet-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 14px 10px;
    width: 100%;
    max-width: 100%;
}
.wallet-card .muted { margin: 0; min-height: 32px; line-height: 1.2; }
.wallet-card h2 { margin: 4px 0 0; font-size: 22px; white-space: nowrap; }
.wallet-topup-btn { align-self: center; white-space: nowrap; height: max-content; }
.wallet-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}
.wallet-page-grid .wallet-card {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
}
.wallet-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
    align-items: stretch;
}
.wallet-form-grid .tile {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.wallet-form-grid .form { margin-top: auto; }
@media (min-width: 900px) {
    .wallet-form-grid { grid-template-columns: 1fr 1fr; }
}
.wallet-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff;
    font-size: 18px;
    box-shadow: 0 8px 16px rgba(11, 31, 58, .08);
    flex: 0 0 auto;
}
.page-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:16px 18px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(224,242,254,.9));border:1px solid rgba(255,255,255,.8);box-shadow:0 14px 30px rgba(11,31,58,.08);animation:rise .4s ease}
.page-kicker{margin:0 0 2px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0369a1}
.page-hero h2{margin:0}
.page-hero .muted{margin:4px 0 0}
.wallet-home-card,.wallet-card{transition:transform .25s ease,box-shadow .25s ease}
.wallet-home-card:hover,.wallet-card:hover{transform:translateY(-3px);box-shadow:0 16px 28px rgba(11,31,58,.12)}
.price-title{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 12px;border-radius:999px;background:#e0f2fe;color:#0b1f3a}
.section-title { margin: 0 0 12px; }
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.section-head .section-title { margin: 0; }
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.service-card {
    text-decoration: none;
    color: var(--navy);
    background: var(--glass);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 18px;
    padding: 16px 10px;
    display: grid;
    justify-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform .28s ease, box-shadow .28s ease;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 36px rgba(11, 31, 58, 0.16);
}
.service-icon { font-size: 22px; width: 42px; height: 42px; display: grid; place-items: center; }
.service-icon img, .cat-icon-preview {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}
.cat-icon-preview { width: 36px; height: 36px; }

.pager{margin-top:16px;display:grid;gap:10px;justify-items:center}
.pager-info{margin:0;color:#5b7390;font-size:13px}
.pager-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.pager-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 12px;border-radius:12px;background:#fff;color:#0b1f3a;border:1px solid #c7ddf3;text-decoration:none;font-size:13px;font-weight:700;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.pager-btn:hover{transform:translateY(-2px);box-shadow:0 10px 18px rgba(2,132,199,.16);background:#f0f9ff}
.pager-btn.is-current{background:linear-gradient(135deg,#0b1f3a,#0284c7);color:#fff;border-color:transparent}
.pager-btn.is-disabled{opacity:.45;pointer-events:none}
.pager-gap{color:#5b7390;padding:0 4px}
.table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #dbeafe; font-size: 14px; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.app-content, .tile, .card { min-width: 0; max-width: 100%; }
.tile, .card { overflow: hidden; }
.action-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.action-row form { margin: 0; }
.btn-sm {
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #0b1f3a, #0284c7);
    cursor: pointer;
}
.btn-sm-alt { background: #fff; color: var(--navy); border: 1px solid #c7ddf3; }
.btn-sm-danger { background: #b91c1c; }
.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-content { padding: 0 12px 28px; overflow-x: hidden; }
    .sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        height: auto;
        width: min(280px, 86vw);
        z-index: 30;
    }
    .app-shell.nav-closed .sidebar { display: none; }
    .app-shell:not(.nav-closed) .sidebar { display: flex; }
    .chart-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .table { min-width: 640px; }
    .table th, .table td { font-size: 12px; padding: 8px 6px; white-space: nowrap; }
    .table-wrap { border-radius: 12px; }
}

@media (max-width: 720px) {
    .service-card { padding: 12px 6px; font-size: 11px; }
    .wallet-stack {
        justify-content: flex-end;
        gap: 8px;
    }
    .wallet-card {
        padding: 8px 10px;
        gap: 8px;
        border-radius: 14px;
    }
    .wallet-card h2 { font-size: 13px; margin: 2px 0 0; }
    .wallet-card .muted { font-size: 10px; margin: 0; }
    .wallet-icon { width: 22px; height: 22px; font-size: 12px; border-radius: 8px; }
}

@media (min-width: 981px) {
    .service-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.news-section { margin-top: 24px; }
.news-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.news-card {
    background: var(--glass);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.news-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    display: block;
    background: #e0f2fe;
}
.news-body { padding: 14px 16px 16px; }
.news-body h4 { margin: 0 0 6px; font-size: 16px; }
.news-body .btn-sm { margin-top: 8px; }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.editor-toolbar button, .editor-toolbar select {
    border: 1px solid #c7ddf3; background: #fff; border-radius: 8px; padding: 6px 8px; font-size: 12px; cursor: pointer;
}
.editor-box { min-height: 220px; border: 1px solid #d7e6f5; border-radius: 14px; padding: 12px; background: #fff; }
.article-page { max-width: 760px; }
.article-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; margin-bottom: 12px; }
.article-body { line-height: 1.7; margin: 16px 0 24px; }
.article-body p { margin: 0 0 12px; }
.cron-box {
    background: #0b1f3a;
    color: #e0f2fe;
    padding: 12px 14px;
    border-radius: 12px;
    overflow-x: auto;
    font-size: 13px;
}
.cron-list { padding-left: 18px; line-height: 1.7; }
.update-card { text-align: center; }
.update-icon { font-size: 42px; }

@media (max-width: 980px) {
    .news-track-wrap { overflow: hidden; }
    .news-track {
        display: flex;
        gap: 0;
        width: 100%;
    }
    .news-card {
        min-width: 100%;
        flex: 0 0 100%;
    }
}

.invoice-body {
    min-height: 100vh;
    padding: 24px 16px 40px;
}
.invoice-actions {
    max-width: 720px;
    margin: 0 auto 16px;
    display: flex;
    gap: 8px;
}
.invoice-sheet {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: var(--shadow);
    border: 1px solid #d7e8f7;
    animation: rise .4s ease;
}
.invoice-box {
    background: rgba(2, 132, 199, .06);
    border: 1px solid #d7e8f7;
    border-radius: 16px;
    padding: 14px;
}
.invoice-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.invoice-badge {
    background: linear-gradient(135deg, #0b1f3a, #0284c7);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}
.invoice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 18px 0;
}
.invoice-total {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 18px;
}
@media print {
    .no-print { display: none !important; }
    .invoice-body { background: #fff !important; }
    .invoice-sheet { box-shadow: none; border-radius: 0; }
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 22px;
    min-width: 48px;
    max-width: 48px;
    min-height: 22px;
    max-height: 22px;
    cursor: pointer;
    flex: 0 0 48px;
    align-self: center;
    overflow: hidden;
}
.switch input { display: none; }
.switch-track {
    position: absolute;
    inset: 0;
    background: #94a3b8;
    border-radius: 999px;
    transition: background .25s ease;
}
.switch-track:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .25s ease;
    z-index: 2;
}
.switch input:checked + .switch-track { background: linear-gradient(135deg, #0b1f3a, #0284c7); }
.switch input:checked + .switch-track:before { transform: translateX(26px); }
.switch-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    font-size: 8px;
    font-weight: 800;
    color: #fff;
    pointer-events: none;
    z-index: 1;
}
.switch .switch-text::after { content: "OFF"; margin-left: 18px; }
.switch input:checked ~ .switch-text::after { content: "ON"; margin-left: 6px; }

html:has(body.login-page),
body.login-page {
    background:
        radial-gradient(circle at 18% 8%, rgba(255,255,255,.28), transparent 28%),
        radial-gradient(circle at 86% 92%, rgba(11,31,58,.18), transparent 32%),
        var(--theme-login-bg, #0284c7);
    color: #f8fbff;
}
body.login-page .page { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
body.login-page .login-title {
    color: #ffffff;
    text-shadow: 0 8px 24px rgba(11, 31, 58, .22);
    margin: 8px 0 2px;
}
.login-kicker { margin: 0; color: rgba(255,255,255,.86); font-weight: 700; letter-spacing: .02em; }
.login-hero-frame {
    width: min(520px, 100%);
    margin: 0 auto 8px;
    padding: 8px;
    border-radius: 28px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 18px 40px rgba(11,31,58,.16);
    backdrop-filter: blur(10px);
}
body.login-page .login-hero-img { width: 100%; max-width: none; border-radius: 22px; aspect-ratio: 780 / 439; object-fit: cover; margin: 0; }
body.login-page .login-card {
    width: min(440px, 100%);
    margin: 0 auto;
    padding: 22px 22px 18px;
    border-radius: 28px;
    color: #0b1f3a;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 28px 60px rgba(11, 31, 58, .2);
    animation: rise .45s ease;
}
.login-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.login-badge {
    width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
    background: #e0f2fe; font-size: 22px; box-shadow: inset 0 0 0 1px #bae6fd;
}
body.login-page .login-card h2 { margin: 0; }
body.login-page .login-card .muted { margin: 2px 0 0; }
body.login-page .card h2,
body.login-page .card label { color: #0b1f3a; }
body.login-page .card .muted,
body.login-page .card .register-link { color: #36516e; }
body.login-page .card .input {
    color: #0b1f3a;
    background: #f8fbff;
    border: 1px solid #c7ddf3;
    border-radius: 16px;
    min-height: 48px;
}
body.login-page .card .input:focus { border-color: #0284c7; box-shadow: 0 0 0 4px rgba(2,132,199,.12); }
body.login-page .card .input::placeholder { color: #7b93ab; }
body.login-page .channels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.login-page .channel span {
    color: #0b1f3a;
    background: #f0f7fd;
    border: 1px solid #c7ddf3;
    border-radius: 14px;
    min-height: 44px;
    font-weight: 800;
}
body.login-page .channel input:checked + span {
    color: #ffffff;
    background: #0b1f3a;
    border-color: #0b1f3a;
    box-shadow: 0 10px 18px rgba(11,31,58,.16);
}
body.login-page .btn {
    width: 100%;
    min-height: 48px;
    border-radius: 16px;
    color: #ffffff;
    background: #0b1f3a;
    border: 0;
    box-shadow: 0 14px 28px rgba(11, 31, 58, .22);
}
body.login-page .btn:hover { background: #0369a1; transform: translateY(-2px); }
body.login-page .register-link {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-weight: 800;
    text-decoration: none;
}
.login-hero { text-align: center; background: transparent; width: 100%; animation: rise .5s ease both; }
.login-hero-frame { transition: transform .35s ease, box-shadow .35s ease; }
.login-hero-frame:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(11,31,58,.22); }
body.login-page .login-card { animation: rise .6s ease .08s both; }
.login-badge { transition: transform .3s ease; }
.login-card-head:hover .login-badge { transform: scale(1.06); }
body.login-page .card .input,
body.login-page .channel span,
body.login-page .btn,
body.login-page .register-link {
    transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
body.login-page .register-link:hover { color: #0284c7; transform: translateY(-1px); }
.login-hero-img {
    width: 100%;
    max-width: 780px;
    height: auto;
    aspect-ratio: 780 / 439;
    object-fit: contain;
    background: transparent;
    display: block;
    margin: 0 auto 10px;
}
.login-stack { gap: 18px; width: min(780px, 100%); }
.login-stack .card { width: min(440px, 100%); margin-left: auto; margin-right: auto; }
.login-hero-logo {
    height: 48px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    background: transparent;
    display: block;
    margin: 0 auto 8px;
}
.media-preview { position: relative; display: inline-block; max-width: 100%; }
.media-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: rgba(185, 28, 28, .92);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}
.register-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
}
.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: min(360px, calc(100% - 32px));
    padding: 14px 16px;
    border-radius: 16px;
    color: #fff;
    box-shadow: var(--shadow);
    z-index: 80;
    animation: toastIn .25s ease;
}
.toast p { margin: 0; font-weight: 700; }
.toast-ok { background: linear-gradient(135deg, #047857, #10b981); }
.toast-fail { background: linear-gradient(135deg, #991b1b, #ef4444); }
.toast.hide { opacity: 0; transition: opacity .4s ease; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.order-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    animation: cardIn .4s ease;
}
.order-badge {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #fff;
    box-shadow: var(--shadow);
    font-size: 24px;
}
.order-badge img { width: 36px; height: 36px; object-fit: contain; }
.order-tile { animation: cardIn .5s ease; }
.order-tile .input:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(2, 132, 199, .16);
}
.mobile-dock { display: none; }
@media (max-width: 980px) {
    .app-content { padding-bottom: 92px; }
    .mobile-dock {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 80;
        background: rgba(255,255,255,.94);
        backdrop-filter: blur(16px);
        border-radius: 22px;
        box-shadow: 0 16px 36px rgba(11, 31, 58, .18);
        padding: 3px 6px 5px;
        min-height: 48px;
        align-items: end;
    }
    .mobile-dock a {
        display: grid;
        justify-items: center;
        gap: 4px;
        text-decoration: none;
        color: #64748b;
        font-size: 10px;
        font-weight: 700;
    }
    .mobile-dock a span { font-size: 18px; }
    .mobile-dock a.on { color: var(--navy); }
    .mobile-dock .dock-saldo {
        transform: translateY(-18px);
        color: #0b1f3a;
    }
    .mobile-dock .dock-saldo span {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #0284c7;
        box-shadow: 0 10px 20px rgba(2, 132, 199, .35);
        font-size: 20px;
        color: #fff;
    }
}
.login-title {
    font-family: "Fraunces", "Recoleta", "Times New Roman", serif;
    font-size: clamp(26px, 6vw, 36px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    color: #fff;
}

.cron-dot{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px}
.cron-dot.on{background:#dcfce7;color:#166534}
.cron-dot.off{background:#fee2e2;color:#991b1b}
.cron-dot.on::before,.cron-dot.off::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}

.nav-ico{display:inline-block;width:1.25em;margin-right:6px;text-align:center}
.nav-drop-label{display:inline-flex;align-items:center;gap:0;}

.order-tile{animation:rise .45s ease}
.product-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:8px}
.product-chip{border:1px solid #c7ddf3;background:#fff;border-radius:12px;padding:10px;cursor:pointer;animation:rise .4s ease}
.product-chip.on,.product-chip:hover{background:#0284c7;color:#fff;border-color:#0284c7}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.product-chip{display:grid;gap:4px;text-align:left}.chip-status{font-size:11px;opacity:.8}
.input-paste{position:relative}.input-paste .input{padding-right:72px}.paste-in{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:#0284c7;color:#fff;border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer}
.alert-box{display:flex;gap:10px;align-items:flex-start;border:1px solid #f59e0b;background:#fff7ed;color:#9a3412;border-radius:14px;padding:12px 14px;margin:12px 0}.alert-box p{margin:0;line-height:1.55}.alert-box-icon{font-size:20px;line-height:1.2}

.admin-hero{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding:16px 18px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(224,242,254,.92));border:1px solid rgba(255,255,255,.8);box-shadow:0 14px 30px rgba(11,31,58,.08);animation:rise .4s ease}
.admin-hero h2{margin:0}
.admin-hero-badge{background:linear-gradient(135deg,#0b1f3a,#0284c7);color:#fff;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:800;box-shadow:0 8px 16px rgba(2,132,199,.2)}
.stat-card{position:relative;overflow:hidden;animation:rise .45s ease;transition:transform .25s ease,box-shadow .25s ease}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 18px 32px rgba(11,31,58,.14)}
.chart-card,.tile{transition:transform .25s ease,box-shadow .25s ease}
.chart-card:hover{transform:translateY(-2px)}
.app-body .table tbody tr{transition:background .2s ease}
.app-body .table tbody tr:hover{background:#f0f9ff}
@media (max-width: 720px){
    .admin-hero{padding:14px}
    .stat-card h2{font-size:18px}
}
.stat-ico{font-size:22px}
.tone-user{border-left:4px solid #0284c7}
.tone-trx{border-left:4px solid #0b1f3a}
.tone-net{border-left:4px solid #16a34a}
.tone-gross{border-left:4px solid #c9a227}
.chart-card{animation:rise .55s ease}
.chart-head h3{margin:0 0 12px}

.status-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}.status-pill.on{background:#dcfce7;color:#166534}.status-pill.off{background:#fee2e2;color:#991b1b}
.pay-card{text-align:center;animation:rise .45s ease}.pay-timer h2{margin:0 0 12px;letter-spacing:.08em}
.bank-box{background:rgba(2,132,199,.08);border:1px solid #c7ddf3;border-radius:16px;padding:16px}.va-code{font-size:26px;font-weight:800;letter-spacing:.06em;margin:6px 0}
.pay-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pay-method{width:100%;border:0;cursor:pointer}
.ch-logo{width:48px;height:48px;object-fit:contain;display:block;margin:0 auto 6px;background:#fff;border-radius:10px;padding:4px}
.table-fit{width:auto;max-width:100%;table-layout:auto}.table-fit th,.table-fit td{white-space:nowrap;width:auto;padding:10px 12px}
.price-box{display:inline-block;margin:10px 0 0;padding:10px 14px;border-radius:12px;border:1px solid #7eb6dc;background:rgba(2,132,199,.12);color:#0b1f3a;font-weight:800}.price-box.is-hidden{display:none}
.price-box{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;margin:12px 0 4px;padding:12px 16px;border-radius:16px;border:1px solid #7eb6dc;background:linear-gradient(180deg,#e8f4fc,#d7ebf8);color:#0b1f3a;box-shadow:0 8px 20px rgba(2,132,199,.12)}.price-box .price-label{font-size:13px;font-weight:700;color:#0369a1}.price-box strong{font-size:20px;font-weight:800}.price-box.is-hidden{display:none!important}
.status-pill.wait{background:#fef3c7;color:#92400e}
.notif-item{padding:12px 0;border-bottom:1px solid #d7e8f7}.notif-item:last-child{border-bottom:0}
.news-all-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.news-all-grid .news-card{width:100%}@media(min-width:900px){.news-all-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.help-contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.crisp-embed{width:100%;min-height:520px;border:1px solid #d7e8f7;border-radius:18px;overflow:hidden;background:#fff;margin-bottom:14px}.crisp-embed iframe{width:100%;height:520px;border:0;display:block}