/*
 * Premium visual layer for remaining license-center pages.
 * The selectors are scoped by page body classes to avoid touching business logic.
 */
:root {
    --px-bg: #f5f7fb;
    --px-panel: #ffffff;
    --px-panel-soft: #f8fafc;
    --px-ink: #111827;
    --px-text: #25324a;
    --px-muted: #64748b;
    --px-line: #dce5f1;
    --px-blue: #175cd3;
    --px-blue-dark: #1249a8;
    --px-teal: #0f9f9a;
    --px-gold: #b7791f;
    --px-danger: #dc2626;
    --px-success: #15803d;
    --px-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
    --px-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.07);
}

.premium-auth-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 16%, rgba(15, 159, 154, 0.20), transparent 28%),
        radial-gradient(circle at 84% 12%, rgba(23, 92, 211, 0.26), transparent 30%),
        linear-gradient(135deg, #08111f 0%, #0d213c 48%, #0f2747 100%) !important;
    color: #e2e8f0;
}

.premium-auth-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.92), transparent 78%);
}

.premium-auth-page .login-box,
.premium-auth-page .box {
    max-width: 460px;
    border-radius: 8px !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.90), rgba(8, 15, 28, 0.96)) !important;
    box-shadow: 0 30px 80px rgba(2, 6, 23, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(18px);
}

.premium-auth-page .login-box::before,
.premium-auth-page .box::before {
    border-radius: 8px !important;
}

.premium-auth-page h1 {
    color: #ffffff !important;
    letter-spacing: 0 !important;
}

.premium-auth-page .subtitle,
.premium-auth-page .sub,
.premium-auth-page .tip {
    color: rgba(226, 232, 240, 0.72) !important;
}

.premium-auth-page input {
    min-height: 46px;
    border-radius: 8px !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: #e2e8f0 !important;
}

.premium-auth-page input:focus {
    border-color: rgba(52, 211, 153, 0.84) !important;
    box-shadow: 0 0 0 4px rgba(15, 159, 154, 0.14) !important;
}

.premium-auth-page button,
.premium-auth-page .btn {
    min-height: 46px;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--px-blue), var(--px-teal)) !important;
    box-shadow: 0 16px 32px rgba(23, 92, 211, 0.30) !important;
}

.premium-auth-page a {
    color: #93c5fd;
}

.premium-admin-page,
.premium-user-page,
.premium-payment-page,
.premium-diagnostic-page,
.premium-trace-page,
.premium-portal-page {
    background:
        linear-gradient(180deg, #f8fbff 0%, var(--px-bg) 360px),
        var(--px-bg) !important;
    color: var(--px-text);
}

.premium-admin-page .sidebar,
.premium-trace-page .sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #0f2747 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 14px 0 34px rgba(15, 23, 42, 0.12);
}

.premium-admin-page .sidebar-logo,
.premium-trace-page .sidebar-logo {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.premium-admin-page .sidebar-logo h1,
.premium-trace-page .sidebar-logo h1 {
    color: #ffffff !important;
    letter-spacing: 0;
}

.premium-admin-page .sidebar-logo span,
.premium-trace-page .sidebar-logo span {
    color: rgba(226, 232, 240, 0.58) !important;
}

.premium-admin-page .sidebar-section,
.premium-trace-page .sidebar-section {
    color: rgba(226, 232, 240, 0.42) !important;
}

.premium-admin-page .sidebar-nav a,
.premium-trace-page .sidebar-nav a {
    border-radius: 6px;
    margin: 2px 10px;
    color: rgba(226, 232, 240, 0.74) !important;
}

.premium-admin-page .sidebar-nav a:hover,
.premium-admin-page .sidebar-nav a.active,
.premium-trace-page .sidebar-nav a:hover,
.premium-trace-page .sidebar-nav a.active {
    background: rgba(255, 255, 255, 0.09) !important;
    color: #ffffff !important;
}

.premium-admin-page .topbar,
.premium-trace-page .topbar,
.premium-payment-page .header {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid rgba(220, 229, 241, 0.9) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(16px);
}

.premium-payment-page .header {
    color: var(--px-ink) !important;
}

.premium-admin-page .content,
.premium-trace-page .content,
.premium-payment-page .container,
.premium-diagnostic-page .wrap {
    max-width: 1240px !important;
}

.premium-admin-page .card,
.premium-admin-page .form-card,
.premium-admin-page .stat-card,
.premium-admin-page .table-card,
.premium-admin-page .manage-form,
.premium-admin-page .manage-table,
.premium-user-page .content,
.premium-user-page .sidebar,
.premium-user-page .info-item,
.premium-user-page .pricing-card,
.premium-user-page .license-card,
.premium-user-page .order-card,
.premium-user-page .form-section,
.premium-payment-page .card,
.premium-diagnostic-page .card,
.premium-trace-page .trace-card,
.premium-trace-page .trace-search,
.premium-trace-page .qa-card,
.premium-trace-page .trace-flow {
    border-radius: 8px !important;
    border: 1px solid var(--px-line) !important;
    background: var(--px-panel) !important;
    box-shadow: var(--px-shadow-soft) !important;
}

.premium-admin-page .card-header,
.premium-admin-page .table-header,
.premium-admin-page .form-card-header,
.premium-payment-page .api-box,
.premium-trace-page .trace-card .card-head,
.premium-trace-page .qa-card .card-head {
    border-radius: 8px !important;
    background: linear-gradient(180deg, #f8fbff, #ffffff) !important;
    border-color: var(--px-line) !important;
}

.premium-admin-page input,
.premium-admin-page select,
.premium-admin-page textarea,
.premium-user-page input,
.premium-user-page select,
.premium-user-page textarea,
.premium-payment-page input,
.premium-payment-page textarea,
.premium-diagnostic-page input,
.premium-trace-page input {
    min-height: 42px;
    border-radius: 8px !important;
    border: 1px solid var(--px-line) !important;
    background: #ffffff !important;
    color: var(--px-ink) !important;
}

.premium-admin-page input:focus,
.premium-admin-page select:focus,
.premium-admin-page textarea:focus,
.premium-user-page input:focus,
.premium-payment-page input:focus,
.premium-payment-page textarea:focus,
.premium-diagnostic-page input:focus,
.premium-trace-page input:focus {
    outline: none !important;
    border-color: rgba(23, 92, 211, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(23, 92, 211, 0.10) !important;
}

.premium-admin-page .gen-btn,
.premium-admin-page .btn,
.premium-user-page .btn,
.premium-user-page .btn-primary,
.premium-user-page .btn-buy,
.premium-payment-page .btn,
.premium-diagnostic-page button,
.premium-trace-page button,
.premium-trace-page .gen-btn,
.premium-trace-page .preview-nav-link {
    border-radius: 6px !important;
    transition: transform 180ms ease, box-shadow 220ms ease, background-color 180ms ease, border-color 180ms ease;
}

.premium-admin-page .gen-btn:hover,
.premium-admin-page .btn:hover,
.premium-user-page .btn:hover,
.premium-user-page .btn-buy:hover,
.premium-payment-page .btn:hover,
.premium-diagnostic-page button:hover,
.premium-trace-page button:hover,
.premium-trace-page .gen-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--px-shadow-soft);
}

.premium-user-page .page-header {
    background:
        linear-gradient(135deg, #0f2747 0%, var(--px-blue) 72%, var(--px-teal) 100%) !important;
}

.premium-user-page .sidebar-user {
    border-radius: 8px 8px 0 0;
    background: linear-gradient(135deg, #0f2747, var(--px-blue)) !important;
}

.premium-user-page .sidebar-nav a {
    border-radius: 6px;
    margin: 2px 10px;
}

.premium-user-page .sidebar-nav a.active,
.premium-user-page .sidebar-nav a:hover {
    background: #eff6ff !important;
    color: var(--px-blue) !important;
}

.premium-user-page .pricing-card.featured {
    border-color: rgba(23, 92, 211, 0.38) !important;
    box-shadow: 0 20px 42px rgba(23, 92, 211, 0.14) !important;
}

.premium-payment-page .nav a {
    border-radius: 6px !important;
    border: 1px solid var(--px-line);
    box-shadow: none !important;
}

.premium-payment-page .nav a.active {
    background: var(--px-blue) !important;
    border-color: var(--px-blue);
}

.premium-diagnostic-page {
    padding: 34px 0 !important;
}

.premium-diagnostic-page table {
    border: 1px solid var(--px-line);
    border-radius: 8px;
    overflow: hidden;
}

.premium-diagnostic-page td {
    border-color: #edf2f7 !important;
}

.premium-trace-page .trace-hero {
    border-radius: 8px !important;
    background: linear-gradient(135deg, #0f2747 0%, var(--px-blue) 72%, var(--px-teal) 100%) !important;
    box-shadow: var(--px-shadow);
}

.premium-trace-page .stat-item {
    border-radius: 8px !important;
}

.premium-preview-page .preview-copyright {
    min-height: 70px;
    background: rgba(15, 23, 42, 0.94) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.premium-preview-page .preview-brand a,
.premium-preview-page .preview-nav-link {
    border-radius: 6px !important;
}

.premium-preview-page .preview-empty-box {
    border-radius: 8px !important;
}

.premium-portal-page .portal-shell,
.premium-portal-page .card,
.premium-portal-page .feature-card,
.premium-portal-page .version-card,
.premium-portal-page .help-card,
.premium-portal-page .faq-item,
.premium-portal-page .notice-card {
    border-radius: 8px !important;
}

.premium-portal-page .portal-header,
.premium-portal-page .site-header {
    backdrop-filter: blur(16px);
}

@media (max-width: 900px) {
    .premium-admin-page .main,
    .premium-trace-page .main {
        margin-left: 0 !important;
    }

    .premium-admin-page .sidebar,
    .premium-trace-page .sidebar {
        position: static !important;
        width: auto !important;
        height: auto !important;
    }

    .premium-user-page .page-grid {
        grid-template-columns: 1fr !important;
    }
}