/**
 * WeUnlockers Professional Portal Theme
 * Universal Mobile-First & Responsive Enterprise Stylesheet
 */

:root {
    --brand-primary: #2563eb;
    --brand-primary-hover: #1d4ed8;
    --brand-accent: #4f46e5;
    
    --navy-950: #0b1120;
    --navy-900: #0f172a;
    --navy-800: #1e293b;
    --navy-700: #334155;
    
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50: #f8fafc;
    
    --bg-canvas: #f8fafc;
    --bg-card: #ffffff;
    
    --status-success-bg: #dcfce7;
    --status-success-text: #15803d;
    --status-warning-bg: #fef3c7;
    --status-warning-text: #b45309;
    --status-danger-bg: #fee2e2;
    --status-danger-text: #b91c1c;
    --status-info-bg: #dbeafe;
    --status-info-text: #1d4ed8;
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 9999px;
    
    --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-card: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--navy-900);
    background-color: var(--bg-canvas);
    -webkit-font-smoothing: antialiased;
}

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

/* ==================== DESKTOP LAYOUT ==================== */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    flex: 0 0 260px;
    background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
    color: #e2e8f0;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 100;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-brand {
    padding: 24px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.brand-copy strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.brand-copy small {
    color: var(--slate-400);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sidebar-section-label {
    padding: 24px 20px 8px;
    color: var(--slate-500);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
}

.nav-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.nav-link.is-active {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.35), rgba(79, 70, 229, 0.2));
    border-left: 3px solid var(--brand-primary);
}

.nav-icon {
    width: 22px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: #93c5fd;
}

.sidebar-footer {
    margin-top: auto;
    padding: 18px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--navy-800);
    color: #93c5fd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.user-meta strong {
    color: #f1f5f9;
    font-size: 13px;
    display: block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-meta small {
    color: var(--slate-400);
    font-size: 11px;
}

.sidebar-signout {
    display: block;
    color: #ef4444;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 0;
}

/* ==================== MAIN CONTENT & TOPBAR ==================== */
.main-content {
    flex: 1;
    min-width: 0;
}

.content-header {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    background: #ffffff;
    border-bottom: 1px solid var(--slate-200);
    box-shadow: var(--shadow-subtle);
}

.mobile-brand {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.role-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.role-pill.role-admin { color: #6b21a8; background: #f3e8ff; }
.role-pill.role-client { color: var(--brand-primary); background: #eff6ff; }
.role-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.header-user-name {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.header-signout {
    color: var(--slate-500);
    font-size: 12px;
    font-weight: 700;
}

.header-signout:hover {
    color: #ef4444;
}

.page-frame, .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 32px 48px;
}

/* ==================== CARDS & STATS ==================== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
}

h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 16px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.stat-box {
    background: #ffffff;
    border: 1px solid var(--slate-200);
    border-radius: 14px;
    padding: 16px 18px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: var(--shadow-subtle);
    border-top: 3px solid var(--slate-300);
}

.stat-box.stat-total { border-top-color: var(--brand-primary); }
.stat-box.stat-pending { border-top-color: var(--status-warning-text); }
.stat-box.stat-inprocess { border-top-color: var(--brand-accent); }
.stat-box.stat-success { border-top-color: var(--status-success-text); }
.stat-box.stat-rejected { border-top-color: var(--status-danger-text); }

.stat-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    margin-bottom: 6px;
}

.stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--navy-900);
}

/* ==================== FORMS & CONTROLS ==================== */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-group label {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

input, select, textarea {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--navy-900);
    background: #ffffff;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-sm);
    outline: none;
}

textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.search-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ==================== BUTTONS ==================== */
button, .btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.btn-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    cursor: pointer;
}

/* ==================== TABLES ==================== */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    background: #ffffff;
}

table, .services-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

th, .services-table th {
    background: var(--slate-50);
    color: var(--slate-500);
    padding: 12px 16px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--slate-200);
}

td, .services-table td {
    padding: 12px 16px;
    color: var(--navy-700);
    border-bottom: 1px solid var(--slate-100);
    vertical-align: middle;
}

/* ==================== MOBILE OPTIMIZATION (< 840px) ==================== */
@media (max-width: 840px) {
    .app-shell {
        display: flex;
        flex-direction: column;
    }

    /* Top Sticky Navigation Bar */
    .sidebar {
        width: 100%;
        height: auto;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }

    .sidebar-brand {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .sidebar-section-label,
    .sidebar-footer,
    .mobile-brand {
        display: none !important;
    }

    /* Horizontal Scrollable Menu Chips */
    .sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 8px 12px;
        gap: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-link {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0 12px;
        font-size: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .nav-link.is-active {
        background: #2563eb;
        border-left: 1px solid #2563eb;
    }

    /* Clean Single Top Action Bar */
    .content-header {
        min-height: 52px;
        padding: 0 16px;
        background: #ffffff;
        border-bottom: 1px solid var(--slate-200);
    }

    .page-frame, .container {
        padding: 16px 12px 36px;
    }

    .card {
        padding: 16px;
        border-radius: 12px;
        margin-bottom: 14px;
    }

    /* Clean 2-Column Responsive Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-box {
        min-height: 84px;
        padding: 12px 14px;
    }

    .stat-title {
        font-size: 10px;
    }

    .stat-value {
        font-size: 22px;
    }

    /* Span 5th item full width if odd */
    .stat-box:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .search-form input,
    .search-form button {
        width: 100%;
    }
}

/* ============================================================
   CONSOLIDATED PAGE COMPONENTS
   Moved from PHP page-level <style> blocks.
============================================================ */

/* Source: admin/admin_edit_service.php */
.api-type-selector {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}
.api-type-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s;
}
.api-type-card:hover {
    border-color: #2563eb;
    background: #f8fafc;
}
.api-type-card input[type="radio"] {
    width: auto;
    height: auto;
    margin: 0;
    cursor: pointer;
}
.loading-spinner {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #2563eb;
    font-weight: 600;
    margin-top: 6px;
}

/* Source: admin/admin_groups.php */
.group-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 800;
    background: #dbeafe;
    color: #1e40af;
}

/* Source: admin/admin_overview.php */
.status-pill-sm {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.status-pending { background: #fef3c7; color: #b45309; }
.status-inprocess { background: #dbeafe; color: #1d4ed8; }
.status-success { background: #dcfce7; color: #15803d; }
.status-rejected { background: #fee2e2; color: #b91c1c; }

/* Source: admin/adminorders.php */
/* Main Container & Table Fluid Sizing */
.page-frame, .container {
    max-width: 100% !important;
    padding: 20px 24px;
}
.services-table {
    width: 100% !important;
    table-layout: auto;
    border-collapse: collapse;
}
.services-table th, .services-table td {
    padding: 12px 10px;
    white-space: normal;
    word-break: break-word;
}
.services-table th {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.table-wrap {
    width: 100%;
    overflow-x: hidden;
}

/* Button & Result Sizing */
.btn-order-id {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-order-id:hover {
    background: #2563eb;
    color: #ffffff;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-weight: 800;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-pending { background: #fef3c7; color: #b45309; }
.status-inprocess { background: #dbeafe; color: #1d4ed8; }
.status-success { background: #dcfce7; color: #15803d; }
.status-rejected { background: #fee2e2; color: #b91c1c; }

.result-box-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    max-width: 320px;
}
.result-box-card:hover {
    background: #ffffff;
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
.result-box-text {
    overflow: hidden;
    min-width: 0;
}
.result-main-line {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.result-sub-line {
    font-size: 10px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
.btn-result-view {
    border: none;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

/* Action Button Sizing */
.admin-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.btn-admin-edit {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}
.btn-admin-edit:hover {
    background: #2563eb;
    color: #ffffff;
}
.btn-admin-del {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-admin-del:hover {
    background: #dc2626;
    color: #ffffff;
}

/* Pagination Wrap */
.pagination-wrap {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.pagination-btns {
    display: flex;
    gap: 4px;
}
.pagination-btns a, .pagination-btns span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
}
.pagination-btns a:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}
.pagination-btns .active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.pagination-btns .disabled {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #edf2f7;
    cursor: not-allowed;
}

/* Modal Styling */
.order-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(6px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.order-modal.show {
    display: flex;
}
.order-modal-box {
    width: 100%;
    max-width: 660px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35);
    border: 1px solid #e2e8f0;
    animation: modalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.order-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    padding: 18px 24px;
}
.order-modal-body {
    padding: 24px;
    max-height: 75vh;
    overflow-y: auto;
}

/* Modal Component Styling */
.modal-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
.modal-stat-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
}
.modal-stat-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 4px;
}
.modal-stat-val {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

/* Interactive Status Radio Grid */
.status-radio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}
.status-radio-card {
    position: relative;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    background: #ffffff;
    transition: all 0.2s ease;
}
.status-radio-card input {
    position: absolute;
    opacity: 0;
}
.status-radio-card:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.status-radio-card.active-pending {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}
.status-radio-card.active-inprocess {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.status-radio-card.active-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
    box-shadow: 0 0 0 2px rgba(220, 252, 231, 0.4);
}
.status-radio-card.active-rejected {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}
.status-radio-title {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

/* Dark-Themed Editor & Compact Normalized Content */
.code-editor-wrapper {
    background: #0b1120;
    border: 1px solid #1e293b;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}
.code-editor-header {
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.code-editor-header span {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.code-editor-textarea {
    width: 100%;
    background: transparent;
    color: #f8fafc;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 13px;
    line-height: 1.45 !important;
    border: none;
    outline: none;
    padding: 16px 18px;
    resize: vertical;
    min-height: 140px;
    white-space: pre-wrap !important;
}
.code-editor-content {
    padding: 16px 20px;
    color: #f8fafc;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 13px;
    line-height: 1.45 !important;
    white-space: pre-wrap !important;
    word-break: break-word;
    max-height: 340px;
    overflow-y: auto;
}
.code-editor-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 4px auto 12px;
    border-radius: 8px;
}
.code-editor-content font[color="green"], .code-editor-content span[style*="green"] {
    color: #4ade80 !important;
    font-weight: bold;
}
.code-editor-content font[color="red"], .code-editor-content span[style*="red"] {
    color: #f87171 !important;
    font-weight: bold;
}

/* Source: admin/adminservices.php */
.service-pill-active { background: #dcfce7; color: #15803d; font-weight: 800; font-size: 11px; padding: 4px 10px; border-radius: 9999px; }
.service-pill-disabled { background: #fee2e2; color: #b91c1c; font-weight: 800; font-size: 11px; padding: 4px 10px; border-radius: 9999px; }
.btn-action-sm { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 8px; text-decoration: none; border: 1px solid transparent; transition: all 0.2s; }
.btn-edit-sm { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.btn-toggle-sm { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.btn-del-sm { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

.api-type-selector { display: flex; gap: 12px; margin-bottom: 8px; }
.api-type-card { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid #cbd5e1; border-radius: 10px; cursor: pointer; background: #ffffff; }
.api-type-card:hover { border-color: #2563eb; background: #f8fafc; }
.loading-spinner { display: none; align-items: center; gap: 8px; font-size: 12px; color: #2563eb; font-weight: 600; margin-top: 6px; }
.bulk-delete-bar { display: none; align-items: center; justify-content: space-between; background: #fef2f2; border: 1px solid #fecaca; padding: 12px 18px; border-radius: 12px; margin-bottom: 16px; }
.checkbox-custom { width: 17px; height: 17px; accent-color: #2563eb; cursor: pointer; }

/* Custom Searchable Dropdown */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}
.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.2s ease;
}
.custom-select-trigger:hover, .custom-select-wrapper.open .custom-select-trigger {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.custom-select-trigger .arrow {
    font-size: 12px;
    color: #64748b;
    transition: transform 0.2s;
}
.custom-select-wrapper.open .custom-select-trigger .arrow {
    transform: rotate(180deg);
}

.custom-options-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.18);
    z-index: 1000;
    display: none;
    overflow: hidden;
}
.custom-select-wrapper.open .custom-options-dropdown {
    display: block;
    animation: dropdownPop 0.15s ease-out;
}

@keyframes dropdownPop {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-search-box {
    padding: 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}
.dropdown-search-box input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 36px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    background: #ffffff;
    box-sizing: border-box;
}
.dropdown-search-box input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.dropdown-search-box .search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 13px;
    pointer-events: none;
}

.custom-options-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
}
.optgroup-title {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}
.optgroup-title:first-child {
    border-top: none;
}
.custom-option {
    padding: 10px 16px 10px 24px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.custom-option:hover, .custom-option.highlighted {
    background: #eff6ff;
    color: #1d4ed8;
}
.custom-option.selected {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 700;
}
.custom-option .opt-price {
    font-weight: 700;
    color: #15803d;
    font-size: 12px;
}
.no-results-msg {
    padding: 18px;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    display: none;
}

/* Source: admin/api_accounts.php */
.gateway-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: all 0.2s ease;
}
.gateway-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.gateway-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.btn-gateway-sync {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #bfdbfe;
    transition: all 0.2s;
}
.btn-gateway-sync:hover {
    background: #2563eb;
    color: #ffffff;
}
.btn-gateway-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-gateway-disable {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
.btn-gateway-disable:hover {
    background: #f59e0b;
    color: #ffffff;
}
.btn-gateway-enable {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.btn-gateway-enable:hover {
    background: #16a34a;
    color: #ffffff;
}
.btn-gateway-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #fecaca;
    transition: all 0.2s;
}
.btn-gateway-delete:hover {
    background: #dc2626;
    color: #ffffff;
}

/* Source: admin/api_docs.php */
/* Modern Dev-Portal Styling */
.docs-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    padding: 32px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}

.cred-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.cred-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.cred-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.cred-val-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    padding: 8px 12px;
    border-radius: 8px;
}

.cred-val {
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.doc-header {
    padding: 18px 24px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.doc-body {
    padding: 24px;
}

.badge-get {
    background: #dcfce7;
    color: #15803d;
    font-weight: 800;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.05em;
}

.code-container {
    background: #0b1120;
    border-radius: 12px;
    padding: 18px 20px;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.6;
    position: relative;
    margin: 10px 0 18px;
    overflow-x: auto;
    border: 1px solid #1e293b;
}

.code-container .copy-code-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.code-container .copy-code-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.param-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 13px;
}

.param-table th {
    background: #f8fafc;
    color: #64748b;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}

.param-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.param-name {
    font-family: monospace;
    font-weight: 700;
    color: #2563eb;
}

/* Source: admin/clients.php */
.client-avatar-chip {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    border: 1px solid #bfdbfe;
    flex-shrink: 0;
}
.role-badge-client {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 800;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid #bfdbfe;
}
.btn-action-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s;
}
.btn-edit-sm { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.btn-del-sm { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.btn-action-sm:hover { opacity: 0.9; transform: translateY(-1px); }

/* Source: admin/dashboard.php */
/* Custom Searchable Select Dropdown */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}
.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    padding: 0 16px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.2s ease;
}
.custom-select-trigger:hover, .custom-select-wrapper.open .custom-select-trigger {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.custom-select-trigger .arrow {
    font-size: 12px;
    color: #64748b;
    transition: transform 0.2s;
}
.custom-select-wrapper.open .custom-select-trigger .arrow {
    transform: rotate(180deg);
}

.custom-options-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.18);
    z-index: 1000;
    display: none;
    overflow: hidden;
}
.custom-select-wrapper.open .custom-options-dropdown {
    display: block;
    animation: dropdownPop 0.15s ease-out;
}

@keyframes dropdownPop {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-search-box {
    padding: 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}
.dropdown-search-box input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 36px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    background: #ffffff;
    box-sizing: border-box;
}
.dropdown-search-box input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.dropdown-search-box .search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 13px;
    pointer-events: none;
}

.custom-options-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
}
.optgroup-title {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}
.optgroup-title:first-child {
    border-top: none;
}
.custom-option {
    padding: 10px 16px 10px 24px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.custom-option:hover, .custom-option.highlighted {
    background: #eff6ff;
    color: #1d4ed8;
}
.custom-option.selected {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 700;
}
.custom-option .opt-price {
    font-weight: 700;
    color: #15803d;
    font-size: 12px;
}
.no-results-msg {
    padding: 18px;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    display: none;
}

/* Source: admin/edit_service.php */
.api-type-selector {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}
.api-type-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s;
}
.api-type-card:hover {
    border-color: #2563eb;
    background: #f8fafc;
}
.api-type-card input[type="radio"] {
    width: auto;
    height: auto;
    margin: 0;
    cursor: pointer;
}
.loading-spinner {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #2563eb;
    font-weight: 600;
    margin-top: 6px;
}

/* Source: admin/manage_credits.php */
.action-btn-approve {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.action-btn-approve:hover { background: #16a34a; color: #fff; }

.action-btn-reject {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.action-btn-reject:hover { background: #dc2626; color: #fff; }

.custom-select-wrapper { position: relative; user-select: none; width: 100%; }
.custom-select-trigger {
    display: flex; align-items: center; justify-content: space-between;
    height: 42px; padding: 0 14px; background: #ffffff;
    border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13.5px;
    font-weight: 600; color: #0f172a; cursor: pointer; transition: all 0.2s ease;
}
.custom-select-trigger:hover, .custom-select-wrapper.open .custom-select-trigger {
    border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.custom-select-trigger .arrow { font-size: 12px; color: #64748b; transition: transform 0.2s; }
.custom-select-wrapper.open .custom-select-trigger .arrow { transform: rotate(180deg); }
.custom-options-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #ffffff; border: 1px solid #cbd5e1; border-radius: 10px;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.18); z-index: 1000;
    display: none; overflow: hidden;
}
.custom-select-wrapper.open .custom-options-dropdown { display: block; }
.dropdown-search-box { padding: 10px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; position: relative; }
.dropdown-search-box input {
    width: 100%; height: 36px; padding: 0 12px 0 34px;
    border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px;
    outline: none; background: #ffffff; box-sizing: border-box;
}
.dropdown-search-box .search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 13px; }
.custom-options-list { max-height: 240px; overflow-y: auto; padding: 4px 0; }
.custom-option {
    padding: 9px 16px; font-size: 13px; color: #1e293b; cursor: pointer;
    transition: background 0.15s ease; display: flex; justify-content: space-between; align-items: center;
}
.custom-option:hover, .custom-option.selected { background: #eff6ff; color: #1d4ed8; }
.custom-option .opt-bal { font-weight: 700; color: #16a34a; font-size: 12px; }
.no-results-msg { padding: 16px; text-align: center; font-size: 12.5px; color: #94a3b8; display: none; }

/* Source: admin/orders.php */
.container { max-width: 100% !important; padding: 20px 24px; }
.services-table { width: 100% !important; border-collapse: collapse; }
.services-table th, .services-table td { padding: 12px 14px; }
.services-table th { font-size: 11px; font-weight: 800; text-transform: uppercase; color: #475569; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.table-wrap { width: 100%; overflow-x: hidden; }

.btn-order-id { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; padding: 5px 12px; border-radius: 8px; font-weight: 800; font-size: 12px; cursor: pointer; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 9999px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.status-success { background: #dcfce7; color: #15803d; }
.status-rejected { background: #fee2e2; color: #b91c1c; }
.status-inprocess { background: #dbeafe; color: #1d4ed8; }
.status-pending { background: #fef3c7; color: #b45309; }

.result-box-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 12px; cursor: pointer; max-width: 340px; }
.result-box-card:hover { background: #ffffff; border-color: #93c5fd; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08); }
.result-box-text { overflow: hidden; min-width: 0; }
.result-main-line { font-size: 11px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-sub-line { font-size: 10px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.btn-result-view { border: none; background: #eff6ff; color: #2563eb; border-radius: 6px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 10px; }

/* Modal */
.order-modal { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(6px); z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.order-modal.show { display: flex; }
.order-modal-box { width: 100%; max-width: 660px; background: #ffffff; border-radius: 20px; overflow: hidden; box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35); border: 1px solid #e2e8f0; }
.order-modal-head { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #0f172a, #1e293b); color: #ffffff; padding: 18px 24px; }
.order-modal-body { padding: 24px; max-height: 75vh; overflow-y: auto; }
.modal-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.modal-stat-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 16px; }
.modal-stat-label { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #64748b; margin-bottom: 4px; }
.modal-stat-val { font-size: 14px; font-weight: 700; color: #0f172a; }

/* Clean tight spacing */
.code-editor-wrapper { background: #0b1120; border: 1px solid #1e293b; border-radius: 12px; overflow: hidden; }
.code-editor-header { background: #0f172a; border-bottom: 1px solid #1e293b; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; }
.code-editor-header span { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; }
.code-editor-content { 
    padding: 16px 20px; 
    color: #f8fafc; 
    font-family: 'JetBrains Mono', Consolas, monospace; 
    font-size: 13px; 
    line-height: 1.45 !important; 
    white-space: pre-wrap !important; 
    word-break: break-word; 
    max-height: 340px; 
    overflow-y: auto; 
}
.code-editor-content img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 4px auto 12px; 
    border-radius: 8px; 
}
.code-editor-content font[color="green"], .code-editor-content span[style*="green"] { 
    color: #4ade80 !important; 
    font-weight: bold; 
}
.code-editor-content font[color="red"], .code-editor-content span[style*="red"] { 
    color: #f87171 !important; 
    font-weight: bold; 
}

/* Source: admin/placeorders.php */
.order-card-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
}
.order-header-box {
    margin-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 16px;
}

/* Custom Searchable Dropdown */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}
.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    padding: 0 16px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.2s ease;
}
.custom-select-trigger:hover, .custom-select-wrapper.open .custom-select-trigger {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.custom-select-trigger .arrow {
    font-size: 12px;
    color: #64748b;
    transition: transform 0.2s;
}
.custom-select-wrapper.open .custom-select-trigger .arrow {
    transform: rotate(180deg);
}

.custom-options-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.18);
    z-index: 1000;
    display: none;
    overflow: hidden;
}
.custom-select-wrapper.open .custom-options-dropdown {
    display: block;
    animation: dropdownPop 0.15s ease-out;
}

@keyframes dropdownPop {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-search-box {
    padding: 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}
.dropdown-search-box input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 36px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    background: #ffffff;
    box-sizing: border-box;
}
.dropdown-search-box input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.dropdown-search-box .search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 13px;
    pointer-events: none;
}

.custom-options-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
}
.optgroup-title {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}
.optgroup-title:first-child {
    border-top: none;
}
.custom-option {
    padding: 10px 16px 10px 24px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.custom-option:hover, .custom-option.highlighted {
    background: #eff6ff;
    color: #1d4ed8;
}
.custom-option.selected {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 700;
}
.custom-option .opt-price {
    font-weight: 700;
    color: #15803d;
    font-size: 12px;
}
.no-results-msg {
    padding: 18px;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
    display: none;
}

/* Popup Overlay */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}
.popup-box {
    background: #ffffff;
    border-radius: 18px;
    padding: 32px 28px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    border: 1px solid #e2e8f0;
}
.popup-icon {
    width: 56px;
    height: 56px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 16px;
}

/* Source: admin/services.php */
.service-pill-active { background: #dcfce7; color: #15803d; font-weight: 800; font-size: 11px; padding: 4px 10px; border-radius: 9999px; }
.service-pill-disabled { background: #fee2e2; color: #b91c1c; font-weight: 800; font-size: 11px; padding: 4px 10px; border-radius: 9999px; }
.btn-action-sm { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 8px; text-decoration: none; border: 1px solid transparent; }
.btn-edit-sm { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.btn-toggle-sm { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.btn-del-sm { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.btn-action-sm:hover { opacity: 0.9; }

/* Source: admin/sync_dhru_services.php */
.sync-header-box {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #ffffff;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.sync-badge {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #93c5fd;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.markup-control-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.group-header-row {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.service-sync-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}
.service-sync-row:hover {
    background: #f8fafc;
}
.checkbox-custom {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    cursor: pointer;
}
.synced-pill {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 9999px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* Source: admin/telegram_client_connect.php */
.timer-bar-container {
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
}
.timer-bar-progress {
    height: 100%;
    width: 100%;
    background: #0284c7;
    transition: width 1s linear;
}
.pin-code-display {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 6px;
    color: #0284c7;
    font-family: 'JetBrains Mono', Consolas, monospace;
    transition: opacity 0.2s ease;
}
.btn-refresh-pin {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    transition: color 0.15s;
}
.btn-refresh-pin:hover {
    color: #0284c7;
}

/* Source: includes/header.php */
/* ============================================================
   GLOBAL PORTAL SYSTEM STYLES & MOBILE OVERRIDES
============================================================ */
.container, .page-frame { 
    max-width: 100% !important; 
    padding: 16px !important; 
    box-sizing: border-box;
}
.services-table { 
    width: 100% !important; 
    border-collapse: collapse; 
}
.services-table th, .services-table td { 
    padding: 12px 14px; 
}
.services-table th { 
    font-size: 11px; 
    font-weight: 800; 
    text-transform: uppercase; 
    color: #475569; 
    background: #f8fafc; 
    border-bottom: 1px solid #e2e8f0; 
}
.table-wrap { 
    width: 100%; 
    overflow-x: auto; 
}

/* Status Badges */
.status-pill, .status-success, .status-rejected, .status-inprocess, .status-pending { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 4px 10px; 
    border-radius: 9999px; 
    font-size: 10px; 
    font-weight: 800; 
    letter-spacing: 0.04em; 
    text-transform: uppercase; 
}
.status-success { background: #dcfce7; color: #15803d; }
.status-rejected { background: #fee2e2; color: #b91c1c; }
.status-inprocess { background: #dbeafe; color: #1d4ed8; }
.status-pending { background: #fef3c7; color: #b45309; }

/* Result Snippet Box */
.result-box-card { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 8px; 
    background: #f8fafc; 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    padding: 6px 12px; 
    cursor: pointer; 
    max-width: 340px; 
    transition: all 0.2s ease;
}
.result-box-card:hover { 
    background: #ffffff; 
    border-color: #93c5fd; 
}
.result-main-line { 
    font-size: 11.5px; 
    font-weight: 700; 
    color: #0f172a; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}
.result-sub-line { 
    font-size: 10px; 
    color: #64748b; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    margin-top: 2px; 
}
.btn-result-view { 
    border: none; 
    background: #eff6ff; 
    color: #2563eb; 
    border-radius: 6px; 
    width: 24px; 
    height: 24px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 10px; 
}

/* Modal Popup Engine */
.order-modal { 
    display: none; 
    position: fixed; 
    inset: 0; 
    background: rgba(15, 23, 42, 0.75); 
    backdrop-filter: blur(4px); 
    z-index: 9999; 
    align-items: center; 
    justify-content: center; 
    padding: 14px; 
    box-sizing: border-box;
}
.order-modal.show { 
    display: flex; 
}
.order-modal-box { 
    width: 100%; 
    max-width: 660px; 
    background: #ffffff; 
    border-radius: 18px; 
    overflow: hidden; 
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35); 
    animation: modalSlide 0.2s ease-out;
}
@keyframes modalSlide {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.order-modal-head { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); 
    color: #ffffff; 
    padding: 16px 20px; 
}
.order-modal-body { 
    padding: 20px; 
    max-height: 80vh; 
    overflow-y: auto; 
}
.modal-stat-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
    margin-bottom: 16px; 
}
.modal-stat-box { 
    background: #f8fafc; 
    border: 1px solid #e2e8f0; 
    border-radius: 10px; 
    padding: 10px 14px; 
}
.modal-stat-label { 
    font-size: 10px; 
    font-weight: 800; 
    text-transform: uppercase; 
    color: #64748b; 
    margin-bottom: 2px; 
}
.modal-stat-val { 
    font-size: 13px; 
    font-weight: 700; 
    color: #0f172a; 
    word-break: break-all; 
}

/* Result Workspace Content */
.code-editor-wrapper { 
    background: #0b1120; 
    border: 1px solid #1e293b; 
    border-radius: 12px; 
    overflow: hidden; 
}
.code-editor-header { 
    background: #0f172a; 
    border-bottom: 1px solid #1e293b; 
    padding: 10px 14px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.code-editor-header span { 
    font-size: 11px; 
    font-weight: 700; 
    color: #94a3b8; 
    text-transform: uppercase; 
}
.code-editor-content { 
    padding: 16px 20px; 
    color: #f8fafc; 
    font-family: 'JetBrains Mono', Consolas, monospace; 
    font-size: 13px; 
    line-height: 1.45 !important; 
    white-space: pre-wrap !important; 
    word-break: break-word; 
    max-height: 340px; 
    overflow-y: auto; 
}
.code-editor-content img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 4px auto 12px; 
    border-radius: 8px; 
}
.code-editor-content font[color="green"], .code-editor-content span[style*="green"] { 
    color: #4ade80 !important; 
    font-weight: bold; 
}
.code-editor-content font[color="red"], .code-editor-content span[style*="red"] { 
    color: #f87171 !important; 
    font-weight: bold; 
}

/* ============================================================
   SUBMENU COLLAPSIBLE NAVIGATION
============================================================ */
.nav-group-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}
.nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.nav-group-header .nav-chevron {
    font-size: 10px;
    margin-right: 8px;
    transition: transform 0.2s ease;
}
.nav-group-wrapper.open .nav-chevron {
    transform: rotate(180deg);
}
.sidebar-subnav {
    display: none;
    flex-direction: column;
    padding-left: 28px;
    margin: 4px 0 8px;
    gap: 4px;
}
.nav-group-wrapper.open .sidebar-subnav {
    display: flex;
}
.sub-nav-link {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.2s ease;
}
.sub-nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}
.sub-nav-link.is-active {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    font-weight: 700;
}

/* ============================================================
   MODERN UNIVERSAL FLOATING TOAST NOTIFICATION
============================================================ */
.wu-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.wu-toast {
    pointer-events: auto;
    min-width: 300px;
    max-width: 420px;
    background: #ffffff;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.wu-toast.show {
    transform: translateX(0);
    opacity: 1;
}
.wu-toast-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.wu-toast.success .wu-toast-icon {
    background: #dcfce7;
    color: #16a34a;
}
.wu-toast.error .wu-toast-icon {
    background: #fee2e2;
    color: #dc2626;
}
.wu-toast.info .wu-toast-icon {
    background: #e0f2fe;
    color: #0284c7;
}
.wu-toast-body {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}
.wu-toast-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
.wu-toast-close:hover {
    color: #334155;
}

/* Hide old default static alert banners */
.alert-success, .alert-error, .alert-danger, .alert-info {
    display: none !important;
}

/* ============================================================
   RESPONSIVE MOBILE BREAKPOINT (< 768px)
============================================================ */
@media (max-width: 768px) {
    .container, .page-frame { 
        padding: 10px !important; 
    }
    .services-table thead { 
        display: none; 
    }
    .services-table, .services-table tbody, .services-table tr, .services-table td { 
        display: block; 
        width: 100% !important; 
        box-sizing: border-box; 
    }
    .services-table tr { 
        background: #ffffff; 
        border: 1px solid #e2e8f0; 
        border-radius: 12px; 
        margin-bottom: 14px; 
        padding: 12px 14px; 
        box-shadow: 0 1px 3px rgba(0,0,0,0.04); 
    }
    .services-table td { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: 8px 0 !important; 
        border-bottom: 1px dashed #f1f5f9; 
        text-align: right !important; 
    }
    .services-table td:last-child { 
        border-bottom: none; 
    }
    .services-table td::before { 
        content: attr(data-label); 
        font-size: 11px; 
        font-weight: 800; 
        color: #64748b; 
        text-transform: uppercase; 
        text-align: left; 
    }
    .result-box-card { 
        max-width: 65% !important; 
    }
    .modal-stat-grid { 
        grid-template-columns: 1fr; 
    }
    .status-radio-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
    .wu-toast-container {
        top: 14px;
        right: 14px;
        left: 14px;
    }
    .wu-toast {
        min-width: 0;
        width: 100%;
    }
}

/* ============================================================
   PUBLIC AUTH / LANDING PAGE COMPONENTS
   Namespaced so they never override the authenticated portal.
============================================================ */

/* Source: index.php */
.public-page *, .public-page *::before, .public-page *::after{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }.public-page{
            --brand-primary: #2563eb;
            --brand-primary-hover: #1d4ed8;
            --brand-accent: #4f46e5;
            --navy-950: #0b1120;
            --navy-900: #0f172a;
            --navy-800: #1e293b;
            --navy-700: #334155;
            --slate-500: #64748b;
            --slate-400: #94a3b8;
            --slate-200: #e2e8f0;
            --slate-100: #f1f5f9;
            --slate-50: #f8fafc;
            --radius-sm: 8px;
            --radius-md: 14px;
            --radius-lg: 24px;
            --radius-pill: 9999px;
            --shadow-float: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
            --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        }.public-page, .public-page{
            width: 100%;
            min-height: 100%;
        }.public-page{
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            min-height: 100vh;
            background: 
                radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.25), transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(79, 70, 229, 0.2), transparent 40%),
                linear-gradient(135deg, #0b1120 0%, #0f172a 50%, #1e293b 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            color: #ffffff;
            -webkit-font-smoothing: antialiased;
        }.public-page .portal-wrapper{
            width: 100%;
            max-width: 1080px;
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-float);
        }.public-page /* Left Showcase Section */
        .showcase-panel{
            padding: 60px 48px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, rgba(15, 23, 42, 0.4) 100%);
            border-right: 1px solid rgba(255, 255, 255, 0.08);
        }.public-page .brand{
            display: inline-flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 32px;
        }.public-page .brand-logo-box{
            width: 52px;
            height: 52px;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: #ffffff;
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
            flex-shrink: 0;
            overflow: hidden;
        }.public-page .brand-logo-box img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }.public-page .brand-text{
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #ffffff;
        }.public-page .showcase-panel h1{
            font-size: 38px;
            line-height: 1.2;
            font-weight: 800;
            margin-bottom: 16px;
            letter-spacing: -0.03em;
            background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }.public-page .showcase-panel p{
            font-size: 15px;
            line-height: 1.65;
            color: #94a3b8;
            margin-bottom: 32px;
            max-width: 480px;
        }.public-page .feature-list{
            display: flex;
            flex-direction: column;
            gap: 14px;
        }.public-page .feature-item{
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            font-weight: 500;
            color: #e2e8f0;
        }.public-page .feature-icon{
            width: 30px;
            height: 30px;
            border-radius: 8px;
            background: rgba(37, 99, 235, 0.18);
            border: 1px solid rgba(59, 130, 246, 0.25);
            color: #60a5fa;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }.public-page /* Right Action Card Section */
        .auth-panel{
            background: #ffffff;
            padding: 56px 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }.public-page .auth-card{
            width: 100%;
            max-width: 360px;
            text-align: center;
        }.public-page .auth-card h2{
            font-size: 26px;
            font-weight: 800;
            color: var(--navy-900);
            letter-spacing: -0.02em;
            margin-bottom: 8px;
        }.public-page .auth-card p{
            font-size: 14px;
            color: var(--slate-500);
            line-height: 1.5;
            margin-bottom: 30px;
        }.public-page .btn-stack{
            display: flex;
            flex-direction: column;
            gap: 12px;
        }.public-page .btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            min-height: 48px;
            padding: 0 20px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 700;
            font-family: inherit;
            text-decoration: none;
            cursor: pointer;
            transition: var(--transition);
        }.public-page .btn-primary{
            background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
            color: #ffffff;
            border: none;
            box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
        }.public-page .btn-primary:hover{
            background: linear-gradient(135deg, var(--brand-primary-hover), #4338ca);
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
        }.public-page .btn-outline{
            background: #ffffff;
            color: var(--navy-700);
            border: 1px solid var(--slate-200);
        }.public-page .btn-outline:hover{
            background: var(--slate-50);
            border-color: var(--slate-300);
            color: var(--navy-900);
            transform: translateY(-2px);
        }.public-page .security-badge{
            margin-top: 28px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: var(--radius-pill);
            background: var(--slate-50);
            border: 1px solid var(--slate-200);
            color: var(--slate-500);
            font-size: 12px;
            font-weight: 600;
        }.public-page .security-badge i{
            color: #16a34a;
        }.public-page .footer-note{
            margin-top: 14px;
            font-size: 12px;
            color: var(--slate-400);
        }.public-page /* Responsive Breakpoints */
        @media (max-width: 920px){
            .portal-wrapper {
                grid-template-columns: 1fr;
                max-width: 520px;
            }

            .showcase-panel {
                padding: 40px 32px;
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                text-align: center;
                align-items: center;
            }

            .showcase-panel h1 {
                font-size: 30px;
            }

            .brand {
                justify-content: center;
            }

            .feature-list {
                align-items: flex-start;
                text-align: left;
            }

            .auth-panel {
                padding: 42px 32px;
            }
        }

        @media (max-width: 480px) {.public-page{
                padding: 14px;
            }.public-page .portal-wrapper{
                border-radius: var(--radius-md);
            }.public-page .showcase-panel{
                padding: 30px 20px;
            }.public-page .showcase-panel h1{
                font-size: 24px;
            }.public-page .auth-panel{
                padding: 32px 20px;
            }.public-page .auth-card h2{
                font-size: 22px;
            }
        }

/* Source: login.php */
.public-page *, .public-page *::before, .public-page *::after{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }.public-page{
            --brand-primary: #2563eb;
            --brand-primary-hover: #1d4ed8;
            --brand-accent: #4f46e5;
            --navy-950: #0b1120;
            --navy-900: #0f172a;
            --navy-800: #1e293b;
            --navy-700: #334155;
            --slate-500: #64748b;
            --slate-400: #94a3b8;
            --slate-300: #cbd5e1;
            --slate-200: #e2e8f0;
            --slate-100: #f1f5f9;
            --slate-50: #f8fafc;
            --radius-sm: 8px;
            --radius-md: 14px;
            --radius-lg: 24px;
            --radius-pill: 9999px;
            --shadow-float: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
            --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        }.public-page, .public-page{
            width: 100%;
            min-height: 100%;
        }.public-page{
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            min-height: 100vh;
            background: 
                radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.25), transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(79, 70, 229, 0.2), transparent 40%),
                linear-gradient(135deg, #0b1120 0%, #0f172a 50%, #1e293b 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            color: #ffffff;
            -webkit-font-smoothing: antialiased;
        }.public-page .portal-wrapper{
            width: 100%;
            max-width: 1080px;
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-float);
        }.public-page .showcase-panel{
            padding: 60px 48px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, rgba(15, 23, 42, 0.4) 100%);
            border-right: 1px solid rgba(255, 255, 255, 0.08);
        }.public-page .brand{
            display: inline-flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 32px;
        }.public-page .brand-logo-box{
            width: 52px;
            height: 52px;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: #ffffff;
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
            flex-shrink: 0;
            overflow: hidden;
        }.public-page .brand-logo-box img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }.public-page .brand-text{
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #ffffff;
        }.public-page .showcase-panel h1{
            font-size: 38px;
            line-height: 1.2;
            font-weight: 800;
            margin-bottom: 16px;
            letter-spacing: -0.03em;
            background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }.public-page .showcase-panel p{
            font-size: 15px;
            line-height: 1.65;
            color: #94a3b8;
            margin-bottom: 32px;
            max-width: 480px;
        }.public-page .feature-list{
            display: flex;
            flex-direction: column;
            gap: 14px;
        }.public-page .feature-item{
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            font-weight: 500;
            color: #e2e8f0;
        }.public-page .feature-icon{
            width: 30px;
            height: 30px;
            border-radius: 8px;
            background: rgba(37, 99, 235, 0.18);
            border: 1px solid rgba(59, 130, 246, 0.25);
            color: #60a5fa;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }.public-page .auth-panel{
            background: #ffffff;
            padding: 50px 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }.public-page .auth-card{
            width: 100%;
            max-width: 360px;
        }.public-page .auth-card h2{
            font-size: 26px;
            font-weight: 800;
            color: var(--navy-900);
            letter-spacing: -0.02em;
            margin-bottom: 6px;
            text-align: center;
        }.public-page .auth-card p.sub{
            font-size: 14px;
            color: var(--slate-500);
            line-height: 1.5;
            margin-bottom: 24px;
            text-align: center;
        }.public-page .alert{
            padding: 12px 14px;
            border-radius: var(--radius-sm);
            margin-bottom: 18px;
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }.public-page .alert-error{
            background: #fee2e2;
            border: 1px solid #fecaca;
            color: #b91c1c;
        }.public-page .alert-success{
            background: #dcfce7;
            border: 1px solid #bbf7d0;
            color: #166534;
        }.public-page .form-group{
            margin-bottom: 18px;
        }.public-page .form-group label{
            display: block;
            font-size: 12px;
            font-weight: 700;
            color: var(--navy-700);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 6px;
        }.public-page .input-box{
            position: relative;
            display: flex;
            align-items: center;
        }.public-page .input-box i.input-icon{
            position: absolute;
            left: 14px;
            color: var(--slate-400);
            font-size: 14px;
            pointer-events: none;
        }.public-page .input-box input{
            width: 100%;
            height: 44px;
            padding: 0 42px 0 38px;
            font-size: 14px;
            font-family: inherit;
            color: var(--navy-900);
            background: #ffffff;
            border: 1px solid var(--slate-300);
            border-radius: var(--radius-sm);
            outline: none;
            transition: var(--transition);
        }.public-page .input-box input:focus{
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        }.public-page .toggle-password{
            position: absolute;
            right: 12px;
            background: transparent;
            border: none;
            color: var(--slate-400);
            cursor: pointer;
            padding: 6px;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.15s ease;
        }.public-page .toggle-password:hover{
            color: var(--navy-900);
        }.public-page .btn-submit{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            min-height: 46px;
            padding: 0 20px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 700;
            font-family: inherit;
            color: #ffffff;
            background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
            border: none;
            cursor: pointer;
            box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
            transition: var(--transition);
            margin-top: 6px;
        }.public-page .btn-submit:hover{
            background: linear-gradient(135deg, var(--brand-primary-hover), #4338ca);
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
        }.public-page .btn-home{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 10px;
            padding: 11px;
            background: var(--slate-50);
            border: 1px solid var(--slate-200);
            border-radius: var(--radius-sm);
            text-decoration: none;
            color: var(--navy-700);
            font-size: 13px;
            font-weight: 600;
            transition: var(--transition);
        }.public-page .btn-home:hover{
            background: var(--slate-100);
            color: var(--navy-900);
        }.public-page .register-link{
            margin-top: 18px;
            text-align: center;
            font-size: 13px;
            color: var(--slate-500);
        }.public-page .register-link a{
            color: var(--brand-primary);
            font-weight: 700;
            text-decoration: none;
        }.public-page .register-link a:hover{
            text-decoration: underline;
        }.public-page .security-badge{
            margin-top: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 12px;
            color: var(--slate-400);
        }.public-page .security-badge i{
            color: #16a34a;
        }

        @media (max-width: 920px) {.public-page .portal-wrapper{
                grid-template-columns: 1fr;
                max-width: 520px;
            }.public-page .showcase-panel{
                padding: 40px 32px;
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                text-align: center;
                align-items: center;
            }.public-page .showcase-panel h1{
                font-size: 30px;
            }.public-page .brand{
                justify-content: center;
            }.public-page .feature-list{
                align-items: flex-start;
                text-align: left;
            }.public-page .auth-panel{
                padding: 42px 32px;
            }
        }

        @media (max-width: 480px) {.public-page{
                padding: 14px;
            }.public-page .portal-wrapper{
                border-radius: var(--radius-md);
            }.public-page .showcase-panel{
                padding: 30px 20px;
            }.public-page .showcase-panel h1{
                font-size: 24px;
            }.public-page .auth-panel{
                padding: 32px 20px;
            }.public-page .auth-card h2{
                font-size: 22px;
            }
        }

/* Source: registration.php */
.public-page *, .public-page *::before, .public-page *::after{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }.public-page{
            --brand-primary: #2563eb;
            --brand-primary-hover: #1d4ed8;
            --brand-accent: #4f46e5;
            --navy-950: #0b1120;
            --navy-900: #0f172a;
            --navy-800: #1e293b;
            --navy-700: #334155;
            --slate-500: #64748b;
            --slate-400: #94a3b8;
            --slate-300: #cbd5e1;
            --slate-200: #e2e8f0;
            --slate-100: #f1f5f9;
            --slate-50: #f8fafc;
            --radius-sm: 8px;
            --radius-md: 14px;
            --radius-lg: 24px;
            --radius-pill: 9999px;
            --shadow-float: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
            --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        }.public-page, .public-page{
            width: 100%;
            min-height: 100%;
        }.public-page{
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            min-height: 100vh;
            background: 
                radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.25), transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(79, 70, 229, 0.2), transparent 40%),
                linear-gradient(135deg, #0b1120 0%, #0f172a 50%, #1e293b 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px 20px;
            color: #ffffff;
            -webkit-font-smoothing: antialiased;
        }.public-page .portal-wrapper{
            width: 100%;
            max-width: 1120px;
            display: grid;
            grid-template-columns: 1fr 1.15fr;
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-float);
        }.public-page .showcase-panel{
            padding: 60px 45px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, rgba(15, 23, 42, 0.4) 100%);
            border-right: 1px solid rgba(255, 255, 255, 0.08);
        }.public-page .brand{
            display: inline-flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 32px;
        }.public-page .brand-logo-box{
            width: 52px;
            height: 52px;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: #ffffff;
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
            flex-shrink: 0;
            overflow: hidden;
        }.public-page .brand-logo-box img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }.public-page .brand-text{
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #ffffff;
        }.public-page .showcase-panel h1{
            font-size: 36px;
            line-height: 1.2;
            font-weight: 800;
            margin-bottom: 16px;
            letter-spacing: -0.03em;
            background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }.public-page .showcase-panel p{
            font-size: 15px;
            line-height: 1.65;
            color: #94a3b8;
            margin-bottom: 32px;
            max-width: 440px;
        }.public-page .feature-list{
            display: flex;
            flex-direction: column;
            gap: 14px;
        }.public-page .feature-item{
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            font-weight: 500;
            color: #e2e8f0;
        }.public-page .feature-icon{
            width: 30px;
            height: 30px;
            border-radius: 8px;
            background: rgba(37, 99, 235, 0.18);
            border: 1px solid rgba(59, 130, 246, 0.25);
            color: #60a5fa;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }.public-page .auth-panel{
            background: #ffffff;
            padding: 45px 42px;
            display: flex;
            align-items: center;
            justify-content: center;
        }.public-page .auth-card{
            width: 100%;
            max-width: 480px;
        }.public-page .auth-card h2{
            font-size: 26px;
            font-weight: 800;
            color: var(--navy-900);
            letter-spacing: -0.02em;
            margin-bottom: 6px;
            text-align: center;
        }.public-page .auth-card p.sub{
            font-size: 14px;
            color: var(--slate-500);
            line-height: 1.5;
            margin-bottom: 22px;
            text-align: center;
        }.public-page .alert-error{
            padding: 12px 14px;
            border-radius: var(--radius-sm);
            margin-bottom: 18px;
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            background: #fee2e2;
            border: 1px solid #fecaca;
            color: #b91c1c;
        }.public-page .form-grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }.public-page .form-grid.full-width{
            grid-template-columns: 1fr;
        }.public-page .form-group{
            margin-bottom: 14px;
        }.public-page .form-group label{
            display: block;
            font-size: 11px;
            font-weight: 700;
            color: var(--navy-700);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 6px;
        }.public-page .input-box{
            position: relative;
            display: flex;
            align-items: center;
        }.public-page .input-box i.input-icon{
            position: absolute;
            left: 13px;
            color: var(--slate-400);
            font-size: 13px;
            pointer-events: none;
        }.public-page .input-box input, .public-page .input-box select{
            width: 100%;
            height: 42px;
            padding: 0 38px 0 36px;
            font-size: 13px;
            font-family: inherit;
            color: var(--navy-900);
            background: #ffffff;
            border: 1px solid var(--slate-300);
            border-radius: var(--radius-sm);
            outline: none;
            transition: var(--transition);
        }.public-page .input-box select{
            padding-right: 14px;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 14px;
        }.public-page .input-box input:focus, .public-page .input-box select:focus{
            border-color: var(--brand-primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        }.public-page .toggle-password{
            position: absolute;
            right: 10px;
            background: transparent;
            border: none;
            color: var(--slate-400);
            cursor: pointer;
            padding: 6px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.15s ease;
        }.public-page .toggle-password:hover{
            color: var(--navy-900);
        }.public-page .btn-submit{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            min-height: 46px;
            padding: 0 20px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 700;
            font-family: inherit;
            color: #ffffff;
            background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
            border: none;
            cursor: pointer;
            box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
            transition: var(--transition);
            margin-top: 6px;
        }.public-page .btn-submit:hover{
            background: linear-gradient(135deg, var(--brand-primary-hover), #4338ca);
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
        }.public-page .btn-home{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 10px;
            padding: 10px;
            background: var(--slate-50);
            border: 1px solid var(--slate-200);
            border-radius: var(--radius-sm);
            text-decoration: none;
            color: var(--navy-700);
            font-size: 13px;
            font-weight: 600;
            transition: var(--transition);
        }.public-page .btn-home:hover{
            background: var(--slate-100);
            color: var(--navy-900);
        }.public-page .login-link{
            margin-top: 16px;
            text-align: center;
            font-size: 13px;
            color: var(--slate-500);
        }.public-page .login-link a{
            color: var(--brand-primary);
            font-weight: 700;
            text-decoration: none;
        }.public-page .login-link a:hover{
            text-decoration: underline;
        }.public-page .security-badge{
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 12px;
            color: var(--slate-400);
        }.public-page .security-badge i{
            color: #16a34a;
        }

        @media (max-width: 960px) {.public-page .portal-wrapper{
                grid-template-columns: 1fr;
                max-width: 540px;
            }.public-page .showcase-panel{
                padding: 40px 32px;
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                text-align: center;
                align-items: center;
            }.public-page .showcase-panel h1{
                font-size: 28px;
            }.public-page .brand{
                justify-content: center;
            }.public-page .feature-list{
                align-items: flex-start;
                text-align: left;
            }.public-page .auth-panel{
                padding: 36px 28px;
            }
        }

        @media (max-width: 580px) {.public-page .form-grid{
                grid-template-columns: 1fr;
                gap: 0;
            }.public-page .auth-panel{
                padding: 30px 20px;
            }.public-page .showcase-panel{
                padding: 30px 20px;
            }
        }



/* ============================================================
   UNIVERSAL SHELL UTILITIES
============================================================ */
.nav-group-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.balance-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
.balance-link:hover { background: #dcfce7; }
.form-help {
    display: block;
    margin-top: 5px;
    color: var(--slate-500);
    font-size: 11px;
    line-height: 1.45;
}
.wu-toast.warning .wu-toast-icon {
    background: #fef3c7;
    color: #b45309;
}
.wu-toast-body { overflow-wrap: anywhere; }
button, .btn-action, a.btn-action, .btn, .btn-submit {
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease, background 160ms ease;
}
button:active, .btn-action:active, .btn:active, .btn-submit:active { transform: scale(0.97); }

@media (max-width: 840px) {
    .header-actions { gap: 7px; }
    .header-user-name, .header-signout { display: none; }
    .balance-link { padding: 5px 8px; font-size: 12px; }
    .nav-group-label { gap: 6px; }
    .wu-toast-container { top: 12px; right: 12px; left: 12px; }
    .wu-toast { min-width: 0; max-width: none; width: 100%; }
}

/* ============================================================
   PUBLIC PAGE RESPONSIVE BASE
============================================================ */
.public-page {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.25), transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(79, 70, 229, 0.2), transparent 40%),
        linear-gradient(135deg, #0b1120 0%, #0f172a 50%, #1e293b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #fff;
}
.public-page .portal-wrapper { margin: auto; }
.public-page .wu-toast-container { position: fixed; }
.public-page .alert { display: block; }
.public-page .alert-error, .public-page .alert-success { display: flex; }
.public-page .form-group { margin-bottom: 14px; }
.public-page .input-box { position: relative; }
.public-page .input-box input, .public-page .input-box select { padding-left: 36px; }
.public-page .input-box .toggle-password { height: auto; box-shadow: none; }
.public-page .auth-card { text-align: center; }
.public-page .auth-card form { text-align: left; }
.public-page .public-alert-copy { overflow-wrap: anywhere; }

@media (max-width: 920px) {
    .public-page { padding: 16px; }
}
@media (max-width: 580px) {
    .public-page { padding: 10px; align-items: flex-start; }
    .public-page .portal-wrapper { margin: 0 auto; }
    .public-page .auth-panel, .public-page .showcase-panel { padding-left: 20px; padding-right: 20px; }
    .public-page .showcase-panel p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* Correctly scoped public-page breakpoints (kept outside page templates). */
@media (max-width: 960px) {
    .public-page .portal-wrapper { grid-template-columns: 1fr; max-width: 540px; }
    .public-page .showcase-panel {
        padding: 40px 32px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        text-align: center;
        align-items: center;
    }
    .public-page .showcase-panel h1 { font-size: 30px; }
    .public-page .brand { justify-content: center; }
    .public-page .feature-list { align-items: flex-start; text-align: left; }
    .public-page .auth-panel { padding: 36px 28px; }
}
@media (max-width: 580px) {
    .public-page .form-grid { grid-template-columns: 1fr; gap: 0; }
    .public-page .auth-panel, .public-page .showcase-panel { padding: 30px 20px; }
    .public-page .showcase-panel h1 { font-size: 24px; }
    .public-page .auth-card h2 { font-size: 22px; }
}
@media (max-width: 480px) {
    .public-page { padding: 10px; align-items: flex-start; }
    .public-page .portal-wrapper { border-radius: var(--radius-md); }
    .public-page .showcase-panel { padding: 30px 20px; }
    .public-page .auth-panel { padding: 32px 20px; }
}


/* Final universal page grid override: one desktop width, one mobile rhythm. */
.page-frame, .container {
    width: 100%;
    max-width: 1440px !important;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 32px 48px !important;
}
@media (max-width: 840px) {
    .page-frame, .container { padding: 16px 12px 36px !important; }
}
@media (max-width: 480px) {
    .page-frame, .container { padding-left: 10px !important; padding-right: 10px !important; }
}


/* ============================================================
   TABLE ACTIONS: NEVER SPLIT LABELS INTO BROKEN WORDS
============================================================ */
.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: max-content;
}
.btn-action-sm {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    min-width: 76px;
    padding: 7px 12px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.2;
}
.service-actions { min-width: 238px; }
.group-actions { min-width: 174px; }
.table-wrap { overflow-x: auto; }
.services-table { min-width: 760px; table-layout: auto; }
.services-table th, .services-table td { word-break: normal; overflow-wrap: anywhere; }
.services-table td:last-child { white-space: nowrap; }

@media (max-width: 768px) {
    .services-table { min-width: 0; }
    .services-table td:last-child { white-space: normal; }
    .services-table td[data-label="Actions"] { display: block; }
    .table-actions {
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 7px;
    }
    .service-actions, .group-actions { min-width: 0; }
    .btn-action-sm { flex: 0 0 auto; }
}

/* Desktop shell safeguard: keep navigation readable instead of collapsing to an icon rail. */
@media (min-width: 769px) {
    .sidebar {
        width: 260px !important;
        min-width: 260px !important;
        flex: 0 0 260px !important;
    }
}


/* ============================================================
   TELEGRAM CONNECTION STATUS
============================================================ */
.telegram-connect-page {
    max-width: 980px;
}
.telegram-connect-card {
    overflow: hidden;
}
.telegram-connected-state {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: linear-gradient(135deg, #f0fdf4 0%, #f7fff9 100%);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
}
.telegram-connected-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
    font-size: 20px;
    box-shadow: inset 0 0 0 1px #bbf7d0;
}
.telegram-connected-copy {
    min-width: 0;
}
.telegram-status-label {
    display: block;
    margin-bottom: 3px;
    color: #15803d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}
.telegram-connected-copy h4 {
    margin: 0 0 4px;
    color: #166534;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}
.telegram-connected-copy p {
    margin: 0;
    color: #3f7d57;
    font-size: 12px;
    line-height: 1.45;
}
.telegram-chat-id {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: #64748b;
    font-size: 11px;
}
.telegram-chat-id span {
    font-weight: 700;
}
.telegram-chat-id code {
    padding: 3px 7px;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    background: #ffffff;
    color: #166534;
    font-size: 11px;
}
.telegram-disconnect-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fff1f2;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.telegram-disconnect-btn:hover {
    border-color: #fca5a5;
    background: #fee2e2;
    color: #991b1b;
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    .telegram-connect-card {
        padding: 16px !important;
    }
    .telegram-connect-heading {
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    .telegram-connect-heading h3 {
        font-size: 16px !important;
    }
    .telegram-connect-heading p {
        font-size: 12px !important;
        line-height: 1.45;
    }
    .telegram-connected-state {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }
    .telegram-connected-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .telegram-connected-copy h4 {
        font-size: 14px;
    }
    .telegram-disconnect-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* API documentation: keep long examples readable and keep the copy control clear of the URL. */
.code-container {
    min-height: 58px;
    padding: 18px 160px 18px 20px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
}
.code-container > span {
    display: inline-block;
    min-width: max-content;
    white-space: nowrap;
}
.code-container .copy-code-btn {
    z-index: 2;
    top: 10px;
    right: 12px;
    min-height: 36px;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .code-container {
        min-height: 104px;
        padding: 56px 14px 14px;
        font-size: 11px;
    }
    .code-container .copy-code-btn {
        top: 10px;
        right: 10px;
        left: 10px;
        width: calc(100% - 20px);
    }
}


/* Final API example layout: independent URL scroller and copy control. */
.code-container {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 12px;
    overflow: hidden;
    white-space: normal;
}
.code-container .api-code-line {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 8px;
    white-space: nowrap;
    scrollbar-width: thin;
}
.code-container .copy-code-btn {
    position: static;
    order: 2;
    flex: 0 0 auto;
    min-height: 36px;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .code-container {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        min-height: 108px;
        padding: 10px;
    }
    .code-container .copy-code-btn {
        order: 0;
        width: 100%;
    }
    .code-container .api-code-line {
        flex: 0 0 auto;
        width: 100%;
        padding: 6px 4px 8px;
    }
}


/* API examples: wrap long URLs onto additional lines; do not require horizontal scrolling. */
.code-container {
    overflow: visible;
}
.code-container .api-code-line {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.75;
}
@media (max-width: 640px) {
    .code-container .api-code-line {
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}


/* API documentation: active service ID directory. */
.service-id-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.service-id-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 12px;
}
.service-id-table th {
    padding: 11px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
}
.service-id-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    vertical-align: middle;
}
.service-id-table tr:last-child td {
    border-bottom: 0;
}
.service-id-table td strong {
    color: #0f172a;
    font-weight: 700;
}
.service-id-badge {
    display: inline-flex;
    min-width: 38px;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 11px;
    font-weight: 800;
}
.service-id-price {
    color: #15803d !important;
    font-weight: 800;
    white-space: nowrap;
}
.service-id-empty {
    padding: 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}
@media (max-width: 640px) {
    .service-id-table-wrap {
        overflow: visible;
        border: 0;
    }
    .service-id-table {
        min-width: 0;
    }
    .service-id-table thead {
        display: none;
    }
    .service-id-table,
    .service-id-table tbody,
    .service-id-table tr,
    .service-id-table td {
        display: block;
        width: 100%;
    }
    .service-id-table tr {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #fff;
    }
    .service-id-table td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 6px 2px;
        border: 0;
        text-align: right;
    }
    .service-id-table td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 10px;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
    }
}


/* Service directory: category navigation on desktop, stacked cards on mobile. */
.service-directory {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.service-category-nav {
    position: sticky;
    top: 18px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}
.service-category-heading {
    padding: 3px 8px 10px;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.service-category-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 520px;
    overflow-y: auto;
}
.service-category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.service-category-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.service-category-link b {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #64748b;
    font-size: 10px;
    text-align: center;
}
.service-category-link:hover,
.service-category-link.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}
.service-category-link.is-active b {
    background: #2563eb;
    color: #fff;
}
.service-directory-main {
    min-width: 0;
}
.service-directory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.service-directory-toolbar strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}
.service-directory-toolbar span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
}
.service-directory-search {
    position: relative;
    display: block;
    width: min(260px, 100%);
}
.service-directory-search i {
    position: absolute;
    top: 50%;
    left: 11px;
    color: #94a3b8;
    font-size: 12px;
    transform: translateY(-50%);
}
.service-directory-search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 31px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 12px;
    outline: none;
}
.service-directory-search input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.service-group-panel {
    scroll-margin-top: 20px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}
.service-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 11px;
    border-bottom: 1px solid #f1f5f9;
}
.service-group-kicker {
    display: block !important;
    margin-bottom: 2px;
    color: #2563eb !important;
    font-size: 9px !important;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.service-group-title h4 {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}
.service-group-title > span {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}
.service-card-list {
    display: flex;
    flex-direction: column;
}
.service-directory-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 150px;
    align-items: center;
    gap: 14px;
    padding: 13px 2px;
    border-bottom: 1px solid #f1f5f9;
}
.service-directory-card:last-child {
    border-bottom: 0;
}
.service-directory-id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.service-directory-id small,
.service-directory-meta small {
    color: #94a3b8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.service-directory-name {
    min-width: 0;
}
.service-directory-name strong {
    display: block;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 12px;
    line-height: 1.45;
}
.service-directory-name span {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #94a3b8;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.service-directory-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.service-directory-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.service-directory-meta b {
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
.service-directory-empty {
    padding: 14px 2px 4px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}
@media (max-width: 760px) {
    .service-directory {
        display: block;
    }
    .service-category-nav {
        position: static;
        margin-bottom: 14px;
        padding: 10px;
    }
    .service-category-heading {
        padding: 2px 5px 8px;
    }
    .service-category-list {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
    }
    .service-category-link {
        flex: 0 0 auto;
        width: auto;
        max-width: 210px;
        padding: 8px 10px;
    }
    .service-directory-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .service-directory-search {
        width: 100%;
    }
    .service-group-panel {
        padding: 11px;
    }
    .service-directory-card {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px;
        padding: 12px 2px;
    }
    .service-directory-meta {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        padding-top: 9px;
        border-top: 1px dashed #e2e8f0;
    }
}


/* ============================================================
   MOBILE APP SHELL
   Compact header + slide-out navigation drawer + quick actions.
============================================================ */
.mobile-menu-toggle,
.mobile-menu-close,
.mobile-nav-backdrop,
.mobile-bottom-nav {
    display: none;
}
@media (max-width: 840px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    body {
        padding-bottom: 70px;
    }
    .app-shell {
        display: block;
        min-height: 100vh;
    }
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1200;
        display: flex;
        width: min(310px, 86vw);
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .25s ease;
        box-shadow: 12px 0 30px rgba(2, 6, 23, .24);
    }
    body.mobile-nav-open .sidebar {
        transform: translateX(0);
    }
    .sidebar-brand {
        flex: 0 0 auto;
        padding: 18px 16px;
    }
    .brand-link {
        min-width: 0;
    }
    .brand-copy strong {
        font-size: 15px;
    }
    .mobile-menu-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        margin-left: auto;
        padding: 0;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 9px;
        background: rgba(255,255,255,.08);
        color: #cbd5e1;
        box-shadow: none;
    }
    .sidebar-section-label {
        display: block;
        padding: 20px 18px 7px;
    }
    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
        overflow: visible;
        padding: 8px 12px 16px;
    }
    .nav-link {
        flex: 0 0 auto;
        width: 100%;
        min-height: 46px;
        padding: 0 13px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
        font-size: 13px;
    }
    .nav-link.is-active {
        border-left: 3px solid var(--brand-primary);
        background: linear-gradient(90deg, rgba(37,99,235,.38), rgba(79,70,229,.18));
    }
    .sidebar-subnav {
        padding-left: 22px;
        margin: 2px 0 7px;
    }
    .sub-nav-link {
        min-height: 38px;
    }
    .sidebar-footer {
        display: block;
        margin-top: auto;
        padding: 16px 18px 22px;
    }
    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1150;
        background: rgba(15, 23, 42, .56);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    body.mobile-nav-open .mobile-nav-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
    .main-content {
        width: 100%;
        min-width: 0;
    }
    .content-header {
        position: sticky;
        top: 0;
        z-index: 900;
        min-height: 60px;
        padding: 0 13px;
        gap: 10px;
    }
    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 10px;
        box-shadow: none;
    }
    .mobile-brand {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 8px;
        color: var(--navy-900);
        font-size: 14px;
    }
    .mobile-brand .brand-mark {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 11px;
    }
    .mobile-brand strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .header-actions {
        min-width: 0;
        gap: 6px;
    }
    .balance-link {
        padding: 5px 7px;
        font-size: 10px;
        white-space: nowrap;
    }
    .role-pill {
        padding: 4px 7px;
        font-size: 9px;
    }
    .header-user-name,
    .header-signout {
        display: none;
    }
    .page-frame,
    .container {
        width: 100%;
        max-width: 100% !important;
        padding: 14px 12px 28px;
    }
    .mobile-bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        min-height: 62px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        border-top: 1px solid #e2e8f0;
        background: rgba(255,255,255,.96);
        box-shadow: 0 -8px 24px rgba(15,23,42,.08);
        backdrop-filter: blur(12px);
    }
    .mobile-bottom-link {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        min-height: 48px;
        padding: 4px 2px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        box-shadow: none;
        color: #64748b;
        font-size: 10px;
        font-weight: 700;
        text-decoration: none;
    }
    .mobile-bottom-link i {
        font-size: 16px;
    }
    .mobile-bottom-link.is-active {
        background: #eff6ff;
        color: #2563eb;
    }
    .mobile-bottom-link:active {
        transform: scale(.96);
    }
}


/* The compact brand belongs in the mobile top bar, not the drawer. */
@media (max-width: 840px) {
    .content-header .mobile-brand {
        display: flex !important;
    }
}


/* ============================================================
   ORDERS PAGE RESPONSIVE CARDS
   Desktop keeps the table; mobile turns each order into a readable card.
============================================================ */
.orders-table .result-box-card {
    max-width: none;
}
@media (max-width: 840px) {
    .orders-page .table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }
    .orders-page .orders-table {
        display: block;
        min-width: 0 !important;
        width: 100%;
    }
    .orders-page .orders-table thead {
        display: none;
    }
    .orders-page .orders-table tbody,
    .orders-page .orders-table tr {
        display: block;
        width: 100%;
    }
    .orders-page .orders-table tr {
        margin-bottom: 12px;
        padding: 12px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
    }
    .orders-page .orders-table td {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 38px;
        padding: 8px 0;
        border: 0;
        border-bottom: 1px solid #f1f5f9;
        text-align: right !important;
        vertical-align: middle;
    }
    .orders-page .orders-table td::before {
        content: attr(data-label);
        color: #94a3b8;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
    }
    .orders-page .orders-table td:last-child {
        border-bottom: 0;
    }
    .orders-page .orders-table td[data-label="Order ID"] {
        padding-top: 0;
    }
    .orders-page .orders-table td[data-label="Status"] .status-pill {
        justify-self: end;
    }
    .orders-page .orders-table td[data-label="Result"] {
        display: block;
        padding-top: 11px;
        text-align: left !important;
    }
    .orders-page .orders-table td[data-label="Result"]::before {
        display: block;
        margin-bottom: 7px;
    }
    .orders-page .orders-table .result-box-card {
        width: 100%;
        max-width: none;
        min-height: 42px;
        text-align: left;
    }
    .orders-page .orders-table td[data-label="Actions"] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left !important;
    }
    .orders-page .orders-table td[data-label="Actions"]::before {
        display: block;
    }
    .orders-page .orders-table .admin-action-group {
        justify-content: flex-end;
    }
    .orders-page .orders-table td strong,
    .orders-page .orders-table td span:not(.status-pill):not(.service-id-badge) {
        overflow-wrap: anywhere;
    }
    .orders-page .orders-table td[data-label="IMEI / SN"] span {
        font-size: 12px !important;
    }
    .orders-page .orders-table .result-main-line,
    .orders-page .orders-table .result-sub-line {
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
    }
    .orders-page .pagination-wrap {
        align-items: stretch;
        flex-direction: column;
        margin-top: 14px;
    }
    .orders-page .pagination-btns {
        justify-content: center;
    }
    .orders-page .pagination-btns a,
    .orders-page .pagination-btns span {
        min-width: 32px;
        height: 32px;
    }
    .order-modal {
        padding: 10px;
    }
    .order-modal-box {
        max-height: calc(100dvh - 20px);
        border-radius: 16px;
    }
    .order-modal-head {
        padding: 14px 16px;
    }
    .order-modal-body {
        max-height: calc(100dvh - 76px);
        padding: 16px;
    }
    .modal-stat-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 14px;
    }
    .modal-stat-box[style*="grid-column"] {
        grid-column: auto !important;
    }
}


/* Orders desktop: preserve readable columns and wrap only at natural word boundaries. */
@media (min-width: 841px) {
    .orders-page .orders-table {
        table-layout: fixed;
        min-width: 980px;
    }
    .admin-orders-page .orders-table {
        min-width: 1120px;
    }
    .orders-page .orders-table th,
    .orders-page .orders-table td {
        word-break: normal;
        overflow-wrap: normal;
    }
    .orders-page .orders-table th {
        white-space: nowrap;
    }
    .orders-page .orders-table td[data-label="Order ID"],
    .orders-page .orders-table td[data-label="IMEI / SN"] {
        white-space: nowrap;
    }
    .orders-page .orders-table td[data-label="Service"],
    .orders-page .orders-table td[data-label="Client"] {
        overflow-wrap: break-word;
    }
    .orders-page .orders-table .result-box-card {
        width: 100%;
        min-width: 0;
    }
}


@media (min-width: 841px) {
    .orders-page .orders-table .btn-order-id {
        min-width: 48px;
        white-space: nowrap;
        word-break: normal !important;
    }
    .orders-page .orders-table .status-pill {
        min-width: 62px;
        white-space: nowrap;
        word-break: normal !important;
    }
    .orders-page .orders-table td[data-label="Service"] strong,
    .orders-page .orders-table td[data-label="Client"] strong {
        display: block;
        word-break: normal !important;
        overflow-wrap: break-word;
    }
}


/* API docs section tabs. */
.api-doc-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}
.api-doc-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    flex: 1 1 0;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}
.api-doc-tab:hover {
    background: #fff;
    color: #2563eb;
}
.api-doc-tab.is-active {
    border-color: #bfdbfe;
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .1);
}
.api-doc-panel[hidden] {
    display: none !important;
}
.api-doc-panel {
    display: block;
}
@media (max-width: 640px) {
    .api-doc-tabs {
        position: sticky;
        top: 60px;
        z-index: 20;
        margin-right: -2px;
        margin-left: -2px;
    }
    .api-doc-tab {
        min-height: 40px;
        padding: 0 8px;
        font-size: 10px;
    }
}


/* Flat Service ID directory: one continuous searchable list. */
.service-flat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.service-flat-toolbar strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}
.service-flat-toolbar span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
}
.service-flat-list-wrap {
    margin-top: 0;
}
.service-flat-list td:nth-child(1) {
    width: 90px;
}
.service-flat-list td:nth-child(2) {
    width: 190px;
    color: #64748b;
}
.service-flat-list td:nth-child(3) {
    color: #0f172a;
}
@media (max-width: 640px) {
    .service-flat-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .service-flat-toolbar .service-directory-search {
        width: 100%;
    }
    .service-flat-list-wrap {
        border: 0;
    }
}


/* Dhru sync: verified account information shown before service import. */
.sync-account-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
    box-shadow: 0 2px 8px rgba(22, 101, 52, .05);
}
.sync-account-info-title {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 220px;
}
.sync-account-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
}
.sync-account-info-title strong,
.sync-account-info-title span {
    display: block;
}
.sync-account-info-title strong {
    color: #166534;
    font-size: 13px;
    font-weight: 800;
}
.sync-account-info-title > div > span {
    margin-top: 2px;
    color: #4d7c5d;
    font-size: 11px;
}
.sync-account-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 18px;
    flex: 1;
}
.sync-account-info-grid div {
    min-width: 0;
}
.sync-account-info-grid small,
.sync-account-info-grid b {
    display: block;
}
.sync-account-info-grid small {
    margin-bottom: 3px;
    color: #6b8f76;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sync-account-info-grid b {
    overflow: hidden;
    color: #1f2937;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sync-account-info-grid .sync-credit-value {
    color: #15803d;
}
.sync-account-info-grid .sync-connected-value {
    color: #15803d;
}
@media (max-width: 840px) {
    .sync-account-info {
        align-items: stretch;
        flex-direction: column;
        padding: 15px;
    }
    .sync-account-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding-top: 12px;
        border-top: 1px solid #dcfce7;
    }
}


/* Services list filters: category group, service name, and status. */
.service-filter-form {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}
.service-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
    margin: 0;
}
.service-filter-field:first-child {
    min-width: 205px;
}
.service-filter-field span {
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.service-filter-field input,
.service-filter-field select {
    width: 100%;
    height: 40px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    outline: none;
}
.service-filter-field input:focus,
.service-filter-field select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}
.service-filter-submit,
.service-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.service-filter-submit {
    border: 0;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #ffffff;
    cursor: pointer;
}
.service-filter-reset {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
}
.service-filter-submit:hover,
.service-filter-reset:hover {
    opacity: .9;
}
@media (max-width: 1050px) {
    .service-filter-form {
        justify-content: flex-start;
    }
}
@media (max-width: 700px) {
    .service-filter-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
    }
    .service-filter-field,
    .service-filter-field:first-child {
        min-width: 0;
    }
    .service-filter-field:first-child {
        grid-column: 1 / -1;
    }
    .service-filter-submit,
    .service-filter-reset {
        width: 100%;
    }
}


/* Searchable provider-service picker used by Add/Edit Service forms. */
.service-picker {
    position: relative;
    width: 100%;
}
.service-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}
.service-picker-trigger:hover,
.service-picker-trigger:focus {
    border-color: #93c5fd;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}
.service-picker-trigger i {
    color: #64748b;
    font-size: 11px;
}
.service-picker-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
}
.service-picker-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid #eef2f7;
    background: #f8fafc;
}
.service-picker-search i {
    color: #64748b;
    font-size: 12px;
}
.service-picker-search input {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #dbe3ee;
    border-radius: 6px;
    color: #334155;
    font-size: 12px;
    outline: none;
}
.service-picker-options {
    max-height: 300px;
    overflow-y: auto;
}
.service-picker-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    color: #0f172a;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}
.service-picker-option:hover {
    background: #eff6ff;
}
.service-picker-option > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.service-picker-option b {
    margin-right: 5px;
    color: #2563eb;
    font-family: monospace;
}
.service-picker-option small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #94a3b8;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.service-picker-option em {
    flex: 0 0 auto;
    color: #15803d;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}
.service-picker-empty {
    padding: 16px 12px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}
@media (max-width: 700px) {
    .service-picker-menu {
        position: fixed;
        top: 50%;
        right: 12px;
        left: 12px;
        max-height: 70dvh;
        transform: translateY(-50%);
    }
    .service-picker-options {
        max-height: calc(70dvh - 54px);
    }
    .service-picker-option {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}


/* The picker uses the native hidden attribute for account/search filtering. */
.service-picker-option[hidden],
.service-picker-empty[hidden] {
    display: none !important;
}


/* Service connection picker: a compact branded dropdown instead of a native select menu. */
.connection-picker {
    position: relative;
    width: 100%;
}
.connection-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.connection-picker-trigger:hover,
.connection-picker-trigger:focus {
    border-color: #93c5fd;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}
.connection-picker-trigger i {
    color: #64748b;
    font-size: 11px;
}
.connection-picker-menu {
    position: absolute;
    z-index: 90;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
}
.connection-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    color: #334155;
    text-align: left;
    cursor: pointer;
}
.connection-picker-option:last-child {
    border-bottom: 0;
}
.connection-picker-option:hover {
    background: #eff6ff;
}
.connection-picker-option > i {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 7px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
}
.connection-picker-option span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.connection-picker-option b {
    color: #0f172a;
    font-size: 12px;
}
.connection-picker-option small {
    color: #94a3b8;
    font-size: 10px;
}


/* Per-service API examples. */
.service-example-actions {
    white-space: nowrap;
}
.service-example-btn {
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid #2563eb;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
}
.service-example-btn + .service-example-btn {
    margin-left: 4px;
    border-color: #0f766e;
    background: #f0fdfa;
    color: #0f766e;
}
.service-example-btn:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
}
.service-example-modal[hidden] {
    display: none;
}
.service-example-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .76);
    backdrop-filter: blur(5px);
}
.service-example-dialog {
    width: min(860px, 100%);
    max-height: min(760px, 90vh);
    overflow: hidden;
    border: 1px solid #334155;
    border-radius: 14px;
    background: #111827;
    box-shadow: 0 25px 70px rgba(2, 6, 23, .45);
}
.service-example-dialog-head,
.service-example-dialog-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #1f2937;
    color: #f8fafc;
}
.service-example-dialog-head strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.service-example-close {
    border: 0;
    background: transparent;
    color: #cbd5e1;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}
.service-example-close:hover {
    color: #ffffff;
}
.service-example-dialog-body {
    max-height: calc(min(760px, 90vh) - 120px);
    overflow: auto;
    padding: 18px;
}
.service-example-content {
    margin: 0;
    color: #e2e8f0;
    font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.service-example-dialog-foot {
    justify-content: flex-end;
    border-top: 1px solid #334155;
}
@media (max-width: 720px) {
    .service-example-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    .service-example-btn + .service-example-btn {
        margin-left: 0;
    }
    .service-example-modal {
        align-items: flex-end;
        padding: 8px;
    }
    .service-example-dialog {
        max-height: 88vh;
        border-radius: 14px 14px 8px 8px;
    }
    .service-example-dialog-body {
        max-height: calc(88vh - 120px);
        padding: 14px;
    }
}


/* No-reload order submission feedback. */
.imei-form.is-submitting {
    position: relative;
}
.imei-form.is-submitting::after {
    position: absolute;
    z-index: 5;
    inset: -8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .58);
    content: '';
    pointer-events: all;
}
.imei-form button[type="submit"]:disabled {
    cursor: wait;
    opacity: .86;
}
.order-submit-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 7px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: orderSubmitSpin .7s linear infinite;
}
@keyframes orderSubmitSpin {
    to { transform: rotate(360deg); }
}


/* Sign Out belongs inside the opened mobile drawer footer; keep the bottom bar focused on navigation. */
@media (max-width: 840px) {
    .mobile-bottom-nav {
        grid-template-columns: repeat(4, 1fr);
    }
    .sidebar-footer {
        display: block !important;
        margin-top: auto;
    }
    .sidebar-footer .sidebar-signout {
        display: flex !important;
        align-items: center;
        gap: 14px;
        min-height: 48px;
        margin-top: 14px;
        padding: 0 16px;
        border: 1px solid rgba(248, 113, 113, .35);
        border-radius: 10px;
        background: rgba(127, 29, 29, .18);
        color: #fca5a5;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
    }
    .sidebar-footer .sidebar-signout i {
        width: 20px;
        color: #f87171;
        text-align: center;
    }
    .sidebar-footer .sidebar-signout:active {
        background: rgba(127, 29, 29, .35);
    }
}


/* Credit ledger audit type: admin orders are informational and carry no charge. */
.credit-type-admin {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 4px 9px !important;
    border-radius: 9999px;
    background: #e0e7ff !important;
    color: #3730a3 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}