:root {
    --waplix-primary: var(--waplix-primary, #146c43);
    --waplix-ink: var(--waplix-text, #18212f);
    --waplix-muted: var(--waplix-text-muted, #667085);
    --waplix-bg: var(--waplix-page-bg, #f5f7fb);
}
body { background: var(--waplix-bg); color: var(--waplix-ink); }
html, body { margin: 0; padding: 0; }
.app-shell { min-height: 100vh; display: flex; background: var(--waplix-page-bg); margin: 0; }
.app-sidebar { width: 250px; background: var(--sidebar-bg); color: var(--text-primary); padding: 18px; }
.app-sidebar a { display: block; color: var(--text-secondary); text-decoration: none; padding: 10px 12px; border-radius: 8px; margin-bottom: 4px; }
.app-sidebar a:hover, .app-sidebar a.active { background: var(--surface-soft); color: var(--text-primary); }
.brand { color: var(--waplix-text, #fff) !important; display: flex !important; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 18px !important; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--waplix-primary); display: inline-flex; align-items: center; justify-content: center; }
.app-main { flex: 1; min-width: 0; }
.app-topbar {
    min-height: 64px;
    --bs-navbar-padding-y: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.stat-card { border: 0; border-radius: 8px; box-shadow: 0 10px 30px rgba(16,24,40,.06); }
.auth-page { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #ecfdf3, #f5f7fb 48%, #eef4ff); }
.auth-card { width: min(440px, calc(100vw - 32px)); border: 0; border-radius: 8px; box-shadow: 0 18px 50px rgba(16,24,40,.12); }
.login-page.auth-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--login-text);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg-gradient);
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
}
.login-ambient-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.login-ambient-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(110px);
    opacity: 0.4;
    transform: translateZ(0);
    will-change: transform;
    animation: loginBlobFloat 24s ease-in-out infinite alternate;
}
.login-ambient-blob-1 {
    width: 520px;
    height: 520px;
    left: -180px;
    bottom: -140px;
    background: var(--login-green);
}
.login-ambient-blob-2 {
    width: 640px;
    height: 640px;
    right: -200px;
    top: -120px;
    background: var(--login-cyan);
    animation-duration: 30s;
}
.login-ambient-blob-3 {
    width: 300px;
    height: 300px;
    left: 40%;
    top: 38%;
    background: var(--login-green);
    opacity: 0.26;
    animation-duration: 20s;
}
@keyframes loginBlobFloat {
    from {
        transform: translate3d(-32px, 22px, 0) scale(1);
    }
    to {
        transform: translate3d(42px, -28px, 0) scale(1.06);
    }
}
html[data-theme="dark"] .login-ambient-blob,
html:not([data-theme]) .login-ambient-blob {
    opacity: 0.22;
    filter: blur(120px);
}
html[data-theme="light"] .login-ambient-blob {
    opacity: 0.36;
    filter: blur(100px);
}
.login-page-layout {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: max(22px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
@media (min-width: 981px) {
    .login-page-layout {
        width: min(1180px, calc(100% - 48px));
        gap: 0;
        padding-top: max(42px, env(safe-area-inset-top));
        padding-bottom: max(42px, env(safe-area-inset-bottom));
    }
}
.login-page *,
.login-page *::before,
.login-page *::after { box-sizing: border-box; }
.auth-back-link {
    position: fixed;
    top: max(22px, env(safe-area-inset-top));
    left: max(22px, env(safe-area-inset-left));
    z-index: 10;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--login-text);
    text-decoration: none;
    background: var(--login-auth-back-bg);
    border: 1px solid var(--login-line);
    box-shadow: var(--login-auth-back-shadow);
    backdrop-filter: var(--login-card-blur, blur(18px) saturate(150%));
    -webkit-backdrop-filter: var(--login-card-blur, blur(18px) saturate(150%));
    transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.auth-back-link span {
    font-size: 1.35rem;
    line-height: 1;
    transform: translateY(-1px);
}
.auth-back-link:hover {
    color: var(--login-green);
    border-color: var(--login-line-hot);
    transform: translateX(-1px);
}
.login-shell {
    flex: 1;
    width: 100%;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 0;
    min-height: 0;
}
.login-card {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr);
    gap: 0;
    overflow: hidden;
    border-radius: 34px;
    background: var(--login-card-accent), var(--login-card);
    border: 1px solid var(--login-line);
    box-shadow: var(--login-card-shadow);
    backdrop-filter: var(--login-card-blur, blur(18px) saturate(150%));
    -webkit-backdrop-filter: var(--login-card-blur, blur(18px) saturate(150%));
}
.login-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    pointer-events: none;
    border-radius: 33px;
    border: 1px solid var(--login-card-inner-border);
}

.add-funds-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:140px;
    height:52px;
    padding:0 22px;
    border-radius:16px;
    background:linear-gradient(135deg,#00ff88,#16d9ff);
    color:#04130d !important;
    font-size:16px;
    font-weight:800;
    text-decoration:none;
    line-height:1;
    white-space:nowrap;
    box-shadow:0 10px 30px rgba(0,255,136,.18);
}

.add-funds-btn:hover{
    transform:translateY(-2px);
    color:#04130d !important;
}

.login-form-panel {
    position: relative;
    z-index: 1;
    padding: 48px;
    background: var(--login-form-panel-bg);
}
.login-brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: 44px;
}
.login-brand img {
    display: block;
    height: 46px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}
.login-heading span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--login-green);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.login-heading span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--login-green);
    box-shadow: 0 0 18px rgba(0,240,106,0.78);
}
.login-heading h1 {
    margin: 14px 0 0;
    color: var(--login-text);
    font-size: clamp(2.15rem, 4vw, 3.9rem);
    line-height: .98;
    font-weight: 800;
    letter-spacing: -0.045em;
}
.login-heading p {
    max-width: 440px;
    margin: 18px 0 0;
    color: var(--login-muted);
    font-size: 1rem;
    line-height: 1.65;
}
.login-alert {
    margin: 28px 0 0;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.12);
    color: #ffe4e9;
    background: rgba(255,59,92,0.12);
}
.login-alert.alert-info {
    color: #bae6fd;
    background: rgba(14, 116, 144, 0.18);
    border-color: rgba(56, 189, 248, 0.28);
}
.login-form {
    margin-top: 30px;
}
.login-field {
    margin-bottom: 18px;
}
.login-field .form-label {
    margin-bottom: 9px;
    color: var(--login-muted);
    font-weight: 600;
}
.login-input-card {
    padding: 6px;
    border-radius: 20px;
    background: var(--login-input-card-bg);
    border: 1px solid var(--login-input-card-border);
    box-shadow: var(--login-input-card-shadow);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.login-field .form-control {
    min-height: 56px;
    border-radius: 16px;
    border: 1px solid var(--login-input-border, var(--login-line));
    color: var(--login-text);
    background: var(--login-input-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.login-field .form-control::placeholder {
    color: var(--login-input-placeholder);
}
.login-field .form-control:focus {
    color: var(--login-text);
    background: var(--login-input-bg-focus);
    border-color: var(--login-line-hot);
    box-shadow: 0 0 0 4px rgba(0,240,106,0.13), 0 0 34px rgba(0,212,255,0.08);
}
.login-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 10px;
}
.login-forgot-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--login-green);
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid rgba(0, 240, 106, 0.24);
    background: rgba(0, 240, 106, 0.1);
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.login-forgot-link:hover {
    color: var(--login-cyan);
    border-color: rgba(0, 212, 255, 0.34);
    background: rgba(0, 240, 106, 0.16);
    transform: translateY(-1px);
}
.login-card.login-card-compact {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
}
.forgot-password-page .login-shell {
    width: 100%;
}
.login-submit {
    width: 100%;
    min-height: 58px;
    margin-top: 8px;
    border: 0;
    border-radius: 20px;
    color: #03140a;
    font-weight: 700;
    background: linear-gradient(135deg, var(--login-green), var(--login-cyan));
    box-shadow: 0 18px 54px rgba(0,240,106,0.22);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.login-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 24px 70px rgba(0,240,106,0.28);
}
.login-register {
    margin: 22px 0 0;
    color: var(--login-soft);
    text-align: center;
}
.login-register a {
    color: var(--login-green);
    font-weight: 700;
    text-decoration: none;
}
.login-register a:hover {
    color: var(--login-cyan);
}
.register-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}
.register-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 999px;
    color: var(--login-muted);
    background: var(--login-mockup-tile-bg);
    border: 1px solid var(--login-mockup-tile-border);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    font-size: .84rem;
    font-weight: 500;
}
.register-benefits span::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--login-green), var(--login-cyan));
    box-shadow: 0 0 16px rgba(0,240,106,0.46);
}
.login-visual-panel {
    position: relative;
    min-height: 640px;
    display: grid;
    place-items: center;
    padding: 54px;
    overflow: hidden;
    background: var(--login-mockup-panel-bg);
}
.login-blob {
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 38% 62% 48% 52%;
    background:
        radial-gradient(circle at 28% 26%, rgba(255,255,255,0.72), transparent 8%),
        linear-gradient(135deg, rgba(0,240,106,0.68), rgba(0,212,255,0.42));
    filter: blur(.2px);
    opacity: .42;
    box-shadow: 0 0 120px rgba(0,240,106,0.22);
}
.login-dashboard-mockup {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    padding: 24px;
    border-radius: 32px;
    background: var(--login-mockup-card-bg);
    border: 1px solid var(--login-mockup-tile-border);
    box-shadow: var(--login-card-shadow);
    backdrop-filter: var(--login-card-blur, blur(18px) saturate(150%));
    -webkit-backdrop-filter: var(--login-card-blur, blur(18px) saturate(150%));
}
.mockup-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}
.mockup-top span,
.mockup-status-grid span,
.mockup-activity small {
    display: block;
    color: var(--login-soft);
    font-size: .78rem;
}
.mockup-top strong {
    display: block;
    margin-top: 5px;
    color: var(--login-text);
    font-size: 1.35rem;
}
.mockup-top small {
    padding: 8px 11px;
    border-radius: 999px;
    color: #03140a;
    font-weight: 700;
    background: linear-gradient(135deg, var(--login-green), var(--login-cyan));
}
.mockup-status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 26px;
}
.mockup-status-grid div,
.mockup-activity {
    border-radius: 22px;
    background: var(--login-mockup-tile-bg);
    border: 1px solid var(--login-mockup-tile-border);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.mockup-status-grid div {
    padding: 16px;
}
.mockup-status-grid strong {
    display: block;
    margin-top: 7px;
    color: var(--login-text);
    font-size: 1.2rem;
}
.mockup-activity {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 16px;
}
.mockup-activity > span {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--login-green), var(--login-cyan));
    box-shadow: 0 14px 34px rgba(0,240,106,0.22);
}
.mockup-activity strong {
    color: var(--login-text);
}
.mockup-chart {
    height: 138px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 18px;
    padding: 18px;
    border-radius: 24px;
    background: var(--login-mockup-chart-bg);
    border: 1px solid var(--login-mockup-tile-border);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.mockup-chart i {
    flex: 1;
    min-width: 0;
    border-radius: 999px 999px 10px 10px;
    background: linear-gradient(180deg, var(--login-cyan), var(--login-green));
    box-shadow: 0 0 24px rgba(0,212,255,0.18);
}
.register-visual-panel {
    background: var(--login-mockup-panel-bg);
}
.trial-mockup-card {
    position: relative;
    z-index: 1;
    width: min(430px, 100%);
    padding: 26px;
    border-radius: 34px;
    background: var(--login-mockup-card-bg);
    border: 1px solid var(--login-mockup-tile-border);
    box-shadow: var(--login-card-shadow);
    backdrop-filter: var(--login-card-blur, blur(18px) saturate(150%));
    -webkit-backdrop-filter: var(--login-card-blur, blur(18px) saturate(150%));
}
.trial-header span {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    color: #03140a;
    font-size: .78rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--login-green), var(--login-cyan));
    box-shadow: 0 14px 38px rgba(0,240,106,0.2);
}
.trial-header strong {
    display: block;
    max-width: 330px;
    margin-top: 18px;
    color: var(--login-text);
    font-size: 2rem;
    line-height: 1.04;
    letter-spacing: -0.04em;
}
.trial-stat {
    margin-top: 24px;
    padding: 20px;
    border-radius: 24px;
    background: var(--login-mockup-tile-bg);
    border: 1px solid var(--login-mockup-tile-border);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.trial-stat small,
.trial-qr-card small {
    display: block;
    color: var(--login-soft);
}
.trial-stat strong {
    display: block;
    margin-top: 5px;
    color: var(--login-text);
    font-size: 2.35rem;
    line-height: 1;
    letter-spacing: -0.045em;
}
.trial-check-list {
    display: grid;
    gap: 11px;
    margin-top: 18px;
}
.trial-check-list div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    color: var(--login-muted);
    background: var(--login-mockup-tile-bg);
    border: 1px solid var(--login-mockup-tile-border);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.trial-check-list i {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--login-check-icon-bg);
}
.trial-check-list i::before {
    content: "✓";
    color: var(--login-green);
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}
.trial-qr-card {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 18px;
    padding: 16px;
    border-radius: 24px;
    background: var(--login-trial-highlight-bg);
    border: 1px solid var(--login-trial-highlight-border);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.trial-qr {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 8px;
    border-radius: 18px;
    background: var(--login-trial-qr-bg);
}
.trial-qr span {
    border-radius: 6px;
    background: var(--login-trial-qr-dot);
}
.trial-qr span:nth-child(2),
.trial-qr span:nth-child(3) {
    background: linear-gradient(135deg, var(--login-green), var(--login-cyan));
}
.trial-qr-card strong {
    display: block;
    color: var(--login-text);
    line-height: 1.25;
}
@media (min-width: 1200px) {
    .login-shell {
        width: min(1180px, calc(100% - 48px));
        padding: 16px 0;
    }
    .login-card {
        grid-template-columns: minmax(330px, .88fr) minmax(380px, 1.02fr);
        border-radius: 30px;
    }
    .login-card::before {
        border-radius: 29px;
    }
    .login-form-panel {
        padding: 26px 36px;
    }
    .login-brand {
        margin-bottom: 20px;
    }
    .login-brand img {
        height: 36px;
        max-width: 172px;
    }
    .login-heading span {
        font-size: .7rem;
    }
    .login-heading h1 {
        margin-top: 8px;
        font-size: clamp(1.75rem, 2.45vw, 2.65rem);
        line-height: 1.05;
        max-width: 430px;
    }
    .login-heading p {
        margin-top: 9px;
        font-size: .9rem;
        line-height: 1.48;
    }
    .login-alert {
        margin-top: 20px;
        border-radius: 16px;
        padding: 12px 14px;
    }
    .login-form {
        margin-top: 16px;
    }
    .login-field {
        margin-bottom: 10px;
    }
    .login-field .form-label {
        margin-bottom: 7px;
        font-size: .9rem;
    }
    .login-field .form-control {
        min-height: 48px;
        border-radius: 16px;
    }
    .login-submit {
        min-height: 50px;
        margin-top: 6px;
        border-radius: 18px;
    }
    .login-register {
        margin-top: 16px;
        font-size: .94rem;
    }
    .register-benefits {
        gap: 7px;
        margin-top: 12px;
    }
    .register-benefits span {
        gap: 7px;
        padding: 6px 8px;
        font-size: .74rem;
    }
    .login-visual-panel {
        min-height: 455px;
        padding: 28px;
    }
    .login-blob {
        width: 300px;
        height: 300px;
    }
    .login-dashboard-mockup {
        width: min(330px, 100%);
        padding: 16px;
        border-radius: 24px;
    }
    .mockup-top strong {
        font-size: 1.18rem;
    }
    .mockup-top small {
        padding: 7px 10px;
    }
    .mockup-status-grid {
        gap: 10px;
        margin-top: 16px;
    }
    .mockup-status-grid div {
        padding: 11px;
        border-radius: 18px;
    }
    .mockup-status-grid strong {
        font-size: 1.04rem;
    }
    .mockup-activity {
        margin-top: 10px;
        padding: 11px;
        border-radius: 18px;
    }
    .mockup-activity > span {
        width: 36px;
        height: 36px;
        border-radius: 14px;
    }
    .mockup-chart {
        height: 82px;
        gap: 10px;
        margin-top: 10px;
        padding: 12px;
        border-radius: 20px;
    }
    .trial-mockup-card {
        width: min(330px, 100%);
        padding: 16px;
        border-radius: 24px;
    }
    .trial-header span {
        padding: 7px 10px;
        font-size: .72rem;
    }
    .trial-header strong {
        max-width: 290px;
        margin-top: 10px;
        font-size: 1.38rem;
    }
    .trial-stat {
        margin-top: 12px;
        padding: 12px;
        border-radius: 20px;
    }
    .trial-stat strong {
        font-size: 1.55rem;
    }
    .trial-check-list {
        gap: 6px;
        margin-top: 10px;
    }
    .trial-check-list div {
        gap: 10px;
        padding: 7px 9px;
        border-radius: 15px;
        font-size: .82rem;
    }
    .trial-check-list i {
        width: 20px;
        height: 20px;
    }
    .trial-qr-card {
        gap: 12px;
        margin-top: 10px;
        padding: 10px;
        border-radius: 20px;
    }
    .trial-qr {
        width: 58px;
        height: 58px;
        border-radius: 15px;
    }
    .register-page .login-shell {
        padding: 10px 0;
    }
    .register-page .login-form-panel {
        padding: 22px 34px;
    }
    .register-page .login-brand {
        margin-bottom: 16px;
    }
    .register-page .login-brand img {
        height: 34px;
    }
    .register-page .login-heading span {
        font-size: .66rem;
    }
    .register-page .login-heading h1 {
        max-width: 460px;
        font-size: clamp(1.55rem, 2vw, 2.18rem);
        line-height: 1.04;
    }
    .register-page .login-heading p {
        max-width: 470px;
        margin-top: 7px;
        font-size: .84rem;
        line-height: 1.42;
    }
    .register-page .register-benefits {
        gap: 6px;
        margin-top: 10px;
    }
    .register-page .register-benefits span {
        padding: 5px 8px;
        font-size: .69rem;
    }
    .register-page .register-benefits span::before {
        width: 6px;
        height: 6px;
    }
    .register-page .login-form {
        margin-top: 13px;
    }
    .register-page .login-field {
        margin-bottom: 8px;
    }
    .register-page .login-field .form-label {
        margin-bottom: 5px;
        font-size: .84rem;
    }
    .register-page .login-field .form-control {
        min-height: 44px;
        border-radius: 15px;
    }
    .register-page .login-submit {
        min-height: 47px;
        margin-top: 4px;
    }
    .register-page .login-register {
        margin-top: 11px;
        font-size: .88rem;
    }
    .register-page .login-visual-panel {
        min-height: 430px;
        padding: 22px;
    }
    .register-page .trial-mockup-card {
        width: min(305px, 100%);
        padding: 14px;
    }
    .register-page .trial-header span {
        padding: 6px 9px;
        font-size: .66rem;
    }
    .register-page .trial-header strong {
        margin-top: 8px;
        font-size: 1.2rem;
    }
    .register-page .trial-stat {
        margin-top: 10px;
        padding: 10px;
    }
    .register-page .trial-stat strong {
        font-size: 1.35rem;
    }
    .register-page .trial-check-list {
        gap: 5px;
        margin-top: 8px;
    }
    .register-page .trial-check-list div {
        padding: 6px 8px;
        font-size: .76rem;
    }
    .register-page .trial-check-list i {
        width: 18px;
        height: 18px;
    }
    .register-page .trial-qr-card {
        margin-top: 8px;
        padding: 8px;
    }
    .register-page .trial-qr {
        width: 50px;
        height: 50px;
        gap: 5px;
        padding: 7px;
    }
    .register-page .trial-qr-card strong {
        font-size: .88rem;
    }
    .register-page .trial-qr-card small {
        font-size: .76rem;
    }
}
@media (max-width: 980px) {
    .login-page-layout {
        width: min(100% - 24px, 560px);
        gap: 14px;
        padding-top: max(12px, env(safe-area-inset-top));
    }

    /* Auth split layout must stay full width — old login card rules break the form column */
    .auth-split-page .login-page-layout {
        width: min(100% - 24px, 100%) !important;
        max-width: none !important;
    }

    .auth-split-page .auth-form-side {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .auth-split-page .auth-form-card {
        display: block !important;
        width: min(100%, 420px);
        visibility: visible !important;
        opacity: 1 !important;
    }
    .auth-back-link {
        position: relative;
        top: auto;
        left: auto;
        flex-shrink: 0;
        align-self: flex-start;
        margin: 0;
    }
    .login-shell {
        width: 100%;
        padding: 0;
        align-items: stretch;
    }
    .login-card {
        grid-template-columns: 1fr;
        border-radius: 30px;
    }
    .login-form-panel {
        padding: 34px;
    }
    .login-brand {
        margin-bottom: 34px;
    }
    .login-brand img {
        height: 40px;
        max-width: 170px;
    }
    .login-visual-panel {
        display: none;
    }
    .register-benefits {
        justify-content: center;
    }
}
@media (max-width: 520px) {
    .login-page.auth-page {
        background: var(--bg-gradient);
    }
    .login-page-layout {
        width: calc(100% - max(20px, env(safe-area-inset-left) + env(safe-area-inset-right)));
        gap: 12px;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .auth-back-link {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }
    .login-shell {
        align-items: stretch;
        padding: 0;
    }
    .login-card {
        border-radius: 26px;
    }
    .login-form-panel {
        padding: 24px 18px;
    }
    .login-brand {
        width: 100%;
        justify-content: center;
        margin-bottom: 28px;
    }
    .login-brand img {
        height: 38px;
        max-width: 160px;
    }
    .login-heading {
        text-align: center;
    }
    .login-heading span {
        justify-content: center;
    }
    .login-heading h1 {
        font-size: clamp(2rem, 11vw, 2.9rem);
        letter-spacing: -0.04em;
    }
    .login-heading p {
        font-size: .96rem;
    }
    .login-form {
        margin-top: 26px;
    }
    .register-benefits {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 22px;
    }
    .register-benefits span {
        width: auto;
        min-width: 0;
        justify-content: flex-start;
        padding: 9px 10px;
        font-size: .78rem;
        line-height: 1.35;
    }
    .login-field .form-control {
        min-height: 54px;
        border-radius: 17px;
    }
    .login-submit {
        min-height: 56px;
        border-radius: 18px;
    }
    .login-register {
        font-size: .95rem;
    }
}
.btn-primary { background: var(--waplix-primary); border-color: var(--waplix-primary); }
.btn-primary:hover { background: #0f5132; border-color: #0f5132; }
.table td, .table th { vertical-align: middle; }
.qr-box { max-width: 360px; width: 100%; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; background: #fff; }
.code-block { background: #101828; color: #e2e8f0; border-radius: 8px; padding: 14px; overflow-x: auto; }
.pairing-code { font-size: 2rem; letter-spacing: .12em; font-weight: 800; background: #ecfdf3; color: #0f5132; border: 1px solid #bbf7d0; border-radius: 8px; padding: 16px; text-align: center; }
.copy-btn { vertical-align: middle; }
input::placeholder,
textarea::placeholder {
    color: rgba(203, 213, 225, 0.65) !important;
    opacity: 1 !important;
}
input:focus::placeholder,
textarea:focus::placeholder {
    color: rgba(203, 213, 225, 0.75) !important;
}
.waplix-toast-region {
    position: fixed;
    inset: 0;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    pointer-events: none;
    isolation: isolate;
}
.waplix-toast-region:has(.waplix-flash) {
    pointer-events: auto;
}
.waplix-toast-region:not(:has(.waplix-flash)) {
    display: none !important;
}
.waplix-toast-region::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 14, 0.64);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.28s ease;
}
.waplix-toast-region:has(.waplix-flash)::before {
    opacity: 1;
    pointer-events: auto;
    animation: waplixToastBackdropIn 0.34s ease both;
}
.waplix-toast-stack {
    position: relative;
    z-index: 1;
    width: min(420px, calc(100vw - 40px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    pointer-events: none;
}
.waplix-toast-region:empty,
.waplix-toast-stack:empty {
    display: none;
}
.waplix-flash {
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 30px 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    overflow: hidden;
    pointer-events: auto;
    border-radius: 24px;
    color: var(--text-primary);
    background: var(--surface-elevated);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 48px rgba(0, 240, 106, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: waplixToastCenterIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.waplix-flash.is-hiding {
    animation: waplixToastCenterOut 0.3s ease both;
}
.waplix-flash-success {
    color: #0f3d28;
    background: linear-gradient(135deg, rgba(217, 255, 229, 0.98), rgba(185, 247, 212, 0.94));
    border-color: rgba(0, 200, 90, 0.28);
}
.waplix-flash-danger {
    color: #6b1424;
    background: linear-gradient(135deg, rgba(255, 221, 228, 0.98), rgba(255, 190, 204, 0.94));
    border-color: rgba(220, 38, 38, 0.22);
}
.waplix-flash-warning {
    color: #5c3b08;
    background: linear-gradient(135deg, rgba(255, 241, 205, 0.98), rgba(255, 222, 151, 0.94));
    border-color: rgba(217, 119, 6, 0.22);
}
.waplix-flash-info {
    color: #0c4a5e;
    background: linear-gradient(135deg, rgba(210, 248, 255, 0.98), rgba(175, 235, 247, 0.94));
    border-color: rgba(14, 165, 233, 0.22);
}
.waplix-flash-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    font-weight: 900;
    color: #13864a;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 28px rgba(20, 134, 74, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}
.waplix-flash-success .waplix-flash-icon::before { content: "✓"; }
.waplix-flash-danger .waplix-flash-icon::before { content: "!"; }
.waplix-flash-warning .waplix-flash-icon::before { content: "!"; }
.waplix-flash-info .waplix-flash-icon::before { content: "i"; }
.waplix-flash-danger .waplix-flash-icon {
    color: #b21d34;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 16px 32px rgba(178,29,52,0.14), inset 0 0 0 1px rgba(255,255,255,0.8);
}
.waplix-flash-warning .waplix-flash-icon {
    color: #b36b00;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 16px 32px rgba(179,107,0,0.14), inset 0 0 0 1px rgba(255,255,255,0.8);
}
.waplix-flash-info .waplix-flash-icon {
    color: #0086a6;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 16px 32px rgba(0,134,166,0.14), inset 0 0 0 1px rgba(255,255,255,0.8);
}
.waplix-flash-body {
    min-width: 0;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
}
.waplix-flash-title {
    color: inherit;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.waplix-flash-message {
    color: inherit;
    opacity: 0.88;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 320px;
}
.waplix-flash-danger .waplix-flash-message,
.waplix-flash-warning .waplix-flash-message,
.waplix-flash-info .waplix-flash-message,
.waplix-flash-success .waplix-flash-message {
    color: inherit;
    opacity: 0.82;
}
.waplix-flash .btn-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    padding: 0;
    opacity: .45;
    background: none;
    border: 0;
    filter: none;
    box-shadow: none;
}
.waplix-flash .btn-close:hover {
    opacity: .8;
}
.waplix-flash .btn-close::before {
    content: "x";
    display: block;
    color: currentColor;
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1;
}
.waplix-flash-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #00F06A, #00D4FF);
    transform-origin: left center;
    animation: waplixToastProgress 2s linear forwards;
}
.waplix-flash-danger .waplix-flash-progress {
    background: linear-gradient(90deg, #FF3B5C, #ff7a90);
}
.waplix-flash-warning .waplix-flash-progress {
    background: linear-gradient(90deg, #FFC857, #00D4FF);
}
@keyframes waplixToastCenterIn {
    from { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.94); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes waplixToastCenterOut {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.96); }
}
@keyframes waplixToastBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes waplixToastProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}
@keyframes waplixSpin {
    to { transform: rotate(360deg); }
}

.app-main:has(.dashboard-page),
.app-main:has(.instance-page),
.app-main:has(.developer-page),
.app-main:has(.billing-page),
.app-main:has(.topup-page),
.app-main:has(.settings-page),
.app-main:has(.messages-page) {
    background: var(--bg-gradient);
}
.app-main:has(.dashboard-page) .app-topbar,
.app-main:has(.instance-page) .app-topbar,
.app-main:has(.developer-page) .app-topbar,
.app-main:has(.billing-page) .app-topbar,
.app-main:has(.topup-page) .app-topbar,
.app-main:has(.settings-page) .app-topbar,
.app-main:has(.messages-page) .app-topbar {
    color: var(--text-primary);
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
}
.app-main:has(.dashboard-page) .navbar-brand,
.app-main:has(.dashboard-page) .text-muted,
.app-main:has(.instance-page) .navbar-brand,
.app-main:has(.instance-page) .text-muted,
.app-main:has(.developer-page) .navbar-brand,
.app-main:has(.developer-page) .text-muted,
.app-main:has(.billing-page) .navbar-brand,
.app-main:has(.billing-page) .text-muted,
.app-main:has(.settings-page) .navbar-brand,
.app-main:has(.settings-page) .text-muted,
.app-main:has(.messages-page) .navbar-brand,
.app-main:has(.messages-page) .text-muted {
    color: var(--text-secondary) !important;
}
.dashboard-page {
    --dash-bg: var(--bg-primary);
    --dash-panel: var(--surface);
    --dash-panel-soft: var(--surface-soft);
    --dash-line: var(--border);
    --dash-line-hot: var(--border-strong);
    --dash-green: var(--accent);
    --dash-cyan: var(--accent-2);
    --dash-text: var(--text-primary);
    --dash-muted: var(--text-secondary);
    --dash-soft: var(--text-muted);
    min-height: calc(100vh - 104px);
    margin: -8px -4px 0;
    padding: 18px;
    color: var(--dash-text);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.instance-page {
    --dash-bg: var(--bg-primary);
    --dash-panel: var(--surface);
    --dash-panel-soft: var(--surface-soft);
    --dash-line: var(--border);
    --dash-line-hot: var(--border-strong);
    --dash-green: var(--accent);
    --dash-cyan: var(--accent-2);
    --dash-text: var(--text-primary);
    --dash-muted: var(--text-secondary);
    --dash-soft: var(--text-muted);
    min-height: calc(100vh - 104px);
    margin: -8px -4px 0;
    padding: 18px;
    color: var(--dash-text);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.developer-page {
    --dash-bg: var(--bg-primary);
    --dash-panel: var(--surface);
    --dash-panel-soft: var(--surface-soft);
    --dash-line: var(--border);
    --dash-line-hot: var(--border-strong);
    --dash-green: var(--accent);
    --dash-cyan: var(--accent-2);
    --dash-text: var(--text-primary);
    --dash-muted: var(--text-secondary);
    --dash-soft: var(--text-muted);
    min-height: calc(100vh - 104px);
    margin: -8px -4px 0;
    padding: 18px;
    color: var(--dash-text);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.billing-page {
    --dash-bg: var(--bg-primary);
    --dash-panel: var(--surface);
    --dash-panel-soft: var(--surface-soft);
    --dash-line: var(--border);
    --dash-line-hot: var(--border-strong);
    --dash-green: var(--accent);
    --dash-cyan: var(--accent-2);
    --dash-text: var(--text-primary);
    --dash-muted: var(--text-secondary);
    --dash-soft: var(--text-muted);
    min-height: calc(100vh - 104px);
    margin: -8px -4px 0;
    padding: 18px;
    color: var(--dash-text);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.dashboard-page a { text-decoration: none; }
.instance-page a { text-decoration: none; }
.developer-page a { text-decoration: none; }
.billing-page a { text-decoration: none; }
.billing-page.topup-page,
.compact-payment-page.topup-page {
    max-width: 1500px;
    margin: -8px auto 0 !important;
    padding: 16px !important;
    color: var(--dash-text);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.billing-page.topup-page {
    overflow-x: hidden;
}
.billing-page.topup-page .payment-layout,
.billing-page.topup-page .payment-deposit-grid,
.billing-page.topup-page .payment-method-grid {
    min-width: 0;
}
.billing-page.topup-page .payment-hero,
.compact-payment-page.topup-page .payment-hero {
    margin: 0 0 16px !important;
}
.billing-page.topup-page .billing-card,
.billing-page.topup-page .payment-status-card,
.compact-payment-page.topup-page .billing-card,
.compact-payment-page.topup-page .payment-status-card {
    border-radius: 24px;
    overflow: hidden;
}
.dashboard-hero,
.dash-stat-card,
.dash-chart-card,
.dash-action-card,
.dash-panel,
.instance-page-head,
.instance-limit-card,
.instance-empty-card,
.instance-list-panel,
.create-copy-panel,
.create-form-card,
.create-help-card {
    border: 1px solid var(--dash-line);
    background: var(--waplix-panel-bg);
    box-shadow: var(--waplix-card-shadow);
    backdrop-filter: blur(18px);
}
.developer-card,
.developer-hero {
    border: 1px solid var(--dash-line);
    background: var(--waplix-panel-bg);
    box-shadow: var(--waplix-card-shadow);
    backdrop-filter: blur(18px);
}
.developer-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 22px;
    border-radius: 26px;
}
.developer-hero h1 {
    margin: 8px 0 0;
    color: var(--dash-text);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.045em;
}
.developer-hero p {
    max-width: 780px;
    margin: 10px 0 0;
    color: var(--dash-muted);
    line-height: 1.55;
}
.developer-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}
.developer-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.developer-main-grid,
.developer-code-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
    gap: 14px;
    margin-top: 14px;
}
.developer-card {
    border-radius: 24px;
    padding: 18px;
}
.developer-card .form-label,
.developer-test-form label {
    color: var(--dash-muted);
    font-weight: 700;
}
.secret-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
}
.secret-row .form-control,
.developer-test-form .form-control {
    min-height: 48px;
    border-radius: 16px;
    border: 1px solid var(--dash-line);
    color: var(--dash-text);
    background: rgba(255,255,255,0.055);
}
.regenerate-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}
.regenerate-form small,
.base-url-card p,
.developer-empty-key p {
    color: var(--dash-soft);
}
.developer-copy-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 17px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.075);
}
.developer-copy-box + p {
    margin: 14px 0 8px;
}
.developer-copy-box code {
    color: var(--dash-green);
    overflow-wrap: anywhere;
}
.developer-copy-box button,
.endpoint-row button {
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 999px;
    color: var(--dash-text);
    background: rgba(255,255,255,0.055);
    font-weight: 800;
    padding: 7px 10px;
}
.endpoints-card {
    margin-top: 14px;
}
.endpoint-table {
    display: grid;
    gap: 8px;
}
.endpoint-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) minmax(170px, .8fr) 70px;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}
.endpoint-head {
    color: var(--dash-soft);
    background: transparent;
    border: 0;
    padding-block: 4px;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.method-pill {
    width: max-content;
    min-width: 54px;
    border-radius: 999px;
    padding: 6px 9px;
    color: #03140a;
    text-align: center;
    font-weight: 900;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
}
.method-get { background: linear-gradient(135deg, var(--dash-cyan), #60a5fa); }
.endpoint-row code {
    color: var(--dash-green);
    overflow-wrap: anywhere;
}
.endpoint-row > span:not(.method-pill) {
    color: var(--dash-muted);
}
.developer-code-card {
    margin-top: 0;
}
.developer-code-card pre,
.webhook-json-card pre {
    max-height: 310px;
}
.developer-test-form {
    display: grid;
    gap: 11px;
}
.developer-test-form label {
    display: grid;
    gap: 7px;
}
.developer-test-form textarea.form-control {
    min-height: 96px;
}
.developer-test-form .dash-primary-btn {
    position: relative;
}
.developer-test-form .dash-primary-btn.is-loading {
    cursor: wait;
    opacity: .82;
}
.developer-test-form .dash-primary-btn.is-loading::before {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: -3px;
    border-radius: 50%;
    border: 2px solid rgba(3,20,10,0.3);
    border-top-color: #03140a;
    animation: waplixSpin .7s linear infinite;
}
.developer-response-panel {
    margin: 13px 0 0;
    padding: 14px;
    border-radius: 18px;
    color: var(--waplix-code-text);
    background: var(--waplix-code-bg);
    border: 1px solid var(--border-strong);
    min-height: 118px;
    max-height: 310px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.developer-response-panel.muted {
    color: var(--dash-soft);
    border-color: var(--border);
}
.developer-response-panel.success {
    color: var(--waplix-code-text);
    border-color: var(--border-strong);
}
.developer-response-panel.error {
    color: var(--danger);
    border-color: rgba(255, 59, 92, 0.36);
}
.webhook-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 14px;
}
.webhook-steps div {
    display: grid;
    gap: 7px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.075);
}
.webhook-steps span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #03140a;
    font-weight: 900;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
}
.webhook-steps strong {
    color: var(--dash-muted);
    font-size: .82rem;
}
.recent-request-list {
    display: grid;
    gap: 9px;
}
.recent-request-list div,
.developer-empty-line {
    padding: 11px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}
.recent-request-list strong,
.recent-request-list span,
.recent-request-list small {
    display: block;
}
.recent-request-list strong {
    color: var(--dash-text);
    overflow-wrap: anywhere;
}
.recent-request-list span,
.recent-request-list small,
.developer-empty-line {
    color: var(--dash-soft);
}
.sdk-card {
    margin-top: 14px;
}
.sdk-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 11px;
}
.sdk-item {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 14px 10px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.075);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sdk-item:hover {
    transform: translateY(-2px);
    border-color: var(--dash-line-hot);
    box-shadow: 0 18px 54px rgba(0,0,0,0.24), 0 0 26px rgba(0,240,106,0.08);
}
.sdk-item img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}
.sdk-item span {
    color: var(--dash-muted);
    font-weight: 800;
    font-size: .8rem;
}
.developer-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.developer-empty-key {
    display: grid;
    gap: 8px;
}
.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: 18px;
    align-items: stretch;
    padding: 22px;
    border-radius: 26px;
    overflow: hidden;
}
.dashboard-hero-copy h1 {
    margin: 8px 0 0;
    color: var(--dash-text);
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.045em;
}
.dashboard-hero-copy p {
    max-width: 620px;
    margin: 12px 0 0;
    color: var(--dash-muted);
    line-height: 1.58;
}
.dash-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dash-green);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.dash-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dash-green);
    box-shadow: 0 0 16px rgba(0,240,106,0.78);
}
.dashboard-service-section {
    margin-top: 28px;
}
.dash-service-kicker {
    margin-bottom: 14px;
}
.dashboard-service-section .dash-stats-grid {
    margin-top: 0;
}
.dashboard-service-section .dash-chart-grid,
.dashboard-service-section .dashboard-lower-grid,
.dashboard-service-section .dash-service-links {
    margin-top: 14px;
}
.dash-service-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.dash-service-link-card {
    position: relative;
    min-height: 118px;
    padding: 14px 14px 16px;
    border-radius: 18px;
    color: var(--dash-text);
    background: var(--card-gradient), var(--surface-soft);
    border: 1px solid var(--border);
    box-shadow: var(--waplix-shadow-soft);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dash-service-link-card:hover {
    color: var(--dash-text);
    transform: translateY(-2px);
    border-color: var(--dash-line-hot);
    box-shadow: var(--shadow);
}
.dash-service-link-icon {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 12px;
    color: var(--dash-green);
    background: rgba(0,240,106,0.12);
    border: 1px solid rgba(0,240,106,0.2);
}
.dash-service-link-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}
.dash-service-link-card strong,
.dash-service-link-card small {
    display: block;
}
.dash-service-link-card strong {
    font-size: .92rem;
    color: var(--dash-text);
}
.dash-service-link-card small {
    margin-top: 4px;
    color: var(--dash-soft);
    font-size: .76rem;
    line-height: 1.45;
}
.dash-service-link-card em {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--dash-green);
    font-style: normal;
    font-weight: 900;
}
.dash-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.dash-primary-btn,
.dash-secondary-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 15px;
    padding: 10px 15px;
    font-weight: 700;
    transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.dash-primary-btn {
    color: #03140a !important;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
    box-shadow: 0 16px 46px rgba(0,240,106,0.2);
}
.dash-secondary-btn {
    color: var(--text-primary);
    border: 1px solid var(--border);
    background: var(--surface-soft);
}
.dash-primary-btn:hover,
.dash-secondary-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    border-color: var(--dash-line-hot);
}
.dashboard-hero-card {
    position: relative;
    padding: 18px;
    border-radius: 22px;
    background: var(--card-gradient), var(--surface-soft);
    border: 1px solid var(--border);
}
.dash-plan-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
}
.dash-plan-row span,
.dashboard-hero-card span,
.dash-stat-card p,
.dash-stat-card small,
.dash-card-head p,
.billing-list span,
.dash-instance-row small,
.dash-instance-head,
.dash-action-card small,
.message-empty-chart p {
    color: var(--dash-soft);
}
.dash-plan-row strong {
    color: var(--dash-text);
    font-size: 1.35rem;
}
.dash-status-pill {
    display: inline-flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 10px;
    color: #8affbd;
    font-style: normal;
    font-size: .74rem;
    font-weight: 800;
    text-transform: capitalize;
    background: rgba(0,240,106,0.1);
    border: 1px solid rgba(0,240,106,0.28);
}
.dash-status-pill.trial,
.dash-status-pill.active,
.dash-status-pill.connected { color: #8affbd; background: rgba(0,240,106,0.1); border-color: rgba(0,240,106,0.28); }
.dash-status-pill.qr,
.dash-status-pill.starting { color: #ffe69a; background: rgba(255,200,87,0.1); border-color: rgba(255,200,87,0.3); }
.dash-status-pill.pairing { color: #c4b5fd; background: rgba(124,58,237,0.13); border-color: rgba(168,85,247,0.26); }
.dash-status-pill.danger { color: #ffb3c1; background: rgba(255,59,92,0.1); border-color: rgba(255,59,92,0.3); }
.dash-status-pill.muted { color: #cbd5e1; background: rgba(148,163,184,0.1); border-color: rgba(148,163,184,0.2); }

.subscription-expired-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0;
}

.subscription-expired-alert .dash-primary-btn {
  width: auto;
  min-height: 40px;
  padding: 0 16px;
  white-space: nowrap;
}

.settings-page {
  color: var(--text-primary);
}

.app-main:has(.settings-page) {
  background: var(--bg-gradient);
}

.settings-page a {
  text-decoration: none;
}

.settings-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: center;
  gap: 22px;
  padding: 26px;
  border: 1px solid rgba(0,240,106,0.20);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(0,240,106,0.12), rgba(0,212,255,0.07)),
    rgba(15,23,42,0.86);
  box-shadow: 0 24px 70px rgba(0,0,0,0.28);
}

.settings-hero h1 {
  margin: 10px 0 8px;
  font-size: clamp(2rem, 4vw, 3.9rem);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.settings-hero p,
.settings-card-head p {
  margin: 0;
  color: #cbd5e1;
}

.settings-profile-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(8,20,33,0.78);
}

.settings-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: #05110b;
  font-size: 1.35rem;
  font-weight: 900;
  background: linear-gradient(135deg, #00f06a, #00d4ff);
  box-shadow: 0 16px 34px rgba(0,240,106,0.18);
}

.settings-profile-summary strong,
.settings-profile-summary small,
.settings-profile-summary em {
  display: block;
}

.settings-profile-summary strong {
  font-size: 1.05rem;
}

.settings-profile-summary small {
  color: #94a3b8;
  word-break: break-word;
}

.settings-profile-summary em {
  margin-top: 6px;
  color: #00f06a;
  font-style: normal;
  font-weight: 800;
  text-transform: capitalize;
}

.settings-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.settings-nav {
  position: sticky;
  top: 86px;
  align-self: start;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(15,23,42,0.78);
}

.settings-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  color: #cbd5e1;
  font-weight: 800;
  border: 1px solid transparent;
}

.settings-nav a:hover,
.settings-nav a:focus {
  color: #f8fafc;
  border-color: rgba(0,240,106,0.28);
  background: rgba(0,240,106,0.08);
}

.settings-nav a.danger {
  color: #ffb3c1;
}

.settings-content {
  display: grid;
  gap: 18px;
}

.settings-card {
  padding: 22px;
  border-radius: 26px;
  border: 1px solid rgba(148,163,184,0.16);
  background:
    linear-gradient(145deg, rgba(15,23,42,0.92), rgba(8,20,33,0.88)),
    rgba(15,23,42,0.86);
  box-shadow: 0 22px 58px rgba(0,0,0,0.22);
}

.settings-card:target {
  border-color: rgba(0,240,106,0.38);
  box-shadow: 0 24px 64px rgba(0,240,106,0.08);
}

.settings-card-head {
  margin-bottom: 16px;
}

.settings-card-head h2 {
  margin: 7px 0 6px;
  font-size: 1.32rem;
  font-weight: 800;
}

.settings-form {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.settings-form label {
  display: grid;
  gap: 7px;
  color: #cbd5e1;
  font-size: 0.86rem;
  font-weight: 800;
}

.settings-form .form-control {
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.20);
  color: #f8fafc;
  background: rgba(15,23,42,0.88);
  box-shadow: none;
}

.settings-form .form-control:focus {
  border-color: rgba(0,240,106,0.62);
  box-shadow: 0 0 0 4px rgba(0,240,106,0.12);
}

.settings-form select.form-control {
  color-scheme: dark;
}

.settings-form .dash-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 0 !important;
  border-radius: 16px;
  color: #05110b !important;
  font-weight: 900;
  background: linear-gradient(135deg, #00f06a, #00d4ff) !important;
  box-shadow: 0 18px 38px rgba(0,240,106,0.18), 0 12px 28px rgba(0,212,255,0.10);
  text-shadow: none;
}

.settings-form .dash-primary-btn:hover,
.settings-form .dash-primary-btn:focus {
  color: #05110b !important;
  transform: translateY(-1px);
  box-shadow: 0 22px 46px rgba(0,240,106,0.24), 0 14px 34px rgba(0,212,255,0.14);
}

.settings-page .settings-form button.dash-primary-btn,
.settings-page .settings-form .dash-primary-btn[type="submit"] {
  appearance: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  min-height: 52px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: #05110b !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #00f06a, #00d4ff) !important;
  box-shadow: 0 18px 38px rgba(0,240,106,0.18), 0 12px 28px rgba(0,212,255,0.10) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.settings-page .settings-form button.dash-primary-btn:hover,
.settings-page .settings-form button.dash-primary-btn:focus {
  color: #05110b !important;
  background: linear-gradient(135deg, #20ff83, #16dcff) !important;
  box-shadow: 0 22px 46px rgba(0,240,106,0.24), 0 14px 34px rgba(0,212,255,0.14) !important;
}

.settings-toggle-list {
  display: grid;
  gap: 10px;
}

.settings-switch-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 54px 0;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(15,23,42,0.62);
}

.settings-switch-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-switch-row i {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: rgba(148,163,184,0.18);
  border: 1px solid rgba(148,163,184,0.20);
}

.settings-switch-row i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #94a3b8;
  transition: transform .2s ease, background .2s ease;
}

.settings-switch-row input:checked + i {
  background: linear-gradient(135deg, rgba(0,240,106,0.82), rgba(0,212,255,0.72));
}

.settings-switch-row input:checked + i::after {
  transform: translateX(22px);
  background: #05110b;
}

.settings-check {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row;
  align-items: center;
  gap: 10px !important;
}

.settings-check input {
  width: 18px;
  height: 18px;
  accent-color: #00f06a;
}

.danger-zone {
  border-color: rgba(255,59,92,0.30);
  background:
    linear-gradient(145deg, rgba(255,59,92,0.08), rgba(15,23,42,0.90)),
    rgba(15,23,42,0.88);
}

.settings-danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #ff3b5c, #ff7a90);
  box-shadow: 0 18px 40px rgba(255,59,92,0.18);
}

@media (max-width: 991px) {
  .settings-hero,
  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    padding: 10px;
    scrollbar-width: none;
  }

  .settings-nav::-webkit-scrollbar {
    display: none;
  }

  .settings-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 575px) {
  .settings-hero,
  .settings-card {
    border-radius: 22px;
    padding: 18px;
  }

  .settings-profile-summary {
    align-items: flex-start;
  }

  .settings-form .dash-primary-btn,
  .settings-danger-btn {
    width: 100%;
  }

  .subscription-expired-alert {
    display: grid;
  }

  .subscription-expired-alert .dash-primary-btn {
    width: 100%;
  }
}
.dash-hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 16px;
}
.dash-hero-metrics div,
.dash-stat-card,
.billing-list div {
    border-radius: 18px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
}
.dash-hero-metrics div {
    padding: 13px;
}
.dash-hero-metrics strong {
    display: block;
    margin-top: 5px;
    color: var(--dash-text);
    font-size: 1.12rem;
}
.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 14px;
}
.dash-stat-card {
    display: flex;
    gap: 12px;
    min-width: 0;
    padding: 15px;
}
.dash-stat-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 15px;
    color: #03140a;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
}
.dash-stat-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}
.dash-stat-icon.green,
.dash-stat-icon.yellow { color: #03140a; }
.dash-stat-icon.yellow { background: linear-gradient(135deg, #ffc857, var(--dash-green)); }
.dash-stat-icon.blue,
.dash-stat-icon.cyan { background: linear-gradient(135deg, var(--dash-cyan), #60a5fa); color: #03140a; }
.dash-stat-card p {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
}
.dash-stat-card strong {
    display: block;
    color: var(--dash-text);
    font-size: 1.85rem;
    line-height: 1.05;
    letter-spacing: -0.035em;
}
.dash-stat-card small {
    display: block;
    margin-top: 4px;
}
.dash-chart-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
    align-items: start;
}
.dash-chart-card {
    min-height: 238px;
    max-height: 238px;
    overflow: hidden;
    padding: 16px;
    border-radius: 22px;
}
.dash-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
.dash-card-head h2 {
    margin: 0;
    color: var(--dash-text);
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dash-card-head p {
    margin: 3px 0 0;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dash-card-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 13px;
    color: var(--dash-green);
    background: rgba(0,240,106,0.12);
    border: 1px solid rgba(0,240,106,0.18);
}
.dash-card-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}
.dash-card-icon.green { color: var(--dash-green); background: rgba(0,240,106,0.12); border-color: rgba(0,240,106,0.18); }
.dash-card-icon.purple { color: #c084fc; background: rgba(126,34,206,0.18); border-color: rgba(168,85,247,0.18); }
.dash-card-icon.blue { color: #7dd3fc; background: rgba(14,165,233,0.16); border-color: rgba(14,165,233,0.2); }
.dash-card-icon.cyan { color: var(--dash-cyan); background: rgba(0,212,255,0.13); border-color: rgba(0,212,255,0.2); }
.donut-wrap {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 18px auto 0;
}
.dash-donut {
    width: 150px;
    height: 150px;
    transform: rotate(-90deg);
}
.dash-donut circle {
    fill: none;
    stroke-width: 16;
    stroke-linecap: round;
}
.dash-donut circle:first-child { stroke: rgba(148,163,184,0.18); }
.dash-donut circle:last-child {
    stroke: url("#slotGradient");
    stroke: var(--dash-green);
    filter: drop-shadow(0 0 10px rgba(0,240,106,0.28));
}
.donut-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}
.donut-center strong {
    color: var(--dash-text);
    font-size: 1.1rem;
}
.donut-center span {
    color: var(--dash-soft);
    font-size: .72rem;
}
.line-chart {
    position: relative;
    margin-top: 14px;
}
.line-chart svg {
    width: 100%;
    height: 130px;
    overflow: visible;
}
.chart-grid-lines line {
    stroke: rgba(148,163,184,0.12);
    stroke-dasharray: 2 4;
}
.line-chart polyline {
    fill: none;
    stroke: var(--dash-green);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 10px rgba(0,240,106,0.34));
}
.chart-tooltip {
    position: absolute;
    right: 10px;
    top: 38px;
    min-width: 92px;
    padding: 8px 9px;
    border-radius: 10px;
    color: var(--dash-text);
    background: rgba(5,8,15,0.88);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 12px 34px rgba(0,0,0,0.24);
}
.chart-tooltip span,
.chart-tooltip strong {
    display: block;
    font-size: .68rem;
}
.chart-tooltip strong { color: var(--dash-green); }
.chart-labels {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    color: rgba(148,163,184,0.55);
    font-size: .6rem;
}
.status-bars {
    height: 158px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: end;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(148,163,184,0.14);
}
.status-bar-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
}
.status-bar-item div {
    min-height: 46px;
}
.status-bar-item span {
    display: block;
    color: var(--dash-soft);
    font-size: .62rem;
}
.status-bar-item strong {
    color: var(--dash-text);
}
.status-bar-item i {
    display: block;
    min-height: 12px;
    border-radius: 999px 999px 8px 8px;
    background: var(--dash-green);
}
.status-bar-item i.cyan { background: var(--dash-cyan); }
.status-bar-item i.yellow { background: #ffc857; }
.status-bar-item i.red { background: #ff3b5c; }
.message-empty-chart {
    min-height: 160px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}
.message-empty-chart span.message-empty-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
    border-radius: 18px;
    display: inline-grid;
    place-items: center;
    color: var(--dash-green);
    background: linear-gradient(135deg, rgba(0,240,106,0.18), rgba(0,212,255,0.12));
    border: 1px solid rgba(0,240,106,0.2);
}
.message-empty-chart span.message-empty-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
}
.message-empty-chart strong {
    color: var(--dash-text);
}
.message-empty-chart p {
    max-width: 230px;
    margin: 6px auto 0;
    font-size: .84rem;
}
.dash-message-activity-card {
    display: flex;
    flex-direction: column;
    min-height: 238px;
    max-height: 238px;
    height: 238px;
}
.dash-message-activity-card .dash-card-head,
.dash-message-activity-card .dash-message-picker,
.dash-message-activity-card .dash-message-error,
.dash-message-activity-card .dash-message-view-all {
    flex-shrink: 0;
}
.dash-message-picker {
    display: grid;
    gap: 4px;
    margin-top: 8px;
}
.dash-message-picker label {
    color: var(--dash-soft);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dash-message-instance-picker {
    position: relative;
}
.dash-message-picker-trigger {
    width: 100%;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: var(--waplix-shadow-soft);
    box-sizing: border-box;
}
.dash-message-picker-trigger:hover,
.dash-message-picker-trigger[aria-expanded="true"] {
    border-color: var(--border-strong);
    background: var(--surface-elevated);
}
.dash-message-picker-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.dash-message-picker-trigger svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    color: var(--accent);
    transition: transform .18s ease;
}
.dash-message-picker-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.dash-message-picker-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 132px;
    overflow-y: auto;
    padding: 5px;
    border-radius: 12px;
    background: var(--waplix-dropdown-bg);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow);
    z-index: 30;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 240, 106, 0.55) rgba(255, 255, 255, 0.08);
}
.dash-message-picker-menu[hidden] {
    display: none !important;
}
.dash-message-picker-menu::-webkit-scrollbar {
    width: 5px;
}
.dash-message-picker-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}
.dash-message-picker-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 240, 106, 0.85), rgba(0, 212, 255, 0.72));
    border-radius: 999px;
}
.dash-message-picker-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
}
.dash-message-picker-option:hover,
.dash-message-picker-option.is-active {
    background: var(--waplix-accent-green-soft);
}
.dash-message-picker-option strong {
    font-size: .62rem;
    font-weight: 850;
    color: var(--text-primary);
}
.dash-message-picker-option span {
    font-size: .56rem;
    font-weight: 600;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.dash-message-picker-native {
    display: none !important;
}
.dash-message-error {
    margin-top: 5px;
    padding: 5px 7px;
    border-radius: 8px;
    color: #b45309;
    background: rgba(255, 200, 87, 0.12);
    border: 1px solid rgba(255, 200, 87, 0.28);
    font-size: .56rem;
    font-weight: 700;
    line-height: 1.35;
}
.dash-message-log-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: 6px;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 240, 106, 0.55) rgba(255, 255, 255, 0.08);
}
.dash-message-log-scroll::-webkit-scrollbar {
    width: 5px;
}
.dash-message-log-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}
.dash-message-log-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 240, 106, 0.85), rgba(0, 212, 255, 0.72));
    border-radius: 999px;
}
.dash-message-log-empty {
    min-height: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    padding: 6px;
}
.dash-message-log-empty strong {
    color: var(--dash-soft);
    font-size: .62rem;
    font-weight: 700;
}
.dash-message-log-item {
    padding: 5px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 5px;
}
.dash-message-log-item:last-child {
    margin-bottom: 0;
}
.dash-message-log-top {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.dash-message-log-top small {
    margin-left: auto;
    min-width: 0;
    color: var(--dash-soft);
    font-size: .52rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-message-log-top .log-badge {
    font-size: .52rem;
    padding: 3px 6px;
    min-height: 17px;
}
.dash-message-log-item p {
    margin: 0;
    color: var(--dash-text);
    font-size: .6rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-message-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--text-primary);
    font-size: .58rem;
    font-weight: 800;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    align-self: flex-start;
}
.dash-message-view-all:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: var(--surface-elevated);
}
.dash-message-empty {
    min-height: 120px;
}
.dash-action-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.dash-action-card {
    position: relative;
    min-height: 136px;
    padding: 16px;
    border-radius: 20px;
    color: var(--dash-text);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dash-action-card:hover {
    color: var(--dash-text);
    transform: translateY(-2px);
    border-color: var(--dash-line-hot);
    box-shadow: 0 28px 82px rgba(0,0,0,0.3), 0 0 44px rgba(0,240,106,0.08);
}
.dash-action-card > span {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    color: #03140a;
    font-weight: 900;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
}
.dash-action-card strong,
.dash-action-card small {
    display: block;
}
.dash-action-card strong {
    margin-top: 13px;
    color: var(--dash-text);
}
.dash-action-card em {
    position: absolute;
    right: 16px;
    top: 18px;
    color: var(--dash-green);
    font-style: normal;
}
.dashboard-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr);
    gap: 14px;
    margin-top: 14px;
    align-items: stretch;
}
.recent-panel,
.dashboard-lower-grid > .billing-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    align-self: stretch;
    width: 100%;
}
.recent-panel .dash-section-head,
.billing-panel .dash-section-head {
    flex-shrink: 0;
}
.recent-panel .dash-empty-state {
    flex: 1 1 auto;
    min-height: 220px;
}
.recent-panel .dash-instance-head {
    flex-shrink: 0;
}
.recent-panel .dash-instance-table {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.recent-panel::after {
    content: "";
    flex: 1 1 auto;
    min-height: 0;
}
.billing-panel .dash-warning-card {
    flex-shrink: 0;
}
.billing-panel .billing-list {
    flex: 1 1 auto;
    min-height: 0;
}
.billing-panel .dash-primary-btn {
    flex-shrink: 0;
    margin-top: auto;
}
.dash-panel {
    border-radius: 22px;
    padding: 17px;
}
.dash-section-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.dash-section-head h2 {
    margin: 5px 0 0;
    color: var(--dash-text);
    font-size: 1.15rem;
    font-weight: 800;
}
.dash-section-head a {
    color: var(--dash-green);
    font-weight: 700;
}
.dash-empty-state {
    min-height: 220px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    border-radius: 20px;
    background: rgba(255,255,255,0.035);
    border: 1px dashed rgba(148,163,184,0.24);
}
.dash-empty-state strong {
    color: var(--dash-text);
    font-size: 1.2rem;
}
.dash-empty-state p {
    color: var(--dash-soft);
    margin: 8px 0 14px;
}
.dash-instance-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.dash-instance-scroll {
    --dash-instance-visible-count: 3;
    --dash-instance-row-height: 70px;
    --dash-instance-row-gap: 10px;
    --dash-instance-scroll-height: calc(
        var(--dash-instance-visible-count) * var(--dash-instance-row-height)
        + (var(--dash-instance-visible-count) - 1) * var(--dash-instance-row-gap)
    );
    display: grid;
    gap: var(--dash-instance-row-gap);
    flex: 0 0 auto;
    height: var(--dash-instance-scroll-height);
    max-height: var(--dash-instance-scroll-height);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 240, 106, 0.5) rgba(255, 255, 255, 0.06);
    padding-right: 6px;
    min-width: 0;
    border-radius: 14px;
}
.dash-instance-scroll::-webkit-scrollbar {
    width: 8px;
}
.dash-instance-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    margin: 4px 0;
}
.dash-instance-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dash-green), var(--dash-cyan));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 0 12px rgba(0, 240, 106, 0.22);
}
html[data-theme="light"] .dash-instance-scroll {
    scrollbar-color: rgba(0, 150, 95, 0.5) rgba(16, 82, 70, 0.1);
}
html[data-theme="light"] .dash-instance-scroll::-webkit-scrollbar-track {
    background: rgba(16, 82, 70, 0.1);
}
html[data-theme="light"] .dash-instance-scroll::-webkit-scrollbar-thumb {
    box-shadow: 0 0 10px rgba(0, 190, 120, 0.18);
}
html[data-theme="dark"] .dash-instance-scroll,
html:not([data-theme]) .dash-instance-scroll {
    scrollbar-color: rgba(0, 240, 106, 0.5) rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .dash-instance-scroll::-webkit-scrollbar-track,
html:not([data-theme]) .dash-instance-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
}
.dash-instance-row {
    display: grid;
    grid-template-columns: 1.2fr .9fr .7fr .8fr 1.1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}
.dash-instance-item {
    background: var(--waplix-row-bg);
    border: 1px solid var(--waplix-row-border);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dash-instance-item:hover {
    transform: translateY(-1px);
    border-color: var(--dash-line-hot);
    box-shadow: var(--waplix-row-hover-shadow);
}
.dash-instance-head {
    padding: 4px 12px;
    background: transparent;
    border: 0;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dash-soft);
}
.dash-instance-name-cell strong,
.dash-instance-name-cell small,
.dash-instance-row strong,
.dash-instance-row small {
    display: block;
}
.dash-instance-name-cell strong,
.dash-instance-row strong {
    color: var(--dash-text);
    font-size: .92rem;
}
.dash-instance-name-cell small,
.dash-instance-row small {
    color: var(--dash-soft);
    font-size: .78rem;
    margin-top: 2px;
}
.dash-instance-row > span {
    color: var(--dash-muted);
    min-width: 0;
}
.dash-instance-phone {
    font-variant-numeric: tabular-nums;
}
.dash-instance-status em {
    font-style: normal;
}
.dash-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}
.dash-row-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    color: var(--dash-text);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .76rem;
    font-weight: 800;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.09);
    text-decoration: none;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.dash-row-actions a:hover {
    color: #03140a;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
    border-color: transparent;
    transform: translateY(-1px);
}
.dash-row-actions a[href*="messages"] {
    color: #8affbd;
    border-color: rgba(0,240,106,0.24);
    background: rgba(0,240,106,0.08);
}
.dash-row-actions a[href*="webhook"] {
    color: #9ae8ff;
    border-color: rgba(0,212,255,0.24);
    background: rgba(0,212,255,0.08);
}
.recent-panel .dash-section-head a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid rgba(0, 240, 106, 0.22);
    background: rgba(0, 240, 106, 0.08);
    transition: background .16s ease, border-color .16s ease;
}
.recent-panel .dash-section-head a:hover {
    background: rgba(0, 240, 106, 0.14);
    border-color: rgba(0, 240, 106, 0.34);
}
.billing-list {
    display: grid;
    gap: 9px;
    margin-bottom: 14px;
}
.billing-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
}
.billing-list strong {
    color: var(--dash-text);
}
.dash-warning-card {
    margin-bottom: 12px;
    padding: 13px;
    border-radius: 18px;
    color: #ffe6ad;
    background: rgba(255,200,87,0.1);
    border: 1px solid rgba(255,200,87,0.28);
}
.dash-warning-card p {
    margin: 6px 0 0;
    color: #f8ddb0;
    font-size: .88rem;
}
.instance-page-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 22px;
    border-radius: 26px;
}
.instance-page-head h1,
.create-copy-panel h1 {
    margin: 8px 0 0;
    color: var(--dash-text);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.045em;
}
.instance-page-head p,
.create-copy-panel > p,
.create-card-head p,
.create-limit-state p {
    max-width: 680px;
    margin: 10px 0 0;
    color: var(--dash-muted);
    line-height: 1.55;
}
.instance-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.instance-stat-card {
    min-height: 112px;
}
.instance-limit-card {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-top: 14px;
    padding: 16px;
    border-radius: 22px;
    border-color: rgba(255,200,87,0.28);
    background:
        linear-gradient(135deg, rgba(255,200,87,0.13), rgba(0,212,255,0.045)),
        rgba(15,23,42,0.82);
}
.instance-limit-card strong,
.instance-empty-card h2,
.create-card-head h2,
.create-limit-state h2 {
    color: var(--dash-text);
}
.instance-limit-card p {
    margin: 5px 0 0;
    color: #f8ddb0;
}
.instance-empty-card {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 10px;
    margin-top: 14px;
    padding: 42px 22px;
    border-radius: 26px;
}
.instance-empty-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #03140a;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
    box-shadow: 0 18px 52px rgba(0,240,106,0.22);
}
.instance-empty-icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
}
.instance-empty-card p {
    max-width: 560px;
    margin: 0;
    color: var(--dash-muted);
}
.instance-empty-card small {
    max-width: 620px;
    color: var(--dash-soft);
}
.instance-list-panel {
    margin-top: 14px;
    padding: 17px;
    border-radius: 24px;
}
.instance-list-toolbar {
    margin-bottom: 12px;
}
.instance-list-search-wrap {
    position: relative;
    display: block;
}
.instance-list-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--dash-muted);
    pointer-events: none;
}
.instance-list-search {
    width: 100%;
    min-height: 44px;
    padding-left: 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.instance-list-search:focus {
    border-color: rgba(0, 240, 106, 0.34);
    box-shadow: 0 0 0 3px rgba(0, 240, 106, 0.12);
}
.instance-list-scroll-shell {
    --instance-list-visible-rows: 3;
    --instance-list-row-size: 86px;
    --instance-list-head-size: 34px;
    --instance-list-gap: 9px;
    max-height: calc(
        var(--instance-list-head-size) +
        var(--instance-list-gap) * var(--instance-list-visible-rows) +
        var(--instance-list-row-size) * var(--instance-list-visible-rows)
    );
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 240, 106, 0.42) rgba(255, 255, 255, 0.05);
}
.instance-list-scroll-shell::-webkit-scrollbar {
    width: 7px;
}
.instance-list-scroll-shell::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
}
.instance-list-scroll-shell::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dash-green), var(--dash-cyan));
    border-radius: 999px;
}
.instance-list-search-empty {
    margin-top: 12px;
    padding: 16px;
    border-radius: 16px;
    text-align: center;
    color: var(--dash-soft);
    font-size: .88rem;
    font-weight: 700;
    border: 1px dashed rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.03);
}
.instance-count-pill,
.webhook-pill {
    display: inline-flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 10px;
    color: var(--dash-soft);
    font-style: normal;
    font-size: .72rem;
    font-weight: 800;
    background: rgba(148,163,184,0.1);
    border: 1px solid rgba(148,163,184,0.18);
}
.webhook-pill.enabled {
    color: #8affbd;
    background: rgba(0,240,106,0.1);
    border-color: rgba(0,240,106,0.26);
}
.instance-list {
    display: grid;
    gap: 9px;
}
.instance-list-row {
    display: grid;
    grid-template-columns: 1.25fr .8fr .68fr .72fr .9fr 1.25fr;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border-radius: 18px;
    background: var(--waplix-row-bg);
    border: 1px solid var(--waplix-row-border);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.instance-list-row:not(.instance-list-head):hover {
    transform: translateY(-1px);
    border-color: var(--dash-line-hot);
    box-shadow: var(--waplix-row-hover-shadow);
}
.instance-list-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 4px 13px;
    color: var(--dash-soft);
    background: rgba(5, 8, 15, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.instance-name-cell strong,
.instance-name-cell small,
.instance-dates small {
    display: block;
}
.instance-card-meta {
    display: contents;
}
.instance-name-cell strong {
    color: var(--dash-text);
}
.instance-name-cell small,
.instance-dates small,
.instance-phone {
    color: var(--dash-soft);
}
.instance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}
.instance-actions a,
.instance-actions button {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 9px;
    color: var(--dash-text);
    font-size: .76rem;
    font-weight: 800;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.09);
}
.instance-actions a:hover {
    color: #03140a;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
}
.instance-actions form {
    margin: 0;
}
.instance-actions button {
    color: #ffb3c1;
    background: rgba(255,59,92,0.08);
    border-color: rgba(255,59,92,0.24);
}
.instance-actions a[href*="#connect"] {
    color: #8affbd;
    border-color: rgba(0,240,106,0.24);
    background: rgba(0,240,106,0.08);
}
.instance-actions a[href*="#connect"]:hover {
    color: #03140a;
}
.create-instance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, .86fr);
    gap: 14px;
    align-items: start;
}
.create-copy-panel,
.create-form-card {
    padding: 22px;
    border-radius: 26px;
}
.create-steps {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}
.create-steps div {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 4px 12px;
    align-items: center;
    padding: 13px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.075);
}
.create-steps span {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #03140a;
    font-weight: 900;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
}
.create-steps strong {
    color: var(--dash-text);
}
.create-steps small {
    color: var(--dash-soft);
}
.create-help-card {
    margin-top: 14px;
    padding: 16px;
    border-radius: 22px;
}
.create-help-card strong {
    color: var(--dash-text);
}
.create-help-card ul {
    display: grid;
    gap: 7px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
}
.create-help-card li {
    color: var(--dash-muted);
}
.create-help-card li::before {
    content: "✓";
    margin-right: 8px;
    color: var(--dash-green);
}
.create-help-card p {
    margin: 0;
    color: var(--dash-soft);
}
.create-form-card {
    position: sticky;
    top: 88px;
}
.create-card-head h2 {
    margin: 12px 0 0;
    font-size: 1.45rem;
    font-weight: 800;
}
.create-plan-list {
    display: grid;
    gap: 9px;
    margin: 18px 0;
}
.create-plan-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 17px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.075);
}
.create-plan-list span {
    color: var(--dash-soft);
}
.create-plan-list strong {
    color: var(--dash-text);
}
.create-instance-form {
    margin: 0;
}
.create-limit-state {
    display: grid;
    justify-items: start;
    gap: 10px;
}
.create-limit-state > span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    color: #2b1200;
    font-weight: 900;
    background: linear-gradient(135deg, #ffc857, #ff8a3b);
}
.create-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}
.detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .82fr);
    gap: 14px;
    align-items: stretch;
    padding: 22px;
    border-radius: 26px;
    border: 1px solid var(--dash-line);
    background: var(--waplix-detail-hero-bg);
    box-shadow: var(--waplix-card-shadow);
}
.detail-hero-copy h1 {
    margin: 8px 0 0;
    color: var(--dash-text);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.045em;
}
.detail-hero-copy p {
    margin: 10px 0 0;
    color: var(--dash-muted);
}
.detail-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin-top: 16px;
}
.detail-hero-meta > span,
.detail-copy-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--dash-muted);
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.09);
}
.detail-copy-btn {
    color: var(--dash-green);
    font-weight: 800;
}
.detail-reconnect-note {
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 16px;
    color: #b8f5ff;
    background: linear-gradient(135deg, rgba(0,240,106,0.12), rgba(0,212,255,0.08));
    border: 1px solid rgba(0,212,255,0.18);
}
.detail-action-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: center;
}
.detail-action-panel button,
.webhook-url-row button,
.create-instance-form button {
    border: 0;
}
.detail-action-panel .dash-primary-btn.reconnect {
    box-shadow: 0 18px 54px rgba(0,212,255,0.18), 0 0 0 1px rgba(0,240,106,0.08) inset;
}
.dash-secondary-btn.warning {
    color: #ffe69a;
    border-color: rgba(255,200,87,0.28);
    background: rgba(255,200,87,0.08);
}
.dash-secondary-btn.danger {
    color: #ffb3c1;
    border-color: rgba(255,59,92,0.28);
    background: rgba(255,59,92,0.08);
}
.detail-grid {
    display: grid;
    grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
    gap: 14px;
    margin-top: 14px;
}
.detail-grid-wide {
    grid-template-columns: minmax(0, 1.32fr) minmax(340px, .68fr);
}
.detail-card {
    border-radius: 24px;
    padding: 18px;
    border: 1px solid var(--dash-line);
    background: var(--waplix-panel-bg);
    box-shadow: var(--waplix-card-shadow);
}
.detail-summary-list {
    display: grid;
    gap: 9px;
    margin: 0;
}
.detail-summary-list div {
    display: grid;
    grid-template-columns: 135px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 12px;
    border-radius: 16px;
    background: var(--waplix-row-bg);
    border: 1px solid var(--waplix-row-border);
}
.detail-summary-list dt {
    color: var(--dash-soft);
    font-weight: 700;
}
.detail-summary-list dd {
    margin: 0;
    color: var(--dash-text);
    min-width: 0;
}
.detail-summary-list code {
    color: var(--dash-green);
}
.detail-card-copy {
    color: var(--dash-muted);
    margin: 0 0 14px;
}
.detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.detail-tabs button {
    min-height: 40px;
    border: 1px solid var(--dash-line);
    border-radius: 999px;
    padding: 8px 13px;
    color: var(--dash-muted);
    font-weight: 800;
    background: rgba(255,255,255,0.045);
}
.detail-tabs button.active {
    color: #03140a;
    border-color: transparent;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
}
.detail-qr-box {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 360px;
    margin: 0 auto;
    padding: 18px;
    border-radius: 24px;
    background: rgba(5,8,15,0.38);
    border: 1px solid rgba(0,240,106,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 42px rgba(0,240,106,0.06);
}
.detail-qr-box img {
    width: min(280px, 100%);
    border-radius: 18px;
    background: #fff;
    padding: 10px;
}
.detail-qr-box small {
    color: var(--dash-soft);
    text-align: center;
}
.detail-qr-loading {
    display: grid;
    justify-items: center;
    gap: 10px;
    color: var(--dash-muted);
}
.detail-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.14);
    border-top-color: var(--dash-green);
    animation: detailSpin .9s linear infinite;
}
@keyframes detailSpin { to { transform: rotate(360deg); } }
.detail-alert {
    width: 100%;
    padding: 10px 12px;
    border-radius: 16px;
    color: var(--dash-muted);
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
}
.detail-alert.info { color: #b8f5ff; background: rgba(0,212,255,0.09); border-color: rgba(0,212,255,0.22); }
.detail-alert.success { color: #b9ffd5; background: rgba(0,240,106,0.09); border-color: rgba(0,240,106,0.24); }
.detail-alert.warning { color: #ffe6ad; background: rgba(255,200,87,0.1); border-color: rgba(255,200,87,0.25); }
.detail-alert.muted { color: var(--dash-muted); }
.experimental-note {
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 18px;
    color: #ffe6ad;
    background: rgba(255,200,87,0.1);
    border: 1px solid rgba(255,200,87,0.24);
}
.experimental-note p {
    margin: 4px 0 0;
}
.detail-form {
    display: grid;
    gap: 13px;
}
.detail-form .form-label {
    color: var(--dash-muted);
    font-weight: 700;
}
.detail-form .form-control {
    min-height: 48px;
    border-radius: 16px;
    border: 1px solid var(--dash-line);
    color: var(--dash-text);
    background: rgba(255,255,255,0.055);
}
.detail-form .form-control:focus {
    color: var(--dash-text);
    background: rgba(255,255,255,0.075);
    border-color: var(--dash-line-hot);
    box-shadow: 0 0 0 4px rgba(0,240,106,0.12);
}
.detail-form textarea.form-control {
    min-height: 108px;
}
.pairing-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}
.detail-pairing-code {
    margin: 14px 0;
    color: var(--dash-green);
    background: rgba(0,240,106,0.1);
    border-color: rgba(0,240,106,0.24);
}
.webhook-url-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}
.webhook-group-title {
    margin-top: 4px;
    color: var(--dash-green);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
}
.webhook-toggle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.webhook-toggle {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.075);
    overflow: visible;
}
.webhook-toggle-main {
    flex: 1 1 auto;
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
    cursor: pointer;
}
.webhook-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.toggle-track {
    flex: 0 0 38px;
    width: 38px;
    height: 22px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(148,163,184,0.22);
    transition: background .18s ease, box-shadow .18s ease;
    box-sizing: border-box;
    overflow: hidden;
}
.toggle-track i {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: transform .18s ease, background .18s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.webhook-toggle input:checked + .toggle-track {
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
    box-shadow: 0 0 24px rgba(0,240,106,0.16);
}
.webhook-toggle input:checked + .toggle-track i {
    transform: translateX(16px);
    background: #03140a;
}
.webhook-toggle em {
    min-width: 0;
    color: var(--dash-muted);
    font-style: normal;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
}
.webhook-info {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 50%;
    color: var(--dash-soft);
    background: rgba(255,255,255,0.045);
    font-size: .76rem;
    font-weight: 900;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.webhook-info:hover,
.webhook-info:focus,
.webhook-info.show-tooltip {
    color: var(--dash-green);
    border-color: rgba(0,240,106,0.36);
    box-shadow: 0 0 20px rgba(0,240,106,0.12);
}
.webhook-info::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    top: calc(100% + 9px);
    z-index: 50;
    width: max-content;
    max-width: 260px;
    min-width: 210px;
    padding: 10px 12px;
    border-radius: 12px;
    color: #e7f8ff;
    text-align: left;
    line-height: 1.45;
    font-size: .78rem;
    font-weight: 600;
    white-space: normal;
    background: rgba(5,8,15,0.96);
    border: 1px solid rgba(0,212,255,0.28);
    box-shadow: 0 18px 54px rgba(0,0,0,0.36), 0 0 28px rgba(0,212,255,0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.webhook-info:hover::after,
.webhook-info:focus::after,
.webhook-info.show-tooltip::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.webhook-helper {
    margin: 0;
    color: var(--dash-soft);
    font-size: .88rem;
}
.webhook-save-mobile {
    width: max-content;
}
.detail-side-stack {
    display: grid;
    gap: 14px;
    align-content: start;
    align-self: start;
}
.send-test-card {
    align-self: start;
}
.detail-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.detail-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.detail-link-grid a {
    min-height: 48px;
    display: flex;
    align-items: center;
    border-radius: 16px;
    padding: 10px 12px;
    color: var(--dash-text);
    font-weight: 800;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
}
.detail-link-grid a:hover {
    color: #03140a;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
}
.detail-section-subtitle {
    margin: 6px 0 0;
    color: var(--dash-soft);
    font-size: .9rem;
    font-weight: 500;
}
.recent-message-card .dash-section-head {
    margin-bottom: 12px;
}
.recent-message-scroll {
    height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    padding-right: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,240,106,0.42) rgba(255,255,255,0.05);
}
.recent-message-scroll::-webkit-scrollbar {
    width: 7px;
}
.recent-message-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
}
.recent-message-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dash-green), var(--dash-cyan));
    border-radius: 999px;
}
.message-log-empty {
    min-height: 160px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    text-align: center;
    color: var(--dash-text);
    font-weight: 800;
    border: 1px dashed rgba(148,163,184,0.2);
    border-radius: 18px;
    background: rgba(255,255,255,0.035);
}
.message-log-empty span {
    display: block;
    max-width: 300px;
    color: var(--dash-soft);
    font-size: .88rem;
    font-weight: 500;
}
.message-log-table-wrap {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
}
.message-log-table {
    width: 100%;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0 8px;
    color: var(--dash-text);
}
.message-log-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 9px 10px;
    color: var(--dash-soft);
    background: var(--surface-elevated, rgba(5,8,15,0.94));
    border-bottom: 1px solid var(--border);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.message-log-table tbody td {
    padding: 10px;
    color: var(--dash-muted);
    background: rgba(255,255,255,0.045);
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: .78rem;
    font-weight: 650;
    vertical-align: middle;
    white-space: nowrap;
}
.message-log-table tbody td:first-child {
    border-left: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px 0 0 14px;
}
.message-log-table tbody td:last-child {
    border-right: 1px solid rgba(255,255,255,0.07);
    border-radius: 0 14px 14px 0;
}
.message-log-preview {
    max-width: 220px;
    color: var(--dash-text) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.log-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.log-badge.direction.incoming {
    color: #042612;
    background: linear-gradient(135deg, var(--dash-green), rgba(0,240,106,0.72));
}
.log-badge.direction.outgoing {
    color: #03141a;
    background: linear-gradient(135deg, var(--dash-cyan), rgba(0,184,217,0.82));
}
.log-badge.status.success {
    color: #042612;
    background: rgba(0,240,106,0.82);
}
.log-badge.status.failed {
    color: #fff;
    background: rgba(255,59,92,0.86);
}
.log-badge.status.muted {
    color: var(--dash-soft);
    background: rgba(148,163,184,0.16);
    border: 1px solid rgba(148,163,184,0.18);
}
.message-log-item {
    border-radius: 18px;
    padding: 12px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.message-log-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.message-log-top small {
    margin-left: auto;
    min-width: 0;
    color: var(--dash-soft);
    font-size: .74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message-log-item strong {
    display: block;
    color: var(--dash-text);
    font-size: .92rem;
    line-height: 1.45;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.direction-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.direction-badge.incoming {
    color: #042612;
    background: linear-gradient(135deg, var(--dash-green), rgba(0,240,106,0.72));
}
.direction-badge.outgoing {
    color: #03141a;
    background: linear-gradient(135deg, var(--dash-cyan), rgba(0,212,255,0.72));
}
.message-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}
.message-log-meta span {
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--dash-soft);
    background: rgba(15,23,42,0.62);
    border: 1px solid rgba(255,255,255,0.06);
    font-size: .72rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.billing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 16px;
    align-items: stretch;
    padding: 22px;
    border-radius: 30px;
    border: 1px solid rgba(0,240,106,0.18);
    background:
        radial-gradient(circle at 84% 18%, rgba(0,240,106,0.18), transparent 34%),
        linear-gradient(135deg, rgba(0,240,106,0.09), rgba(0,212,255,0.045)),
        var(--dash-panel);
    box-shadow: 0 26px 90px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
}
.billing-hero h1 {
    margin: 8px 0 0;
    max-width: 760px;
    color: var(--dash-text);
    font-size: clamp(2rem, 3.4vw, 3.45rem);
    line-height: .98;
    font-weight: 850;
    letter-spacing: -0.055em;
}
.billing-hero p,
.billing-section-head p,
.instructions-card p,
.billing-note {
    margin: 10px 0 0;
    color: var(--dash-muted);
    font-size: .96rem;
    line-height: 1.6;
}
.billing-hero-summary,
.billing-card,
.billing-plan-card {
    border: 1px solid var(--dash-line);
    background:
        linear-gradient(135deg, rgba(0,240,106,0.07), rgba(0,212,255,0.035)),
        var(--dash-panel);
    box-shadow: 0 20px 70px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045);
    backdrop-filter: blur(18px);
}
.billing-hero-summary {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 150px;
    padding: 18px;
    border-radius: 26px;
}
.billing-hero-summary span,
.billing-facts-grid span,
.billing-plan-form label,
.billing-table th {
    color: var(--dash-soft);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.billing-hero-summary strong {
    color: var(--dash-text);
    font-size: 1.55rem;
    font-weight: 850;
}
.billing-alert {
    display: grid;
    gap: 5px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid rgba(148,163,184,0.16);
    color: var(--dash-muted);
    background: rgba(255,255,255,0.045);
}
.billing-alert strong {
    color: var(--dash-text);
    font-size: .95rem;
}
.billing-alert.danger {
    color: #ffd7df;
    background: rgba(255,59,92,0.1);
    border-color: rgba(255,59,92,0.28);
}
.billing-alert.warning,
.billing-alert.sandbox {
    color: #ffe8b6;
    background: rgba(255,200,87,0.1);
    border-color: rgba(255,200,87,0.28);
}
.billing-alert.sandbox {
    color: #e8fbff;
    background: rgba(0,212,255,0.1);
    border-color: rgba(0,212,255,0.25);
}
.billing-alert.info {
    color: #e8fbff;
    background: rgba(0,212,255,0.1);
    border-color: rgba(0,212,255,0.25);
}
.billing-alert.success {
    color: #d9fce8;
    background: rgba(0,240,106,0.1);
    border-color: rgba(0,240,106,0.28);
}
.billing-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .8fr);
    gap: 14px;
    margin-top: 14px;
}
.billing-card {
    border-radius: 26px;
    padding: 18px;
}
.subscription-card {
    grid-row: span 2;
}
.billing-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.billing-facts-grid div {
    min-width: 0;
    padding: 13px;
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.075);
}
.billing-facts-grid strong {
    display: block;
    margin-top: 5px;
    color: var(--dash-text);
    font-size: 1rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.billing-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .68rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.billing-status.success {
    color: #042612;
    background: linear-gradient(135deg, var(--dash-green), rgba(0,240,106,0.68));
}
.billing-status.info {
    color: #03141a;
    background: linear-gradient(135deg, var(--dash-cyan), rgba(0,212,255,0.66));
}
.billing-status.warning {
    color: #261802;
    background: linear-gradient(135deg, #ffc857, #ffe29a);
}
.billing-status.danger {
    color: #fff;
    background: linear-gradient(135deg, #ff3b5c, #ff7a90);
}
.billing-status.muted {
    color: var(--dash-soft);
    background: rgba(148,163,184,0.14);
    border: 1px solid rgba(148,163,184,0.18);
}
.billing-usage-visual {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-top: 10px;
}
.usage-ring {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(15,23,42,0.96) 58%, transparent 60%),
        conic-gradient(var(--dash-green) var(--usage), rgba(255,255,255,0.08) 0);
    box-shadow: 0 0 36px rgba(0,240,106,0.12);
}
.usage-ring span {
    color: var(--dash-text);
    font-size: 1.5rem;
    font-weight: 900;
}
.usage-ring small {
    color: var(--dash-soft);
    font-weight: 800;
}
.billing-usage-visual strong {
    color: var(--dash-text);
    font-size: 1.1rem;
    font-weight: 850;
}
.billing-progress {
    height: 10px;
    margin: 11px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148,163,184,0.13);
}
.billing-progress i {
    display: block;
    width: var(--usage);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--dash-green), var(--dash-cyan));
    box-shadow: 0 0 24px rgba(0,240,106,0.16);
}
.billing-usage-visual p {
    margin: 0;
    color: var(--dash-soft);
}
.billing-unlimited-list,
.manual-method-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.billing-unlimited-list span,
.manual-method-pills span {
    padding: 8px 10px;
    border-radius: 999px;
    color: var(--dash-muted);
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.075);
    font-size: .8rem;
    font-weight: 750;
}
.billing-unlimited-list strong {
    color: var(--dash-green);
}
.manual-instruction-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}
.manual-instruction-list div {
    display: grid;
    gap: 5px;
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.075);
}
.manual-instruction-list strong {
    color: var(--dash-text);
    font-size: .82rem;
}
.manual-instruction-list span {
    color: var(--dash-soft);
    font-size: .82rem;
    line-height: 1.45;
}
.billing-steplets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}
.billing-steplets div {
    min-height: 78px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.075);
}
.billing-steplets span {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: #03140a;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
    font-size: .78rem;
    font-weight: 900;
}
.billing-steplets strong {
    display: block;
    margin-top: 10px;
    color: var(--dash-text);
    font-size: .86rem;
}
.billing-section-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
    margin: 22px 0 12px;
}
.billing-section-head h2 {
    margin: 2px 0 0;
    color: var(--dash-text);
    font-size: 1.55rem;
    font-weight: 850;
}
.billing-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.billing-plan-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
    padding: 18px;
    border-radius: 28px;
}
.billing-plan-card.popular {
    border-color: rgba(0,240,106,0.36);
    box-shadow: 0 24px 84px rgba(0,0,0,0.32), 0 0 34px rgba(0,240,106,0.08);
}
.billing-plan-card.current {
    border-color: rgba(0,212,255,0.32);
}
.billing-plan-card.focused {
    outline: 2px solid rgba(0, 240, 106, 0.45);
    outline-offset: 3px;
}
.plan-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.plan-card-top h3 {
    margin: 0;
    color: var(--dash-text);
    font-size: 1.22rem;
    font-weight: 850;
}
.plan-card-top p {
    margin: 7px 0 0;
    color: var(--dash-soft);
    font-size: .86rem;
    line-height: 1.55;
}
.plan-badges {
    display: grid;
    align-content: start;
    gap: 6px;
}
.plan-badges em {
    width: max-content;
    padding: 6px 9px;
    border-radius: 999px;
    color: #03140a;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
    font-size: .66rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}
.billing-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--dash-text);
}
.billing-price span {
    font-size: 2.25rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.045em;
}
.billing-price small {
    color: var(--dash-soft);
    font-weight: 800;
}
.billing-feature-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.billing-feature-list li {
    position: relative;
    padding-left: 24px;
    color: var(--dash-muted);
    font-size: .88rem;
    font-weight: 650;
}
.billing-feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
    box-shadow: 0 0 16px rgba(0,240,106,0.18);
}
.billing-plan-form {
    display: grid;
    gap: 10px;
    margin-top: auto;
}
.billing-plan-form label {
    display: grid;
    gap: 6px;
}
.billing-plan-form .form-select,
.billing-plan-form .form-control {
    min-height: 46px;
    border-radius: 15px;
    border: 1px solid var(--dash-line);
    color: var(--dash-text);
    background-color: rgba(255,255,255,0.055);
}
.billing-plan-form .form-select:focus,
.billing-plan-form .form-control:focus {
    border-color: var(--dash-line-hot);
    box-shadow: 0 0 0 4px rgba(0,240,106,0.1);
}
.billing-primary-btn,
.billing-outline-btn {
    min-height: 46px;
    border-radius: 16px;
    border: 0;
    font-weight: 900;
}
.billing-primary-btn {
    color: #03140a;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
    box-shadow: 0 16px 38px rgba(0,240,106,0.16);
}
.billing-primary-btn:disabled {
    cursor: not-allowed;
    color: var(--dash-soft);
    background: rgba(148,163,184,0.15);
    box-shadow: none;
}
.billing-outline-btn {
    color: var(--dash-text);
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.1);
}
.manual-payment-box {
    display: grid;
    gap: 10px;
    margin-top: 2px;
    padding: 12px;
    border-radius: 20px;
    background: rgba(0,212,255,0.055);
    border: 1px solid rgba(0,212,255,0.15);
}
.manual-payment-box > strong {
    color: var(--dash-text);
    font-size: .96rem;
}
.billing-mini-alert {
    padding: 13px;
    border-radius: 18px;
    color: var(--dash-muted);
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.075);
}
.billing-history-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 20px;
}
.billing-table-scroll {
    width: 100%;
    overflow-x: auto;
}
.billing-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0 8px;
}
.billing-table th {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
}
.billing-table td {
    padding: 10px;
    color: var(--dash-muted);
    background: rgba(255,255,255,0.045);
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: .82rem;
    font-weight: 650;
    vertical-align: middle;
    white-space: nowrap;
}
.billing-table td:first-child {
    border-left: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px 0 0 14px;
}
.billing-table td:last-child {
    border-right: 1px solid rgba(255,255,255,0.07);
    border-radius: 0 14px 14px 0;
}
.billing-empty-cell {
    color: var(--dash-soft) !important;
    text-align: center;
    padding: 26px 12px !important;
}
.billing-muted-action {
    color: var(--dash-soft);
}
.billing-primary-link {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 0 18px;
    border-radius: 16px;
    color: var(--waplix-btn-text-on-accent, #03140a);
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
    box-shadow: 0 16px 38px rgba(0,240,106,0.16);
    font-weight: 900;
}
.billing-primary-link:hover,
.billing-primary-link:focus {
    color: var(--waplix-btn-text-on-accent, #03140a);
}
.dash-section-head a.billing-primary-link {
    color: var(--waplix-btn-text-on-accent, #03140a);
}
.billing-inline-link {
    width: max-content;
    color: var(--dash-green);
    font-weight: 900;
}
.billing-inline-link-btn {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.billing-subscription-cta,
.plans-hero,
.payment-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-top: 16px;
    padding: 18px;
    border-radius: 26px;
    border: 1px solid rgba(0,240,106,0.18);
    background:
        radial-gradient(circle at 84% 18%, rgba(0,240,106,0.15), transparent 34%),
        linear-gradient(135deg, rgba(0,240,106,0.075), rgba(0,212,255,0.04)),
        var(--dash-panel);
    box-shadow: 0 20px 70px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.045);
}
.plans-hero,
.payment-hero {
    margin-top: 0;
}
.billing-subscription-cta h2,
.plans-hero h1,
.payment-hero h1 {
    margin: 4px 0 0;
    color: var(--dash-text);
    font-weight: 850;
    letter-spacing: -0.04em;
}
.plans-hero h1,
.payment-hero h1 {
    font-size: clamp(2.25rem, 4vw, 3.65rem);
    line-height: 1;
}
.billing-subscription-cta p,
.plans-hero p,
.payment-hero p {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--dash-muted);
}
.plans-cycle-toggle {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
    padding: 12px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
}
.plans-cycle-toggle span {
    color: var(--dash-muted);
    font-weight: 800;
    white-space: nowrap;
}
.plans-cycle-toggle button {
    position: relative;
    width: 74px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #6d45d8, #8b5cf6);
    box-shadow: 0 12px 30px rgba(139,92,246,0.24);
}
.plans-cycle-toggle button i {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s ease;
}
.plans-cycle-toggle button.yearly i {
    transform: translateX(36px);
}
.payment-layout {
    display: grid;
    grid-template-columns: minmax(280px, .74fr) minmax(0, 1.26fr);
    gap: 14px;
    margin-top: 14px;
}
.payment-status-card {
    min-width: 260px;
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid var(--dash-line);
    background: rgba(15,23,42,0.82);
}
.payment-status-card span {
    color: var(--dash-soft);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.payment-status-card strong {
    color: var(--dash-text);
    font-size: 1.05rem;
}
.payment-facts {
    grid-template-columns: 1fr;
}
.coin-select-card,
.payment-address-card {
    min-height: 100%;
}
.payment-deposit-grid {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.payment-qr-box {
    display: grid;
    justify-items: center;
    gap: 12px;
}
.payment-qr-box img {
    width: 260px;
    height: 260px;
    padding: 12px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0,0,0,0.28);
}
.payment-qr-box p {
    margin: 0;
    color: var(--dash-muted);
    text-align: center;
    font-weight: 750;
}
.payment-detail-list {
    display: grid;
    gap: 10px;
}
.payment-detail-list div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.075);
}
.payment-detail-list span {
    grid-column: 1 / -1;
    color: var(--dash-soft);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.payment-detail-list strong {
    min-width: 0;
    color: var(--dash-text);
    font-size: .92rem;
    overflow-wrap: anywhere;
}
.payment-detail-list button {
    min-height: 34px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    color: var(--dash-text);
    background: rgba(255,255,255,0.055);
    font-weight: 850;
    padding: 6px 10px;
}
.plans-page,
.compact-payment-page {
    padding: 22px 28px 42px;
}
.plans-page .plans-hero,
.compact-payment-page .payment-hero {
    margin: 0 0 16px;
    padding: 16px 18px;
    border-radius: 22px;
}
.plans-page .plans-hero h1,
.compact-payment-page .payment-hero h1 {
    font-size: clamp(2rem, 3.1vw, 3rem);
    line-height: 1.02;
}
.plans-page .plans-hero p,
.compact-payment-page .payment-hero p {
    margin-top: 7px;
    font-size: .9rem;
}
.plans-page .billing-alert,
.compact-payment-page .billing-alert {
    margin: 16px 0;
    padding: 15px 18px;
    border-radius: 20px;
}
.plans-page .billing-alert strong,
.plans-page .billing-alert span,
.compact-payment-page .billing-alert strong,
.compact-payment-page .billing-alert span {
    display: block;
    margin: 3px 0;
}
.plans-page .billing-plan-grid {
    gap: 24px;
}
.plans-page .billing-plan-card:not(.billing-plan-card--premium) {
    gap: 12px;
    padding: 16px 18px;
    border-radius: 22px;
}
.plans-page .plans-cycle-toggle {
    gap: 14px;
    padding: 10px 12px;
}
.plans-page .plans-cycle-toggle span {
    cursor: pointer;
    transition: color .18s ease;
}
.plans-page .plans-cycle-toggle span.active {
    color: var(--dash-text);
}
.plans-page .plans-cycle-toggle button {
    width: 64px;
    height: 34px;
}
.plans-page .plans-cycle-toggle button i {
    width: 24px;
    height: 24px;
}
.plans-page .plans-cycle-toggle button.yearly i {
    transform: translateX(30px);
}
.compact-payment-page .payment-layout {
    grid-template-columns: minmax(240px, .58fr) minmax(0, 1.42fr);
    gap: 14px;
    margin-top: 14px;
}
.compact-payment-page .billing-card {
    padding: 15px 16px;
    border-radius: 22px;
}
.compact-payment-page .payment-status-card {
    min-width: 220px;
    padding: 14px 16px;
    border-radius: 20px;
}
.compact-payment-page .billing-facts-grid {
    gap: 8px;
}
.compact-payment-page .billing-facts-grid div {
    padding: 10px 11px;
    border-radius: 14px;
}
.compact-payment-page .payment-deposit-grid {
    grid-template-columns: 238px minmax(0, 1fr);
    gap: 14px;
}
.compact-payment-page .payment-qr-box img {
    width: 220px;
    height: 220px;
    border-radius: 20px;
}
.compact-payment-page .payment-detail-list {
    gap: 8px;
}
.compact-payment-page .payment-detail-list div {
    padding: 10px 11px;
    border-radius: 15px;
}
.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.payment-method-option {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
}
.payment-method-option > span {
    width: max-content;
    padding: 5px 9px;
    border-radius: 999px;
    color: #03140a;
    background: linear-gradient(135deg, var(--dash-green), var(--dash-cyan));
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}
.payment-method-option > strong {
    color: var(--dash-text);
    font-size: 1rem;
}
.payment-method-option label {
    display: grid;
    gap: 6px;
    color: var(--dash-muted);
    font-size: .76rem;
    font-weight: 850;
}
.payment-method-option .form-control,
.payment-method-option .form-select {
    min-height: 40px;
    border-radius: 13px;
    border: 1px solid var(--dash-line);
    color: var(--dash-text);
    background-color: rgba(255,255,255,0.055);
}
.payment-method-option.muted {
    color: var(--dash-soft);
    opacity: .75;
}
.manual-method-details {
    display: grid;
    gap: 7px;
}
.manual-method-details div {
    display: grid;
    gap: 5px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(0,212,255,0.055);
    border: 1px solid rgba(0,212,255,0.16);
}
.manual-method-details b {
    color: var(--dash-text);
    font-size: .78rem;
}
.manual-method-details span {
    color: var(--dash-muted);
    font-size: .78rem;
    line-height: 1.4;
}
.payment-history-card {
    margin-top: 16px;
}
.billing-page.topup-page .payment-summary-card,
.billing-page.topup-page .payment-address-card,
.billing-page.topup-page .manual-submitted-card,
.billing-page.topup-page .payment-method-card,
.billing-page.topup-page .payment-history-card,
.compact-payment-page.topup-page .payment-summary-card,
.compact-payment-page.topup-page .payment-address-card,
.compact-payment-page.topup-page .manual-submitted-card,
.compact-payment-page.topup-page .payment-method-card,
.compact-payment-page.topup-page .payment-history-card {
    background:
        radial-gradient(circle at top right, rgba(32, 201, 151, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(8, 17, 15, 0.96), rgba(5, 11, 10, 0.98));
    border: 1px solid rgba(95, 255, 198, 0.16);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.03);
}
.billing-page.topup-page .payment-status-card,
.compact-payment-page.topup-page .payment-status-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        linear-gradient(180deg, rgba(8, 17, 15, 0.96), rgba(5, 11, 10, 0.98));
    border: 1px solid rgba(95, 255, 198, 0.16);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.03);
}
.billing-page.topup-page .payment-status-card span,
.compact-payment-page.topup-page .payment-status-card span {
    color: var(--dash-soft);
}
.billing-page.topup-page .payment-status-card strong,
.compact-payment-page.topup-page .payment-status-card strong {
    color: #d8fff0;
}
.billing-page.topup-page .payment-detail-list button.copy-icon-btn,
.compact-payment-page.topup-page .payment-detail-list button.copy-icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 14px;
}
.billing-page.topup-page .payment-detail-list button.copy-icon-btn svg,
.compact-payment-page.topup-page .payment-detail-list button.copy-icon-btn svg {
    width: 16px;
    height: 16px;
}
.billing-page.topup-page .billing-table-scroll,
.compact-payment-page.topup-page .billing-table-scroll {
    max-height: 360px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #19d38a rgba(255,255,255,0.08);
}
.billing-page.topup-page .billing-table-scroll::-webkit-scrollbar,
.compact-payment-page.topup-page .billing-table-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.billing-page.topup-page .billing-table-scroll::-webkit-scrollbar-track,
.compact-payment-page.topup-page .billing-table-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
}
.billing-page.topup-page .billing-table-scroll::-webkit-scrollbar-thumb,
.compact-payment-page.topup-page .billing-table-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dash-green), var(--dash-cyan));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.payment-history-table {
    min-width: 680px;
}

/* Deposit history + subscription invoices — glass cards + responsive table */
.deposit-history-page,
.subscription-invoices-page,
.settings-page.settings-v2 {
    overflow-x: hidden;
}
.deposit-history-page .deposit-history-hero,
.deposit-history-page .deposit-history-table-card,
.deposit-history-page .deposit-history-summary-card,
.subscription-invoices-page .subscription-invoices-hero,
.subscription-invoices-page .subscription-invoices-table-card,
.subscription-invoices-page .subscription-invoices-summary-card,
.settings-page.settings-v2 .settings-shell-card,
.settings-page.settings-v2 .settings-photo-card,
.settings-page.settings-v2 .settings-info-card,
.settings-page.settings-v2 .settings-single-card {
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}
.deposit-history-page .deposit-history-hero-copy,
.subscription-invoices-page .subscription-invoices-hero-copy {
    min-width: 0;
    flex: 1 1 auto;
}
.deposit-history-page .deposit-history-summary-card,
.subscription-invoices-page .subscription-invoices-summary-card {
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 280px;
}
.deposit-history-page .deposit-history-table-scroll,
.subscription-invoices-page .subscription-invoices-table-scroll {
    max-height: min(68vh, 720px);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #19d38a rgba(255,255,255,0.08);
    -webkit-overflow-scrolling: touch;
}
.deposit-history-page .deposit-history-table-scroll::-webkit-scrollbar,
.subscription-invoices-page .subscription-invoices-table-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.deposit-history-page .deposit-history-table-scroll::-webkit-scrollbar-track,
.subscription-invoices-page .subscription-invoices-table-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
}
.deposit-history-page .deposit-history-table-scroll::-webkit-scrollbar-thumb,
.subscription-invoices-page .subscription-invoices-table-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dash-green), var(--dash-cyan));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.deposit-history-page .deposit-history-table td[data-label="Reference"],
.subscription-invoices-page .subscription-invoices-table td[data-label="Invoice"] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
html[data-theme="light"] .deposit-history-page .deposit-history-table td,
html[data-theme="light"] .subscription-invoices-page .subscription-invoices-table td {
    background: rgba(248, 255, 252, 0.72) !important;
    border-color: rgba(102, 214, 179, 0.22) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="light"] .deposit-history-page .deposit-history-table th,
html[data-theme="light"] .subscription-invoices-page .subscription-invoices-table th {
    color: var(--text-muted) !important;
    border-color: rgba(102, 214, 179, 0.18) !important;
}
html[data-theme="dark"] .deposit-history-page .deposit-history-table td,
html[data-theme="dark"] .subscription-invoices-page .subscription-invoices-table td,
html:not([data-theme]) .deposit-history-page .deposit-history-table td,
html:not([data-theme]) .subscription-invoices-page .subscription-invoices-table td {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.07);
}
@media (max-width: 900px) {
    .deposit-history-page .deposit-history-hero,
    .subscription-invoices-page .subscription-invoices-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .deposit-history-page .deposit-history-summary-card,
    .subscription-invoices-page .subscription-invoices-summary-card {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
    .deposit-history-page .deposit-history-section-head,
    .subscription-invoices-page .subscription-invoices-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .deposit-history-page .deposit-history-section-head .billing-primary-link,
    .subscription-invoices-page .subscription-invoices-section-head .billing-primary-link {
        width: 100%;
    }
}
@media (max-width: 760px) {
    .deposit-history-page .payment-hero h1,
    .subscription-invoices-page .payment-hero h1 {
        font-size: clamp(1.75rem, 8vw, 2.2rem);
    }
    .deposit-history-page .deposit-history-table-scroll,
    .subscription-invoices-page .subscription-invoices-table-scroll {
        max-height: none;
        overflow: visible;
    }
    .deposit-history-page .deposit-history-table,
    .subscription-invoices-page .subscription-invoices-table {
        min-width: 0;
    }
    .deposit-history-page .deposit-history-table thead,
    .subscription-invoices-page .subscription-invoices-table thead {
        display: none;
    }
    .deposit-history-page .deposit-history-table tbody tr,
    .subscription-invoices-page .subscription-invoices-table tbody tr {
        display: grid;
        gap: 8px;
        padding: 14px;
        margin-bottom: 10px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .deposit-history-page .deposit-history-table td,
    .subscription-invoices-page .subscription-invoices-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        white-space: normal;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 4px 0;
    }
    .deposit-history-page .deposit-history-table td::before,
    .subscription-invoices-page .subscription-invoices-table td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        font-weight: 800;
        color: var(--dash-soft);
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    .deposit-history-page .deposit-history-table td[data-label="Reference"],
    .subscription-invoices-page .subscription-invoices-table td[data-label="Invoice"] {
        max-width: none;
        word-break: break-word;
    }
    .deposit-history-page .deposit-history-table .billing-empty-cell,
    .subscription-invoices-page .subscription-invoices-table .billing-empty-cell {
        display: block !important;
        border: 0 !important;
    }
    .deposit-history-page .deposit-history-table .billing-empty-cell::before,
    .subscription-invoices-page .subscription-invoices-table .billing-empty-cell::before {
        display: none;
    }
    html[data-theme="light"] .deposit-history-page .deposit-history-table tbody tr,
    html[data-theme="light"] .subscription-invoices-page .subscription-invoices-table tbody tr {
        background: rgba(248, 255, 252, 0.78) !important;
        border-color: rgba(102, 214, 179, 0.24) !important;
    }
}

.payment-expired-notice {
    margin-top: 12px;
}
@media (max-width: 1200px) {
    .plans-page,
    .compact-payment-page {
        padding: 18px 20px 38px;
    }
    .compact-payment-page .payment-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .plans-page,
    .compact-payment-page {
        padding: 14px 0 86px;
    }
    .billing-page.topup-page,
    .compact-payment-page.topup-page {
        padding: 16px !important;
    }
    .plans-page .plans-hero,
    .compact-payment-page .payment-hero {
        display: grid;
        align-items: start;
        padding: 16px;
    }
    .billing-page.topup-page .payment-hero,
    .billing-page.topup-page .billing-card,
    .billing-page.topup-page .payment-status-card,
    .compact-payment-page.topup-page .payment-hero,
    .compact-payment-page.topup-page .billing-card,
    .compact-payment-page.topup-page .payment-status-card {
        padding: 16px;
        border-radius: 22px;
    }
    .plans-page .plans-hero h1,
    .compact-payment-page .payment-hero h1 {
        font-size: 2rem;
    }
    .plans-page .billing-plan-grid,
    .payment-method-grid,
    .compact-payment-page .payment-deposit-grid {
        grid-template-columns: 1fr;
    }
    .plans-page .plans-cycle-toggle {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }
    .plans-page .plans-cycle-toggle span {
        font-size: .78rem;
    }
    .compact-payment-page .payment-qr-box img {
        width: min(220px, 100%);
        height: auto;
    }
}
.my-subscriptions-page {
    min-height: calc(100vh - 72px);
    padding: 8px 12px 12px;
}
.my-subscriptions-page .billing-hero {
    grid-template-columns: minmax(0, 1fr) 235px;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
}
.my-subscriptions-page .billing-hero h1 {
    max-width: 540px;
    margin-top: 4px;
    font-size: clamp(1.55rem, 2.4vw, 2.28rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}
.my-subscriptions-page .billing-hero p,
.my-subscriptions-page .instructions-card p,
.my-subscriptions-page .billing-note {
    margin-top: 5px;
    font-size: .72rem;
    line-height: 1.35;
}
.my-subscriptions-page .dash-kicker {
    font-size: .55rem;
    letter-spacing: .13em;
}
.my-subscriptions-page .billing-hero-summary {
    min-height: 84px;
    padding: 10px 12px;
    border-radius: 15px;
    gap: 5px;
}
.my-subscriptions-page .billing-hero-summary span,
.my-subscriptions-page .billing-facts-grid span {
    font-size: .55rem;
}
.my-subscriptions-page .billing-hero-summary strong {
    font-size: 1rem;
}
.my-subscriptions-page .billing-status {
    min-height: 22px;
    padding: 4px 8px;
    font-size: .55rem;
}
.my-subscriptions-page .billing-alert {
    margin-top: 8px;
    padding: 8px 11px;
    border-radius: 13px;
    gap: 2px;
}
.my-subscriptions-page .billing-alert strong,
.my-subscriptions-page .billing-alert span {
    font-size: .7rem;
    line-height: 1.28;
}
.my-subscriptions-page .billing-overview-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, .92fr);
    gap: 10px;
    margin-top: 10px;
}
.my-subscriptions-page .billing-card {
    padding: 10px 12px;
    border-radius: 17px;
}
.my-subscriptions-page .dash-section-head {
    margin-bottom: 7px;
    gap: 8px;
}
.my-subscriptions-page .dash-section-head h2 {
    font-size: .92rem;
    line-height: 1.15;
}
.my-subscriptions-page .billing-facts-grid {
    gap: 6px;
    margin-top: 7px;
}
.my-subscriptions-page .billing-facts-grid div {
    padding: 8px 9px;
    border-radius: 12px;
}
.my-subscriptions-page .billing-facts-grid strong {
    margin-top: 2px;
    font-size: .75rem;
    line-height: 1.2;
}
.my-subscriptions-page .billing-usage-visual {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    margin-top: 6px;
}
.my-subscriptions-page .usage-ring {
    width: 72px;
    height: 72px;
}
.my-subscriptions-page .usage-ring span {
    font-size: .95rem;
}
.my-subscriptions-page .usage-ring small {
    font-size: .62rem;
}
.my-subscriptions-page .billing-usage-visual strong {
    font-size: .82rem;
}
.my-subscriptions-page .billing-progress {
    height: 7px;
    margin: 5px 0 4px;
}
.my-subscriptions-page .billing-usage-visual p {
    font-size: .68rem;
}
.my-subscriptions-page .billing-unlimited-list,
.my-subscriptions-page .manual-method-pills {
    gap: 5px;
    margin-top: 7px;
}
.my-subscriptions-page .billing-unlimited-list span,
.my-subscriptions-page .manual-method-pills span {
    padding: 4px 7px;
    font-size: .58rem;
}
.my-subscriptions-page .billing-steplets {
    gap: 6px;
    margin-top: 7px;
}
.my-subscriptions-page .billing-steplets div {
    min-height: 44px;
    padding: 7px;
    border-radius: 12px;
}
.my-subscriptions-page .billing-steplets span {
    width: 20px;
    height: 20px;
    font-size: .58rem;
}
.my-subscriptions-page .billing-steplets strong {
    margin-top: 4px;
    font-size: .64rem;
}
.my-subscriptions-page .manual-instruction-list {
    gap: 5px;
    margin-top: 7px;
    max-height: 92px;
    overflow-y: auto;
}
.my-subscriptions-page .manual-instruction-list div {
    gap: 3px;
    padding: 7px 8px;
    border-radius: 11px;
}
.my-subscriptions-page .manual-instruction-list strong,
.my-subscriptions-page .manual-instruction-list span {
    font-size: .64rem;
    line-height: 1.3;
}
@media (max-width: 900px) {
    .my-subscriptions-page {
        padding: 10px 0 82px;
    }
    .my-subscriptions-page .billing-hero,
    .my-subscriptions-page .billing-overview-grid {
        grid-template-columns: 1fr;
    }
    .my-subscriptions-page .billing-hero h1 {
        font-size: 1.8rem;
    }
}

/* Phase 5K: Settings redesign */
.settings-page.settings-v2 {
    --dash-text: var(--text-primary);
    --dash-muted: var(--text-secondary);
    --dash-soft: var(--text-muted);
    min-height: calc(100vh - 104px);
    margin: -8px -4px 0;
    padding: 22px 18px 18px;
    overflow-x: hidden;
    color: var(--text-primary);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.settings-v2 .settings-shell-card {
    min-height: min(760px, calc(100vh - 148px));
    margin-top: 6px;
    padding: 26px;
    border-radius: 30px;
    border: 1px solid var(--border);
    background: transparent;
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    box-shadow: var(--shadow);
}

.settings-v2-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.settings-v2-head h1 {
    margin: 0 0 5px;
    color: var(--text-primary);
    font-size: clamp(1.7rem, 2.5vw, 2.35rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.settings-v2-head p,
.settings-panel-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: .92rem;
}

.settings-save-all,
.settings-submit-btn,
.settings-upload-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    color: var(--waplix-btn-text-on-accent);
    font-weight: 900;
    text-decoration: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: var(--waplix-shadow-soft);
}

.settings-save-all:hover,
.settings-submit-btn:hover,
.settings-upload-btn:hover {
    color: var(--waplix-btn-text-on-accent);
    filter: brightness(1.04);
}

.settings-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-inline-refresh-form {
    margin-top: 14px;
}

.settings-icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 1.15rem;
    background: var(--surface-soft);
    box-shadow: var(--waplix-shadow-soft);
}

.settings-icon-btn:hover {
    color: var(--waplix-btn-text-on-accent);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.settings-v2-search input {
    width: 100%;
    min-height: 46px;
    padding: 0 16px 0 42px;
    border-radius: 15px;
    color: var(--input-text);
    background:
        linear-gradient(90deg, var(--waplix-accent-green-soft), var(--waplix-accent-green-soft)) 16px 50% / 12px 12px no-repeat,
        var(--input-bg);
    border: 1px solid var(--input-border);
    box-shadow: none;
}

.settings-v2-search input:focus {
    outline: none;
    border-color: var(--border-strong);
    box-shadow: var(--waplix-focus-ring);
}

.settings-v2-search {
    display: block;
    margin-bottom: 18px;
}

.settings-v2-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.settings-v2-tabs::-webkit-scrollbar {
    display: none;
}

.settings-v2-tabs a {
    position: relative;
    flex: 0 0 auto;
    padding: 9px 12px;
    color: var(--text-secondary);
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 12px;
}

.settings-v2-tabs a:hover,
.settings-v2-tabs a.active {
    color: var(--text-primary);
    background: var(--surface-soft);
}

.settings-v2-tabs a.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -3px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.settings-panel {
    display: none;
}

.settings-panel.active {
    display: block;
}

.settings-profile-form {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
}

.settings-photo-card {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 14px;
    min-height: 330px;
    padding: 28px 18px;
    text-align: center;
}

.settings-photo-preview {
    width: 124px;
    height: 124px;
    display: grid;
    place-items: center;
    margin: 18px 0 4px;
    overflow: hidden;
    border-radius: 50%;
    color: var(--waplix-btn-text-on-accent);
    font-size: 2.5rem;
    font-weight: 900;
    background: #06120d;
    border: 2px solid rgba(0, 240, 106, 0.75);
    box-shadow: 0 12px 28px rgba(0, 240, 106, 0.14), inset 0 0 0 2px rgba(255, 255, 255, 0.16);
}

.settings-photo-preview:not(:has(img)) {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.settings-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-upload-btn {
    cursor: pointer;
}

.settings-upload-btn input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.settings-remove-photo {
    border: 0;
    color: var(--danger);
    font-weight: 800;
    background: transparent;
}

.settings-remove-photo:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.settings-info-card,
.settings-single-card {
    padding: 28px;
}

.settings-panel-head {
    margin-bottom: 20px;
}

.settings-field-grid {
    display: grid;
    gap: 16px;
}

.settings-field-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-info-card,
.settings-form-v2 {
    display: grid;
    gap: 16px;
}

.settings-v2 textarea.form-control {
    padding-top: 12px;
}

.settings-submit-btn,
.settings-danger-btn-v2 {
    width: max-content;
    min-width: 170px;
    margin-top: 4px;
}

.settings-toggle-list-v2 {
    display: grid;
    gap: 10px;
}

.settings-photo-card,
.settings-info-card,
.settings-single-card {
    border-radius: 24px;
    background: transparent;
    border: 1px solid var(--border);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.settings-photo-card h2,
.settings-panel-head h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.12rem;
    font-weight: 800;
}

.settings-info-card label,
.settings-form-v2 label {
    display: grid;
    gap: 7px;
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 800;
}

.settings-v2 .form-control {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--input-border);
    color: var(--input-text);
    background: var(--input-bg);
    box-shadow: none;
}

.settings-v2 .form-control:focus {
    color: var(--input-text);
    background: var(--input-bg);
    border-color: var(--border-strong);
    box-shadow: var(--waplix-focus-ring);
}

.settings-v2 select.form-control {
    color-scheme: light dark;
}

.settings-switch-row-v2 {
    min-height: 54px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text-primary);
}

.settings-switch-row-v2 input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-switch-row-v2 i {
    position: relative;
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: rgba(148,163,184,0.18);
    border: 1px solid rgba(148,163,184,0.20);
}

.settings-switch-row-v2 i::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #94a3b8;
    transition: transform .2s ease, background .2s ease;
}

.settings-switch-row-v2 input:checked + i {
    background: linear-gradient(135deg, rgba(0,240,106,0.82), rgba(0,212,255,0.72));
}

.settings-switch-row-v2 input:checked + i::after {
    transform: translateX(22px);
    background: #05110b;
}

.settings-check-v2 {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 10px !important;
}

.settings-check-v2 input {
    width: 18px;
    height: 18px;
    accent-color: #00f06a;
}

.settings-delete-card {
    border-color: rgba(255,59,92,0.26);
    background:
        linear-gradient(145deg, rgba(255,59,92,0.08), transparent),
        var(--surface);
}

.settings-danger-btn-v2 {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, #ff3b5c, #ff7a90);
    box-shadow: 0 16px 34px rgba(255,59,92,0.18);
}

@media (max-width: 991px) {
    .settings-page.settings-v2 {
        padding: 16px 14px 14px;
    }

    .settings-v2 .settings-shell-card {
        min-height: 0;
        margin-top: 4px;
        padding: 20px;
        border-radius: 24px;
    }

    .settings-profile-form {
        grid-template-columns: 1fr;
    }

    .settings-photo-card {
        min-height: 0;
    }
}

@media (max-width: 575px) {
    .settings-page.settings-v2 {
        padding: 12px 10px 80px;
    }

    .settings-v2 .settings-shell-card {
        padding: 16px;
        border-radius: 20px;
    }

    .settings-photo-preview {
        width: 108px;
        height: 108px;
        font-size: 2.1rem;
    }

    .settings-photo-card,
    .settings-info-card,
    .settings-single-card {
        padding: 20px 16px;
    }

    .settings-v2-head {
        display: grid;
    }

    .settings-save-all,
    .settings-submit-btn,
    .settings-danger-btn-v2 {
        width: 100%;
    }

    .settings-field-grid.two {
        grid-template-columns: 1fr;
    }

    .settings-info-card,
    .settings-single-card {
        padding: 18px;
        border-radius: 20px;
    }
}
@media (max-width: 1200px) {
    .dash-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dash-service-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-lower-grid { grid-template-columns: 1fr; }
    .instance-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .instance-list-row { grid-template-columns: 1.2fr .8fr .65fr .7fr 1fr; }
    .instance-list-row > span:last-child,
    .instance-list-head span:last-child { grid-column: 1 / -1; justify-content: flex-start; }
    .detail-grid,
    .detail-grid-wide,
    .detail-hero {
        grid-template-columns: 1fr;
    }
    .webhook-toggle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .developer-stats-grid,
    .sdk-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .developer-main-grid,
    .developer-code-grid {
        grid-template-columns: 1fr;
    }
    .billing-overview-grid,
    .billing-hero,
    .payment-layout {
        grid-template-columns: 1fr;
    }
    .billing-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .developer-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .webhook-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .dashboard-page {
        margin: 0;
        padding: 14px 0 86px;
    }
    .instance-page {
        margin: 0;
        padding: 14px 0 86px;
    }
    .dashboard-hero {
        grid-template-columns: 1fr;
        padding: 18px;
    }
    .dash-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dash-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dash-service-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dash-instance-head {
        display: none;
    }
    .dash-instance-scroll {
        --dash-instance-row-height: 198px;
    }
    .dash-instance-item {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 16px;
        border-radius: 18px;
    }
    .dash-instance-item .dash-instance-name-cell,
    .dash-instance-item > span[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }
    .dash-instance-item .dash-instance-name-cell::before,
    .dash-instance-item > span[data-label]::before {
        content: attr(data-label);
        flex: 0 0 38%;
        font-weight: 800;
        color: var(--dash-soft);
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    .dash-instance-item .dash-instance-name-cell::before {
        content: "Instance";
    }
    .dash-instance-item .dash-instance-name-cell strong,
    .dash-instance-item .dash-instance-name-cell small {
        text-align: right;
    }
    .dash-instance-item .dash-instance-status {
        align-items: center;
    }
    .dash-instance-item .dash-row-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        justify-content: stretch;
    }
    .dash-instance-item .dash-row-actions::before {
        grid-column: 1 / -1;
        margin-bottom: 2px;
    }
    .dash-instance-item .dash-row-actions a {
        width: 100%;
        min-height: 36px;
        padding: 8px 10px;
    }
    html[data-theme="light"] .dash-instance-item {
        background: rgba(248, 255, 252, 0.88);
        border-color: rgba(102, 214, 179, 0.22);
        box-shadow: 0 10px 28px rgba(16, 82, 70, 0.06);
    }
    .instance-page-head,
    .instance-limit-card,
    .create-instance-grid {
        grid-template-columns: 1fr;
    }
    .instance-page-head,
    .instance-limit-card {
        display: grid;
    }
    .instance-page-head .dash-primary-btn,
    .instance-limit-card .dash-primary-btn {
        width: 100%;
    }
    .instance-list-head {
        display: none;
    }
    .instance-list-scroll-shell {
        --instance-list-visible-rows: 3;
        --instance-list-row-size: 208px;
        --instance-list-head-size: 0px;
        padding-right: 2px;
    }
    .instance-list {
        gap: 8px;
    }
    .instance-list-row:not(.instance-list-head) {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 11px 12px;
        border-radius: 16px;
    }
    .instance-list-row:not(.instance-list-head):hover {
        transform: none;
    }
    .instance-list-row .instance-name-cell {
        display: block;
        padding-bottom: 8px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    .instance-list-row .instance-name-cell strong {
        font-size: .9rem;
        line-height: 1.25;
    }
    .instance-list-row .instance-name-cell small {
        margin-top: 2px;
        font-size: .66rem;
        letter-spacing: .02em;
    }
    .instance-list-row .instance-phone,
    .instance-list-row .instance-dates {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 4px 0;
    }
    .instance-list-row .instance-card-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 2px 0 4px;
    }
    .instance-list-row .instance-status-cell,
    .instance-list-row .instance-webhook-cell {
        display: flex;
        align-items: center;
        min-width: 0;
    }
    .instance-list-row .instance-phone::before,
    .instance-list-row .instance-dates::before {
        content: attr(data-label);
        flex: 0 0 34%;
        font-weight: 800;
        color: var(--dash-soft);
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        line-height: 1.3;
    }
    .instance-list-row .instance-status-cell::before,
    .instance-list-row .instance-webhook-cell::before {
        display: none;
    }
    .instance-list-row .instance-phone {
        font-size: .74rem;
        font-weight: 700;
        text-align: right;
        word-break: break-all;
    }
    .instance-list-row .instance-dates {
        align-items: center;
    }
    .instance-list-row .instance-dates small {
        display: block;
        font-size: .66rem;
        line-height: 1.25;
        text-align: right;
    }
    .instance-list-row .instance-status-cell .dash-status-pill,
    .instance-list-row .instance-webhook-cell .webhook-pill {
        font-size: .58rem;
        padding: 4px 8px;
        white-space: nowrap;
    }
    .instance-list-row .instance-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding-top: 8px;
        margin-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }
    .instance-list-row .instance-actions::before {
        content: attr(data-label);
        grid-column: 1 / -1;
        font-weight: 800;
        color: var(--dash-soft);
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-bottom: 2px;
    }
    .instance-list-row .instance-actions a,
    .instance-list-row .instance-actions button {
        width: 100%;
        min-height: 30px;
        padding: 5px 6px;
        font-size: .64rem;
        line-height: 1.15;
        text-align: center;
    }
    .instance-list-row .instance-actions form {
        display: flex;
        margin: 0;
        min-width: 0;
    }
    .instance-list-toolbar {
        margin-bottom: 10px;
    }
    .instance-list-search {
        min-height: 40px;
        font-size: .84rem;
    }
    .create-form-card {
        position: static;
    }
    .developer-page {
        margin: 0;
        padding: 14px 0 86px;
    }
    .billing-page {
        margin: 0;
        padding: 14px 0 86px;
    }
    .developer-hero {
        display: grid;
    }
    .developer-hero-actions a {
        width: 100%;
    }
    .developer-stats-grid,
    .developer-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .endpoint-row {
        grid-template-columns: 82px minmax(180px, 1fr) minmax(150px, .8fr) 70px;
        overflow-x: auto;
    }
    .endpoint-table {
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .secret-row {
        grid-template-columns: 1fr;
    }
    .detail-action-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pairing-form,
    .webhook-url-row {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .dashboard-hero-copy h1 {
        font-size: 2.25rem;
    }
    .dash-hero-actions a {
        width: 100%;
    }
    .dash-hero-metrics,
    .dash-stats-grid,
    .dash-chart-grid,
    .dash-action-grid,
    .dash-service-links {
        grid-template-columns: 1fr;
    }
    .dash-chart-card,
    .dash-message-activity-card {
        min-height: 210px;
        max-height: 210px;
        height: 210px;
    }
    .status-bars {
        height: 140px;
    }
    .dash-panel {
        padding: 14px;
    }
    .dash-instance-item {
        padding: 14px;
    }
    .dash-instance-scroll {
        --dash-instance-row-height: 268px;
    }
    .dash-instance-item .dash-row-actions {
        grid-template-columns: 1fr;
    }
    .recent-panel .dash-section-head {
        align-items: center;
    }
    .instance-page-head h1,
    .create-copy-panel h1 {
        font-size: 2.15rem;
    }
    .instance-summary-grid {
        grid-template-columns: 1fr;
    }
    .create-copy-panel,
    .create-form-card {
        padding: 18px;
        border-radius: 23px;
    }
    .create-steps div {
        grid-template-columns: 36px 1fr;
    }
    .create-steps span {
        width: 36px;
        height: 36px;
    }
    .create-button-row a {
        width: 100%;
    }
    .detail-hero,
    .detail-card {
        padding: 16px;
        border-radius: 22px;
    }
    .detail-hero-copy h1 {
        font-size: 2rem;
    }
    .detail-action-panel,
    .webhook-toggle-grid,
    .detail-link-grid,
    .detail-button-row,
    .developer-stats-grid,
    .developer-quick-grid,
    .webhook-steps {
        grid-template-columns: 1fr;
    }
    .developer-hero,
    .developer-card {
        padding: 16px;
        border-radius: 22px;
    }
    .billing-hero,
    .billing-card,
    .plans-hero,
    .payment-hero,
    .billing-plan-card {
        padding: 16px;
        border-radius: 22px;
    }
    .plans-hero,
    .payment-hero,
    .billing-subscription-cta {
        display: grid;
        align-items: start;
    }
    .plans-cycle-toggle {
        width: 100%;
        justify-content: center;
        gap: 12px;
    }
    .plans-cycle-toggle span {
        font-size: .86rem;
    }
    .payment-deposit-grid {
        grid-template-columns: 1fr;
    }
    .payment-detail-list div {
        grid-template-columns: 1fr;
    }
    .payment-detail-list button,
    .billing-primary-link {
        width: 100%;
    }
    .billing-hero h1 {
        font-size: 2.1rem;
    }
    .plans-hero h1,
    .payment-hero h1 {
        font-size: 2.25rem;
    }
    .billing-section-head {
        display: grid;
        align-items: start;
    }
    .billing-plan-grid,
    .billing-facts-grid,
    .billing-steplets {
        grid-template-columns: 1fr;
    }
    .billing-usage-visual {
        grid-template-columns: 1fr;
    }
    .usage-ring {
        width: 104px;
        height: 104px;
    }
    .developer-hero h1 {
        font-size: 2rem;
    }
    .sdk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .endpoint-row {
        min-width: 620px;
    }
    .developer-copy-box {
        grid-template-columns: 1fr;
    }
    .webhook-info::after {
        right: -6px;
        width: min(260px, calc(100vw - 48px));
        min-width: 0;
    }
    .waplix-toast-region {
        padding: max(16px, env(safe-area-inset-top)) 16px 16px;
    }

    .waplix-toast-stack {
        width: min(360px, calc(100vw - 32px));
    }

    .waplix-flash {
        padding: 24px 20px 20px;
        border-radius: 20px;
        gap: 10px;
    }

    .waplix-flash-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .waplix-flash-title {
        font-size: 1rem;
    }

    .waplix-flash-message {
        font-size: 0.86rem;
        max-width: 100%;
    }
    .recent-message-scroll {
        height: 360px;
    }
    .message-log-table {
        min-width: 760px;
    }
    .detail-action-panel button,
    .detail-button-row a,
    .detail-button-row button,
    .webhook-save-mobile {
        width: 100%;
    }
    .detail-summary-list div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .detail-qr-box {
        padding: 14px;
    }
    .billing-list div {
        display: grid;
    }
}
@media (max-width: 900px) {
    .app-shell { display: block; }
    .app-sidebar { width: 100%; height: auto; position: static; display: flex; gap: 6px; overflow-x: auto; }
    .app-sidebar .brand { min-width: 160px; margin-bottom: 0 !important; }
    .app-sidebar a { white-space: nowrap; margin-bottom: 0; }
}

.instance-page.detail-page {
    max-width: 1640px;
    margin: -8px auto 0;
    padding: 18px 16px 16px;
}

.topup-body .compact-payment-page { margin-top: 0 !important; padding: 0 28px 42px !important; }

.instance-page.detail-page .detail-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: 12px;
    padding: 20px;
    border-radius: 24px;
}

.instance-page.detail-page .detail-grid {
    grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr);
    gap: 12px;
    margin-top: 12px;
}

.instance-page.detail-page .detail-grid-wide {
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.instance-page.detail-page .detail-grid-wide > .webhook-card {
    grid-column: 1 / -1;
}

.instance-page.detail-page .detail-side-stack {
    display: contents;
}

.instance-page.detail-page .detail-card {
    padding: 16px;
    border-radius: 22px;
}

.instance-page.detail-page .detail-summary-list div {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 11px;
}

.instance-page.detail-page .detail-card-copy {
    margin-bottom: 12px;
}

.instance-page.detail-page .detail-form {
    gap: 11px;
}

.instance-page.detail-page .detail-form .form-label {
    font-size: .92rem;
}

.instance-page.detail-page .detail-form .form-control {
    min-height: 46px;
    font-size: .95rem;
}

.instance-page.detail-page .detail-form textarea.form-control {
    min-height: 100px;
}

.instance-page.detail-page .detail-button-row {
    gap: 8px;
}

.instance-page.detail-page .webhook-toggle-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.instance-page.detail-page .webhook-toggle {
    gap: 8px;
    min-height: 50px;
    padding: 8px 10px;
    border-radius: 14px;
}

.instance-page.detail-page .webhook-toggle-main {
    gap: 8px;
}

.instance-page.detail-page .toggle-track {
    flex: 0 0 34px;
    width: 34px;
    height: 20px;
}

.instance-page.detail-page .toggle-track i {
    width: 14px;
    height: 14px;
}

.instance-page.detail-page .webhook-toggle input:checked + .toggle-track i {
    transform: translateX(14px);
}

.instance-page.detail-page .webhook-toggle em {
    font-size: .74rem;
    line-height: 1.2;
}

.instance-page.detail-page .webhook-info {
    width: 22px;
    height: 22px;
    font-size: .7rem;
}

.instance-page.detail-page .recent-message-scroll {
    --instance-message-scroll-max: min(480px, calc(100dvh - 280px));
    max-height: var(--instance-message-scroll-max);
    min-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    padding: 4px 6px 6px 4px;
    scrollbar-width: thin;
}

.instance-page.detail-page .message-log-table-wrap {
    overflow: visible;
    padding-bottom: 0;
}

.instance-page.detail-page .message-log-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.instance-page.detail-page .message-log-table thead {
    display: none;
}

.instance-page.detail-page .message-log-table tbody tr {
    display: grid;
    gap: 8px;
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.instance-page.detail-page .message-log-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    max-width: none;
    white-space: normal;
    word-break: break-word;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 4px 0;
    text-align: right;
    font-size: .75rem;
}

.instance-page.detail-page .message-log-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 32%;
    max-width: 140px;
    font-weight: 800;
    color: var(--dash-soft);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
    line-height: 1.35;
}

.instance-page.detail-page .message-log-table td[data-label="Message"] {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    text-align: left;
}

.instance-page.detail-page .message-log-table td[data-label="Message"]::before {
    flex: none;
    max-width: none;
}

.instance-page.detail-page .message-log-table td[data-label="Direction"],
.instance-page.detail-page .message-log-table td[data-label="Status"] {
    align-items: center;
}

.instance-page.detail-page .message-log-table .log-badge {
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    font-size: .58rem;
}

.instance-page.detail-page .message-log-preview {
    max-width: none;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

@media (max-width: 760px) {
    .instance-page.detail-page .recent-message-scroll {
        --instance-message-scroll-max: min(420px, calc(100dvh - 360px));
        min-height: 220px;
    }
}

@media (max-width: 1450px) {
    .instance-page.detail-page .webhook-toggle-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .instance-page.detail-page .detail-hero,
    .instance-page.detail-page .detail-grid,
    .instance-page.detail-page .detail-grid-wide {
        grid-template-columns: 1fr;
    }

    .instance-page.detail-page .detail-grid-wide > .webhook-card {
        grid-column: 1;
    }

    .instance-page.detail-page .webhook-toggle-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .instance-page.detail-page {
        max-width: none;
        padding: 12px 12px 86px;
    }

    .instance-page.detail-page .detail-hero,
    .instance-page.detail-page .detail-grid-wide {
        grid-template-columns: 1fr;
    }

    .instance-page.detail-page .detail-grid-wide > .webhook-card {
        grid-column: 1;
    }

    .instance-page.detail-page .detail-action-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .instance-page.detail-page .detail-qr-box {
        max-width: 100%;
        width: 100%;
    }

    .instance-page.detail-page .webhook-toggle-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .instance-page.detail-page .webhook-toggle {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 4px;
        min-height: 0;
        padding: 6px 7px;
        border-radius: 12px;
    }
    .instance-page.detail-page .webhook-toggle-main {
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        min-width: 0;
    }

    .instance-page.detail-page .toggle-track {
        flex: 0 0 28px;
        width: 28px;
        height: 16px;
        padding: 2px;
        border-radius: 999px;
        box-sizing: border-box;
    }

    .instance-page.detail-page .toggle-track i {
        width: 12px;
        height: 12px;
    }

    .instance-page.detail-page .webhook-toggle input:checked + .toggle-track i {
        transform: translateX(12px);
    }

    .instance-page.detail-page .webhook-toggle em {
        display: block;
        width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        font-size: .6rem;
        line-height: 1.15;
        word-break: break-word;
    }

    .instance-page.detail-page .webhook-info {
        position: static;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin: 0;
        font-size: .58rem;
        line-height: 1;
    }
}

@media (max-width: 560px) {
    .instance-page.detail-page .detail-hero,
    .instance-page.detail-page .detail-card {
        padding: 14px;
        border-radius: 20px;
    }

    .instance-page.detail-page .detail-hero-copy h1 {
        font-size: 1.8rem;
    }

    .instance-page.detail-page .webhook-toggle-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .instance-page.detail-page .recent-message-scroll {
        --instance-message-scroll-max: min(360px, calc(100dvh - 320px));
        max-height: var(--instance-message-scroll-max);
        min-height: 200px;
    }

    .instance-page.detail-page .detail-action-panel {
        grid-template-columns: 1fr;
    }
}

/* Phase polish: shared app shell, sidebar, settings, messages, and detail overflow */
.app-main {
    overflow-x: hidden;
    background: var(--bg-gradient);
    margin-left: 272px;
    min-height: 100vh;
    width: auto;
}

.app-main > .container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

.app-sidebar {
    width: 272px;
    flex: 0 0 272px;
    padding: 18px;
    color: var(--text-primary);
    background:
        radial-gradient(circle at top left, var(--waplix-accent-green-soft), transparent 34%),
        var(--sidebar-bg);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 40;
}

.app-sidebar .brand {
    min-height: 54px;
    padding: 10px 12px !important;
    margin-bottom: 14px !important;
    border-radius: 16px;
    background: var(--card-gradient);
    border: 1px solid var(--border-strong);
}

.app-sidebar .brand-mark {
    border-radius: 12px;
    color: var(--waplix-btn-text-on-accent);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.app-sidebar.user-sidebar .brand {
    display: none !important;
}

.sidebar-profile-card{
    position:relative;
    margin:0 0 18px;
    padding:16px;
    border-radius:22px;
    background: var(--card-gradient), var(--surface);
    border:1px solid var(--border-strong);
    box-shadow: var(--waplix-shadow-soft);
}

.sidebar-window-dots{
    display:flex;
    gap:7px;
    margin-bottom:14px;
}

.sidebar-window-dots i{
    width:8px;
    height:8px;
    border-radius:50%;
    display:block;
}

.sidebar-window-dots i:nth-child(1){background:#ff6b6b;}
.sidebar-window-dots i:nth-child(2){background:#ffd166;}
.sidebar-window-dots i:nth-child(3){background:#00f06a;}

.sidebar-profile-main{
    display:flex;
    align-items:center;
    gap:12px;
}

.sidebar-avatar{
    width:54px;
    height:54px;
    min-width:54px;
    border-radius:50%;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#06120d;
    border:2px solid rgba(0,240,106,.65);
    box-shadow:0 0 0 5px rgba(0,240,106,.08);
    color:#fff;
    font-size:20px;
    font-weight:900;
}

.sidebar-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:50%;
}

.sidebar-profile-main small{
    display:block;
    color: var(--text-muted);
    font-size:12px;
    font-weight:700;
    line-height:1.1;
}

.sidebar-profile-main strong{
    display:block;
    max-width:135px;
    color: var(--text-primary);
    font-size:16px;
    font-weight:900;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar-profile-main em{
    display:block;
    max-width:135px;
    margin-top:3px;
    color: var(--text-muted);
    font-size:11px;
    font-style:normal;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar-window-dots {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.sidebar-window-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.sidebar-window-dots i:nth-child(1) { background: #ff5f57; }
.sidebar-window-dots i:nth-child(2) { background: #ffc857; }
.sidebar-window-dots i:nth-child(3) { background: #00f06a; }

.sidebar-profile-main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.sidebar-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: #05110b;
    font-weight: 900;
    background: linear-gradient(135deg, #00f06a, #00d4ff);
}

.sidebar-profile-main small,
.sidebar-profile-main strong,
.sidebar-profile-main em {
    display: block;
    min-width: 0;
}

.sidebar-profile-main small {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
}

.sidebar-profile-main strong {
    color: var(--text-primary);
    font-size: .98rem;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-profile-main em {
    max-width: 160px;
    color: var(--text-muted);
    font-size: .68rem;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-section-label {
    margin: 18px 0 8px;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.app-sidebar a:not(.brand) {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 12px;
    color: var(--text-secondary);
    font-weight: 700;
    border: 1px solid transparent;
}

.app-sidebar a:not(.brand):hover,
.app-sidebar a:not(.brand).active {
    color: var(--text-primary);
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

.app-sidebar a:not(.brand).active {
    box-shadow: inset 4px 0 0 var(--accent);
}

.nav-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    color: var(--accent);
    background: var(--waplix-accent-green-soft);
    font-size: .82rem;
}

.instance-page.detail-page,
.instance-page.detail-page .detail-grid,
.instance-page.detail-page .detail-grid-wide,
.instance-page.detail-page .detail-card,
.instance-page.detail-page .webhook-card,
.instance-page.detail-page .detail-side-stack {
    min-width: 0;
}

.instance-page.detail-page {
    overflow-x: hidden;
}

.instance-page.detail-page .webhook-url-row {
    min-width: 0;
}

.instance-page.detail-page .webhook-url-row .form-control {
    min-width: 0;
}

.instance-page.detail-page .message-log-table-wrap,
.instance-page.detail-page .messages-table-scroll {
    max-width: 100%;
}

.app-main:has(.messages-page) {
    background: var(--bg-gradient);
}

.messages-page {
    --dash-panel: var(--surface);
    --dash-line: var(--border);
    --dash-green: var(--accent);
    --dash-cyan: var(--accent-2);
    --dash-text: var(--text-primary);
    --dash-muted: var(--text-secondary);
    --dash-soft: var(--text-muted);
    max-width: 1500px;
    margin: -8px auto 0;
    padding: 16px;
    color: var(--dash-text);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.messages-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 16px;
    align-items: end;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(0,240,106,0.20);
    background:
        linear-gradient(135deg, rgba(0,240,106,0.12), rgba(0,212,255,0.07)),
        rgba(15,23,42,0.86);
}

.messages-hero h1 {
    margin: 8px 0 6px;
    font-size: 2.25rem;
    font-weight: 850;
    line-height: 1;
}

.messages-hero p,
.messages-card-head p,
.messages-pagination-note {
    margin: 0;
    color: var(--dash-soft);
}

.messages-instance-picker {
    display: grid;
    gap: 7px;
}

.messages-instance-picker label,
.messages-send-form label {
    color: var(--dash-muted);
    font-size: .82rem;
    font-weight: 800;
}

.messages-page .form-control {
    min-height: 46px;
    border-radius: 14px;
    color: var(--dash-text);
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(148,163,184,0.18);
}

.messages-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 16px;
    margin-top: 16px;
    align-items: start;
}

.messages-card {
    min-width: 0;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid var(--dash-line);
    background:
        linear-gradient(135deg, rgba(0,240,106,0.075), rgba(0,212,255,0.04)),
        var(--dash-panel);
    box-shadow: 0 22px 70px rgba(0,0,0,0.24);
}

.messages-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
    margin-bottom: 14px;
}

.messages-card-head h2,
.messages-send-card h2 {
    margin: 6px 0 5px;
    font-size: 1.15rem;
    font-weight: 850;
}

.messages-card-head code {
    color: var(--dash-green);
}

.messages-filter-bar {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(90px, .45fr) minmax(90px, .45fr) 130px;
    gap: 9px;
    margin: 14px 0;
}

.messages-table-scroll {
    width: 100%;
    max-height: 560px;
    overflow: auto;
    padding-bottom: 4px;
}

.messages-table {
    width: 100%;
    min-width: 880px;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.messages-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px;
    color: var(--dash-soft);
    background: rgba(5,8,15,0.94);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.messages-table td {
    padding: 10px;
    color: var(--dash-muted);
    background: rgba(255,255,255,0.045);
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: .82rem;
    font-weight: 650;
    vertical-align: middle;
}

.messages-table td:first-child {
    border-left: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px 0 0 14px;
}

.messages-table td:last-child {
    border-right: 1px solid rgba(255,255,255,0.07);
    border-radius: 0 14px 14px 0;
}

.messages-preview {
    max-width: 260px;
    color: var(--dash-text) !important;
}

.messages-send-card {
    position: sticky;
    top: 84px;
}

.messages-send-form {
    display: grid;
    gap: 12px;
}

.messages-send-form label {
    display: grid;
    gap: 7px;
}

.messages-send-form textarea {
    min-height: 120px;
}

/* Messages page aligned with the WhatsApp Instances card system */
.messages-page .messages-hero {
    padding: 22px;
    border-radius: 26px;
    border: 1px solid var(--dash-line);
    background: var(--waplix-panel-bg);
    box-shadow: var(--waplix-card-shadow);
    backdrop-filter: blur(18px);
}

.messages-page .messages-hero h1 {
    margin: 8px 0 0;
    color: var(--dash-text);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.messages-page .messages-hero p {
    max-width: 680px;
    margin: 10px 0 0;
    color: var(--dash-muted);
    line-height: 1.55;
}

.messages-page .messages-layout {
    gap: 14px;
    margin-top: 14px;
}

.messages-page .messages-card {
    padding: 17px;
    border-radius: 24px;
    border: 1px solid var(--dash-line);
    background: var(--waplix-panel-bg);
    box-shadow: var(--waplix-card-shadow);
    backdrop-filter: blur(18px);
}

.messages-page .messages-table {
    border-collapse: separate;
    border-spacing: 0 9px;
}

.messages-page .messages-table th {
    padding: 10px 13px;
    background: transparent;
    border: 0;
    text-align: left;
}

.messages-page .messages-table td {
    padding: 13px;
    color: var(--dash-muted);
    background: var(--waplix-row-bg);
    border-top: 1px solid var(--waplix-row-border);
    border-bottom: 1px solid var(--waplix-row-border);
}

.messages-page .messages-table td:first-child {
    border-left: 1px solid var(--waplix-row-border);
    border-radius: 18px 0 0 18px;
}

.messages-page .messages-table td:last-child {
    border-right: 1px solid var(--waplix-row-border);
    border-radius: 0 18px 18px 0;
}

.messages-debug {
    max-height: 260px;
    overflow: auto;
    padding: 12px;
    border-radius: 14px;
    color: #dfffee;
    background: rgba(5,8,15,0.9);
    border: 1px solid rgba(0,240,106,0.18);
}

.settings-control-strip {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(15,23,42,0.72);
    border: 1px solid rgba(148,163,184,0.14);
}

.settings-search {
    display: grid;
    gap: 6px;
    color: #94a3b8;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.settings-search input {
    min-height: 44px;
    border-radius: 14px;
    padding: 0 14px;
    color: #f8fafc;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(148,163,184,0.18);
}

.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.settings-tabs a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    color: #cbd5e1;
    font-weight: 800;
    border: 1px solid rgba(148,163,184,0.16);
    background: rgba(255,255,255,0.035);
}

.settings-tabs a:hover,
.settings-tabs a:focus {
    color: #05110b;
    border-color: transparent;
    background: linear-gradient(135deg, #00f06a, #00d4ff);
}

.settings-picture-card {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 16px 12px;
    border-radius: 20px;
    border: 1px solid rgba(148,163,184,0.14);
    background: rgba(255,255,255,0.04);
    text-align: center;
}

.settings-picture-avatar {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #05110b;
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #00f06a, #00d4ff);
    box-shadow: 0 18px 42px rgba(0,240,106,0.16);
}

.settings-picture-card strong {
    color: #f8fafc;
    font-weight: 850;
}

.settings-picture-card small {
    max-width: 190px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-photo-btn {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    color: #05110b;
    font-weight: 850;
    background: linear-gradient(135deg, #00f06a, #00d4ff);
}

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

    .messages-send-card {
        position: static;
    }
}

@media (max-width: 900px) {
    .app-shell {
        display: block;
    }

    .app-sidebar {
        width: 100%;
        height: auto;
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 10px;
        border-right: 0;
        border-bottom: 1px solid rgba(148,163,184,0.12);
    }

    .app-sidebar .brand {
        min-width: 150px;
        margin: 0 !important;
    }

    .app-sidebar.user-sidebar .brand {
        display: none !important;
    }

    .sidebar-profile-card,
    .app-sidebar .nav-section-label {
        display: none;
    }

    .app-sidebar a:not(.brand) {
        flex: 0 0 auto;
        white-space: nowrap;
        margin: 0;
    }

    .messages-page,
    .settings-page {
        margin: 0;
        padding: 14px 0 86px;
    }

    .messages-hero,
    .settings-hero,
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .messages-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .messages-hero,
    .messages-card,
    .settings-control-strip {
        padding: 14px;
        border-radius: 20px;
    }

    .messages-hero h1 {
        font-size: 1.85rem;
    }

    .messages-filter-bar {
        grid-template-columns: 1fr;
    }

    .messages-card-head {
        display: grid;
    }

    .messages-table {
        min-width: 760px;
    }

    .messages-page .dash-primary-btn,
    .messages-page .dash-secondary-btn {
        width: 100%;
    }
}

.landing-page {
    --lp-bg: #05080f;
    --lp-bg-2: #07111f;
    --lp-bg-3: #081421;
    --lp-card: rgba(255,255,255,0.04);
    --lp-card-strong: rgba(15,23,42,0.88);
    --lp-card-solid: #101a2d;
    --lp-card-solid-2: #111f34;
    --lp-green: #00f06a;
    --lp-green-2: #00d95f;
    --lp-cyan: #00d4ff;
    --lp-cyan-2: #00b8d9;
    --lp-text: #f8fafc;
    --lp-muted: #cbd5e1;
    --lp-soft: #94a3b8;
    --lp-line: rgba(148,163,184,0.18);
    --lp-line-hot: rgba(0,240,106,0.32);
    --lp-mega-bg: rgba(16, 26, 45, 0.98);
    --lp-mega-border: rgba(148, 163, 184, 0.2);
    --lp-mega-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
    --lp-mega-hover: rgba(0, 240, 106, 0.08);
    margin: 0;
    color: var(--lp-text);
    background:
        radial-gradient(circle at top right, rgba(0,240,106,0.35), transparent 35%),
        radial-gradient(circle at left center, rgba(0,212,255,0.16), transparent 35%),
        linear-gradient(180deg, #05080f 0%, #07111f 44%, #05080f 100%);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}
.landing-page * { box-sizing: border-box; }
.landing-page a { color: inherit; text-decoration: none; }
.landing-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.landing-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    border-bottom: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, backdrop-filter .2s ease;
}
.landing-header.is-scrolled {
    border-bottom-color: var(--lp-line);
    background: rgba(5, 8, 15, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@supports (backdrop-filter: blur(8px)) {
    .landing-header.is-scrolled {
        background: rgba(5, 8, 15, 0.5);
    }
}
.landing-nav {
    position: relative;
    width: min(1140px, calc(100% - 32px));
    min-height: 56px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 4px;
}
.landing-nav-start {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.landing-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--lp-text);
    transition: background-color .18s ease;
}
.landing-brand:hover {
    background: rgba(255, 255, 255, 0.06);
}
.landing-logo-img {
    display: block;
    height: 32px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
.landing-nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
}
.landing-nav-item {
    position: relative;
}
.landing-nav-item::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: 100%;
    height: 14px;
}
.landing-nav-trigger,
.landing-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--lp-muted);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}
.landing-nav-trigger:hover,
.landing-nav-item.is-open .landing-nav-trigger,
.landing-nav-link:hover {
    color: var(--lp-text);
    background: rgba(255, 255, 255, 0.06);
}
.landing-nav-chevron {
    display: inline-flex;
    width: 14px;
    height: 14px;
    transition: transform .18s ease;
}
.landing-nav-chevron svg {
    width: 14px;
    height: 14px;
}
.landing-nav-item.is-open .landing-nav-chevron,
.landing-nav-item:hover .landing-nav-chevron {
    transform: rotate(180deg);
}
.landing-mega-menu,
.landing-dropdown-menu {
    position: absolute;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.landing-nav-item.is-open > .landing-mega-menu,
.landing-nav-item.is-open > .landing-dropdown-menu,
.landing-nav-item:hover > .landing-mega-menu,
.landing-nav-item:hover > .landing-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.landing-mega-menu {
    position: fixed;
    left: 50%;
    top: 56px;
    width: min(950px, calc(100vw - 48px));
    transform: translateX(-50%) translateY(12px);
    padding-top: 8px;
}
.landing-mega-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 12px;
}
.landing-nav-item.is-open > .landing-mega-menu,
.landing-nav-item:hover > .landing-mega-menu {
    transform: translateX(-50%) translateY(0);
}
.landing-mega-menu-inner,
.landing-dropdown-inner {
    border-radius: 18px;
    border: 1px solid var(--lp-mega-border);
    background: var(--lp-mega-bg);
    box-shadow: var(--lp-mega-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.landing-mega-menu-inner {
    padding: 28px 32px;
}
.landing-mega-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 42px;
}
.landing-mega-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 12px;
    margin: -10px -12px;
    border-radius: 12px;
    color: var(--lp-text);
    transition: background-color .18s ease, transform .18s ease;
}
.landing-mega-item:hover {
    background: var(--lp-mega-hover);
    transform: translateY(-1px);
}
.landing-mega-icon,
.landing-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid rgba(0, 240, 106, 0.22);
    background: linear-gradient(135deg, rgba(0, 240, 106, 0.14), rgba(0, 212, 255, 0.08));
    color: var(--lp-green);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.landing-mega-icon svg,
.landing-dropdown-icon svg {
    width: 22px;
    height: 22px;
}
.landing-mega-icon-sm {
    width: 40px;
    height: 40px;
}
.landing-mega-icon-sm svg {
    width: 18px;
    height: 18px;
}
.landing-mega-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.landing-mega-copy strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lp-text);
}
.landing-mega-copy span {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--lp-soft);
}
.landing-mega-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--lp-line);
    color: var(--lp-soft);
    font-size: 0.875rem;
}
.landing-mega-footer a {
    color: var(--lp-green);
    font-weight: 700;
}
.landing-mega-footer a:hover {
    color: var(--lp-cyan);
}
.landing-dropdown-menu {
    left: 0;
    top: calc(100% + 6px);
    min-width: 260px;
}
.landing-dropdown-inner {
    padding: 8px;
}
.landing-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--lp-text);
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color .18s ease;
}
.landing-dropdown-item:hover {
    background: var(--lp-mega-hover);
}
.landing-dropdown-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
.landing-dropdown-icon svg {
    width: 18px;
    height: 18px;
}
.landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.landing-btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.landing-btn-outline {
    color: var(--lp-text) !important;
    border: 1px solid var(--lp-line);
    background: transparent;
}
.landing-btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.32);
}
.landing-btn-primary {
    color: #03140a !important;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--lp-green), var(--lp-cyan));
    box-shadow: 0 10px 28px rgba(0, 240, 106, 0.18);
}
.landing-btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
.landing-menu-button {
    display: none;
    position: relative;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--lp-line);
    border-radius: 6px;
    background: transparent;
    color: var(--lp-text);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.landing-menu-button:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.32);
}
.landing-menu-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transition: opacity .18s ease, transform .18s ease;
}
.landing-menu-icon-open {
    opacity: 1;
    transform: scale(1);
}
.landing-menu-icon-close {
    opacity: 0;
    transform: scale(0);
}
.landing-menu-button[aria-expanded="true"] .landing-menu-icon-open {
    opacity: 0;
    transform: scale(0);
}
.landing-menu-button[aria-expanded="true"] .landing-menu-icon-close {
    opacity: 1;
    transform: scale(1);
}
.landing-mobile-drawer {
    position: fixed;
    inset: 56px 0 0;
    z-index: 49;
    pointer-events: none;
}
.landing-mobile-drawer.open {
    pointer-events: auto;
}
.landing-mobile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 12, 0.55);
    opacity: 0;
    transition: opacity .2s ease;
}
.landing-mobile-drawer.open .landing-mobile-backdrop {
    opacity: 1;
}
.landing-mobile-panel {
    position: relative;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity .2s ease, transform .2s ease;
}
.landing-mobile-drawer.open .landing-mobile-panel {
    opacity: 1;
    transform: scale(1);
}
.landing-mobile-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.landing-mobile-top-link,
.landing-mobile-sub-link,
.landing-mobile-feature-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--lp-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color .18s ease, background-color .18s ease;
}
.landing-mobile-top-link:hover,
.landing-mobile-sub-link:hover,
.landing-mobile-feature-link:hover,
.landing-mobile-top-link:active,
.landing-mobile-sub-link:active,
.landing-mobile-feature-link:active {
    color: var(--lp-text);
    background: rgba(255, 255, 255, 0.06);
}
.landing-mobile-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--lp-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}
.landing-mobile-accordion-trigger:hover,
.landing-mobile-accordion-trigger[aria-expanded="true"] {
    color: var(--lp-text);
    background: rgba(255, 255, 255, 0.06);
}
.landing-mobile-accordion-trigger[aria-expanded="true"] .landing-nav-chevron {
    transform: rotate(180deg);
}
.landing-mobile-accordion-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 0 0 8px;
    transition: max-height .28s ease, opacity .22s ease, padding .22s ease;
}
.landing-mobile-accordion-panel.is-open {
    max-height: 1200px;
    opacity: 1;
    padding: 4px 0 8px 8px;
}
.landing-mobile-feature-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.landing-mobile-feature-copy strong {
    color: var(--lp-text);
    font-size: 0.875rem;
}
.landing-mobile-feature-copy span {
    color: var(--lp-soft);
    font-size: 0.78rem;
    line-height: 1.4;
}
.landing-mobile-accordion-footer {
    margin-top: 8px;
    padding: 10px 12px 4px;
    color: var(--lp-soft);
    font-size: 0.8125rem;
}
.landing-mobile-accordion-footer a {
    color: var(--lp-green);
    font-weight: 700;
}
.landing-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}
.landing-mobile-actions .landing-btn {
    width: 100%;
    min-height: 40px;
}
body.landing-menu-open {
    overflow: hidden;
}
html[data-theme="light"] .landing-page .landing-header.is-scrolled {
    border-bottom-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.95);
}
@supports (backdrop-filter: blur(8px)) {
    html[data-theme="light"] .landing-page .landing-header.is-scrolled {
        background: rgba(255, 255, 255, 0.72);
    }
}
html[data-theme="light"] .landing-page .landing-brand:hover,
html[data-theme="light"] .landing-page .landing-nav-trigger:hover,
html[data-theme="light"] .landing-page .landing-nav-item.is-open .landing-nav-trigger,
html[data-theme="light"] .landing-page .landing-nav-link:hover,
html[data-theme="light"] .landing-page .landing-mobile-top-link:hover,
html[data-theme="light"] .landing-page .landing-mobile-sub-link:hover,
html[data-theme="light"] .landing-page .landing-mobile-feature-link:hover,
html[data-theme="light"] .landing-page .landing-mobile-accordion-trigger:hover {
    background: rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .landing-page {
    --lp-mega-bg: rgba(255, 255, 255, 0.98);
    --lp-mega-border: rgba(15, 23, 42, 0.1);
    --lp-mega-shadow: 0 24px 64px rgba(15, 23, 42, 0.14);
    --lp-mega-hover: rgba(0, 200, 120, 0.08);
}
html[data-theme="light"] .landing-page .landing-btn-outline:hover {
    background: rgba(15, 23, 42, 0.04);
}
.feature-hero-section {
    padding: 72px 0 36px;
}
.feature-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 40px;
    align-items: center;
}
.feature-hero-content h1 {
    margin: 12px 0 16px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.feature-hero-content p {
    max-width: 620px;
    color: var(--lp-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}
.feature-hero-content-centered {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.feature-hero-content-centered .hero-actions {
    justify-content: center;
}
.feature-simple-copy {
    color: var(--lp-soft) !important;
}
.feature-hero-card {
    padding: 28px;
}
.feature-hero-card-top h2 {
    margin: 14px 0 10px;
    font-size: 1.35rem;
}
.feature-hero-card-top p {
    color: var(--lp-soft);
    margin: 0;
}
.feature-hero-badge {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 240, 106, 0.12);
    border: 1px solid rgba(0, 240, 106, 0.24);
    color: var(--lp-green);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.feature-hero-points {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}
.feature-hero-points li {
    position: relative;
    padding-left: 18px;
    color: var(--lp-muted);
    font-size: 0.92rem;
}
.feature-hero-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lp-green);
}
.feature-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.feature-benefit-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 22px;
    border-radius: 18px;
    border: 1px solid var(--lp-line);
    background: var(--lp-card);
}
.feature-benefit-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(0, 240, 106, 0.12);
    color: var(--lp-green);
    font-weight: 800;
    flex-shrink: 0;
}
.feature-benefit-card p {
    margin: 0;
    color: var(--lp-muted);
    line-height: 1.6;
}
@media (max-width: 768px) {
    .landing-mega-menu,
    .landing-dropdown-menu {
        display: none !important;
    }
    .feature-hero-grid,
    .feature-benefits-grid {
        grid-template-columns: 1fr;
    }
    .feature-hero-section {
        padding-top: 48px;
        text-align: center;
    }
    .feature-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }
}
@media (min-width: 769px) {
    .landing-mobile-accordion,
    .landing-mobile-feature-link,
    .landing-mobile-sub-link,
    .landing-mobile-accordion-footer {
        display: none;
    }
}
.neon-button,
.outline-neon-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 16px;
    font-weight: 600;
    transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}
.neon-button {
    color: #03140a !important;
    background: linear-gradient(135deg, var(--lp-green), var(--lp-cyan));
    box-shadow: 0 18px 52px rgba(0,240,106,0.23);
}
.outline-neon-button {
    color: var(--lp-text) !important;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.04);
}
.neon-button:hover,
.outline-neon-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.hero-section {
    position: relative;
    padding: 82px 0 28px;
}
.hero-section::before {
    content: "";
    position: absolute;
    width: 580px;
    height: 580px;
    right: -220px;
    top: -200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,240,106,0.24), transparent 64%);
    pointer-events: none;
}
.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 54px;
    align-items: center;
}
.hero-kicker,
.section-label {
    color: var(--lp-green);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: .74rem;
    font-weight: 700;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.hero-kicker span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lp-green);
    box-shadow: 0 0 22px rgba(0,240,106,0.8);
}
.hero-content h1,
.section-heading h2,
.api-section h2,
.message-types-content h2,
.final-cta-card h2 {
    margin: 0;
    color: var(--lp-text);
    font-weight: 700;
    letter-spacing: -0.035em;
}
.hero-content h1 {
    max-width: 760px;
    font-size: clamp(3.1rem, 7.2vw, 6.9rem);
    font-weight: 800;
    line-height: .94;
}
.accent-text {
    color: var(--lp-green);
    text-shadow: 0 0 34px rgba(0,240,106,0.24);
}
.hero-content p,
.api-section p,
.message-types-content p,
.section-heading p,
.final-cta-card p {
    color: var(--lp-muted);
    line-height: 1.7;
    font-size: 1.08rem;
}
.hero-content p { max-width: 680px; margin: 24px 0 0; }
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 26px;
    color: var(--lp-soft);
    font-size: .92rem;
}
.hero-trust span::before {
    content: "";
    width: 7px;
    height: 7px;
    display: inline-block;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--lp-green);
}
.hero-visual { min-width: 0; }
.glass-card,
.gradient-card {
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(0,240,106,0.10), rgba(0,212,255,0.06)),
        rgba(255,255,255,0.04);
    border: 1px solid var(--lp-line);
    box-shadow: 0 22px 70px rgba(0,0,0,0.24);
}
.gradient-card {
    background:
        linear-gradient(135deg, rgba(0,240,106,0.20), rgba(0,212,255,0.12)),
        rgba(255,255,255,0.04);
}
.app-preview-card {
    position: relative;
    padding: 26px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 80% 0%, rgba(0,240,106,0.20), transparent 38%),
        linear-gradient(135deg, rgba(15,23,42,0.92), rgba(8,20,33,0.92));
    border: 1px solid var(--lp-line-hot);
    box-shadow: 0 34px 100px rgba(0,0,0,0.46), 0 0 62px rgba(0,240,106,0.16);
}
.preview-top {
    display: flex;
    align-items: center;
    gap: 14px;
}
.preview-avatar,
.preview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #03140a;
    background: linear-gradient(135deg, var(--lp-green), var(--lp-green-2));
    box-shadow: 0 16px 40px rgba(0,240,106,0.22);
}
.preview-avatar {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 1.5rem;
    font-weight: 800;
}
.preview-top h2 { margin: 0; font-size: 1.45rem; font-weight: 700; color: var(--lp-text); }
.preview-top p { margin: 2px 0 0; color: var(--lp-soft); }
.status-pill {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--lp-muted);
    background: rgba(255,255,255,0.055);
    border: 1px solid var(--lp-line);
    font-size: .78rem;
    font-weight: 600;
}
.status-pill.live { color: #8affbd; border-color: rgba(0,240,106,0.32); background: rgba(0,240,106,0.10); }
.status-pill.cyan { color: #8bedff; border-color: rgba(0,212,255,0.3); background: rgba(0,212,255,0.10); }
.preview-balance {
    margin: 24px 0 18px;
    padding: 24px;
    border-radius: 28px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.08);
}
.preview-label { color: var(--lp-soft); font-weight: 600; }
.preview-plan {
    margin-top: 6px;
    color: var(--lp-text);
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.06em;
}
.preview-progress {
    height: 10px;
    margin: 20px 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.preview-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--lp-green), var(--lp-cyan));
}
.preview-meta {
    display: flex;
    justify-content: space-between;
    color: var(--lp-muted);
}
.preview-button {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #03140a !important;
    background: linear-gradient(135deg, var(--lp-green), var(--lp-green-2));
    font-weight: 600;
    box-shadow: 0 18px 48px rgba(0,240,106,0.24);
}
.preview-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}
.preview-actions div {
    min-width: 0;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--lp-line);
}
.preview-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    margin-bottom: 12px;
    font-weight: 700;
}
.preview-icon.cyan { background: linear-gradient(135deg, var(--lp-cyan), var(--lp-cyan-2)); box-shadow: 0 16px 40px rgba(0,212,255,0.22); }
.preview-actions strong,
.preview-actions small { display: block; }
.preview-actions strong { color: var(--lp-text); font-size: .86rem; }
.preview-actions small { color: var(--lp-soft); }
.preview-footer {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.benefit-row { padding: 24px 0 46px; }
.benefit-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 999px;
    color: var(--lp-muted);
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--lp-line);
    font-weight: 500;
}
.badge-pill i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lp-green), var(--lp-cyan));
    box-shadow: 0 0 18px rgba(0,240,106,0.5);
}
.landing-section { padding: 82px 0; }
.api-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 42px;
    align-items: center;
}
.api-section h2,
.section-heading h2,
.final-cta-card h2 {
    margin-top: 12px;
    font-size: clamp(2.1rem, 4.4vw, 4rem);
    line-height: 1;
}
.api-section p,
.message-types-content p,
.section-heading p { margin-top: 18px; max-width: 720px; }
.api-terminal-wrap {
    min-width: 0;
}
.language-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}
.language-pills button {
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--lp-soft);
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--lp-line);
    font-weight: 600;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.language-pills button:hover {
    transform: translateY(-1px);
    border-color: rgba(0,240,106,0.38);
}
.language-pills button.active {
    color: #03140a;
    background: linear-gradient(135deg, var(--lp-green), var(--lp-cyan));
    box-shadow: 0 14px 36px rgba(0,240,106,0.18);
}
.code-card {
    border-radius: 28px;
    background: #070b12;
    border: 1px solid rgba(0,240,106,0.24);
    box-shadow: 0 30px 90px rgba(0,0,0,0.42);
    overflow: hidden;
}
.code-card-top {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);
}
.code-card-top div { display: flex; gap: 8px; }
.code-card-top div span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
}
.code-card-top div span:first-child { background: var(--lp-green); }
.code-card-top .code-card-title,
.code-card-header .code-card-title {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}
.code-card-top button {
    border: 0;
    color: var(--lp-text);
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 600;
}
.code-card pre {
    margin: 0;
    padding: 24px;
    color: #dfffe9;
    overflow-x: auto;
}
.code-card code { color: inherit; white-space: pre; }
.language-strip-section {
    padding: 18px 0 28px;
}
.language-icon-strip {
    display: grid;
    grid-template-columns: repeat(8, minmax(58px, 1fr));
    gap: 14px;
    align-items: center;
    justify-items: center;
    padding: 22px;
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(235,255,247,0.9)),
        rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.58);
    box-shadow: 0 28px 90px rgba(0,0,0,0.24), 0 0 52px rgba(0,212,255,0.06);
}
.language-icon-strip span {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: rgba(255,255,255,0.74);
    box-shadow: 0 14px 34px rgba(15,23,42,0.12);
}
.language-icon-strip img {
    display: block;
    width: min(56px, 78%);
    max-height: 52px;
    object-fit: contain;
}
.message-types-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 20%, rgba(0,240,106,0.16), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
}
.message-types-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 46px;
    align-items: center;
}
.message-types-content h2 {
    margin-top: 12px;
    font-size: clamp(2.1rem, 4vw, 4rem);
    line-height: 1.02;
}
.message-list-wrap {
    display: grid;
    gap: 24px;
    margin-top: 32px;
}
.message-list-wrap h3 {
    color: var(--lp-text);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.check-grid.channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.check-grid li {
    color: var(--lp-muted);
    font-weight: 500;
}
.check-grid li::before {
    content: "✓";
    margin-right: 9px;
    color: var(--lp-green);
    text-shadow: 0 0 16px rgba(0,240,106,0.5);
}
.message-mockup-wrap {
    min-width: 0;
    border-radius: 34px;
    padding: 18px;
    background:
        radial-gradient(circle at top left, rgba(0,240,106,0.2), transparent 34%),
        radial-gradient(circle at bottom right, rgba(0,212,255,0.18), transparent 32%),
        rgba(255,255,255,0.055);
    border: 1px solid var(--lp-line);
    box-shadow: 0 34px 100px rgba(0,0,0,0.28);
}
.message-phone-card {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: 30px;
    padding: 24px;
    background:
        linear-gradient(180deg, #fbfffd 0%, #eef8f4 100%);
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08);
}
.chat-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #101a2d;
    margin-bottom: 24px;
}
.chat-topbar span {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--lp-green), var(--lp-cyan));
}
.chat-topbar strong { font-weight: 700; }
.chat-topbar small {
    margin-left: auto;
    color: #059669;
    font-weight: 600;
}
.chat-bubble,
.voice-note,
.doc-card,
.location-card {
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15,23,42,0.1);
}
.chat-bubble.incoming {
    width: max-content;
    max-width: 72%;
    padding: 16px 18px;
    color: #101a2d;
    font-weight: 500;
}
.image-card {
    width: min(290px, 74%);
    margin: 26px 0 0 auto;
    padding: 12px;
}
.image-sky {
    height: 150px;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(circle at 78% 28%, #ffd95a 0 11px, transparent 12px),
        linear-gradient(180deg, #85ddff 0%, #a9efff 52%, #3ab3d7 100%);
}
.image-sky span {
    display: block;
    width: 150px;
    height: 90px;
    margin: 82px auto 0;
    border-radius: 50% 50% 0 0;
    background: rgba(3,105,161,0.35);
}
.image-card small,
.doc-card small,
.location-card small {
    display: block;
    color: #64748b;
    margin-top: 9px;
}
.chat-row {
    display: grid;
    grid-template-columns: 1fr 132px;
    gap: 14px;
    margin-top: 18px;
}
.voice-note {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 15px;
}
.voice-note i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lp-green), var(--lp-cyan));
}
.voice-note span {
    flex: 1;
    height: 7px;
    border-radius: 999px;
    background: #d1fae5;
}
.voice-note span:nth-of-type(2) { flex: .65; background: #a7f3d0; }
.voice-note span:nth-of-type(3) { flex: .38; background: #67e8f9; }
.voice-note small { color: #64748b; font-weight: 600; }
.doc-card {
    padding: 14px;
    color: #101a2d;
}
.doc-card b {
    display: inline-flex;
    padding: 7px 9px;
    border-radius: 10px;
    color: #fff;
    background: #ff3b5c;
    font-size: .8rem;
}
.location-card {
    margin-top: 18px;
    padding: 14px;
    color: #101a2d;
}
.map-grid {
    position: relative;
    height: 118px;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(16,185,129,0.16) 1px, transparent 1px),
        linear-gradient(0deg, rgba(14,165,233,0.15) 1px, transparent 1px),
        linear-gradient(135deg, #e0fbea, #e0f7ff);
    background-size: 34px 34px;
}
.map-grid span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    border-radius: 50% 50% 50% 0;
    rotate: -45deg;
    background: var(--lp-green);
    box-shadow: 0 0 0 8px rgba(0,240,106,0.18);
}
.location-card strong {
    display: block;
    margin-top: 12px;
}
.section-heading {
    max-width: 780px;
    margin: 0 auto 38px;
    text-align: center;
}
.feature-grid,
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.feature-card,
.pricing-card,
.faq-card,
.use-case-card,
.step-card,
.final-cta-card {
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(0,240,106,0.08), rgba(0,212,255,0.045)),
        rgba(255,255,255,0.04);
    border: 1px solid var(--lp-line);
    box-shadow: 0 22px 70px rgba(0,0,0,0.22);
}
.feature-card {
    padding: 24px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--lp-line-hot);
    box-shadow: 0 28px 90px rgba(0,0,0,0.3), 0 0 45px rgba(0,240,106,0.09);
}
.feature-icon,
.step-card span,
.use-case-card span {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: #03140a;
    background: linear-gradient(135deg, var(--lp-green), var(--lp-cyan));
    font-weight: 700;
    box-shadow: 0 16px 42px rgba(0,240,106,0.22);
}
.feature-card h3,
.step-card h3,
.use-case-card h3,
.pricing-card h3 {
    margin: 18px 0 10px;
    color: var(--lp-text);
    font-size: 1.12rem;
    font-weight: 700;
}
.feature-card p,
.step-card p,
.use-case-card p,
.pricing-card p,
.faq-card p {
    color: var(--lp-soft);
    line-height: 1.65;
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.step-card { padding: 22px; position: relative; }
.use-case-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.use-case-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    align-items: flex-start;
}
.use-case-card span { flex: 0 0 auto; width: 42px; height: 42px; }
.use-case-card h3 { margin-top: 0; }
.pricing-card {
    position: relative;
    padding: 26px;
}
.pricing-card.popular {
    border-color: var(--lp-line-hot);
    box-shadow: 0 30px 100px rgba(0,0,0,0.34), 0 0 60px rgba(0,240,106,0.12);
}
.popular-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #03140a;
    background: linear-gradient(135deg, var(--lp-green), var(--lp-cyan));
    font-size: .74rem;
    font-weight: 700;
}
.price {
    margin: 12px 0 8px;
    color: var(--lp-text);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.05em;
}
.pricing-card ul {
    margin: 20px 0;
    padding: 0;
    list-style: none;
    color: var(--lp-muted);
}
.pricing-card li { margin: 10px 0; }
.pricing-card li::before {
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--lp-green);
}
.pricing-card a { width: 100%; }
.faq-wrap { max-width: 900px; }
.faq-list { display: grid; gap: 12px; }
.faq-card { overflow: hidden; }
.faq-card button {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    color: var(--lp-text);
    border: 0;
    background: transparent;
    text-align: left;
    font-weight: 600;
}
.faq-card i {
    width: 24px;
    height: 24px;
    position: relative;
    flex: 0 0 auto;
}
.faq-card i::before,
.faq-card i::after {
    content: "";
    position: absolute;
    inset: 11px 4px auto;
    height: 2px;
    border-radius: 2px;
    background: var(--lp-green);
}
.faq-card i::after { transform: rotate(90deg); transition: transform .16s ease; }
.faq-card.open i::after { transform: rotate(0deg); }
.faq-card p {
    display: none;
    margin: 0;
    padding: 0 22px 20px;
}
.faq-card.open p { display: block; }
.final-cta-section { padding-top: 40px; }
.final-cta-card {
    padding: clamp(30px, 6vw, 64px);
    text-align: center;
    background:
        radial-gradient(circle at 20% 0%, rgba(0,240,106,0.28), transparent 38%),
        radial-gradient(circle at 90% 20%, rgba(0,212,255,0.18), transparent 34%),
        linear-gradient(135deg, rgba(0,240,106,0.10), rgba(0,212,255,0.08));
    border-color: var(--lp-line-hot);
}
.final-cta-card .hero-actions,
.final-cta-card .hero-trust { justify-content: center; }
.landing-footer {
    padding: 54px 0;
    border-top: 1px solid rgba(148,163,184,0.14);
    background: rgba(5,8,15,0.74);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 28px;
}
.landing-footer p,
.landing-footer a {
    display: block;
    color: var(--lp-soft);
    margin: 9px 0;
}
.landing-footer h3 {
    color: var(--lp-text);
    font-size: .95rem;
    font-weight: 700;
}
@media (max-width: 768px) {
    .landing-container,
    .landing-nav { width: min(100% - 28px, 1024px); }
    .landing-nav-links,
    .landing-nav-actions { display: none; }
    .landing-menu-button { display: inline-flex; }
    .landing-logo-img { height: 28px; max-width: 140px; }
    .hero-grid,
    .api-grid,
    .message-types-grid { grid-template-columns: 1fr; }
    .hero-section { padding-top: 48px; text-align: center; }
    .hero-content p { margin-left: auto; margin-right: auto; }
    .hero-actions,
    .hero-trust { justify-content: center; }
    .hero-visual { max-width: 480px; width: 100%; margin: 0 auto; }
    .api-terminal-wrap { order: 2; }
    .language-icon-strip {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    .message-mockup-wrap {
        max-width: 560px;
        width: 100%;
        margin: 0 auto;
    }
    .feature-grid,
    .pricing-grid,
    .steps-grid,
    .use-case-grid,
    .footer-grid { grid-template-columns: 1fr; }
    .section-heading { text-align: left; margin-left: 0; }
}
@media (max-width: 520px) {
    .landing-container,
    .landing-nav { width: calc(100% - 24px); }
    .hero-content h1 { font-size: clamp(2.75rem, 15vw, 4.25rem); }
    .hero-content p,
    .api-section p,
    .section-heading p { font-size: 1rem; }
    .hero-actions a,
    .final-cta-card .hero-actions a { width: 100%; }
    .app-preview-card { padding: 18px; border-radius: 28px; }
    .preview-top { align-items: flex-start; }
    .status-pill { margin-left: 0; }
    .preview-top { flex-wrap: wrap; }
    .preview-actions { grid-template-columns: 1fr; }
    .preview-footer { flex-wrap: wrap; }
    .preview-plan { font-size: 2.6rem; }
    .landing-section { padding: 58px 0; }
    .benefit-wrap { justify-content: flex-start; }
    .badge-pill { width: 100%; }
    .language-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .language-pills button {
        flex: 0 0 auto;
    }
    .code-card pre { padding: 18px; }
    .language-strip-section { padding-top: 6px; }
    .language-icon-strip {
        padding: 14px;
        border-radius: 24px;
    }
    .language-icon-strip span {
        width: 100%;
        height: 64px;
        border-radius: 18px;
    }
    .language-icon-strip img {
        width: min(50px, 78%);
        max-height: 48px;
    }
    .message-types-content h2 { font-size: clamp(2rem, 11vw, 3.1rem); }
    .message-list-wrap { margin-top: 26px; }
    .check-grid,
    .check-grid.channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .message-mockup-wrap {
        padding: 10px;
        border-radius: 26px;
    }
    .message-phone-card {
        min-height: auto;
        padding: 16px;
        border-radius: 22px;
    }
    .chat-row {
        grid-template-columns: 1fr;
    }
    .image-card {
        width: 88%;
    }
    .chat-bubble.incoming {
        max-width: 86%;
    }
    .use-case-card { padding: 16px; }
    .pricing-card,
    .feature-card,
    .step-card { border-radius: 24px; }
    .landing-footer { padding-bottom: 36px; }
}

/* Final scoped settings override: later dashboard/button rules must not darken these CTAs. */
.settings-page form.settings-form > button.dash-primary-btn,
.settings-page form.settings-form > button.dash-primary-btn[type="submit"] {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: #05110b !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #00f06a, #00d4ff) !important;
  box-shadow: 0 18px 38px rgba(0,240,106,0.18), 0 12px 28px rgba(0,212,255,0.10) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.settings-page form.settings-form > button.dash-primary-btn:hover,
.settings-page form.settings-form > button.dash-primary-btn:focus {
  color: #05110b !important;
  background: linear-gradient(135deg, #20ff83, #16dcff) !important;
  box-shadow: 0 22px 46px rgba(0,240,106,0.24), 0 14px 34px rgba(0,212,255,0.14) !important;
}

.app-main:has(.documentation-page) {
  background: var(--bg-gradient);
}

.documentation-page {
  display: grid;
  grid-template-columns: 280px minmax(0, 900px) 330px;
  gap: 18px;
  align-items: start;
  color: var(--text-primary);
}

.docs-left-nav,
.docs-playground-card,
.docs-card,
.docs-endpoint-card,
.docs-hero {
  border: 1px solid var(--border);
  background: var(--card-gradient), var(--surface);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.docs-search-box label {
  color: var(--text-muted);
}

.docs-search-box input,
.docs-playground input,
.docs-playground select,
.docs-playground textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--input-border);
  border-radius: 14px;
  color: var(--input-text);
  background: var(--input-bg);
  padding: 0 12px;
  outline: none;
}

.docs-left-nav:not([data-docs-drawer]),
.docs-playground {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 108px);
  overflow: auto;
  scrollbar-width: thin;
}

.docs-left-nav {
  padding: 14px;
}

.docs-left-nav summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 900;
  font-size: 0.86rem;
}

.docs-left-nav a {
  color: var(--text-muted);
}

.docs-left-nav a.active,
.docs-left-nav a:hover {
  color: var(--waplix-btn-text-on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.docs-hero p,
.docs-section-head p,
.docs-card p,
.docs-endpoint-card p {
  color: var(--text-secondary);
}

.docs-auth-grid div {
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.documentation-page .code-card {
  border: 1px solid var(--border);
  background: var(--waplix-code-bg);
}

.documentation-page .code-card pre,
.documentation-page pre,
.docs-playground pre {
  color: var(--waplix-code-text);
  background: var(--waplix-code-bg);
}

.webhook-doc-card {
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.webhook-doc-card span {
  color: var(--text-secondary);
}

.docs-language-tabs button {
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--surface-soft);
}

.developer-response-panel {
  color: var(--waplix-code-text);
  background: var(--waplix-code-bg);
  border: 1px solid var(--border-strong);
}

.dash-secondary-btn,
.docs-playground-actions .dash-secondary-btn,
.endpoint-row button,
.developer-copy-box button {
  color: var(--text-primary) !important;
  background: var(--surface-soft) !important;
  border: 1px solid var(--border) !important;
  opacity: 1 !important;
}

.dash-secondary-btn:hover,
.docs-playground-actions .dash-secondary-btn:hover {
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.docs-left-nav {
  padding: 14px;
}

.docs-search-box {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.docs-search-box label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.docs-search-box input,
.docs-playground input,
.docs-playground select,
.docs-playground textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--input-border);
  border-radius: 14px;
  color: var(--input-text);
  background: var(--input-bg);
  padding: 0 12px;
  outline: none;
}

.docs-playground textarea {
  min-height: 76px;
  padding-top: 10px;
}

.docs-search-box input:focus,
.docs-playground input:focus,
.docs-playground select:focus,
.docs-playground textarea:focus {
  border-color: var(--border-strong);
  box-shadow: var(--waplix-focus-ring);
}

.docs-left-nav details {
  border-bottom: 1px solid rgba(148,163,184,0.08);
  padding: 5px 0;
}

.docs-nav-group {
  margin-bottom: 2px;
}

.docs-left-nav summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 900;
  font-size: 0.86rem;
  list-style: none;
  padding: 8px 9px;
}

.docs-left-nav summary::-webkit-details-marker {
  display: none;
}

.docs-nav-group > summary::after {
  content: "▾";
  flex: 0 0 auto;
  color: #64748b;
  font-size: 0.72rem;
  transition: transform .18s ease, color .18s ease;
}

.docs-nav-group:not([open]) > summary::after {
  transform: rotate(-90deg);
}

.docs-nav-links {
  display: grid;
  gap: 4px;
  padding: 4px 0 6px 8px;
}

.docs-left-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 3px 0 6px;
  padding: 9px 11px;
  border-radius: 13px;
  color: #94a3b8;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.docs-left-nav a span {
  flex: 1 1 auto;
  min-width: 0;
}

.docs-left-nav a.active,
.docs-left-nav a:hover {
  color: var(--text-primary);
  background: var(--docs-active);
  border-color: var(--border-strong);
}

.documentation-body .docs-left-nav .method-pill,
.docs-left-nav .method-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 38px;
  padding: 4px 7px;
  border: 1px solid rgba(96,165,250,0.42);
  border-radius: 7px;
  color: #ffffff !important;
  background: #0b83ff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 18px rgba(11,131,255,0.14);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: none;
}

.documentation-body .docs-left-nav .method-post,
.docs-left-nav .method-post {
  background: #168bff !important;
}

.documentation-body .docs-left-nav a.active .method-pill,
.documentation-body .docs-left-nav a:hover .method-pill,
.docs-left-nav a.active .method-pill,
.docs-left-nav a:hover .method-pill {
  color: #ffffff !important;
  background: #0673df !important;
}

.docs-content {
  display: grid;
  gap: 18px;
}

.docs-hero,
.docs-card,
.docs-endpoint-card {
  padding: 22px;
}

.docs-hero {
  border-color: var(--border-strong);
  background: var(--card-gradient), var(--surface);
}

.docs-hero h1 {
  margin: 10px 0;
  font-size: clamp(2.35rem, 5vw, 4.4rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--text-primary);
}

.docs-hero p,
.docs-section-head p,
.docs-card p,
.docs-endpoint-card p {
  color: var(--text-secondary);
}

.docs-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.docs-section-head {
  margin-bottom: 14px;
}

.docs-section-head h2,
.docs-card h2 {
  margin: 8px 0 7px;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.035em;
}

.docs-steps {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding-left: 20px;
  color: #cbd5e1;
}

.docs-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.docs-auth-grid div {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(15,23,42,0.62);
}

.docs-auth-grid small {
  color: #94a3b8;
  font-weight: 900;
  text-transform: uppercase;
}

.docs-auth-grid code,
.docs-endpoint-top code {
  color: #8be9ff;
  word-break: break-word;
}

.docs-auth-grid button,
.docs-endpoint-top button,
.code-card-top button {
  border: 0;
  border-radius: 999px;
  color: #05110b;
  font-weight: 900;
  background: linear-gradient(135deg, #00f06a, #00d4ff);
  padding: 7px 12px;
}

.docs-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,200,87,0.25);
  background: rgba(255,200,87,0.08);
}

.docs-endpoint-card {
  margin-bottom: 14px;
}

.docs-endpoint-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.docs-endpoint-top h3 {
  margin: 0 0 4px;
  font-size: 1.18rem;
  font-weight: 900;
}

.docs-endpoint-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 14px;
  margin-top: 14px;
}

.docs-endpoint-grid h4 {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.docs-endpoint-grid li,
.docs-endpoint-grid p {
  color: var(--text-secondary);
}

.docs-code-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.documentation-page .code-card {
  border: 1px solid var(--border);
  background: var(--waplix-code-bg);
}

.documentation-page .code-card pre,
.documentation-page pre {
  max-height: 320px;
  overflow: auto;
}

.webhook-doc-grid {
  display: grid;
  gap: 10px;
}

.webhook-doc-card {
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 18px;
  background: rgba(15,23,42,0.76);
  overflow: hidden;
}

.webhook-doc-card summary {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  cursor: pointer;
}

.webhook-doc-card strong {
  color: #00f06a;
}

.webhook-doc-card span {
  color: #cbd5e1;
}

.webhook-doc-card .code-card {
  margin: 0 14px 14px;
}

.docs-language-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.docs-language-tabs button {
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 999px;
  color: #cbd5e1;
  font-weight: 900;
  background: rgba(15,23,42,0.72);
  padding: 9px 14px;
}

.docs-language-tabs button.active,
.docs-language-tabs button:hover {
  color: #05110b;
  background: linear-gradient(135deg, #00f06a, #00d4ff);
}

.docs-playground-card {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.docs-playground-card h2 {
  margin: 0;
  font-weight: 900;
}

.docs-playground label {
  display: grid;
  gap: 7px;
  color: #cbd5e1;
  font-size: 0.8rem;
  font-weight: 900;
}

.docs-playground .dash-primary-btn {
  min-height: 46px;
}

.documentation-body .docs-playground button.dash-primary-btn,
.docs-playground button.dash-primary-btn {
  border: 0;
  color: #03140a !important;
  background: linear-gradient(135deg, #00f06a, #00d4ff) !important;
  box-shadow: 0 16px 42px rgba(0,240,106,0.18), 0 0 0 1px rgba(255,255,255,0.08) inset;
  font-weight: 900;
  text-shadow: none;
}

.documentation-body .docs-playground button.dash-primary-btn:hover,
.documentation-body .docs-playground button.dash-primary-btn:focus,
.docs-playground button.dash-primary-btn:hover,
.docs-playground button.dash-primary-btn:focus {
  color: #03140a !important;
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.docs-playground pre {
  min-height: 160px;
  padding: 14px;
  border-radius: 16px;
  color: #cbd5e1;
  background: #090f1d;
}

.docs-drawer-btn {
  display: none;
}

.docs-hidden {
  display: none !important;
}

.documentation-body {
  min-height: 100vh;
  color: var(--docs-text);
  background: transparent;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.docs-public-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
}

.docs-public-brand .logo-dark,
.docs-public-brand .logo-light {
  height: 34px;
  width: auto;
}

.docs-public-topbar nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.docs-public-topbar a {
  color: #cbd5e1;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.docs-public-topbar a:hover {
  color: #00f06a;
}

.docs-topbar-cta {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  color: #05110b !important;
  background: linear-gradient(135deg, #00f06a, #00d4ff);
}

.documentation-body .documentation-page {
  width: 100%;
  max-width: none;
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  font-size: 14px;
}

.documentation-body .docs-section {
  display: none;
}

.documentation-body .docs-section.active {
  display: block;
}

.documentation-body .docs-left-nav:not([data-docs-drawer]),
.documentation-body .docs-playground {
  top: 72px;
  max-height: calc(100vh - 90px);
}

.documentation-body .docs-left-nav,
.documentation-body .docs-playground-card,
.documentation-body .docs-card,
.documentation-body .docs-endpoint-card,
.documentation-body .docs-hero {
  border-radius: 12px;
  border-color: var(--docs-border);
  background: var(--docs-panel);
  box-shadow: var(--shadow-soft);
}

.documentation-body .docs-left-nav {
  padding: 12px;
}

.documentation-body .docs-search-box input,
.documentation-body .docs-playground input,
.documentation-body .docs-playground select,
.documentation-body .docs-playground textarea {
  min-height: 36px;
  border-radius: 8px;
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
  font-size: 0.82rem;
}

.documentation-body .docs-left-nav details {
  border: 0;
}

.documentation-body .docs-nav-group {
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.documentation-body .docs-left-nav summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.documentation-body .docs-nav-group > summary::after {
  content: "▾";
  color: #667085;
  font-size: 0.68rem;
  transition: transform .18s ease, color .18s ease;
}

.documentation-body .docs-nav-group:not([open]) > summary::after {
  transform: rotate(-90deg);
}

.documentation-body .docs-nav-links {
  padding: 2px 0 4px 8px;
}

.documentation-body .docs-left-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 600;
}

.documentation-body .docs-left-nav a span {
  flex: 1 1 auto;
  min-width: 0;
}

.documentation-body .docs-left-nav a.active,
.documentation-body .docs-left-nav a:hover {
  color: var(--accent);
  background: var(--docs-active);
}

.documentation-body .docs-hero,
.documentation-body .docs-card,
.documentation-body .docs-endpoint-card {
  padding: 22px;
}

.documentation-body .docs-hero {
  background: transparent;
  border: 0;
  padding: 0 0 18px;
}

.documentation-body .docs-hero h1,
.documentation-body .docs-section-head h2,
.documentation-body .docs-card h2 {
  font-size: clamp(2rem, 3vw, 2.85rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.documentation-body .docs-section-head h2,
.documentation-body .docs-card h2 {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}

.documentation-body .docs-hero p,
.documentation-body .docs-section-head p,
.documentation-body .docs-card p,
.documentation-body .docs-endpoint-card p,
.documentation-body .docs-endpoint-grid li {
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.65;
}

.documentation-body .dash-kicker {
  font-size: 0.66rem;
}

.documentation-body .docs-endpoint-top {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.documentation-body .docs-endpoint-top h3 {
  font-size: 1rem;
}

.documentation-body .method-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  border: 1px solid rgba(96,165,250,0.42);
  border-radius: 7px;
  color: #ffffff !important;
  background: #0b83ff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 18px rgba(11,131,255,0.12);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 4px 7px;
  text-shadow: none;
}

.documentation-body .method-get,
.documentation-body .method-post {
  background: #0b83ff !important;
}

.documentation-body .docs-endpoint-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.documentation-body .code-card {
  border-radius: 10px;
  background: var(--waplix-code-bg);
}

.documentation-body .docs-main-code {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 190px;
  overflow: hidden;
}

.documentation-body .docs-main-code pre {
  min-height: 0;
  height: 100%;
  margin: 0;
  overflow: auto;
}

.documentation-body .code-card pre,
.documentation-body pre {
  font-size: 0.78rem;
  line-height: 1.55;
}

.documentation-body .code-card-top {
  min-height: 38px;
  padding: 8px 10px;
}

.documentation-body .docs-playground-card {
  gap: 10px;
  padding: 14px;
}

.documentation-body .docs-playground-card h2 {
  font-size: 1.1rem;
}

.documentation-body .docs-playground label {
  font-size: 0.74rem;
}

.documentation-body .docs-playground pre {
  min-height: 140px;
  border-radius: 10px;
  font-size: 0.78rem;
}

.documentation-body .docs-auth-grid button,
.documentation-body .docs-endpoint-top button,
.documentation-body .code-card-top button {
  font-size: 0.72rem;
  padding: 5px 9px;
}

.documentation-body .webhook-doc-card {
  border-radius: 10px;
  background: #101113;
}

.documentation-body .webhook-doc-card summary {
  padding: 11px;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
}

.documentation-body .docs-language-tabs button {
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 0.82rem;
}

.documentation-body .docs-drawer-btn {
  font-size: 0.82rem;
}

@media (max-width: 1300px) {
  .documentation-page,
  .documentation-body .documentation-page {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .docs-playground {
    position: static;
    grid-column: 2;
    max-height: none;
  }
}

@media (max-width: 991px) {
  .documentation-page,
  .documentation-body .documentation-page {
    grid-template-columns: 1fr;
  }

  .docs-drawer-btn {
    display: inline-flex;
    position: sticky;
    top: 74px;
    z-index: 30;
    width: max-content;
    border: 0;
    border-radius: 999px;
    color: #05110b;
    font-weight: 900;
    background: linear-gradient(135deg, #00f06a, #00d4ff);
    padding: 10px 16px;
  }

  .docs-left-nav,
  .documentation-body .docs-left-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(320px, 86vw);
    max-height: none;
    border-radius: 0 24px 24px 0;
    transform: translateX(-105%);
    transition: transform .2s ease;
  }

  .docs-left-nav.open {
    transform: translateX(0);
  }

  .docs-playground {
    grid-column: auto;
  }

  .docs-auth-grid,
  .docs-endpoint-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .docs-public-topbar {
    padding: 10px 14px;
  }

  .docs-public-topbar nav {
    gap: 10px;
  }

  .docs-public-topbar a {
    font-size: 0.78rem;
  }

  .documentation-body .documentation-page {
    width: min(100vw - 20px, 100%);
    margin-top: 12px;
  }

  .docs-hero,
  .docs-card,
  .docs-endpoint-card {
    padding: 16px;
    border-radius: 22px;
  }

  .docs-hero h1 {
    font-size: 2.55rem;
  }

  .documentation-body .docs-hero h1 {
    font-size: 2rem;
  }

  .docs-endpoint-top,
  .webhook-doc-card summary {
    grid-template-columns: 1fr;
  }
}

/* ── Docs Page – Compact Text Sizes (waapi-style) ── */

/* Hero heading */
.documentation-body .docs-hero h1,
.documentation-body .docs-section-head h2 {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 800;
}

/* Card h2 headings */
.documentation-body .docs-card h2 {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  letter-spacing: -0.02em;
}

/* Hero intro paragraph */
.documentation-body .docs-hero p,
.documentation-body .docs-section-head p,
.documentation-body .docs-card p,
.documentation-body .docs-endpoint-card p,
.documentation-body .docs-endpoint-grid li {
  font-size: 0.82rem;
  line-height: 1.6;
}

/* Endpoint title (h3) */
.documentation-body .docs-endpoint-top h3 {
  font-size: 0.88rem;
}

/* Endpoint path code */
.documentation-body .docs-endpoint-top code {
  font-size: 0.76rem;
}

/* Parameters / Notes h4 */
.documentation-body .docs-endpoint-grid h4 {
  font-size: 0.72rem;
}

/* Nav summary group labels */
.documentation-body .docs-left-nav summary {
  font-size: 0.68rem;
}

/* Nav links */
.documentation-body .docs-left-nav a {
  font-size: 0.76rem;
  padding: 6px 10px;
}

/* Nav method pills */
.documentation-body .docs-left-nav .method-pill,
.documentation-body .method-pill {
  font-size: 0.58rem;
  padding: 3px 5px;
  min-width: 36px;
}

/* Kicker label */
.documentation-body .dash-kicker {
  font-size: 0.58rem;
}

/* Playground labels */
.documentation-body .docs-playground label {
  font-size: 0.7rem;
}

/* Playground h2 */
.documentation-body .docs-playground-card h2 {
  font-size: 0.95rem;
}

/* Code blocks */
.documentation-body .code-card pre,
.documentation-body pre {
  font-size: 0.72rem;
  line-height: 1.5;
}

/* Code card top bar */
.documentation-body .code-card-top {
  min-height: 32px;
  padding: 6px 10px;
}

/* Search label */
.documentation-body .docs-search-box label {
  font-size: 0.64rem;
}

/* Inputs / selects */
.documentation-body .docs-search-box input,
.documentation-body .docs-playground input,
.documentation-body .docs-playground select,
.documentation-body .docs-playground textarea {
  font-size: 0.76rem;
  min-height: 32px;
}

/* Language tab buttons */
.documentation-body .docs-language-tabs button {
  font-size: 0.74rem;
  padding: 5px 10px;
}

/* Copy buttons */
.documentation-body .docs-auth-grid button,
.documentation-body .docs-endpoint-top button,
.documentation-body .code-card-top button {
  font-size: 0.64rem;
  padding: 4px 8px;
}

/* Developer page refresh */
.developer-page {
    --developer-glass-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(255,255,255,0.52));
    --developer-glass-border: rgba(255,255,255,0.32);
    --developer-glass-shadow: 0 24px 64px rgba(6, 29, 20, 0.12), inset 0 1px 0 rgba(255,255,255,0.42);
    --developer-scroll-track: rgba(5, 22, 15, 0.08);
    --developer-scroll-thumb: linear-gradient(180deg, var(--dash-green), var(--dash-cyan));
}

.developer-page .developer-hero,
.developer-page .developer-card,
.developer-page .developer-stat-card,
.developer-page .sdk-item {
    background: var(--developer-glass-bg);
    border: 1px solid var(--developer-glass-border);
    box-shadow: var(--developer-glass-shadow);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.developer-page .developer-stat-card {
    min-height: 128px;
}

.developer-page .dash-stat-icon svg {
    width: 20px;
    height: 20px;
}

.developer-page .dash-stat-icon.cyan {
    color: #052033;
    background: linear-gradient(135deg, #38bdf8, #14b8a6);
}

.developer-page .dash-stat-icon.green {
    color: #062814;
    background: linear-gradient(135deg, #22c55e, #14b8a6);
}

.developer-page .dash-stat-icon.yellow {
    color: #2a2203;
    background: linear-gradient(135deg, #fde047, #84cc16);
}

.developer-page .dash-stat-icon.blue {
    color: #071a35;
    background: linear-gradient(135deg, #60a5fa, #22d3ee);
}

.developer-page .developer-main-grid,
.developer-page .developer-code-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.8fr);
    align-items: start;
}

.developer-page .developer-code-stack {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.developer-page .developer-side-stack {
    display: grid;
    gap: 14px;
    min-width: 0;
    align-content: start;
}

.developer-page .api-key-card,
.developer-page .base-url-card,
.developer-page .code-example-card,
.developer-page .api-tester-card,
.developer-page .endpoints-card,
.developer-page .sdk-card {
    min-width: 0;
    overflow: hidden;
}

.developer-page .secret-row,
.developer-page .developer-copy-box {
    align-items: center;
}

.developer-page .developer-main-grid > .developer-card {
    height: 100%;
}

.developer-page .base-url-card {
    padding: 16px 18px;
}

.developer-page .base-url-card .dash-section-head {
    margin-bottom: 10px;
}

.developer-page .base-url-card p {
    margin: 8px 0 8px;
}

.developer-page .secret-row .form-control,
.developer-page .developer-test-form .form-control,
.developer-page .developer-copy-box,
.developer-page .developer-response-panel,
.developer-page .endpoint-row,
.developer-page .sdk-item {
    border-color: rgba(114, 211, 182, 0.32);
}

.developer-page .developer-copy-box,
.developer-page .developer-response-panel,
.developer-page .sdk-item {
    background: rgba(255,255,255,0.44);
}

.developer-page .sdk-card {
    margin-top: 0;
}

.developer-page .sdk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.developer-page .sdk-item {
    min-height: 112px;
    padding: 16px 12px;
    border-radius: 18px;
}

.developer-page .sdk-item img {
    width: 46px;
    height: 46px;
}

.developer-page .sdk-item span {
    display: block;
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.developer-page .base-url-card .developer-copy-box {
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 10px;
    padding: 12px 14px;
}

.developer-page .copy-icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(114, 211, 182, 0.34);
    border-radius: 14px;
    background: rgba(255,255,255,0.68);
    color: var(--dash-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.46);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.developer-page .copy-icon-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 240, 106, 0.34);
    background: rgba(255,255,255,0.86);
}

.developer-page .copy-icon-btn svg {
    width: 17px;
    height: 17px;
}

.developer-page .developer-test-form {
    min-width: 0;
}

.developer-page .developer-test-form textarea.form-control {
    height: 188px;
    min-height: 188px;
    max-height: 188px;
    resize: none;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #19d38a rgba(255,255,255,0.08);
}

.developer-page .developer-test-form textarea.form-control::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.developer-page .developer-test-form textarea.form-control::-webkit-scrollbar-track {
    background: rgba(15,23,42,0.08);
    border-radius: 999px;
}

.developer-page .developer-test-form textarea.form-control::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dash-green), var(--dash-cyan));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.developer-page .developer-endpoint-native-select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.developer-page .developer-endpoint-select {
    position: relative;
    margin-top: 8px;
}

.developer-page .developer-endpoint-select .messages-select-trigger {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 18px;
    border: 1px solid rgba(114, 211, 182, 0.34);
    background: rgba(255,255,255,0.72);
    color: var(--dash-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.46);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.developer-page .developer-endpoint-select .messages-select-trigger span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.developer-page .developer-endpoint-select .messages-select-trigger svg {
    flex: 0 0 auto;
    color: var(--dash-green);
    transition: transform .2s ease;
}

.developer-page .developer-endpoint-select.is-open .messages-select-trigger {
    border-color: rgba(0, 240, 106, 0.48);
    box-shadow: 0 0 0 4px rgba(0, 240, 106, 0.14), inset 0 1px 0 rgba(255,255,255,0.46);
}

.developer-page .developer-endpoint-select.is-open .messages-select-trigger svg {
    transform: rotate(180deg);
}

.developer-page .developer-endpoint-select .messages-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 80;
    display: grid;
    gap: 8px;
    max-height: 280px;
    padding: 10px;
    overflow: auto;
    border-radius: 22px;
    border: 1px solid rgba(114, 211, 182, 0.34);
    background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(240,255,248,0.82));
    box-shadow: 0 24px 56px rgba(4, 27, 18, 0.16), inset 0 1px 0 rgba(255,255,255,0.54);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    scrollbar-width: thin;
    scrollbar-color: #17d187 rgba(15, 23, 42, 0.08);
}

.developer-page .developer-endpoint-select .messages-select-menu[hidden] {
    display: none;
}

.developer-page .developer-endpoint-select .messages-select-menu::-webkit-scrollbar {
    width: 10px;
}

.developer-page .developer-endpoint-select .messages-select-menu::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
}

.developer-page .developer-endpoint-select .messages-select-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dash-green), var(--dash-cyan));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.developer-page .developer-endpoint-select .messages-select-option {
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--dash-text);
    text-align: left;
    cursor: pointer;
}

.developer-page .developer-endpoint-select .messages-select-option strong {
    color: inherit;
    font-size: .84rem;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.developer-page .developer-endpoint-select .messages-select-option span {
    color: var(--dash-muted);
    font-size: .76rem;
    font-weight: 650;
    line-height: 1.25;
}

.developer-page .developer-endpoint-select .messages-select-option:hover,
.developer-page .developer-endpoint-select .messages-select-option.is-selected {
    color: #062016;
    background: linear-gradient(135deg, rgba(0,240,106,0.74), rgba(167,243,208,0.72));
}

.developer-page .developer-endpoint-select .messages-select-option:hover span,
.developer-page .developer-endpoint-select .messages-select-option.is-selected span {
    color: rgba(6,32,22,0.72);
}

.developer-page .api-terminal-wrap {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.developer-page .developer-code-card {
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(32, 201, 151, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(8, 17, 15, 0.96), rgba(5, 11, 10, 0.98));
    border: 1px solid rgba(95, 255, 198, 0.16);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.03);
}

.developer-page .developer-code-card .code-card-top {
    min-height: 48px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border-bottom: 1px solid rgba(95, 255, 198, 0.12);
}

.developer-page .developer-code-card .code-card-top button {
    min-height: 34px;
    padding: 8px 14px;
}

.developer-page .developer-code-card .code-card-top div {
    display: flex;
    gap: 8px;
}

.developer-page .developer-code-card .code-card-top div span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.developer-page .developer-code-card .code-card-top div span:nth-child(1) {
    background: #ff5f57;
}

.developer-page .developer-code-card .code-card-top div span:nth-child(2) {
    background: #febc2e;
}

.developer-page .developer-code-card .code-card-top div span:nth-child(3) {
    background: #28c840;
}

.developer-page .developer-code-card .code-card-top div span:nth-child(4) {
    background: #22c7f2;
}

.developer-page .developer-code-card pre {
    margin: 0;
    height: 320px;
    min-height: 320px;
    max-height: 320px;
    overflow: auto;
    padding: 18px 20px 22px;
    background: transparent;
    scrollbar-width: thin;
    scrollbar-color: #19d38a rgba(255,255,255,0.08);
}

.developer-page .developer-code-card pre::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.developer-page .developer-code-card pre::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
}

.developer-page .developer-code-card pre::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dash-green), var(--dash-cyan));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.developer-page .developer-code-card code {
    display: block;
    min-width: max-content;
    color: #d8fff0;
    font-size: 0.94rem;
    line-height: 1.7;
    white-space: pre;
}

.developer-page .developer-response-panel {
    height: 168px;
    min-height: 168px;
    max-height: 168px;
    max-width: 100%;
    overflow: auto;
}

.developer-page .endpoint-scroll-shell {
    max-height: 748px;
    min-height: 748px;
    overflow: auto;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: #13c67a var(--developer-scroll-track);
}

.developer-page .endpoint-scroll-shell::-webkit-scrollbar,
.developer-page .developer-response-panel::-webkit-scrollbar,
.developer-page .language-pills::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.developer-page .endpoint-scroll-shell::-webkit-scrollbar-track,
.developer-page .developer-response-panel::-webkit-scrollbar-track,
.developer-page .language-pills::-webkit-scrollbar-track {
    background: var(--developer-scroll-track);
    border-radius: 999px;
}

.developer-page .endpoint-scroll-shell::-webkit-scrollbar-thumb,
.developer-page .developer-response-panel::-webkit-scrollbar-thumb,
.developer-page .language-pills::-webkit-scrollbar-thumb {
    background: var(--developer-scroll-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.developer-page .endpoint-table {
    min-width: 0;
}

.developer-page .developer-endpoints-head {
    align-items: flex-start;
    gap: 12px;
}

.developer-page .developer-endpoints-subtitle {
    margin: 6px 0 0;
    color: var(--dash-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.developer-page .developer-endpoint-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.developer-page .developer-endpoint-search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.developer-page .developer-endpoint-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--dash-muted);
    pointer-events: none;
}

.developer-page .developer-endpoint-search {
    padding-left: 42px;
    min-height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.developer-page .developer-endpoint-count {
    flex: 0 0 auto;
    color: var(--dash-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.developer-page .developer-endpoint-scroll-shell {
    max-height: 720px;
    min-height: 420px;
}

.developer-page .developer-endpoint-catalog {
    display: grid;
    gap: 16px;
}

.developer-page .developer-endpoint-group {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.developer-page .developer-endpoint-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
}

.developer-page .developer-endpoint-group-head h3 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dash-soft);
}

.developer-page .developer-endpoint-group-count {
    min-width: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--dash-green);
    background: rgba(0, 240, 106, 0.12);
    border: 1px solid rgba(0, 240, 106, 0.18);
}

.developer-page .developer-endpoint-list {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.developer-page .developer-endpoint-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.035);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.developer-page .developer-endpoint-item:hover {
    border-color: rgba(0, 240, 106, 0.22);
    background: rgba(0, 240, 106, 0.06);
    transform: translateY(-1px);
}

.developer-page .developer-endpoint-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.developer-page .developer-endpoint-main strong {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--dash-text);
    line-height: 1.35;
}

.developer-page .developer-endpoint-main code {
    color: var(--dash-green);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.developer-page .developer-endpoint-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.developer-page .developer-endpoint-docs-link,
.developer-page .developer-endpoint-copy {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    color: var(--dash-text);
    background: rgba(255, 255, 255, 0.055);
    font-weight: 800;
    font-size: 0.74rem;
    padding: 7px 11px;
    text-decoration: none;
    line-height: 1;
}

.developer-page .developer-endpoint-copy {
    cursor: pointer;
}

.developer-page .developer-endpoint-docs-link:hover,
.developer-page .developer-endpoint-copy:hover {
    border-color: rgba(0, 240, 106, 0.28);
    color: var(--dash-green);
}

.developer-page .developer-endpoint-empty {
    margin: 12px 4px 0;
    color: var(--dash-muted);
    font-size: 0.88rem;
    text-align: center;
}

.developer-page .method-put {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.developer-page .method-delete {
    background: linear-gradient(135deg, #ef4444, #fb7185);
}

.developer-page .method-ref {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.developer-page .developer-endpoint-menu {
    max-height: 320px;
}

.developer-page .developer-endpoint-menu-group + .developer-endpoint-menu-group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.developer-page .developer-endpoint-menu-label {
    padding: 4px 10px 6px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dash-muted);
}

.developer-page .endpoint-row {
    grid-template-columns: 92px minmax(320px, 1.3fr) minmax(220px, 0.9fr) 82px;
    min-width: 880px;
}

.developer-page .endpoint-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(230, 255, 243, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.developer-page .sdk-card {
    margin-top: 14px;
}

html[data-theme="dark"] .developer-page {
    --developer-glass-bg: linear-gradient(135deg, rgba(10, 17, 15, 0.82), rgba(9, 40, 29, 0.52));
    --developer-glass-border: rgba(125, 255, 210, 0.14);
    --developer-glass-shadow: 0 28px 72px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.03);
    --developer-scroll-track: rgba(255,255,255,0.08);
}

html[data-theme="dark"] .developer-page .developer-copy-box,
html[data-theme="dark"] .developer-page .developer-response-panel,
html[data-theme="dark"] .developer-page .sdk-item,
html[data-theme="dark"] .developer-page .endpoint-head {
    background: rgba(7, 18, 15, 0.58);
}

html[data-theme="dark"] .developer-page .developer-code-card code {
    color: #d8fff0;
}

html[data-theme="dark"] .developer-page .language-pills button,
html:not([data-theme]) .developer-page .language-pills button {
    color: rgba(236, 255, 245, 0.9);
}

html[data-theme="dark"] .developer-page .language-pills button.active,
html:not([data-theme]) .developer-page .language-pills button.active {
    color: #ffffff;
}

html[data-theme="dark"] .developer-page .copy-icon-btn {
    background: rgba(7, 18, 15, 0.72);
    border-color: rgba(0, 240, 106, 0.18);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

html[data-theme="dark"] .developer-page .developer-endpoint-select .messages-select-trigger {
    background: rgba(7, 18, 15, 0.72);
    border-color: rgba(0, 240, 106, 0.18);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

html[data-theme="dark"] .developer-page .developer-endpoint-select .messages-select-menu {
    background: linear-gradient(180deg, rgba(7,18,15,0.96), rgba(6,17,15,0.92));
    border-color: rgba(0, 240, 106, 0.16);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.04);
}

html[data-theme="dark"] .developer-page .developer-endpoint-select .messages-select-option:hover,
html[data-theme="dark"] .developer-page .developer-endpoint-select .messages-select-option.is-selected {
    color: #062016;
}

html[data-theme="dark"] .api-logs-page .recent-request-list > div,
html:not([data-theme]) .api-logs-page .recent-request-list > div {
    background: rgba(7, 18, 15, 0.58);
    border-color: rgba(0, 240, 106, 0.10);
}

.api-logs-page .webhook-json-card {
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(32, 201, 151, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(8, 17, 15, 0.96), rgba(5, 11, 10, 0.98));
    border: 1px solid rgba(95, 255, 198, 0.16);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.03);
}

.api-logs-page .webhook-json-card .code-card-top {
    min-height: 48px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border-bottom: 1px solid rgba(95, 255, 198, 0.12);
}

.api-logs-page .webhook-json-card .code-card-top div {
    display: flex;
    gap: 8px;
}

.api-logs-page .webhook-json-card .code-card-top div span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.24);
}

.api-logs-page .webhook-json-card .code-card-top div span:nth-child(1) { background: #ff5f57; }
.api-logs-page .webhook-json-card .code-card-top div span:nth-child(2) { background: #febc2e; }
.api-logs-page .webhook-json-card .code-card-top div span:nth-child(3) { background: #28c840; }
.api-logs-page .webhook-json-card .code-card-top div span:nth-child(4) { background: #22c7f2; }

.api-logs-page .webhook-json-card pre {
    height: 220px;
    min-height: 220px;
    max-height: 220px;
    margin: 0;
    padding: 18px 20px 22px;
    overflow: auto;
    color: #d8fff0;
    scrollbar-width: thin;
    scrollbar-color: #19d38a rgba(255,255,255,0.08);
}

.api-logs-page .webhook-json-card pre::-webkit-scrollbar,
.api-logs-page .recent-request-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.api-logs-page .webhook-json-card pre::-webkit-scrollbar-track,
.api-logs-page .recent-request-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
}

.api-logs-page .webhook-json-card pre::-webkit-scrollbar-thumb,
.api-logs-page .recent-request-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dash-green), var(--dash-cyan));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.api-logs-page .recent-request-list {
    display: grid;
    gap: 12px;
    max-height: 430px;
    overflow: auto;
    padding-right: 4px;
}

.api-logs-page .recent-request-list > div {
    background: rgba(255,255,255,0.44);
    border: 1px solid rgba(114, 211, 182, 0.32);
    border-radius: 18px;
    padding: 14px 16px;
}

.api-logs-page .messages-filter-bar {
    margin-bottom: 12px;
}

.api-logs-page .endpoint-scroll-shell {
    max-height: 620px;
    min-height: 620px;
}

@media (max-width: 767.98px) {
    .api-logs-page .webhook-json-card pre {
        height: 200px;
        min-height: 200px;
        max-height: 200px;
        padding: 16px;
    }

    .api-logs-page .recent-request-list {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .api-logs-page .endpoint-scroll-shell {
        max-height: 460px;
        min-height: 460px;
    }
}

@media (max-width: 991.98px) {
    .developer-page .developer-main-grid,
    .developer-page .developer-code-grid {
        grid-template-columns: 1fr;
    }

    .developer-page .developer-code-stack {
        gap: 14px;
    }

    .developer-page .developer-side-stack {
        gap: 14px;
    }

    .developer-page .base-url-card,
    .developer-page .api-tester-card {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .developer-page .developer-hero,
    .developer-page .developer-card {
        padding: 16px;
        border-radius: 22px;
    }

    .developer-page .developer-stats-grid {
        grid-template-columns: 1fr;
    }

    .developer-page .endpoint-scroll-shell {
        max-height: 460px;
        min-height: 460px;
        overflow: auto;
        padding-right: 6px;
    }

    .developer-page .developer-code-card pre {
        height: 280px;
        min-height: 280px;
        max-height: 280px;
        padding: 16px;
    }

    .developer-page .developer-test-form textarea.form-control {
        height: 176px;
        min-height: 176px;
        max-height: 176px;
    }

    .developer-page .developer-response-panel {
        height: 156px;
        min-height: 156px;
        max-height: 156px;
    }

    .developer-page .endpoint-table {
        min-width: 720px;
    }

    .developer-page .developer-endpoint-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .developer-page .developer-endpoint-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .developer-page .developer-endpoint-count {
        text-align: right;
    }

    .developer-page .developer-endpoint-scroll-shell {
        min-height: 360px;
        max-height: 560px;
    }

    .developer-page .endpoint-row {
        min-width: 720px;
        grid-template-columns: 84px minmax(240px, 1.2fr) minmax(180px, 0.95fr) 76px;
    }

    .developer-page .secret-row,
    .developer-page .developer-copy-box {
        grid-template-columns: 1fr;
    }

    .developer-page .base-url-card .developer-copy-box {
        grid-template-columns: minmax(0, 1fr) 44px;
    }

    .developer-page .developer-endpoint-select .messages-select-menu {
        max-height: 250px;
    }

    .developer-page .sdk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .developer-page .sdk-item {
        min-height: 96px;
        padding: 14px 8px;
    }

    .developer-page .sdk-item img {
        width: 40px;
        height: 40px;
    }

    .developer-page .sdk-item span {
        font-size: 0.82rem;
    }
}

/* Top nav links */
.docs-public-topbar a {
  font-size: 0.78rem;
}

/* Note box */
.documentation-body .docs-note {
  font-size: 0.78rem;
}

/* Tighten card padding */
.documentation-body .docs-hero,
.documentation-body .docs-card,
.documentation-body .docs-endpoint-card {
  padding: 16px;
}

.documentation-body .docs-endpoint-grid {
  margin-top: 10px;
  gap: 10px;
}

.documentation-body .docs-content {
  gap: 12px;
}

/* ── Docs Page – Custom Scrollbars (theme-matched) ── */

/* Firefox – all scrollable docs elements */
.docs-left-nav,
.docs-playground,
.docs-content,
.code-card pre,
.docs-endpoint-card,
.documentation-page {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 240, 106, 0.35) rgba(255, 255, 255, 0.05);
}

/* WebKit (Chrome / Safari / Edge) */
.documentation-body ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.documentation-body ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}
.documentation-body ::-webkit-scrollbar-thumb {
    background: rgba(0, 240, 106, 0.32);
    border-radius: 999px;
    transition: background 0.2s;
}
.documentation-body ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 240, 106, 0.65);
}
.documentation-body ::-webkit-scrollbar-corner {
    background: transparent;
}

/* Phase 5K: global sidebar drawer/collapse */
.sidebar-toggle-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-right: 12px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42));
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    box-shadow: 0 12px 28px rgba(56, 195, 171, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.sidebar-toggle-btn:hover {
    border-color: rgba(0, 240, 106, 0.28);
    box-shadow: 0 14px 32px rgba(56, 195, 171, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.sidebar-toggle-btn span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent, #00f06a), var(--accent-2, #00d4ff));
}

html[data-theme="dark"] .sidebar-toggle-btn,
html:not([data-theme]) .sidebar-toggle-btn {
    border-color: rgba(0, 240, 106, 0.18);
    background: rgba(8, 20, 17, 0.72);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 39;
    border: 0;
    background: rgba(2,6,23,0.62);
    backdrop-filter: blur(7px);
}

.app-sidebar {
    transition: width .22s ease, flex-basis .22s ease, padding .22s ease, transform .22s ease, opacity .18s ease;
    overflow-x: hidden;
}

.sidebar-collapsed .app-main {
    margin-left: 0;
}

.sidebar-collapsed .app-sidebar {
    transform: translateX(-105%);
    opacity: 0;
    pointer-events: none;
}

.sidebar-avatar {
    overflow: hidden;
}

.sidebar-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media (max-width: 900px) {
    .app-shell {
        display: flex;
    }

    .app-main {
        margin-left: 0 !important;
    }

    .app-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 40;
        width: min(292px, calc(100vw - 34px)) !important;
        height: 100vh !important;
        flex: 0 0 auto !important;
        display: block !important;
        padding: 18px !important;
        transform: translateX(-105%);
        opacity: 1;
        overflow-y: auto;
        border-right: 1px solid var(--border);
        border-bottom: 0;
    }

    .sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .sidebar-open .sidebar-backdrop {
        display: block;
    }

    .sidebar-profile-card,
    .app-sidebar .nav-section-label {
        display: block;
    }

    .app-sidebar a:not(.brand) {
        width: 100%;
        margin-bottom: 4px;
        white-space: normal;
    }

    .mobile-bottom-nav {
        display: none !important;
    }

    .sidebar-toggle-btn {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }
}

/* ── Sidebar Accordion Nav ── */
.nav-accordion {
    margin-bottom: 2px;
}

.nav-accordion-trigger {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 12px;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: inherit;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    font-family: inherit;
}

.nav-accordion-trigger:hover {
    color: var(--text-primary);
    background: var(--surface-soft);
    border-color: var(--border);
}

.nav-accordion.open > .nav-accordion-trigger {
    color: var(--text-primary);
    background: var(--surface-soft);
    border-color: var(--border);
}

.nav-accordion-trigger > span:not(.nav-icon) {
    flex: 1;
}

/* Chevron rotation */
.nav-chevron {
    flex: 0 0 auto;
    color: #64748b;
    transition: transform 0.22s cubic-bezier(.4,0,.2,1), color 0.18s;
}

.nav-accordion.open > .nav-accordion-trigger .nav-chevron {
    transform: rotate(180deg);
    color: #00f06a;
}

/* Accordion body */
.nav-accordion-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.28s cubic-bezier(.4,0,.2,1);
    padding-left: 14px;
    margin-top: 2px;
}

.nav-accordion.open > .nav-accordion-body {
    max-height: 400px;
}

/* Sub items */
.nav-sub-item {
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 10px !important;
    border-radius: 9px !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    border: 1px solid transparent !important;
    text-decoration: none;
    transition: color 0.16s, background 0.16s;
    position: relative;
}

.nav-sub-item:hover {
    color: var(--text-primary) !important;
    background: var(--surface-soft) !important;
}

.nav-sub-item.active {
    color: var(--accent) !important;
    background: var(--waplix-accent-green-soft) !important;
    border-color: var(--border-strong) !important;
}

/* Vertical connector line */
.nav-sub-line {
    flex: 0 0 auto;
    width: 1px;
    height: 14px;
    background: rgba(148,163,184,0.25);
    border-radius: 999px;
    margin-right: 2px;
    transition: background 0.16s;
}

.nav-sub-item:hover .nav-sub-line,
.nav-sub-item.active .nav-sub-line {
    background: #00f06a;
}

/* Scrollbar for docs – keep theme color */
.docs-left-nav,
.docs-playground,
.docs-content,
.code-card pre,
.docs-endpoint-card,
.documentation-page {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 240, 106, 0.35) rgba(255, 255, 255, 0.05);
}

.documentation-body ::-webkit-scrollbar { width: 5px; height: 5px; }
.documentation-body ::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 999px; }
.documentation-body ::-webkit-scrollbar-thumb { background: rgba(0,240,106,0.32); border-radius: 999px; }
.documentation-body ::-webkit-scrollbar-thumb:hover { background: rgba(0,240,106,0.65); }
.documentation-body ::-webkit-scrollbar-corner { background: transparent; }


/* Waplix sidebar final polish: equal spacing, mobile-only hamburger, smooth scrollbar */
.app-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 240, 106, 0.38) rgba(255, 255, 255, 0.055);
}

.app-sidebar::-webkit-scrollbar {
    width: 6px;
}

.app-sidebar::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.045);
    border-radius: 999px;
}

.app-sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0,240,106,0.42), rgba(0,212,255,0.34));
    border-radius: 999px;
}

.app-sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(0,240,106,0.72), rgba(0,212,255,0.58));
}

.sidebar-profile-card {
    margin-bottom: 10px;
    flex: 0 0 auto;
}

.sidebar-avatar,
.sidebar-avatar img {
    border-radius: 50% !important;
}

.sidebar-avatar {
    width: 46px;
    height: 46px;
    box-shadow: 0 12px 28px rgba(0,240,106,0.14), inset 0 0 0 2px rgba(255,255,255,0.16);
}

.app-sidebar a:not(.brand),
.nav-accordion-trigger {
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 14px;
}

.nav-accordion {
    margin: 0;
}

.nav-accordion-body {
    padding-left: 14px;
    margin-top: 4px;
}

.nav-sub-item {
    min-height: 38px !important;
    margin: 0 0 4px 0 !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
}

.nav-section-label {
    margin: 12px 0 4px;
}

.sidebar-bottom-links {
    margin-top: auto;
    padding-top: 10px;
    display: grid;
    gap: 6px;
}

.sidebar-toggle-btn {
    display: none !important;
}

@media (min-width: 901px) {
    .sidebar-collapsed .app-sidebar {
        transform: translateX(-105%);
        opacity: 0;
        pointer-events: none;
    }

    .sidebar-collapsed .app-main {
        margin-left: 0;
    }
}

@media (max-width: 900px) {
    .app-sidebar {
        gap: 6px;
        overflow-y: auto !important;
    }

    .sidebar-toggle-btn {
        display: inline-flex !important;
    }

    .sidebar-collapsed .app-sidebar {
        width: min(292px, calc(100vw - 34px)) !important;
        flex-basis: auto !important;
        padding: 18px !important;
        opacity: 1 !important;
    }
}
.sidebar-profile-card .sidebar-avatar{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    border-radius:50% !important;
    padding:0 !important;
    overflow:hidden !important;
    display:block !important;
    background:#06120d !important;
    border:2px solid rgba(0,240,106,.75) !important;
}

.sidebar-profile-card .sidebar-avatar img{
    width:100% !important;
    height:100% !important;
    border-radius:50% !important;
    object-fit:cover !important;
    display:block !important;
}

/* Documentation page — topbar + sidebar fixed on desktop; only content scrolls */
@media (min-width: 1024px) {
    body.documentation-body {
        --docs-topbar-height: 72px;
        --docs-sidebar-width: 280px;
        padding-top: var(--docs-topbar-height);
    }

    body.documentation-body .docs-public-topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 200 !important;
    }

    body.documentation-body .docs-layout {
        display: block !important;
    }

    body.documentation-body .docs-layout > .docs-left-nav[data-docs-drawer] {
        position: fixed !important;
        top: var(--docs-topbar-height, 72px) !important;
        left: 0 !important;
        width: var(--docs-sidebar-width, 280px) !important;
        height: calc(100vh - var(--docs-topbar-height, 72px)) !important;
        max-height: calc(100vh - var(--docs-topbar-height, 72px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: none !important;
        z-index: 120 !important;
    }

    body.documentation-body .docs-layout > .docs-shell {
        margin-left: var(--docs-sidebar-width, 280px) !important;
        min-width: 0 !important;
    }

    body.documentation-body .docs-layout > .docs-shell > .documentation-page {
        margin-left: 0 !important;
    }
}