/* ================================================================
   THEMAINSMM — PREMIUM DARK THEME
   Style: Dark Cinema + Red Accent + 3D Buttons
   Font: Inter
   Author: Claude Theme Builder
   ================================================================ */

/* ============================================
   SECTION 1: GLOBAL BASE & BOOTSTRAP OVERRIDES
   ============================================ */

/* --- Bootstrap Reset Overrides --- */
body { background: var(--bg-body) !important; color: var(--text-primary) !important; font-family: var(--font) !important; }
a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-hover); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); font-weight: 600; letter-spacing: -0.3px; }
p { color: var(--text-secondary); }
hr { border-color: var(--border); }
label { color: var(--text-primary); font-weight: 500; }

/* --- Bootstrap .well override --- */
.well { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; color: var(--text-primary); }

/* --- Bootstrap .panel override --- */
.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; }
.panel-heading { background: var(--bg-card) !important; border-bottom: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.panel-body { color: var(--text-primary); }
.panel-default { border-color: var(--border); }

/* --- Bootstrap .table override --- */
.table { color: var(--text-primary); }
.table > thead > tr > th { background: var(--bg-card); color: var(--text-secondary); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 16px; }
.table > tbody > tr > td { border-top: 1px solid var(--border); padding: 12px 16px; vertical-align: middle; }
.table > tbody > tr:hover > td { background: var(--bg-card-hover); }
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.02); }
.table-bordered { border-color: var(--border); }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-color: var(--border); }

/* --- Bootstrap .form-control override --- */
.form-control {
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    font-family: var(--font);
    font-size: 14px;
    height: auto;
    padding: 10px 14px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none;
}
.form-control::placeholder { color: var(--text-muted); }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238A8F9E' viewBox='0 0 16 16'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
textarea.form-control { min-height: 100px; resize: vertical; }

/* --- Bootstrap .btn overrides --- */
.btn-default { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); }
.btn-default:hover { background: var(--bg-card-hover); border-color: var(--border-hover); color: var(--text-primary); }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-danger { background: var(--error); border-color: var(--error); color: #fff; }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #000; }
.btn-info { background: var(--info); border-color: var(--info); color: #fff; }

/* --- Bootstrap .alert override --- */
.alert-danger { background: var(--error-bg); border-color: rgba(239,68,68,0.2); color: var(--error); }
.alert-success { background: var(--success-bg); border-color: rgba(34,197,94,0.2); color: var(--success); }
.alert-warning { background: var(--warning-bg); border-color: rgba(245,158,11,0.2); color: var(--warning); }
.alert-info { background: var(--info-bg); border-color: rgba(59,130,246,0.2); color: var(--info); }
.close { color: var(--text-muted); opacity: 0.7; text-shadow: none; }
.close:hover { color: var(--text-primary); opacity: 1; }

/* --- Bootstrap .nav / .navbar override --- */
.navbar { border: none; margin-bottom: 0; }
.navbar-default { background: transparent; border: none; }
.nav > li > a { color: var(--text-secondary); }
.nav > li > a:hover, .nav > li > a:focus { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs > li > a { color: var(--text-secondary); border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nav-tabs > li > a:hover { border-color: transparent; background: rgba(255,255,255,0.03); color: var(--text-primary); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background: var(--bg-card); border: 1px solid var(--border); border-bottom-color: var(--bg-card); color: var(--accent); }

/* --- Bootstrap .dropdown-menu override --- */
.dropdown-menu { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; }
.dropdown-menu > li > a { color: var(--text-secondary); padding: 8px 14px; border-radius: var(--radius-sm); }
.dropdown-menu > li > a:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.dropdown-menu .divider { background: var(--border); }

/* --- Bootstrap .badge / .label override --- */
.badge { background: var(--accent); color: #fff; font-weight: 600; border-radius: var(--radius-full); padding: 3px 8px; font-size: 11px; }
.label-default { background: var(--bg-card-hover); color: var(--text-secondary); }
.label-success { background: var(--success); }
.label-danger { background: var(--error); }
.label-warning { background: var(--warning); color: #000; }
.label-info { background: var(--info); }

/* --- Bootstrap .pagination override --- */
.pagination > li > a, .pagination > li > span { background: var(--bg-card); border-color: var(--border); color: var(--text-secondary); }
.pagination > li > a:hover { background: var(--bg-card-hover); border-color: var(--border-hover); color: var(--text-primary); }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination > .disabled > a, .pagination > .disabled > span { background: var(--bg-body); border-color: var(--border); color: var(--text-muted); }

/* --- Bootstrap .modal override --- */
.modal-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--text-primary); }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }
.modal-backdrop.in { opacity: 0.6; }
.modal-title { color: var(--text-primary); font-weight: 600; }

/* --- Bootstrap .tooltip / .popover override --- */
.tooltip-inner { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }

/* --- Misc Bootstrap overrides --- */
.breadcrumb { background: transparent; padding: 0; margin: 0; }
.breadcrumb > li + li:before { color: var(--text-muted); }
.breadcrumb > .active { color: var(--text-muted); }
.caret { border-top-color: var(--text-secondary); }
.text-muted { color: var(--text-muted) !important; }
.bg-primary { background: var(--accent) !important; }
code { background: var(--bg-input); color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 6px; }
pre { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-md); }
blockquote { border-left-color: var(--accent); color: var(--text-secondary); }

/* --- Global Utilities --- */
.btn-full { width: 100%; }
.page-wrapper.no-sidebar { margin-left: 0 !important; }
.page-wrapper.no-sidebar .main-content { max-width: 100%; padding: 24px 40px; }
@media (max-width: 768px) {
    .page-wrapper.no-sidebar .main-content { padding: 16px 12px; }
}
@media (max-width: 480px) {
    .page-wrapper.no-sidebar .main-content { padding: 12px 8px; }
}
.page-wrapper.no-sidebar .svc-col-action { display: none; }
.page-wrapper.no-sidebar .main-footer { margin-left: 0 !important; }

/* ============================================
   ADVANCED RESPONSIVE SYSTEM (All Devices)
   Breakpoints: 375 / 480 / 768 / 1024 / 1440
   ============================================ */

/* --- Container Widths --- */
.content-container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }

/* --- Responsive Typography Scale --- */
h1 { font-size: clamp(22px, 4vw, 36px); line-height: 1.2; }
h2 { font-size: clamp(18px, 3.5vw, 28px); line-height: 1.3; }
h3 { font-size: clamp(16px, 3vw, 22px); line-height: 1.4; }
h4 { font-size: clamp(14px, 2.5vw, 18px); line-height: 1.4; }
p { line-height: 1.7; max-width: 75ch; }

/* --- Responsive Grid Utilities --- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .grid-3 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .content-container { padding: 0 16px; }
}
@media (max-width: 480px) {
    .grid-4 { grid-template-columns: 1fr; }
    .content-container { padding: 0 12px; }
}

/* --- Touch Friendly (Mobile) --- */
@media (max-width: 768px) {
    body { overscroll-behavior: contain; -webkit-tap-highlight-color: transparent; }
    .btn, .btn-primary, .btn-3d, .btn-secondary, .btn-google {
        min-height: 48px;
        font-size: 15px;
        touch-action: manipulation;
    }
    .form-input { min-height: 48px; font-size: 16px; }
    .nav-link { min-height: 44px; touch-action: manipulation; }
    a, button { touch-action: manipulation; }
}

/* --- Tablet Landscape --- */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .signin-hero-grid, .signup-hero-grid { gap: 32px; }
    .signin-platform-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Large Desktop (1440+) --- */
@media (min-width: 1440px) {
    :root { --content-max: 1600px; --sidebar-width: 280px; }
    .signin-hero-grid, .signup-hero-grid { max-width: 1200px; gap: 60px; }
    .section-title { font-size: 32px; }
}

/* --- Ultra Wide (1920+) --- */
@media (min-width: 1920px) {
    :root { --content-max: 1800px; }
    .signin-hero, .signup-hero { padding: 60px 40px; }
}

/* ============================================
   ADVANCED ANIMATION SYSTEM
   Performance: transform/opacity only (GPU)
   Duration: 150-300ms micro, 400ms complex
   ============================================ */

/* --- Scroll-triggered Fade Variants --- */
.scroll-fade-up {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-fade-up.revealed { opacity: 1; transform: translateY(0); }

.scroll-fade-left {
    opacity: 0; transform: translateX(-40px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-fade-left.revealed { opacity: 1; transform: translateX(0); }

.scroll-fade-right {
    opacity: 0; transform: translateX(40px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-fade-right.revealed { opacity: 1; transform: translateX(0); }

.scroll-zoom-in {
    opacity: 0; transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-zoom-in.revealed { opacity: 1; transform: scale(1); }

/* --- Stagger Children Animation --- */
.stagger-children > * {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-children.revealed > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(2) { transition-delay: 50ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(3) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(4) { transition-delay: 150ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(5) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(6) { transition-delay: 250ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(7) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(8) { transition-delay: 350ms; opacity: 1; transform: translateY(0); }

/* --- Card Hover Effects --- */
.hover-lift { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.hover-glow { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 30px var(--accent-glow); border-color: var(--border-active); }

.hover-scale { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.hover-scale:hover { transform: scale(1.03); }

/* --- Button Press Animation (3D) --- */
.btn-press { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn-press:active { transform: translateY(3px) scale(0.97); }

/* --- Text Gradient Animation --- */
.text-gradient {
    background: linear-gradient(135deg, var(--accent), #F59E0B, var(--accent));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Typing Animation --- */
.typing-effect {
    overflow: hidden;
    border-right: 2px solid var(--accent);
    white-space: nowrap;
    animation: typing 3s steps(40) 1s forwards, blinkCaret 0.7s step-end infinite;
    width: 0;
}
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blinkCaret { 50% { border-color: transparent; } }

/* --- Counter Animation --- */
.count-up {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* --- Parallax (subtle, respects reduced-motion) --- */
.parallax-bg {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* --- Ripple Click Effect --- */
.ripple {
    position: relative; overflow: hidden;
}
.ripple::after {
    content: ''; position: absolute;
    width: 100%; padding-top: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 1; pointer-events: none;
}
.ripple:active::after {
    animation: rippleEffect 0.4s ease-out;
}
@keyframes rippleEffect {
    to { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* --- Magnetic Hover (subtle pull toward cursor) --- */
.magnetic { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* --- Focus Ring (Accessibility) --- */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --- Skip to Content Link (Accessibility) --- */
.skip-to-content {
    position: absolute; top: -100px; left: 16px;
    background: var(--accent); color: #fff;
    padding: 8px 16px; border-radius: var(--radius-md);
    font-weight: 600; z-index: 9999;
    transition: top 0.2s ease;
}
.skip-to-content:focus { top: 16px; }

/* --- Reduced Motion: Disable ALL animations --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .scroll-reveal, .scroll-fade-up, .scroll-fade-left,
    .scroll-fade-right, .scroll-zoom-in, .stagger-children > * {
        opacity: 1 !important; transform: none !important;
    }
    .typing-effect { width: 100% !important; border-right: none !important; }
    .parallax-bg { transform: none !important; }
}

/* --- Print Styles --- */
@media print {
    .main-nav, .sidebar, .main-footer, .back-to-top, .toast-container,
    .preloader, .mobile-overlay, .top-bar { display: none !important; }
    .page-wrapper { margin-left: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
    a { color: #000 !important; text-decoration: underline !important; }
}

/* --- Form Field Components (Reused across pages) --- */
.form-field { margin-bottom: 20px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.form-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.form-input-wrapper { position: relative; display: flex; align-items: center; }
.form-input-icon { position: absolute; left: 14px; color: var(--text-muted); font-size: 16px; pointer-events: none; z-index: 1; transition: color var(--transition-fast); }
.form-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px;
    padding: 12px 14px 12px 42px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-input:focus + .form-input-icon, .form-input:focus ~ .form-input-icon { color: var(--accent); }
.form-input::placeholder { color: var(--text-muted); }
.form-password-toggle {
    position: absolute; right: 12px;
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    padding: 4px; font-size: 16px;
    transition: color var(--transition-fast);
}
.form-password-toggle:hover { color: var(--text-primary); }
.form-forgot { font-size: 13px; color: var(--accent); font-weight: 500; }
.form-forgot:hover { color: var(--accent-hover); }


/* ============================================
   SECTION 2: SIGNIN PAGE (Landing + Login)
   ============================================ */

/* --- Section Shared --- */
.section-title {
    font-size: 28px; font-weight: 700; color: var(--text-primary);
    text-align: center; margin-bottom: 8px; letter-spacing: -0.5px;
}
.section-subtitle {
    font-size: 15px; color: var(--text-secondary);
    text-align: center; margin: 0 auto 36px; max-width: 100%;
}
.text-accent { color: var(--accent); }

/* --- Page Container --- */
.signin-page {
    padding: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(220, 38, 38, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 50%);
}

/* ===== HERO SECTION: Login + Features ===== */
.signin-hero {
    min-height: calc(100vh - var(--nav-height));
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
}
.signin-hero-grid {
    max-width: 1100px; width: 100%;
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 48px; align-items: center;
}

/* --- Login Card --- */
.signin-form-col { position: relative; z-index: 2; }
.signin-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
}
.signin-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover), var(--accent));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.signin-header { text-align: center; margin-bottom: 28px; }
.signin-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; letter-spacing: -0.5px; }
.signin-subtitle { font-size: 14px; color: var(--text-secondary); margin: 0; }
.signin-card .alert { margin-bottom: 20px; padding: 10px 14px; font-size: 13px; border-radius: var(--radius-md); }
.signin-captcha { display: flex; justify-content: center; margin-bottom: 20px; }

/* ===== DIVIDER ===== */
.signin-divider {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 18px;
}
.signin-divider-line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
}
.signin-divider-text {
    font-size: 12px; font-weight: 500; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.8px;
    white-space: nowrap;
}

/* ===== CUSTOM GOOGLE BUTTON ===== */

/* Google OAuth: g_id_onload hidden, widget overlays custom button */
#g_id_onload {
    position: absolute !important;
    width: 0 !important; height: 0 !important;
    overflow: hidden !important;
}

/* Wrapper: positions Google iframe over our styled button */
.google-btn-wrap {
    position: relative;
    width: 100%;
}

/* Google iframe overlay: desktop only — mouse clicks pass through */
.g-widget-inner {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10;
    opacity: 0.01 !important;
    cursor: pointer !important;
    overflow: hidden !important;
    pointer-events: auto !important;
}
.g-widget-inner > div {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.g-widget-inner iframe {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
}

/* Mobile: hide overlay visually but keep in DOM for GIS initialization */
@media (max-width: 768px) {
    .g-widget-inner {
        visibility: hidden !important;
        position: absolute !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* Mobile fallback modal: real Google button in styled popup */
.g-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9999; background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.2s ease;
}
.g-modal-box {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px 28px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5); max-width: 340px; width: 90%;
}
.g-modal-box p {
    color: var(--text-primary); font-size: 16px; font-weight: 600;
    margin-bottom: 20px; font-family: var(--font);
}
.g-modal-box #g-modal-btn { display: flex; justify-content: center; }
.g-modal-close {
    margin-top: 16px; background: none; border: 1px solid var(--border);
    color: var(--text-muted); padding: 8px 24px; border-radius: var(--radius-md);
    cursor: pointer; font-family: var(--font); font-size: 14px;
    transition: all var(--transition-fast);
}
.g-modal-close:hover { border-color: var(--border-hover); color: var(--text-secondary); }

/* Mobile fallback: Google iframe with dark filter */
.g-mobile-google-visible {
    position: relative !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    z-index: auto;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 4px;
    overflow: hidden;
}
.g-mobile-google-visible iframe {
    width: 100% !important;
    height: 48px !important;
    border-radius: 10px !important;
    filter: brightness(0.15) contrast(1.4) saturate(0) !important;
}

/* Custom Google button sits underneath */
.btn-google {
    position: relative;
    z-index: 1;
}

.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; padding: 13px 24px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 0 rgba(0,0,0,0.2);
}

/* Shimmer sweep on hover */
.btn-google::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: left 0.5s ease;
}
.btn-google:hover::before { left: 100%; }

.btn-google:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 8px 20px rgba(0,0,0,0.2);
}
.btn-google:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

/* Google icon bounce animation */
.google-icon {
    flex-shrink: 0;
    transition: transform var(--transition-base);
}
.btn-google:hover .google-icon {
    animation: googleBounce 0.5s ease forwards;
}

/* Google icon glow ring */
.btn-google::after {
    content: '';
    position: absolute; left: 20px; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(66,133,244,0.12) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
}
.btn-google:hover::after { opacity: 1; }

@keyframes googleBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.2) rotate(-8deg); }
    60% { transform: scale(0.95) rotate(3deg); }
    100% { transform: scale(1.1) rotate(-3deg); }
}

/* Google button responsive */
@media (max-width: 480px) {
    .btn-google { padding: 12px 16px; font-size: 13px; }
}

/* Google button containers — dark theme blend */
.signin-card .g_id_signin { margin-bottom: 16px; }
.google-btn-container {
    display: flex; justify-content: center; width: 100%;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 6px;
    transition: all var(--transition-base);
    position: relative; overflow: hidden;
}
.google-btn-container:hover {
    border-color: var(--border-hover);
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}
.google-btn-container .g_id_signin { width: 100%; }
.google-btn-container iframe {
    border-radius: var(--radius-sm) !important;
    color-scheme: dark !important;
}
/* Dark mode filter for Google's white iframe button */
.google-btn-container .g_id_signin iframe {
    filter: invert(0.88) hue-rotate(180deg) !important;
    border-radius: 6px !important;
}
.google-btn-container::after {
    content: ''; position: absolute; inset: 0;
    border-radius: var(--radius-md);
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.signin-card .btn-full { padding: 14px 24px; font-size: 15px; border-radius: var(--radius-md); gap: 8px; }
/* Mini feature cards section (below trust bar) */
.signin-mini-section { padding: 40px 24px; max-width: 1100px; margin: 0 auto; }
.signin-mini-cards {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.mini-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    transition: all var(--transition-fast);
}
.mini-card:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.05); }
.mini-card i { font-size: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.mini-card strong { font-size: 12px; color: var(--text-primary); display: block; }
.mini-card p { font-size: 10px; color: var(--text-muted); margin: 2px 0 0; line-height: 1.3; }

@media (max-width: 1024px) { .signin-mini-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .signin-mini-cards { grid-template-columns: 1fr; } .signin-mini-section { padding: 30px 12px; } }

.signin-footer { text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.signin-footer-text { font-size: 14px; color: var(--text-secondary); }
.signin-footer-link { font-size: 14px; font-weight: 600; color: var(--accent); margin-left: 4px; }
.signin-footer-link:hover { color: var(--accent-hover); }

/* --- Features Column --- */
.signin-features { padding: 20px 0; }
.signin-features-title {
    font-size: 36px; font-weight: 800; color: var(--text-primary);
    line-height: 1.2; margin-bottom: 12px; letter-spacing: -1px;
}
.signin-features-desc {
    font-size: 16px; color: var(--text-secondary); line-height: 1.7;
    margin-bottom: 28px; max-width: 480px;
}

/* Stats Row */
.signin-stats {
    display: flex; gap: 24px; margin-bottom: 32px;
    flex-wrap: wrap;
}
.signin-stat {
    display: flex; flex-direction: column;
}
.signin-stat-number {
    font-size: 28px; font-weight: 800; color: var(--accent);
    letter-spacing: -0.5px; line-height: 1;
}
.signin-stat-label {
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px;
}

/* Feature Cards */
.signin-feature-cards {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.signin-fcard {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    transition: all var(--transition-base);
}
.signin-fcard:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.signin-fcard-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-sm); font-size: 18px;
}
.signin-fcard-text h4 {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    margin: 0 0 4px;
}
.signin-fcard-text p {
    font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5;
}

/* ===== TRUST BAR ===== */
.signin-trust {
    padding: 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.01);
}
.signin-trust-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 32px; flex-wrap: wrap;
}
.signin-trust-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    white-space: nowrap;
}
.signin-trust-item i { color: var(--accent); font-size: 16px; }

/* ===== BLOG CARDS ===== */
.signin-blogs {
    padding: 60px 24px; max-width: 1100px; margin: 0 auto;
}
.signin-blog-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.signin-blog-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: all var(--transition-base);
}
.signin-blog-card:hover {
    border-color: var(--border-hover); transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.signin-blog-img {
    height: 160px; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.signin-blog-body { padding: 20px; }
.signin-blog-tag {
    display: inline-block; padding: 3px 10px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; border-radius: var(--radius-full);
    margin-bottom: 10px;
}
.signin-blog-title {
    font-size: 16px; font-weight: 700; color: var(--text-primary);
    margin: 0 0 8px; line-height: 1.4;
}
.signin-blog-excerpt {
    font-size: 13px; color: var(--text-secondary); line-height: 1.6;
    margin: 0 0 14px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.signin-blog-link {
    font-size: 13px; font-weight: 600; color: var(--accent);
    display: inline-flex; align-items: center; gap: 4px;
    transition: gap var(--transition-fast);
}
.signin-blog-link:hover { gap: 8px; color: var(--accent-hover); }

/* ===== SEO CONTENT ===== */
.signin-seo {
    padding: 60px 24px; max-width: 1100px; margin: 0 auto;
}
.signin-seo-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.signin-seo-block {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px;
}
.signin-seo-block h2 {
    font-size: 20px; font-weight: 700; margin-bottom: 14px;
    color: var(--text-primary);
}
.signin-seo-block p {
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
    margin-bottom: 12px;
}
.signin-seo-list { list-style: none; padding: 0; }
.signin-seo-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; font-size: 14px; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.signin-seo-list li:last-child { border-bottom: none; }
.signin-seo-list li i { color: var(--success); font-size: 16px; flex-shrink: 0; }

/* --- Auth Content --- */
.signin-auth-content {
    padding: 40px 24px; max-width: 1100px; margin: 0 auto;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}

/* ===== FAQ SECTION ===== */
.signin-faq {
    padding: 60px 24px; max-width: 800px; margin: 0 auto;
}
.signin-faq-list { display: flex; flex-direction: column; gap: 10px; }
.signin-faq-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
    transition: border-color var(--transition-fast);
}
.signin-faq-item[open] { border-color: var(--border-active); }
.signin-faq-q {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; cursor: pointer;
    font-size: 15px; font-weight: 600; color: var(--text-primary);
    list-style: none; transition: color var(--transition-fast);
}
.signin-faq-q::-webkit-details-marker { display: none; }
.signin-faq-q i { color: var(--accent); font-size: 16px; transition: transform var(--transition-base); }
.signin-faq-item[open] .signin-faq-q i { transform: rotate(45deg); }
.signin-faq-q:hover { color: var(--accent); }
.signin-faq-a {
    padding: 0 20px 16px 46px;
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}

/* ===== BOTTOM CTA ===== */
.signin-cta {
    padding: 60px 24px 80px;
}
.signin-cta-card {
    max-width: 700px; margin: 0 auto;
    text-align: center; padding: 48px 32px;
    background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(59,130,246,0.06) 100%);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-xl);
    position: relative; overflow: hidden;
}
.signin-cta-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(220,38,38,0.1) 0%, transparent 60%);
    pointer-events: none;
}
.signin-cta-card h2 {
    font-size: 28px; font-weight: 700; margin-bottom: 10px;
    color: var(--text-primary); position: relative;
}
.signin-cta-card p {
    font-size: 16px; color: var(--text-secondary); margin-bottom: 24px;
    position: relative;
}
.signin-cta-card .btn { position: relative; }

/* ===== PLATFORMS SECTION ===== */
.signin-platforms { padding: 60px 24px; max-width: 1200px; margin: 0 auto; }
.signin-platform-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.signin-platform-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px; text-align: center;
    transition: all var(--transition-base); position: relative; overflow: hidden;
}
.signin-platform-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; opacity: 0; transition: opacity var(--transition-base);
}
.signin-platform-card:hover {
    border-color: var(--border-hover); transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.signin-platform-card:hover::before { opacity: 1; }
.platform-instagram::before { background: linear-gradient(90deg, #833AB4, #FD1D1D, #F77737); }
.platform-youtube::before { background: #FF0000; }
.platform-tiktok::before { background: linear-gradient(90deg, #00F2EA, #FF0050); }
.platform-telegram::before { background: #0088CC; }
.platform-facebook::before { background: #1877F2; }
.platform-twitter::before { background: #1DA1F2; }
.platform-spotify::before { background: #1DB954; }
.platform-threads::before { background: linear-gradient(90deg, #000, #333); }

.signin-platform-icon {
    width: 56px; height: 56px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); font-size: 28px;
}
.platform-instagram .signin-platform-icon { background: rgba(225, 48, 108, 0.1); color: #E1306C; }
.platform-youtube .signin-platform-icon { background: rgba(255, 0, 0, 0.1); color: #FF0000; }
.platform-tiktok .signin-platform-icon { background: rgba(0, 242, 234, 0.1); color: #00F2EA; }
.platform-telegram .signin-platform-icon { background: rgba(0, 136, 204, 0.1); color: #0088CC; }
.platform-facebook .signin-platform-icon { background: rgba(24, 119, 242, 0.1); color: #1877F2; }
.platform-twitter .signin-platform-icon { background: rgba(29, 161, 242, 0.1); color: #1DA1F2; }
.platform-spotify .signin-platform-icon { background: rgba(29, 185, 84, 0.1); color: #1DB954; }
.platform-threads .signin-platform-icon { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }

.signin-platform-card h3 {
    font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px;
}
.signin-platform-card p {
    font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px;
}
.signin-platform-services {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px;
}
.platform-chip {
    display: inline-block; padding: 3px 10px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: 500; color: var(--text-secondary);
}
.signin-platform-price {
    font-size: 13px; color: var(--text-secondary);
}
.signin-platform-price strong {
    color: var(--accent); font-weight: 700;
}

/* ===== HOW IT WORKS ===== */
.signin-how { padding: 60px 24px; max-width: 900px; margin: 0 auto; }
.signin-how-grid {
    display: flex; align-items: center; justify-content: center;
    gap: 0;
}
.signin-how-step {
    flex: 1; text-align: center; padding: 28px 20px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative; transition: all var(--transition-base);
}
.signin-how-step:hover {
    border-color: var(--border-active); transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.signin-how-number {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    width: 28px; height: 28px;
    background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 700;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-glow);
}
.signin-how-icon {
    width: 52px; height: 52px; margin: 8px auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-md); font-size: 24px;
}
.signin-how-step h3 {
    font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px;
}
.signin-how-step p {
    font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0;
}
.signin-how-connector {
    width: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 18px;
}

/* ===== TESTIMONIALS ===== */
.signin-testimonials { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.signin-testi-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.signin-testi-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
    transition: all var(--transition-base);
}
.signin-testi-card:hover {
    border-color: var(--border-hover); transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.signin-testi-stars {
    display: flex; gap: 3px; margin-bottom: 14px; color: #FBBF24; font-size: 14px;
}
.signin-testi-text {
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
    margin-bottom: 16px; font-style: italic;
}
.signin-testi-author {
    display: flex; align-items: center; gap: 12px;
}
.signin-testi-avatar {
    width: 40px; height: 40px;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}
.signin-testi-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.signin-testi-role { font-size: 12px; color: var(--text-muted); }

/* ===== SERVICES OVERVIEW ===== */
.signin-services { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.signin-services-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.signin-svc-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
    text-align: center; transition: all var(--transition-base);
}
.signin-svc-card:hover {
    border-color: var(--border-hover); transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.signin-svc-card i {
    font-size: 28px; color: var(--accent); margin-bottom: 12px; display: block;
}
.signin-svc-card h4 {
    font-size: 15px; font-weight: 600; color: var(--text-primary);
    margin: 0 0 8px;
}
.signin-svc-card p {
    font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 0;
}

/* ===== PAYMENT METHODS ===== */
.signin-payments { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.signin-payment-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.signin-pay-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px 12px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}
.signin-pay-card:hover {
    border-color: var(--border-hover); background: var(--bg-card-hover);
}
.signin-pay-card i {
    font-size: 24px; color: var(--text-secondary);
}
.signin-pay-card span {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    text-align: center;
}

/* ===== FULL ARTICLES SECTION ===== */
.signin-articles { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.signin-article-list { display: flex; flex-direction: column; gap: 32px; }
.signin-article {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px;
    transition: border-color var(--transition-base);
}
.signin-article:hover { border-color: var(--border-hover); }
.signin-article-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.signin-article-tag {
    display: inline-block; padding: 4px 14px;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; border-radius: var(--radius-full);
}
.platform-instagram-tag { background: rgba(225,48,108,0.1); color: #E1306C; }
.platform-youtube-tag { background: rgba(255,0,0,0.1); color: #FF4444; }
.platform-tiktok-tag { background: rgba(0,242,234,0.1); color: #00F2EA; }
.platform-telegram-tag { background: rgba(0,136,204,0.1); color: #0088CC; }
.platform-facebook-tag { background: rgba(24,119,242,0.1); color: #1877F2; }
.platform-business-tag { background: var(--accent-soft); color: var(--accent); }

.signin-article-date {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-muted);
}
.signin-article-title {
    font-size: 22px; font-weight: 700; color: var(--text-primary);
    line-height: 1.3; margin-bottom: 20px;
}
.signin-article-content h3 {
    font-size: 17px; font-weight: 700; color: var(--text-primary);
    margin: 24px 0 10px; padding-left: 12px;
    border-left: 3px solid var(--accent);
}
.signin-article-content p {
    font-size: 14px; color: var(--text-secondary);
    line-height: 1.8; margin-bottom: 12px;
}
.signin-article-list-items {
    list-style: none; padding: 0; margin: 0 0 16px;
}
.signin-article-list-items li {
    padding: 8px 0 8px 20px; font-size: 14px;
    color: var(--text-secondary); line-height: 1.7;
    position: relative; border-bottom: 1px solid var(--border);
}
.signin-article-list-items li:last-child { border-bottom: none; }
.signin-article-list-items li::before {
    content: ''; position: absolute; left: 0; top: 16px;
    width: 8px; height: 8px; background: var(--accent);
    border-radius: 50%;
}
.signin-article-list-items li strong { color: var(--text-primary); }

.signin-article-services {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 8px; margin-top: 16px;
}
.article-svc {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; font-size: 13px;
    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.article-svc:hover {
    background: var(--accent-soft); border-color: var(--border-active);
    color: var(--accent);
}
.article-svc i { color: var(--accent); font-size: 14px; flex-shrink: 0; }

/* Article Calculator */
.signin-article-calculator {
    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 20px; margin-top: 16px;
}
.calc-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--border);
    font-size: 14px; color: var(--text-secondary);
}
.calc-row:last-child { border-bottom: none; font-size: 16px; }
.calc-row strong { color: var(--text-primary); }

/* ===== COMPARISON TABLE ===== */
.signin-compare { padding: 60px 24px; max-width: 900px; margin: 0 auto; }
.signin-compare-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.signin-compare-table {
    width: 100%; border-collapse: collapse;
    background: var(--bg-card);
}
.signin-compare-table th, .signin-compare-table td {
    padding: 14px 20px; text-align: left;
    font-size: 14px; border-bottom: 1px solid var(--border);
}
.signin-compare-table thead th {
    background: rgba(255,255,255,0.03);
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-secondary);
}
.signin-compare-table td { color: var(--text-secondary); }
.compare-highlight { background: rgba(220,38,38,0.04) !important; }
.compare-highlight strong { color: var(--accent); }
thead .compare-highlight { color: var(--accent) !important; }
.signin-compare-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.signin-compare-table .text-accent { color: var(--accent); }

/* ===== SEO DETAIL SECTION ===== */
.signin-seo-detail { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.signin-seo-full {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 36px;
}
.signin-seo-full h2 {
    font-size: 24px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 16px;
}
.signin-seo-full h3 {
    font-size: 18px; font-weight: 700; color: var(--text-primary);
    margin: 28px 0 12px; padding-left: 12px;
    border-left: 3px solid var(--accent);
}
.signin-seo-full p {
    font-size: 14px; color: var(--text-secondary);
    line-height: 1.8; margin-bottom: 14px;
}

/* ===== SEO KEYWORDS CLOUD ===== */
.signin-keywords { padding: 40px 24px 60px; max-width: 1100px; margin: 0 auto; }
.signin-keywords-cloud {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin-top: 24px;
}
.keyword-tag {
    display: inline-block; padding: 6px 16px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.keyword-tag:hover {
    background: var(--accent-soft); border-color: var(--border-active);
    color: var(--accent);
}

/* ===== SIGNIN RESPONSIVE ===== */
@media (max-width: 1024px) {
    .signin-hero-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
    .signin-features-col { order: -1; }
    .signin-features-title { font-size: 28px; }
    .signin-feature-cards { grid-template-columns: 1fr 1fr; }
    .signin-platform-grid { grid-template-columns: repeat(2, 1fr); }
    .signin-services-grid { grid-template-columns: repeat(2, 1fr); }
    .signin-payment-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .signin-blog-grid { grid-template-columns: 1fr; max-width: 100%; margin: 0 auto; }
    .signin-seo-grid { grid-template-columns: 1fr; }
    .signin-trust-inner { gap: 20px; justify-content: flex-start; }
    .signin-feature-cards { grid-template-columns: 1fr; }
    .signin-testi-grid { grid-template-columns: 1fr; }
    .signin-how-grid { flex-direction: column; gap: 16px; }
    .signin-how-connector { transform: rotate(90deg); width: auto; }
    .section-title { font-size: 22px; }
    .section-subtitle { font-size: 13px; }
    .signin-platform-grid { grid-template-columns: 1fr 1fr; max-width: 100%; }
    .signin-services-grid { grid-template-columns: 1fr; max-width: 100%; }
    .signin-payment-grid { grid-template-columns: repeat(2, 1fr); }

    /* Articles responsive */
    .signin-articles { padding: 40px 12px; }
    .signin-article { padding: 20px 16px; border-radius: var(--radius-md); }
    .signin-article-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .signin-article-title { font-size: 18px; }
    .signin-article-content h3 { font-size: 15px; }
    .signin-article-content p { font-size: 13px; }
    .signin-article-services { grid-template-columns: 1fr; }
    .signin-article-list-items li { font-size: 13px; padding: 6px 0 6px 16px; }
    .signin-article-calculator { padding: 16px; }
    .calc-row { font-size: 13px; }

    /* SEO detail responsive */
    .signin-seo-detail { padding: 40px 12px; }
    .signin-seo-full { padding: 20px 16px; }
    .signin-seo-full h2 { font-size: 18px; }
    .signin-seo-full p { font-size: 13px; }

    /* Compare table responsive */
    .signin-compare { padding: 40px 12px; }
    .signin-compare-table th, .signin-compare-table td { padding: 10px 12px; font-size: 12px; }

    /* FAQ responsive */
    .signin-faq-q { font-size: 14px; padding: 14px 16px; }
    .signin-faq-a { padding: 0 16px 14px 36px; font-size: 13px; }
}
@media (max-width: 480px) {
    .signin-hero { padding: 24px 12px; }
    .signin-card { padding: 28px 16px; border-radius: var(--radius-lg); }
    .signin-title { font-size: 20px; }
    .signin-features-title { font-size: 22px; }
    .signin-stats { gap: 12px; }
    .signin-stat-number { font-size: 20px; }
    .signin-blogs { padding: 30px 10px; }
    .signin-seo { padding: 30px 10px; }
    .signin-faq { padding: 30px 10px; }
    .signin-cta { padding: 30px 10px 50px; }
    .signin-cta-card { padding: 24px 16px; }
    .signin-cta-card h2 { font-size: 20px; }
    .signin-platforms { padding: 30px 10px; }
    .signin-how { padding: 30px 10px; }
    .signin-testimonials { padding: 30px 10px; }
    .signin-services { padding: 30px 10px; }
    .signin-payments { padding: 30px 10px; }
    .signin-keywords { padding: 24px 10px 30px; }
    .keyword-tag { font-size: 11px; padding: 4px 10px; }

    /* Cards tighter on small phones */
    .signin-article { padding: 16px 12px; }
    .signin-article-title { font-size: 16px; }
    .signin-article-list { gap: 20px; }
    .signin-seo-full { padding: 16px 12px; }
    .signin-seo-block { padding: 20px 16px; }
    .signin-platform-grid { grid-template-columns: 1fr; }
    .signin-platform-card { padding: 20px 16px; }
    .signin-blog-card .signin-blog-body { padding: 14px; }
    .signin-blog-title { font-size: 14px; }
    .signin-payment-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .signin-pay-card { padding: 14px 8px; }
    .signin-pay-card i { font-size: 20px; }
    .signin-pay-card span { font-size: 11px; }

    /* Comparison table scroll */
    .signin-compare-table-wrap { -webkit-overflow-scrolling: touch; }
    .signin-compare-table { min-width: 500px; }
}


/* ============================================
   SECTION 3: SIGNUP PAGE
   ============================================ */

/* --- Page Container --- */
.signup-page {
    padding: 0;
    background:
        radial-gradient(ellipse at 80% 50%, rgba(220, 38, 38, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(59, 130, 246, 0.03) 0%, transparent 50%);
}

/* ===== HERO: Form + Benefits ===== */
.signup-hero {
    min-height: calc(100vh - var(--nav-height));
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
}
.signup-hero-grid {
    max-width: 1100px; width: 100%;
    display: grid; grid-template-columns: 480px 1fr;
    gap: 48px; align-items: start;
}

/* --- Signup Card --- */
.signup-form-col { position: relative; z-index: 2; }
.signup-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
}
.signup-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), #F59E0B, var(--accent));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.signup-header { text-align: center; margin-bottom: 28px; }
.signup-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; letter-spacing: -0.5px; }
.signup-subtitle { font-size: 14px; color: var(--text-secondary); margin: 0; }
.signup-card .alert { margin-bottom: 20px; }
.signup-captcha { display: flex; justify-content: center; }
.signup-card .btn-full { padding: 14px 24px; font-size: 15px; gap: 8px; }

/* --- Custom Checkbox --- */
.signup-terms { margin-bottom: 20px; }
.signup-checkbox-label {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer; font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}
.signup-checkbox { display: none; }
.signup-checkbox-custom {
    width: 20px; height: 20px; flex-shrink: 0;
    border: 2px solid var(--border-hover);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
    color: transparent; font-size: 12px; margin-top: 1px;
}
.signup-checkbox:checked + .signup-checkbox-custom {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.signup-checkbox-text { flex: 1; }
.signup-terms-link { color: var(--accent); font-weight: 600; }
.signup-terms-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* --- Signup Footer --- */
.signup-footer {
    text-align: center; margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--border);
}
.signup-footer-text { font-size: 14px; color: var(--text-secondary); }
.signup-footer-link { font-size: 14px; font-weight: 600; color: var(--accent); margin-left: 4px; }
.signup-footer-link:hover { color: var(--accent-hover); }

/* --- Benefits Column --- */
.signup-benefits { padding: 20px 0; }
.signup-benefits-title {
    font-size: 32px; font-weight: 800; color: var(--text-primary);
    line-height: 1.2; margin-bottom: 10px; letter-spacing: -0.5px;
}
.signup-benefits-desc {
    font-size: 15px; color: var(--text-secondary); line-height: 1.7;
    margin-bottom: 28px;
}

/* Benefit Items */
.signup-benefit-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.signup-benefit-item {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
    transition: all var(--transition-base);
}
.signup-benefit-item:hover {
    background: rgba(255,255,255,0.04); border-color: var(--border-hover);
    transform: translateX(4px);
}
.signup-benefit-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-sm); font-size: 18px;
}
.signup-benefit-text h4 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.signup-benefit-text p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* Stats Bar */
.signup-stats-bar { display: flex; gap: 12px; flex-wrap: wrap; }
.signup-stat-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--radius-full);
    background: var(--accent-soft); border: 1px solid var(--border-active);
    font-size: 13px; font-weight: 600; color: var(--accent);
}
.signup-stat-chip i { font-size: 14px; }

/* ===== TRUST BAR ===== */
.signup-trust {
    padding: 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.01);
}
.signup-trust-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 32px; flex-wrap: wrap;
}
.signup-trust-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.signup-trust-item i { color: var(--accent); font-size: 16px; }

/* ===== STEPS ===== */
.signup-steps { padding: 60px 24px; max-width: 900px; margin: 0 auto; }
.signup-steps-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.signup-step-card {
    text-align: center; padding: 28px 20px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); position: relative;
    transition: all var(--transition-base);
}
.signup-step-card:hover {
    border-color: var(--border-active); transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.signup-step-num {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    width: 24px; height: 24px;
    background: var(--accent); color: #fff;
    font-size: 12px; font-weight: 700;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
}
.signup-step-icon { font-size: 28px; color: var(--accent); margin-bottom: 12px; }
.signup-step-card h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.signup-step-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* ===== PLATFORM ICONS ===== */
.signup-platforms { padding: 60px 24px; max-width: 800px; margin: 0 auto; }
.signup-platform-icons {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 24px;
}
.signup-plat-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); font-size: 24px; color: var(--text-secondary);
    transition: all var(--transition-base);
}
.signup-plat-icon:hover {
    border-color: var(--border-active); color: var(--accent);
    transform: translateY(-3px); box-shadow: var(--shadow-md);
}

/* ===== SEO CONTENT ===== */
.signup-seo { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.signup-seo-content {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px;
}
.signup-seo-content h2 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; }
.signup-seo-content h3 { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 24px 0 10px; padding-left: 12px; border-left: 3px solid var(--accent); }
.signup-seo-content p { font-size: 14px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 12px; }
.signup-seo-list { list-style: none; padding: 0; }
.signup-seo-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; font-size: 14px; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.signup-seo-list li:last-child { border-bottom: none; }
.signup-seo-list li i { color: var(--success); font-size: 16px; flex-shrink: 0; }

/* ===== SIGNUP CTA ===== */
.signup-cta { padding: 60px 24px 80px; }
.signup-cta-card {
    max-width: 600px; margin: 0 auto;
    text-align: center; padding: 40px 28px;
    background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(59,130,246,0.06) 100%);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-xl);
}
.signup-cta-card h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.signup-cta-card p { font-size: 15px; color: var(--text-secondary); margin-bottom: 20px; }

/* ===== SIGNUP RESPONSIVE ===== */
@media (max-width: 1024px) {
    .signup-hero-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .signup-benefits-col { order: -1; }
    .signup-benefits-title { font-size: 26px; }
}
@media (max-width: 768px) {
    .signup-steps-grid { grid-template-columns: 1fr; max-width: 350px; margin: 0 auto; }
    .signup-trust-inner { gap: 20px; justify-content: flex-start; }
}
@media (max-width: 480px) {
    .signup-hero { padding: 24px 12px; }
    .signup-card { padding: 28px 20px; border-radius: var(--radius-lg); }
    .signup-title { font-size: 20px; }
    .signup-benefits-title { font-size: 22px; }
    .signup-steps { padding: 40px 12px; }
    .signup-platforms { padding: 40px 12px; }
    .signup-seo { padding: 40px 12px; }
    .signup-cta { padding: 40px 12px 60px; }
    .signup-stat-chip { font-size: 11px; padding: 6px 10px; }
}


/* ============================================
   SECTION 4: RESET PASSWORD PAGE
   ============================================ */

.reset-page {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(220, 38, 38, 0.04) 0%, transparent 50%);
}

/* --- Hero --- */
.reset-hero {
    min-height: calc(100vh - var(--nav-height));
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
}
.reset-wrapper { width: 100%; max-width: 520px; }

/* --- Reset Card --- */
.reset-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
}
.reset-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--info), var(--accent), var(--info));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Header with icon */
.reset-header { text-align: center; margin-bottom: 28px; }
.reset-icon-circle {
    width: 72px; height: 72px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent-soft), rgba(59,130,246,0.1));
    border: 1px solid var(--border-active);
    border-radius: 50%; font-size: 32px; color: var(--accent);
}
.reset-title {
    font-size: 24px; font-weight: 700; color: var(--text-primary);
    margin: 0 0 8px; letter-spacing: -0.5px;
}
.reset-subtitle {
    font-size: 14px; color: var(--text-secondary); margin: 0;
    max-width: 360px; margin: 0 auto; line-height: 1.6;
}

/* Captcha */
.reset-captcha { display: flex; justify-content: center; }

/* Footer */
.reset-footer {
    text-align: center; margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--border);
}
.reset-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 500; color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.reset-back-link:hover { color: var(--accent); gap: 10px; }

/* --- Info Cards Grid --- */
.reset-info-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin-top: 24px;
}
.reset-info-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 18px; text-align: center;
    transition: all var(--transition-base);
}
.reset-info-card:hover {
    border-color: var(--border-hover); transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.reset-info-card i { font-size: 24px; color: var(--accent); margin-bottom: 10px; display: block; }
.reset-info-card h4 { font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.reset-info-card p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* --- Trust Bar --- */
.reset-trust {
    padding: 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.01);
}

/* --- Help Section --- */
.reset-help { padding: 60px 24px; max-width: 900px; margin: 0 auto; }
.reset-help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.reset-help-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
    transition: all var(--transition-base);
}
.reset-help-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.reset-help-card i { font-size: 24px; color: var(--accent); margin-bottom: 12px; display: block; }
.reset-help-card h4 { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
.reset-help-card p { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.6; }

/* --- FAQ --- */
.reset-faq { padding: 60px 24px; max-width: 800px; margin: 0 auto; }

/* --- SEO --- */
.reset-seo { padding: 60px 24px; max-width: 900px; margin: 0 auto; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .reset-info-grid { grid-template-columns: 1fr; max-width: 300px; margin: 24px auto 0; }
    .reset-help-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .reset-hero { padding: 24px 12px; }
    .reset-card { padding: 28px 20px; border-radius: var(--radius-lg); }
    .reset-title { font-size: 20px; }
    .reset-icon-circle { width: 60px; height: 60px; font-size: 26px; }
    .reset-help { padding: 40px 12px; }
    .reset-faq { padding: 40px 12px; }
    .reset-seo { padding: 40px 12px; }
}


/* ============================================
   SECTION 5: SERVICES PAGE (Accordion Style)
   ============================================ */

.services-page { padding-bottom: 40px; }

/* --- Page Header --- */
/* Services page: use wider layout */
.services-page { max-width: 1600px; margin: 0 auto; width: 100%; }
.svc-page-header { margin-bottom: 20px; }
.svc-main-title { font-size: 26px; font-weight: 800; margin: 0; }

/* --- Toolbar: Search + Filter --- */
.svc-toolbar {
    display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.svc-search-box {
    flex: 1; min-width: 250px; position: relative;
}
.svc-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 16px; pointer-events: none;
}
.svc-search-input { padding-left: 42px !important; }
.svc-filter-dropdown { min-width: 200px; }
.svc-category-select {
    padding-right: 36px !important;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238A8F9E' viewBox='0 0 16 16'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* --- Admin Text --- */
.svc-admin-text {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px;
    margin-bottom: 24px; font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}

/* --- Empty State --- */
.svc-empty {
    text-align: center; padding: 80px 24px; color: var(--text-muted);
}
.svc-empty i { font-size: 48px; margin-bottom: 16px; display: block; }
.svc-empty h3 { font-size: 18px; color: var(--text-secondary); margin-bottom: 8px; }

/* --- Widget --- */
.svc-widget-wrap {
    margin-bottom: 20px; border-radius: var(--radius-lg); overflow: hidden;
}

/* --- Sticky Table Header --- */
.svc-table-header {
    display: flex; align-items: center;
    background: var(--accent); color: #fff;
    border-radius: var(--radius-md);
    padding: 12px 20px; margin-bottom: 12px;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px;
    position: sticky; top: var(--nav-height); z-index: 10;
}
.svc-th-col { flex-shrink: 0; }
.svc-th-details { flex: 1; min-width: 200px; }
.svc-th-price { width: 100px; text-align: center; }
.svc-th-qty { width: 130px; text-align: center; }
.svc-th-speed { width: 80px; text-align: center; }
.svc-th-desc { width: 200px; text-align: center; }

/* --- Accordion --- */
.svc-accordion { display: flex; flex-direction: column; gap: 6px; }

/* Accordion Item */
.svc-acc-item {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    overflow: hidden; transition: border-color var(--transition-fast);
}
.svc-acc-item:hover { border-color: var(--border-hover); }
.svc-acc-item.open { border-color: var(--border-active); }

/* Accordion Header (clickable) */
.svc-acc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; cursor: pointer;
    background: linear-gradient(135deg, rgba(220,38,38,0.06) 0%, rgba(255,255,255,0.02) 100%);
    list-style: none; user-select: none;
    transition: background var(--transition-fast);
}
.svc-acc-header:hover { background: linear-gradient(135deg, rgba(220,38,38,0.1) 0%, rgba(255,255,255,0.04) 100%); }

.svc-acc-name {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 700; color: var(--text-primary);
}

/* Category header icons */
.svc-cat-icon { font-size: 16px; }
.svc-cat-emoji { font-size: 16px; line-height: 1; }
.svc-cat-img { width: 20px; height: 20px; border-radius: 3px; object-fit: cover; }

/* Service row icons (same size as category) */
.svc-svc-icon { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }
.svc-svc-emoji { font-size: 16px; line-height: 1; flex-shrink: 0; }
.svc-svc-img { width: 20px; height: 20px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }

/* Chevron + Right section */
.svc-acc-right { display: flex; align-items: center; gap: 10px; }
.svc-acc-chevron {
    color: var(--text-muted); font-size: 14px;
    transition: transform var(--transition-base);
}
.svc-acc-item.open .svc-acc-chevron { transform: rotate(180deg); }

.svc-acc-badge {
    padding: 4px 12px;
    background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Accordion Body — hidden by default, shown on .open */
.svc-acc-body {
    display: none;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}
.svc-acc-item.open .svc-acc-body {
    display: block;
    animation: slideDown 0.25s ease;
}

/* Service Row (inside accordion) */
.svc-row {
    display: flex; align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
    gap: 8px;
}
.svc-row:last-child { border-bottom: none; }
.svc-row:hover { background: rgba(255,255,255,0.02); }

.svc-col { flex-shrink: 0; }
.svc-col-details { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 12px; }
.svc-col-price { width: 100px; text-align: center; }
.svc-col-qty { width: 130px; text-align: center; font-size: 12px; color: var(--text-secondary); }
.svc-col-speed { width: 80px; text-align: center; }
.svc-col-desc { width: 200px; font-size: 12px; color: var(--text-muted); }

/* Service ID badge (smmbirla style) */
.svc-id-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 22px; padding: 0 8px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff; border-radius: var(--radius-full); font-size: 10px; font-weight: 700;
    font-variant-numeric: tabular-nums; flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(220,38,38,0.3);
    letter-spacing: 0.3px;
}
.svc-name-block { flex: 1; min-width: 0; }
.svc-name {
    font-size: 13px; font-weight: 500; color: var(--text-primary);
    display: block; word-break: break-word; line-height: 1.5;
}
/* Delivery tag inline */
.svc-delivery-tag {
    display: inline-flex; align-items: center;
    font-size: 11px; color: var(--success); font-weight: 600;
    margin-top: 3px;
}
.svc-delivery-tag i { font-size: 14px; }

/* Price tag style */
.svc-col-price {
    display: flex; align-items: center; justify-content: center; gap: 2px;
}
.svc-rate-big {
    display: inline-flex; align-items: center; padding: 3px 10px;
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid var(--border-active); border-radius: var(--radius-full);
    font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.svc-rate-unit { color: var(--text-muted); font-size: 10px; font-weight: 500; }

/* Platform icons in service names */
.svc-platform-icon { margin-right: 6px; font-size: 14px; flex-shrink: 0; }
.svc-cat-platform { font-size: 16px; margin-right: 8px; }

/* Quantities (stacked with icons) */
.svc-qty-row {
    font-size: 12px; color: var(--text-secondary); margin-bottom: 2px;
    display: flex; align-items: center; gap: 4px;
}
.svc-qty-row i { font-size: 12px; color: var(--text-muted); }
.svc-qty-row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Action column */
.svc-col-action { display: flex; flex-direction: column; gap: 6px; width: 90px; flex-shrink: 0; }

/* Order button — Red 3D style */
.svc-know-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 14px; height: 32px; border-radius: var(--radius-sm); border: none;
    background: linear-gradient(180deg, #EF4444 0%, #DC2626 50%, #B91C1C 100%);
    color: #fff;
    font-size: 11px; font-weight: 700; font-family: var(--font);
    text-decoration: none; transition: all var(--transition-fast);
    white-space: nowrap;
    box-shadow: 0 3px 0 var(--accent-dark), 0 4px 8px rgba(220,38,38,0.2);
}
.svc-know-btn:hover {
    background: linear-gradient(180deg, #F87171 0%, #EF4444 50%, #DC2626 100%);
    color: #fff; transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--accent-dark), 0 6px 12px rgba(220,38,38,0.3);
}
.svc-know-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--accent-dark);
}

/* Row Actions */
.svc-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.svc-order-btn, .svc-fav-btn {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: transparent; color: var(--text-secondary);
    cursor: pointer; font-size: 14px;
    transition: all var(--transition-fast);
}
/* Analyse button — GREEN 3D style */
.svc-analyse-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 32px; padding: 0 14px;
    border-radius: var(--radius-sm); border: none;
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 50%, #B45309 100%);
    color: #fff;
    cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--font);
    transition: all var(--transition-fast); white-space: nowrap;
    box-shadow: 0 3px 0 #78350F, 0 4px 8px rgba(245,158,11,0.25);
}
.svc-analyse-btn i { font-size: 13px; }
.svc-analyse-btn:hover {
    background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 0 #78350F, 0 6px 12px rgba(245,158,11,0.35);
}
.svc-analyse-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #78350F;
}

/* Delivery time auto-tags (in action column) */
.svc-dt-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
}
/* Desktop: tags inline under service name */
.svc-name-block .svc-dt-tags {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px;
}
.dt-tag {
    display: inline-block; padding: 3px 10px;
    font-size: 10px; font-weight: 700;
    border-radius: var(--radius-sm);
    white-space: nowrap; border: none;
}
.dt-avg {
    background: linear-gradient(180deg, #22C55E 0%, #15803D 100%);
    color: #fff; box-shadow: 0 2px 0 #14532D;
}
.dt-success {
    background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%);
    color: #fff; box-shadow: 0 2px 0 #1E3A5F;
}
.dt-speed {
    background: linear-gradient(180deg, #F59E0B 0%, #B45309 100%);
    color: #fff; box-shadow: 0 2px 0 #78350F;
}
.dt-drop {
    background: linear-gradient(180deg, #EF4444 0%, #B91C1C 100%);
    color: #fff; box-shadow: 0 2px 0 #7F1D1D;
}
.svc-dt-loading {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid var(--border); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.6s linear infinite;
}

/* Widget inline container (shows below service row) */
.svc-widget-container {
    background: var(--bg-card-hover);
    border-bottom: 1px solid var(--border);
    padding: 0;
    animation: slideDown 0.25s ease;
}
.svc-widget-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px;
    background: var(--info-bg); border-bottom: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--info);
}
.svc-widget-header i { margin-right: 6px; }
.svc-widget-close {
    background: none; border: none; color: var(--text-muted);
    font-size: 18px; cursor: pointer; padding: 2px 6px;
}
.svc-widget-close:hover { color: var(--text-primary); }
#dt-delivery-widget-root { padding: 12px 20px; }

/* Widget modal (removed, using inline now) */

.svc-order-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--border-active); }
.svc-fav-btn:hover { color: #FBBF24; border-color: rgba(251,191,36,0.3); }
.svc-fav-btn .bi-star-fill { color: #FBBF24; }

/* --- Stats Bar --- */
.svc-stats {
    padding: 24px 0; margin: 24px 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}

/* --- Platform Chips --- */
.svc-platforms { padding: 40px 0; }
.svc-platform-chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px;
}
.svc-plat-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: var(--radius-full);
    background: var(--bg-card); border: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    transition: all var(--transition-base); cursor: pointer;
}
.svc-plat-chip:hover {
    background: var(--accent-soft); border-color: var(--border-active);
    color: var(--accent); transform: translateY(-2px);
}
.svc-plat-chip i { font-size: 16px; }

/* --- How / Steps --- */
.svc-how { padding: 40px 0; max-width: 900px; margin: 0 auto; }

/* --- FAQ --- */
.svc-faq { padding: 40px 0; max-width: 800px; margin: 0 auto; }

/* --- SEO --- */
.svc-seo { padding: 40px 0; }

/* --- Keywords --- */
.svc-keywords { padding: 20px 0 40px; }


/* --- Services Responsive --- */

/* Touch optimization */
.svc-acc-header, .svc-analyse-btn, .svc-order-btn, .svc-fav-btn {
    touch-action: manipulation;
}

@media (max-width: 1024px) {
    .svc-th-desc, .svc-col-desc { display: none; }
    .svc-th-speed, .svc-col-speed { display: none; }
}

@media (max-width: 768px) {
    .svc-toolbar { flex-direction: column; }
    .svc-filter-dropdown { min-width: 100%; }
    .svc-table-header { display: none; }

    /* Service rows → card layout */
    .svc-row {
        flex-wrap: wrap; padding: 14px 16px; gap: 6px;
        position: relative;
    }
    .svc-col-details { width: 100%; min-width: 0; flex-wrap: wrap; }
    .svc-col-price { width: auto; text-align: left; font-size: 14px; }
    .svc-col-qty { width: auto; text-align: left; }
    .svc-col-desc, .svc-col-speed { display: none; }

    /* Bigger touch targets on mobile */
    .svc-acc-header { padding: 14px 16px; min-height: 48px; }
    .svc-acc-name { font-size: 13px; gap: 8px; }
    .svc-analyse-btn, .svc-order-btn, .svc-fav-btn {
        width: 36px; height: 36px; font-size: 16px;
    }
    .svc-row-actions { gap: 8px; }

    .svc-platform-chips { gap: 8px; }
    .svc-plat-chip { padding: 8px 14px; font-size: 12px; min-height: 40px; }

    /* Widget inline */
    .svc-widget-container { margin: 0; }
    .svc-widget-header { padding: 10px 14px; font-size: 12px; }
    #dt-delivery-widget-root { padding: 10px 14px; }
}

@media (max-width: 480px) {
    .svc-main-title { font-size: 18px; }

    /* Card-style service rows — fully stacked */
    .svc-row {
        display: block !important;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }

    /* Mobile service card — compact layout */
    .svc-row { display: block !important; padding: 12px 14px; }

    .svc-col-details {
        display: flex; align-items: center; gap: 8px;
        width: 100%; margin-bottom: 6px;
    }
    .svc-name { font-size: 13px; line-height: 1.3; }
    .svc-delivery-tag { display: inline; margin-top: 0; margin-left: 4px; }

    /* Price + Qty + Speed — centered */
    .svc-col-price, .svc-col-qty, .svc-col-speed {
        display: inline !important; width: auto !important;
    }
    .svc-row > .svc-col-price, .svc-row > .svc-col-qty, .svc-row > .svc-col-speed {
        text-align: center !important;
    }
    .svc-col-price { margin-right: 6px; }
    .svc-rate-big { font-size: 16px; }
    .svc-rate-unit { font-size: 10px; }
    .svc-qty-row { display: inline; font-size: 11px; margin: 0; }
    .svc-qty-row i { display: none; }
    .svc-qty-row + .svc-qty-row::before { content: ' · '; color: var(--text-muted); }

    /* Center the price/qty row */
    .svc-row { text-align: center; }
    .svc-col-details { text-align: left; }

    /* Delivery tag — float right of name row as a badge */
    .svc-name { display: inline; }
    .svc-delivery-tag {
        display: inline-block; float: right;
        padding: 2px 8px; margin-top: 2px;
        background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2);
        border-radius: var(--radius-full);
        font-size: 10px;
    }

    /* Actions + tags — centered */
    .svc-col-action {
        display: flex !important; width: 100% !important;
        flex-direction: column !important; align-items: center; gap: 8px;
        margin-top: 8px;
    }
    .svc-dt-tags {
        display: flex !important; flex-wrap: wrap !important;
        justify-content: center; width: 100%;
        gap: 4px;
    }
    .dt-tag { font-size: 9px; padding: 3px 8px; }
    .svc-know-btn { width: 100%; height: 36px; justify-content: center; font-size: 12px; }

    /* Category header */
    .svc-acc-header { min-height: 48px; padding: 10px 14px; }
    .svc-acc-name { font-size: 13px; gap: 6px; }
    .svc-acc-badge { font-size: 10px; padding: 3px 8px; }
    .svc-acc-chevron { font-size: 12px; }
    .svc-cat-img { width: 18px; height: 18px; }
    .svc-cat-icon, .svc-cat-emoji { font-size: 14px; }
    .svc-svc-icon, .svc-svc-emoji { font-size: 14px; }
    .svc-svc-img { width: 18px; height: 18px; }

    /* Search */
    .svc-search-input { font-size: 16px; min-height: 48px; }
    .svc-category-select { font-size: 16px; min-height: 48px; }

    /* Hide table columns not needed */
    .svc-col-desc { display: none !important; }
}

/* Small phones (375px) */
@media (max-width: 375px) {
    .svc-main-title { font-size: 16px; }
    .svc-row { padding: 10px 12px; }
    .svc-acc-header { padding: 10px 12px; }
    .svc-acc-name { font-size: 12px; }
    .svc-name { font-size: 12px; }
    .svc-analyse-btn { height: 38px; font-size: 12px; }
}

/* ============================================
   SECTION 6: API PAGE
   ============================================ */

.api-page { max-width: 1200px; margin: 0 auto; width: 100%; }

/* --- Hero --- */
.api-hero { padding: 40px 24px 50px; text-align: center; }
.api-hero-inner { max-width: 800px; margin: 0 auto; }
.api-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--accent);
    font-size: 13px; font-weight: 600; margin-bottom: 16px;
    border: 1px solid var(--border-active);
}
.api-hero-title { font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.api-hero-subtitle { font-size: 15px; color: var(--text-secondary); line-height: 1.7; max-width: 600px; margin: 0 auto 24px; }
.api-hero-url {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 10px 16px;
    margin-bottom: 28px;
}
.api-url-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; }
.api-url-code { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--accent); font-weight: 600; }
.api-copy-btn {
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-muted); padding: 4px 8px; cursor: pointer;
    transition: all var(--transition-fast);
}
.api-copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.api-hero-stats { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.api-stat { text-align: center; }
.api-stat strong { display: block; font-size: 20px; font-weight: 800; color: var(--accent); }
.api-stat span { font-size: 12px; color: var(--text-muted); }

/* --- Credentials --- */
.api-credentials { padding: 0 24px 40px; max-width: 1000px; margin: 0 auto; }
.api-cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.api-cred-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 16px 20px;
}
.api-cred-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.api-cred-value { display: flex; align-items: center; gap: 8px; }
.api-cred-value code { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-primary); word-break: break-all; }

/* --- Quick Start --- */
.api-quickstart { padding: 40px 24px; }
.api-steps { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.api-step-card {
    flex: 1; min-width: 200px; max-width: 280px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px 20px; text-align: center;
    transition: all var(--transition-base);
}
.api-step-card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.api-step-num {
    width: 40px; height: 40px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-weight: 800; font-size: 18px;
    border-radius: var(--radius-full); box-shadow: 0 3px 0 var(--accent-dark);
}
.api-step-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.api-step-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.api-step-connector { color: var(--text-muted); font-size: 20px; }

/* --- API Methods --- */
.api-methods { padding: 40px 24px; }
.api-method-list { display: flex; flex-direction: column; gap: 12px; }
.api-method-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: border-color var(--transition-base);
}
.api-method-card.open { border-color: var(--border-active); }
.api-method-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; cursor: pointer;
    transition: background var(--transition-fast);
}
.api-method-header:hover { background: var(--bg-card-hover); }
.api-method-name { display: flex; align-items: center; gap: 12px; }
.api-method-badge {
    padding: 3px 10px; border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #22C55E 0%, #15803D 100%);
    color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
    box-shadow: 0 2px 0 #14532D;
}
.api-method-name h3 { font-size: 15px; font-weight: 600; margin: 0; }
.api-method-chevron { color: var(--text-muted); transition: transform var(--transition-base); }
.api-method-card.open .api-method-chevron { transform: rotate(180deg); }
.api-method-body {
    display: none; padding: 0 20px 20px;
    border-top: 1px solid var(--border);
}
.api-method-card.open .api-method-body { display: block; }

/* Parameters table */
.api-params-section h4, .api-example-section h4 {
    font-size: 14px; font-weight: 700; margin: 16px 0 10px;
    display: flex; align-items: center; gap: 8px; color: var(--text-primary);
}
.api-type-block { margin-bottom: 16px; }
.api-type-label {
    display: inline-block; padding: 3px 12px; border-radius: var(--radius-sm);
    background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700;
    margin-bottom: 8px;
}
.api-params-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
    border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.api-params-table th {
    background: var(--bg-card-hover); padding: 10px 16px; text-align: left;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted);
}
.api-params-table td { padding: 10px 16px; border-top: 1px solid var(--border); color: var(--text-secondary); }
.api-params-table code {
    background: var(--accent-soft); color: var(--accent); padding: 2px 8px;
    border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
}

/* Code blocks */
.api-code-block {
    background: #0D1117; color: #E6EDF3; border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md); padding: 20px; overflow-x: auto;
    font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.7;
    margin: 0;
}
.api-code-block code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* --- Code Example Tabs --- */
.api-code-examples { padding: 40px 24px; }
.api-tab-nav { display: flex; gap: 4px; margin-bottom: 0; border-bottom: 1px solid var(--border); }
.api-tab-btn {
    padding: 10px 20px; border: none; background: none;
    color: var(--text-muted); font-family: var(--font); font-size: 13px; font-weight: 600;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    display: flex; align-items: center; gap: 6px;
}
.api-tab-btn:hover { color: var(--text-primary); }
.api-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.api-tab-content { display: none; }
.api-tab-content.active { display: block; }

/* --- SEO Section --- */
.api-seo-section { padding: 50px 24px; }
.api-seo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.api-seo-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px 24px;
    transition: all var(--transition-base);
}
.api-seo-card:hover { border-color: var(--border-hover); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.api-seo-icon {
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent); font-size: 22px;
    border-radius: var(--radius-md); margin-bottom: 14px;
}
.api-seo-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.api-seo-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* --- Profit Section --- */
.api-profit { padding: 50px 24px; }
.api-profit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.api-profit-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px 24px;
}
.api-profit-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.api-profit-step {
    display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start;
}
.api-profit-step-num {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-weight: 800; font-size: 13px;
    border-radius: var(--radius-full);
}
.api-profit-step strong { font-size: 14px; display: block; margin-bottom: 4px; }
.api-profit-step p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.api-calc-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; }
.api-calc-divider { height: 1px; background: var(--border); margin: 8px 0; }
.api-calc-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 12px; }

/* --- Why Section --- */
.api-why { padding: 50px 24px; }
.api-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.api-why-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px 20px; text-align: center;
    transition: all var(--transition-base);
}
.api-why-item:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.api-why-item i { font-size: 28px; color: var(--accent); margin-bottom: 12px; display: block; }
.api-why-item h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.api-why-item p { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* --- Limits Section --- */
.api-limits { padding: 40px 24px; }
.api-limits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.api-limits-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
}
.api-limits-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.api-best-list { list-style: none; padding: 0; }
.api-best-list li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; font-size: 13px; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.api-best-list li:last-child { border-bottom: none; }
.api-best-list li i { color: var(--success); font-size: 14px; flex-shrink: 0; margin-top: 2px; }

/* --- SEO Detail --- */
.api-seo-detail { padding: 40px 24px; }
.api-seo-article {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 36px 32px;
}
.api-seo-article h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.api-seo-article h3 { font-size: 17px; font-weight: 700; margin: 24px 0 10px; color: var(--text-primary); }
.api-seo-article p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 14px; }
.api-seo-list { list-style: none; padding: 0; margin: 0 0 16px; }
.api-seo-list li {
    padding: 8px 0 8px 20px; font-size: 14px; color: var(--text-secondary);
    line-height: 1.6; border-bottom: 1px solid var(--border); position: relative;
}
.api-seo-list li:last-child { border-bottom: none; }
.api-seo-list li::before {
    content: ''; position: absolute; left: 0; top: 16px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.api-seo-list li strong { color: var(--text-primary); }

/* --- FAQ --- */
.api-faq { padding: 40px 24px; max-width: 800px; margin: 0 auto; }
.api-faq-list { display: flex; flex-direction: column; gap: 10px; }
.api-faq-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
}
.api-faq-item[open] { border-color: var(--border-active); }
.api-faq-q {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; font-size: 14px; font-weight: 600;
    color: var(--text-primary); cursor: pointer; list-style: none;
}
.api-faq-q::-webkit-details-marker { display: none; }
.api-faq-q i { color: var(--accent); font-size: 16px; transition: transform var(--transition-base); }
.api-faq-item[open] .api-faq-q i { transform: rotate(45deg); }
.api-faq-q:hover { color: var(--accent); }
.api-faq-a { padding: 0 20px 16px 46px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* --- Keywords --- */
.api-keywords { padding: 30px 24px 50px; text-align: center; }
.api-keyword-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* --- API Responsive --- */
@media (max-width: 1024px) {
    .api-seo-grid { grid-template-columns: 1fr; }
    .api-profit-grid { grid-template-columns: 1fr; }
    .api-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .api-hero-title { font-size: 26px; }
    .api-hero-stats { gap: 20px; }
    .api-stat strong { font-size: 18px; }
    .api-cred-grid { grid-template-columns: 1fr; }
    .api-steps { flex-direction: column; }
    .api-step-connector { transform: rotate(90deg); }
    .api-step-card { max-width: 100%; }
    .api-why-grid { grid-template-columns: 1fr; }
    .api-limits-grid { grid-template-columns: 1fr; }
    .api-tab-btn { padding: 8px 12px; font-size: 12px; }
    .api-seo-article { padding: 24px 16px; }
    .api-seo-article h2 { font-size: 18px; }
    .api-hero-url { flex-wrap: wrap; justify-content: center; }
    .api-method-header { padding: 14px 16px; }
    .api-method-body { padding: 0 16px 16px; }
}
@media (max-width: 480px) {
    .api-hero { padding: 24px 12px 36px; }
    .api-hero-title { font-size: 22px; }
    .api-hero-subtitle { font-size: 13px; }
    .api-quickstart, .api-methods, .api-code-examples,
    .api-seo-section, .api-profit, .api-why,
    .api-limits, .api-seo-detail, .api-faq, .api-keywords { padding-left: 10px; padding-right: 10px; }
    .api-seo-card { padding: 20px 16px; }
    .api-profit-card { padding: 20px 16px; }
    .api-code-block { font-size: 11px; padding: 14px; }
    .api-params-table th, .api-params-table td { padding: 8px 10px; font-size: 12px; }
}

/* --- API Light Mode --- */
[data-theme="light"] .api-code-block { background: #F6F8FA; color: #24292F; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .api-method-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .api-seo-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .api-profit-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .api-why-item { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .api-params-table code { background: rgba(220,38,38,0.06); }

/* ============================================
   SECTION 7: BLOG PAGE
   ============================================ */

.blog-page { max-width: 1200px; margin: 0 auto; width: 100%; }

/* --- Hero --- */
.blog-hero { padding: 40px 24px 32px; text-align: center; }
.blog-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--accent);
    font-size: 13px; font-weight: 600; margin-bottom: 16px;
    border: 1px solid var(--border-active);
}
.blog-hero-title { font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.blog-hero-subtitle { font-size: 15px; color: var(--text-secondary); line-height: 1.7; max-width: 600px; margin: 0 auto; }

/* --- Blog Intro --- */
.blog-intro { padding: 0 24px 32px; max-width: 800px; margin: 0 auto; }
.blog-intro-content {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px 28px;
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}

/* --- Two-Column Layout: Grid + Sidebar --- */
.blog-layout {
    display: grid; grid-template-columns: 1fr 300px; gap: 28px;
    padding: 0 24px 40px;
}
.blog-main { min-width: 0; }
.blog-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.blog-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: all var(--transition-base);
    display: flex; flex-direction: column;
}
.blog-card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card-img-wrap {
    display: block; height: 180px; overflow: hidden;
    background: var(--bg-card-hover);
}
.blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-card-img { transform: scale(1.05); }
.blog-card-no-img {
    display: flex; align-items: center; justify-content: center;
    font-size: 48px; color: var(--text-muted);
}
.blog-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-card-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; line-height: 1.4; }
.blog-card-title a { color: var(--text-primary); text-decoration: none; }
.blog-card-title a:hover { color: var(--accent); }
.blog-card-excerpt { font-size: 13px; color: var(--text-secondary); line-height: 1.6; flex: 1; margin-bottom: 16px; }

/* --- Card Footer: Read More + Share --- */
.blog-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--border); padding-top: 14px; margin-top: auto;
}
.blog-read-more {
    font-size: 13px; font-weight: 600; color: var(--accent);
    display: flex; align-items: center; gap: 4px;
    transition: gap var(--transition-fast);
}
.blog-read-more:hover { gap: 8px; color: var(--accent-hover); }

/* Share Row */
.blog-share-row { display: flex; gap: 4px; }
.blog-share-btn {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: none; color: var(--text-muted); font-size: 13px;
    cursor: pointer; transition: all var(--transition-fast); text-decoration: none;
}
.blog-share-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* --- Pagination --- */
.blog-pagination {
    display: flex; justify-content: center; gap: 6px;
    padding: 0 24px 40px;
}
.blog-page-btn {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-secondary); font-size: 14px; font-weight: 600;
    text-decoration: none; transition: all var(--transition-fast);
}
.blog-page-btn:hover { border-color: var(--accent); color: var(--accent); }
.blog-page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 3px 0 var(--accent-dark); }

/* --- Empty State --- */
.blog-empty {
    text-align: center; padding: 80px 24px; color: var(--text-muted);
}
.blog-empty i { font-size: 48px; margin-bottom: 16px; display: block; }
.blog-empty h3 { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.blog-empty p { font-size: 14px; }

/* --- Sidebar --- */
.blog-sidebar { position: sticky; top: 90px; align-self: start; }
.blog-sidebar-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
}
.blog-sidebar-title {
    font-size: 15px; font-weight: 700; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.blog-sidebar-title i { color: var(--accent); }

/* Recent Posts */
.blog-recent-list { display: flex; flex-direction: column; gap: 12px; }
.blog-recent-item {
    display: flex; gap: 10px; align-items: center;
    text-decoration: none; padding: 6px; border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.blog-recent-item:hover { background: var(--bg-card-hover); }
.blog-recent-img {
    width: 56px; height: 42px; flex-shrink: 0; border-radius: var(--radius-sm);
    object-fit: cover;
}
.blog-recent-no-img {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card-hover); color: var(--text-muted); font-size: 16px;
}
.blog-recent-title {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* Quick Links */
.blog-quick-links { display: flex; flex-direction: column; gap: 4px; }
.blog-quick-links a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
    text-decoration: none; transition: all var(--transition-fast);
}
.blog-quick-links a:hover { background: var(--bg-card-hover); color: var(--accent); }
.blog-quick-links a i { color: var(--accent); font-size: 14px; }

/* Sidebar Tags */
.blog-sidebar-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-sidebar-tags .keyword-tag { font-size: 11px; padding: 3px 10px; }

/* --- Single Post View (enhanced default template) --- */
.blog-post-enhanced {
    padding: 36px 40px !important; border-radius: var(--radius-lg) !important;
    width: 100%;
}
.blog-post-enhanced img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin-bottom: 20px; }
.blog-post-enhanced h1 { font-size: 28px; font-weight: 800; line-height: 1.3; margin-bottom: 8px; }
.blog-post-enhanced h2 { font-size: 22px; font-weight: 700; margin: 28px 0 12px; }
.blog-post-enhanced h3 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; }
.blog-post-enhanced p { font-size: 15px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 16px; max-width: 100%; }
.blog-post-enhanced ul, .blog-post-enhanced ol { padding-left: 24px; margin-bottom: 16px; }
.blog-post-enhanced li { margin-bottom: 8px; font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.blog-post-enhanced a { color: var(--accent); }
.blog-post-enhanced .blog-post-share {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 14px 0; margin: 16px 0 24px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
/* Blog post header (outside card) */
.blog-post-header-outer {
    max-width: 960px; margin: 0 auto; padding: 0 24px 20px;
}
.blog-post-header-outer .blog-back-btn { margin-bottom: 20px; display: inline-flex; }
.blog-post-feat-img {
    border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}
.blog-post-feat-img img {
    width: 100%; height: auto; display: block;
    max-height: 450px; object-fit: cover;
}
.blog-post-title-outer {
    font-size: 32px; font-weight: 800; line-height: 1.25;
    margin-bottom: 12px; color: var(--text-primary);
}
.blog-post-header-outer .blog-post-share {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 14px 0; margin-top: 4px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
@media (max-width: 768px) {
    .blog-post-header-outer { padding: 0 8px 16px; max-width: 100%; }
    .blog-post-title-outer { font-size: 24px; }
    .blog-post-feat-img { border-radius: var(--radius-md); }
    /* Override Bootstrap container for blog posts */
    .blog-post-enhanced { margin: 0 !important; }
    .main-content .container { width: 100% !important; padding: 0 8px !important; }
    .main-content .row { margin: 0 !important; }
    .main-content .col-md-12 { padding: 0 4px !important; }
}
@media (max-width: 480px) {
    .blog-post-header-outer { padding: 0 4px 10px; }
    .blog-post-title-outer { font-size: 20px; }
    .blog-post-feat-img img { max-height: 250px; }
}

/* Author meta injected by JS */
.blog-post-meta-js {
    display: flex; gap: 20px; flex-wrap: wrap;
    font-size: 13px; color: var(--text-muted); margin: 8px 0 4px;
}
.blog-post-meta-js span { display: flex; align-items: center; gap: 6px; }
.blog-post-meta-js i { color: var(--accent); font-size: 14px; }

/* Bottom section */
.blog-post-bottom { margin-top: 32px; border-top: 1px solid var(--border); padding-top: 24px; }
.blog-post-bottom-share p {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.blog-post-bottom-share .blog-post-share { padding: 0; border: none; margin-bottom: 32px; }

/* Recent posts grid */
.blog-recent-section h3 {
    font-size: 18px; font-weight: 700; margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.blog-recent-section h3 i { color: var(--accent); }
.blog-recent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 768px) {
    .blog-post-enhanced { padding: 20px 16px !important; border-radius: var(--radius-md) !important; }
    .blog-post-enhanced h1 { font-size: 22px; }
    .blog-post-enhanced h2 { font-size: 18px; }
    .blog-post-enhanced p { font-size: 14px; }
    .blog-recent-grid { grid-template-columns: 1fr; }
    .blog-post-meta-js { gap: 12px; font-size: 12px; }
    .blog-post-enhanced .blog-post-share { gap: 4px; }
}
@media (max-width: 480px) {
    .blog-post-enhanced { padding: 16px 12px !important; }
    .blog-post-enhanced h2 { font-size: 16px; }
    .blog-post-enhanced h3 { font-size: 15px; }
    .blog-post-enhanced p { font-size: 13px; }
}

/* --- Single Post View (custom template) --- */
.blog-post-nav { padding: 0 24px 16px; }
.blog-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 600; color: var(--text-secondary);
    text-decoration: none; padding: 8px 16px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}
.blog-back-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.blog-post-article {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.blog-post-header { padding: 32px 32px 0; }
.blog-post-title { font-size: 28px; font-weight: 800; line-height: 1.3; margin-bottom: 12px; }
.blog-post-meta {
    display: flex; gap: 20px; font-size: 13px; color: var(--text-muted);
    margin-bottom: 16px;
}
.blog-post-meta span { display: flex; align-items: center; gap: 6px; }
.blog-post-meta i { color: var(--accent); }

.blog-post-share {
    display: flex; gap: 6px; padding: 14px 32px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.blog-post-content {
    padding: 28px 32px;
    font-size: 15px; line-height: 1.8; color: var(--text-secondary);
}
.blog-post-content h2 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 28px 0 12px; }
.blog-post-content h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 24px 0 10px; }
.blog-post-content p { margin-bottom: 16px; max-width: 100%; }
.blog-post-content ul, .blog-post-content ol { padding-left: 24px; margin-bottom: 16px; }
.blog-post-content li { margin-bottom: 8px; }
.blog-post-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 16px 0; }
.blog-post-content a { color: var(--accent); text-decoration: underline; }
.blog-post-content blockquote {
    border-left: 4px solid var(--accent); padding: 12px 20px; margin: 16px 0;
    background: var(--accent-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic; color: var(--text-primary);
}

.blog-post-bottom-share {
    padding: 20px 32px 28px;
    border-top: 1px solid var(--border);
}
.blog-post-bottom-share p { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.blog-post-bottom-share .blog-post-share { padding: 0; border: none; }

/* --- SEO Content --- */
.blog-seo { padding: 40px 24px; max-width: 900px; margin: 0 auto; }
.blog-seo-article {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 36px 32px;
}
.blog-seo-article h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.blog-seo-article h3 { font-size: 17px; font-weight: 700; margin: 20px 0 10px; }
.blog-seo-article p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 14px; }

/* --- Keywords --- */
.blog-keywords { padding: 30px 24px 50px; text-align: center; }

/* --- Blog Responsive --- */
@media (max-width: 1024px) {
    .blog-layout { grid-template-columns: 1fr 260px; }
    .blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
    .blog-hero-title { font-size: 26px; }
    .blog-grid { max-width: 500px; margin: 0 auto; }
    .blog-seo-article { padding: 24px 16px; }
    .blog-seo-article h2 { font-size: 18px; }
    .blog-share-btn { width: 28px; height: 28px; font-size: 12px; }
    .blog-post-header { padding: 20px 16px 0; }
    .blog-post-title { font-size: 22px; }
    .blog-post-share { padding: 12px 16px; }
    .blog-post-content { padding: 20px 16px; font-size: 14px; }
    .blog-post-content h2 { font-size: 18px; }
    .blog-post-content h3 { font-size: 16px; }
    .blog-post-bottom-share { padding: 16px; }
}
@media (max-width: 480px) {
    .blog-hero { padding: 24px 12px 24px; }
    .blog-hero-title { font-size: 22px; }
    .blog-posts { padding: 0 10px 30px; }
    .blog-grid { max-width: 100%; }
    .blog-card-body { padding: 16px; }
    .blog-card-title { font-size: 15px; }
    .blog-seo { padding: 30px 10px; }
    .blog-keywords { padding: 20px 10px 40px; }
}

/* --- Blog Light Mode --- */
[data-theme="light"] .blog-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .blog-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
[data-theme="light"] .blog-seo-article { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .blog-card-no-img { background: #F3F4F8; }

/* ============================================
   SECTION 8: FAQ PAGE
   ============================================ */

.faq-page { max-width: 1100px; margin: 0 auto; width: 100%; }

/* Hero */
.faq-hero { padding: 40px 24px 32px; text-align: center; }
.faq-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--accent);
    font-size: 13px; font-weight: 600; margin-bottom: 16px;
    border: 1px solid var(--border-active);
}
.faq-hero-title { font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.faq-hero-subtitle { font-size: 15px; color: var(--text-secondary); line-height: 1.7; max-width: 600px; margin: 0 auto 24px; }
.faq-search-box {
    max-width: 500px; margin: 0 auto; position: relative;
}
.faq-search-box i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; }
.faq-search-input {
    width: 100%; padding: 14px 16px 14px 44px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); color: var(--text-primary);
    font-family: var(--font); font-size: 15px;
    transition: border-color var(--transition-fast);
}
.faq-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.faq-search-input::placeholder { color: var(--text-muted); }

/* Category Cards */
.faq-categories { padding: 0 24px 32px; }
.faq-cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.faq-cat-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 18px 12px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); text-decoration: none;
    transition: all var(--transition-fast); cursor: pointer;
}
.faq-cat-card:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.faq-cat-card i { font-size: 22px; color: var(--accent); }
.faq-cat-card span { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.faq-cat-card:hover span { color: var(--accent); }

/* Admin FAQ Content — no extra card wrapper to avoid card-in-card */
.faq-admin-content { padding: 0 24px 32px; }
.faq-content-wrap {
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}
.faq-content-wrap .well,
.faq-content-wrap .panel {
    background: var(--bg-card) !important; border-color: var(--border) !important;
    border-radius: var(--radius-md) !important;
}

/* FAQ Sections */
.faq-section { padding: 0 24px 32px; }
.faq-section-title {
    font-size: 20px; font-weight: 700; margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.faq-section-title i { color: var(--accent); font-size: 20px; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
    transition: border-color var(--transition-fast);
}
.faq-item[open] { border-color: var(--border-active); }
.faq-q {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; font-size: 14px; font-weight: 600;
    color: var(--text-primary); cursor: pointer; list-style: none;
    transition: color var(--transition-fast);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q i { color: var(--accent); font-size: 16px; transition: transform var(--transition-base); flex-shrink: 0; }
.faq-item[open] .faq-q i { transform: rotate(45deg); }
.faq-q:hover { color: var(--accent); }
.faq-a {
    padding: 0 20px 18px 46px;
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}
.faq-a a { color: var(--accent); text-decoration: underline; }

/* CTA */
.faq-cta { padding: 20px 24px 40px; }
.faq-cta-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 40px 32px;
    text-align: center;
}
.faq-cta-card h2 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.faq-cta-card p { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; }
.faq-cta-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* SEO */
.faq-seo { padding: 0 24px 40px; max-width: 900px; margin: 0 auto; }
.faq-seo-article {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px;
}
.faq-seo-article h2 { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.faq-seo-article h3 { font-size: 17px; font-weight: 700; margin: 20px 0 10px; }
.faq-seo-article p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; }

/* Keywords */
.faq-keywords { padding: 20px 24px 50px; text-align: center; }

/* Responsive */
@media (max-width: 768px) {
    .faq-page { padding: 0; }
    .faq-hero-title { font-size: 26px; }
    .faq-cat-grid { grid-template-columns: repeat(3, 1fr); }
    .faq-hero, .faq-categories, .faq-section, .faq-admin-content,
    .faq-cta, .faq-seo, .faq-keywords { padding-left: 8px; padding-right: 8px; }
    .faq-q { padding: 14px 16px; font-size: 13px; }
    .faq-a { padding: 0 16px 14px 36px; font-size: 13px; }
    .faq-cta-card { padding: 28px 16px; }
    .faq-seo-article { padding: 20px 14px; }
    .faq-item { border-radius: var(--radius-sm); }
}
@media (max-width: 480px) {
    .faq-hero-title { font-size: 22px; }
    .faq-hero-subtitle { font-size: 13px; }
    .faq-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .faq-cat-card { padding: 12px 6px; }
    .faq-cat-card i { font-size: 18px; }
    .faq-cat-card span { font-size: 10px; }
    .faq-section-title { font-size: 17px; }
    .faq-cta-card h2 { font-size: 20px; }
    .faq-seo-article h2 { font-size: 17px; }
}

/* Light Mode */
[data-theme="light"] .faq-item { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .faq-cat-card { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
[data-theme="light"] .faq-search-input { background: #fff; }
[data-theme="light"] .faq-cta-card { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .faq-seo-article { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }

/* ============================================
   SECTION 9: NEW ORDER PAGE
   ============================================ */

/* Stats Bar */
.no-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.no-stat-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 14px 16px;
    transition: all var(--transition-fast);
}
.no-stat-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.no-stat-icon {
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent); font-size: 18px;
    border-radius: var(--radius-md); flex-shrink: 0;
}
.no-stat-icon-active { background: rgba(34,197,94,0.1); color: var(--success); }
.no-stat-icon-balance { background: rgba(59,130,246,0.1); color: var(--info); }
.no-stat-info { display: flex; flex-direction: column; }
.no-stat-value { font-size: 17px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.no-stat-label { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }
.no-stat-balance { position: relative; }
.no-add-funds-3d {
    position: absolute; bottom: 6px; right: 6px;
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 5px;
    background: linear-gradient(135deg, #e53935, #c62828);
    color: #fff; font-size: 14px; font-weight: 900; text-decoration: none; line-height: 1;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(198,40,40,0.4), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 2px rgba(0,0,0,0.15);
    transition: transform 0.15s, box-shadow 0.15s;
}
.no-add-funds-3d::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: tagShine 3s ease-in-out infinite; pointer-events: none;
}
@keyframes addFundsShine { 0%,100%{left:-100%} 50%{left:150%} }
.no-add-funds-3d:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(198,40,40,0.5); }
.no-add-funds-3d:active { transform: scale(0.95); }
[data-theme="light"] .no-add-funds-3d { box-shadow: 0 3px 8px rgba(198,40,40,0.25), inset 0 1px 0 rgba(255,255,255,0.3); }

/* Quick Actions */
.no-quick-actions { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.no-qa-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-full);
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
    text-decoration: none; transition: all var(--transition-fast);
}
.no-qa-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.no-qa-btn i { font-size: 14px; }
.no-qa-accent { background: var(--accent-soft); color: var(--accent); border-color: var(--border-active); }
.no-qa-accent:hover { background: var(--accent); color: #fff; }

/* Alerts */
.no-alert {
    display: flex; gap: 16px; padding: 20px 24px;
    border-radius: var(--radius-lg); margin-bottom: 20px;
    align-items: flex-start;
}
.no-alert-icon {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); font-size: 22px; flex-shrink: 0;
}
.no-alert-error { background: var(--error-bg); border: 1px solid rgba(239,68,68,0.2); }
.no-alert-error .no-alert-icon { background: rgba(239,68,68,0.15); color: var(--error); }
.no-alert-error .no-alert-body strong { color: var(--error); }
.no-alert-error .no-alert-body p { color: var(--text-secondary); font-size: 13px; margin: 4px 0 0; }
.no-alert-success { background: var(--success-bg); border: 1px solid rgba(34,197,94,0.2); }
.no-alert-success .no-alert-icon { background: rgba(34,197,94,0.15); color: var(--success); }
.no-alert-body { flex: 1; }
.no-alert-body strong { display: block; font-size: 15px; margin-bottom: 12px; color: var(--success); }
.no-success-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.no-success-item {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 6px 12px; background: rgba(255,255,255,0.04);
    border-radius: var(--radius-sm); font-size: 13px;
}
.no-success-item span { color: var(--text-muted); }
.no-success-item strong { color: var(--text-primary); text-align: right; }
.no-link-truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
/* Receipt — compact myfame style */
.no-receipt-card {
    border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px;
    border: 1px solid rgba(34,197,94,0.15);
}
.no-receipt-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer;
    background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04));
}
.no-receipt-check {
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    background: var(--success); color: #fff; border-radius: 50%;
    font-size: 13px; flex-shrink: 0;
}
.no-receipt-title { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.no-receipt-title strong { font-size: 13px; color: var(--success); }
.no-receipt-title span { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.no-dl-icon { color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 4px; transition: color var(--transition-fast); }
.no-dl-icon:hover { color: var(--success); }
.no-receipt-toggle { color: var(--success); font-size: 18px; transition: transform var(--transition-base); }
.no-receipt-card.expanded .no-receipt-toggle { transform: rotate(180deg); }

.no-receipt-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.no-receipt-card.expanded .no-receipt-body { max-height: 500px; }

.no-receipt-rows { padding: 8px 14px; font-size: 13px; line-height: 1.9; }
.no-receipt-row span { color: var(--text-muted); }
.no-receipt-row strong { color: var(--text-primary); }
.no-receipt-accent strong { color: var(--accent) !important; font-weight: 800; }

.no-receipt-actions { display: flex; gap: 8px; padding: 4px 14px 10px; }
.no-receipt-actions .btn { font-size: 12px; padding: 5px 12px; }

@media (max-width: 480px) {
    .no-receipt-actions { flex-direction: column; }
    .no-receipt-actions .btn { width: 100%; justify-content: center; }
}

/* Main Layout */
.no-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }

/* Form Card */
.no-form-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
/* Step Indicators */
.no-steps {
    display: flex; align-items: center; justify-content: center;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--accent-soft), transparent);
    gap: 0;
}
.no-step {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    opacity: 0.4; transition: all var(--transition-base);
}
.no-step.active { opacity: 1; }
.no-step.current .no-step-dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-glow); }
.no-step-dot {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 12px; font-weight: 800;
    background: var(--bg-card-hover); color: var(--text-muted);
    border: 2px solid var(--border); transition: all var(--transition-base);
}
.no-step.active .no-step-dot { background: var(--success); color: #fff; border-color: var(--success); }
.no-step span { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.no-step.active span { color: var(--text-primary); }
.no-step-line {
    width: 40px; height: 2px; background: var(--border);
    margin: 0 8px 14px; transition: background var(--transition-base);
}
.no-step.active + .no-step-line { background: var(--success); }

#order-form { padding: 24px; }

/* Search */
.no-search-wrap { position: relative; margin-bottom: 20px; }
.neworder-search {
    display: none; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--accent); font-size: 16px; z-index: 2;
}
.no-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; z-index: 1; }
.no-search-input { padding-left: 42px !important; }
.no-search-error { font-size: 12px; color: var(--error); margin-top: 4px; }

/* Search Suggestions */
.no-suggestions {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-lg); z-index: 50; max-height: 280px; overflow-y: auto;
}
.no-sug-item {
    padding: 10px 14px; font-size: 13px; color: var(--text-secondary);
    cursor: pointer; border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}
.no-sug-item:last-child { border-bottom: none; }
.no-sug-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.no-sug-item mark { background: rgba(220,38,38,0.15); color: var(--accent); border-radius: 2px; padding: 0 2px; }

/* Fields */
.no-field { margin-bottom: 18px; }
.no-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    margin-bottom: 6px;
}
.no-label i { color: var(--accent); font-size: 14px; }

/* Simple Custom Dropdown */
.no-dd { position: relative; width: 100%; }
.no-dd-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-md); color: var(--text-primary);
    font-size: 14px; transition: border-color var(--transition-fast);
}
.no-dd-btn:hover { border-color: var(--border-hover); }
.no-dd.open .no-dd-btn { border-color: var(--border-hover); box-shadow: 0 0 0 2px rgba(255,255,255,0.04); }
.no-dd-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-dd-chev { color: var(--text-muted); font-size: 12px; transition: transform var(--transition-fast); }
.no-dd.open .no-dd-chev { transform: rotate(180deg); }
.no-cat-img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; vertical-align: middle; }
.no-dd-ico {
    display: inline-flex; align-items: center; font-size: 16px; flex-shrink: 0;
    transition: transform 0.3s ease;
}
.no-dd-ico i { font-size: 14px; display: inline-block; }
.no-svc-id {
    display: inline-flex; transition: transform 0.3s ease;
}

/* Service dropdown — icon float animation */
.no-svc-id { animation: badgePulse 2.5s ease-in-out infinite; }

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

/* Category — bounce on select */
.no-dd-opt.active .no-dd-ico { animation: iconSelect 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes iconSelect {
    0% { transform: scale(1); }
    40% { transform: scale(1.35) rotate(-10deg); }
    70% { transform: scale(0.9) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}
.no-cat-img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
.no-dd-list {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); z-index: 100;
    box-shadow: var(--shadow-lg); max-height: 300px; overflow-y: auto;
    padding: 4px 0;
}
.no-dd.open .no-dd-list { display: block; }
.no-dd-opt {
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    padding: 9px 14px; font-size: 13px; color: var(--text-secondary);
    cursor: pointer; transition: background var(--transition-fast);
}
.no-dd-opt:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.no-dd-opt:hover .no-dd-ico { transform: scale(1.15) rotate(-5deg); }
.no-dd-opt:hover .no-svc-id { transform: scale(1.15); }
.no-dd-opt.active {
    color: var(--text-primary); font-weight: 600;
    background: var(--bg-card-hover);
    border-left: 3px solid var(--accent);
}
.no-dd-opt.active .no-svc-rate { color: var(--success); }
/* Dropdown option text */
.no-dd-optxt { flex: 1; line-height: 1.4; word-break: break-word; position: relative; z-index: 1; }

/* Country flag background */
.no-dd-opt { position: relative; overflow: hidden; }
.no-has-flag { position: relative; }
.no-has-flag::before {
    content: ''; position: absolute; inset: 0;
    background: var(--bg-card); opacity: 0.9;
    z-index: 0;
}
.no-has-flag .no-dd-ico,
.no-has-flag .no-dd-optxt,
.no-has-flag .no-svc-id,
.no-has-flag .no-svc-rate { position: relative; z-index: 1; }
[data-theme="light"] .no-has-flag::before { background: #fff; opacity: 0.85; }
.no-svc-id {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; padding: 1px 6px;
    background: var(--accent); color: #fff; border-radius: var(--radius-full);
    font-size: 10px; font-weight: 700; margin-right: 2px;
}
.no-svc-rate { color: var(--accent); font-weight: 800; }

.no-dd-list::-webkit-scrollbar { width: 5px; }
.no-dd-list::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }

/* Dynamic fields from panel JS */
.no-dynamic-fields .form-group { margin-bottom: 16px; }
.no-dynamic-fields label { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: block; }
.no-dynamic-fields .help-block { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Charge */
.no-charge-wrap {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; margin: 16px 0;
    background: var(--accent-soft); border: 1px solid var(--border-active);
    border-radius: var(--radius-md);
}
.no-charge-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.no-charge-value { font-size: 18px; font-weight: 800; color: var(--accent); }
.no-charge-value:empty::after { content: '—'; color: var(--text-muted); font-size: 14px; }

/* Terms */
.no-terms { margin-bottom: 20px; }
.no-terms-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.no-terms-label input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--accent);
}
.no-terms-label a { color: var(--accent); text-decoration: underline; }

/* Submit */
.no-submit-btn {
    width: 100%; padding: 14px 24px !important;
    font-size: 16px !important; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.no-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.no-submit-text, .no-submit-loading { display: inline-flex; align-items: center; gap: 8px; }
@keyframes noSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.no-spin { animation: noSpin 0.8s linear infinite; }

/* ── Service Description ── */
#service_description:not(.no-svc-parsed) { color: transparent !important; font-size: 0 !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
#service_description:not(.no-svc-parsed) * { display: none !important; }
.no-svc-desc { margin: 14px 0; }

/* Tags — compact pills with icon circles */
.no-dtags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.no-dtag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 4px; border-radius: 20px; font-size: 11px; font-weight: 600;
    background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    color: #e0e0e0;
}
.no-dtag i {
    width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 11px; flex-shrink: 0;
}
.no-dtag-premium { color: #ffd54f; } .no-dtag-premium i { background: rgba(255,193,7,0.2); color: #ffc107; }
.no-dtag-non-drop { color: #69f0ae; } .no-dtag-non-drop i { background: rgba(0,200,83,0.2); color: #00c853; }
.no-dtag-admin-sug { color: #90caf9; } .no-dtag-admin-sug i { background: rgba(33,150,243,0.2); color: #42a5f5; }
.no-dtag-refill-notif { color: #ce93d8; } .no-dtag-refill-notif i { background: rgba(156,39,176,0.2); color: #ab47bc; }
.no-dtag-best-quality { color: #ffcc80; } .no-dtag-best-quality i { background: rgba(255,152,0,0.2); color: #ff9800; }
.no-dtag-super-fast { color: #ef9a9a; } .no-dtag-super-fast i { background: rgba(244,67,54,0.2); color: #f44336; }
.no-dtag-instant { color: #fff59d; } .no-dtag-instant i { background: rgba(255,235,59,0.15); color: #ffeb3b; }
.no-dtag-hot { color: #ff8a65; } .no-dtag-hot i { background: rgba(255,87,34,0.2); color: #ff5722; }
.no-dtag-recommended { color: #80cbc4; } .no-dtag-recommended i { background: rgba(0,150,136,0.2); color: #26a69a; }
.no-dtag-default { color: #b0b0b0; } .no-dtag-default i { background: rgba(255,255,255,0.08); color: #9e9e9e; }

/* Description label */
.no-dlabel { font-size: 12px; font-weight: 500; color: #aaa; margin-bottom: 8px; letter-spacing: 0.3px; }

/* Cards — always 1 row, auto-fit all screens */
.no-dcards { display: flex; gap: 6px; margin-bottom: 10px; }
.no-dcard {
    flex: 1 1 0; min-width: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 10px;
}
.no-dcard-head {
    font-size: 9px; color: #aaa; margin-bottom: 3px;
    display: flex; align-items: center; gap: 3px; text-transform: uppercase; letter-spacing: 0.4px;
}
.no-dcard-head i { color: var(--accent); font-size: 11px; }
.no-dcard-val { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Alert banner — 3D golden */
.no-dalert {
    background: linear-gradient(135deg, #d4a017 0%, #f0c040 40%, #e6a810 70%, #c8920e 100%);
    border: 1px solid rgba(255,215,0,0.4);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 10px;
    font-size: 12px; font-weight: 700; color: #2a1800; line-height: 1.5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 3px rgba(0,0,0,0.15);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

/* Details table rows */
.no-ddetails {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; overflow: hidden; margin-bottom: 10px;
}
.no-ddetail {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 12px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.no-ddetail:last-child { border-bottom: none; }
.no-ddetail span { color: #aaa; display: flex; align-items: center; gap: 6px; }
.no-ddetail span i { color: var(--accent); font-size: 13px; }
.no-ddetail strong { color: #fff; font-weight: 600; }

/* Notes box — red accent border */
.no-dnotes {
    padding: 10px 12px; font-size: 11px; line-height: 1.6;
    color: #ccc; border-left: 3px solid var(--accent);
    background: rgba(230,57,70,0.06); border-radius: 0 8px 8px 0;
    word-break: break-word;
}
.no-dnotes b, .no-dnotes strong { color: #fff; }

/* Responsive — compact on mobile */
@media (max-width: 480px) {
    .no-dtag { font-size: 10px; padding: 3px 8px 3px 3px; }
    .no-dtag i { width: 18px; height: 18px; font-size: 9px; }
    .no-dcard { padding: 6px 8px; }
    .no-dcard-head { font-size: 8px; }
    .no-dcard-val { font-size: 11px; }
    .no-ddetail { padding: 7px 10px; font-size: 11px; }
    .no-dalert { font-size: 11px; padding: 6px 10px; }
    .no-dnotes { font-size: 10px; padding: 8px 10px; }
}

/* Light mode — description visibility */
[data-theme="light"] .no-dtag { background: linear-gradient(145deg, #fff, #f0f0f3); border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 5px rgba(0,0,0,0.08), inset 0 1px 0 #fff; color: #333; }
[data-theme="light"] .no-dtag-premium { color: #b8860b; } [data-theme="light"] .no-dtag-premium i { background: rgba(255,193,7,0.15); color: #b8860b; }
[data-theme="light"] .no-dtag-non-drop { color: #2e7d32; } [data-theme="light"] .no-dtag-non-drop i { background: rgba(76,175,80,0.15); color: #2e7d32; }
[data-theme="light"] .no-dtag-admin-sug { color: #1565c0; } [data-theme="light"] .no-dtag-admin-sug i { background: rgba(33,150,243,0.15); color: #1565c0; }
[data-theme="light"] .no-dtag-refill-notif { color: #7b1fa2; } [data-theme="light"] .no-dtag-refill-notif i { background: rgba(156,39,176,0.15); color: #7b1fa2; }
[data-theme="light"] .no-dtag-best-quality { color: #e65100; } [data-theme="light"] .no-dtag-best-quality i { background: rgba(255,152,0,0.15); color: #e65100; }
[data-theme="light"] .no-dtag-super-fast { color: #c62828; } [data-theme="light"] .no-dtag-super-fast i { background: rgba(244,67,54,0.15); color: #c62828; }
[data-theme="light"] .no-dtag-default { color: #555; } [data-theme="light"] .no-dtag-default i { background: rgba(0,0,0,0.06); color: #666; }
[data-theme="light"] .no-dcard { background: #f5f5f8; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .no-dcard-head { color: #666; }
[data-theme="light"] .no-dcard-head i { color: var(--accent); }
[data-theme="light"] .no-dcard-val { color: #111; }
[data-theme="light"] .no-ddetails { background: #f5f5f8; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .no-ddetail { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .no-ddetail span { color: #666; }
[data-theme="light"] .no-ddetail span i { color: var(--accent); }
[data-theme="light"] .no-ddetail strong { color: #111; }
[data-theme="light"] .no-dalert { background: linear-gradient(135deg, #f9a825, #e6960a); color: #3e2700; box-shadow: 0 2px 8px rgba(255,152,0,0.2); font-weight: 700; }
[data-theme="light"] .no-dnotes { background: rgba(230,57,70,0.06); border-left-color: var(--accent); color: #333; }
[data-theme="light"] .no-dnotes b, [data-theme="light"] .no-dnotes strong { color: #000; }
[data-theme="light"] .no-dlabel { color: #555; }
[data-theme="light"] .no-svc-desc { color: #333; }

/* Layout — full width (no sidebar) */
.no-layout { grid-template-columns: 1fr !important; }

/* Responsive */
@media (max-width: 768px) {
    .no-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .no-stat-card { padding: 12px 14px; }
    .no-stat-value { font-size: 16px; }
    #order-form { padding: 16px; }
    .no-success-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .no-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
    .no-stat-card { padding: 10px 12px; gap: 10px; }
    .no-stat-card > i { font-size: 20px; }
    .no-stat-value { font-size: 14px; }
    .no-stat-label { font-size: 10px; }
    .no-form-header { padding: 14px 16px; }
    .no-form-title { font-size: 16px; }
    #order-form { padding: 14px; }
}

/* Light Mode */
[data-theme="light"] .no-form-card { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .no-stat-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .no-success-item { background: rgba(0,0,0,0.03); }

/* ============================================
   SECTION 10: LIGHT MODE OVERRIDES
   ============================================ */

/* --- Bootstrap overrides for light mode --- */
[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(0,0,0,0.02); }
[data-theme="light"] .form-control { background: #F3F4F8 !important; border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .form-control:focus { border-color: var(--accent) !important; }
[data-theme="light"] .form-control::placeholder { color: #9CA3AF; }
[data-theme="light"] .btn-default { background: #fff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .btn-default:hover { background: #F5F6FA; border-color: rgba(0,0,0,0.15); }

/* --- Signin page light mode --- */
[data-theme="light"] .signin-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);
}
[data-theme="light"] .signin-card::before { background: var(--accent); }
[data-theme="light"] .signin-input-icon { color: var(--text-muted); }
[data-theme="light"] .signin-divider-line { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent); }

/* --- Google button light mode --- */
[data-theme="light"] .btn-google {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.12);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="light"] .btn-google:hover {
    background: #F8F9FA;
    border-color: rgba(0,0,0,0.18);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
[data-theme="light"] .btn-google:active { box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
[data-theme="light"] .btn-google::before {
    background: linear-gradient(90deg, transparent, rgba(220,38,38,0.06), transparent);
}
[data-theme="light"] .btn-google::after {
    box-shadow: 0 0 0 3px rgba(220,38,38,0.08);
}

/* --- Hero section light mode --- */
[data-theme="light"] .hero-stat-value { color: var(--accent); }
[data-theme="light"] .hero-stat-label { color: var(--text-secondary); }

/* --- Trust / feature sections light mode --- */
[data-theme="light"] .trust-icon-box {
    background: #F8F9FA;
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .mini-card {
    background: #F8F9FA;
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .mini-card-icon { color: var(--accent); }

/* --- Blog / SEO article cards light mode --- */
[data-theme="light"] .blog-card,
[data-theme="light"] .article-card {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="light"] .blog-card:hover,
[data-theme="light"] .article-card:hover {
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* --- FAQ section light mode --- */
[data-theme="light"] .faq-item {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .faq-question { color: var(--text-primary); }
[data-theme="light"] .faq-answer { color: var(--text-secondary); }

/* --- Comparison / pricing tables light mode --- */
[data-theme="light"] .compare-table th {
    background: #F8F9FA;
    color: var(--text-primary);
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .compare-table td {
    border-color: rgba(0,0,0,0.06);
}

/* --- Testimonial cards light mode --- */
[data-theme="light"] .testimonial-card {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.06);
}

/* --- Signup page light mode --- */
[data-theme="light"] .signup-card {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);
}
[data-theme="light"] .signup-card::before { background: var(--accent); }

/* --- Reset password page light mode --- */
[data-theme="light"] .reset-card {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* --- Services page light mode --- */
[data-theme="light"] .svc-acc-header {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .svc-acc-header:hover {
    background: #F8F9FA;
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .svc-category.open .svc-acc-header {
    background: #F8F9FA;
    border-color: rgba(220,38,38,0.2);
}
[data-theme="light"] .svc-body {
    background: #FAFBFD;
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .svc-row {
    border-bottom-color: rgba(0,0,0,0.04);
}
[data-theme="light"] .svc-row:hover {
    background: rgba(220,38,38,0.02);
}
[data-theme="light"] .svc-id-badge {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
}
[data-theme="light"] .svc-rate-big {
    background: rgba(220,38,38,0.06);
    border-color: rgba(220,38,38,0.15);
}
[data-theme="light"] .svc-search-input {
    background: #FFFFFF !important;
    border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .svc-category-select {
    background: #FFFFFF !important;
    border-color: rgba(0,0,0,0.1) !important;
}

/* --- Delivery tags light mode: keep colorful gradients, soften shadows --- */
[data-theme="light"] .dt-avg { box-shadow: 0 2px 0 rgba(21,128,61,0.4); }
[data-theme="light"] .dt-success { box-shadow: 0 2px 0 rgba(29,78,216,0.4); }
[data-theme="light"] .dt-speed { box-shadow: 0 2px 0 rgba(180,83,9,0.4); }
[data-theme="light"] .dt-drop { box-shadow: 0 2px 0 rgba(185,28,28,0.4); }

/* --- Keyword tags light mode --- */
[data-theme="light"] .keyword-tag {
    background: #F3F4F8;
    border-color: rgba(0,0,0,0.06);
    color: var(--text-secondary);
}

/* --- 3D button light mode adjustments --- */
[data-theme="light"] .btn-3d {
    box-shadow: 0 4px 0 #B91C1C, 0 2px 8px rgba(220,38,38,0.15);
}
[data-theme="light"] .btn-3d:hover {
    box-shadow: 0 4px 0 #B91C1C, 0 4px 16px rgba(220,38,38,0.2);
}
[data-theme="light"] .btn-3d:active {
    box-shadow: 0 2px 0 #B91C1C;
}