/* ====================================================
   1. FONTS IMPORT & NATIVE TRIAL OVERRIDE
   ==================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@300;400;500;600;700&display=swap');

@font-face {
    font-family: 'GT Eesti Text Custom';
    src: url('/wp-content/plugins/smart-student-dashboard/assets/fonts/GT-Eesti-Text-Light-Trial.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*, body, html, h1, h2, h3, h4, h5, h6,
.ssd-dashboard-container, .ssd-sidebar, .ssd-main-content, p, label, li, td, th {
    font-family: 'GT Eesti Text Custom', 'Noto Sans Sinhala', sans-serif !important;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box !important;
}

/* FontAwesome Icons Protection */
.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

/* ====================================================
   2. ORIGINAL DARK THEME VARIABLES
   ==================================================== */
:root {
    --ssd-original-bg: #111827; /* Original dark background */
    --ssd-glass-bg-base: rgba(31, 41, 55, 0.75); /* Sidebar box background */
    --ssd-glass-border-base: rgba(255, 255, 255, 0.08); /* Sidebar box border */
    --ssd-glass-shadow-base: 0 10px 30px rgba(0, 0, 0, 0.6); 
    
    --ssd-sidebar-width: 280px; 
    --ssd-box-spacing: 20px; 
    --ssd-box-border-radius: 20px; 
    
    --ssd-text-primary: #e5e7eb;
    --ssd-text-secondary: #9ca3af;
    --ssd-accent-color: #38bdf8;
    
    /* Skeleton & Card Variables (Dark Mode Base) */
    --skel-card-bg: #1f2937;
    --skel-base-color: #2a3447;
    --skel-highlight-color: #3b4863;
    --skel-border-color: rgba(255, 255, 255, 0.05);
}

/* Light Mode Override for Skeleton & Cards */
body.light-mode {
    --skel-card-bg: #ffffff;
    --skel-base-color: #e2e8f0;
    --skel-highlight-color: #f1f5f9;
    --skel-border-color: #cbd5e1;
    --ssd-text-primary: #0f172a;
    --ssd-text-secondary: #475569;
}

body {
    background-color: var(--ssd-original-bg);
    color: var(--ssd-text-primary);
    margin: 0;
    overflow: hidden !important; /* Double Scrollbar Fix */
    height: 100vh !important;
    width: 100vw !important;
}

html {
    overflow: hidden !important; /* Double Scrollbar Fix */
}

/* ====================================================
   3. HYBRID LAYOUT (Floating Sidebar + Transparent Content)
   ==================================================== */
.ssd-dashboard-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: var(--ssd-original-bg) !important;
    z-index: 999;
    overflow: hidden !important;
    display: flex;
}

/* Left: Floating Sidebar Box */
.ssd-sidebar {
    position: fixed !important;
    top: var(--ssd-box-spacing);
    left: var(--ssd-box-spacing);
    bottom: var(--ssd-box-spacing);
    width: var(--ssd-sidebar-width) !important;
    height: calc(100vh - 2 * var(--ssd-box-spacing)) !important;
    
    background: var(--ssd-glass-bg-base) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid var(--ssd-glass-border-base) !important;
    border-radius: var(--ssd-box-border-radius) !important;
    box-shadow: var(--ssd-glass-shadow-base) !important;
    
    padding: 20px !important;
    overflow-y: auto !important;
    margin: 0 !important;
    z-index: 1000;
    box-sizing: border-box !important;
}

.ssd-sidebar > div,
.ssd-sidebar > ul {
    margin-bottom: 0 !important;
}

/* Right: Transparent Content Area */
.ssd-main-content, .ssd-content-area-box {
    position: fixed !important;
    top: 0 !important;
    left: calc(var(--ssd-sidebar-width) + 2 * var(--ssd-box-spacing));
    bottom: 0 !important;
    right: 0 !important;
    
    background: transparent !important; 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important; 
    border-radius: 0 !important;
    box-shadow: none !important;
    
    padding: 40px var(--ssd-box-spacing) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100vh !important;
    z-index: 999;
    box-sizing: border-box !important;
}

/* Double Scrollbar Fix for inner elements */
.tab-content, .tab-pane, .ssd-tab-content, .ssd-tab-panel, .ssd-content-inner {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* ====================================================
   4. SKELETON LOADING UI (Dynamic Theme Support)
   ==================================================== */
.ssd-skeleton {
    background: var(--skel-base-color);
    background-image: linear-gradient(90deg, var(--skel-base-color) 0px, var(--skel-highlight-color) 40px, var(--skel-base-color) 80px);
    background-size: 200% 100%;
    animation: ssd-shimmer 1.5s infinite linear;
    border-radius: 8px;
}

.skel-card {
    background: var(--skel-card-bg);
    border: 1px solid var(--skel-border-color);
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 20px;
    transition: background 0.3s ease, border 0.3s ease;
}

@keyframes ssd-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skel-header { display: flex; gap: 15px; margin-bottom: 15px; align-items: center; }
.skel-avatar { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; }
.skel-title-area { flex-grow: 1; }
.skel-title { width: 40%; height: 18px; margin-bottom: 8px; }
.skel-subtitle { width: 20%; height: 12px; }
.skel-body-text { width: 100%; height: 14px; margin-bottom: 8px; }
.skel-body-text.short { width: 70%; }
.skel-image { width: 100%; height: 200px; margin-top: 15px; border-radius: 12px; }

/* ====================================================
   5. FACEBOOK UI DESIGN (Tab My Profile)
   ==================================================== */
.ssd-fb-profile-view {
    width: 100%;
    margin-bottom: 25px;
}

.ssd-fb-profile-view h1 {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--ssd-text-primary) !important;
    margin: 10px 0 5px 0 !important;
}

.ssd-post-card, .ssd-card {
    background: var(--skel-card-bg) !important;
    border: 1px solid var(--skel-border-color) !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden;
    width: 100%;
}

.ssd-post-header {
    display: flex !important;
    align-items: center !important;
    padding: 16px !important;
    gap: 12px;
    border-bottom: 1px solid var(--skel-border-color);
}

.ssd-post-header img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover;
}

.ssd-user-name {
    font-weight: 700 !important;
    color: var(--ssd-text-primary) !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    line-height: 1.2;
}

.ssd-post-time {
    font-size: 0.75rem !important;
    color: var(--ssd-text-secondary) !important;
    margin-top: 2px !important;
    display: block !important;
}

.ssd-post-content-area {
    padding: 0 16px 16px 16px !important;
}

.ssd-post-excerpt {
    color: var(--ssd-text-primary) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    padding: 12px 0 !important;
    display: block !important;
}

.ssd-read-more-link {
    color: var(--ssd-accent-color) !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    text-decoration: none;
    margin-left: 5px;
    display: inline-block;
}

.ssd-post-img-container {
    width: 100%;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
}

.ssd-post-img-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.ssd-user-name .ssd-verified-badge-wrap, 
.ssd-user-name svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--ssd-accent-color);
}

/* ====================================================
   6. MODERN SCROLLBAR STYLES
   ==================================================== */
/* Chrome, Safari, Edge */
.ssd-sidebar::-webkit-scrollbar,
.ssd-main-content::-webkit-scrollbar,
.ssd-content-area-box::-webkit-scrollbar {
    width: 6px;
}

.ssd-sidebar::-webkit-scrollbar-track,
.ssd-main-content::-webkit-scrollbar-track,
.ssd-content-area-box::-webkit-scrollbar-track {
    background: transparent;
}

.ssd-sidebar::-webkit-scrollbar-thumb,
.ssd-main-content::-webkit-scrollbar-thumb,
.ssd-content-area-box::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 10px;
}

.ssd-sidebar::-webkit-scrollbar-thumb:hover,
.ssd-main-content::-webkit-scrollbar-thumb:hover,
.ssd-content-area-box::-webkit-scrollbar-thumb:hover {
    background-color: var(--ssd-accent-color);
}

/* Firefox */
.ssd-main-content, .ssd-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

/* ====================================================
   7. MOBILE RESPONSIVE LAYOUT
   ==================================================== */
@media (max-width: 1024px) {
    .ssd-sidebar {
        transform: translateX(-120%);
        transition: transform 0.3s ease;
    }
    
    .ssd-sidebar.open {
        transform: translateX(0);
    }
    
    .ssd-main-content, .ssd-content-area-box {
        left: 0 !important; 
        width: 100vw !important;
        padding: 20px !important;
        padding-top: 80px !important; /* Mobile header spacing */
    }
}

/* ===================================================
   PROFILE UI FIXES (Desktop & Mobile)
   =================================================== */

/* 1. යටින් කැරකෙන Loading Ring එක සැඟවීම (Hide stuck loading ring) */
.ssd-posts-loader, 
.ssd-loading-spinner, 
.ssd-loading-ring,
#ssd-loader {
    display: none !important; 
}

/* 2. Desktop එකේ නම Cover Photo එක මතට වැටීම නිවැරදි කිරීම (Fix Overlap) */
@media (min-width: 992px) {
    .ssd-profile-header-new .ssd-profile-info,
    .ssd-profile-details {
        margin-top: 25px !important; /* නම සහ විස්තර Cover එකෙන් පහළට ගෙන ඒමට */
        padding-top: 15px !important;
        position: relative;
        z-index: 10;
    }
}

/* 3. Name, Username, Follow Count, Bio අතර පරතරය (Gap) අඩු කිරීම */
.ssd-profile-header-new .ssd-profile-name,
.ssd-profile-details h1,
.ssd-profile-details h2 {
    margin-bottom: 2px !important; /* නමට පහළින් ඇති ඉඩ අඩු කිරීම */
    line-height: 1.2 !important;
}

.ssd-profile-header-new .ssd-profile-username {
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}

.ssd-profile-header-new .ssd-profile-stats-row,
.ssd-profile-stats {
    margin-top: 5px !important;
    margin-bottom: 8px !important;
}

.ssd-profile-header-new .ssd-profile-bio {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}

/* 4. Dashboard, Follow, Message බොත්තම් වල කොන තවත් රවුම් කිරීම (Round Corners) */
.ssd-profile-actions .ssd-btn,
.ssd-profile-actions button,
.ssd-profile-action-btn,
.ssd-btn-dashboard,
.ssd-btn-follow,
.ssd-btn-message {
    border-radius: 25px !important; /* මෙහි අගය (25px) වැඩි කිරීමෙන් තවත් රවුම් කළ හැක */
    padding: 8px 20px !important; /* බොත්තමේ පෙනුම සමබර කිරීමට */
}


/* ========================================================== */
/* === FINAL LAYOUT UPDATES (Cardless Single Pages & Solid Background) === */
/* ========================================================== */

/* 1. Remove the gradient and set a solid background color for the main content area */
.ssd-main-content {
    background: #111827 !important; /* Use !important to override any other styles */
}

/* 2. Remove the "boxed" look from all single view pages */
.ssd-fb-profile-view .tutor-profile-container,
.ssd-single-class-container,
.ssd-single-product-container {
    background-color: transparent;
    border: none;
    box-shadow: none;
    margin-top: 0;
    padding: 0;
}

/* 3. Adjust spacing for the back button on single pages */
.ssd-single-view-wrapper .ssd-back-to-classes-btn {
    margin-bottom: 1.5rem;
}

/* 4. Adjust the border below the header on single profile pages */
.ssd-fb-profile-view .tutor-info-actions-wrapper {
    border-bottom-color: transparent; /* Remove the line below the name */
}

/* 5. Add a border to the tab navigation to create separation */
.ssd-fb-profile-view .tutor-tabs-nav-wrapper {
    border-bottom: 1px solid #374151;
}

/* --- FIX: Stack Price and Button on Class Cards for Mobile View --- */

.ssd-pro-class-footer {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    gap: 0.75rem; /* Add a small gap between the price and button */
}

.ssd-pro-class-footer .ssd-pro-class-btn {
    width: 100%; /* Make the button full-width */
    text-align: center;
}

/* ========================================================== */
/* === FIX: Vertical Button Layout for "My Classes" Tab === */
/* ========================================================== */

/* Target the footer container specifically within the 'My Classes' tab */
#tab-my-classes .ssd-pro-class-footer {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 0.75rem;           /* Add space between the buttons */
}

/* Style all buttons within this footer to be full-width and consistent */
#tab-my-classes .ssd-pro-class-footer .ssd-start-learning-btn,
#tab-my-classes .ssd-pro-class-footer .ssd-view-timetable-btn {
    width: 100%;
    text-align: center;
    white-space: nowrap; /* Prevent text from wrapping */
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
    border: none; /* Remove border if any */
    font-size: 0.9rem;
}

/* Specific color for the 'Time Table' button to differentiate it */
#tab-my-classes .ssd-pro-class-footer .ssd-view-timetable-btn {
    background-color: #4b5563; /* Gray secondary color */
    color: #fff;
}

#tab-my-classes .ssd-pro-class-footer .ssd-view-timetable-btn:hover {
    background-color: #6b7280;
}

/* Ensure the green 'Start Learning' button style is applied correctly */
#tab-my-classes .ssd-pro-class-footer .ssd-start-learning-btn {
    background-color: #22c55e;
    color: white;
}
#tab-my-classes .ssd-pro-class-footer .ssd-start-learning-btn:hover {
    background-color: #16a34a;
}

/* --- FIX: YouTube Button Color --- */

.ssd-fb-profile-view .tutor-action-btn.secondary-btn {
    background-color: #CD201F; /* YouTube Red */
    color: #fff;
}

.ssd-fb-profile-view .tutor-action-btn.secondary-btn:hover {
    background-color: #E62117; /* A slightly darker red on hover */
    color: #fff;
}

/* --- FIX: Desktop Tutor Profile Picture Shape --- */

@media (min-width: 768px) {
    /* Prevent the container from shrinking */
    .ssd-fb-profile-view .tutor-profile-picture-wrapper {
        flex-shrink: 0;
    }

    /* Set a slightly smaller, fixed square size for the photo */
    .ssd-fb-profile-view .tutor-profile-picture {
        width: 140px;
        height: 140px;
        object-fit: cover; /* Ensures the image fills the circle without stretching */
    }
}

/* --- Page Button Color Customization --- */
.ssd-fb-profile-view .tutor-actions .page-follow-btn,
.ssd-fb-profile-view .tutor-actions .ssd-edit-page-btn {
    background-color: #3b82f6; /* Blue Color */
    color: #ffffff;
}

.ssd-fb-profile-view .tutor-actions .page-follow-btn:hover,
.ssd-fb-profile-view .tutor-actions .ssd-edit-page-btn:hover {
    background-color: #2563eb; /* Darker Blue on Hover */
}

/* Style for following state */
.ssd-fb-profile-view .tutor-actions .page-follow-btn.following {
    background-color: #4b5563; /* Grey when following */
    color: #d1d5db;
}

/* --- Fix for Button Click Area --- */
.ssd-product-buy-btn button {
    width: 100%;
    display: block;
    text-align: center;
}

/* ===================================================
   Skeleton Loading UI (Shimmer Effect)
   =================================================== */
.ssd-skeleton-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px 0;
    width: 100%;
}

.ssd-skeleton {
    border-radius: 8px;
    /* Light Mode Default Colors */
    background: #e2e8f0;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: ssd-shimmer 1.5s infinite linear;
}

/* Dark Mode Colors (ඔබගේ දැනට පවතින Dark theme එකට ගැලපෙන ලෙස) */
body:not(.light-mode) .ssd-skeleton,
body.dark-mode .ssd-skeleton {
    background: #1C2338;
    background: linear-gradient(90deg, #1C2338 25%, #2a344d 50%, #1C2338 75%);
    background-size: 200% 100%;
}

@keyframes ssd-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton Elements Sizes */
.ssd-skel-title { height: 35px; width: 40%; margin-bottom: 10px; }
.ssd-skel-text { height: 15px; width: 100%; margin-bottom: 8px; }
.ssd-skel-text.short { width: 60%; }
.ssd-skel-card { height: 120px; width: 100%; border-radius: 12px; margin-top: 10px; }

/* Default Theme (Dark) */
:root {
    --bg-color: #1C2338;
    --text-color: #ffffff;
    --card-bg: #2a344d;
}

/* Light Theme Variables */
html.light-mode, body.light-mode {
    --bg-color: #f0f2f5;
    --text-color: #1a202c;
    --card-bg: #ffffff;
}

/* Tab Design */
.ssd-tab {
    background-color: var(--card-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition ekak denawa */
}

/* --- Mobile Header Professional Fix --- */
.ssd-mobile-header .ssd-mobile-nav-item,
.ssd-mobile-nav-item {
    color: #64748b !important; /* සාමාන්‍ය Icon සඳහා Professional අළු පැහැයක් */
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Active Icon එකේ අවලස්සන නිල් කොටුව ඉවත් කිරීම */
.ssd-mobile-header .ssd-mobile-nav-item.active,
.ssd-mobile-nav-item.active {
    background-color: transparent !important; 
    color: var(--ssd-accent-color, #3b82f6) !important; /* Active Icon එකේ වර්ණය පමණක් වෙනස් වීම */
}

/* ====================================================
   Z-INDEX & MODAL OVERLAP FIX
   ==================================================== */
/* 1. Sidebar එකේ z-index අගය පාලනය කිරීම */
.ssd-sidebar {
    z-index: 100 !important;
}

/* Mobile Sidebar සඳහා පමණක් ඉහළ අගයක් ලබා දීම */
.ssd-sidebar.active, .ssd-sidebar.open {
    z-index: 99990 !important; 
}

/* 2. සියලුම Popups සහ Drawers Sidebar එකට උඩින් ගෙන ඒම */
.ssd-modal-overlay,
.modern-modal-overlay,
.wallet-drawer-overlay,
.ssd-pdf-popup-overlay,
.ssd-lightbox-overlay,
.ssd-share-overlay,
.ssd-form-drawer,
.ssd-story-modal-overlay,
.ssd-comment-drawer-overlay,
#ssd-share-popup {
    z-index: 999999 !important;
}

/* =========================================
   FLAT MODERN UI VARIABLES & BASE
   ========================================= */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-bg: #151A28;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

/* --- LAYOUT --- */
.ssd-classes-wrapper { padding-bottom: 40px; padding-top: 10px; min-height: 80vh; font-family: 'Inter', system-ui, sans-serif; }
.ssd-section-title { color: var(--ssd-text); margin: 0; }
.ssd-section-desc { color: var(--ssd-text-muted); }

/* --- MODERN CARD DESIGN (FLAT) --- */
.ssd-pro-class-card { 
    background: var(--ssd-card); 
    border: none; 
    border-radius: 16px; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    transition: all 0.3s ease; 
    box-shadow: none;
}
.ssd-pro-class-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px var(--ssd-primary);
}

/* SOLID BLUE PREMIUM CARD (FLAT) */
.smart-card-premium { 
    border: none !important; 
    box-shadow: inset 0 0 0 1px var(--ssd-primary) !important; 
}
.smart-card-premium:hover { 
    box-shadow: inset 0 0 0 2px var(--ssd-primary) !important; 
}

.ssd-class-header { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--ssd-box-bg); border-bottom: none; }
.ssd-class-header img.main-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ssd-pro-class-card:hover .ssd-class-header img.main-thumb { transform: scale(1.05); }

.ssd-badge-offer { position: absolute; top: 10px; right: 10px; background: #f59e0b; color: #000; font-size: 0.65rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; box-shadow: none; z-index: 5;}

.ssd-class-body { padding: 16px; display: flex; flex-direction: column; flex-grow: 1; }

.ssd-class-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ssd-text-muted); margin-bottom: 10px; font-weight: 600; }
.ssd-class-meta .sub i { color: var(--ssd-primary); margin-right: 4px; }
.ssd-class-meta .grd i { color: var(--ssd-primary); margin-right: 4px; }

.ssd-class-title { font-size: 1.05rem; font-weight: 700; color: var(--ssd-text); margin: 0 0 8px 0; line-height: 1.4; height: 2.8em; overflow: hidden; }
.ssd-class-tutor { font-size: 0.8rem; color: var(--ssd-text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.ssd-class-footer { margin-top: auto; border-top: 1px solid var(--ssd-border); padding-top: 12px; }

.ssd-class-price { font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; }

/* --- BUTTONS (FLAT) --- */
.ssd-btn-group { display: flex; flex-direction: row; gap: 8px; align-items: center; width: 100%; }

/* Default / Non-Smart Class Buttons */
.ssd-pro-class-btn { 
    flex: 1; 
    padding: 10px; 
    border-radius: 10px; 
    font-size: 0.85rem; 
    font-weight: 700; 
    border: none; 
    cursor: pointer; 
    text-align: center; 
    color: var(--ssd-text); 
    background: var(--ssd-box-bg); 
    transition: all 0.2s ease; 
}
.ssd-pro-class-btn:hover { background: var(--ssd-border); color: #fff; }

/* Smart Class Buttons */
.smart-card-premium .ssd-pro-class-btn { 
    background: var(--ssd-primary); 
    color: #ffffff; 
    border: none;
    box-shadow: none; 
}
.smart-card-premium .ssd-pro-class-btn:hover { background: #2563eb; }

/* Share Icon Button */
.ssd-share-icon-btn { 
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--ssd-box-bg); color: var(--ssd-text-muted); font-size: 1rem; transition: all 0.2s ease; box-shadow: none;
}
.ssd-share-icon-btn:hover { background: var(--ssd-border); color: #ffffff; }

/* Smart Share Icon Button */
.smart-card-premium .ssd-share-icon-btn { 
    background: rgba(59, 130, 246, 0.1); 
    color: var(--ssd-primary); 
    border: none;
}
.smart-card-premium .ssd-share-icon-btn:hover { background: var(--ssd-primary); color: #ffffff; }

/* --- FILTERS & DROPDOWNS (FLAT) --- */
.ssd-filter-bar { display: flex; flex-wrap: wrap; gap: 12px; }
.ssd-search-box { flex-grow: 2; min-width: 100%; position: relative; background: var(--ssd-box-bg); border: none; border-radius: 12px; height: 48px; display: flex; align-items: center; transition: 0.2s; box-shadow: none; }
.ssd-search-box:focus-within { box-shadow: inset 0 0 0 2px var(--ssd-primary); }

.ssd-search-box input { width: 100%; background: transparent; border: none; color: var(--ssd-text) !important; font-size: 0.95rem; padding: 0 40px 0 15px; height: 100%; outline: none; padding-left: 50px !important; }
.ssd-search-box input::placeholder { color: var(--ssd-text-muted); }
.ssd-search-box .search-icon { position: absolute; left: 16px !important; top: 50%; transform: translateY(-50%); z-index: 10; color: var(--ssd-text-muted); pointer-events: none; }

.ssd-select-group { display: flex; gap: 12px; flex-grow: 1; width: 100%; }
.ssd-custom-select { flex: 1; position: relative; min-width: 0; }
.ssd-select-trigger { background: var(--ssd-box-bg); border: none; border-radius: 12px; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; cursor: pointer; color: var(--ssd-text); font-size: 0.95rem; white-space: nowrap; overflow: hidden; transition: all 0.2s; box-shadow: none; }
.ssd-select-trigger:hover { color: #ffffff; }
.ssd-custom-select.active .ssd-select-trigger { box-shadow: inset 0 0 0 2px var(--ssd-primary); color: #ffffff; }
.ssd-custom-select.active .arrow { transform: rotate(180deg); color: var(--ssd-primary); }
.arrow { transition: transform 0.3s; font-size: 0.8rem; color: var(--ssd-text-muted); }

.ssd-options-list { display: none; position: absolute; top: 55px; left: 0; right: 0; background: var(--ssd-box-bg); border: none; border-radius: 12px; z-index: 100; max-height: 250px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.ssd-custom-select.active .ssd-options-list { display: block; animation: fadeIn 0.2s; }
.ssd-option { padding: 12px 16px; cursor: pointer; color: var(--ssd-text); font-size: 0.95rem; transition: background 0.2s; border-bottom: 1px solid var(--ssd-border); }
.ssd-option:last-child { border-bottom: none; }
.ssd-option:hover, .ssd-option.active { background: var(--ssd-border); color: #ffffff; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 768px) { .ssd-search-box { min-width: 300px; width: auto; } .ssd-select-group { width: auto; } }

/* --- SLIDERS (FLAT) --- */
.ssd-sponsored-section { margin-bottom: 30px; }
.ssd-slider-container { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
.ssd-slider-container::-webkit-scrollbar { display: none; }
.ssd-slider-wrapper { display: flex; gap: 20px; }
.ssd-slider-item { min-width: 85%; max-width: 85%; aspect-ratio: 2 / 1; background: var(--ssd-card); border-radius: 20px; overflow: hidden; position: relative; scroll-snap-align: center; box-shadow: none; border: none; }
@media (min-width: 768px) { .ssd-slider-item { min-width: 420px; max-width: 420px; } }
.ssd-slider-item img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.5s ease; }
.ssd-slider-item:hover img { transform: scale(1.05); }
.ssd-slider-overlay { position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: linear-gradient(to top, rgba(21,26,40,0.95) 5%, rgba(21,26,40,0.4) 50%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 20px; }
.ssd-slider-content { width: 100%; text-align: left; }
.ssd-slider-tag { background: #f59e0b; color: #000; font-size: 0.6rem; font-weight: 700; padding: 4px 8px; border-radius: 6px; text-transform: uppercase; display: inline-block; margin-bottom: 8px; }
.ssd-slider-content h3 { color: #ffffff; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.4; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ssd-slider-enroll-btn { background: #ffffff; color: #111827; border: none; padding: 8px 18px; border-radius: 20px; font-weight: 700; font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; }
.ssd-slider-enroll-btn:hover { background: #e5e7eb; }

.ssd-classes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (min-width: 1024px) { .ssd-classes-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } }
.ssd-empty-state { text-align: center; padding: 60px 20px; background: var(--ssd-card); border-radius: 16px; border: none; color: var(--ssd-text-muted); }
.ssd-empty-state h4 { color: var(--ssd-text); margin: 10px 0 5px 0; font-size: 1.3rem; }

/* --- RESPONSIVE / MOBILE APP UI DESIGN --- */
@media (max-width: 768px) { 
    .ssd-classes-header-area { margin-bottom: 20px !important; }
    .ssd-classes-grid { grid-template-columns: 1fr; gap: 12px; }
    .ssd-pro-class-card { flex-direction: row; height: auto; min-height: 130px; align-items: stretch; border-radius: 12px; }
    
    .ssd-class-header { width: 130px; aspect-ratio: auto; flex-shrink: 0; border-right: none; border-bottom: none; }
    .ssd-badge-offer { top: 6px; right: 6px; padding: 2px 6px; font-size: 0.6rem; }

    .ssd-class-body { padding: 12px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
    .ssd-class-meta { margin-bottom: 8px; font-size: 0.75rem; flex-wrap: wrap; gap: 8px; }
    .ssd-class-title { font-size: 0.95rem !important; -webkit-line-clamp: 2; height: auto; margin-bottom: 6px; }
    .ssd-class-tutor { font-size: 0.75rem; margin-bottom: 8px; }
    
    .ssd-class-footer { padding-top: 8px; border-top: none; margin-top: auto; }
    .ssd-class-price { font-size: 0.9rem; margin-bottom: 8px; }
    .ssd-btn-group { gap: 8px; }
    .ssd-pro-class-btn { padding: 8px; font-size: 0.85rem; border-radius: 8px; }
    .ssd-share-icon-btn { width: 36px; height: 36px; font-size: 0.9rem; }
}

@media (max-width: 768px) { body.light-mode .ssd-class-header { border-right: 1px solid #e2e8f0; } }

/* --- SMART CLASSES TOGGLE (ONLY SWITCH, NO TEXT) --- */
.ssd-title-with-toggle { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 15px; 
    flex-wrap: wrap; 
    gap: 15px; 
}

.ssd-smart-toggle-wrapper { 
    display: flex; 
    align-items: center; 
}

.ssd-toggle-switch { 
    position: relative; 
    display: inline-block; 
    width: 44px; 
    height: 24px; 
    margin: 0; 
}

.ssd-toggle-switch input { 
    opacity: 0; 
    width: 0; 
    height: 0; 
}

.ssd-toggle-slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: var(--ssd-border); 
    transition: .4s; 
    border-radius: 24px; 
}

.ssd-toggle-slider:before { 
    position: absolute; 
    content: ""; 
    height: 18px; 
    width: 18px; 
    left: 3px; 
    bottom: 3px; 
    background-color: white; 
    transition: .4s; 
    border-radius: 50%; 
    box-shadow: none;
}

/* Checked State Solid Blue */
.ssd-toggle-switch input:checked + .ssd-toggle-slider { 
    background: var(--ssd-primary); 
}

.ssd-toggle-switch input:checked + .ssd-toggle-slider:before { 
    transform: translateX(20px); 
}

/* =========================================
   FLAT MODERN UI VARIABLES & BASE
   ========================================= */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-bg: #151A28;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

.ssd-store-wrapper { padding-bottom: 80px; font-family: 'Inter', sans-serif; }

/* Header & Icons */
.ssd-store-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0 5px; }
.ssd-store-title { font-size: 1.4rem; font-weight: 800; color: var(--ssd-text); margin: 0; }
.ssd-cart-icon-area { font-size: 1.1rem; color: var(--ssd-text); background: var(--ssd-box-bg); width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: 0.2s; border: none; box-shadow: none; }
.ssd-cart-icon-area:hover { background: var(--ssd-primary); color: #fff; }

/* Slider (Flat) */
.ssd-store-slider { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
.ssd-store-slider::-webkit-scrollbar { display: none; }
.ssd-slider-track { display: flex; gap: 10px; padding-bottom: 5px; }
.ssd-slider-card { 
    min-width: 85%; aspect-ratio: 2.2/1; background: var(--ssd-card); border-radius: 16px; overflow: hidden; position: relative; scroll-snap-align: center; border: none; box-shadow: none;
}
@media (min-width: 768px) { .ssd-slider-card { min-width: 40%; aspect-ratio: 2.5/1; } }
.ssd-slider-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.ssd-slider-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; background: linear-gradient(to top, rgba(21,26,40,0.9), transparent); }
.ssd-slider-tag { background: #f59e0b; color: #000; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
.ssd-slider-content h3 { color: #fff; margin: 5px 0 8px; font-size: 1.1rem; }
.ssd-slider-btn { background: #ffffff; color: #000; border: none; padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px; width: fit-content; transition: 0.2s; box-shadow: none; }
.ssd-slider-btn:hover { background: #e2e8f0; }

/* Search (Flat) */
.ssd-store-search-container { margin-bottom: 15px; }
.ssd-store-search-box { position: relative; background: var(--ssd-box-bg); border-radius: 12px; height: 48px; display: flex; align-items: center; border: none; box-shadow: none; transition: 0.2s; }
.ssd-store-search-box:focus-within { box-shadow: inset 0 0 0 2px var(--ssd-primary); }
.ssd-store-search-box i { position: absolute; left: 16px; color: var(--ssd-text-muted); font-size: 1rem; }
.ssd-store-search-box input { width: 100%; background: transparent; border: none; padding: 0 10px 0 45px; color: var(--ssd-text); font-size: 0.95rem; outline: none; height: 100%; }
.ssd-store-search-box input::placeholder { color: var(--ssd-text-muted); }

/* CATEGORIES */
.ssd-category-scroller { margin-bottom: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ssd-category-scroller::-webkit-scrollbar { display: none; }
.ssd-category-track { display: flex; gap: 12px; padding: 5px 2px; }

.ssd-cat-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 70px; cursor: pointer; transition: transform 0.2s; }
.ssd-cat-item:active { transform: scale(0.95); }

.ssd-cat-icon { 
    width: 50px; height: 50px; 
    border-radius: 14px; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 1.2rem; 
    border: none; 
    transition: 0.2s;
    box-shadow: none;
}

.ssd-cat-item:hover .ssd-cat-icon { filter: brightness(0.9); }
.ssd-cat-item.active .ssd-cat-icon { box-shadow: inset 0 0 0 2px var(--ssd-primary); transform: translateY(-2px); }

.ssd-cat-item span { font-size: 0.75rem; color: var(--ssd-text-muted); font-weight: 500; text-align: center; }
.ssd-cat-item.active span { color: var(--ssd-text); font-weight: 700; }

/* Filters (Flat) */
.ssd-store-filters { display: flex; gap: 10px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 5px; }
.ssd-store-filters::-webkit-scrollbar { display: none; }
.ssd-filter-select { background: var(--ssd-box-bg); color: var(--ssd-text); border: none; padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; outline: none; flex-shrink: 0; box-shadow: none; cursor: pointer; }

/* GRID & CARD STYLES (Flat) */
.ssd-store-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .ssd-store-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (min-width: 1200px) { .ssd-store-grid { grid-template-columns: repeat(6, 1fr); gap: 20px; } }

.ssd-store-card { background: var(--ssd-card); border-radius: 16px; overflow: hidden; border: none; display: flex; flex-direction: column; height: 100%; transition: transform 0.2s; cursor: pointer; box-shadow: none; }
.ssd-store-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--ssd-primary); }

.ssd-card-img { width: 100%; padding-top: 133.33%; position: relative; background: var(--ssd-box-bg); overflow: hidden; }
.ssd-card-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.ssd-store-card:hover .ssd-card-img img { transform: scale(1.05); }

/* BADGES */
.ssd-tag { position: absolute; top: 8px; left: 8px; font-size: 0.6rem; font-weight: 800; padding: 3px 6px; border-radius: 4px; color: #fff; text-transform: uppercase; z-index: 2; box-shadow: none; }
.ssd-tag.out { background: #ef4444; }
.ssd-tag.offer { background: #f59e0b; color: #000; }
.ssd-tag.free { background: #10b981; }
.ssd-tag.digital { background: #8b5cf6; } 
.ssd-tag.used { background: #64748b; }    

/* DETAILS */
.ssd-card-details { padding: 12px; display: flex; flex-direction: column; flex-grow: 1; }
.ssd-card-title { font-size: 0.85rem; font-weight: 700; color: var(--ssd-text); margin: 0 0 6px; line-height: 1.3em; max-height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.ssd-card-author { font-size: 0.7rem; color: var(--ssd-text-muted); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.ssd-card-price-row { margin-top: auto; margin-bottom: 10px; display: flex; align-items: baseline; gap: 6px; }
.new-price { color: #10b981; font-weight: 800; font-size: 0.95rem; }
.old-price { color: var(--ssd-text-muted); text-decoration: line-through; font-size: 0.7rem; }
.ssd-card-actions { display: flex; gap: 8px; }

/* === BUTTON COLORS LOGIC (Flat) === */
.ssd-btn-buy { flex: 1; border: none; padding: 8px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: background 0.2s; z-index: 5; box-shadow: none; text-align: center; }
.ssd-btn-buy.btn-smart { background: var(--ssd-primary); color: #fff; } 
.ssd-btn-buy.btn-smart:hover { background: #2563eb; }
.ssd-btn-buy.btn-normal { background: var(--ssd-box-bg); color: var(--ssd-text); border: none; } 
.ssd-btn-buy.btn-normal:hover { background: var(--ssd-border); color: #fff; }

.ssd-btn-share { width: 36px; background: var(--ssd-box-bg); color: var(--ssd-text-muted); border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: background 0.2s; z-index: 5; box-shadow: none; }
.ssd-btn-share:hover { background: var(--ssd-border); color: #fff; }

.ssd-btn-buy.disabled { background: var(--ssd-box-bg); opacity: 0.5; cursor: not-allowed; color: var(--ssd-text-muted); }

/* =========================================================
   FLAT MODERN UI VARIABLES & BASE
   ========================================================= */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-bg: #151A28;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

#ssd-my-pages-list-view { font-family: 'Inter', sans-serif; color: var(--ssd-text); padding-bottom: 30px; }

/* New Stylish Navigation Shortcut Component (Flat) */
.sbp-profile-shortcut-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ssd-card);
    border: none;
    padding: 18px 24px;
    border-radius: 16px;
    text-decoration: none !important;
    box-shadow: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sbp-profile-shortcut-card:hover {
    transform: translateY(-3px);
    background: var(--ssd-box-bg);
    box-shadow: inset 0 0 0 1px var(--ssd-primary);
}
.shortcut-left { display: flex; align-items: center; gap: 16px; }
.shortcut-avatar { width: 52px; height: 52px; border-radius: 50%; border: none; object-fit: cover; background: var(--ssd-box-bg); }
.shortcut-meta { display: flex; flex-direction: column; }
.shortcut-welcome { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ssd-primary); font-weight: 700; margin-bottom: 2px; }
.shortcut-title { font-size: 1.25rem; font-weight: 800; color: var(--ssd-text); margin: 0; line-height: 1.2; }
.shortcut-user { font-size: 12px; color: var(--ssd-text-muted); font-weight: 500; margin-top: 1px; }

.btn-shortcut-action { 
    background: var(--ssd-box-bg); color: var(--ssd-text) !important; 
    padding: 10px 20px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; 
    transition: 0.2s; box-shadow: none; display: inline-flex; align-items: center; border: none;
}
.sbp-profile-shortcut-card:hover .btn-shortcut-action { background: var(--ssd-primary); color: #fff !important; }

/* Profile Grid & Cards (Flat) */
.ssd-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.ssd-profile-card { border-radius: 16px; overflow: hidden; border: none; background: var(--ssd-card); transition: transform 0.2s ease; box-shadow: none; }
.ssd-profile-card:hover { transform: translateY(-3px); background: var(--ssd-box-bg); box-shadow: inset 0 0 0 1px var(--ssd-border); }

.ssd-view-page-btn-action { 
    background: var(--ssd-box-bg); color: var(--ssd-text); text-decoration: none; 
    padding: 12px; border-radius: 12px; text-align: center; font-weight: 600; font-size: 0.95rem;
    display: block; transition: 0.2s; cursor: pointer; border: none;
}
.ssd-profile-card:hover .ssd-view-page-btn-action { background: var(--ssd-primary); color: white; }

/* Core Page Layout Framework Styles */
.ssd-live-cover-area-scaled { width: 100%; height: 320px; background: var(--ssd-card); position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; border: none; transition: background 0.3s; overflow: hidden; }
.ssd-live-profile-area-scaled { width: 130px; height: 130px; background: var(--ssd-box-bg); border-radius: 50%; border: 6px solid var(--ssd-bg); cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: none; transition: border-color 0.3s; }
.ssd-wizard-content-box { max-width: 650px; margin: -65px auto 0; position: relative; z-index: 10; padding: 0 20px 50px; }

#ssd-live-name-input { width: 100%; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--ssd-text); font-size: 2rem; font-weight: 800; text-align: center; outline: none; padding-bottom: 5px; transition: border-color 0.2s; }
#ssd-live-name-input:focus { border-bottom-color: var(--ssd-primary) !important; }

#ssd-live-username-container { display: inline-flex; align-items: center; background: var(--ssd-box-bg); padding: 5px 5px 5px 15px; border-radius: 12px; margin-bottom: 25px; border: none; }
#ssd-live-username-input { background: var(--ssd-card); border: none; padding: 8px 12px; border-radius: 8px; color: var(--ssd-text); font-weight: 600; outline: none; width: 150px; font-size: 0.9rem; transition: 0.2s;}
#ssd-live-username-input:focus { box-shadow: inset 0 0 0 1px var(--ssd-primary); }

#ssd-live-bio-input { width: 100%; background: var(--ssd-box-bg); border: none; border-radius: 12px; padding: 15px; color: var(--ssd-text); font-size: 0.95rem; text-align: center; resize: none; outline: none; transition: 0.2s; font-family: inherit;}
#ssd-live-bio-input:focus { box-shadow: inset 0 0 0 1px var(--ssd-primary); background: var(--ssd-card); }

.ssd-live-cover-area-scaled:hover .ssd-placeholder-content div { transform: scale(1.1); background: var(--ssd-primary); color: white !important;}
.ssd-live-profile-area-scaled:hover { border-color: var(--ssd-primary) !important; }

/* MODERN DROPDOWN STYLES (Flat) */
.ssd-custom-dropdown-container { position: relative; z-index: 20; }
.ssd-custom-dropdown { position: relative; width: 100%; user-select: none; }
.ssd-dropdown-selected { width: 100%; padding: 14px 20px; background: var(--ssd-box-bg); border: none; border-radius: 12px; color: var(--ssd-text); font-weight: 600; font-size: 0.95rem; text-align: center; cursor: pointer; transition: all 0.2s ease; display: flex; justify-content: space-between; align-items: center; }
.ssd-dropdown-selected:hover { background: var(--ssd-card); box-shadow: inset 0 0 0 1px var(--ssd-primary); }
.ssd-dropdown-selected i { transition: transform 0.3s ease; color: var(--ssd-text-muted); font-size: 0.8rem; }
.ssd-custom-dropdown.active .ssd-dropdown-selected { border-color: transparent; box-shadow: inset 0 0 0 1px var(--ssd-primary); }
.ssd-custom-dropdown.active .ssd-dropdown-selected i { transform: rotate(180deg); color: var(--ssd-primary); }

.ssd-dropdown-options { position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; background: var(--ssd-card); border: none; border-radius: 12px; box-shadow: none; list-style: none; padding: 8px; display: none; z-index: 100; max-height: 200px; overflow-y: auto; }
.ssd-custom-dropdown.active .ssd-dropdown-options { display: block; animation: dropdownFade 0.2s ease forwards; }
.ssd-dropdown-options li { padding: 10px 15px; color: var(--ssd-text-muted); cursor: pointer; transition: all 0.2s; text-align: left; font-size: 0.9rem; border-radius: 8px; font-weight: 600; margin-bottom: 2px;}
.ssd-dropdown-options li:hover { background: var(--ssd-box-bg); color: var(--ssd-text); padding-left: 20px; }

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

@media (max-width: 768px) {
    .sbp-profile-shortcut-card { padding: 14px 16px; flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
    .shortcut-left { flex-direction: column; gap: 10px; }
    .btn-shortcut-action { justify-content: center; width: 100%; }
    .ssd-live-cover-area-scaled { height: 200px; } 
    .ssd-live-profile-area-scaled { width: 100px; height: 100px; border-width: 4px; }
    .ssd-wizard-content-box { margin-top: -50px; }
    #ssd-live-name-input { font-size: 1.5rem !important; }
}

/* Light Mode Overrides */
body.light-mode .sbp-profile-shortcut-card { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .sbp-profile-shortcut-card:hover { background: var(--ssd-box-bg); border-color: var(--ssd-primary); box-shadow: none; }
body.light-mode .shortcut-title { color: var(--ssd-text); }
body.light-mode .btn-shortcut-action { background: var(--ssd-box-bg); color: var(--ssd-text) !important; }
body.light-mode .sbp-profile-shortcut-card:hover .btn-shortcut-action { background: var(--ssd-primary); color: white !important; }
body.light-mode .ssd-profile-card { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-profile-card:hover { background: var(--ssd-box-bg); border-color: var(--ssd-primary); }
body.light-mode .ssd-view-page-btn-action { background: var(--ssd-box-bg); color: var(--ssd-text); }
body.light-mode .ssd-profile-card:hover .ssd-view-page-btn-action { background: var(--ssd-primary); color: white; }
body.light-mode .ssd-live-cover-area-scaled { background: var(--ssd-box-bg); }
body.light-mode .ssd-live-profile-area-scaled { background: var(--ssd-card); border-color: var(--ssd-bg); }
body.light-mode #ssd-live-name-input { color: var(--ssd-text); }
body.light-mode #ssd-live-username-container { background: var(--ssd-box-bg); }
body.light-mode #ssd-live-username-input { background: var(--ssd-card); color: var(--ssd-text); }
body.light-mode #ssd-live-bio-input { background: var(--ssd-box-bg); color: var(--ssd-text); }
body.light-mode .ssd-dropdown-selected { background: var(--ssd-box-bg); color: var(--ssd-text); }
body.light-mode .ssd-dropdown-options { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-dropdown-options li:hover { background: var(--ssd-box-bg); color: var(--ssd-text); }

/* =========================================================
   FLAT MODERN UI VARIABLES & BASE
   ========================================================= */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-bg: #151A28;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

.ssd-search-tab-wrapper { font-family: 'Inter', sans-serif; }

/* === Search Bar & General Layout (Flat Box) === */
.ssd-search-tab-container { background: var(--ssd-card); border-radius: 20px; padding: 25px; border: none; box-shadow: none; margin-bottom: 30px; }
.ssd-search-tab-container .ssd-card-title { color: var(--ssd-text); font-size: 1.5rem; font-weight: 800; margin: 0 0 5px 0; }
.ssd-search-tab-container .ssd-card-subtitle { color: var(--ssd-text-muted); margin: 0 0 20px 0; font-size: 0.95rem; }

.ssd-search-controls { margin-bottom: 2rem; }
.ssd-search-bar-wrapper { position: relative; }
.ssd-search-bar-wrapper .search-icon { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); color: var(--ssd-text-muted); font-size: 1.1rem; }
#ssd-multi-search-input { width: 100%; padding: 14px 14px 14px 2.8rem; font-size: 0.95rem; border-radius: 14px; border: none; background-color: var(--ssd-box-bg); color: var(--ssd-text); outline: none; transition: 0.2s; font-family: inherit;}
#ssd-multi-search-input::placeholder { color: var(--ssd-text-muted); }
#ssd-multi-search-input:focus { box-shadow: inset 0 0 0 1px var(--ssd-primary); }

.ssd-search-results-area { margin-top: 1.5rem; min-height: 100px; position: relative; }
.ssd-search-placeholder { text-align: center; color: var(--ssd-text-muted); font-weight: 500; padding: 1.5rem 0; font-size: 0.9rem; }

.ssd-search-loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--ssd-card); border-radius: 12px; z-index: 5; }
.ssd-search-loader .spinner { border: 3px solid var(--ssd-box-bg); border-top: 3px solid var(--ssd-primary); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin-bottom: 0.5rem; }
.ssd-search-loader p { color: var(--ssd-text); font-weight: 600; font-size: 0.9rem; margin: 0;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* === Popular Sections Grid Layout === */
.ssd-popular-section { margin-top: 1.5rem; margin-bottom: 30px; }
.ssd-popular-section .ssd-sub-title { margin-bottom: 1.2rem; font-size: 1.2rem; font-weight: 700; color: var(--ssd-text); }

/* The Main Grid Container */
.ssd-grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }

@media (min-width: 768px) { .ssd-grid-container { grid-template-columns: repeat(4, 1fr); gap: 15px; } }
@media (min-width: 1024px) { .ssd-grid-container { grid-template-columns: repeat(5, 1fr); } }

/* ============================================================
--- CARD CSS (Flat Modern) ---
============================================================ */
.ssd-linkedin-card {
    background-color: var(--ssd-box-bg);
    border: none;
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: 0.2s ease;
    height: 100%;
    box-shadow: none;
}
.ssd-linkedin-card:hover { transform: translateY(-4px); background-color: var(--ssd-card); box-shadow: inset 0 0 0 1px var(--ssd-primary); }

.profile-card-clickable-area { cursor: pointer; flex-grow: 1; text-decoration: none; color: inherit; display: flex; flex-direction: column; }

.linkedin-banner { height: 60px; background-size: cover; background-position: center; background-color: var(--ssd-border); position: relative; border-bottom: none;}
.linkedin-picture-wrapper { margin-top: -30px; margin-bottom: 0.5rem; position: relative; z-index: 2; }
.linkedin-picture { width: 60px; height: 60px; border-radius: 50%; border: 4px solid var(--ssd-box-bg); background-color: var(--ssd-card); object-fit: cover; display: inline-block; transition: 0.2s; }
.ssd-linkedin-card:hover .linkedin-picture { border-color: var(--ssd-card); }

.linkedin-content { padding: 0 10px 15px 10px; flex-grow: 1; display: flex; flex-direction: column; }

.linkedin-name-row { display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 4px; }
.linkedin-name { font-size: 0.95rem; font-weight: 700; color: var(--ssd-text); margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 85%; }
.ssd-verified-badge { font-size: 0.8rem; color: var(--ssd-primary); margin-left: 5px; flex-shrink: 0; }

.linkedin-meta { font-size: 0.75rem; color: var(--ssd-text-muted); margin: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;}
.linkedin-meta-sub { font-size: 0.7rem; color: var(--ssd-text-muted); margin-top: auto; padding-top: 5px; font-weight: 600;}

.linkedin-footer { padding: 12px; border-top: 1px dashed var(--ssd-border); background: transparent; }

/* Follow Button */
.linkedin-footer .tutor-action-btn { 
    width: 100%; padding: 8px; font-size: 0.85rem; font-weight: 700; 
    background-color: var(--ssd-primary); color: #ffffff; border: none;
    border-radius: 10px; transition: all 0.2s ease; display: inline-flex; 
    align-items: center; justify-content: center; cursor: pointer; box-shadow: none;
}
.linkedin-footer .tutor-action-btn:hover { background-color: #2563eb; transform: translateY(-1px);}
.linkedin-footer .tutor-action-btn.following { background-color: var(--ssd-border); color: var(--ssd-text-muted); }

.linkedin-card-tag { position: absolute; top: 6px; right: 6px; background-color: var(--ssd-primary); color: #ffffff; font-size: 0.65rem; font-weight: 800; padding: 2px 8px; border-radius: 6px; z-index: 1; text-transform: uppercase; border: none;}

/* Search Results Grid (Re-using generic logic) */
#ssd-multi-search-results .ssd-linkedin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { 
    #ssd-multi-search-results .ssd-linkedin-grid { grid-template-columns: repeat(4, 1fr); gap: 15px; }
}
@media (max-width: 768px) {
    .ssd-search-tab-container { padding: 15px; border-radius: 16px; margin-bottom: 20px;}
    .ssd-search-tab-container .ssd-card-title { font-size: 1.2rem; }
    .ssd-search-tab-container .ssd-card-subtitle { font-size: 0.85rem; margin-bottom: 15px;}
    .linkedin-name { font-size: 0.85rem; }
    .linkedin-meta { font-size: 0.7rem; }
    .linkedin-footer .tutor-action-btn { padding: 6px; font-size: 0.75rem; }
}

/* ====================================================
   LIGHT MODE OVERRIDES
   ==================================================== */
body.light-mode .ssd-search-tab-container { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-search-tab-container .ssd-card-title, 
body.light-mode .ssd-popular-section .ssd-sub-title { color: var(--ssd-text); }
body.light-mode .ssd-search-tab-container .ssd-card-subtitle { color: var(--ssd-text-muted); }
body.light-mode #ssd-multi-search-input { background: var(--ssd-box-bg); color: var(--ssd-text); border: 1px solid var(--ssd-border); }
body.light-mode #ssd-multi-search-input:focus { border-color: var(--ssd-primary); box-shadow: none; }
body.light-mode .ssd-linkedin-card { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-linkedin-card:hover { background: var(--ssd-box-bg); box-shadow: inset 0 0 0 1px var(--ssd-primary); border-color: transparent;}
body.light-mode .linkedin-picture { border-color: var(--ssd-card); background: var(--ssd-box-bg); }
body.light-mode .ssd-linkedin-card:hover .linkedin-picture { border-color: var(--ssd-box-bg); }
body.light-mode .linkedin-name { color: var(--ssd-text); }
body.light-mode .linkedin-meta, body.light-mode .linkedin-meta-sub { color: var(--ssd-text-muted); }
body.light-mode .linkedin-footer { border-top: 1px dashed var(--ssd-border); }
body.light-mode .linkedin-footer .tutor-action-btn { background: var(--ssd-primary); color: white; }
body.light-mode .linkedin-footer .tutor-action-btn:hover { background: #2563eb; }
body.light-mode .linkedin-footer .tutor-action-btn.following { background: var(--ssd-box-bg); color: var(--ssd-text-muted); }
body.light-mode .ssd-search-loader { background: var(--ssd-card); }
body.light-mode .ssd-search-loader .spinner { border-color: var(--ssd-border); border-top-color: var(--ssd-primary); }

    /* =========================================
       FLAT MODERN UI VARIABLES & BASE
       ========================================= */
    :root {
        --ssd-card: #1C2338;
        --ssd-box-bg: #222d44;
        --ssd-bg: #151A28;
        --ssd-border: #2d3b55;
        --ssd-primary: #3b82f6;
        --ssd-text: #f1f5f9;
        --ssd-text-muted: #94a3b8;
    }

    /* --- Main Wrapper --- */
    .ssd-badges-app-wrapper { padding: 10px 0 40px 0; min-height: 600px; font-family: 'Inter', sans-serif; color: var(--ssd-text); }

    /* --- Header Section --- */
    .ssd-badges-header-section { text-align: center; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; }
    .ssd-page-title { color: var(--ssd-text); font-size: 1.8rem; font-weight: 800; margin: 0 0 8px 0; letter-spacing: -0.5px; }
    .ssd-page-subtitle { color: var(--ssd-text-muted); font-size: 0.95rem; max-width: 450px; margin: 0 auto; line-height: 1.5; }

    /* --- Modern Tab Navigation (Flat) --- */
    .ssd-badges-tab-nav {
        display: flex; background: var(--ssd-box-bg); padding: 6px; border-radius: 100px;
        max-width: 550px; margin: 0 auto 30px auto; border: none; box-shadow: none;
    }
    .ssd-b-tab {
        flex: 1; background: transparent; border: none; color: var(--ssd-text-muted); padding: 12px 15px; font-size: 0.9rem;
        font-weight: 600; border-radius: 100px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 2;
    }
    .ssd-b-tab:hover { color: var(--ssd-text); }
    .ssd-b-tab.active { background: var(--ssd-primary); color: #fff; box-shadow: none; border: none; }
    .ssd-b-tab i { font-size: 1rem; }

    .ssd-badge-tab-content { opacity: 0; transform: translateY(15px); transition: all 0.4s ease; }
    .ssd-badge-tab-content.active { opacity: 1; transform: translateY(0); }

    /* --- CLASSES & EBOOKS GRID SYSTEM --- */
    .my-classes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
    .my-ebooks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }

    /* ISOLATED BASE CARD CSS (Flat) */
    .ssd-ml-card { 
        background-color: var(--ssd-card); border-radius: 16px; overflow: hidden; border: none; 
        transition: transform 0.2s; display: flex; flex-direction: column; box-shadow: none;
    }
    .ssd-ml-card:hover { 
        transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--ssd-primary); 
    }
    
    .ssd-ml-thumb { height: 160px; background-size: cover; background-position: center; position: relative; }
    .ssd-ml-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--ssd-card), transparent); }
    .ssd-ml-badge { position: absolute; top: 12px; right: 12px; background: rgba(16, 185, 129, 0.9); color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; z-index: 2; display: flex; align-items: center; gap: 4px; box-shadow: none; }

    .ssd-ml-content { padding: 1.25rem; display: flex; flex-direction: column; flex-grow: 1; }
    .ssd-ml-title { font-size: 1.1rem; color: var(--ssd-text); margin: 0 0 0.25rem 0; font-weight: 700; line-height: 1.3; }
    .ssd-ml-subject { font-size: 0.85rem; color: var(--ssd-text-muted); margin: 0 0 1rem 0; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
    .ssd-ml-meta { display: flex; gap: 15px; font-size: 0.85rem; color: var(--ssd-text-muted); margin-bottom: 1.25rem; }
    .ssd-ml-meta span { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ssd-ml-meta i { color: var(--ssd-primary); }
    .ssd-ml-footer { margin-top: auto; }

    /* ISOLATED BUTTON CSS (Flat) */
    .ssd-ml-btn { 
        display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 0.85rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.95rem; color: white; transition: all 0.2s ease; border: none; cursor: pointer; font-family: inherit; box-shadow: none;
    }
    .ssd-ml-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
    .ssd-ml-btn.action-btn { background: var(--ssd-primary); width: auto; display: inline-flex; margin-top: 15px; padding: 0.85rem 1.5rem; }

    /* --- MODERN DARK MODE EMPTY STATES (Flat) --- */
    .ssd-modern-empty-state { 
        background: var(--ssd-card); 
        border-radius: 20px; 
        padding: 4rem 2rem; 
        text-align: center; 
        border: none; 
        box-shadow: none; 
        grid-column: 1 / -1; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
    }
    .empty-icon-glow {
        font-size: 4rem;
        color: var(--ssd-primary);
        margin-bottom: 1.5rem;
    }
    .ssd-modern-empty-state h3 { color: var(--ssd-text); font-size: 1.5rem; font-weight: 800; margin: 0 0 0.5rem 0; letter-spacing: -0.5px; }
    .ssd-modern-empty-state p { color: var(--ssd-text-muted); font-size: 0.95rem; max-width: 420px; line-height: 1.6; margin-bottom: 0; }

    /* --- MOBILE RESPONSIVE --- */
    @media (max-width: 768px) {
        .ssd-badges-header-section { margin-bottom: 20px; }
        .ssd-page-title { font-size: 1.5rem; }
        .ssd-badges-tab-nav { max-width: 100%; margin: 0 10px 25px 10px; padding: 4px; }
        .ssd-b-tab { font-size: 0.75rem; padding: 10px 5px; }
        .my-classes-grid { grid-template-columns: 1fr; padding: 0 10px; }
        .my-ebooks-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 5px; }
        .ssd-ml-thumb { height: 110px; }
        .ssd-ml-content { padding: 0.75rem; }
        .ssd-ml-title { font-size: 0.85rem; margin-bottom: 0.25rem; line-height: 1.2; }
        .ssd-ml-subject { font-size: 0.7rem; margin-bottom: 0.5rem; }
        .ssd-ml-meta { font-size: 0.7rem; margin-bottom: 0.75rem; flex-direction: column; gap: 5px; }
        .ssd-ml-btn { font-size: 0.75rem; padding: 0.5rem; }
        .ssd-ml-badge { font-size: 0.6rem; padding: 3px 6px; top: 8px; right: 8px; }
        .ssd-modern-empty-state { padding: 3rem 1.5rem; margin: 0 10px; }
        .empty-icon-glow { font-size: 3rem; }
        .ssd-modern-empty-state h3 { font-size: 1.25rem; }
    }

    /* ====================================================
       PDF VIEWER STYLES (Flat)
       ==================================================== */
    .ssd-pdf-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(21, 26, 40, 0.95); z-index: 999999; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; pointer-events: none; }
    .ssd-pdf-popup-overlay.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .ssd-pdf-close { position: absolute; top: 20px; right: 20px; background: rgba(239, 68, 68, 0.1); color: #ef4444; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: 0.2s; z-index: 105; box-shadow: none; }
    .ssd-pdf-close:hover { background: #ef4444; color: #fff; transform: scale(1.1); }
    .ssd-pdf-body { flex: 1; position: relative; background: transparent; user-select: none; -webkit-user-select: none; transition: opacity 0.1s ease; overflow: hidden; display: flex; justify-content: center; align-items: center; padding-bottom: 70px; }
    .canvas-perspective-wrapper { perspective: 1500px; display: flex; justify-content: center; align-items: center; gap: 0; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; }
    #ssd-pdf-canvas-left, #ssd-pdf-canvas-right { max-width: 100%; max-height: 85vh; background: white; box-shadow: none; border: none; }
    .desktop-only-canvas { display: none; }
    @media (min-width: 900px) { .desktop-only-canvas { display: block; border-left: 1px solid #ccc; max-width: 50%; } #ssd-pdf-canvas-left { border-right: 1px solid #ccc; max-width: 50%; } }
    
    .flip-next-out { transform: rotateY(-90deg); opacity: 0.5; transition: transform 0.25s ease-in; transform-origin: left center;}
    .flip-next-in { transform: rotateY(90deg); opacity: 0; transition: none; transform-origin: left center;}
    .flip-next-in-active { transform: rotateY(0deg); opacity: 1; transition: transform 0.3s ease-out, opacity 0.3s ease-out; transform-origin: left center;}
    .flip-prev-out { transform: rotateY(90deg); opacity: 0.5; transition: transform 0.25s ease-in; transform-origin: right center;}
    .flip-prev-in { transform: rotateY(-90deg); opacity: 0; transition: none; transform-origin: right center;}
    .flip-prev-in-active { transform: rotateY(0deg); opacity: 1; transition: transform 0.3s ease-out, opacity 0.3s ease-out; transform-origin: right center;}
    
    .pdf-floating-toolbar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; background: var(--ssd-card); padding: 8px 15px; border-radius: 30px; border: none; z-index: 100; width: 90%; max-width: 350px; box-shadow: none; }
    .pdf-fab-btn { background: var(--ssd-primary); color: white; border: none; height: 38px; padding: 0 16px; border-radius: 19px; cursor: pointer; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: 0.2s; box-shadow: none; }
    .pdf-fab-btn:hover { background: #2563eb; transform: scale(1.05); }
    .page-info { color: var(--ssd-text); font-size: 0.95rem; font-weight: 700; }
    .hide-mobile { display: none; }
    @media (min-width: 600px) { .hide-mobile { display: inline; } .pdf-floating-toolbar{ max-width: 400px; } }

    .ssd-pdf-watermark {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 300px; height: 300px;
        background-image: url('https://mehewara.lk/wp-content/uploads/2025/11/cropped-mehewara-web-logo-1.png');
        background-size: contain; background-repeat: no-repeat; background-position: center;
        opacity: 0.1; pointer-events: none; z-index: 100;
    }

    /* Iskoola Pota Native Fonts Integration */
    @font-face {
        font-family: 'Iskoola Pota Custom';
        src: url('https://mehewara.lk/wp-content/plugins/smart-student-dashboard/assets/fonts/iskoolapota.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Iskoola Pota Custom';
        src: url('https://mehewara.lk/wp-content/plugins/smart-student-dashboard/assets/fonts/iskoolapota-bold.ttf') format('truetype');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }

    /* ANTI-COPY & TEXT SELECTION BLOCKER FOR ALL SECURE ROOMS */
    .math-content-area, 
    #ssd-lms-popup-body,
    .lms-modern-paper-page,
    .explanation-card-box,
    .al-statement-table,
    .paper-options-grid-cell,
    .paper-vertical-option-row {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        cursor: default !important;
    }

    /* ANTI-SCREENSHOT & SCREEN RECORD BLACKOUT OVERLAY FOR PRINT/CAPTURE */
    @media print, (meta-screenshot), (display-mode: capture) {
        body, #ssd-lms-popup-body, .math-content-area, .paper-popup-wrapper {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }
    }

    .exp-card-modern, .math-content-area {
        font-family: 'Iskoola Pota Custom', 'Inter', sans-serif !important;
    }

    /* Global System Style Architecture Declarations */
    :root { 
        --ssd-bg: #151A28; 
        --ssd-card: #1C2338; 
        --ssd-box-bg: #222d44;
        --ssd-border: #2d3b55; 
        --ssd-primary: #3b82f6; 
        --ssd-text: #f1f5f9; 
        --ssd-text-muted: #94a3b8; 
    }
    
    .ssd-modern-exam-wrapper { background: transparent; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; min-height: 80vh; padding-bottom: 50px; }
    .ssd-main-layout-grid { display: grid; grid-template-columns: 1fr; gap: 20px; width: 100%; align-items: start; }
    
    .ssd-hero-banner { position: relative; overflow: hidden; background-color: transparent; border-radius: 16px;}
    .ssd-hero-bg-blur { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(25px); opacity: 0.3; z-index: 1; }
    .ssd-hero-image { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 2; }
    .ssd-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--ssd-bg) 100%); z-index: 3; pointer-events: none; }
    .ssd-top-nav, .ssd-hero-content { position: relative; z-index: 10; }
    
    .ssd-top-nav { position: absolute; top: 15px; left: 15px; right: 15px; display: flex; justify-content: space-between; align-items: center; }
    .ssd-back-circle { width: 36px; height: 36px; background: var(--ssd-box-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ssd-text-muted); transition: 0.2s; border: none; text-decoration:none; }
    .ssd-back-circle:hover { background: var(--ssd-card); color: var(--ssd-text); }
    
    .ssd-hero-content { position: absolute; bottom: 20px; left: 20px; display: flex; gap: 8px; }
    .ssd-badge-subject { background: var(--ssd-primary); color: white; padding: 4px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; border: none;}
    
    .ssd-content-card { background: var(--ssd-card); border-radius: 16px; padding: 25px; border: none; }
    .ssd-exam-title { margin: 0 0 10px 0; font-size: 1.4rem; color: var(--ssd-text); line-height: 1.3; font-weight: 700;}
    .ssd-meta-row { display: flex; gap: 15px; margin-bottom: 20px; border-bottom: 1px dashed var(--ssd-border); padding-bottom: 15px; overflow-x: auto; align-items: center; }
    .meta-item { font-size: 0.8rem; color: var(--ssd-text-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600;}
    .meta-item i { color: var(--ssd-primary); }
    
    .ssd-description-box { margin-bottom: 25px; }
    .desc-text { font-size: 0.9rem; color: var(--ssd-text-muted); line-height: 1.5; }
    
    .ssd-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; width: 100%; }
    .ssd-grid-box { background: var(--ssd-box-bg); border: none; border-radius: 12px; padding: 15px 5px; text-align: center; cursor: pointer; transition: 0.2s; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100px; position: relative; width: 100%; box-sizing: border-box; }
    .ssd-grid-box:hover { background: var(--ssd-border); }
    .icon-circle { width: 40px; height: 40px; background: var(--ssd-card); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 8px; position: relative; border: none;}
    .box-label { font-size: 0.75rem; color: var(--ssd-text); font-weight: 600; display: block; width: 100%; }
    .lock-badge { position: absolute; bottom: -2px; right: -2px; background: #ef4444; color: #fff; width: 16px; height: 16px; border-radius: 50%; font-size: 0.55rem; display: flex; align-items: center; justify-content: center; border: none; }
    
    .ssd-rank-section { padding: 25px; border-radius: 16px; margin-top: 0; background: var(--ssd-card); border: none;}
    .ssd-podium-container { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-top: 40px; margin-bottom: 10px; height: 160px; }
    .podium-step { display: flex; flex-direction: column; align-items: center; width: 30%; max-width: 90px; position: relative; }
    .podium-step > a { position: relative; z-index: 10; display: block; }
    .podium-avatar { width: 45px; height: 45px; border-radius: 50%; border: 3px solid var(--ssd-box-bg); object-fit: cover; margin-bottom: -15px; z-index: 10; background: var(--ssd-card); transition: 0.2s; position: relative; }
    .podium-avatar:hover { transform: scale(1.1); }
    .podium-rank-1 .podium-avatar { width: 60px; height: 60px; border-color: var(--ssd-box-bg); margin-bottom: -20px; }
    .podium-rank-2 .podium-avatar { border-color: var(--ssd-box-bg); }
    .podium-rank-3 .podium-avatar { border-color: var(--ssd-box-bg); }
    .podium-box { width: 100%; border-radius: 10px 10px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 20px; color: white; font-weight: 800; position: relative; border: none;}
    .rank-num { font-size: 1.2rem; }
    .podium-rank-1 .rank-num { font-size: 1.5rem; }
    .podium-rank-1 .podium-box { height: 110px; background: #d97706; }
    .podium-rank-2 .podium-box { height: 80px; background: #475569; }
    .podium-rank-3 .podium-box { height: 60px; background: #9a3412; }
    .podium-name { font-size: 0.7rem; text-align: center; color: var(--ssd-text); margin-top: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
    .podium-marks { font-size: 0.8rem; color: var(--ssd-primary); font-weight: 700; margin-top: 2px; }
    
    .ssd-rank-table { width: 100%; border-collapse: collapse; }
    .ssd-rank-table th, .ssd-rank-table td { padding: 10px 5px; text-align: left; border-bottom: 1px solid var(--ssd-border); }
    .ssd-rank-table th { font-size: 0.7rem; color: var(--ssd-text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
    .ssd-rank-table .rank-col { font-weight: 700; color: var(--ssd-text-muted); width: 25px; text-align: center; }
    .rank-grade-badge { background: var(--ssd-box-bg); padding: 3px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: bold; color: var(--ssd-text); display: inline-block; border: none;}
    .rank-grade-badge.grade-a { color: #10b981; }
    .rank-grade-badge.grade-b { color: #3b82f6; }
    .rank-grade-badge.grade-c { color: #f59e0b; }
    .rank-grade-badge.grade-s { color: #a855f7; }
    .rank-grade-badge.grade-f { color: #ef4444; }
    
    .ssd-sticky-footer { background: var(--ssd-box-bg); padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; border-radius: 12px; margin-top: 20px; border: none;}
    .footer-text .lbl { display: block; font-size: 0.65rem; color: var(--ssd-text-muted); text-transform: uppercase; font-weight: 600; margin-bottom: 2px; }
    .footer-text .val { display: block; font-size: 0.95rem; color: var(--ssd-text); font-weight: 700; }
    .ssd-btn-start-floating { background: var(--ssd-primary); color: white; padding: 10px 25px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; transition: 0.2s; border: none;}
    .ssd-btn-start-floating:hover { background: #2563eb; color:white; }
    
    .ssd-share-coin-btn { display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; transition: 0.2s; }
    .ssd-share-coin-btn:hover { transform: scale(1.1); }

    .rank-limit-btn { flex:1; background:var(--ssd-box-bg); border:none; color:var(--ssd-text-muted); padding:8px; border-radius:8px; cursor:pointer; font-weight:600; transition:0.2s; min-width:70px; font-size: 0.8rem;}
    .rank-limit-btn.active { background:var(--ssd-primary); color:#fff; }
    .rank-limit-btn:hover:not(.active) { background:var(--ssd-border); color:var(--ssd-text); }
    #ssd-rank-export-sidebar.show { transform:translateX(0) !important; }
    
    /* Dynamic Render Styles */
    .lms-pdf-wrapper { height: 100%; width: 100%; background: var(--ssd-bg); box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .lms-pdf-inner { display: flex; flex-direction: row-reverse; min-height: 100%; width: 100%; padding: 70px 20px 20px 20px; box-sizing: border-box; gap: 20px; }
    .lms-pdf-preview { flex: 7; background: var(--ssd-box-bg); border-radius: 12px; overflow: hidden; position: relative; display: flex; flex-direction: column; border: none; }
    .lms-pdf-sidebar { flex: 3; background: var(--ssd-card); border-radius: 12px; padding: 30px 20px; border: none; display: flex; flex-direction: column; align-items: center; text-align: center; }
    
    /* Updated Dropdown CSS for Dark Flat Theme */
    .mehewara-modern-dropdown { position: relative; display: inline-block; min-width: 170px; font-family: 'Inter', sans-serif; margin-bottom: 25px; z-index: 9999; }
    .mehewara-dropdown-select { display: flex; align-items: center; justify-content: space-between; background: var(--ssd-box-bg); border: none; padding: 10px 16px; border-radius: 12px; color: var(--ssd-text); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: 0.2s; }
    .mehewara-dropdown-select:hover { background: var(--ssd-border); }
    .mehewara-dropdown-list { position: absolute; top: calc(100% + 5px); left: 0; width: 100%; background: var(--ssd-card); border: none; border-radius: 10px; padding: 5px; display: none; flex-direction: column; }
    .mehewara-modern-dropdown.active-open .mehewara-dropdown-list { display: flex; }
    .mehewara-dropdown-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-weight: 500; font-size: 0.85rem; color: var(--ssd-text-muted); cursor: pointer; transition: 0.2s; border: none;}
    .mehewara-dropdown-option:hover { background: var(--ssd-box-bg); color: var(--ssd-text); }
    .mehewara-dropdown-option.selected-active { color: var(--ssd-primary); font-weight: 600; }

    @media (max-width: 900px) {
        .lms-pdf-inner { flex-direction: column !important; padding: 70px 10px 20px 10px !important; display: block !important; }
        .lms-pdf-sidebar { width: 100% !important; margin-bottom: 15px !important; padding: 20px !important;}
        .lms-pdf-preview { width: 100% !important; height: 75vh !important; min-height: 400px !important; }
    }

    @media (max-width: 768px) {
        #ssd-rank-export-sidebar { width:100%; height:85vh; top:auto; bottom:0; border-radius:20px 20px 0 0; transform:translateY(100%); background: var(--ssd-card); }
        .ssd-modern-exam-wrapper { padding: 10px !important; padding-bottom: 80px !important; } 
        .ssd-hero-banner { border-radius: 12px; height: 30vh; min-height: 200px; margin-bottom: 15px; }
        .ssd-content-card { padding: 20px; border-radius: 12px; } 
        .ssd-exam-title { font-size: 1.2rem !important; margin-bottom: 10px; } 
        .ssd-meta-row { padding-bottom: 15px; margin-bottom: 15px; }
        .ssd-actions-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
        .icon-circle { width: 35px; height: 35px; }
        .icon-circle lottie-player { width: 30px !important; height: 30px !important; }
        .ssd-rank-section { margin-top: 15px !important; padding: 20px !important; }
        .ssd-sticky-footer { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; background: var(--ssd-box-bg); padding: 10px 15px; }
        .ssd-btn-start-floating { padding: 8px 20px; font-size: 0.85rem; }
    }
    @media (min-width: 768px) {
        .ssd-modern-exam-wrapper { padding: 20px; max-width: 1000px; margin: 0 auto; }
        .ssd-main-layout-grid { grid-template-columns: 1fr 1fr; }
        .ssd-hero-banner { height: 30vh; border-radius: 16px; margin-bottom: 25px; }
        .ssd-sticky-footer { position: sticky; bottom: 20px; }
    }

    :root {
        --ssd-card: #1C2338;        /* Custom Flat Box Background */
        --ssd-box-bg: #222d44;      /* Inner input/card background */
        --ssd-text: #f1f5f9;        
        --ssd-text-muted: #94a3b8;  
        --ssd-border: #2d3b55;      /* Subtle border */
        --ssd-primary: #3b82f6;     
        --ssd-primary-hover: #2563eb;
    }

    .ssd-eh-wrapper { font-family: 'Inter', sans-serif; background: transparent; color: var(--ssd-text); padding: 10px 0; min-height: 70vh; }
    .ssd-eh-header-area { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid var(--ssd-border); padding-bottom: 20px; margin-bottom: 25px; }
    .ssd-eh-header-text h2 { margin: 0 0 5px 0; font-size: 1.8rem; font-weight: 800; color: var(--ssd-text); display: flex; align-items: center; flex-wrap: wrap; }
    .ssd-eh-total-badge { font-size: 0.85rem; background: rgba(59, 130, 246, 0.2); color: var(--ssd-primary); padding: 4px 12px; border-radius: 20px; font-weight: 700; margin-left: 10px; }
    .ssd-eh-header-text p { margin: 0; color: var(--ssd-text-muted); font-size: 0.95rem; }
    .ssd-eh-tabs { display: flex; gap: 10px; background: rgba(255,255,255,0.05); padding: 6px; border-radius: 12px; }
    .ssd-eh-tab-btn { background: transparent; border: none; padding: 10px 20px; font-size: 0.9rem; font-weight: 600; color: var(--ssd-text-muted); border-radius: 8px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 8px; }
    .ssd-eh-tab-btn:hover { color: var(--ssd-text); }
    .ssd-eh-tab-btn.active { background: var(--ssd-primary); color: white; }

    .ssd-eh-filters { display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; }
    .ssd-eh-search-box { flex: 1; min-width: 250px; position: relative; }
    .ssd-eh-search-box i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ssd-text-muted); z-index: 2; }
    .ssd-eh-search-box input { width: 100%; padding: 14px 15px 14px 45px; background: var(--ssd-box-bg) !important; border: none !important; border-radius: 12px; font-size: 0.95rem; color: var(--ssd-text) !important; outline: none; transition: 0.2s; box-sizing: border-box; }
    .ssd-eh-search-box input:focus { box-shadow: inset 0 0 0 1px var(--ssd-primary) !important; }
    
    .ssd-eh-filter-selects { display: flex; gap: 15px; flex-wrap: wrap; }
    .ssd-custom-select { position: relative; min-width: 170px; user-select: none; }
    .ssd-select-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 20px; background: var(--ssd-box-bg); border: none; border-radius: 12px; font-size: 0.9rem; font-weight: 600; color: var(--ssd-text); cursor: pointer; transition: 0.2s; box-sizing: border-box; }
    .transition-icon { transition: transform 0.3s ease; color: var(--ssd-text-muted); }
    .ssd-custom-select.active .ssd-select-trigger { box-shadow: inset 0 0 0 1px var(--ssd-primary); }
    .ssd-custom-select.active .transition-icon { transform: rotate(180deg); color: var(--ssd-primary); }
    .ssd-select-options { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); border-radius: 12px; z-index: 999; max-height: 250px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: 0.2s ease; padding: 5px; }
    .ssd-custom-select.active .ssd-select-options { opacity: 1; visibility: visible; transform: translateY(0); }
    .ssd-option { padding: 10px 15px; font-size: 0.85rem; color: var(--ssd-text-muted); cursor: pointer; transition: 0.2s; border-radius: 8px; margin-bottom: 2px; }
    .ssd-option:hover { background: rgba(59, 130, 246, 0.1); color: var(--ssd-primary); }
    .ssd-option.active { background: var(--ssd-primary); color: white; font-weight: bold; }

    .ssd-eh-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
    .ssd-eh-card { background: var(--ssd-card); border-radius: 16px; overflow: hidden; border: none; transition: all 0.3s ease; display: flex; flex-direction: column; position: relative; }
    .ssd-eh-card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--ssd-primary); }
    .ssd-eh-card-img { height: 130px; background-size: cover; background-position: center; position: relative; }
    .ssd-eh-card-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(21,26,40,0.1), rgba(21,26,40,0.8)); }
    .ssd-eh-badge-type { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; color: white; letter-spacing: 0.5px; z-index: 2; }
    .ssd-eh-badge-type.mcq { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
    .ssd-eh-badge-type.essay { background: linear-gradient(135deg, #ec4899, #db2777); }
    .ssd-eh-card-body { padding: 15px; flex: 1; display: flex; flex-direction: column; }
    .ssd-eh-card-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ssd-text-muted); margin-bottom: 10px; font-weight: 600; }
    .ssd-eh-card-meta .sub i { color: var(--ssd-primary); }
    .ssd-eh-card-title { margin: 0 0 10px 0; font-size: 1.05rem; line-height: 1.4; color: var(--ssd-text); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .ssd-eh-card-grade { font-size: 0.8rem; color: var(--ssd-text-muted); margin-bottom: 15px; display: flex; align-items: center; gap: 5px; }
    .ssd-eh-card-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 12px; }
    .ssd-eh-btn-view { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 10px; background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-radius: 10px; font-weight: 700; text-decoration: none; transition: 0.2s; box-sizing: border-box; }
    .ssd-eh-btn-view:hover { background: var(--ssd-primary); color: white; }

    .ssd-pagination-wrapper ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 5px; }
    .ssd-pagination-wrapper a, .ssd-pagination-wrapper span { display: inline-block; padding: 8px 12px; border-radius: 8px; background: var(--ssd-card); border: none; color: var(--ssd-text); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: all 0.2s ease; }
    .ssd-pagination-wrapper a:hover { background: rgba(59, 130, 246, 0.1); color: var(--ssd-primary); }
    .ssd-pagination-wrapper span.current { background: var(--ssd-primary); color: white; }

    .ssd-btn-pdf { background: #ef4444; color: white; border: none; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 0.8rem; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
    .ssd-btn-pdf:hover { background: #dc2626; color: white; transform: translateY(-2px); }
    .ssd-btn-essay { background: #8b5cf6; color: white; border: none; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 0.8rem; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
    .ssd-btn-essay:hover { background: #7c3aed; color: white; transform: translateY(-2px); }

    .ssd-eh-table-container { background: var(--ssd-card); border: none; border-radius: 16px; padding: 25px; }
    .ssd-eh-table-title { margin: 0 0 20px 0; font-size: 1.2rem; color: var(--ssd-text); display: flex; align-items: center; gap: 10px; }
    .ssd-eh-table { width: 100%; border-collapse: collapse; min-width: 700px; }
    .ssd-eh-table th, .ssd-eh-table td { padding: 15px 10px; border-bottom: 1px solid var(--ssd-border); text-align: left; }
    .ssd-eh-table th { font-size: 0.8rem; color: var(--ssd-text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
    
    .ssd-eh-grade-badge { padding: 5px 12px; border-radius: 8px; font-weight: 800; font-size: 0.85rem; display: inline-block; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
    .grade-a { color: #10b981; border-color: #10b981; }
    .grade-b { color: #3b82f6; border-color: #3b82f6; }
    .grade-c { color: #f59e0b; border-color: #f59e0b; }
    .grade-s { color: #f97316; border-color: #f97316; }
    .grade-f { color: #ef4444; border-color: #ef4444; }

    .ssd-eh-empty { text-align: center; padding: 60px 20px; background: rgba(255,255,255,0.02); border-radius: 20px; border: 2px dashed var(--ssd-border); grid-column: 1 / -1; }
    .ssd-eh-empty i { font-size: 3rem; color: var(--ssd-text-muted); margin-bottom: 15px; opacity: 0.5; }
    .ssd-eh-empty h3 { margin: 0 0 10px 0; color: var(--ssd-text); font-size: 1.3rem; }
    .ssd-eh-btn-primary { margin-top: 20px; background: var(--ssd-primary); color: white; border: none; padding: 12px 25px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.2s; }

    .ssd-al-progress-container { background: var(--ssd-card); padding: 25px; border-radius: 16px; border: none; margin-bottom: 25px; }
    .ssd-al-prog-row { margin-bottom: 35px; }
    .ssd-al-prog-row:last-child { margin-bottom: 15px; }
    .ssd-al-prog-labels { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.95rem; }
    .ssd-al-prog-labels .sub-name { font-weight: 700; color: var(--ssd-text); }
    .ssd-al-prog-labels .sub-target { color: var(--ssd-text-muted); font-size: 0.85rem; font-weight: 600; }
    .ssd-al-prog-labels .sub-target strong { color: #fbbf24; font-size: 1rem; }

    .ssd-al-prog-track { width: 100%; height: 20px; background: rgba(0,0,0,0.3); border-radius: 10px; position: relative; border: none; }
    .ssd-pb-fill { height: 100%; position: absolute; left: 0; top: 0; border-radius: 10px 0 0 10px; z-index: 1; transition: 1s ease-in-out; }
    .ssd-pb-loss { height: 100%; position: absolute; top: 0; background: repeating-linear-gradient(45deg, #ef4444, #ef4444 10px, #dc2626 10px, #dc2626 20px); z-index: 2; opacity: 0.9; }
    .ssd-pb-win { height: 100%; position: absolute; top: 0; background: repeating-linear-gradient(45deg, #10b981, #10b981 10px, #059669 10px, #059669 20px); z-index: 2; border-radius: 0 10px 10px 0; }
    .ssd-pb-target-line { position: absolute; top: -5px; bottom: -5px; width: 4px; background: #fff; z-index: 3; border-radius:2px; }
    .ssd-pb-marker { position: absolute; top: 26px; transform: translateX(-50%); background: var(--ssd-box-bg); color: #fff; font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; font-weight: bold; z-index: 4; border: none; }
    .ssd-pb-marker.marker-win { background: #10b981; }

    .ssd-fab-al-results { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; z-index: 100; transition: 0.3s; }
    .ssd-fab-al-results:hover { transform: scale(1.1) rotate(15deg); }

    .ssd-al-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(5px); }
    .ssd-al-modal-box { background: var(--ssd-card); width: 90%; max-width: 480px; padding: 30px; border-radius: 20px; border: none; overflow: visible; position: relative; }
    .ssd-al-modal-box .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .ssd-al-modal-box .modal-header h3 { margin: 0; color: #fff; font-size: 1.3rem; }
    .ssd-al-modal-box .close-btn { background: var(--ssd-box-bg); border: none; color: var(--ssd-text-muted); font-size: 1.2rem; cursor: pointer; width:35px; height:35px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition: 0.2s; }
    .ssd-al-modal-box .close-btn:hover { color: #ef4444; }
    .al-input-row { display: flex; gap: 15px; margin-bottom: 15px; }

    .ssd-share-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 99998; display: none; backdrop-filter: blur(5px); }
    .ssd-share-sidebar { position: fixed; background: var(--ssd-card); z-index: 99999; display: flex; flex-direction: column; border-left: 1px solid var(--ssd-border); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); overflow: hidden; }
    
    @media (min-width: 992px) {
        .ssd-share-sidebar { top: 0; right: 0; width: 420px; height: 100vh; transform: translateX(100%); border-radius: 24px 0 0 24px; }
        .ssd-share-sidebar.show { transform: translateX(0); }
    }
    @media (max-width: 991px) {
        .ssd-share-sidebar { bottom: 0; left: 0; width: 100%; height: 80vh; transform: translateY(100%); border-radius: 24px 24px 0 0; }
        .ssd-share-sidebar.show { transform: translateY(0); }
    }

    .ssd-share-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid var(--ssd-border); flex-shrink: 0; }
    .ssd-share-header h3 { margin: 0; color: #fff; font-size: 1.2rem; font-weight: 700; }
    .ssd-share-close { background: var(--ssd-box-bg); border: none; color: var(--ssd-text-muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
    .ssd-share-close:hover { background: #ef4444; color: white; }
    .ssd-share-body-scrollable { flex: 1; overflow-y: auto; padding: 25px; background: var(--ssd-card); }
    .ssd-share-body-scrollable::-webkit-scrollbar { width: 6px; }
    .ssd-share-body-scrollable::-webkit-scrollbar-thumb { background: var(--ssd-border); border-radius: 10px; }
    .ssd-share-fixed-controls { padding: 20px 25px; border-top: 1px solid var(--ssd-border); background: var(--ssd-card); flex-shrink: 0; z-index: 10; }
    .ssd-share-color-label { display: block; color: var(--ssd-text-muted); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; margin-bottom: 12px; text-align: center; }
    .ssd-share-colors-wrap { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 15px; }
    .ssd-swatch { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: 0.2s; }
    .ssd-swatch:hover { transform: scale(1.1); }
    .ssd-swatch.active { border-color: #fff; transform: scale(1.15); }
    .ssd-btn-share-act.download { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: none; padding: 15px; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.2s; width: 100%; display: block; }
    .ssd-btn-share-act.download:hover:not(:disabled) { background: #3b82f6; color: #fff; }

    @media (max-width: 768px) {
        .ssd-eh-header-area { flex-direction: column; align-items: flex-start; padding: 0 5px 15px 5px; margin-bottom: 15px; }
        .ssd-eh-tabs { width: 100%; display: flex; padding: 4px; }
        .ssd-eh-tab-btn { flex: 1; justify-content: center; text-align: center; padding: 10px 0; font-size: 0.85rem; }
        .ssd-eh-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
        .ssd-eh-search-box { width: 100%; }
        .ssd-eh-filter-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
        .ssd-custom-select { min-width: auto; width: 100%; }
        .ssd-eh-grid { grid-template-columns: 1fr; gap: 12px; padding: 0; }
        .ssd-eh-card { flex-direction: row; height: auto; min-height: 120px; align-items: stretch; border-radius: 12px; }
        .ssd-eh-card-img { width: 110px; height: auto; border-bottom: none; border-right: 1px solid var(--ssd-border); }
        .ssd-eh-badge-type { top: 5px; right: 5px; padding: 3px 6px; font-size: 0.55rem; left: 5px; right: auto; }
        .ssd-eh-card-body { padding: 10px 12px; flex: 1; justify-content: center; display: flex; flex-direction: column; }
    }

    /* LIGHT MODE OVERRIDES - FLAT UI */
    body.light-mode .ssd-eh-wrapper {
        --ssd-card: #ffffff;        
        --ssd-box-bg: #f8fafc;
        --ssd-text: #1e293b;        
        --ssd-text-muted: #64748b;  
        --ssd-border: #e2e8f0;      
        --ssd-primary: #2563eb;     
        --ssd-primary-hover: #1d4ed8;
    }
    body.light-mode .ssd-eh-tabs { background: rgba(0, 0, 0, 0.05); }
    body.light-mode .ssd-eh-tab-btn:not(.active) { color: #475569; }
    body.light-mode .ssd-eh-tab-btn:hover:not(.active) { color: #0f172a; }
    body.light-mode .ssd-eh-card-footer { border-top: 1px solid rgba(0, 0, 0, 0.05); }
    body.light-mode .ssd-eh-btn-view { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
    body.light-mode .ssd-eh-btn-view:hover { background: var(--ssd-primary); color: #ffffff; }
    body.light-mode .ssd-eh-grade-badge { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.1); }
    body.light-mode .ssd-eh-table th { color: #475569; border-bottom: 2px solid #e2e8f0; }
    body.light-mode .ssd-eh-empty { background: #f8fafc; border-color: #cbd5e1; }
    body.light-mode .ssd-al-prog-track { background: rgba(0, 0, 0, 0.06) !important; }
    body.light-mode .ssd-pb-target-line { background: #0f172a !important; }
    body.light-mode .ssd-pb-marker { background: #ffffff !important; color: #0f172a !important; }
    body.light-mode .ssd-pb-marker.marker-win { background: #10b981 !important; color: #ffffff !important; }
    body.light-mode .ssd-al-modal-box .modal-header h3 { color: #0f172a !important; }
    body.light-mode .ssd-al-modal-box p { color: #475569 !important; }
    body.light-mode .ssd-al-modal-box p[style*="#fbbf24"] { color: #d97706 !important; }
    body.light-mode .ssd-al-modal-box p[style*="#cbd5e1"] { color: #64748b !important; }
    body.light-mode .ssd-al-modal-box .close-btn { background: #f1f5f9 !important; color: #64748b !important; }
    body.light-mode .ssd-al-modal-box .close-btn:hover { background: #e2e8f0 !important; color: #ef4444 !important; }
    body.light-mode .ssd-option:hover { background: rgba(37, 99, 235, 0.1); color: var(--ssd-primary); }
    body.light-mode .ssd-share-header h3 { color: #0f172a !important; }
    body.light-mode .ssd-share-close { background: #f1f5f9 !important; color: #64748b !important; }
    body.light-mode .ssd-share-close:hover { background: #ef4444 !important; color: #ffffff !important; }
    body.light-mode #ssd-capture-content h3 { color: #0f172a !important; }
    body.light-mode #ssd-capture-content p { color: #64748b !important; }
    body.light-mode .ssd-pie-center-time { background: #ffffff !important; }

    /* --- GLOBAL (Flat Modern Box UI Setup) --- */
    :root {
        --ssd-card: #1C2338;
        --ssd-box-bg: #222d44;
        --ssd-bg: #151A28;
        --ssd-text: #f1f5f9;
        --ssd-text-muted: #94a3b8;
        --ssd-border: #2d3b55;
        --ssd-primary: #3b82f6;
    }

    .ssd-verified-container { max-width: 1100px; margin: 0 auto; padding-bottom: 120px !important; font-family: 'Inter', sans-serif; position: relative; color: var(--ssd-text); }
    .ssd-clean-header.centered-layout { text-align: center; margin-bottom: 30px; padding-top: 10px; position: relative; }
    .ssd-smart-logo-wrap img { max-height: 45px; width: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3)); }
    body.light-mode .ssd-logo-dark { display: none !important; }
    body.light-mode .ssd-logo-light { display: block !important; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1)); }

    /* --- SCROLLING BENEFITS (Double Marquee) --- */
    .ssd-scrolling-benefits-wrapper { overflow: hidden; width: 100%; position: relative; display: flex; flex-direction: column; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
    .ssd-marquee { display: flex; overflow: hidden; user-select: none; }
    .ssd-marquee-track { display: flex; gap: 10px; width: max-content; animation: ssd-scroll-x 35s linear infinite; padding-right: 10px; }
    .ssd-marquee-track.reverse { animation: ssd-scroll-x-reverse 35s linear infinite; }
    @keyframes ssd-scroll-x { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @keyframes ssd-scroll-x-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
    
    .ssd-m-card { background: var(--ssd-box-bg); border: none; border-radius: 30px; padding: 5px 15px 5px 6px; display: flex; align-items: center; gap: 8px; white-space: nowrap; box-shadow: none; backdrop-filter: blur(5px); }
    .ssd-m-card .m-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 0.8rem; }
    .ssd-m-card .m-text { display: flex; flex-direction: column; text-align: left; }
    .ssd-m-card .m-text span { color: var(--ssd-text); font-weight: 700; font-size: 0.75rem; line-height: 1.2; }
    .ssd-m-card .m-text small { color: var(--ssd-text-muted); font-size: 0.6rem; }
    
    .gradient-purple { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
    .gradient-red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
    .gradient-cyan { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
    .gradient-green { background: linear-gradient(135deg, #10b981, #059669); }
    .gradient-orange { background: linear-gradient(135deg, #f97316, #ea580c); }
    .gradient-blue { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
    .gradient-gold { background: linear-gradient(135deg, #fbbf24, #d97706); }
    .gradient-rose { background: linear-gradient(135deg, #e11d48, #be123c); }

    /* --- ACTIVE CARD (SMART MEMBER) --- */
    .ssd-active-dashboard { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
    .ssd-premium-pass { background: var(--ssd-card); border-radius: 24px; overflow: hidden; position: relative; border: none; box-shadow: none; }
    .ssd-premium-pass::before { content:''; position: absolute; top:0; left:0; width:100%; height: 4px; background: linear-gradient(90deg, #3b82f6, #93c5fd); }
    .pass-header { display: flex; align-items: center; gap: 15px; padding: 25px; background: rgba(59, 130, 246, 0.05); }
    .pass-icon { width: 50px; height: 50px; background: transparent; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; }
    
    .spin-icon-wrap i, .spin-icon-wrap svg { animation: slowSpin 6s linear infinite; display: inline-block; }
    @keyframes slowSpin { 100% { transform: rotate(360deg); } }

    .pass-title h3 { margin: 0; font-size: 1.2rem; color: var(--ssd-text); font-weight: 800; }
    .pass-id { font-size: 0.8rem; color: var(--ssd-text-muted); font-family: monospace; }
    .pass-badge { margin-left: auto; background: rgba(59, 130, 246, 0.2); color: #60a5fa; padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; border: none; }
    .pass-body { padding: 25px; text-align: center; }
    .p-label { display: block; font-size: 0.85rem; color: var(--ssd-text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
    .p-value { font-size: 1.5rem; color: var(--ssd-text); font-weight: 700; }
    .pass-divider { height: 1px; background: var(--ssd-border); margin: 20px 0; }
    
    .ssd-digital-clock { display: flex; justify-content: space-between; gap: 12px; margin-top: 15px; }
    .clock-unit { background: var(--ssd-box-bg); border: none; border-radius: 12px; padding: 15px 10px; flex: 1; text-align: center; box-shadow: none; }
    .clock-unit span { display: block; font-size: 1.8rem; font-weight: 800; color: var(--ssd-primary); line-height: 1; margin-bottom: 5px; font-family: 'Courier New', monospace; }
    .clock-unit small { font-size: 0.7rem; color: var(--ssd-text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
    .clock-unit.sec-unit span { color: #60a5fa; }
    
    .pass-footer { background: var(--ssd-box-bg); padding: 15px; text-align: center; border-top: 1px solid var(--ssd-border); }
    .ssd-btn-refresh-sm { background: none; border: none; color: var(--ssd-text-muted); cursor: pointer; font-size: 0.9rem; transition: 0.3s; font-weight: 600; }
    .ssd-btn-refresh-sm:hover { color: var(--ssd-primary); }
    .ssd-btn-refresh-sm i { transition: 0.3s; margin-right: 5px; }
    .ssd-btn-refresh-sm:hover i { transform: rotate(180deg); }
    .ssd-btn-buy-more { background: transparent; border: 1px solid var(--ssd-primary); color: var(--ssd-primary); padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.3s; margin-top: 10px; width: 100%; display: block; }
    .ssd-btn-buy-more:hover { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }

    /* --- LAYOUTS --- */
    .ssd-verified-layout { display: flex; flex-direction: column; width: 100%; }
    .ssd-payment-section { max-width: 800px; margin: 0 auto; width: 100%; }
    .ssd-features-section { width: 100%; }
    
    .ssd-subscription-card { background: var(--ssd-card); border: none; border-radius: 16px; padding: 40px 30px; text-align: center; position: relative; box-shadow: none; }
    
    .ssd-price-display { margin-bottom: 20px; }
    .ssd-price-display span { font-size: 2.5rem; font-weight: 800; color: var(--ssd-text); }
    .ssd-price-display small { font-size: 0.9rem; color: var(--ssd-text-muted); }
    
    /* --- NEW PLANS CONTAINER (Fade Boxes, No Default Borders) --- */
    .wp-plans-container { 
        display: flex; flex-direction: row; gap: 15px; width: 100%; 
        box-sizing: border-box; margin-bottom: 10px; margin-top: 20px; 
    }
    
    .dash-plan-card { 
        background: var(--ssd-box-bg); 
        border: 2px solid transparent; /* No visible border initially */
        padding: 25px 10px; 
        border-radius: 20px; /* Make corners more rounded */
        cursor: pointer; 
        text-align: center; 
        flex: 1; 
        transition: all 0.3s ease; 
        position: relative; 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
    }
    
    .dash-plan-card:hover { 
        background: rgba(59, 130, 246, 0.08); 
        border-color: transparent; /* Ensure no grey border shows on hover */
    }
    
    /* Active State */
    .dash-plan-card.active { 
        border: 2px solid #3b82f6; 
        background: rgba(59, 130, 246, 0.05); 
        transform: scale(1.02);
        z-index: 10;
    }
    
    /* Radio Button styling */
    .wp-plan-radio { 
        width: 20px; 
        height: 20px; 
        border-radius: 50%; 
        border: 2px solid #64748b; 
        margin: 0 auto 12px auto; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        transition: 0.3s;
    }
    .wp-radio-inner { 
        width: 10px; 
        height: 10px; 
        border-radius: 50%; 
        background: transparent; 
        transition: 0.3s; 
    }
    .dash-plan-card.active .wp-plan-radio { border-color: #3b82f6; }
    .dash-plan-card.active .wp-radio-inner { background: #3b82f6; }
    
    .dash-plan-card h4 { margin: 0 0 8px 0; font-weight: 700; color: #f8fafc; font-size: 0.95rem; white-space: nowrap; }
    
    .wp-plan-price { margin: 0; color: #10b981; font-size: 1.15rem; font-weight: 800; }
    
    /* Overlapping Badges */
    .wp-plan-badge { 
        position: absolute; 
        top: -12px; 
        left: 50%; 
        transform: translateX(-50%); 
        font-size: 0.65rem; 
        font-weight: 800; 
        color: white; 
        padding: 3px 10px; 
        border-radius: 20px; 
        white-space: nowrap; 
        z-index: 5; 
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    .badge-popular { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .badge-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }

    /* Payment Grid */
    .ssd-payment-grid { margin: 25px auto; display: flex; flex-direction: column; gap: 8px; max-width: 500px; }
    .ssd-pay-method { background: var(--ssd-box-bg); border: 2px solid transparent; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: 0.2s; position: relative; opacity: 0.7; }
    .ssd-pay-method.selected { box-shadow: inset 0 0 0 1px var(--ssd-primary); background: rgba(59, 130, 246, 0.1); opacity: 1; }
    .ssd-pay-method .m-title { font-weight: 600; color: var(--ssd-text); display: block; font-size: 0.95rem; }
    .ssd-pay-method .m-bal { font-size: 0.8rem; color: var(--ssd-text-muted); }
    .ssd-pay-method .method-check { margin-left: auto; color: var(--ssd-text-muted); }
    .ssd-pay-method.selected .method-check { color: var(--ssd-primary); }
    
    .ssd-btn-subscribe { width: 100%; padding: 16px; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border: none; border-radius: 30px; font-size: 1.05rem; font-weight: 800; cursor: pointer; transition: 0.3s; box-shadow: none; }
    .ssd-btn-subscribe:hover:not(.disabled-btn) { opacity: 0.9; transform: translateY(-2px); }
    .ssd-btn-subscribe.disabled-btn { background: var(--ssd-box-bg) !important; color: var(--ssd-text-muted) !important; cursor: not-allowed !important; border: none; box-shadow: inset 0 0 0 1px var(--ssd-border) !important; }

    /* --- Warning Box --- */
    .ssd-warning-box { max-width: 500px; margin: 0 auto 20px auto; background: rgba(239, 68, 68, 0.1); border: none; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.3); border-radius: 12px; padding: 15px; display: flex; gap: 15px; align-items: flex-start; text-align: left; animation: shake 0.5s; }
    .ssd-warning-box .warning-icon { color: #ef4444; font-size: 1.5rem; margin-top: 2px; }
    .ssd-warning-box .warning-text p { margin: 0 0 5px 0; color: #fca5a5; font-size: 0.85rem; line-height: 1.4; }
    .ssd-btn-deposit-small { display: inline-block; background: #ef4444; color: #fff; padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; margin-top: 5px; text-decoration: none; transition: 0.3s; border: none; cursor: pointer; }
    .ssd-btn-deposit-small:hover { background: #dc2626; transform: translateY(-2px); color: #fff; }
    @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

    /* --- Telegram Style Benefits List (Horizontal Desktop Grid) --- */
    .ssd-premium-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
    .feature-category-col { display: flex; flex-direction: column; }
    .tg-topic-title { color: var(--ssd-text-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin: 0 0 10px 15px; }
    .tg-list-group { background: var(--ssd-card); border-radius: 16px; border: none; overflow: hidden; margin-bottom: 5px; }
    .tg-list-item { display: flex; align-items: center; padding: 12px 15px; cursor: pointer; transition: background 0.2s; border-bottom: 1px solid var(--ssd-border); }
    .tg-list-item:last-child { border-bottom: none; }
    .tg-list-item:hover { background: var(--ssd-box-bg); }
    .tg-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 1.1rem; flex-shrink: 0; }
    .tg-text { margin-left: 15px; display: flex; flex-direction: column; }
    .tg-text h5 { margin: 0 0 2px 0; color: var(--ssd-text); font-size: 0.9rem; font-weight: 600; line-height: 1.2; }
    .tg-text p { margin: 0; color: var(--ssd-text-muted); font-size: 0.75rem; line-height: 1.3; }
    .tg-arrow { margin-left: auto; color: var(--ssd-text-muted); font-size: 0.9rem; transition: 0.2s; }
    .tg-list-item:hover .tg-arrow { color: var(--ssd-text); transform: translateX(3px); }

    @media (max-width: 992px) {
        .ssd-premium-features-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
        .ssd-premium-features-grid { grid-template-columns: 1fr; }
        .wp-plans-container { flex-wrap: wrap; gap: 10px; }
        .dash-plan-card { flex: 1 1 45%; padding: 20px 5px; min-width: 140px; }
        .ssd-price-display span { font-size: 2.2rem; }
    }

    /* MODALS & BOTTOM SHEETS */
    .ssd-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; display: none; align-items: flex-end; justify-content: center; backdrop-filter: blur(8px); }
    .modern-bottom-sheet { background: var(--ssd-card); width: 100% !important; max-width: 100% !important; height: 80vh !important; border-radius: 30px 30px 0 0 !important; padding: 20px 0 0 0; margin: 0 !important; border-top: none; box-shadow: none !important; animation: slideUpSheet 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; display: flex; flex-direction: column; overflow: hidden; position: absolute; bottom: 0; left: 0; right: 0; }
    .sheet-inner-content { max-width: 600px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; flex: 1; padding: 0 25px 30px 25px; }
    .sheet-drag-handle { width: 60px; height: 6px; background: var(--ssd-border); border-radius: 10px; margin: 0 auto 15px; }
    @keyframes slideUpSheet { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

    /* FULL-SCREEN SLIDE-UP MODAL ANIMATION */
    .ssd-fullscreen-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 10000; display: none; align-items: flex-end; justify-content: center; padding: 0; backdrop-filter: blur(5px); }
    .ssd-fs-content { background: var(--ssd-card); width: 100%; max-width: 100%; height: 100vh; position: relative; overflow-y: auto; animation: slideUpFullScreen 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; display: flex; flex-direction: column; }
    @keyframes slideUpFullScreen { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .ssd-close-fs-modal { position: absolute; top: 20px; right: 20px; background: var(--ssd-box-bg); color: var(--ssd-text-muted); border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; transition: 0.3s; z-index: 10; }
    .ssd-close-fs-modal:hover { color: #ef4444; transform: rotate(90deg); }
    .fs-header { padding: 60px 30px; text-align: center; color: white; border-radius: 0 0 40px 40px; box-shadow: none; }
    .fs-header i { font-size: 4rem; margin-bottom: 20px; }
    .fs-header h2 { margin: 0; font-size: 2.5rem; font-weight: 800; }

    /* Checkouts and Success */
    .ssd-checkout-body { padding: 10px 0 0; text-align: center; display: flex; flex-direction: column; flex: 1; }
    .ssd-checkout-body h3 { font-size: 1.8rem; color: var(--ssd-text); margin: 0 0 5px; font-weight: 800; }
    .ssd-checkout-card { background: var(--ssd-box-bg); border: none; border-radius: 20px; padding: 25px; margin: 20px 0; }
    .checkout-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 1.05rem; }
    .c-label { color: var(--ssd-text-muted); }
    .c-value { color: var(--ssd-text); font-weight: 700; }
    .total-row .c-value { font-size: 1.6rem; color: #f59e0b; }
    .ssd-payment-method-preview { font-size: 1rem; color: var(--ssd-text-muted); background: var(--ssd-box-bg); padding: 12px; border-radius: 12px; }
    .ssd-payment-method-preview i { margin-right: 8px; color: var(--ssd-primary); }
    .ssd-btn-confirm-glow { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border: none; border-radius: 16px; font-weight: 700; cursor: pointer; transition: 0.3s; box-shadow: none; }
    .ssd-btn-confirm-glow:hover { opacity: 0.9; transform: translateY(-2px); }
    .modern-checkout-popup { background: var(--ssd-card); border-radius: 24px; padding: 0; border: none; box-shadow: none; overflow: hidden; }
    
    .ssd-topup-card { background: var(--ssd-box-bg); border: 2px solid transparent; border-radius: 12px; padding: 15px; flex: 1; cursor: pointer; transition: 0.2s; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .ssd-topup-card.selected { box-shadow: inset 0 0 0 1px #f59e0b; background: rgba(245, 158, 11, 0.1); }
    .ssd-topup-card h4 { margin: 0 0 5px 0; color: var(--ssd-text); font-size: 0.9rem; }
    .ssd-topup-card .price { color: #f59e0b; font-weight: bold; font-size: 1.1rem; }
    .ssd-topup-card .best-value { position: absolute; top: -8px; background: #f59e0b; color: #fff; font-size: 0.6rem; padding: 2px 8px; border-radius: 10px; font-weight: bold; }
    
    .success-box-modern { background: var(--ssd-card); padding: 40px 30px; border-radius: 24px; text-align: center; max-width: 400px; width: 90%; margin: auto; border: none; box-shadow: none; }
    .text-gradient-gold { background: linear-gradient(135deg, #fbbf24, #d97706); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .ssd-btn-done-modern { background: var(--ssd-box-bg); color: var(--ssd-text); border: none; padding: 12px 25px; border-radius: 12px; font-weight: bold; cursor: pointer; margin-top: 20px; transition: 0.3s; }
    .ssd-btn-done-modern:hover { background: var(--ssd-primary); color: #fff; }

    @media (max-width: 768px) {
        .modern-bottom-sheet { border-radius: 24px 24px 0 0 !important; }
        .ssd-checkout-body h3 { font-size: 1.5rem; }
        .checkout-row { font-size: 0.95rem; }
        .total-row .c-value { font-size: 1.3rem; }
        .sheet-inner-content { padding: 0 20px 20px 20px; }
    }

    /* FLAT UI VARIABLES */
    :root {
        --ssd-card: #1C2338;
        --ssd-box-bg: #222d44;
        --ssd-bg: #151A28;
        --ssd-border: #2d3b55;
        --ssd-primary: #3b82f6;
        --ssd-text-main: #f1f5f9;     
        --ssd-text-dim: #94a3b8;      
        --ssd-accent: #3b82f6;        
    }

    /* FEED WRAPPER */
    .ssd-feed-wrapper { max-width: 680px; margin: 0 auto; background: transparent; }

    /* HEADER */
    .ssd-feed-header-seamless { display: flex; justify-content: space-between; align-items: center; padding: 20px 16px; border-bottom: 1px solid var(--ssd-border); }
    .ssd-feed-intro h2 { margin: 0; font-size: 1.35rem; color: var(--ssd-text-main); font-weight: 700; }
    .ssd-feed-intro p { margin: 2px 0 0 0; color: var(--ssd-text-dim); font-size: 0.85rem; }
    .ssd-nav-avatar-img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ssd-accent); object-fit: cover; cursor: pointer; }
    .ssd-header-create-btn { background: var(--ssd-accent); border: none; width: 35px; height: 35px; border-radius: 50%; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: 0.2s; box-shadow: none; }
    .ssd-header-create-btn:hover { background: #2563eb; transform: scale(1.1); }

    /* FILTERS */
    .ssd-feed-filters-seamless { display: flex; gap: 10px; padding: 12px 16px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; background: var(--ssd-bg); z-index: 100; border-bottom: 1px solid var(--ssd-border); }
    .ssd-feed-filters-seamless::-webkit-scrollbar { display: none; }
    .ssd-filter-btn { background: var(--ssd-box-bg); border: none; color: var(--ssd-text-dim); cursor: pointer; padding: 6px 18px; border-radius: 20px; font-weight: 600; font-size: 0.85rem; white-space: nowrap; transition: 0.3s; box-shadow: none; }
    .ssd-filter-btn.active { background: var(--ssd-accent); color: #fff; }

    /* STORIES TRAY */
    .ssd-stories-tray-wrapper { padding: 15px 0; border-bottom: 1px solid var(--ssd-border); background: transparent; }
    .ssd-stories-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
    .ssd-stories-scroll::-webkit-scrollbar { display: none; }
    .ssd-story-card { position: relative; width: 90px; height: 150px; border-radius: 12px; overflow: hidden; cursor: pointer; flex-shrink: 0; transition: transform 0.2s; background-color: var(--ssd-box-bg); border: none; box-shadow: none; }
    .ssd-story-card:hover { transform: scale(1.02); }
    .ssd-story-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ssd-story-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(21,26,40,0.9) 0%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 10px; }
    .ssd-story-name-text { color: #fff; font-size: 11px; font-weight: 600; text-align: center; width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ssd-create-story-footer { position: absolute; bottom: 0; width: 100%; height: 28%; background: var(--ssd-card); display: flex; align-items: center; justify-content: center; flex-direction: column; border: none; }
    .ssd-plus-btn-circle { position: absolute; top: -15px; background: var(--ssd-accent); color: #fff; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--ssd-card); font-size: 1rem; }
    .ssd-create-text { margin-top: 15px; font-size: 11px; color: #fff; font-weight: 600; }

    /* --- MODAL SLIDE ANIMATIONS & BOTTOM SHEET LAYOUT --- */
    .ssd-modal-overlay { 
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
        background: rgba(0, 0, 0, 0.85); z-index: 100000; 
        display: none; justify-content: center; align-items: flex-end; 
        backdrop-filter: blur(5px); 
        padding: 0 !important; margin: 0 !important;
    }
    
    .ssd-fb-modal-box { 
        background: var(--ssd-card); width: 100%; max-width: 600px; 
        height: 75vh; 
        border-radius: 20px 20px 0 0; box-shadow: none; 
        border: none; 
        display: flex; flex-direction: column; 
        animation: ssdSlideUp 0.3s ease-out forwards; 
        position: relative; margin: 0 auto; 
    }
    
    @keyframes ssdSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

    @media (max-width: 768px) {
        .ssd-modal-overlay { align-items: flex-end !important; }
        .ssd-fb-modal-box { 
            width: 100% !important; max-width: 100% !important; margin: 0 !important; 
            border-radius: 20px 20px 0 0 !important;
            position: absolute !important; bottom: 0 !important; left: 0 !important;
        } 
    }

    .ssd-fb-modal-header { padding: 15px 20px; border-bottom: 1px solid var(--ssd-border); display: flex; justify-content: space-between; align-items: center; }
    .ssd-fb-modal-header h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ssd-text-main); text-align: center; flex-grow: 1; }
    .ssd-modal-close-btn { background: var(--ssd-box-bg); border: none; color: var(--ssd-text-dim); width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; box-shadow: none; }
    .ssd-modal-close-btn:hover { background: var(--ssd-border); color: #fff; transform: rotate(90deg); }
    
    .ssd-fb-modal-body { padding: 20px; flex-grow: 1; overflow-y: auto; }
    
    .ssd-fb-avatar { width: 45px !important; height: 45px !important; min-width: 45px !important; min-height: 45px !important; border-radius: 50% !important; object-fit: cover !important; border: none !important; background-color: var(--ssd-box-bg); display: block !important; }
    
    .ssd-fb-post-btn-top { background: var(--ssd-accent); color: #fff; border: none; padding: 8px 20px; border-radius: 20px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: 0.2s; box-shadow: none; }
    .ssd-fb-post-btn-top:hover { background: #2563eb; }
    
    .ssd-fb-textarea { width: 100%; border: none; background: transparent; color: #ffffff !important; font-size: 1.1rem; resize: none; min-height: 80px; outline: none; margin-bottom: 15px; font-family: inherit; }
    
    .ssd-photo-placeholder-box { border: 1px dashed var(--ssd-border); border-radius: 8px; padding: 8px; margin-bottom: 15px; cursor: pointer; display: block; background: transparent; }
    .ssd-placeholder-inner { background: var(--ssd-box-bg); border-radius: 6px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ssd-text-main); transition: 0.2s; border: none; }
    .ssd-placeholder-inner:hover { background: var(--ssd-bg); }
    .ssd-icon-circle { background: var(--ssd-card); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
    
    .ssd-list-item-style { display: flex; align-items: center; gap: 15px; padding: 12px 15px; background: var(--ssd-box-bg); border: none; border-radius: 12px; cursor: pointer; transition: 0.2s; width: 100%; box-sizing: border-box; text-align: left; }
    .ssd-list-item-style:hover { background: var(--ssd-bg); transform: translateX(5px); }
    .ssd-list-item-style .icon-wrap { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
    .ssd-list-item-style span { color: var(--ssd-text-main); font-weight: 600; font-size: 0.95rem; }

    /* AUXILIARY */
    #ssd-story-viewer-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 200000; display: none; flex-direction: column; align-items: center; justify-content: center; }
    .story-view-img { max-width: 100%; max-height: 90vh; object-fit: contain; }
    .story-progress-bar { width: 95%; height: 3px; background: rgba(255,255,255,0.3); position: absolute; top: 15px; border-radius: 2px; z-index: 200002; }
    .story-progress-fill { height: 100%; background: #fff; width: 0%; transition: width 5s linear; }
    .story-header-info { position: absolute; top: 30px; left: 0; width: 100%; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; z-index: 200002; color: #fff; }
    .story-close-btn { background: none; border: none; color: #fff; font-size: 2.5rem; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
    #ssd-story-user-name { font-weight: 700; font-size: 1.1rem; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

    /* --- SEAMLESS POST FEED STYLES --- */
    .ssd-post-card { background: transparent !important; border: none !important; border-bottom: 1px solid var(--ssd-border) !important; border-radius: 0 !important; margin-bottom: 0px !important; padding: 20px 0 !important; width: 100% !important; box-shadow: none !important; }
    .ssd-post-header { display: flex; justify-content: space-between; align-items: center !important; padding: 0 16px 12px 16px; border: none !important; }
    .ssd-post-header > div:first-child { display: flex; align-items: center !important; gap: 10px; }
    .ssd-post-header > div:first-child img { margin: 0 !important; }
    .ssd-user-name { font-weight: 700; color: var(--ssd-text-main); font-size: 0.95rem; display: flex !important; align-items: center !important; gap: 5px; line-height: 1; margin-bottom: 4px; }
    .ssd-post-time { font-size: 0.75rem; color: var(--ssd-text-dim); margin-top: 0 !important; line-height: 1; display: block; }
    .ssd-user-name .ssd-verified-badge-wrap, .ssd-user-name svg { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
    .ssd-post-content-area { padding: 0 16px 12px 16px; }
    .ssd-post-excerpt { color: var(--ssd-text-main) !important; font-size: 0.95rem; line-height: 1.6; padding: 0 16px 12px; display: block; }
    .ssd-read-more-link { color: var(--ssd-accent); cursor: pointer; font-weight: 600; margin-left: 5px; display: inline-block; }
    .ssd-post-img-container { width: 100%; margin-top: 10px; margin-bottom: 5px; background: transparent !important; cursor: pointer; padding: 0 !important; clear: both; display: block; }
    .ssd-post-img { width: 100%; height: auto; display: block; border-radius: 0; }
    .ssd-post-actions-linkedin { display: flex; padding: 10px 16px; gap: 30px; justify-content: flex-start; }
    .ssd-action-item { background: none; border: none; color: var(--ssd-text-dim); font-weight: 600; font-size: 0.9rem; padding: 5px 0; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
    .ssd-action-item:hover { color: var(--ssd-text-main); }
    
    /* COMMENT DRAWER (FLAT) */
    .ssd-comment-drawer-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999991; backdrop-filter: blur(2px); }
    .ssd-comment-drawer { position: fixed; bottom: -100%; left: 50%; transform: translateX(-50%); width: 100%; max-width: 500px; height: 75vh; background: var(--ssd-card); border-radius: 15px 15px 0 0; z-index: 999992; transition: bottom 0.3s ease-out; display: flex; flex-direction: column; border: none; box-shadow: none; }
    .ssd-comment-drawer.open { bottom: 0; }
    .ssd-drawer-header { padding: 15px 20px; border-bottom: 1px solid var(--ssd-border); display: flex; justify-content: space-between; align-items: center; color: var(--ssd-text-main); font-weight: 600; font-size: 1.1rem; }
    .ssd-drawer-close { background:none; border:none; color:var(--ssd-text-dim); font-size:1.8rem; cursor:pointer; transition: 0.2s; }
    .ssd-drawer-close:hover { color: #ef4444; }
    .ssd-drawer-body { flex: 1; overflow-y: auto; padding: 15px; }
    .ssd-drawer-footer { padding: 15px; border-top: 1px solid var(--ssd-border); background: var(--ssd-card); display: flex; gap: 10px; align-items: center; }
    .ssd-drawer-input { flex: 1; background: var(--ssd-box-bg); border: none; color: #fff; padding: 10px 15px; border-radius: 20px; outline: none; }
    .ssd-drawer-send-btn { background: var(--ssd-accent); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: none; }

    @media (max-width: 768px) { 
        .ssd-main-content, #ssd-main-view-container { padding: 0 !important; } 
        .ssd-feed-wrapper { width: 100%; } 
    }

/* =========================================================
   1. Modern Edge-to-Edge App Container (FLAT UI)
   ========================================================= */
:root {
    --ssd-chat-bg: #151A28;
    --ssd-chat-sidebar: #1C2338;
    --ssd-chat-panel: #151A28;
    --ssd-chat-border: #2d3b55;
    --ssd-chat-primary: #3b82f6;
    --ssd-chat-text: #f1f5f9;
    --ssd-chat-muted: #94a3b8;
    --ssd-chat-received-bg: #222d44;
    --ssd-chat-sent-bg: #3b82f6;
}

.ssd-telegram-app-container { 
    position: relative; 
    width: 100%; 
    min-height: 600px; 
    background: transparent; 
    overflow: hidden; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    color: var(--ssd-chat-text); 
    display: flex; 
    z-index: 100; 
}

/* Desktop Full View */
@media (min-width: 769px) { 
    .ssd-telegram-app-container { 
        width: 100%; 
        margin: 0; 
        height: calc(100vh - 70px); 
        border-radius: 0; 
        background: var(--ssd-chat-bg); 
    } 
}

/* Mobile Full View */
@media (max-width: 768px) { 
    .ssd-telegram-app-container { 
        position: relative !important; 
        width: 100% !important; 
        height: calc(100vh - 70px) !important; 
        border-radius: 0 !important; 
        margin: 0 !important; 
        z-index: 100; 
        background: var(--ssd-chat-bg); 
    } 
    .ssd-telegram-app-container.chat-active, .ssd-telegram-app-container.group-create-active { 
        position: fixed !important; 
        top: 0 !important; 
        left: 0 !important; 
        right: 0 !important; 
        bottom: 0 !important; 
        width: 100vw !important; 
        height: 100vh !important; 
        height: 100dvh !important; 
        z-index: 9999999 !important; 
        background: var(--ssd-chat-bg); 
    }
    .ssd-app-header { 
        padding-top: env(safe-area-inset-top); 
        height: calc(70px + env(safe-area-inset-top)); 
    } 
    .ssd-chat-footer { 
        width: 92% !important; 
        bottom: calc(20px + env(safe-area-inset-bottom)) !important; 
    } 
}

.ssd-app-pane { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; display: flex; flex-direction: column; transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, visibility 0.3s ease; }
#pane-chat-list { transform: translateX(0); z-index: 1; opacity: 1; visibility: visible; background: transparent; }

/* Thread Background */
#pane-chat-thread { 
    transform: translateX(100%); z-index: 2; opacity: 0; visibility: hidden; 
    background-color: var(--ssd-chat-panel); 
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M10 10c0-5 5-5 5 0s-5 5-5 0zm20 30c-2-2-2-5 0-7s5-2 7 0 2 5 0 7-5 2-7 0zm40-10a5 5 0 1 0 10 0 5 5 0 1 0-10 0zm30 40c0-5 5-5 5 0s-5 5-5 0zm-70 30c-2-2-2-5 0-7s5-2 7 0 2 5 0 7-5 2-7 0zm60 20a5 5 0 1 0 10 0 5 5 0 1 0-10 0z'/%3E%3Ctext x='30' y='25' font-size='12'%3E%E2%9C%8E%3C/text%3E%3Ctext x='80' y='35' font-size='10'%3E%E2%98%85%3C/text%3E%3Ctext x='60' y='60' font-size='14'%3E%E2%88%9E%3C/text%3E%3Ctext x='15' y='75' font-size='10'%3E%E2%9C%94%3C/text%3E%3Ctext x='95' y='80' font-size='12'%3E%E2%88%91%3C/text%3E%3Ctext x='45' y='100' font-size='12'%3E%E2%9A%9B%3C/text%3E%3Ctext x='75' y='15' font-size='10'%3E%F0%9F%92%A1%3C/text%3E%3Ctext x='10' y='110' font-size='14'%3E%E2%9C%A8%3C/text%3E%3Ctext x='100' y='110' font-size='10'%3E%E2%8C%9B%3C/text%3E%3Ctext x='35' y='55' font-size='12'%3E%F0%9F%8E%93%3C/text%3E%3Ctext x='85' y='55' font-size='10'%3E%F0%9F%93%9A%3C/text%3E%3Ctext x='55' y='85' font-size='12'%3E%F0%9F%94%8D%3C/text%3E%3C/g%3E%3C/svg%3E"); 
    background-size: 150px, 100% 100%; background-attachment: fixed;
}

#ssd-create-group-view { transform: translateX(100%); z-index: 3; opacity: 0; visibility: hidden; background: var(--ssd-chat-sidebar); overflow-y: auto; display: block; }
.ssd-telegram-app-container.chat-active #pane-chat-list, .ssd-telegram-app-container.group-create-active #pane-chat-list { transform: translateX(-30%); opacity: 0.5; pointer-events: none; }
.ssd-telegram-app-container.chat-active #pane-chat-thread, .ssd-telegram-app-container.group-create-active #ssd-create-group-view { transform: translateX(0); opacity: 1; visibility: visible; z-index: 10; }

.ssd-app-header { height: 70px; background: var(--ssd-chat-sidebar); display: flex; align-items: center; padding: 0 15px; gap: 10px; border-bottom: none; z-index: 10; }

/* Chat List Specific Header Override */
#pane-chat-list .ssd-app-header { height: auto; padding: 20px 15px 5px 15px; background: transparent; }

.ssd-search-bar { position: relative; flex: 1; background: var(--ssd-chat-sidebar); border: none; border-radius: 16px; display: flex; align-items: center; padding: 0 15px; height: 48px; transition: 0.3s; box-shadow: none; }
.ssd-search-bar:focus-within { box-shadow: inset 0 0 0 1px var(--ssd-chat-primary); background: var(--ssd-chat-sidebar); }
.ssd-search-bar i { color: var(--ssd-chat-muted); font-size: 16px; margin-right: 8px; }
#ssd-global-search { border: none; background: transparent; width: 100%; color: var(--ssd-chat-text); outline: none; font-size: 15px; }
#ssd-global-search::placeholder { color: var(--ssd-chat-muted); }

/* CHAT LIST BOX (Rounded Box) */
.ssd-list-scrollable { 
    flex: 1; 
    overflow-y: auto; 
    overflow-x: hidden;
    padding: 10px; 
    margin: 0 15px 15px 15px; 
    background: var(--ssd-chat-sidebar); 
    border-radius: 20px; 
    box-shadow: none;
}
.ssd-list-scrollable::-webkit-scrollbar { width: 5px; }
.ssd-list-scrollable::-webkit-scrollbar-thumb { background: var(--ssd-chat-border); border-radius: 10px; }

/* CHAT LIST ITEMS (FLAT) */
.chat-list-item { display: flex; padding: 10px 15px; cursor: pointer; border-radius: 12px; margin-bottom: 2px; transition: 0.2s; align-items: center; position: relative; background: transparent; }
.chat-list-item:hover, .chat-list-item.active { background: var(--ssd-chat-received-bg); }
.chat-list-avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; object-fit: cover; border: none; background: var(--ssd-chat-received-bg); }
.chat-list-info { flex: 1; overflow: hidden; }
.chat-list-name { font-weight: 600; font-size: 15px; margin: 0 0 3px 0; color: var(--ssd-chat-text); display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-preview { font-size: 12.5px; color: var(--ssd-chat-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 90%; }
.chat-list-right { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 10px; }
.chat-unread-badge { background: var(--ssd-chat-primary); color: #fff; font-size: 11px; font-weight: 800; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: none; }
.chat-options-btn { background: transparent; border: none; color: var(--ssd-chat-muted); font-size: 16px; cursor: pointer; padding: 5px; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.chat-options-btn:hover, .chat-options-btn.active { background: var(--ssd-chat-received-bg); color: var(--ssd-chat-text); }

/* DROPDOWNS */
.chat-item-dropdown { position: absolute; right: 20px; top: 45px; background: var(--ssd-chat-sidebar); border: none; border-radius: 12px; box-shadow: none; z-index: 100; overflow: hidden; display: none; min-width: 140px; padding: 5px; }
.chat-item-dropdown.show { display: block; animation: fadeIn 0.2s; }
.chat-item-dropdown button { width: 100%; text-align: left; padding: 10px 15px; background: transparent; border: none; color: var(--ssd-chat-text); font-size: 13px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px; border-radius: 8px; }
.chat-item-dropdown button:hover { background: var(--ssd-chat-received-bg); }
.chat-item-dropdown button.danger { color: #ef4444; }
.chat-item-dropdown button.danger:hover { background: rgba(239, 68, 68, 0.1); }

.ssd-floating-dropdown { position: absolute; top: 100%; margin-top: 10px; left: 0; right: 0; width: 100%; background: var(--ssd-chat-sidebar); border: none; border-radius: 16px; box-shadow: none; max-height: 400px; overflow-y: auto; display: none; z-index: 999999 !important; }

/* FLOATING NEW BTN */
.ssd-floating-new-btn { position: absolute; bottom: 30px; right: 30px; background: var(--ssd-chat-primary); color: #ffffff; width: 60px; height: 60px; border-radius: 50%; border: none; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: none; z-index: 50; }
.ssd-floating-new-btn:hover { transform: scale(1.1) translateY(-5px); background: #2563eb; }

/* HEADER INFO */
.chat-header-info { display: flex; align-items: center; flex: 1; cursor: pointer; overflow: hidden; }
#chat-header-img { width: 42px; height: 42px; border-radius: 50%; margin-right: 12px; object-fit: cover; flex-shrink: 0; background: var(--ssd-chat-received-bg); border: none; }
#chat-header-name { margin: 0; font-size: 16px; font-weight: 600; color: var(--ssd-chat-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.chat-status-text { font-size: 12px; color: var(--ssd-chat-primary); display: block; }
.ssd-back-btn { background: transparent; border: none; color: var(--ssd-chat-text); font-size: 20px; cursor: pointer; margin-right: 10px; padding: 5px; }

/* CHAT MESSAGES */
.ssd-chat-messages-area { flex: 1; padding: 20px 20px 100px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.chat-message { max-width: 85%; display: flex; flex-direction: column; margin-bottom: 5px; background: transparent !important; }
.chat-message.sent { align-self: flex-end; }
.chat-message.received { align-self: flex-start; }

.msg-content-wrapper { padding: 10px 16px !important; border-radius: 18px !important; font-size: 14.5px !important; line-height: 1.5 !important; box-shadow: none !important; word-break: break-word; display: inline-block; border: none !important; overflow: hidden !important; position: relative; }
.msg-text-display { color: inherit !important; background: transparent !important; }
.chat-message.sent .msg-content-wrapper { background: var(--ssd-chat-sent-bg) !important; color: #ffffff !important; border-bottom-right-radius: 4px !important; }
.chat-message.sent .msg-text-display, .chat-message.sent .msg-content-wrapper * { color: #ffffff !important; }
.chat-message.received .msg-content-wrapper { background: var(--ssd-chat-received-bg) !important; color: var(--ssd-chat-text) !important; border-bottom-left-radius: 4px !important; }

/* AI Links */
.ssd-ai-link-btn { display: inline-block; background: var(--ssd-chat-primary); color: #ffffff !important; padding: 8px 18px; border-radius: 12px; text-decoration: none !important; font-weight: bold; margin-top: 10px; font-size: 0.85rem; box-shadow: none; transition: 0.3s; border: none; }
.ssd-ai-link-btn:hover { background: #2563eb; transform: translateY(-2px); color:#fff !important; }

.ai-stop-btn { background: #ef4444 !important; color: white !important; animation: pulseStop 1.5s infinite; }
@keyframes pulseStop { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* CHAT FOOTER & INPUT */
.ssd-chat-footer { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 700px; z-index: 30; background: var(--ssd-chat-sidebar); border: none; border-radius: 25px; padding: 8px 15px; display: flex; align-items: flex-end; gap: 8px; box-shadow: none; transition: bottom 0.3s; }
#ssd-chat-input { flex: 1; background: transparent !important; border: none; color: var(--ssd-chat-text) !important; padding: 10px 5px; font-size: 0.95rem; outline: none; resize: none; max-height: 120px; overflow-y: auto; font-family: inherit; line-height: 1.4; }
#ssd-chat-input::-webkit-scrollbar { width: 0px; }
#ssd-chat-input::placeholder { color: var(--ssd-chat-muted); }

.chat-action-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: var(--ssd-chat-muted); cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; margin-bottom:2px; }
.chat-action-btn:hover { background: var(--ssd-chat-received-bg); color: var(--ssd-chat-text); }
.chat-action-btn.send-btn { background: var(--ssd-chat-primary); color: white; width: 40px; height: 40px; box-shadow: none; margin-bottom:0px; }

#ssd-ai-prompts-menu { position: absolute; bottom: 50px; left: -10px; background: var(--ssd-chat-sidebar); border: none; border-radius: 16px; box-shadow: none; width: 280px; z-index: 100; display: none; padding: 10px; }
#ssd-ai-prompts-menu button { width: 100%; text-align: left; padding: 10px 15px; background: transparent; border: none; color: var(--ssd-chat-text); font-size: 13px; cursor: pointer; transition: 0.2s; border-radius: 8px; display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
#ssd-ai-prompts-menu button:hover { background: var(--ssd-chat-received-bg); color: var(--ssd-chat-primary); }

.custom-audio-player { display:flex; align-items:center; gap:10px; background:var(--ssd-chat-received-bg); padding:5px 15px 5px 5px; border-radius:30px; width:fit-content; border: none;}
.audio-btn { width:35px; height:35px; border-radius:50%; background:var(--ssd-chat-primary); color:white; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:0.2s; box-shadow: none;}
.audio-wave { display:flex; align-items:center; gap:3px; height:20px; }
.wave-bar { width:4px; background:var(--ssd-chat-muted); border-radius:2px; transition:0.2s; height:6px; }
.wave-bar.playing { background:var(--ssd-chat-primary); animation:waveAnim 1s infinite ease-in-out; }
.wave-bar:nth-child(2).playing { animation-delay:0.2s; }
.wave-bar:nth-child(3).playing { animation-delay:0.4s; }
.wave-bar:nth-child(4).playing { animation-delay:0.2s; }
.wave-bar:nth-child(5).playing { animation-delay:0.5s; }
@keyframes waveAnim { 0%, 100% { height:6px; } 50% { height:18px; } }

/* LIGHT MODE OVERRIDES */
body.light-mode .ssd-telegram-app-container, body.light-mode .ssd-app-pane { background-color: transparent; color: #0f172a; }
body.light-mode .ssd-app-header { background: transparent; border-bottom: none; }
body.light-mode #pane-chat-list { background: transparent; }
body.light-mode #ssd-create-group-view { background: #ffffff !important; }
@media (min-width: 769px) { body.light-mode .ssd-telegram-app-container { background: #f8fafc; } }

body.light-mode .ssd-search-bar { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; }
body.light-mode .ssd-search-bar:focus-within { box-shadow: inset 0 0 0 1px var(--ssd-chat-primary); background: #ffffff; }
body.light-mode #ssd-global-search { color: #0f172a; }
body.light-mode #ssd-global-search::placeholder { color: #64748b; }
body.light-mode .ssd-mobile-exit-btn, body.light-mode .ssd-back-btn, body.light-mode .chat-action-btn { color: #64748b; }

/* Light Mode Overrides for Filters and Chat Box */
body.light-mode .chat-filter-btn:not(.active) { background: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #64748b !important; }
body.light-mode .ssd-list-scrollable { background: #ffffff; border: 1px solid #e2e8f0; }

body.light-mode .chat-list-item:hover { background: #f1f5f9; }
body.light-mode .chat-list-avatar { border-color: #e2e8f0; background: #e2e8f0; }

body.light-mode .chat-item-dropdown, body.light-mode .ssd-floating-dropdown { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
body.light-mode .chat-item-dropdown button { color: #475569; }
body.light-mode .chat-item-dropdown button:hover { background: #f8fafc; color: #0f172a; }
body.light-mode .chat-item-dropdown button.danger:hover { background: #fef2f2; color: #ef4444; }
body.light-mode #ssd-ai-prompts-menu { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 10px 40px rgba(0,0,0,0.05); }
body.light-mode #ssd-ai-prompts-menu button { color: #475569; }
body.light-mode #ssd-ai-prompts-menu button:hover { background: #f8fafc; color: var(--ssd-chat-primary); }

body.light-mode #pane-chat-thread {
    background-color: #e2e8f0;
    background-image: none;
}
body.light-mode .chat-message { background: transparent !important; }
body.light-mode .chat-message.received .msg-content-wrapper { background: #ffffff !important; color: #1e293b !important; border: none !important; border-bottom-left-radius: 4px !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; }
body.light-mode .chat-message.sent .msg-content-wrapper { background: var(--ssd-chat-primary) !important; color: #ffffff !important; border: none !important; box-shadow: none !important; border-bottom-right-radius: 4px !important; }
body.light-mode .chat-message.sent .msg-text-display, body.light-mode .chat-message.sent .msg-content-wrapper * { color: #ffffff !important; }
body.light-mode .ssd-chat-footer { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 10px 40px rgba(0,0,0,0.05); }
body.light-mode #ssd-chat-input { color: #0f172a !important; }
body.light-mode .ssd-ai-link-btn { color: #ffffff !important; border: none; }

    /* ADVANCED CSS NATIVE STYLED SELECTS & INPUTS */
    :root {
        --ssd-card: #1C2338;
        --ssd-box-bg: #222d44;
        --ssd-bg: #151A28;
        --ssd-text: #f1f5f9;
        --ssd-text-muted: #94a3b8;
        --ssd-border: #2d3b55;
        --ssd-primary: #3b82f6;
    }

    .ssd-adv-select, .ssd-adv-input {
        appearance: none; -webkit-appearance: none; -moz-appearance: none;
        background-color: var(--ssd-box-bg) !important; color: var(--ssd-text) !important; border: none !important;
        padding: 12px 40px 12px 15px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; width: 100%; outline: none;
        transition: all 0.3s ease; box-shadow: none; color-scheme: dark; 
    }
    .ssd-adv-select {
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important; background-position: right 15px center !important; background-size: 16px !important;
    }
    .ssd-adv-input { padding: 12px 15px; cursor: text; }
    .ssd-adv-select:focus, .ssd-adv-select:hover, .ssd-adv-input:focus, .ssd-adv-input:hover { box-shadow: inset 0 0 0 1px var(--ssd-primary) !important; background-color: var(--ssd-box-bg) !important; }
    .ssd-adv-select.grade-select { padding: 8px 30px 8px 12px; color: #f59e0b !important; background-color: var(--ssd-box-bg) !important; font-size: 0.85rem; width: auto; min-width: 90px; }
    .ssd-adv-select option { background-color: var(--ssd-card); color: var(--ssd-text); padding: 10px; }

    /* Modals Overlay */
    #wp-settings-overlay, #wp-payment-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); z-index: 99998; display: none; opacity: 0; transition: opacity 0.3s ease-out; }
    
    /* Settings Modal */
    .wp-settings-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; max-width: 100%; max-height: 100vh; background: var(--ssd-bg); border-radius: 0; z-index: 99999; padding: 40px; box-sizing: border-box; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow-y: auto; border: none; }
    .wp-settings-modal.open { transform: translateY(0); }
    .settings-inner-container { max-width: 800px; margin: 0 auto; background: var(--ssd-card); padding: 30px; border-radius: 20px; border: none; }
    .settings-grid-wrapper { display: flex; gap: 20px; }

    /* Payment Modal */
    .wp-payment-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 70%; max-width: 800px; max-height: 90vh; background: var(--ssd-bg); border-radius: 20px; z-index: 99999; padding: 30px; box-sizing: border-box; display: none; opacity: 0; transition: all 0.3s ease; overflow-y: auto; border: none; }
    .wp-payment-modal.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }

    /* Slider Styles */
    .camp-date-slider-wrapper { width: 100%; overflow: hidden; position: relative; margin-bottom: 20px; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); }
    .camp-date-slider { display: flex; align-items: center; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 0; }
    .camp-date-slider::-webkit-scrollbar { display: none; }
    .camp-date-card { min-width: 95px; height: 105px; background: var(--ssd-box-bg); border: none; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; scroll-snap-align: center; transition: transform 0.3s, opacity 0.3s, background 0.3s; cursor: pointer; flex-shrink: 0; transform: scale(0.7); opacity: 0.3; }
    .camp-date-card.adj-1 { transform: scale(0.85); opacity: 0.6; }
    .camp-date-card.focused { transform: scale(1.05); opacity: 1; box-shadow: inset 0 0 0 1px var(--ssd-primary); z-index: 10; }
    .camp-date-month { font-size: 0.7rem; font-weight: 800; color: var(--ssd-text-muted); letter-spacing: 0.5px; }
    .camp-date-num { font-size: 1.8rem; font-weight: 800; color: var(--ssd-text); margin: 2px 0 6px 0; line-height: 1; }
    .camp-date-lbl { font-size: 0.58rem; font-weight: 700; color: var(--ssd-primary); background: rgba(59, 130, 246, 0.1); padding: 4px 10px; border-radius: 12px; }
    .camp-date-card.focused .camp-date-month, .camp-date-card.focused .camp-date-num { color: var(--ssd-primary) !important; }
    .camp-date-card.focused .camp-date-lbl { background: var(--ssd-primary); color: #ffffff; }

    /* Grids & Boxes */
    .camp-stat-box { background: var(--ssd-card); border: none; border-radius: 16px; padding: 25px; }
    .camp-stats-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 25px; }
    .camp-stat-box-small { background: var(--ssd-box-bg); border: none; border-radius: 14px; padding: 15px 5px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
    .c-small-val { font-size: 1.2rem; font-weight: 900; color: var(--ssd-text); margin-bottom: 4px; }
    .c-small-lbl { font-size: 0.65rem; color: var(--ssd-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
    .al-subjects-row { display: flex; gap: 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; -webkit-overflow-scrolling: touch; width: 100%; }
    .al-subjects-row::-webkit-scrollbar { display: none; }
    .al-sub-tag { flex-shrink: 0; white-space: nowrap; }

    /* Tab Bar Design */
    .wp-dash-tabs-header { display: flex; flex-direction: row; background: var(--ssd-box-bg); padding: 6px; border-radius: 100px; max-width: 450px; margin: 0 auto 30px auto; border: none; position: relative; }
    .wp-dt-btn { flex: 1; background: transparent; border: none; color: var(--ssd-text-muted); padding: 12px 15px; font-size: 0.9rem; font-weight: 600; border-radius: 100px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 2; white-space: nowrap; }
    .wp-dt-btn:hover { color: var(--ssd-text); }
    .wp-dt-btn.active { background: var(--ssd-primary); color: white; }
    .wp-dt-content { display: none; }
    .wp-dt-content.active { display: block; animation: fadeIn 0.4s; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    /* Suggestion Cards */
    .ssd-eh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .ssd-eh-card { background: var(--ssd-card); border-radius: 16px; overflow: hidden; border: none; transition: all 0.3s ease; display: flex; flex-direction: column; position: relative; }
    .ssd-eh-card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--ssd-primary); }
    .ssd-eh-card-img { height: 130px; background-size: cover; background-position: center; position: relative; border: none; }
    .ssd-eh-card-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(21,26,40,0.1), rgba(21,26,40,0.8)); }
    .ssd-eh-badge-type { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; color: white; letter-spacing: 0.5px; z-index: 2; }
    .ssd-eh-badge-type.mcq { background: linear-gradient(135deg, #0ea5e9, #2563eb); } .ssd-eh-badge-type.essay { background: linear-gradient(135deg, #ec4899, #db2777); }
    .ssd-eh-card-body { padding: 15px; flex: 1; display: flex; flex-direction: column; }
    .ssd-eh-card-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ssd-text-muted); margin-bottom: 10px; font-weight: 600; }
    .ssd-eh-card-meta .sub i { color: var(--ssd-primary); }
    .ssd-eh-card-title { margin: 0 0 10px 0; font-size: 1.05rem; line-height: 1.4; color: var(--ssd-text); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .ssd-eh-card-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 12px; }
    .ssd-eh-btn-view { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 10px; background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-radius: 10px; font-weight: 700; text-decoration: none; transition: 0.2s; box-sizing: border-box; }
    .ssd-eh-btn-view:hover { background: var(--ssd-primary); color: white; }

    /* My Exams Grid Cards */
    .ssd-my-exams-grid { display: flex; flex-direction: column; gap: 15px; }
    .ssd-my-exam-card { background: var(--ssd-card); border: none; border-radius: 16px; padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; transition: 0.3s; }
    .ssd-my-exam-card:hover { box-shadow: inset 0 0 0 1px var(--ssd-primary); background: var(--ssd-box-bg); }
    .ssd-mec-left { display: flex; align-items: center; gap: 15px; flex: 2; min-width: 250px; }
    .ssd-mec-grade { width: 55px; height: 55px; border-radius: 14px; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; font-weight: 900; color: #fff; flex-shrink: 0; }
    .ssd-mec-grade.grade-a { background: linear-gradient(135deg, #10b981, #059669); }
    .ssd-mec-grade.grade-b { background: linear-gradient(135deg, #3b82f6, #2563eb); }
    .ssd-mec-grade.grade-c { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .ssd-mec-grade.grade-s { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
    .ssd-mec-grade.grade-f { background: linear-gradient(135deg, #ef4444, #dc2626); }
    .ssd-mec-details { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
    .ssd-mec-title { color: var(--ssd-text); font-size: 1.1rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ssd-mec-date { color: var(--ssd-text-muted); font-size: 0.8rem; }
    .ssd-mec-stats { display: flex; gap: 25px; flex: 1; justify-content: center; border: none; padding: 0 15px; }
    .ssd-mec-stat-item { text-align: center; }
    .ssd-mec-stat-lbl { color: var(--ssd-text-muted); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 2px; }
    .ssd-mec-stat-val { color: var(--ssd-text); font-size: 1.1rem; font-weight: 800; }
    .ssd-mec-stat-val.total { color: var(--ssd-primary); font-size: 1.3rem; }
    .ssd-mec-actions { display: flex; gap: 10px; flex: 1; justify-content: flex-end; min-width: 180px; }

    .ssd-btn-pdf { background: #ef4444; color: white; border: none; padding: 10px 15px; border-radius: 10px; text-decoration: none; font-size: 0.85rem; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
    .ssd-btn-pdf:hover { background: #dc2626; transform: translateY(-2px); }
    .ssd-btn-essay { background: #8b5cf6; color: white; border: none; padding: 10px 15px; border-radius: 10px; text-decoration: none; font-size: 0.85rem; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
    .ssd-btn-essay:hover { background: #7c3aed; transform: translateY(-2px); }

    /* 🌟 HORIZONTAL PLANS CONTAINER FOR BOTH DESKTOP & MOBILE 🌟 */
    .wp-plans-container {
        display: flex !important; flex-direction: row !important; overflow: visible !important;
        gap: 10px !important; padding-bottom: 8px !important; justify-content: space-between !important; 
        align-items: stretch !important; width: 100% !important; box-sizing: border-box !important;
    }
    .dash-plan-card, .wp-modern-plan-card {
        background: var(--ssd-box-bg) !important; border: none !important; box-shadow: none !important;
        padding: 15px 5px !important; border-radius: 12px !important; cursor: pointer; text-align: center; 
        flex: 1 !important; min-width: 0 !important; width: 33.33% !important; transition: all 0.3s ease; 
        position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    }
    .dash-plan-card.active, .wp-modern-plan-card.active { box-shadow: inset 0 0 0 2px var(--ssd-primary) !important; background: var(--ssd-box-bg) !important; }
    
    .dash-plan-card.popular-plan, .wp-modern-plan-card.popular-plan { 
        box-shadow: inset 0 0 0 2px #f59e0b !important; transform: scale(1.05) !important; z-index: 10 !important; 
        background: var(--ssd-box-bg) !important; 
    }
    .dash-plan-card.popular-plan.active, .wp-modern-plan-card.popular-plan.active { box-shadow: inset 0 0 0 2px var(--ssd-primary) !important; }

    .wp-plan-radio { width: 18px !important; height: 18px !important; border-radius: 50%; border: 2px solid var(--ssd-text-muted); margin: 0 auto 10px auto !important; display: flex; align-items: center; justify-content: center; }
    .wp-radio-inner { width: 9px !important; height: 9px !important; border-radius: 50%; background: transparent; transition: 0.3s; }
    .dash-plan-card.active .wp-plan-radio, .wp-modern-plan-card.active .wp-plan-radio { border-color: var(--ssd-primary); }
    .dash-plan-card.active .wp-radio-inner, .wp-modern-plan-card.active .wp-radio-inner { background: var(--ssd-primary); }
    
    .dash-plan-card h4, .wp-modern-plan-card h4 { margin: 0 0 5px 0 !important; font-weight: 700; color: var(--ssd-text); font-size: 0.9rem !important; white-space: nowrap; }
    .wp-plan-price { margin: 0; color: #10b981; font-size: 1.1rem !important; font-weight: 800; }
    
    .wp-plan-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 0.6rem !important; font-weight: 800; color: white; padding: 3px 8px !important; border-radius: 20px; white-space: nowrap; }
    .badge-popular { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .badge-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }
    .badge-warn { background: linear-gradient(135deg, #10b981, #059669); }

    .wp-payment-summary-box { margin: 20px auto 0 auto; background: var(--ssd-box-bg); padding: 25px; border-radius: 16px; border: none; max-width: 450px; text-align: left; }
    .summary-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
    .summary-row span { color: var(--ssd-text-muted); font-size: 14px; }
    .summary-row.line-below { border-bottom: 1px dashed var(--ssd-border); margin-bottom: 8px; padding-bottom: 12px; }

    @media (max-width: 768px) {
        .wp-settings-modal { padding: 20px; }
        .wp-payment-modal { width: 95%; padding: 20px; }
        .settings-inner-container { padding: 20px; border-radius: 12px; }
        .settings-grid-wrapper { flex-direction: column; gap: 15px; }
        .camp-date-card { min-width: 85px; height: 95px; } 
        .camp-stats-grid-6 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .camp-stat-box-small { padding: 12px 5px; }
        .ssd-eh-grid { grid-template-columns: 1fr; }
        
        .ssd-my-exam-card { flex-direction: column; align-items: stretch; gap: 15px; }
        .ssd-mec-left { width: 100%; min-width: 100%; }
        .ssd-mec-title { white-space: normal; }
        .ssd-mec-stats { border-left: none; border-right: none; border-top: 1px dashed var(--ssd-border); border-bottom: 1px dashed var(--ssd-border); padding: 15px 0; justify-content: space-between; }
        .ssd-mec-actions { flex-direction: row; justify-content: center; width: 100%; }
        .ssd-mec-actions a, .ssd-mec-actions button { flex: 1; justify-content: center; }

        .pb-title { font-size: 0.8rem !important; }
        .pb-grade-large { font-size: 1.1rem !important; }
        .pb-grade-small { font-size: 0.55rem !important; }
        .pb-zscore-title { font-size: 0.65rem !important; }
        .pb-zscore-val { font-size: 1.1rem !important; }

        .wp-dash-tabs-header { flex-direction: row !important; max-width: 100%; margin: 0 10px 25px 10px; padding: 4px; }
        .wp-dt-btn { font-size: 0.75rem; padding: 10px 5px; }
    }

/* ===================================================
   Theme Icons Display Logic (Moon / Sun)
   =================================================== */
.ssd-theme-icon-sun { display: none !important; }
.ssd-theme-icon-moon { display: inline-block !important; }

body.light-mode .ssd-theme-icon-sun { display: inline-block !important; color: #f59e0b; /* Yellow color for sun */ }
body.light-mode .ssd-theme-icon-moon { display: none !important; }

/* ===================================================
   Desktop Sidebar Top Icon Box (Fade Box)
   =================================================== */
.ssd-desktop-top-icons-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(148, 163, 184, 0.08);
    border: none !important;
    padding: 6px 10px;
    margin: 8px 10px 0 10px;
    border-radius: 10px;
}
body.dark-mode .ssd-desktop-top-icons-box,
body:not(.light-mode) .ssd-desktop-top-icons-box {
    background: rgba(255, 255, 255, 0.05);
    border: none !important;
}
.ssd-desktop-icon-item svg {
    width: 18px !important;
    height: 18px !important;
}
.ssd-desktop-icon-item i {
    font-size: 0.95rem !important;
}
.ssd-desktop-icon-item {
    padding: 5px;
}

/* Study Plan Box Styling (Fade Style & Reduced Size) */
.ssd-sidebar-tt-btn {
    background: rgba(148, 163, 184, 0.08) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    
}
body.dark-mode .ssd-sidebar-tt-btn,
body:not(.light-mode) .ssd-sidebar-tt-btn {
    background: rgba(255, 255, 255, 0.05) !important;
}
.ssd-sidebar-tt-btn:hover {
    background: rgba(59, 130, 246, 0.1) !important;
}

.ssd-desktop-icon-item {
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.ssd-desktop-icon-item:hover,
.ssd-desktop-icon-item.active {
    color: var(--ssd-accent-color, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
}
body.dark-mode .ssd-desktop-icon-item,
body:not(.light-mode) .ssd-desktop-icon-item {
    color: #94a3b8;
}
body.dark-mode .ssd-desktop-icon-item:hover,
body.dark-mode .ssd-desktop-icon-item.active,
body:not(.light-mode) .ssd-desktop-icon-item:hover,
body:not(.light-mode) .ssd-desktop-icon-item.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 991px) {
    .ssd-desktop-top-icons-box {
        display: none !important;
    }
}

:root {
    /* DARK MODE VARS - Flat Colors */
    --ssd-bg: #151A28;         /* Custom Site Background */
    --ssd-sidebar-bg: #1C2338; /* Custom Sidebar Box Color */
    --ssd-box-bg: #222d44;     /* Inner boxes */
    --ssd-border: #2d3b55;     /* Subtle border for inner dividers */
    --ssd-accent: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

/* LIGHT MODE VARS */
body.light-mode {
    --ssd-bg: #e2e8f0;
    --ssd-sidebar-bg: #ffffff;
    --ssd-box-bg: #f8fafc;
    --ssd-border: #cbd5e1;
    --ssd-accent: #2563eb;
    --ssd-text: #0f172a;
    --ssd-text-muted: #64748b;
}

/* Ensure the dark background applies to the body */
body {
    background-color: var(--ssd-bg) !important;
}

/* Android Open App Button Styles */
#ssd-android-open-app {
    position: absolute;
    top: 65px; 
    right: 10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s ease;
    border: none;
}

#ssd-android-open-app:active {
    transform: scale(0.95);
}

#ssd-android-open-app i {
    font-size: 0.85rem;
}

/* Spinning Animation for SVGs */
@keyframes side_spin_ring { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 
.side-spin-ring-shape { transform-box: fill-box; transform-origin: center; animation: side_spin_ring 4s linear infinite; }

/* ========================================================
   COUNTDOWN WIDGET STYLES (Fade Box Pattern)
   ======================================================== */
.ssd-cd-add-btn, .ssd-cd-active-bar, .ssd-cd-setup-box {
    background: rgba(148, 163, 184, 0.08) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

body.dark-mode .ssd-cd-add-btn, body:not(.light-mode) .ssd-cd-add-btn,
body.dark-mode .ssd-cd-active-bar, body:not(.light-mode) .ssd-cd-active-bar,
body.dark-mode .ssd-cd-setup-box, body:not(.light-mode) .ssd-cd-setup-box {
    background: rgba(255, 255, 255, 0.05) !important;
}

.ssd-cd-add-btn {
    width: 100%;
    color: var(--ssd-text-muted);
    padding: 10px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.ssd-cd-add-btn:hover {
    color: var(--ssd-accent);
    background: rgba(59, 130, 246, 0.1) !important;
}

.ssd-cd-active-bar {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.ssd-cd-bg-icon {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.ssd-cd-bg-icon::after {
    content: '\f501'; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    font-size: 4rem;
    color: #3b82f6;
    opacity: 0.06;
}

.ssd-cd-icon, .ssd-cd-info, .ssd-cd-menu-wrapper {
    position: relative;
    z-index: 2;
}

.ssd-cd-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ssd-cd-title {
    font-size: 0.65rem;
    color: var(--ssd-accent); 
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.ssd-cd-timer {
    font-size: 0.7rem; 
    color: var(--ssd-text);
    font-weight: 800;
    font-family: monospace;
    letter-spacing: -0.2px;
    white-space: nowrap; 
}

/* Menu Dots & Dropdown */
.ssd-cd-menu-wrapper { position: relative; z-index: 10; }
.ssd-cd-dots-btn {
    background: none; border: none;
    color: #94a3b8;
    cursor: pointer; padding: 5px;
    transition: 0.2s;
}
.ssd-cd-dots-btn:hover { color: var(--ssd-text); }

.ssd-cd-dropdown-menu {
    position: absolute;
    right: 0; top: 25px;
    background: var(--ssd-box-bg);
    border: 1px solid var(--ssd-border);
    border-radius: 8px;
    padding: 5px;
    display: none;
    z-index: 9999;
    min-width: 110px;
}
.ssd-cd-dropdown-menu.show { display: block; }
.ssd-cd-dropdown-menu button {
    width: 100%; text-align: left;
    background: none; border: none;
    padding: 8px 10px;
    color: var(--ssd-text);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 5px;
    display: flex; align-items: center; gap: 8px;
}
.ssd-cd-dropdown-menu button:hover { background: rgba(255,255,255,0.05); }
#ssd-cd-delete-btn { color: #ef4444; }
#ssd-cd-delete-btn:hover { background: rgba(239, 68, 68, 0.1); }

/* Setup Box */
.ssd-cd-setup-box {
    padding: 12px;
}
.ssd-cd-setup-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ssd-text);
    margin-bottom: 10px;
}
.ssd-cd-input {
    width: 100%;
    background: var(--ssd-bg);
    border: 1px solid var(--ssd-border);
    color: var(--ssd-text);
    padding: 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.ssd-cd-input:focus { outline: none; border-color: var(--ssd-accent); }

.ssd-cd-actions { display: flex; gap: 6px; margin-top: 5px; }
.ssd-cd-btn-primary, .ssd-cd-btn-secondary {
    flex: 1; padding: 6px; border: none; border-radius: 6px;
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.ssd-cd-btn-primary { background: var(--ssd-accent); color: white; }
.ssd-cd-btn-secondary { background: var(--ssd-border); color: var(--ssd-text); }

/* --- STUDY PLAN BUTTON STYLES --- */
.ssd-sidebar-tt-btn:hover {
    border-color: var(--ssd-accent) !important;
    transform: translateY(-3px) !important;
}


/* --- SIDEBAR STRUCTURE --- */
.ssd-sidebar {
    width: 300px;
    background: var(--ssd-sidebar-bg);
    border: none;
    height: 100dvh;
    position: fixed; top: 0; left: 0;
    display: flex; flex-direction: column;
    z-index: 2000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
}
.ssd-sidebar::-webkit-scrollbar {
    display: none;
}

/* ========================================================
   TELEGRAM-STYLE FLOATING SIDEBAR (DESKTOP ONLY - FLAT)
   ======================================================== */
@media (min-width: 1024px) {
    .ssd-sidebar {
        top: 20px !important;
        left: 20px !important;
        bottom: 20px !important;
        height: calc(100vh - 40px) !important;
        border-radius: 24px !important;
        border: none !important; 
        box-shadow: none !important; 
        background: var(--ssd-sidebar-bg) !important;
    }
    
    body.light-mode .ssd-sidebar {
        box-shadow: none !important;
        border: none !important;
    }
    
    .ssd-sidebar-top {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }
}

/* Header Areas */
.ssd-sidebar-top { padding: 15px 12px; border-bottom: 1px solid var(--ssd-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.ssd-profile-brief { display: flex; align-items: center; gap: 10px; }
.ssd-profile-brief img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #333; }
.ssd-profile-text { display: flex; flex-direction: column; }
.ssd-welcome { font-size: 0.65rem; color: var(--ssd-text-muted); text-transform: uppercase; }
.ssd-name { font-size: 0.85rem; font-weight: 700; color: var(--ssd-text); }

.ssd-icon-action { width: 32px; height: 32px; background: var(--ssd-box-bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ssd-text-muted); border: none; cursor: pointer; text-decoration: none; transition: 0.2s; }
.ssd-icon-action:hover { background: var(--ssd-accent); color: white; }

/* Search */
.ssd-sidebar-search-row { padding: 10px 12px; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.ssd-search-wrapper { position: relative; flex: 1; width: auto; }
.ssd-search-wrapper input { width: 100%; height: 36px; background: var(--ssd-box-bg); border: none; padding: 0 10px 0 32px; border-radius: 8px; color: var(--ssd-text); font-size: 0.8rem; box-sizing: border-box; }
.ssd-search-wrapper input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ssd-accent); }
.ssd-search-wrapper i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ssd-text-muted); font-size: 0.75rem; }

/* Feed Button */
.ssd-icon-action.feed-btn { width: auto !important; padding: 0 12px; gap: 6px; border-radius: 8px; justify-content: center; background: var(--ssd-box-bg); text-decoration: none; display: flex; align-items: center; height: 36px; border: none; color: var(--ssd-text-muted); }
.ssd-feed-text { font-size: 0.75rem; font-weight: 600; }
.ssd-icon-action.feed-btn:hover { background: var(--ssd-accent); color: white; }
.ssd-icon-action.feed-btn:hover .ssd-feed-text { color: white; }

/* Content Area */
.ssd-sidebar-content { padding: 5px 12px 20px 12px; flex-grow: 1; }
.ssd-nav-section { margin-bottom: 15px; }
.ssd-nav-section label { display: block; font-size: 0.65rem; color: var(--ssd-text-muted); font-weight: 800; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; }

.ssd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ssd-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

/* Box Items */
.ssd-box-item {
    position: relative;
    background: var(--ssd-box-bg);
    border: none;
    padding: 15px 5px;
    border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center; text-decoration: none;
    overflow: hidden;
    min-height: 70px;
    color: #ffffff !important;
}
.ssd-box-item i { font-size: 1.2rem; color: #ffffff !important; position: relative; z-index: 2; transition: 0.2s; }
.ssd-box-item span { font-size: 0.7rem; color: #ffffff !important; font-weight: 600; position: relative; z-index: 2; transition: 0.2s; }
.ssd-box-item::after {
    content: ''; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; right: -10px; bottom: -10px; font-size: 3rem; opacity: 0.15; 
    transform: rotate(-20deg); z-index: 1; color: white; transition: all 0.3s ease;
}
.ssd-box-item:hover { transform: translateY(-3px); }
.ssd-box-item:hover::after { opacity: 0.25; transform: rotate(-10deg) scale(1.1); }
.ssd-box-item.active { border: 2px solid #ffffff; }

.ssd-box-item.disabled-item {
    opacity: 0.55; pointer-events: none; cursor: default; filter: grayscale(80%);
    background: var(--ssd-box-bg) !important;
}
.ssd-box-item.disabled-item:hover { transform: none; }
.ssd-box-item.disabled-item i, .ssd-box-item.disabled-item span { color: var(--ssd-text-muted) !important; text-shadow: none; }

/* Gradients for items */
.ssd-box-item[href*="store"]:not(.disabled-item) { background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%); }
.ssd-box-item[href*="store"]::after { content: '\f02d'; }
.ssd-box-item[href*="courses"]:not(.disabled-item) { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
.ssd-box-item[href*="courses"]::after { content: '\f51c'; }
.ssd-box-item[href*="exams"]:not(.disabled-item) { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.ssd-box-item[href*="exams"]::after { content: '\f573'; }
.ssd-box-item[data-tab="my-profile"]:not(.disabled-item), .ssd-box-item[href*="my-profile"]:not(.disabled-item) { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.ssd-box-item[data-tab="my-profile"]::after, .ssd-box-item[href*="my-profile"]::after { content: '\f007'; }
.ssd-box-item[data-tab="my-pages"]:not(.disabled-item), .ssd-box-item[href*="my-pages"]:not(.disabled-item) { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.ssd-box-item[data-tab="my-pages"]::after, .ssd-box-item[href*="my-pages"]::after { content: '\f024'; }
.ssd-box-item[data-tab="wallet"]:not(.disabled-item), .ssd-box-item[href*="wallet"]:not(.disabled-item) { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.ssd-box-item[data-tab="wallet"]::after, .ssd-box-item[href*="wallet"]::after { content: '\f555'; }
.ssd-box-item[data-tab="my-classes"]:not(.disabled-item), .ssd-box-item[href*="my-classes"]:not(.disabled-item) { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.ssd-box-item[data-tab="my-classes"]::after, .ssd-box-item[href*="my-classes"]::after { content: '\f5fc'; }
.ssd-box-item[data-tab="study-room"]:not(.disabled-item), .ssd-box-item[href*="study-room"]:not(.disabled-item) { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
.ssd-box-item[data-tab="study-room"]::after, .ssd-box-item[href*="study-room"]::after { content: '\f2f2'; }
.ssd-box-item[data-tab="100-days-camp"]:not(.disabled-item), .ssd-box-item[href*="100-days-camp"]:not(.disabled-item) { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }
.ssd-box-item[data-tab="100-days-camp"]::after, .ssd-box-item[href*="100-days-camp"]::after { content: '\f6bb'; }

/* ========================================================
   PROGRAMS BANNER (100 DAYS CAMP)
   ======================================================== */
.ssd-program-banner {
    display: flex;
    align-items: center;
    justify-content: center; 
    position: relative; 
    background: var(--ssd-box-bg);
    border: none;
    border-radius: 12px;
    padding: 12px 15px; 
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.ssd-program-banner:hover {
    box-shadow: inset 0 0 0 1px var(--ssd-accent);
    transform: translateY(-2px);
}

.ssd-program-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.ssd-prog-logo-dark, 
.ssd-prog-logo-light {
    height: 48px; 
    width: auto;
    max-width: 85%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.ssd-program-banner:hover .ssd-prog-logo-dark,
.ssd-program-banner:hover .ssd-prog-logo-light {
    transform: scale(1.05); 
}

.ssd-prog-logo-light { display: none; } 

body.light-mode .ssd-prog-logo-dark { display: none !important; }
body.light-mode .ssd-prog-logo-light { display: block !important; }

.ssd-prog-arrow {
    position: absolute;
    right: 15px;
    font-size: 0.7rem;
    color: var(--ssd-text-muted);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.ssd-program-banner:hover .ssd-prog-arrow {
    color: var(--ssd-accent);
    opacity: 1;
    transform: translateX(3px);
}

.ssd-program-banner.active {
    background: rgba(59, 130, 246, 0.05);
}

/* --- SIDEBAR CHAT BOX MODERN GREEN DESIGN --- */
.ssd-box-item[data-tab="chat"]:not(.disabled-item), .ssd-box-item[href*="chat"]:not(.disabled-item) { 
    background: #10b981 !important; 
    border: none !important;
    transition: all 0.3s ease;
}
.ssd-box-item[data-tab="chat"]:not(.disabled-item) i { 
    color: #ffffff !important; 
    text-shadow: none !important;
}
.ssd-box-item[data-tab="chat"]:not(.disabled-item) span:not(.ssd-sidebar-chat-badge-count) { 
    color: #ffffff !important; 
    text-shadow: none !important;
}
.ssd-box-item[data-tab="chat"]:not(.disabled-item):hover {
    background: #059669 !important;
    transform: translateY(-3px);
}
.ssd-box-item[data-tab="chat"]::after, .ssd-box-item[href*="chat"]::after { content: '\f4ad'; opacity: 0.1; color: #ffffff; }

body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item), 
body.light-mode .ssd-box-item[href*="chat"]:not(.disabled-item) {
    background: #10b981 !important;
    border: none !important;
}
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item) i { 
    color: #ffffff !important; 
}
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item) span:not(.ssd-sidebar-chat-badge-count) { 
    color: #ffffff !important; 
}
body.light-mode .ssd-box-item[data-tab="chat"]:not(.disabled-item):hover {
    background: #059669 !important;
}

.ssd-box-item[data-tab="help"]:not(.disabled-item), .ssd-box-item[href*="help"]:not(.disabled-item), .ssd-box-item[href*="about"]:not(.disabled-item), .ssd-box-item[href*="facts"]:not(.disabled-item) { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }
.ssd-box-item[data-tab="help"]::after, .ssd-box-item[href*="help"]::after { content: '\f059'; }
.ssd-box-item[data-tab="settings"]:not(.disabled-item), .ssd-box-item[href*="settings"]:not(.disabled-item) { background: linear-gradient(135deg, #4b5563 0%, #374151 100%); }
.ssd-box-item[data-tab="settings"]::after, .ssd-box-item[href*="settings"]::after { content: '\f013'; }
.ssd-box-item[href*="login"]:not(.disabled-item) { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.ssd-box-item[href*="login"]::after { content: '\f2f6'; }
.ssd-box-item[href*="register"]:not(.disabled-item) { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.ssd-box-item[href*="register"]::after { content: '\f234'; }
.ssd-box-item[href*="feed"]:not(.disabled-item) { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.ssd-box-item[href*="feed"]::after { content: '\f09e'; }

/* ========================================================
   GEMINI-STYLE GLOWING ANIMATED BORDER BAR
   ======================================================== */
.ssd-sidebar-footer { padding-top: 10px; border-top: 1px solid var(--ssd-border); margin-top: 10px; }

.ssd-premium-sidebar-bar {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 20px 15px; margin-bottom: 12px;
    border-radius: 16px; text-decoration: none;
    position: relative; overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    text-align: center;
}
.ssd-premium-sidebar-bar:hover { transform: translateY(-3px); }

.ssd-premium-sidebar-bar::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 250%; aspect-ratio: 1; transform-origin: center;
    animation: border_spin_trail 3s linear infinite; z-index: 1;
}
@keyframes border_spin_trail {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.ssd-premium-sidebar-bar::after {
    content: ''; position: absolute; inset: 2px;
    background: var(--ssd-sidebar-bg); border-radius: 14px;
    z-index: 2; transition: background 0.3s;
}
.ssd-premium-sidebar-bar:hover::after { background: var(--ssd-box-bg); }

.ssd-premium-text-box { position: relative; z-index: 3; display: flex; flex-direction: column; width: 100%; align-items: center; }

.ssd-prem-sub { color: var(--ssd-text-muted); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; transition: 0.3s; }

.ssd-premium-sidebar-bar.not-verified::before,
.ssd-premium-sidebar-bar.is-verified::before {
    background: conic-gradient(
        from 0deg, transparent 0deg, transparent 180deg,
        #3b82f6 220deg, #8b5cf6 260deg, #ec4899 300deg,
        #f59e0b 330deg, #10b981 360deg
    );
}

body.light-mode .ssd-sidebar-logo-dark { display: none !important; }
body.light-mode .ssd-sidebar-logo-light { display: block !important; }
.ssd-sidebar-verified-tick { display: flex; align-items: center; justify-content: center; }

.ssd-logout-btn { display: block; width: 100%; padding: 10px; border: none; background: rgba(239, 68, 68, 0.1); text-align: center; color: #ef4444; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: 0.2s; box-sizing: border-box; }
.ssd-logout-btn:hover { background: rgba(239, 68, 68, 0.2); }
.ssd-version { text-align: center; font-size: 0.7rem; color: var(--ssd-text-muted); margin-top: 8px; }

/* ========================================================
   MOBILE HEADER - FLOATING UI (NEW)
   ======================================================== */
.ssd-mobile-header {
    display: none; 
}

@media (max-width: 991px) {
    .ssd-mobile-header {
        display: block;
        position: fixed; 
        top: 12px;      
        left: 12px;     
        right: 12px;    
        width: auto;    
        height: 56px;   
        background: var(--ssd-sidebar-bg); 
        z-index: 1000;
        border: none;
        border-radius: 18px;
        padding: 0 10px; /* Small padding so edge items don't touch screen border */
        box-sizing: border-box;
        box-shadow: none;
    }

    /* FULL SCREEN MOBILE SIDEBAR (NO BOX) */
    .ssd-sidebar { 
        transform: translateX(-100%); 
        width: 100% !important; 
        max-width: 100% !important;
        height: 100dvh !important; 
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important; /* Removes box effect */
        z-index: 9999; 
        overflow-y: auto; 
    }
    .ssd-sidebar.open { transform: translateX(0); }
    .ssd-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1500; }
    .ssd-overlay.active { display: block; }
}

/* Perfect Flex Layout for evenly spaced icons */
.ssd-fb-header-nav {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between; 
    align-items: center;
    padding: 0;
}

.ssd-fb-nav-item {
    flex: 1; /* Makes all 6 icons take equal width perfectly */
    color: var(--ssd-text-muted) !important; 
    background: transparent !important;
    border: none;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s;
    height: 100%;
}

.ssd-fb-nav-item:hover, 
.ssd-fb-nav-item:focus, 
.ssd-fb-nav-item:active {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.ssd-fb-nav-item:active {
    transform: scale(0.92);
}

.ssd-fb-nav-item.active {
    background: transparent !important; 
    color: var(--ssd-accent) !important; 
}

/* Modern minimal active dot */
.ssd-fb-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--ssd-accent); 
    border-radius: 50%;
}

/* Reduced Mobile Profile Avatar Size */
.ssd-fb-nav-item img.ssd-header-avatar {
    width: 32px !important;  
    height: 32px !important; 
    min-width: 32px !important;
    min-height: 32px !important;
    flex-shrink: 0; 
    border-radius: 50%;
    border: 2px solid transparent;
    object-fit: cover;
    transition: 0.2s;
}

.ssd-fb-nav-item.active img.ssd-header-avatar {
    border-color: var(--ssd-accent);
}

.ssd-header-chat-dot {
    position: absolute;
    top: 12px;
    right: calc(50% - 15px);
    width: 8px;
    height: 8px;
    background-color: #ef4444; 
    border-radius: 50%;
    border: 2px solid var(--ssd-sidebar-bg);
    z-index: 10;
    animation: chatBadgePulseRed 2s infinite;
}

.ssd-pwa-install-section { margin-bottom: 15px; }
.ssd-pwa-title { font-size: 0.65rem; color: var(--ssd-text-muted); font-weight: 800; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; }

.ssd-pwa-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; align-items: center; }
.ssd-pwa-img-btn { 
    background: transparent !important; 
    border: none !important; 
    padding: 0 !important; 
    cursor: pointer; 
    transition: transform 0.2s ease; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    outline: none; 
    height: 100%; 
    box-shadow: none !important;
}
.ssd-pwa-img-btn:hover { transform: scale(1.05); }
.ssd-pwa-img-btn img { width: 100%; height: auto; max-height: 35px; object-fit: contain; } 

.ssd-ios-pwa-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.ssd-ios-pwa-content { background: var(--ssd-box-bg); border: none; padding: 20px; border-radius: 12px; width: 90%; max-width: 320px; text-align: center; position: relative; color: var(--ssd-text); }
.ssd-ios-close { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; cursor: pointer; color: var(--ssd-text-muted); }
.ssd-ios-pwa-content h4 { margin-top: 0; color: var(--ssd-text); }
.ssd-ios-instructions { text-align: left; font-size: 0.85rem; color: var(--ssd-text-muted); line-height: 1.5; margin-top: 15px; padding-left: 20px; }
.ssd-ios-instructions li { margin-bottom: 10px; }
	
@media (min-width: 992px) {
    .ssd-sidebar-logo-dark,
    .ssd-sidebar-logo-light {
        height: 30px !important; 
        max-width: 85% !important; 
        object-fit: contain;
    }
    
    .ssd-sidebar-verified-tick {
        transform: scale(0.9); 
        display: inline-flex;
        margin-left: -4px; 
    }
}

    /* =========================================
       FLAT MODERN UI VARIABLES & BASE
       ========================================= */
    :root {
        --ssd-card: #1C2338;
        --ssd-box-bg: #222d44;
        --ssd-bg: #151A28;
        --ssd-border: #2d3b55;
        --ssd-primary: #3b82f6;
    }

    * { box-sizing: border-box; }
    html, body { overflow-x: hidden; }
    
    .ssd-dark-theme-wrapper { 
        font-family: 'Inter', sans-serif; 
        color: #fff; 
        width: 100%; 
        max-width: 100vw; 
        overflow-x: hidden; 
        min-height: 100vh; 
        position: relative; 
        padding-top: 0 !important; 
        background: var(--ssd-bg);
    }
    
    .sr-main-container { display: flex; flex-direction: column; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0px 10px 100px 10px; overflow-x: hidden; }
    
    #sr-desktop-sidebar { display: none; }

    /* --- HERO SECTION FULL WIDTH & NO GAPS --- */
    .ssd-hero-join-section {
        position: relative;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        margin-top: -30px; 
        margin-bottom: 0px; 
        display: flex;
        align-items: center; 
        justify-content: center;
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    @media (max-width: 991px) {
        .ssd-hero-join-section { aspect-ratio: 16 / 9; min-height: auto; }
    }
    @media (min-width: 992px) {
        .ssd-hero-join-section { aspect-ratio: 5 / 1; min-height: auto; }
    }

    .ssd-hero-action-buttons {
        display: flex; gap: 15px; align-items: center; justify-content: center; z-index: 20; margin-bottom: 20px;
    }
    @media (max-width: 768px) {
        .ssd-hero-action-buttons { flex-direction: column; gap: 12px; }
        .ssd-hero-action-buttons .ssd-solid-white-btn { width: 100%; justify-content: center; margin-bottom: 0; }
    }

    /* Flat Button over Hero */
    .ssd-solid-white-btn {
        position: relative;
        z-index: 20;
        background: transparent; 
        color: #000000;
        border: none;
        padding: 12px 35px;
        border-radius: 50px;
        font-size: 1.1rem;
        font-weight: 800;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        white-space: nowrap;
        transition: transform 0.3s ease;
        box-shadow: none; /* Flat */
        overflow: hidden; 
        margin-bottom: 20px; 
    }

    .ssd-solid-white-btn::before {
        content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
        background: conic-gradient(#ff3b30, #ffcc00, #34c759, #007aff, #af52de, #ff3b30);
        z-index: -2; animation: rotateBtnBorder 3s linear infinite;
    }

    .ssd-solid-white-btn::after {
        content: ''; position: absolute; inset: 4px; background: #ffffff; border-radius: 50px; z-index: -1;
    }
    .ssd-solid-white-btn:hover { transform: scale(1.05); }
    @keyframes rotateBtnBorder { 100% { transform: rotate(360deg); } }

    @media (max-width: 768px) {
        .ssd-solid-white-btn { padding: 10px 20px; font-size: 0.95rem; margin-bottom: 30px; }
    }

    /* --- DATE SCALABLE SLIDER --- */
    .sr-date-slider-wrapper { 
        width: 100vw; margin-left: calc(-50vw + 50%); overflow: hidden; position: relative; 
        margin-top: -65px; z-index: 30; margin-bottom: 25px; 
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); 
        mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); 
    }
    .sr-date-slider { display: flex; align-items: center; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 15px 0; }
    .sr-date-slider::-webkit-scrollbar { display: none; }
    
    .sr-date-card { 
        min-width: 95px; height: 105px; background: var(--ssd-box-bg); border: none; 
        border-radius: 16px; display: flex; flex-direction: column; align-items: center; 
        justify-content: center; scroll-snap-align: center; 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, background 0.3s; 
        cursor: pointer; flex-shrink: 0; transform: scale(0.7); opacity: 0.3; box-shadow: none;
    }
    .sr-date-card.adj-1 { transform: scale(0.85); opacity: 0.6; }
    .sr-date-card.focused { 
        transform: scale(1.05); opacity: 1; 
        background: var(--ssd-theme, #3b82f6); 
        z-index: 10; box-shadow: none; border: none;
    }
    
    .sr-date-month { font-size: 0.7rem; font-weight: 800; color: #94a3b8; letter-spacing: 0.5px; text-transform: uppercase; }
    .sr-date-num { font-size: 1.8rem; font-weight: 800; color: #fff; margin: 2px 0 6px 0; line-height: 1;}
    .sr-date-lbl { font-size: 0.6rem; font-weight: 700; color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
    
    .sr-date-card.focused .sr-date-month, .sr-date-card.focused .sr-date-num { color: #ffffff; }
    .sr-date-card.focused .sr-date-lbl { background: rgba(255,255,255,0.2); color: #ffffff; }
    
    @media (max-width: 768px) {
        .sr-date-card { min-width: 85px; height: 95px; }
        .sr-date-num { font-size: 1.5rem; }
    }

    /* --- RANKING SYSTEM --- */
    .ssd-rankings-wrapper-pro { margin-bottom: 25px; width: 100%; overflow: visible; }
    .rank-header-wrapper { display: flex; flex-direction: column; align-items: center; margin-bottom: 25px; width: 100%; text-align: center; }
    .rank-header-title { color: #fff; font-size: 1.8rem; margin: 0; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 12px; }
    
    .ssd-filter-bar { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 12px; justify-content: center; margin-top: 15px; width: 100%; }
    .ssd-custom-filter-wrap { position: relative; flex: 0 0 auto; font-size: 0.85rem; }
    .filter-trigger { display: flex; justify-content: space-between; align-items: center; background: var(--ssd-box-bg); border: none; padding: 10px 15px; border-radius: 8px; color: white; cursor: pointer; transition: 0.2s; white-space: nowrap; min-width: 140px; font-weight: 600; box-shadow: none; }
    .filter-options-dropdown { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); background: var(--ssd-card); border: 1px solid var(--ssd-border); border-radius: 10px; z-index: 1000; display: none; max-height: 250px; overflow-y: auto; box-shadow: none; min-width: 150px; text-align: left; }
    .ssd-custom-filter-wrap.open .filter-options-dropdown { display: block; animation: slideDown 0.2s ease; }
    .filter-opt { padding: 10px 15px; color: #cbd5e1; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03); white-space: nowrap; }
    .filter-opt:hover { background: var(--ssd-primary); color: white; }
    @keyframes slideDown { from { opacity: 0; transform: translate(-50%, -5px); } to { opacity: 1; transform: translate(-50%, 0); } }
    
    .ssd-rank-tabs-pro { display: flex; background: var(--ssd-box-bg); padding: 6px; border-radius: 100px; margin: 0 auto 20px auto; border: none; width: 100%; max-width: 500px; }
    .rank-tab-btn-pro { flex: 1; background: transparent; border: none; color: #94a3b8; padding: 10px 15px; font-size: 1rem; font-weight: 600; border-radius: 100px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .rank-tab-btn-pro.active { background: var(--ssd-card); color: var(--ssd-primary); box-shadow: none; }
    
    .top-earners-list-app { display: flex; flex-direction: column; gap: 12px; width: 100%; }
    .lb-row-app {
        display: flex; align-items: center; justify-content: space-between;
        background: var(--ssd-card); padding: 10px 15px; border-radius: 16px; 
        border: none; transition: transform 0.2s; box-shadow: none;
    }
    .lb-row-app.is-me-sticky { border-left: 4px solid #fbbf24; background: rgba(251, 191, 36, 0.1); }
    .top-3-row { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
    
    .lb-rank-app { width: 40px; font-size: 1.2rem; font-weight: 800; color: #64748b; text-align: center; }
    .rank-gold { color: #fbbf24; font-size: 1.5rem; text-shadow: none; }
    .rank-silver { color: #cbd5e1; font-size: 1.4rem; }
    .rank-bronze { color: #d97706; font-size: 1.4rem; }
    .lb-user-info-app { flex: 1; display: flex; align-items: center; gap: 15px; margin-left: 10px; overflow: hidden; }
    .lb-avatar-app { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: none; flex-shrink: 0; background: var(--ssd-box-bg); }
    .top-3-row .lb-avatar-app { border: 2px solid #fbbf24; }
    .lb-details-app { display: flex; flex-direction: column; overflow: hidden; }
    .lb-name-app { color: #fff; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lb-avg-app { color: #10b981; font-size: 0.85rem; font-weight: 600; font-family: monospace; }
    
    .lb-coins-app { display: none !important; }

    .ssd-follow-btn {
        background: var(--ssd-primary); color: #fff !important; padding: 4px 10px; border-radius: 6px;
        font-size: 0.7rem; font-weight: 700; text-decoration: none; margin-left: 10px;
        transition: 0.2s; display: inline-flex; align-items: center; justify-content: center;
        border: none; cursor: pointer; box-shadow: none;
    }
    .ssd-follow-btn:hover { background: #2563eb; transform: translateY(-1px); }
    .p-verify-icon { width: 14px !important; height: 14px !important; margin-left: 4px; display: inline-block; vertical-align: middle; }

    /* Mobile Nav - Flat */
    .sr-mobile-nav-container { display: none; }
    @media (max-width: 991px) {
        .sr-mobile-nav-container { display: block; position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); width: 95%; max-width: 450px; z-index: 9999; }
        .glass-nav { display: flex; justify-content: space-around; align-items: center; background: var(--ssd-card); border: none; border-radius: 50px; padding: 6px 8px; box-shadow: none; pointer-events: auto; }
        
        .m-nav-item { background: transparent !important; border: none; color: #64748b; display: flex; flex-direction: column; align-items: center; font-size: 9px; gap: 3px; flex: 1; cursor: pointer; padding: 0; outline: none; transition: 0.2s; -webkit-tap-highlight-color: transparent; }
        .m-nav-item .icon-box { font-size: 1.1rem; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.2s; background: transparent !important; }
        .m-nav-item.active i { color: var(--ssd-primary) !important; }
        .m-nav-item.active span { color: var(--ssd-primary) !important; font-weight: 800 !important; }
        .m-nav-item.active .icon-box { transform: translateY(-3px); }
        
        .rank-header-title { font-size: 1.5rem; }
        .ssd-filter-bar { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; width: 100% !important; gap: 8px; }
        .ssd-custom-filter-wrap { flex: 1; }
        .filter-trigger { padding: 8px 10px; font-size: 0.8rem; min-width: unset; width: 100%; justify-content: space-between; }
    }
    
    @media (min-width: 992px) {
        .sr-main-container { padding: 0px 10px 10px 10px; }
        #sr-content-wrapper { flex: 1; overflow: hidden; width: 100%; padding-top: 15px;}
        #sr-desktop-sidebar { display: flex; align-items: center; align-self: flex-end; background: var(--ssd-card); border: none; border-radius: 50px; padding: 6px; box-shadow: none; height: fit-content; position: sticky; top: 10px; width: fit-content; z-index: 100; margin-bottom: 25px; margin-top: 20px;}
        .sr-desktop-nav-header { display: none; }
        .sr-desktop-nav { display: flex; flex-direction: row; gap: 5px; }
        .sr-nav-item { background: transparent; border: none; color: #94a3b8; padding: 10px 20px; cursor: pointer; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; border-radius: 50px; font-weight: 600; }
        .sr-nav-item.active { color: #fff; background: var(--ssd-primary); box-shadow: none; }
    }

    .ssd-full-view { display: none; animation: fadeIn 0.3s; width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
    .ssd-full-view.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    
    @media (max-width: 600px) {
        .lb-row-app { padding: 10px 12px; }
        .lb-avatar-app { width: 35px; height: 35px; }
        .lb-name-app { font-size: 0.9rem; }
        .rank-tab-btn-pro { font-size: 0.85rem; padding: 8px 10px; }
        .lb-rank-app { min-width: 50px !important; white-space: nowrap !important; text-align: center; }
    }

    /* --- Start Session / Time Modal (Flat Design) --- */
    .ssd-slide-up-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(10, 15, 30, 0.85); backdrop-filter: blur(10px); z-index: 999998; display: none; }
    .ssd-slide-up-modal { position: fixed; bottom: -100vh; left: 0; width: 100vw; height: 100vh; background: var(--ssd-card); z-index: 999999; display: flex; flex-direction: column; transition: bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; border: none; }
    .ssd-slide-up-modal.show { bottom: 0; }
    
    .ssd-slide-content { flex: 1; overflow-y: auto; padding: 30px 25px 40px 25px; display: flex; flex-direction: column; align-items: center; position: relative; }
    
    .ssd-slide-close-float { position: absolute; top: 20px; right: 25px; background: var(--ssd-box-bg); border: none; color: #cbd5e1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: all 0.3s ease; z-index: 50; }
    .ssd-slide-close-float:hover { background: #ef4444; color: white; transform: rotate(90deg) scale(1.1); }

    .ssd-modal-anim-header { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 20px; text-align: center; }
    .ssd-anim-container { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: -15px; } 
    .ssd-modal-title { color: #ffffff; font-size: 1.8rem; font-weight: 800; margin: 0 0 2px 0; letter-spacing: -0.5px; }
    .ssd-modal-subtitle { color: #64748b; font-size: 0.9rem; font-weight: 500; margin: 0; }

    .ssd-form-wrapper { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 5; }
    .ssd-label { font-size: 0.75rem; color: #94a3b8; margin-bottom: 6px; display: block; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
    
    .ssd-custom-select-wrapper { position: relative; } 
    .ssd-form-section-1 { position: relative; z-index: 30; }
    .ssd-form-section-2 { position: relative; z-index: 20; }
    .ssd-form-section-3 { position: relative; z-index: 10; }

    .ssd-custom-select-trigger { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-size: 1rem; color: #f8fafc; background: var(--ssd-box-bg); border: none; border-radius: 16px; cursor: pointer; transition: all 0.3s; box-shadow: none; }
    .ssd-custom-select-wrapper.open .ssd-custom-select-trigger { box-shadow: inset 0 0 0 2px var(--ssd-primary); }
    
    .ssd-custom-options { position: absolute; top: calc(100% + 5px); left: 0; right: 0; background: var(--ssd-box-bg); border: none; border-radius: 16px; z-index: 100; display: none; max-height: 250px; overflow-y: auto; box-shadow: none; }
    .ssd-custom-select-wrapper.open .ssd-custom-options { display: block; animation: slideDownFade 0.2s ease forwards; }
    .ssd-custom-option { padding: 12px 18px; cursor: pointer; color: #cbd5e1; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 0.95rem; transition: 0.2s; }
    .ssd-custom-option:hover, .ssd-custom-option.selected { background: rgba(59, 130, 246, 0.15); color: var(--ssd-primary); }
    
    .ssd-custom-options::-webkit-scrollbar { width: 6px; }
    .ssd-custom-options::-webkit-scrollbar-thumb { background: var(--ssd-border); border-radius: 10px; }

    .ssd-shortcuts-container { width: 100%; max-width: 480px; margin-bottom: 20px; display: none; }
    .ssd-shortcuts-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 5px 0 10px 0; scrollbar-width: none; }
    .ssd-shortcuts-scroll::-webkit-scrollbar { display: none; }
    .ssd-shortcut-tag { background: var(--ssd-primary); border: none; color: #ffffff; padding: 8px 16px; border-radius: 100px; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: all 0.3s; box-shadow: none; }
    .ssd-shortcut-tag:hover { transform: translateY(-2px); filter: brightness(1.1); }
    .ssd-shortcut-delete { color: #ffffff; background: rgba(0, 0, 0, 0.2); border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; transition: 0.2s; }
    .ssd-shortcut-delete:hover { background: #ef4444; }

    .ssd-action-row { display: flex; gap: 12px; margin-top: 5px; position: relative; z-index: 1; }
    .ssd-btn-primary-glow { background: var(--ssd-primary); color: white; border: none; font-weight: 800; cursor: pointer; transition: all 0.3s; box-shadow: none; text-transform: uppercase; letter-spacing: 0.5px; }
    .ssd-btn-primary-glow:hover { transform: translateY(-2px); }
    .ssd-save-shortcut-btn { background: var(--ssd-box-bg); border: none; color: #94a3b8; width: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; font-size: 1.2rem; }
    .ssd-save-shortcut-btn:hover { background: var(--ssd-primary); color: white; }

    .ssd-subject-search-wrap { padding: 12px; position: sticky; top: 0; background: var(--ssd-box-bg); z-index: 10; border-bottom: none; border-radius: 14px 14px 0 0; }
    .ssd-search-input-box { position: relative; display: flex; align-items: center; width: 100%; }
    .ssd-subject-search-input { width: 100%; padding: 14px 15px 14px 45px !important; border-radius: 50px !important; border: none !important; background: var(--ssd-card) !important; color: #ffffff !important; outline: none; font-size: 0.95rem; transition: all 0.3s ease; box-shadow: none !important; box-sizing: border-box; }
    .ssd-subject-search-input::placeholder { color: #64748b !important; }
    .ssd-subject-search-input:focus { box-shadow: inset 0 0 0 2px var(--ssd-primary) !important; }
    .ssd-search-icon-inside { position: absolute; left: 15px; color: var(--ssd-primary); font-size: 1rem; pointer-events: none; z-index: 2; }

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

    /* Breakdown Popup */
    .ssd-bp-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(5px); z-index: 9999998 !important; display: none; }
    .ssd-bp-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: var(--ssd-card); border: none; border-radius: 16px; padding: 25px; width: 90%; max-width: 400px; z-index: 9999999 !important; display: none; opacity: 0; transition: 0.3s ease; box-shadow: none; }
    .ssd-bp-modal.show { transform: translate(-50%, -50%) scale(1); opacity: 1; display: block; }
    @media (max-width: 768px) {
        .ssd-bp-modal { top: auto !important; bottom: -100vh; left: 0 !important; transform: none !important; width: 100% !important; max-width: 100% !important; height: 70vh !important; border-radius: 24px 24px 0 0 !important; transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important; margin: 0 !important; }
        .ssd-bp-modal.show { bottom: 0 !important; transform: none !important; }
    }
    .ssd-bp-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; border-bottom: 1px dashed var(--ssd-border); padding-bottom: 15px; }
    .ssd-bp-title { margin: 0; color: #fff; font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
    .ssd-bp-close { background: var(--ssd-box-bg); border: none; color: #94a3b8; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
    .ssd-bp-close:hover { background: #ef4444; color: white; }
    .ssd-daily-chart-container { display: flex; justify-content: center; margin-bottom: 20px; }
    .ssd-daily-chart-wrap { position: relative; width: 140px; height: 140px; }
    .ssd-daily-chart-canvas { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(#3b82f6 0% 100%); transition: background 0.5s ease; }
    .ssd-daily-center-time { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background: var(--ssd-card); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: none; }
    .ssd-daily-pct-val { color: #fff; font-weight: 800; font-size: 1.1rem; }
    .ssd-bp-list-wrap { display: flex; flex-direction: column; gap: 8px; max-height: calc(70vh - 250px); overflow-y: auto; padding-right: 5px; }
    .ssd-bp-list-wrap::-webkit-scrollbar { width: 4px; }
    .ssd-bp-list-wrap::-webkit-scrollbar-thumb { background: var(--ssd-border); border-radius: 10px; }
    .ssd-bd-item { display: flex; justify-content: space-between; align-items: center; background: var(--ssd-box-bg); padding: 10px 15px; border-radius: 10px; border: none; }
    .ssd-bd-subj { display: flex; align-items: center; gap: 10px; }
    .ssd-bd-color { width: 12px; height: 12px; border-radius: 50%; }
    .ssd-bd-name { color: #cbd5e1; font-size: 0.9rem; font-weight: 600; }
    .ssd-bd-time { color: #fff; font-weight: 700; font-size: 0.9rem; }

    @media (max-width: 600px) {
        .ssd-modal-title { font-size: 1.3rem !important; }
        .ssd-modal-subtitle { font-size: 0.8rem !important; }
        .ssd-label { font-size: 0.65rem !important; }
        .ssd-custom-select-trigger, .ssd-subject-search-input { padding: 12px 15px !important; font-size: 0.85rem !important; }
        .ssd-btn-primary-glow { padding: 12px !important; font-size: 0.95rem !important; }
    }

/* FLAT MODERN UI VARIABLES & BASE */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-bg: #151A28;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

.ssd-single-view-container { 
    max-width: 900px; 
    margin: 30px auto 120px auto; 
    font-family: 'Inter', sans-serif; 
    color: var(--ssd-text); 
}

/* DESKTOP LAYOUT */
.ssd-desktop-card-layout { 
    background: transparent; 
    border-radius: 0; 
    box-shadow: none; 
    border: none; 
    padding: 0; 
}
.ssd-dsk-top-row { display: grid; grid-template-columns: 350px 1fr; gap: 30px; margin-bottom: 30px; }
.ssd-dsk-thumb-wrapper { display: flex; flex-direction: column; gap: 10px; }
.ssd-dsk-thumb-box { width: 100%; aspect-ratio: 1/1.2; border-radius: 16px; overflow: hidden; background: var(--ssd-box-bg); border: none; cursor: zoom-in; display:flex; align-items:center; justify-content:center; padding: 15px;}
.ssd-dsk-thumb-box img { width: 100%; height: 100%; object-fit: contain; border: none; }

.ssd-thumb-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
.ssd-thumb-list::-webkit-scrollbar { display: none; }
.ssd-thumb-item { width: 60px; height: 60px; border-radius: 10px; background: var(--ssd-box-bg); padding: 5px; cursor: pointer; border: 2px solid transparent; transition: 0.2s; flex-shrink: 0; }
.ssd-thumb-item img { width: 100%; height: 100%; object-fit: contain; }
.ssd-thumb-item.active, .ssd-thumb-item:hover { border-color: var(--ssd-primary); }

.ssd-dsk-info-box { display: flex; flex-direction: column; justify-content: center; background: var(--ssd-card); padding: 30px; border-radius: 16px;}
.ssd-dsk-meta-row { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.ssd-owner-pill { display: flex; align-items: center; gap: 8px; background: var(--ssd-box-bg); padding: 4px 10px 4px 4px; border-radius: 20px; font-size: 0.85rem; color: var(--ssd-text); margin-left: auto; }
.ssd-owner-pill img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ssd-dsk-title { font-size: 1.8rem; font-weight: 700; color: var(--ssd-text); margin: 0 0 15px 0; line-height: 1.3; }

.ssd-meta-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ssd-meta-badges .ssd-badge { background: var(--ssd-box-bg); color: var(--ssd-text-muted); padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; }
.ssd-dsk-price-row { display: flex; align-items: center; gap: 20px; margin-top: auto; border-top: 1px dashed var(--ssd-border); padding-top: 20px;}
.ssd-dsk-price-block { display: flex; flex-direction: column; }
.ssd-dsk-price { font-size: 1.6rem; font-weight: 800; color: var(--ssd-primary); }

.ssd-add-library-btn { font-size: 1.4rem; color: var(--ssd-text-muted); cursor: pointer; transition: 0.3s; }
.ssd-add-library-btn.saved { color: #ef4444; animation: heartBeat 0.3s ease-in-out; }
@keyframes heartBeat { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* BUTTONS */
.ssd-desktop-actions { flex: 1; }
.ssd-btn-primary-modern { background: var(--ssd-primary); color: white; border: none; padding: 12px 20px; border-radius: 12px; font-weight: 600; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; box-shadow: none; font-size: 0.95rem; width: 100%; cursor: pointer;}
.ssd-btn-primary-modern:hover { background: #2563eb; color: white; transform: translateY(-2px); }

/* TABS */
.ssd-modern-tabs { margin-top: 0; background: var(--ssd-card); border-radius: 16px; padding: 25px; }
.ssd-tab-headers { display: flex; gap: 20px; border-bottom: 2px solid var(--ssd-border); margin-bottom: 20px; }
.ssd-tab-link { background: none; border: none; padding: 12px 0; font-size: 0.95rem; color: var(--ssd-text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: 0.2s; white-space: nowrap; margin-bottom: -2px; }
.ssd-tab-link.active { color: var(--ssd-primary); border-bottom-color: var(--ssd-primary); font-weight: 600; }
.ssd-tab-body { display: none; }
.ssd-tab-body.active { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* DESCRIPTION & FEATURES */
.ssd-description-content { color: var(--ssd-text); line-height: 1.6; font-size: 0.95rem; }
.dark-features-grid.vertical-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; background: var(--ssd-box-bg); padding: 20px; border-radius: 12px; border: none; }
.feature-item { display: flex; align-items: center; gap: 12px; }
.feature-item i { width: 36px; height: 36px; background: var(--ssd-card); color: var(--ssd-primary); display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 1rem; flex-shrink: 0; }
.feature-item .f-text { display: flex; flex-direction: column; justify-content: center; }
.feature-item .f-text small { font-size: 0.7rem; color: var(--ssd-text-muted); text-transform: uppercase; font-weight: 700; line-height: 1.2; margin-bottom: 2px; }
.feature-item .f-text strong { font-size: 0.95rem; color: var(--ssd-text); line-height: 1.2; }

/* REVIEWS CSS */
.ssd-rating-summary { display: flex; align-items: center; gap: 15px; background: var(--ssd-box-bg); padding: 20px; border-radius: 12px; border: none; margin-bottom: 30px; }
.big-rating { font-size: 2.5rem; font-weight: 700; color: var(--ssd-text); }
.star-row { color: #f59e0b; font-size: 1.2rem; }

.ssd-review-item { display: flex; gap: 15px; margin-bottom: 20px; border-bottom: 1px dashed var(--ssd-border); padding-bottom: 20px; }
.ssd-review-item:last-child { border-bottom: none; }
.rev-avatar .avatar-circle { width: 45px; height: 45px; background: var(--ssd-box-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ssd-text); font-weight: 700; font-size: 1.1rem;}
.rev-content { flex: 1; }
.rev-header { display: flex; justify-content: space-between; margin-bottom: 5px; }
.rev-name { font-weight: 600; color: var(--ssd-text); font-size: 0.95rem;}
.rev-stars { color: #f59e0b; font-size: 0.85rem; margin-bottom: 8px; }
.rev-text { color: var(--ssd-text); font-size: 0.95rem; line-height: 1.5; margin: 0; }

/* SHARE POPUP (50% Bottom Sheet Mobile) */
.ssd-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 10000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.share-glass { background: var(--ssd-card); border: none; padding: 30px; border-radius: 20px; text-align: center; width: 85%; max-width: 400px; position: relative; color: var(--ssd-text); box-shadow: none; transition: transform 0.3s ease; }
.ssd-close-icon { position: absolute; top: 15px; right: 15px; background: none; border: none; color: var(--ssd-text-muted); font-size: 1.2rem; cursor: pointer; }

.share-icon-btn { color:white; padding:12px; border-radius:50%; width:50px; height:50px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; text-decoration:none; transition: 0.3s; box-shadow: none; }
.share-icon-btn:hover { transform: translateY(-3px); filter: brightness(1.1); }

@media (max-width: 768px) {
    #ssd-share-popup { align-items: flex-end; }
    #ssd-share-popup .share-glass {
        width: 100%; max-width: 100%; border-radius: 24px 24px 0 0;
        height: 50vh; margin: 0; padding: 30px 20px 50px 20px;
        display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
        animation: slideUpShare 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }
}
@keyframes slideUpShare { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* PAYMENT & CONFIRM MODALS (Flat) */
.confirm-glass { max-width: 350px !important; border-radius: 20px; background: var(--ssd-card); border: none; box-shadow: none; padding: 25px; margin: 0 auto; width: 90%; text-align: center;}
.ssd-btn-cancel-modern { background: var(--ssd-box-bg); border: none; color: var(--ssd-text); padding: 12px 25px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.3s; font-size: 0.95rem; }
.ssd-btn-cancel-modern:hover { background: var(--ssd-border); color: #fff; }

.digital-pay-overlay { display: none; align-items: flex-end; justify-content: center; padding: 0 !important; }
.ssd-modal-drawer { background: var(--ssd-card); width: 100vw !important; height: 85vh; border-radius: 24px 24px 0 0; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: translateY(100%); display: flex; flex-direction: column; overflow: hidden; border: none; margin: 0 !important; }
@media (min-width: 900px) {
    .digital-pay-overlay { align-items: center; justify-content: flex-end; }
    .ssd-modal-drawer { width: 450px !important; height: 100vh; border-radius: 0; transform: translateX(100%); }
}
.digital-pay-overlay.show { display: flex !important; }
.digital-pay-overlay.show .ssd-modal-drawer { transform: translate(0); }

.drawer-body { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.product-mini-preview { display: flex; gap: 15px; padding: 15px; background: var(--ssd-box-bg); border-radius: 15px; border: none; }
.product-mini-preview img { width: 60px; height: 80px; object-fit: contain; border-radius: 8px; background: var(--ssd-card); padding: 2px;}
.mini-details h4 { margin: 0 0 5px; font-size: 1rem; color: var(--ssd-text); line-height: 1.3;}
.mini-details .badge { font-size: 0.7rem; background: var(--ssd-primary); padding: 2px 8px; border-radius: 4px; color: #fff; font-weight: bold; text-transform: uppercase; }
.mini-details .price { margin-top: 8px; font-weight: 800; color: #10b981; font-size: 1.1rem; }

.ssd-payment-grid-modern { display: flex; flex-direction: column; gap: 12px; }
.ssd-pay-method-mod { background: var(--ssd-box-bg); border: none; border-radius: 16px; padding: 15px; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: all 0.3s ease; position: relative; box-shadow: none;}
.ssd-pay-method-mod:hover { background: var(--ssd-border); }
.ssd-pay-method-mod.selected { background: rgba(59, 130, 246, 0.1); border: 1px solid var(--ssd-primary); box-shadow: none; }
.ssd-pay-method-mod .method-icon { width: 45px; height: 45px; border-radius: 12px; background: var(--ssd-card); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--ssd-text-muted); }
.ssd-pay-method-mod.selected .method-icon { background: var(--ssd-primary); color: #fff; }
.ssd-pay-method-mod .method-info { display: flex; flex-direction: column; flex: 1; }
.ssd-pay-method-mod .m-title { font-size: 0.9rem; font-weight: 700; color: var(--ssd-text); margin-bottom: 2px; }
.ssd-pay-method-mod .m-price { font-size: 1.2rem; font-weight: 800; color: var(--ssd-text); line-height: 1.1; }
.ssd-pay-method-mod small { font-size: 0.75rem; font-weight: 600; margin-top: 4px; }
.ssd-pay-method-mod .method-check { font-size: 1.3rem; color: var(--ssd-border); transition: 0.3s; }
.ssd-pay-method-mod.selected .method-check { color: var(--ssd-primary); }
.txt-green { color: #10b981; }
.txt-red { color: #ef4444; }

.ssd-btn-confirm-glow { background: var(--ssd-primary); color: #fff; border: none; border-radius: 14px; font-weight: 700; padding: 15px; cursor: pointer; box-shadow: none; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.05rem; }
.ssd-btn-confirm-glow:hover:not(:disabled) { transform: translateY(-2px); background: #2563eb; }
.ssd-btn-confirm-glow:disabled { background: var(--ssd-box-bg); box-shadow: none; color: var(--ssd-text-muted); cursor: not-allowed; border: none; }

/* LIGHTBOX & PDF STYLES */
.ssd-lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 999999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.lightbox-content { max-width: 90%; max-height: 80%; display: flex; align-items: center; justify-content: center; }
.lightbox-content img { max-width: 100%; max-height: 85vh; border-radius: 10px; box-shadow: none; object-fit: contain; }
.lightbox-close { position: absolute; top: 25px; right: 25px; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; z-index: 10; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; width: 50px; height: 50px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: 0.3s; z-index: 10; display:flex; align-items:center; justify-content:center;}
.lightbox-nav:hover { background: var(--ssd-primary); }
.lightbox-nav.prev { left: 20px; }
.lightbox-nav.next { right: 20px; }

.ssd-pdf-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--ssd-bg); z-index: 999999; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; pointer-events: none; }
.ssd-pdf-popup-overlay.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.ssd-pdf-close { position: absolute; top: 20px; right: 20px; background: var(--ssd-box-bg); color: #ef4444; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: 0.2s; z-index: 105; }
.ssd-pdf-close:hover { background: #ef4444; color: #fff; transform: scale(1.1); }
.ssd-pdf-body { flex: 1; position: relative; background: var(--ssd-bg); user-select: none; -webkit-user-select: none; transition: opacity 0.1s ease; overflow: hidden; display: flex; justify-content: center; align-items: center; padding-bottom: 70px; }
.canvas-perspective-wrapper { perspective: 1500px; display: flex; justify-content: center; align-items: center; gap: 0; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; }
#ssd-pdf-canvas-left, #ssd-pdf-canvas-right { max-width: 100%; max-height: 85vh; background: white; box-shadow: none; border-radius: 4px; }
.desktop-only-canvas { display: none; }
@media (min-width: 900px) { .desktop-only-canvas { display: block; border-left: 1px solid #ccc; max-width: 50%; } #ssd-pdf-canvas-left { border-right: 1px solid #ccc; max-width: 50%; } }
.pdf-floating-toolbar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; background: var(--ssd-card); padding: 8px 15px; border-radius: 30px; border: none; z-index: 100; width: 90%; max-width: 350px; box-shadow: none; }
.pdf-fab-btn { background: var(--ssd-primary); color: white; border: none; height: 38px; padding: 0 16px; border-radius: 19px; cursor: pointer; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: 0.2s; box-shadow: none; }
.pdf-fab-btn:hover { background: #2563eb; transform: scale(1.05); }
.page-info { color: var(--ssd-text); font-size: 0.95rem; font-weight: 700; }
.hide-mobile { display: none; }
@media (min-width: 600px) { .hide-mobile { display: inline; } .pdf-floating-toolbar{ max-width: 400px; } }

/* MOBILE RESPONSIVE */
.ssd-mobile-hero-wrapper { display: none; }
.ssd-universal-floating-bar { display: none; }

@media (max-width: 768px) {
    .ssd-desktop-card-layout { display: none; }
    .ssd-mobile-hero-wrapper { display: block; }
    
    .ssd-single-view-container { 
        margin: 10px auto 100px auto !important; 
        padding: 0 10px;
    }
    
    .ssd-class-hero { 
        position: relative; width: 100%; aspect-ratio: 1/1.1; background: var(--ssd-box-bg); 
        border-radius: 16px; overflow: hidden; margin-bottom: 15px;
    }
    .ssd-hero-media-frame { width: 100%; height: 100%; padding: 20px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding-bottom: 80px;}
    .ssd-hero-media-frame img { width: 100%; height: 100%; object-fit: contain; }
    
    .ssd-floating-back-btn { position: absolute; top: 15px; left: 15px; width: 36px; height: 36px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; z-index: 10; backdrop-filter: blur(4px); }
    
    .ssd-class-info-sheet.mobile-only-sheet { 
        background: transparent;
        border-radius: 0; margin-top: 0; position: relative; padding: 10px 5px 80px 5px; border-top: none; z-index: 5; 
    }
    .ssd-class-title-modern { font-size: 1.3rem; color: var(--ssd-text); margin: 0; font-weight: 700; line-height: 1.3; }
    .ssd-dsk-meta-row { display: flex; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
    .ssd-owner-pill { display: flex; align-items: center; gap: 8px; background: var(--ssd-box-bg); padding: 4px 10px 4px 4px; border-radius: 20px; font-size: 0.8rem; color: var(--ssd-text); margin-left: auto; }
    .ssd-owner-pill img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
    
    .ssd-mobile-tabs-container { margin-top: 25px; background: transparent; padding: 0;}
    .ssd-tab-headers { gap: 15px; border-bottom: 1px solid var(--ssd-border); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0px; margin-bottom: 15px;} 
    .ssd-tab-link { font-size: 0.9rem; padding: 10px 0; }
    
    .ssd-universal-floating-bar { position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); width: 92%; max-width: 600px; background: var(--ssd-card); padding: 12px 20px; border-radius: 50px; box-shadow: none; border: none; z-index: 1000; display: flex; justify-content: center; }
    .ssd-float-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }
    .ssd-footer-price span { font-size: 1.2rem; font-weight: 700; color: var(--ssd-text); }
    .ssd-btn-disabled { background: var(--ssd-box-bg); color: var(--ssd-text-muted); border:none; padding:10px 20px; border-radius:30px; cursor:not-allowed; box-shadow: none;}
    .ssd-share-coin-btn { width: 44px; height: 44px; }
}

/* LIGHT MODE OVERRIDES */
body.light-mode .ssd-product-modern-wrapper, body.light-mode .ssd-main-image-frame { background-color: var(--ssd-bg); }
body.light-mode .ssd-dsk-thumb-box, body.light-mode .ssd-class-hero { background: #ffffff; border: 1px solid #e2e8f0; }
body.light-mode .ssd-dsk-info-box, body.light-mode .ssd-modern-tabs { background: #ffffff; border: 1px solid #e2e8f0; }
body.light-mode .ssd-product-title-modern, body.light-mode .ssd-class-title-modern { color: var(--ssd-text); }
body.light-mode .ssd-seller-pill, body.light-mode .ssd-owner-pill { background: var(--ssd-box-bg); border: none; color: var(--ssd-text); }
body.light-mode .ssd-stars-compact { background: var(--ssd-box-bg); }
body.light-mode .dark-features-grid.vertical-grid { background: var(--ssd-box-bg); border: none; }
body.light-mode .feature-item i { background: var(--ssd-card); }
body.light-mode .feature-item .f-text strong { color: var(--ssd-text); }
body.light-mode .confirm-glass, body.light-mode .share-glass { background: var(--ssd-card); border: none; }
body.light-mode .ssd-btn-cancel-modern { background: var(--ssd-box-bg); color: var(--ssd-text); border: none; }
body.light-mode .ssd-modal-drawer { background: var(--ssd-card); border: none; }
body.light-mode .product-mini-preview { background: var(--ssd-box-bg); border: none; }
body.light-mode .mini-details h4 { color: var(--ssd-text); }
body.light-mode .ssd-pay-method-mod { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-pay-method-mod .method-icon { background: var(--ssd-card); }
body.light-mode .ssd-pay-method-mod .m-title, body.light-mode .ssd-pay-method-mod .m-price { color: var(--ssd-text); }
body.light-mode .ssd-pdf-popup-overlay, body.light-mode .ssd-pdf-body, body.light-mode .ssd-lightbox-overlay { background: var(--ssd-bg); }
body.light-mode .pdf-floating-toolbar { background: var(--ssd-card); border: none; }
body.light-mode .ssd-universal-floating-bar { background: var(--ssd-card); border: 1px solid #e2e8f0; }

/* FLAT MODERN UI VARIABLES & BASE */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-bg: #151A28;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

.ssd-single-view-container { 
    max-width: 900px; 
    margin: 30px auto 120px auto; 
    font-family: 'Inter', sans-serif; 
    color: var(--ssd-text); 
}

/* DESKTOP LAYOUT */
.ssd-desktop-card-layout { 
    background: transparent; 
    border-radius: 0; 
    box-shadow: none; 
    border: none; 
    padding: 0; 
}
.ssd-dsk-top-row { display: grid; grid-template-columns: 350px 1fr; gap: 30px; margin-bottom: 30px; }
.ssd-dsk-thumb-box { width: 100%; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: var(--ssd-bg); border: none; }
.ssd-dsk-thumb-box img, .ssd-dsk-thumb-box iframe { width: 100%; height: 100%; object-fit: cover; border: none; }
.ssd-dsk-info-box { display: flex; flex-direction: column; justify-content: center; }
.ssd-dsk-meta-row { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.ssd-owner-pill { display: flex; align-items: center; gap: 8px; background: var(--ssd-box-bg); padding: 4px 10px 4px 4px; border-radius: 20px; font-size: 0.85rem; color: var(--ssd-text); margin-left: auto; }
.ssd-owner-pill img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ssd-dsk-title { font-size: 1.8rem; font-weight: 700; color: var(--ssd-text); margin: 0 0 15px 0; line-height: 1.3; }

.ssd-meta-badges .ssd-badge { background: var(--ssd-box-bg); color: var(--ssd-text-muted); padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; margin-right: 5px; }
.ssd-dsk-price-row { display: flex; align-items: center; gap: 20px; margin-top: auto; }
.ssd-dsk-price { font-size: 1.5rem; font-weight: 700; color: var(--ssd-primary); }
.ssd-dsk-price .per-month { font-size: 0.9rem; color: var(--ssd-text-muted); font-weight: 400; }

.ssd-btn-go-class { background: rgba(16, 185, 129, 0.1); color: #10b981; border: none; padding: 10px 20px; border-radius: 12px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: 0.2s; box-shadow: none;}
.ssd-btn-go-class:hover { background: #10b981; color: white; transform: translateY(-2px); }

/* TABS */
.ssd-modern-tabs { margin-top: 20px; }
.ssd-tab-headers { display: flex; gap: 20px; border-bottom: 2px solid var(--ssd-border); margin-bottom: 20px; }
.ssd-tab-link { background: none; border: none; padding: 12px 0; font-size: 0.95rem; color: var(--ssd-text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: 0.2s; white-space: nowrap; margin-bottom: -2px; }
.ssd-tab-link.active { color: var(--ssd-primary); border-bottom-color: var(--ssd-primary); font-weight: 600; }
.ssd-tab-body { display: none; }
.ssd-tab-body.active { display: block; }

/* FILTERS */
.ssd-month-filter-container { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; color: var(--ssd-text); }
.ssd-month-filter-container select { background: var(--ssd-box-bg); color: var(--ssd-text); border: none; padding: 8px 12px; border-radius: 8px; outline: none; }

/* CURRICULUM (Lessons List) */
.ssd-section-card { border: none; border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: var(--ssd-box-bg); }
.ssd-sec-header { background: var(--ssd-card); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; color: var(--ssd-text); border-bottom: 1px solid var(--ssd-border); transition: 0.2s;}
.ssd-sec-header:hover { background: var(--ssd-box-bg); }
.ssd-sec-lessons { padding: 10px 20px; display: none; background: transparent; }
.ssd-section-card.open .ssd-sec-lessons { display: block; }
.ssd-lesson-row { padding: 10px 0; color: var(--ssd-text-muted); font-size: 0.9rem; display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed var(--ssd-border); }
.ssd-lesson-row:last-child { border-bottom: none; }

/* REVIEWS CSS */
.ssd-reviews-wrapper { margin-top: 20px; color: var(--ssd-text); }
.ssd-rating-summary { display: flex; align-items: center; gap: 15px; background: var(--ssd-box-bg); padding: 20px; border-radius: 12px; border: none; margin-bottom: 30px; }
.big-rating { font-size: 2.5rem; font-weight: 700; color: var(--ssd-text); }
.star-row { color: #f59e0b; font-size: 1.2rem; }
.total-reviews { margin-left: auto; color: var(--ssd-text-muted); font-size: 0.9rem; }

.ssd-review-form-box { background: var(--ssd-box-bg); padding: 20px; border-radius: 12px; border: none; margin-bottom: 30px; }
.ssd-review-form-box h4 { margin-top: 0; margin-bottom: 15px; color: var(--ssd-text); }
.review-star-input { margin-bottom: 15px; cursor: pointer; display: inline-flex; gap: 5px; font-size: 1.5rem; color: var(--ssd-border); }
.review-star-input .star-icon.filled, .review-star-input .star-icon.hover-active { color: #f59e0b; }
.ssd-review-form-box textarea { width: 100%; height: 100px; background: var(--ssd-card); border: none; border-radius: 12px; padding: 15px; color: var(--ssd-text); margin-bottom: 15px; font-family: inherit; }
.ssd-review-form-box textarea:focus { border: none; outline: none; box-shadow: inset 0 0 0 1px var(--ssd-primary);}

.ssd-review-item { display: flex; gap: 15px; margin-bottom: 20px; border-bottom: 1px dashed var(--ssd-border); padding-bottom: 20px; }
.ssd-review-item:last-child { border-bottom: none; }
.rev-avatar .avatar-circle { width: 45px; height: 45px; background: var(--ssd-box-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ssd-text); font-weight: 700; font-size: 1.1rem;}
.rev-content { flex: 1; }
.rev-header { display: flex; justify-content: space-between; margin-bottom: 5px; }
.rev-name { font-weight: 600; color: var(--ssd-text); font-size: 0.95rem;}
.rev-date { font-size: 0.8rem; color: var(--ssd-text-muted); }
.rev-stars { color: #f59e0b; font-size: 0.85rem; margin-bottom: 8px; }
.rev-text { color: var(--ssd-text); font-size: 0.95rem; line-height: 1.5; margin: 0; }

.ssd-notice { padding: 12px 20px; border-radius: 8px; background: var(--ssd-box-bg); color: var(--ssd-text); font-size: 0.9rem; }
.ssd-notice.info { background: rgba(59, 130, 246, 0.1); color: var(--ssd-primary); border: none; }

/* Smart Logo CSS (Light/Dark Mode Toggle) */
.ssd-smart-single-logo { display: inline-flex; align-items: center; margin-right: auto; }
.ssd-smart-single-logo img { height: 26px; width: auto; object-fit: contain; }
.smart-logo-light { display: none; } 

body.light-mode .smart-logo-dark { display: none; } 
body.light-mode .smart-logo-light { display: block; } 

/* SHARE POPUP (50% Bottom Sheet Mobile) */
.ssd-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 10000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.share-glass { background: var(--ssd-card); border: none; padding: 30px; border-radius: 20px; text-align: center; width: 85%; max-width: 400px; position: relative; color: var(--ssd-text); box-shadow: none; transition: transform 0.3s ease; }
.ssd-close-icon { position: absolute; top: 15px; right: 15px; background: none; border: none; color: var(--ssd-text-muted); font-size: 1.2rem; cursor: pointer; }

.share-icon-btn {
    color:white; padding:12px; border-radius:50%; width:50px; height:50px; 
    display:flex; align-items:center; justify-content:center; font-size:1.5rem; 
    text-decoration:none; transition: 0.3s;
    box-shadow: none;
}
.share-icon-btn:hover {
    transform: translateY(-3px); filter: brightness(1.1);
}

@media (max-width: 768px) {
    #ssd-share-popup { align-items: flex-end; }
    #ssd-share-popup .share-glass {
        width: 100%; max-width: 100%; border-radius: 24px 24px 0 0;
        height: 50vh; margin: 0; padding: 30px 20px 50px 20px;
        display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
        animation: slideUpShare 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }
}
@keyframes slideUpShare { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* MOBILE RESPONSIVE (Professional Balance) */
@media (max-width: 768px) {
    .ssd-desktop-card-layout { display: none; }
    .ssd-mobile-hero-wrapper { display: block; }
    
    .ssd-single-view-container { 
        margin: 10px auto 100px auto !important; 
        padding: 0 10px;
    }
    
    .ssd-class-hero { 
        position: relative; width: 100%; aspect-ratio: 16/9; background: #000; 
        border-radius: 16px; overflow: hidden; margin-bottom: 15px;
    }
    .ssd-hero-media-frame iframe, .ssd-hero-media-frame img { width: 100%; height: 100%; object-fit: cover; }
    .ssd-floating-back-btn { position: absolute; top: 20px; left: 20px; width: 36px; height: 36px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; z-index: 10; backdrop-filter: blur(4px); }
    
    .ssd-class-info-sheet.mobile-only-sheet { 
        background: transparent; 
        border-radius: 0; margin-top: 0; position: relative; padding: 10px 5px 80px 5px; border-top: none; z-index: 5; 
    }
    .ssd-class-title-modern { font-size: 1.3rem; color: var(--ssd-text); margin: 0; font-weight: 700; line-height: 1.3; }
    .ssd-dsk-meta-row { display: flex; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
    .ssd-owner-pill { display: flex; align-items: center; gap: 8px; background: var(--ssd-box-bg); padding: 4px 10px 4px 4px; border-radius: 20px; font-size: 0.8rem; color: var(--ssd-text); margin-left: auto; }
    .ssd-owner-pill img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
    
    .ssd-mobile-tabs-container { margin-top: 25px; }
    .ssd-tab-headers { gap: 15px; border-bottom: 1px solid var(--ssd-border); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0px; margin-bottom: 15px;} 
    .ssd-tab-link { font-size: 0.9rem; padding: 10px 0; }
    
    .ssd-sec-header { padding: 12px 15px; font-size: 0.9rem; }
    .ssd-lesson-row { font-size: 0.85rem; }
}

.ssd-universal-floating-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 600px; background: var(--ssd-card); padding: 12px 20px; border-radius: 50px; box-shadow: none; border: none; z-index: 1000; display: flex; justify-content: center; }
@media (max-width: 768px) { .ssd-universal-floating-bar { width: 92%; bottom: 25px; } }
.ssd-float-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.ssd-footer-price span { font-size: 1.2rem; font-weight: 700; color: var(--ssd-text); }
.ssd-btn-primary-modern { background: var(--ssd-primary); color: white; border: none; padding: 10px 24px; border-radius: 30px; font-weight: 600; cursor: pointer; text-decoration: none; transition: 0.2s; font-size: 0.95rem; box-shadow: none;}
.ssd-btn-primary-modern:hover { background: #2563eb; }
.ssd-btn-disabled { background: var(--ssd-box-bg); color: var(--ssd-text-muted); border:none; padding:10px 20px; border-radius:30px; cursor:not-allowed; box-shadow: none;}

/* Share Button Animation Styling */
.ssd-share-coin-btn {
    display: flex; align-items: center; justify-content: center;
    background: transparent; 
    border: none;            
    box-shadow: none;        
    cursor: pointer;
    transition: all 0.3s ease;
}

.ssd-share-coin-btn:hover {
    transform: scale(1.1) translateY(-2px); 
}

@media (max-width: 768px) {
    .ssd-share-coin-btn { width: 44px; height: 44px; }
}

/* LIGHT MODE OVERRIDES */
body.light-mode .ssd-product-modern-wrapper { background-color: var(--ssd-bg); }
body.light-mode .ssd-desktop-card-layout { background: transparent; }
body.light-mode .ssd-dsk-thumb-box { background: var(--ssd-card); border: none; }
body.light-mode .ssd-owner-pill { background: var(--ssd-box-bg); border: none; color: var(--ssd-text); }
body.light-mode .ssd-meta-badges .ssd-badge { background: var(--ssd-box-bg); color: var(--ssd-text); }
body.light-mode .ssd-btn-go-class { background: rgba(16, 185, 129, 0.1); color: #10b981; }
body.light-mode .ssd-month-filter-container select { background: var(--ssd-box-bg); border: none; color: var(--ssd-text); }
body.light-mode .ssd-section-card { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-sec-header { background: var(--ssd-card); border-bottom: 1px solid var(--ssd-border); color: var(--ssd-text); }
body.light-mode .ssd-lesson-row { border-bottom: 1px dashed var(--ssd-border); }
body.light-mode .ssd-rating-summary { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-review-form-box { background: var(--ssd-box-bg); border: none; }
body.light-mode .ssd-review-form-box textarea { background: var(--ssd-card); border: none; color: var(--ssd-text); }
body.light-mode .rev-avatar .avatar-circle { background: var(--ssd-box-bg); color: var(--ssd-text); }
body.light-mode .ssd-notice { background: var(--ssd-box-bg); color: var(--ssd-text); }
body.light-mode .ssd-modal-glass { background: var(--ssd-card); border: none; color: var(--ssd-text); }
body.light-mode .ssd-universal-floating-bar { background: var(--ssd-card); border: none; }
body.light-mode .ssd-btn-disabled { background: var(--ssd-box-bg); color: var(--ssd-text-muted); }
body.light-mode #share-link-input { background: transparent; color: var(--ssd-text); }

    :root {
        --ssd-card: #1C2338;
        --ssd-box-bg: #222d44;
        --ssd-bg: #151A28;
        --ssd-border: #2d3b55;
        --ssd-primary: #3b82f6;
    }

    /* Follow Stats - White Color */
    .tutor-follow-stats a { color: #fff !important; font-weight: 500; text-decoration: none; }
    .tutor-follow-stats a strong { color: #fff !important; font-weight: 800; }
    .tutor-follow-stats a:hover { opacity: 0.8; }

    /* Modern Buttons - Flat */
    .ssd-btn-dashboard { background-color: #10b981 !important; color: white !important; transition: 0.3s; box-shadow: none; border: none; }
    .ssd-btn-dashboard:hover { background-color: #059669 !important; transform: translateY(-2px); }

    .ssd-btn-edit { background-color: var(--ssd-primary) !important; color: white !important; transition: 0.3s; box-shadow: none; border: none; }
    .ssd-btn-edit:hover { background-color: #2563eb !important; transform: translateY(-2px); }

    /* FAB Button */
    .ssd-fab-container { position: fixed; bottom: 30px; right: 30px; z-index: 9990; }
    .ssd-fab-btn { width: 60px; height: 60px; background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; border-radius: 50%; border: none; font-size: 1.5rem; box-shadow: none; cursor: pointer; transition: transform 0.2s; display: flex; align-items: center; justify-content: center; }
    .ssd-fab-btn:hover { transform: scale(1.1) rotate(90deg); }
    
    /* --- NEW MODAL SLIDE ANIMATIONS & BOTTOM SHEET LAYOUT --- */
    .ssd-modal-overlay { 
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
        background: rgba(0, 0, 0, 0.85); z-index: 100000; 
        display: none; justify-content: center; align-items: flex-end; 
        backdrop-filter: blur(5px); 
        padding: 0 !important; margin: 0 !important;
    }
    
    .ssd-fb-modal-box { 
        background: var(--ssd-card); width: 100%; max-width: 600px; 
        height: 75vh; 
        border-radius: 20px 20px 0 0; box-shadow: none; 
        border: none; 
        display: flex; flex-direction: column; 
        animation: ssdSlideUp 0.3s ease-out forwards; 
        position: relative; margin: 0 auto; 
    }
    
    @keyframes ssdSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

    @media (max-width: 768px) {
        .ssd-modal-overlay { align-items: flex-end !important; }
        .ssd-fb-modal-box { 
            width: 100% !important; max-width: 100% !important; margin: 0 !important; 
            border-left: none !important; border-right: none !important; border-radius: 20px 20px 0 0 !important;
            position: absolute !important; bottom: 0 !important; left: 0 !important;
        } 
    }

    .ssd-fb-modal-header { padding: 15px 20px; border-bottom: 1px solid var(--ssd-border); display: flex; justify-content: space-between; align-items: center; }
    .ssd-fb-modal-header h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #f1f5f9; text-align: center; flex-grow: 1; }
    .ssd-modal-close-btn { background: var(--ssd-box-bg); border: none; color: #94a3b8; width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
    .ssd-modal-close-btn:hover { background: #475569; color: #fff; transform: rotate(90deg); }
    
    .ssd-fb-modal-body { padding: 20px; flex-grow: 1; overflow-y: auto; }
    
    .ssd-fb-avatar { width: 45px !important; height: 45px !important; min-width: 45px !important; min-height: 45px !important; border-radius: 50% !important; object-fit: cover !important; border: none !important; background-color: var(--ssd-box-bg); display: block !important; }
    
    .ssd-fb-post-btn-top { background: var(--ssd-primary); color: #fff; border: none; padding: 8px 20px; border-radius: 20px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
    .ssd-fb-post-btn-top:hover { background: #2563eb; }
    
    .ssd-fb-textarea { width: 100%; border: none; background: transparent; color: #ffffff !important; font-size: 1.1rem; resize: none; min-height: 80px; outline: none; margin-bottom: 15px; font-family: inherit; }
    
    .ssd-photo-placeholder-box { border: 2px dashed var(--ssd-border); border-radius: 8px; padding: 8px; margin-bottom: 15px; cursor: pointer; display: block; }
    .ssd-placeholder-inner { background: var(--ssd-box-bg); border-radius: 6px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #f1f5f9; transition: 0.2s; border: none; }
    .ssd-placeholder-inner:hover { background: var(--ssd-card); box-shadow: inset 0 0 0 1px var(--ssd-primary); }
    .ssd-icon-circle { background: var(--ssd-card); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
    
    .ssd-list-item-style { display: flex; align-items: center; gap: 15px; padding: 12px 15px; background: var(--ssd-box-bg); border: none; border-radius: 12px; cursor: pointer; transition: 0.2s; width: 100%; box-sizing: border-box; text-align: left; }
    .ssd-list-item-style:hover { background: var(--ssd-box-bg); box-shadow: inset 0 0 0 1px var(--ssd-primary); transform: translateX(5px); }
    .ssd-list-item-style .icon-wrap { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
    .ssd-list-item-style span { color: #f1f5f9; font-weight: 600; font-size: 0.95rem; }

    /* --- SEAMLESS POST FEED STYLES --- */
    .ssd-post-card { background: transparent !important; border: none !important; border-bottom: 1px solid var(--ssd-border) !important; border-radius: 0 !important; margin-bottom: 0px !important; padding: 20px 0 !important; width: 100% !important; box-shadow: none !important; }
    .ssd-post-header { display: flex; justify-content: space-between; align-items: center !important; padding: 0 16px 12px 16px; border: none !important; }
    .ssd-post-header > div:first-child { display: flex; align-items: center !important; gap: 10px; }
    .ssd-post-header > div:first-child img { margin: 0 !important; }
    .ssd-user-name { font-weight: 700; color: #f8fafc; font-size: 0.95rem; display: flex !important; align-items: center !important; gap: 5px; line-height: 1; margin-bottom: 4px; }
    .ssd-post-time { font-size: 0.75rem; color: #94a3b8; margin-top: 0 !important; line-height: 1; display: block; }
    .ssd-user-name .ssd-verified-badge-wrap, .ssd-user-name svg { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
    .ssd-post-content-area { padding: 0 16px 12px 16px; }
    .ssd-post-excerpt { color: #f8fafc !important; font-size: 0.95rem; line-height: 1.6; padding: 0 16px 12px; display: block; }
    .ssd-read-more-link { color: #3b82f6; cursor: pointer; font-weight: 600; margin-left: 5px; display: inline-block; }
    .ssd-post-img-container { width: 100%; margin-top: 10px; margin-bottom: 5px; background: transparent !important; cursor: pointer; padding: 0 !important; clear: both; display: block; }
    .ssd-post-img { width: 100%; height: auto; display: block; border-radius: 0; }
    .ssd-post-actions-linkedin { display: flex; padding: 10px 16px; gap: 30px; justify-content: flex-start; }
    .ssd-action-item { background: none; border: none; color: #94a3b8; font-weight: 600; font-size: 0.9rem; padding: 5px 0; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
    .ssd-action-item:hover { color: #f8fafc; }

/* --- General Dashboard Layout - Flat Colors --- */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
}

.ssd-desktop-top-row { display: flex; gap: 20px; align-items: stretch; margin-bottom: 25px; }
.ssd-stats-overview-card { flex: 2; background: var(--ssd-card); border: none; border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 20px; box-shadow: none; margin-bottom: 0; z-index: 1;}
.ssd-stat-rank-col { flex: 0 0 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px dashed var(--ssd-border); padding-right: 20px; text-align: center; }
.ssd-rank-trophy { font-size: 2.8rem; color: #f59e0b; margin-bottom: 8px; filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.4)); }
.ssd-rank-info .lbl { font-size: 0.75rem; color: #94a3b8; display: block; text-transform: uppercase; letter-spacing: 1px; }
.ssd-rank-info .val { font-size: 1.6rem; font-weight: 800; color: #fff; display: block; line-height: 1.2; }
.ssd-rank-info .sub-lbl { font-size: 0.7rem; color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 2px 8px; border-radius: 10px; }
.ssd-stat-grid-col { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.ssd-mini-stat { background: var(--ssd-box-bg); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; border: none; }
.ssd-mini-stat .lbl { font-size: 0.75rem; color: #64748b; margin-bottom: 3px; }
.ssd-mini-stat .val { font-size: 1rem; font-weight: 700; color: #fff; }
.text-orange { color: #f97316 !important; }
.ssd-modern-chart-card { background: var(--ssd-card); border-radius: 16px; padding: 25px; margin-bottom: 25px; border: none; box-shadow: none; }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }

/* --- APP-LIKE DIRECT BADGES SECTION --- */
.ssd-app-badges-widget { flex: 1; background: var(--ssd-card); border: none; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; z-index: 10; box-shadow: none; }
.ssd-badge-categories-container { display: flex; flex-direction: column; gap: 15px; }

.ssd-centered-badge-title { text-align: center; font-size: 0.85rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; margin-bottom: 15px; font-weight: 700; display: block; width: 100%; }

/* Three Large Badges Row */
.ssd-top-badges-row { display: flex; gap: 10px; width: 100%; margin-bottom: 5px; }
.ssd-top-badge-item { flex: 1; min-width: 0; background: var(--ssd-box-bg); border-radius: 16px; border: none; box-shadow: none; display: flex; flex-direction: column; align-items: center; padding: 15px 5px; cursor: pointer; transition: 0.3s; position: relative; justify-content: center;}
.ssd-top-badge-item:hover { background: var(--ssd-box-bg); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ssd-primary); }
.ssd-top-badge-item img { width: 55px; height: 55px; object-fit: contain; margin-bottom: 10px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.ssd-top-badge-item .locked-placeholder { width: 55px; height: 55px; border-radius: 50%; background: var(--ssd-card); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #475569; margin-bottom: 10px; border: none; }
.ssd-top-badge-item .tb-name { color: #f1f5f9; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1.1; word-wrap: break-word; width: 100%;}

.ssd-top-badge-item.unlocked { box-shadow: inset 0 0 0 1px var(--ssd-primary); }
.ssd-top-badge-item.locked { opacity: 0.7; }
.ssd-top-badge-item.locked img { filter: grayscale(100%) opacity(0.5); }

/* FLOATING ABSOLUTE DROPDOWN (Scroll Fix included) */
.ssd-bc-dropdown-content { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    z-index: 1050; 
    margin-top: 10px; 
    background: var(--ssd-card); 
    border: 1px solid var(--ssd-border); 
    border-radius: 16px; 
    padding: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    animation: slideDown 0.3s ease; 
    box-sizing: border-box;
    max-height: 250px; 
    overflow-y: auto;
}
.ssd-bc-dropdown-content::-webkit-scrollbar { width: 5px; }
.ssd-bc-dropdown-content::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 5px; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Grid */
.ssd-bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
.ssd-dropdown-item { background: var(--ssd-box-bg); padding: 12px 8px; border-radius: 12px; text-align: center; border: none; position: relative; transition: 0.2s; }
.ssd-dropdown-item img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.ssd-dropdown-item .item-name { display: block; font-size: 0.6rem; color: #94a3b8; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }

.ssd-dropdown-item.earned { box-shadow: inset 0 0 0 1px var(--ssd-primary); }
.ssd-dropdown-item.earned .item-name { color: #f1f5f9; }
.ssd-dropdown-item.not-earned { opacity: 0.6; }
.ssd-dropdown-item.not-earned img { filter: grayscale(100%) opacity(0.6); }

.item-lock { position: absolute; top: 4px; right: 4px; background: var(--ssd-card); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: #94a3b8; border: none; }

/* --- BUILDING GRAPH STYLES --- */
.ssd-building-graph-canvas { height: 220px; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; margin-top: 15px; }
.ssd-graph-bar-wrap { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; margin: 0 4px; z-index: 2; }
.ssd-bar-seg { width: 100%; max-width: 35px; border-radius: 4px 4px 0 0; background: #f59e0b; transition: all 0.2s ease; cursor: pointer; }
.ssd-bar-seg:hover { filter: brightness(1.2); transform: translateY(-2px); }
.ssd-bar-seg-blue { background: #06b6d4; }
.ssd-bar-seg-green { background: #10b981; }
.ssd-graph-date-label { position: absolute; bottom: -22px; font-size: 0.65rem; color: #94a3b8; font-weight: 600; white-space: nowrap; }
.ax-y-grid-line { position: absolute; width: 100%; border-bottom: 1px dashed rgba(255,255,255,0.1); z-index: 1; left: 0; }
.ax-bar-time-lbl { position: absolute; font-size: 0.65rem; color: #fff; font-weight: 600; white-space: nowrap; z-index: 5; transform: translateY(-100%); margin-bottom: 5px; }

/* --- Mobile Responsive Fixes --- */
@media (max-width: 768px) {
    .ssd-desktop-top-row { flex-direction: column; gap: 15px; }
    .ssd-stats-overview-card { flex-direction: row !important; padding: 10px !important; min-height: auto; }
    .ssd-stat-rank-col { flex: 0 0 32% !important; border-right: 1px dashed var(--ssd-border) !important; padding-right: 8px !important; border-bottom: none !important; }
    .ssd-rank-trophy { font-size: 1.8rem !important; margin-bottom: 4px !important; }
    .ssd-rank-info .val { font-size: 1.2rem !important; }
    .ssd-rank-info .lbl { font-size: 0.6rem !important; }
    .ssd-rank-info .sub-lbl { font-size: 0.6rem !important; padding: 1px 6px !important; }
    .ssd-stat-grid-col { gap: 6px !important; }
    .ssd-mini-stat { padding: 6px 8px !important; min-height: 50px; }
    .ssd-mini-stat .val { font-size: 0.85rem !important; }
    .ssd-mini-stat .lbl { font-size: 0.6rem !important; }
    .ssd-modern-chart-card { padding: 15px !important; }
    
    .ssd-app-badges-widget { padding: 12px !important; }
    .ssd-top-badges-row { gap: 5px; }
    .ssd-top-badge-item { padding: 10px 4px; border-radius: 12px; }
    .ssd-top-badge-item img { width: 40px; height: 40px; margin-bottom: 6px; }
    .ssd-top-badge-item .locked-placeholder { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 6px; }
    .ssd-top-badge-item .tb-name { font-size: 0.55rem; letter-spacing: 0; }
    
    .ssd-bc-dropdown-content { padding: 10px; border-radius: 12px; }
    .ssd-bc-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .ssd-dropdown-item { padding: 10px 4px; }
    .ssd-dropdown-item img { width: 50px; height: 50px; margin-bottom: 4px; }
    .ssd-dropdown-item .item-name { font-size: 0.5rem; }
    .item-lock { width: 14px; height: 14px; font-size: 0.5rem; top: 4px; right: 4px; }

    /* Feed Edge-to-Edge Fix */
    .tutor-content-wrapper { padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden; }
    #my-tab-home, #my-tab-about, #my-tab-classes { padding-left: 15px; padding-right: 15px; }
    #my-tab-posts, #my-tab-photos, #my-tab-videos, #my-tab-blogs, #my-tab-files { width: 100%; margin: 0; padding: 0; }
    .ssd-feed-wrapper { max-width: 100% !important; }
    .ssd-post-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; padding-left: 20px !important; padding-right: 20px !important; }
    
    .ssd-building-graph-canvas { height: 180px; }
    .ssd-bar-seg { max-width: 25px; }
}

/* ====================================================
   LIGHT MODE OVERRIDES FOR DEFAULT PROFILE
   ==================================================== */
body.light-mode .ssd-stats-overview-card { background: #ffffff; border: none; box-shadow: none; }
body.light-mode .ssd-stat-rank-col { border-right: 1px dashed #e2e8f0; }
body.light-mode .ssd-rank-info .lbl { color: #64748b; font-weight: 600; }
body.light-mode .ssd-rank-info .val { color: #0f172a; }
body.light-mode .ssd-mini-stat { background: #f8fafc; border: none; }
body.light-mode .ssd-mini-stat .lbl { color: #64748b; font-weight: 600; }
body.light-mode .ssd-mini-stat .val { color: #1e293b; }

body.light-mode .ssd-modern-chart-card { background: #ffffff; border: none; }
body.light-mode .section-title { color: #0f172a; font-weight: 700; }

body.light-mode .ssd-app-badges-widget { background: #ffffff; border: none; }

body.light-mode .ssd-centered-badge-title { color: #64748b; }
body.light-mode .ssd-top-badge-item { background: #f8fafc; border: none; box-shadow: none; }
body.light-mode .ssd-top-badge-item:hover { background: #f8fafc; box-shadow: inset 0 0 0 1px var(--ssd-primary); }
body.light-mode .ssd-top-badge-item.unlocked { background: #ffffff; box-shadow: inset 0 0 0 1px var(--ssd-primary); }
body.light-mode .ssd-top-badge-item .tb-name { color: #0f172a; }
body.light-mode .ssd-top-badge-item .locked-placeholder { background: #ffffff; color: #94a3b8; border: none; }

body.light-mode .ssd-bc-dropdown-content { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
body.light-mode .ssd-dropdown-item { background: #f8fafc; border: none; box-shadow: none; }
body.light-mode .ssd-dropdown-item .item-name { color: #64748b; }
body.light-mode .ssd-dropdown-item.earned { box-shadow: inset 0 0 0 1px var(--ssd-primary); }
body.light-mode .ssd-dropdown-item.earned .item-name { color: #0f172a; font-weight: 700; }
body.light-mode .ssd-dropdown-item.not-earned { background: #f1f5f9; }
body.light-mode .item-lock { background: #ffffff; color: #64748b; border: none; }

body.light-mode .ssd-building-graph-canvas { border-bottom-color: #e2e8f0; }
body.light-mode .ax-y-grid-line { border-bottom-color: rgba(0,0,0,0.05); }
body.light-mode .ssd-graph-date-label { color: #64748b; }
body.light-mode .ax-bar-time-lbl { color: #0f172a; }

.ssd-desktop-top-row { display: flex; gap: 20px; align-items: stretch; margin-bottom: 25px; }
.ssd-stats-overview-card { flex: 2; background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); margin-bottom: 0; z-index: 1;}
.ssd-stat-rank-col { flex: 0 0 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid #334155; padding-right: 20px; text-align: center; }
.ssd-rank-trophy { font-size: 2.8rem; color: #f59e0b; margin-bottom: 8px; filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.4)); }
.ssd-rank-info .lbl { font-size: 0.75rem; color: #94a3b8; display: block; text-transform: uppercase; letter-spacing: 1px; }
.ssd-rank-info .val { font-size: 1.6rem; font-weight: 800; color: #fff; display: block; line-height: 1.2; }
.ssd-rank-info .sub-lbl { font-size: 0.7rem; color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 2px 8px; border-radius: 10px; }
.ssd-stat-grid-col { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.ssd-mini-stat { background: #0f172a; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #334155; }
.ssd-mini-stat .lbl { font-size: 0.75rem; color: #64748b; margin-bottom: 3px; }
.ssd-mini-stat .val { font-size: 1rem; font-weight: 700; color: #fff; }
.text-orange { color: #f97316 !important; }
.ssd-modern-chart-card { background: #1e293b; border-radius: 16px; padding: 25px; margin-bottom: 25px; border: 1px solid #334155; }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }

/* 3 BADGES LAYOUT CSS */
.ssd-app-badges-widget { flex: 1; background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; z-index: 10; }
.ssd-badge-categories-container { display: flex; flex-direction: column; gap: 15px; }
.ssd-centered-badge-title { text-align: center; font-size: 0.85rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; margin-bottom: 15px; font-weight: 700; display: block; width: 100%; }

.ssd-top-badges-row { display: flex; gap: 10px; width: 100%; margin-bottom: 5px; }
.ssd-top-badge-item { flex: 1; min-width: 0; background: #0f172a; border-radius: 16px; border: 1px solid #334155; display: flex; flex-direction: column; align-items: center; padding: 15px 8px; cursor: pointer; transition: 0.3s; position: relative; justify-content: center;}
.ssd-top-badge-item:hover { background: #152033; transform: translateY(-2px); border-color: #3b82f6; }
.ssd-top-badge-item img { width: 55px; height: 55px; object-fit: contain; margin-bottom: 10px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.ssd-top-badge-item .locked-placeholder { width: 55px; height: 55px; border-radius: 50%; background: #1e293b; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #475569; margin-bottom: 10px; border: 1px solid #334155; }
.ssd-top-badge-item .tb-name { color: #f1f5f9; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1.1; word-wrap: break-word; width: 100%;}
.ssd-top-badge-item.unlocked { border-color: rgba(59, 130, 246, 0.4); box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.05); }
.ssd-top-badge-item.locked { opacity: 0.7; }
.ssd-top-badge-item.locked img { filter: grayscale(100%) opacity(0.5); }

/* FLOATING ABSOLUTE DROPDOWN (Scroll Fix included) */
.ssd-bc-dropdown-content { position: absolute; top: 100%; left: 0; width: 100%; z-index: 1050; margin-top: 10px; background: #152033; border: 1px solid #3b82f6; border-radius: 16px; padding: 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); animation: slideDown 0.3s ease; box-sizing: border-box; max-height: 250px; overflow-y: auto; }
.ssd-bc-dropdown-content::-webkit-scrollbar { width: 5px; }
.ssd-bc-dropdown-content::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 5px; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.ssd-bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
.ssd-dropdown-item { background: #0f172a; padding: 12px 8px; border-radius: 12px; text-align: center; border: 1px solid #334155; position: relative; transition: 0.2s; }
.ssd-dropdown-item img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.ssd-dropdown-item .item-name { display: block; font-size: 0.6rem; color: #94a3b8; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }
.ssd-dropdown-item.earned { border-color: rgba(59, 130, 246, 0.4); box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.08); }
.ssd-dropdown-item.earned .item-name { color: #f1f5f9; }
.ssd-dropdown-item.not-earned { opacity: 0.6; }
.ssd-dropdown-item.not-earned img { filter: grayscale(100%) opacity(0.6); }
.item-lock { position: absolute; top: 4px; right: 4px; background: #1e293b; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: #94a3b8; border: 1px solid #334155; }

/* --- BUILDING GRAPH STYLES --- */
.ssd-building-graph-canvas { height: 220px; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; margin-top: 15px; }
.ssd-graph-bar-wrap { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; margin: 0 4px; z-index: 2; }
.ssd-bar-seg { width: 100%; max-width: 35px; border-radius: 4px 4px 0 0; background: #f59e0b; transition: all 0.2s ease; cursor: pointer; }
.ssd-bar-seg:hover { filter: brightness(1.2); transform: translateY(-2px); }
.ssd-bar-seg-blue { background: #06b6d4; }
.ssd-bar-seg-green { background: #10b981; }
.ssd-graph-date-label { position: absolute; bottom: -22px; font-size: 0.65rem; color: #94a3b8; font-weight: 600; white-space: nowrap; }
.ax-y-grid-line { position: absolute; width: 100%; border-bottom: 1px dashed rgba(255,255,255,0.1); z-index: 1; left: 0; }
.ax-bar-time-lbl { position: absolute; font-size: 0.65rem; color: #fff; font-weight: 600; white-space: nowrap; z-index: 5; transform: translateY(-100%); margin-bottom: 5px; }

/* --- Mobile Responsive Fixes --- */
@media (max-width: 768px) {
    .ssd-desktop-top-row { flex-direction: column; gap: 15px; }
    .ssd-stats-overview-card { flex-direction: row !important; padding: 10px !important; min-height: auto; }
    .ssd-stat-rank-col { flex: 0 0 32% !important; border-right: 1px solid #334155 !important; padding-right: 8px !important; border-bottom: none !important; }
    .ssd-rank-trophy { font-size: 1.8rem !important; margin-bottom: 4px !important; }
    .ssd-rank-info .val { font-size: 1.2rem !important; }
    .ssd-rank-info .lbl { font-size: 0.6rem !important; }
    .ssd-rank-info .sub-lbl { font-size: 0.6rem !important; padding: 1px 6px !important; }
    .ssd-stat-grid-col { gap: 6px !important; }
    .ssd-mini-stat { padding: 6px 8px !important; min-height: 50px; }
    .ssd-mini-stat .val { font-size: 0.85rem !important; }
    .ssd-mini-stat .lbl { font-size: 0.6rem !important; }
    .ssd-modern-chart-card { padding: 15px !important; }
    
    .ssd-app-badges-widget { padding: 12px !important; }
    .ssd-top-badges-row { gap: 5px; }
    .ssd-top-badge-item { padding: 10px 4px; border-radius: 12px; }
    .ssd-top-badge-item img { width: 40px; height: 40px; margin-bottom: 6px; }
    .ssd-top-badge-item .locked-placeholder { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 6px; }
    .ssd-top-badge-item .tb-name { font-size: 0.55rem; letter-spacing: 0; }
    
    .ssd-bc-dropdown-content { padding: 10px; border-radius: 12px; }
    .ssd-bc-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .ssd-dropdown-item { padding: 10px 4px; }
    .ssd-dropdown-item img { width: 50px; height: 50px; margin-bottom: 4px; }
    .ssd-dropdown-item .item-name { font-size: 0.5rem; }
    .item-lock { width: 14px; height: 14px; font-size: 0.5rem; top: 4px; right: 4px; }

    /* Feed Edge-to-Edge Fix */
    .tutor-content-wrapper { padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden; }
    #pub-tab-home, #pub-tab-about, #pub-tab-classes { padding-left: 15px; padding-right: 15px; }
    #pub-tab-posts, #pub-tab-photos, #pub-tab-videos { width: 100%; margin: 0; padding: 0; }
    .ssd-feed-wrapper { max-width: 100% !important; }
    .ssd-post-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; padding-left: 20px !important; padding-right: 20px !important; }
    
    .ssd-building-graph-canvas { height: 180px; }
    .ssd-bar-seg { max-width: 25px; }
}

/* ====================================================
   LIGHT MODE OVERRIDES FOR DEFAULT PROFILE
   ==================================================== */
body.light-mode .ssd-stats-overview-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
body.light-mode .ssd-stat-rank-col { border-right-color: #e2e8f0; }
body.light-mode .ssd-rank-info .lbl { color: #64748b; font-weight: 600; }
body.light-mode .ssd-rank-info .val { color: #0f172a; }
body.light-mode .ssd-mini-stat { background: #f8fafc; border-color: #e2e8f0; }
body.light-mode .ssd-mini-stat .lbl { color: #64748b; font-weight: 600; }
body.light-mode .ssd-mini-stat .val { color: #1e293b; }

body.light-mode .ssd-modern-chart-card { background: #ffffff; border-color: #e2e8f0; }
body.light-mode .section-title { color: #0f172a; font-weight: 700; }

body.light-mode .ssd-app-badges-widget { background: #ffffff; border-color: #e2e8f0; }

body.light-mode .ssd-centered-badge-title { color: #64748b; }
body.light-mode .ssd-top-badge-item { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
body.light-mode .ssd-top-badge-item:hover { background: #f8fafc; border-color: #3b82f6; }
body.light-mode .ssd-top-badge-item.unlocked { background: linear-gradient(145deg, #ffffff, #f8fafc); border-color: rgba(59, 130, 246, 0.3); }
body.light-mode .ssd-top-badge-item .tb-name { color: #0f172a; }
body.light-mode .ssd-top-badge-item .locked-placeholder { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }

body.light-mode .ssd-bc-dropdown-content { background: #ffffff; border-color: #3b82f6; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
body.light-mode .ssd-dropdown-item { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 2px 6px rgba(0,0,0,0.02); }
body.light-mode .ssd-dropdown-item .item-name { color: #64748b; }
body.light-mode .ssd-dropdown-item.earned .item-name { color: #0f172a; font-weight: 700; }
body.light-mode .ssd-dropdown-item.not-earned { background: #f1f5f9; }
body.light-mode .item-lock { background: #ffffff; color: #64748b; border-color: #cbd5e1; }

body.light-mode .ssd-building-graph-canvas { border-bottom-color: #e2e8f0; }
body.light-mode .ax-y-grid-line { border-bottom-color: rgba(0,0,0,0.05); }
body.light-mode .ssd-graph-date-label { color: #64748b; }
body.light-mode .ax-bar-time-lbl { color: #0f172a; }

/* CSS OVERRIDES FOR CART DRAWER FLAT UI */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-bg: #151A28;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

.ssd-cart-step { background: var(--ssd-card) !important; border: none !important; box-shadow: none !important; }
.ssd-seller-card { background: var(--ssd-box-bg) !important; border: none !important; box-shadow: none !important; border-radius: 16px; padding: 15px; margin-bottom: 15px; }
.ssd-cart-item-modern { background: var(--ssd-card) !important; border: none !important; border-radius: 12px; }
.ssd-calculation-box { background: var(--ssd-card) !important; border: none !important; border-radius: 12px; }
.ssd-wallet-pay-box { background: var(--ssd-box-bg) !important; border: none !important; }
.ssd-input-group input, .ssd-input-group textarea { background: var(--ssd-box-bg) !important; border: none !important; color: var(--ssd-text) !important; }
.ssd-input-group label { color: var(--ssd-text-muted) !important; }
.ssd-cart-header-modern { background: var(--ssd-card) !important; border-bottom: none !important; }
.ssd-drawer-footer-sticky { background: var(--ssd-card) !important; border-top: none !important; }
.truck-button { box-shadow: none !important; background: var(--ssd-primary) !important; border: none !important; }
.ssd-checkout-btn-modern { box-shadow: none !important; background: var(--ssd-primary) !important; border: none !important; }

/* LIGHT MODE OVERRIDES FOR CART */
body.light-mode .ssd-cart-step { background: var(--ssd-card) !important; }
body.light-mode .ssd-seller-card { background: var(--ssd-box-bg) !important; }
body.light-mode .ssd-cart-item-modern { background: var(--ssd-card) !important; }
body.light-mode .ssd-calculation-box { background: var(--ssd-card) !important; color: var(--ssd-text) !important;}
body.light-mode .ssd-wallet-pay-box { background: var(--ssd-box-bg) !important; }
body.light-mode .ssd-input-group input, body.light-mode .ssd-input-group textarea { background: var(--ssd-box-bg) !important; color: var(--ssd-text) !important; }
body.light-mode .ssd-input-group label { color: var(--ssd-text-muted) !important; }
body.light-mode .ssd-cart-header-modern { background: var(--ssd-card) !important; }
body.light-mode .ssd-drawer-footer-sticky { background: var(--ssd-card) !important; }
body.light-mode .ssd-checkout-seller-name { color: var(--ssd-text) !important; }

/* ====================================================
   MOBILE LAYOUT FIX (Padding, Header Overlap & Banners)
   ==================================================== */
@media (max-width: 768px) {
    
    /* 1. සියලුම ටැබ් වල Content එක Header එකට යට වීම නැවැත්වීම සහ දෙපසින් 15px gap එකක් තැබීම */
    .ssd-main-content, 
    #ssd-main-view-container, 
    .sr-main-container,
    .ssd-single-view-container { 
        padding: 40px 5px 10px 5px !important; 
    }

    /* 2. Banners/Cover Photos පමණක් තිරයේ කෙළවරටම (Edge-to-edge) සහ ඉහළින්ම දිස්වීමට සැකසීම */
    .ssd-hero-join-section, 
    .ssd-hero-banner, 
    .ssd-class-hero,
    .ssd-live-cover-area-scaled,
    .tutor-cover-photo {
        margin-top: -40px !important; /* Content එකට දුන් ඉහළ 85px ඉඩ Banner එකට අදාළ නොකිරීම */
    }
}

/* =========================================================
   1. RESET & BASE THEME (Flat Modern Dark) + OVERFLOW FIXES
   ========================================================= */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-bg: #151A28;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

#masthead, .site-header, header, footer, .site-footer, #wpadminbar { display: none !important; }
html { margin-top: 0 !important; overflow: hidden !important; width: 100vw !important; max-width: 100% !important; box-sizing: border-box !important; }

body { 
    margin: 0; padding: 0; 
    background-color: var(--ssd-bg); 
    height: 100vh; width: 100vw !important; max-width: 100% !important; 
    font-family: 'Inter', sans-serif; 
    color: var(--ssd-text); 
    overflow: hidden !important; 
    display: flex;
    box-sizing: border-box !important;
}

* { scrollbar-width: thin; scrollbar-color: var(--ssd-border) transparent; box-sizing: border-box; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
::-webkit-scrollbar-thumb { background-color: var(--ssd-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--ssd-primary); cursor: pointer; }

/* HIDE WOOCOMMERCE SIDE CART ("Loading Cart" ඉවත් කිරීම) */
.xoo-wsc-modal, .xoo-wsc-slider, .xt_woofc, .wac-sidebar, .cart-popup, .widget_shopping_cart, div[id*="cart-sidebar"], div[class*="cart-sidebar"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -9999 !important;
}

/* =========================================================
   2. MAIN STAGE & BACKGROUND (DYNAMIC)
   ========================================================= */
.ssd-main-stage {
    flex: 1; position: relative; display: flex; flex-direction: column;
    background-color: var(--ssd-bg); 
    width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important;
}

.ssd-room-grid-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: transparent; 
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 30px 30px; 
    z-index: 0; pointer-events: none;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 80%);
}

/* =========================================================
   3. TOP BAR & UNIFIED NAVIGATION
   ========================================================= */
.ssd-icon-sidebar { display: none !important; } 

.ssd-top-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 80px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 30px; z-index: 50; pointer-events: none;
}
.ssd-top-left, .ssd-top-right { pointer-events: auto; display: flex; align-items: center; gap: 12px; }

.ssd-mobile-nav-wrapper { display: block !important; position: relative; z-index: 200; }

.ssd-mobile-dash-toggle, .ssd-room-pill, .ssd-hall-switcher, .ssd-joined-badge {
    background: var(--ssd-box-bg) !important; 
    border: none !important;
    height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ssd-text); 
    box-shadow: none !important; 
    transition: 0.3s;
}

.ssd-mobile-dash-toggle { width: 42px; cursor: pointer; color: var(--ssd-primary); font-size: 1.1rem; }
.ssd-mobile-dash-toggle:hover, .ssd-room-pill:hover { background: var(--ssd-card) !important; }

.ssd-room-pill { padding: 0 16px; gap: 8px; font-family: monospace; font-size: 0.95rem; cursor: pointer; }
.ssd-room-pill i { color: #fbbf24; }
.ssd-status-badge { background: var(--ssd-primary); color: white; padding: 2px 8px; border-radius: 8px; font-size: 0.7rem; font-weight: 800; }

.ssd-joined-badge { padding: 0 16px; gap: 8px; font-weight: 600; color: var(--ssd-primary); }
.ssd-joined-badge span { color: var(--ssd-text); }

.ssd-hall-switcher { padding: 0 8px; gap: 12px; }
.ssd-hall-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--ssd-text-muted); cursor: pointer; transition: 0.2s; display: flex !important; align-items: center; justify-content: center; box-shadow: none !important;}
.ssd-hall-btn:hover { background: var(--ssd-card); color: var(--ssd-text); }
.ssd-hall-info { font-size: 0.85rem; font-weight: 600; color: var(--ssd-text); display: flex; align-items: center; justify-content: center; }

.ssd-mobile-dash-dropdown {
    position: absolute; top: 55px; left: 0;
    background: var(--ssd-card); border: none; border-radius: 12px; padding: 12px; width: 220px;
    display: none; grid-template-columns: repeat(3, 1fr); gap: 8px;
    box-shadow: none; transform-origin: top left; animation: scaleIn 0.2s ease;
}
.ssd-mobile-dash-dropdown.active { display: grid; }
.ssd-mob-icon { width: 100%; aspect-ratio: 1; border-radius: 8px; background: var(--ssd-box-bg); border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; transition: 0.2s; box-shadow: none;}
.ssd-mob-icon:hover { background: var(--ssd-border); }
@keyframes scaleIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* =========================================================
   4. VERTICAL LEFT DOCK (Desktop)
   ========================================================= */
.ssd-bottom-dock {
    position: fixed !important; 
    top: 50% !important;
    left: 25px !important; 
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    flex-direction: column !important; 
    
    background: var(--ssd-card) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border: none !important; 
    box-shadow: none !important; 
    
    padding: 15px 10px !important; border-radius: 24px !important;
    display: flex; gap: 15px !important; z-index: 50; 
    width: 75px !important; pointer-events: auto;
}

.ssd-dock-btn {
    background: transparent !important; border: none; color: var(--ssd-text-muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    cursor: pointer; width: 100% !important; height: 55px !important; border-radius: 16px !important; transition: 0.2s; box-shadow: none !important;
}
.ssd-dock-btn:hover { background: var(--ssd-box-bg) !important; color: var(--ssd-text); transform: translateY(-3px); }
.ssd-dock-btn i { font-size: 1.2rem; }
.ssd-dock-btn span { font-size: 0.65rem !important; font-weight: 500; display: block !important; margin-top: 4px; }

.ssd-dock-btn.active-cam { background: var(--ssd-primary) !important; color: white !important; box-shadow: none !important; }
.ssd-dock-btn.danger i { color: #ef4444 !important; }
.ssd-dock-btn.danger:hover { background: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; }

/* =========================================================
   5. GRID SYSTEM (Centered, Uniform, Custom Bottom Footer)
   ========================================================= */
.ssd-grid-container {
    flex: 1; overflow-y: auto; 
    padding: 80px 40px 40px 120px; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    scroll-behavior: smooth;
    width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important;
}

.ssd-participants-grid { 
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr) !important; 
    grid-auto-rows: minmax(160px, 1fr) !important; 
    gap: 15px !important; 
    width: 100% !important; 
    max-width: 1400px !important; 
    box-sizing: border-box !important;
    z-index: 10; 
    margin: auto; 
}

.ssd-user-card, .size-square-small, .size-rect-h, .size-rect-v, .size-square-large {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--ssd-card) !important;
    border: none !important;
    border-radius: 28px !important; 
    position: relative; 
    overflow: hidden;
    transition: transform 0.3s, border-color 0.3s;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
}

.ssd-user-card:nth-child(n+13) {
    display: none !important;
}

.ssd-user-card:hover { 
    transform: translateY(-4px) scale(1.02); 
    box-shadow: inset 0 0 0 1px var(--ssd-primary) !important; 
    z-index: 10; 
}

.ssd-user-card.pinned { box-shadow: inset 0 0 0 2px #fbbf24 !important; }
.ssd-user-card.focusing { box-shadow: inset 0 0 0 2px #10b981 !important; }

.ssd-card-inner-content { 
    flex: 1; display: flex; align-items: center; justify-content: center; 
    padding-bottom: 25px; background: var(--ssd-bg);
}
.ssd-card-avatar { 
    border-radius: 50%; object-fit: cover; border: none; transition: 0.3s;
    width: 80px !important; height: 80px !important;
}

.ssd-user-card video.ssd-user-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; z-index: 0; transform: scaleX(-1); background: var(--ssd-bg); }
.ssd-user-card.video-active .ssd-card-inner-content { display: none !important; }
.ssd-user-card.video-active .ssd-overlay-bottom, .ssd-user-card.video-active .ssd-card-controls, .ssd-user-card.video-active .ssd-overlay-time { z-index: 10; }

.ssd-overlay-time { position: absolute; top: 12px; left: 12px; background: var(--ssd-box-bg); padding: 4px 8px; border-radius: 10px; font-size: 0.75rem; color: var(--ssd-text); z-index: 10; backdrop-filter: none; border: none;}
.ssd-card-controls { position: absolute; top: 15px; right: 15px; display: flex; gap: 5px; opacity: 0; transition: 0.2s; background: var(--ssd-box-bg); padding: 4px; border-radius: 10px; backdrop-filter: none; z-index: 20; border: none;}
.ssd-user-card:hover .ssd-card-controls, .ssd-user-card.pinned .ssd-card-controls { opacity: 1; }
.ssd-ctrl-btn { background: transparent; border: none; color: var(--ssd-text); cursor: pointer; padding: 0; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: 0.2s; box-shadow: none;}
.ssd-ctrl-btn:hover { background: var(--ssd-border); }

.ssd-overlay-bottom { 
    position: absolute; bottom: 0; left: 0; right: 0; 
    padding: 15px 20px !important; 
    background: transparent !important; 
    background-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%) !important; 
    display: flex !important; 
    flex-direction: row !important; 
    justify-content: space-between !important; 
    align-items: flex-end !important; 
    border-radius: 0 0 28px 28px !important; 
    z-index: 10;
    border: none;
}

.ssd-name-row { 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    gap: 6px !important; 
    max-width: 60%; 
    justify-content: flex-start;
}

.ssd-name-tag { 
    font-weight: 600; font-size: 0.95rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white !important; 
}

.ssd-verified-tick { 
    background: var(--ssd-primary) !important;
    color: white !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    display: inline-block !important;
    text-shadow: none !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
}
.ssd-verified-tick::before { display: none !important; } 
.ssd-verified-tick::after { content: "SMART STUDENT" !important; }

.ssd-stats-container { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: flex-end !important; 
    gap: 8px !important; 
    width: auto !important; 
    flex-wrap: nowrap !important;
}
.ssd-encourage-badge { 
    background: rgba(0,0,0,0.4) !important; 
    color: white !important; 
    border: 1px solid rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(5px);
    display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; cursor: pointer; transition: 0.2s;
}
.ssd-encourage-badge:hover, .ssd-encourage-badge.active { background: rgba(239, 68, 68, 0.4) !important; color: white !important; border-color: rgba(239, 68, 68, 0.5) !important;}
.ssd-rank-badge { 
    background: #f59e0b; color: #000; font-weight: 800; font-size: 0.7rem; padding: 2px 8px; border-radius: 6px; display: flex; align-items: center; gap: 5px; border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important; 
}

.ssd-more-dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 5px; 
    background: var(--ssd-card) !important; 
    border: 1px solid var(--ssd-border) !important;
    border-radius: 14px !important; 
    width: 170px; display: none; flex-direction: column; 
    z-index: 50; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important; 
    padding: 8px !important;
    backdrop-filter: blur(10px) !important;
}
.ssd-more-dropdown.active { display: flex; }
.ssd-drop-item { 
    padding: 10px 12px; font-size: 0.8rem; font-weight: 500; cursor: pointer; color: var(--ssd-text); 
    display:flex; gap:10px; align-items:center; border-radius: 8px; border: none; transition: 0.2s;
}
.ssd-drop-item:hover { background: var(--ssd-box-bg) !important; color: white !important; }
.ssd-drop-item i { width: 16px; text-align: center; opacity: 0.8; }

/* =========================================================
   6. CHAT & TOOLS (Flat Modern UI)
   ========================================================= */
.ssd-tools-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--ssd-bg); z-index: 20000; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ssd-tools-overlay.active { transform: translateY(0); }
.ssd-tools-header { padding: 20px 30px; border-bottom: none; display: flex; justify-content: space-between; align-items: center; background: var(--ssd-card); }
.ssd-tools-close-btn { background: var(--ssd-box-bg); color: var(--ssd-text-muted); border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; font-size: 1.1rem; box-shadow: none;}
.ssd-tools-close-btn:hover { background: #ef4444; color: white; transform: scale(1.1); }

.ssd-tools-tabs { display: flex; justify-content: center; gap: 20px; position: relative; }
.ssd-tool-tab { background: transparent; border: none; color: var(--ssd-text-muted); font-size: 1rem; font-weight: 600; cursor: pointer; padding: 10px 15px; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 8px; box-shadow: none;}
.ssd-tool-tab.active { color: var(--ssd-primary); border-bottom-color: var(--ssd-primary); }
.ssd-tool-tab i { font-size: 0.8rem; transition: transform 0.2s; opacity: 0.8; }
.ssd-tool-tab.open i { transform: rotate(180deg); }

.ssd-header-dropdown { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--ssd-card); border: none; border-radius: 12px; box-shadow: none; z-index: 100; min-width: 180px; overflow: hidden; margin-top: 10px; padding: 5px; }
.ssd-header-dropdown.show { display: block; animation: fadeIn 0.2s; }
.ssd-header-dropdown div { padding: 12px 15px; color: var(--ssd-text); font-size: 0.95rem; cursor: pointer; white-space: nowrap; transition: 0.2s; border-radius: 8px; font-weight: 500; display:flex; align-items:center; gap:10px; border: none;}
.ssd-header-dropdown div:hover { background: var(--ssd-box-bg); }
.ssd-header-dropdown div.active { color: var(--ssd-primary); background: var(--ssd-box-bg); }

.ssd-tools-content { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.ssd-tool-pane { display: none; height: 100%; flex-direction: column; padding-bottom: 0 !important; }
.ssd-tool-pane.active { display: flex; }
.ssd-tool-pane:not(.active) .ssd-chat-sub-tabs { display: none !important; }

.ssd-subtab-btn { flex: 1; background: transparent; border: none; color: var(--ssd-text-muted); padding: 8px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: 0.2s; border-bottom: 2px solid transparent; box-shadow: none;}
.ssd-subtab-btn:hover { background: var(--ssd-box-bg); color: var(--ssd-text); }
.ssd-subtab-btn.active { color: var(--ssd-primary); border-bottom-color: var(--ssd-primary); background: var(--ssd-box-bg); }
.ssd-search-item { padding: 8px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; gap: 8px; border: none;}
.ssd-search-item:hover { background: var(--ssd-box-bg); }
.ssd-search-avatar { width: 20px; height: 20px; border-radius: 50%; border: none;}
#ssd-chat-search-wrapper { display: none !important; }

.ssd-tab-wrapper { position: relative; display: flex; align-items: center; }
.ssd-chat-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--ssd-card); border: none; border-radius: 8px; min-width: 150px; z-index: 100; box-shadow: none; overflow: hidden; margin-top: 5px; }
.ssd-chat-dropdown-menu.active { display: block; animation: fadeIn 0.2s; }
.ssd-chat-drop-item { padding: 10px 15px; font-size: 0.9rem; color: var(--ssd-text); cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px; border: none;}
.ssd-chat-drop-item:hover { background: var(--ssd-box-bg); }
.ssd-tab-arrow { margin-left: 8px; font-size: 0.8rem; opacity: 0.7; cursor: pointer; padding: 5px; transition:0.2s; border: none; background: transparent; color: var(--ssd-text-muted);}
.ssd-tab-arrow:hover { opacity: 1; color: var(--ssd-primary); }

.input-area { position: fixed !important; bottom: 30px !important; left: 50% !important; transform: translateX(-50%) !important; width: 100%; max-width: 700px; z-index: 9999; padding: 0 15px; box-sizing: border-box; }
.input-glass-box { background: var(--ssd-box-bg) !important; backdrop-filter: none; border: none !important; border-radius: 50px; padding: 8px 20px !important; display: flex; align-items: center; gap: 8px; box-shadow: none !important; }
.chat-input { flex: 1; background: transparent !important; border: none; color: var(--ssd-text) !important; padding: 10px 5px; font-size: 0.95rem; outline: none; resize: none; max-height: 100px; overflow-y: auto; box-shadow: none;}
.action-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: var(--ssd-text-muted); cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: none;}
.action-btn:hover { background: var(--ssd-card); color: var(--ssd-text); }
.btn-send { background: var(--ssd-primary); color: white; width: 40px; height: 40px; }
.ready-to-send { background: #10b981 !important; transform: scale(1.1); }
.recording-pulse { animation: pulseRed 1.5s infinite; color: #ef4444 !important; }
@keyframes pulseRed { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

#ssd-chat-messages { background-color: var(--ssd-bg); font-family: 'Inter', sans-serif; border: none;}
.ssd-chat-feed-container { flex: 1; overflow-y: auto; padding: 20px 5% 120px 5%; display: flex; flex-direction: column; gap: 10px; overflow-x: hidden; padding-bottom: 120px !important; background: var(--ssd-bg);}
.ssd-msg-row { display: flex; align-items: flex-end; gap: 10px; max-width: 85%; position: relative; margin-bottom: 5px; touch-action: pan-y; transition: transform 0.2s ease; border: none;}
.ssd-msg-row.me { align-self: flex-end; flex-direction: row-reverse; }
.ssd-msg-row.other { align-self: flex-start; }
.ssd-bubble { padding: 12px 16px; border-radius: 18px; font-size: 0.95rem; line-height: 1.5; box-shadow: none; position: relative; min-width: 60px; max-width: 100%; width: fit-content; word-wrap: break-word; white-space: pre-wrap; border: none;}
.ssd-msg-row.me .ssd-bubble { background: var(--ssd-primary); color: white; border-bottom-right-radius: 2px; }
.ssd-msg-row.other .ssd-bubble { background: var(--ssd-card); color: var(--ssd-text); border-bottom-left-radius: 2px; border: none; }
.ssd-sender-name { font-size: 0.75rem; color: var(--ssd-primary); font-weight: 700; margin-bottom: 4px; display: block; }
.ssd-msg-time { font-size: 0.65rem; color: var(--ssd-text-muted); float: right; margin-left: 8px; margin-top: 5px; }

.ai-typing .bubble { background: var(--ssd-box-bg) !important; color: var(--ssd-text-muted) !important; font-style: italic; font-size: 12px; border: none;}
#ssd-chat-header-status span { color: var(--ssd-primary) !important; font-weight: 600; }

.msg-options-trigger { opacity: 0; transition: 0.2s; background: none; border: none; color: var(--ssd-text-muted); cursor: pointer; padding: 5px; position: absolute; top: 5px; z-index: 10; font-size: 1.1rem; box-shadow: none;}
.ssd-msg-row:hover .msg-options-trigger { opacity: 1; }
.ssd-msg-row.me .msg-options-trigger { left: -30px; }
.ssd-msg-row.other .msg-options-trigger { right: -30px; }

.msg-dropdown-menu { display: none; position: absolute; top: 25px; background: var(--ssd-card); border: none; border-radius: 8px; z-index: 100; min-width: 120px; box-shadow: none; overflow: hidden; }
.ssd-msg-row.me .msg-dropdown-menu { right: 0; }
.ssd-msg-row.other .msg-dropdown-menu { left: 0; }
.msg-dropdown-menu.show { display: block; animation: fadeIn 0.2s; }
.msg-dropdown-menu div { padding: 10px 12px; font-size: 0.85rem; color: var(--ssd-text); cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px; border: none;}
.msg-dropdown-menu div:hover { background: var(--ssd-box-bg); }
.msg-dropdown-menu div.delete-opt { color: #ef4444; }
.msg-dropdown-menu div.edit-opt { color: #facc15; }

.custom-audio-player { display: flex; align-items: center; gap: 10px; background: var(--ssd-box-bg); padding: 8px; border-radius: 12px; min-width: 200px; margin-top: 5px; border: none;}
.audio-btn { width: 35px; height: 35px; border-radius: 50%; background: var(--ssd-primary); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; box-shadow: none;}
.audio-wave { flex: 1; height: 30px; display: flex; align-items: center; gap: 2px; }
.wave-bar { width: 3px; background: var(--ssd-border); border-radius: 2px; animation: waveAnim 1s infinite paused; height: 40%; border: none;}
.wave-bar.playing { animation-play-state: running; background: var(--ssd-primary); }

.chat-img-thumb { max-width: 100%; width: 250px; border-radius: 8px; margin-top: 5px; cursor: pointer; border: none; }
.ssd-lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--ssd-bg); z-index: 30000; align-items: center; justify-content: center; animation: fadeIn 0.2s; }
.ssd-lightbox img { max-width: 95%; max-height: 95%; border-radius: 8px; box-shadow: none; border: none;}
.lightbox-close { position: absolute; top: 20px; right: 20px; color: var(--ssd-text-muted); font-size: 2rem; cursor: pointer; background: none; border: none; box-shadow: none;}
.lightbox-close:hover { color: #ef4444; }
#ssd-confirm-img-send:hover { transform: scale(1.05); background: var(--ssd-primary) !important; }

.reply-context-box { background: var(--ssd-box-bg); border-left: 3px solid var(--ssd-border); padding: 5px 8px; font-size: 0.75rem; margin-bottom: 6px; border-radius: 4px; color: var(--ssd-text-muted); cursor: pointer; border-top: none; border-right: none; border-bottom: none;}
.reply-preview-bar { display: none; background: var(--ssd-card); border-left: 3px solid var(--ssd-primary); padding: 10px 15px; position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 700px; border-radius: 12px; z-index: 29; backdrop-filter: none; justify-content: space-between; align-items: center; box-shadow: none; border-top: none; border-right: none; border-bottom: none;}
.reply-preview-bar.active { display: flex; }
.reply-info { font-size: 0.85rem; color: var(--ssd-text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reply-info strong { color: var(--ssd-primary); display: block; font-size: 0.75rem; margin-bottom: 2px; }

.typing-indicator-small { position: absolute; bottom: 90px; left: 20px; font-size: 0.8rem; color: var(--ssd-text-muted); font-style: italic; opacity: 0; transition: 0.3s; z-index: 25; }
.typing-indicator-small.active { opacity: 1; bottom: 100px; }

.ssd-rules-box { background: var(--ssd-box-bg); border: none; padding: 15px; border-radius: 12px; color: var(--ssd-text); font-size: 0.9rem; margin: 10px 0; display: block; width: 100%; box-shadow: none;}
.ssd-rules-box ul { padding-left: 20px; margin: 10px 0 0 0; list-style-type: disc; }
.ssd-rules-box li { margin-bottom: 8px; display: list-item; }

.ssd-chat-header { display: none; align-items: center; gap: 10px; padding: 15px 20px; background: var(--ssd-card); border-bottom: none; position: absolute; top: 0; left: 0; width: 100%; z-index: 40; box-shadow: none;}
.ssd-chat-header.active { display: flex; }
.ssd-chat-back-btn { background: transparent; border: none; color: var(--ssd-text-muted); font-size: 1.1rem; cursor: pointer; padding: 5px; box-shadow: none;}
.ssd-chat-back-btn:hover { color: var(--ssd-primary); }
.ssd-chat-title { font-size: 0.95rem; font-weight: 600; color: var(--ssd-text); }

.ssd-spotify-container { padding: 30px; text-align: center; display: flex; flex-direction: column; gap: 20px; height: 100%; max-width: 600px; margin: 0 auto; width: 100%; }
.ssd-spotify-container h3 { margin: 0; color: var(--ssd-text) !important; font-size: 1.5rem; display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-spotify-connect { background: #1DB954; color: white; border: none; padding: 12px 20px; border-radius: 30px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.2s; width: 100%; font-size: 1rem; box-shadow: none;}
.btn-spotify-connect:hover { background: #1ed760; transform: scale(1.02); }
.spotify-embed-box { flex: 1; border-radius: 12px; overflow: hidden; background: var(--ssd-bg); min-height: 400px; border: none; }
.spotify-status-pill { font-size: 0.9rem; color: #1DB954; margin-top: 5px; font-weight: 600; }

.ssd-full-profile-card { text-align: center; padding: 20px; background: var(--ssd-card); border: none; border-radius: 20px;}
.ssd-full-avatar { width: 100px; height: 100px; border-radius: 50%; border: none; margin-bottom: 15px; object-fit: cover; box-shadow: none; background: var(--ssd-box-bg);}
.ssd-profile-action-btn { background: var(--ssd-box-bg); color: var(--ssd-text); border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: 0.2s; box-shadow: none;}
.ssd-profile-action-btn:hover { background: var(--ssd-primary); color: white; }

.ssd-preview-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--ssd-bg); z-index: 20000; justify-content: center; align-items: center; backdrop-filter: none;}
.ssd-preview-modal { background: var(--ssd-card); width: 90%; max-width: 600px; border-radius: 16px; overflow: hidden; box-shadow: none; border: none; display: flex; flex-direction: column; }
.ssd-preview-header { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; background: var(--ssd-box-bg); border-bottom: none; }
.ssd-preview-title { color: var(--ssd-text); font-weight: 600; font-size: 1rem; }
.ssd-preview-close { background: none; border: none; color: var(--ssd-text-muted); cursor: pointer; font-size: 1.2rem; box-shadow: none;}
.ssd-preview-close:hover { color: #ef4444; }
.ssd-preview-body { padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 20px; background: var(--ssd-card); border: none;}
.ssd-video-preview-box { width: 100%; aspect-ratio: 16/9; background: var(--ssd-bg); border-radius: 12px; overflow: hidden; position: relative; border: none;}
.ssd-video-preview-box video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); border: none;}
.ssd-preview-tag { position: absolute; bottom: 10px; left: 10px; background: var(--ssd-box-bg); color: var(--ssd-text); padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; border: none;}
.ssd-preview-footer { padding: 15px 20px; background: var(--ssd-box-bg); display: flex; justify-content: flex-end; gap: 10px; border-top: none; }
.btn-preview-cancel { background: transparent; color: var(--ssd-text-muted); border: none; padding: 10px 20px; cursor: pointer; font-weight: 600; box-shadow: none;}
.btn-preview-cancel:hover { color: var(--ssd-text); }
.btn-preview-start { background: var(--ssd-primary); color: white; border: none; padding: 10px 25px; border-radius: 30px; font-weight: 700; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px; box-shadow: none; display: inline-flex;}
.btn-preview-start:hover { background: #2563eb; transform: scale(1.05); }

/* 🌟 Z-INDEX FIX FOR POPUPS VS MOBILE DOCK 🌟 */
.ssd-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--ssd-bg); z-index: 25000; display: none; justify-content: center; align-items: center; backdrop-filter: none;}
.ssd-popup-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; max-width: 100%; border-radius: 0; border: none; background: var(--ssd-card); display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 25001; box-shadow: none;}

.ssd-popup-overlay.active .ssd-popup-modal { transform: translateY(0); }
.ssd-popup-header { padding: 20px 30px; border-bottom: none; display: flex; justify-content: space-between; align-items: center; background: var(--ssd-card); }
.ssd-popup-title { font-size: 1.5rem; margin: 0; font-weight: 700; color: var(--ssd-text); }
.ssd-popup-close-btn { background: var(--ssd-box-bg); color: var(--ssd-text-muted); border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; font-size: 1.1rem; box-shadow: none;}
.ssd-popup-close-btn:hover { background: #ef4444; color: white; transform: scale(1.1); }
.ssd-popup-body { flex: 1; overflow-y: auto; padding: 30px; background: var(--ssd-card); border: none;}

/* =========================================================
   7. MOBILE RESPONSIVE (Unified Layout & 2 Column Grid)
   ========================================================= */
@media (max-width: 768px) {
    .ssd-top-bar { 
        padding: 0 10px !important; 
        height: 60px; justify-content: space-between; align-items: center; display: flex;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        max-width: 100vw !important;
    }
    .ssd-top-left, .ssd-top-right { gap: 5px; align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap !important; }

    #ssd-noti-btn { width: 32px !important; height: 32px !important; border-radius: 8px !important; }
    #ssd-noti-panel { width: 280px; right: -10px; background: var(--ssd-card); border: none; box-shadow: none;}
    #ssd-toast-container { top: 10px !important; right: 10px !important; left: 10px !important; align-items: center; }

    .ssd-mobile-dash-toggle, .ssd-room-pill, .ssd-hall-switcher, .ssd-joined-badge {
        height: 32px !important; background: var(--ssd-box-bg) !important;
        border: none !important; border-radius: 8px !important;
        display: flex; align-items: center; justify-content: center; box-shadow: none !important; color: var(--ssd-text);
    }

    .ssd-mobile-dash-toggle { width: 32px; font-size: 1rem; color: var(--ssd-primary); }
    .ssd-room-pill { padding: 0 8px; font-size: 0.8rem; font-family: monospace; gap: 4px; }
    .ssd-status-badge, .ssd-room-pill span[style*="opacity:0.3"] { display: none; }

    .ssd-hall-switcher { position: static !important; transform: none !important; margin: 0 !important; padding: 0 2px !important; width: auto !important; min-width: 0 !important; order: 1; }
    .ssd-hall-btn { background: transparent !important; border: none !important; width: 20px !important; height: 100% !important; padding: 0 !important; color: var(--ssd-text-muted); box-shadow: none !important;}
    .ssd-hall-btn i { font-size: 0.7rem; }
    .ssd-hall-info { font-size: 0.75rem; font-weight: 700; color: var(--ssd-text); padding: 0 2px; min-width: auto; }

    .ssd-joined-badge { order: 2; padding: 0 8px; gap: 5px; color: var(--ssd-primary);}
    .ssd-joined-badge i { font-size: 0.8rem; color: var(--ssd-primary); }
    .ssd-joined-badge span:not(#ssd-joined-count) { display: none !important; }
    #ssd-joined-count { font-size: 0.9rem; color: var(--ssd-text); }

    .ssd-grid-container { padding: 80px 10px 100px 10px !important; overflow-x: hidden !important; max-width: 100vw !important;} 
    
    /* Mobile එක සඳහා හරියටම තිරස් අතට කොටු 2ක් පෙන්වීම */
    .ssd-participants-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        grid-auto-rows: minmax(130px, 1fr) !important; 
        gap: 10px !important; 
    }
    .ssd-user-card { border-radius: 20px !important; } 
    
    .ssd-user-card .ssd-card-avatar {
        width: 50px !important;
        height: 50px !important;
    }

    .ssd-overlay-bottom { padding: 10px !important; }
    .ssd-name-row { gap: 4px !important; }
    .ssd-name-tag { font-size: 0.75rem !important; }
    .ssd-verified-tick { font-size: 0.5rem !important; padding: 2px 4px !important; }
    .ssd-stats-container { gap: 4px !important; }
    .ssd-encourage-badge { font-size: 0.65rem !important; padding: 2px 6px !important; }
    .ssd-rank-badge { font-size: 0.6rem !important; padding: 2px 6px !important; }
    .ssd-overlay-time { font-size: 0.65rem; padding: 3px 8px; top: 8px; left: 8px; }

    /* Custom Banner mobile adjustments */
    .ssd-custom-room-header-banner {
        margin: 75px 10px 0 10px !important;
        height: 100px !important;
        border-radius: 14px !important;
        border: none !important;
        box-shadow: none !important;
    }
    .ssd-custom-room-header-banner h1 { font-size: 1.1rem !important; }
    .ssd-custom-room-header-banner p { font-size: 0.75rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; text-shadow: none !important;}
    .ssd-grid-container { padding-top: 15px !important; }

    /* Perfect Floating Mobile Dock */
    .ssd-bottom-dock {
        position: fixed !important;
        width: max-content !important; 
        min-width: 220px !important; 
        top: unset !important;
        bottom: 30px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        flex-direction: row !important;
        padding: 8px 15px !important; 
        justify-content: center !important; 
        gap: 10px !important; 
        border-radius: 50px !important; 
        background: var(--ssd-card) !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 15000 !important; 
        backdrop-filter: none !important;
    }
    .ssd-dock-btn { 
        width: 38px !important; 
        height: 38px !important; 
        border-radius: 50% !important; 
        background: var(--ssd-box-bg) !important;
        flex: none !important;
        box-shadow: none !important;
        border: none !important;
    }
    .ssd-dock-btn i { font-size: 1rem; margin: 0; } 
    .ssd-dock-btn span { display: none !important; }
    
    .input-area { bottom: 15px !important; width: 92% !important; max-width: 100% !important; padding: 0 !important; }
    .input-glass-box { border-radius: 30px !important; padding: 8px 12px !important; background: var(--ssd-box-bg) !important; box-shadow: none !important; border: none !important; backdrop-filter: none !important;}
    .ssd-chat-feed-container { padding-bottom: 100px !important; }
    .ssd-chat-sub-tabs { position: sticky; top: 0; z-index: 50; background: var(--ssd-card) !important; }
    .reply-preview-bar { bottom: 80px; width: 95%; background: var(--ssd-card); border: none; box-shadow: none;}
    .typing-indicator-small { bottom: 85px; left: 15px; }

    .ssd-popup-header, .ssd-tools-header { padding: 15px 20px; background: var(--ssd-card); border: none;}
    .ssd-popup-title { font-size: 1.2rem; }
    .ssd-popup-body { padding: 20px; background: var(--ssd-card); border: none;}
    .ssd-todo-sidebar { width: 100%; }
}

@media (max-width: 768px) {
    #ssd-sidebar-music-content { 
        padding: 15px 15px 120px 15px !important; 
        overflow-x: hidden !important; 
        overflow-y: auto !important; 
        width: 100% !important; 
        height: 100% !important;
        box-sizing: border-box !important;
        position: absolute !important; 
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: var(--ssd-card); 
    }
    body.light-mode #ssd-sidebar-music-content {
        background-color: var(--ssd-card) !important; 
    }

    .ssd-music-modern-wrapper h3 { font-size: 1.3rem !important; margin-bottom: 5px !important; }
    .ssd-music-modern-wrapper p { font-size: 0.8rem !important; margin-bottom: 15px !important; }
    .youtube-embed-box { height: 210px !important; border-radius: 12px !important; border: none !important;}
    .ssd-music-glass-panel { padding: 15px !important; border-radius: 16px !important; margin-bottom: 15px !important; background: var(--ssd-card) !important; border: none !important;}
    .ssd-music-glass-panel h4 { font-size: 0.95rem !important; margin-bottom: 12px !important; }
    .ssd-music-input { padding: 10px 12px !important; font-size: 0.85rem !important; border-radius: 8px !important; border: none !important; box-shadow: none !important; background: var(--ssd-bg) !important;}
    
    #ssd-music-name-input, #ssd-music-link-input { flex: 1 1 100% !important; min-width: 100% !important; margin-bottom: 5px; }
    #ssd-music-save-btn { padding: 10px 15px !important; font-size: 0.85rem !important; border-radius: 8px !important; flex: 1 1 100%; margin-top: 5px; box-shadow: none !important; border: none !important;}
    
    #ssd-noti-panel { 
        position: fixed !important; 
        top: 65px !important; 
        right: 10px !important; 
        left: 10px !important; 
        width: auto !important; 
        max-width: none !important;
        z-index: 100000 !important; 
        box-sizing: border-box;
        background: var(--ssd-card) !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    #ssd-tool-music {
        background-color: var(--ssd-card) !important;
        flex: 1 !important;
        height: 100% !important;
        display: flex;
        flex-direction: column;
    }
    body.light-mode #ssd-tool-music {
        background-color: var(--ssd-card) !important;
    }

    #ssd-sidebar-music-content { 
        padding: 15px 15px 150px 15px !important; 
        overflow-x: hidden !important; 
        overflow-y: auto !important; 
        width: 100% !important; 
        height: 100% !important;
        flex: 1 !important;
        box-sizing: border-box !important;
        position: relative !important; 
        background-color: transparent !important; 
    }

    .ssd-music-modern-wrapper { width: 100% !important; padding: 0 !important; box-sizing: border-box !important; }
    .ssd-music-modern-wrapper h3 { font-size: 1.2rem !important; margin-bottom: 5px !important; }
    .ssd-music-modern-wrapper p { font-size: 0.75rem !important; margin-bottom: 12px !important; }
    .youtube-embed-box { height: 180px !important; border-radius: 10px !important; }
    
    .ssd-music-glass-panel { padding: 12px !important; border-radius: 12px !important; margin-bottom: 12px !important; width: 100% !important; box-sizing: border-box !important; }
    .ssd-music-glass-panel h4 { font-size: 0.8rem !important; margin-bottom: 10px !important; }
    
    .ssd-music-input { padding: 8px 10px !important; font-size: 0.75rem !important; border-radius: 8px !important; box-sizing: border-box !important; }
    
    .ssd-music-glass-panel > div[style*="display:flex"] { flex-direction: column !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; }

    #ssd-music-name-input, #ssd-music-link-input { width: 100% !important; min-width: 0 !important; flex: none !important; }
    #ssd-music-save-btn { padding: 10px 12px !important; font-size: 0.8rem !important; border-radius: 8px !important; width: 100% !important; flex: none !important; margin-top: 2px;}
    
    .ssd-shared-pl-item {
        padding: 10px !important; border-radius: 10px !important; margin-bottom: 8px !important; 
        width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
        min-width: 0 !important; overflow: hidden !important; display: flex !important; flex-wrap: nowrap !important; gap: 5px;
        background: var(--ssd-box-bg) !important; border: none !important;
    }
    .ssd-shared-pl-item > div { min-width: 0 !important; }
    .ssd-shared-pl-item .play-icon-wrap, .ssd-shared-pl-item .my-action-btns { flex-shrink: 0 !important; }
    .ssd-shared-pl-item .play-icon-wrap { width: 30px !important; height: 30px !important; font-size: 0.8rem !important; }
    .ssd-shared-pl-item .fa-youtube { font-size: 0.85rem !important; margin-right: 5px !important; }
    .ssd-shared-pl-item .my-action-btns div { width: 26px !important; height: 26px !important; font-size: 0.7rem !important; box-shadow: none !important; border: none !important;}
    
    #ssd-music-status-bar { padding: 8px 10px !important; border-radius: 10px !important; margin-bottom: 12px !important; width: 100% !important; box-sizing: border-box !important; border: none !important; backdrop-filter: none !important;}
    #music-album-art { width: 35px !important; height: 35px !important; border-radius: 8px !important; box-shadow: none !important;}
    #music-track { font-size: 0.8rem !important; }
    #music-artist { font-size: 0.7rem !important; }
}

/* 🌟 ADDED NOTIFICATION SYSTEM CSS 🌟 */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
.ssd-toast {
    animation: slideInRight 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    pointer-events: auto;
}
.ssd-toast.hide {
    animation: fadeOutRight 0.3s ease-in forwards;
}
.ssd-noti-item { transition: 0.2s; border-radius: 8px; border: none;}
.ssd-noti-item:hover { background: var(--ssd-box-bg); }

/* ====================================================
   PROFILE CARDS - EXACT DOCK COLOR & NO GRADIENT
   ==================================================== */

/* 1. Profile Card එකේ පසුබිම Dock එකේ වර්ණයටම හැරවීම */
.ssd-user-card, 
.ssd-card-inner-content,
.ssd-user-card video.ssd-user-video {
    background-color: #151A28 !important; /* Dock bar එකේ වර්ණය */
    background-image: none !important;
}

/* 2. Profile Card එක ඇතුළේ පහළින් ඇති අඳුරු Gradient සෙවනැල්ල සම්පූර්ණයෙන්ම ඉවත් කිරීම */
.ssd-overlay-bottom {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important; /* Black Gradient එක මැකීම */
    box-shadow: none !important;
}

/* 3. Gradient එක ඉවත් කළ පසු අකුරු පැහැදිලිව පෙනීමට අමතර සෙවනැලි (Text-shadow) ඉවත් කිරීම */
.ssd-name-tag {
    text-shadow: none !important; 
}

/* ====================================================
   PROFILE CARDS - 100% EXACT DOCK BAR COLOR MATCH
   ==================================================== */

/* 1. Profile Card එකේ සියලුම කොටස් වලට හරියටම Dock Bar එකේ වර්ණය දීම */
.ssd-user-card, 
.ssd-user-card .ssd-card-inner-content,
.ssd-user-card .ssd-overlay-bottom,
.ssd-user-card video.ssd-user-video {
    background-color: var(--ssd-card) !important; /* Dock එකට භාවිතා වන වර්ණයම යෙදීම */
    background-image: none !important; /* අනවශ්‍ය Gradients මැකීම */
    box-shadow: none !important;
    border: none !important;
}

/* 2. පහළ ඇති අකුරු වල පැහැදිලි බව වැඩි කිරීම */
.ssd-name-tag {
    text-shadow: none !important; 
    color: var(--ssd-text) !important;
}

/* 3. Card එක Hover කරන විට එන වෙනස්කම් ඉවත් කර Flat පෙනුම තබාගැනීම */
.ssd-user-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ====================================================
   REMOVE GREEN FOCUSING BORDER & ALL BOX SHADOWS
   ==================================================== */
.ssd-user-card.focusing,
.ssd-user-card.pinned,
.ssd-user-card:hover {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* ====================================================
   NAME TRUNCATION & VERIFIED BADGE PERFECT ALIGNMENT
   ==================================================== */

/* 1. නම සහ Tick එක එකම රේඛාවකට (Row) ගෙන ඒම */
.ssd-name-row { 
    display: flex !important; 
    flex-direction: row !important; 
    align-items: center !important; /* හරියටම මැදින් (Center) සමාන්තර කිරීම */
    gap: 5px !important; 
    width: 100% !important; 
    max-width: 100% !important;
    overflow: hidden !important; 
}

/* 2. නමේ උපරිම දිග සීමා කිරීම (දිග වැඩි නම් ... ලෙස පෙන්වීම) */
.ssd-name-tag { 
    white-space: nowrap !important; /* පහළට කඩාගෙන යාම වැළැක්වීම */
    overflow: hidden !important; 
    text-overflow: ellipsis !important; /* දිග වැඩි නම් අගට ... දැමීම */
    max-width: 100px !important; /* Desktop වලදී නමේ උපරිම ඉඩ */
    display: inline-block !important;
    flex-shrink: 1 !important;
}

/* 3. නම දිග වැඩි වූවත් Tick එක කිසිවිටෙක කුඩා නොවීම (Shrink නොවීම) */
.ssd-verified-icon-wrapper,
.ssd-verified-tick {
    flex-shrink: 0 !important; 
    display: flex !important;
    align-items: center !important;
}

/* 4. ජංගම දුරකථන සඳහා නමේ දිග තවත් සීමා කිරීම */
@media (max-width: 768px) {
    .ssd-name-tag {
        max-width: 70px !important; /* Mobile වලදී නමට දෙන උපරිම ඉඩ */
    }
}

/* ====================================================
   ENCOURAGE (LIKE) BUTTON - FLAT & BLUE ACTIVE STATE
   ==================================================== */

/* 1. Like බොත්තම වටා ඇති කොටුව, Border සහ සෙවනැලි ඉවත් කිරීම */
.ssd-encourage-badge {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 4px !important; /* අනවශ්‍ය ඉඩ ඉවත් කිරීම */
    color: var(--ssd-text-muted) !important; /* සාමාන්‍ය අවස්ථාවේ ලා අළු පැහැය */
}

.ssd-encourage-badge i {
    color: var(--ssd-text-muted) !important;
    transition: color 0.3s ease !important;
}

/* 2. Hover කරන විට (Mouse එක ගෙන ගිය විට) පසුබිම වෙනස් නොවීම */
.ssd-encourage-badge:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--ssd-primary) !important;
}

.ssd-encourage-badge:hover i {
    color: var(--ssd-primary) !important;
}

/* 3. Active (Like කළ පසු) රතු කොටුව ඉවත් කර Heart එක නිල් පැහැ කිරීම */
.ssd-encourage-badge.active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--ssd-primary) !important; /* සංඛ්‍යාව නිල් පැහැ කිරීම */
}

.ssd-encourage-badge.active i {
    color: #3b82f6 !important; /* Heart එක හරියටම නිල් පැහැ කිරීම (Blue) */
}

/* ====================================================
   YOUTUBE MUSIC SECTION - FLAT PROFESSIONAL UI
   ==================================================== */

/* 1. මුළු Music කොටසටම දෙපසින් Gap එකක් තබා මැදට (Center) ගැනීම */
#ssd-sidebar-music-content {
    padding: 30px 40px !important;
}

.ssd-music-modern-wrapper {
    max-width: 850px !important; /* පළල සීමා කර වෘත්තීය පෙනුමක් දීම */
    margin: 0 auto !important;
}

/* 2. Music List Box එකට Flat Box පෙනුමක් සහ Scroll පහසුකම දීම */
#ssd-shared-playlists {
    max-height: 320px !important; /* උස සීමා කිරීම */
    overflow-y: auto !important; /* Scroll එක සක්‍රිය කිරීම */
    background-color: var(--ssd-box-bg) !important; /* ඇතුළත පසුබිමට වෙනස් අඳුරු පැහැයක් */
    border-radius: 16px !important; /* කොන් රවුම් කිරීම */
    padding: 15px !important;
    display: block !important; 
}

/* Music List එකේ Scrollbar එක ඉතා තුනීව සහ ලස්සනට පෙන්වීම */
#ssd-shared-playlists::-webkit-scrollbar {
    width: 6px;
}
#ssd-shared-playlists::-webkit-scrollbar-track {
    background: transparent;
}
#ssd-shared-playlists::-webkit-scrollbar-thumb {
    background-color: var(--ssd-border);
    border-radius: 10px;
}

/* ජංගම දුරකථන (Mobile) සඳහා සකස් කිරීම */
@media (max-width: 768px) {
    #ssd-sidebar-music-content {
        padding: 20px 20px 130px 20px !important; /* Mobile හි දෙපසට 20px Gap එකක් දීම */
    }
    
    .ssd-music-modern-wrapper {
        width: 100% !important;
    }

    #ssd-shared-playlists {
        max-height: 250px !important; /* Mobile වල උස සීමා කිරීම */
        border-radius: 12px !important;
    }
}

/* ====================================================
   MOBILE HEADER VISIBILITY, OVERLAP & GAP FIX
   ==================================================== */
@media (max-width: 991px) {
    
    /* 1. Dashboard Mobile Header එක Banner වලට උඩින් සහ Gap සහිතව තැබීම */
    .ssd-mobile-header,
    .ssd-sidebar-new-header {
        display: block !important;
        position: fixed !important; /* තිරයේ ඉහළින්ම රැඳවීම */
        top: 10px !important; /* ඉහළින් 10px පරතරය */
        left: 10px !important; /* වම් පසින් 10px පරතරය */
        width: calc(100% - 20px) !important; /* දෙපස පරතරය අඩු කර පළල සෑදීම */
        border-radius: 12px !important; /* කොටුවේ කොන් රවුම් කිරීම (Floating පෙනුම) */
        z-index: 9999 !important; /* සියලුම දේට උඩින් පෙන්වීම */
        background-color: var(--ssd-card) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; /* කුඩා සෙවනැල්ලක් (අවශ්‍ය නම් පමණක් තබාගන්න) */
    }

    /* 2. Study Room එකේ Mobile Top Bar එකද ඒ ආකාරයටම සැකසීම */
    .ssd-top-bar {
        z-index: 999 !important;
        top: 10px !important;
        left: 10px !important;
        width: calc(100% - 20px) !important;
        border-radius: 12px !important;
    }
}

/* =================================================================== */
/* === UPDATED: Professional Layouts for Single Tutor & Shop Pages === */
/* =================================================================== */

.ssd-fb-profile-view {
    font-family: 'Inter', 'Noto Sans Sinhala', sans-serif;
}

/* --- Black Box ඉවත් කිරීම --- */
.ssd-fb-profile-view .tutor-profile-container {
    background-color: transparent !important; 
    border: none !important; 
    box-shadow: none !important;
    margin: 0;
    padding-top: 15px;
}

/* --- Cover Photo Box --- */
.ssd-fb-profile-view .tutor-cover-photo {
    height: 150px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 16px !important; 
    overflow: hidden !important;
    width: 100%;
}

.ssd-fb-profile-view .ssd-back-to-classes-btn {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 8px;
}

.ssd-fb-profile-view .tutor-header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 10px 1.5rem 10px;
    position: relative;
}

.ssd-fb-profile-view .tutor-profile-picture-wrapper {
    margin-top: -45px; 
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 10;
}

/* --- UPDATED: Profile Picture Border (Badge Box Color) --- */
.ssd-fb-profile-view .tutor-profile-picture {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    /* Badge Main Box එකේ වර්ණය (var(--ssd-box-bg)) මෙහි යොදා ඇත */
    border: 4px solid var(--ssd-box-bg, #222d44) !important; 
    object-fit: cover;
}

.ssd-fb-profile-view .tutor-info-actions-wrapper {
    width: 100%;
    text-align: left;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}

.ssd-fb-profile-view .tutor-info h1 { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.1; }
.ssd-fb-profile-view .tutor-followers { color: #9ca3af; font-size: 0.9rem; margin: 0; }
.ssd-fb-profile-view .tutor-bio-short { color: #d1d5db; margin-top: 4px; margin-bottom: 10px; font-size: 0.9rem; line-height: 1.3; }

/* --- Professional Action Buttons --- */
.ssd-fb-profile-view .tutor-actions {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.ssd-fb-profile-view .tutor-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 25px; 
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-grow: 1; 
    font-size: 0.9rem;
    white-space: nowrap;
}
.ssd-fb-profile-view .tutor-action-btn i {
    margin-right: 0.5rem;
}

/* Facebook Style Follow Button */
.ssd-fb-profile-view .follow-btn,
.ssd-fb-profile-view .shop-follow-btn,
.ssd-fb-profile-view .student-follow-btn,
.ssd-fb-profile-view #edit-profile-btn {
    background-color: #1877F2; 
    color: #fff;
}
.ssd-fb-profile-view .follow-btn.following,
.ssd-fb-profile-view .shop-follow-btn.following,
.ssd-fb-profile-view .student-follow-btn.following {
    background-color: #374151;
    color: #d1d5db;
}
.ssd-fb-profile-view .follow-btn:hover,
.ssd-fb-profile-view .shop-follow-btn:hover,
.ssd-fb-profile-view .student-follow-btn:hover {
    filter: brightness(110%);
}

/* YouTube Button */
.ssd-fb-profile-view .youtube-btn {
    background-color: #CD201F; 
    color: #fff;
}
.ssd-fb-profile-view .youtube-btn:hover {
    filter: brightness(110%);
}

/* --- Horizontal Scrollable Tabs (Mobile Fix) --- */
.ssd-fb-profile-view .tutor-tabs-nav-wrapper { 
    padding: 0 10px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch !important; 
    scrollbar-width: none !important; 
}

.ssd-fb-profile-view .tutor-tabs-nav-wrapper::-webkit-scrollbar {
    display: none !important;
}

.ssd-fb-profile-view .tutor-tabs-nav { 
    display: flex; 
    gap: 1rem; 
    flex-wrap: nowrap !important; 
    white-space: nowrap !important; 
}

.ssd-fb-profile-view .tutor-tab-btn { padding: 0.8rem 0.25rem; color: #9ca3af; background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: all 0.2s ease; }
.ssd-fb-profile-view .tutor-tab-btn:hover { background-color: rgba(255, 255, 255, 0.05); border-radius: 6px 6px 0 0; }
.ssd-fb-profile-view .tutor-tab-btn.active { color: #3b82f6; border-bottom-color: #3b82f6; }
.ssd-fb-profile-view .tutor-content-wrapper { padding: 1.5rem 0; }
.ssd-fb-profile-view .tutor-tab-pane { display: none; }
.ssd-fb-profile-view .tutor-tab-pane.active { display: block; }


/* --- Desktop Overrides --- */
@media (min-width: 768px) {
    .ssd-fb-profile-view .tutor-profile-container { 
        background-color: transparent !important; 
        border: none !important; 
        margin: 1.5rem 0; 
    }
    
    .ssd-fb-profile-view .tutor-cover-photo { 
        height: 300px; 
        border-radius: 20px !important; 
    }
    
    .ssd-fb-profile-view .tutor-header-content { 
        flex-direction: row; 
        align-items: flex-end; 
        max-width: 1000px; 
        margin: 0 auto; 
        padding: 0 10px; 
    }
    
    .ssd-fb-profile-view .tutor-profile-picture-wrapper {
        margin-top: -70px; 
        margin-bottom: 1rem;
    }
    
    /* Desktop සඳහාද Border එක Badge වර්ණයට මාරු කිරීම */
    .ssd-fb-profile-view .tutor-profile-picture { 
        width: 150px; 
        height: 150px; 
        border: 5px solid var(--ssd-box-bg, #222d44) !important; 
    }
    
    .ssd-fb-profile-view .tutor-info-actions-wrapper { 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        flex-grow: 1; 
        text-align: left; 
        padding-bottom: 1rem; 
        margin-left: 1.5rem; 
        border-bottom: none; 
    }
    .ssd-fb-profile-view .tutor-info { 
        margin-bottom: 0;
        flex-shrink: 1; 
        margin-right: 1rem; 
    }
    .ssd-fb-profile-view .tutor-info h1 { font-size: 2rem; }
    
    .ssd-fb-profile-view .tutor-actions { 
        margin-top: 0; 
        flex-grow: 0; 
        width: auto;
        flex-shrink: 0; 
    }
    .ssd-fb-profile-view .tutor-tabs-nav-wrapper { max-width: 1000px; margin: 0 auto; padding: 0 10px; }
    .ssd-fb-profile-view .tutor-tab-btn { font-size: 1rem; padding: 0.75rem 1rem; }
    .ssd-fb-profile-view .tutor-content-wrapper { max-width: 1000px; margin: 0 auto; padding: 1.5rem 10px; }
}

/* --- Student Profile Spacing --- */
.ssd-fb-profile-view .tutor-info {
    display: flex;
    flex-direction: column;
    gap: 2px; 
    margin-bottom: 0; 
}

.ssd-fb-profile-view .tutor-info h1 {
    margin: 0; 
}

.ssd-fb-profile-view .tutor-username {
    color: #38bdf8;
    margin: 0; 
    line-height: 1.2; 
}

.ssd-fb-profile-view .tutor-follow-stats {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0; 
}

/* =================================================================== */
/* === LOADING SPINNER & BADGE BORDER FIX === */
/* =================================================================== */

/* student php gonuwe pahala loading lesa ring ekak karakenawa eya hadanna */
#ssd-feed-load-more,
.ssd-load-more-wrapper,
i.fa-spinner.fa-spin {
    display: none !important;
}

/* earner badge wala watet tiyen nil boarder eka ayin kara fade color ekama tabanna */
.ssd-top-badge-item.unlocked, 
.ssd-top-badge-item:hover, 
body.light-mode .ssd-top-badge-item.unlocked, 
body.light-mode .ssd-top-badge-item:hover,
.ssd-dropdown-item.earned,
body.light-mode .ssd-dropdown-item.earned {
    box-shadow: none !important; 
    border: none !important;
}

:root {
        --ssd-bg-card: #1e293b;
        --ssd-border: #334155;
        --ssd-primary: #3b82f6;
        --ssd-text-main: #e2e8f0;
        --ssd-text-muted: #94a3b8;
    }

    .ssd-analysis-wrapper { font-family: 'Inter', sans-serif; color: var(--ssd-text-main); }
    
    /* Stats Cards */
    .ssd-stats-row { display: flex; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
    .ssd-stat-card { flex: 1; min-width: 200px; background: var(--ssd-bg-card); border: 1px solid var(--ssd-border); padding: 25px; border-radius: 16px; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); position: relative; overflow: hidden; }
    .ssd-stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--ssd-primary); }
    .ssd-stat-icon { width: 50px; height: 50px; background: rgba(59,130,246,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--ssd-primary); font-size: 1.5rem; }
    .ssd-stat-info h4 { margin: 0 0 5px; color: var(--ssd-text-muted); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
    .ssd-stat-info .value { font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; }

    /* Input Form Area */
    .ssd-input-section { background: var(--ssd-bg-card); border: 1px solid var(--ssd-border); border-radius: 20px; padding: 30px; margin-bottom: 30px; }
    .ssd-section-title { font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
    
    .ssd-input-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-bottom: 25px; }
    .ssd-input-group label { display: block; color: var(--ssd-text-muted); font-size: 0.9rem; margin-bottom: 8px; font-weight: 500; }
    .ssd-time-input { width: 100%; background: #0f172a; border: 2px solid var(--ssd-border); color: #fff; padding: 12px; border-radius: 10px; font-size: 1rem; outline: none; transition: 0.2s; }
    .ssd-time-input:focus { border-color: var(--ssd-primary); }
    .ssd-time-input:disabled { opacity: 0.5; cursor: not-allowed; }

    .ssd-action-btn { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; border: none; padding: 12px 30px; border-radius: 12px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; }
    .ssd-action-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4); }
    .ssd-action-btn:disabled { background: #334155; transform: none; box-shadow: none; cursor: not-allowed; }

    /* Chart Section */
    .ssd-chart-card { background: var(--ssd-bg-card); border: 1px solid var(--ssd-border); border-radius: 20px; padding: 25px; margin-bottom: 30px; }
    .ssd-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .ssd-chart-select { background: #0f172a; color: #fff; border: 1px solid var(--ssd-border); padding: 8px 15px; border-radius: 8px; outline: none; }

    /* Leaderboard */
    .ssd-rank-list { background: var(--ssd-bg-card); border: 1px solid var(--ssd-border); border-radius: 20px; overflow: hidden; }
    .ssd-rank-item { display: flex; align-items: center; padding: 15px 25px; border-bottom: 1px solid var(--ssd-border); transition: 0.2s; }
    .ssd-rank-item:last-child { border-bottom: none; }
    .ssd-rank-item:hover { background: rgba(255,255,255,0.02); }
    
    .ssd-rank-num { width: 35px; height: 35px; background: #0f172a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--ssd-text-muted); margin-right: 15px; font-size: 0.9rem; border: 1px solid var(--ssd-border); }
    .ssd-rank-item:nth-child(1) .ssd-rank-num { background: #fbbf24; color: #000; border-color: #fbbf24; }
    .ssd-rank-item:nth-child(2) .ssd-rank-num { background: #94a3b8; color: #000; border-color: #94a3b8; }
    .ssd-rank-item:nth-child(3) .ssd-rank-num { background: #d97706; color: #000; border-color: #d97706; }

    .ssd-rank-info { flex: 1; }
    .ssd-rank-name { color: #fff; font-weight: 600; margin-bottom: 2px; }
    .ssd-rank-school { font-size: 0.8rem; color: var(--ssd-text-muted); }
    .ssd-rank-score { font-weight: 700; color: var(--ssd-primary); font-size: 1.1rem; }

    @media (max-width: 768px) {
        .ssd-stats-row { flex-direction: column; gap: 15px; }
        .ssd-input-grid { grid-template-columns: 1fr; }
    }

/* ======================================================= */
    /* FLAT MODERN UI VARIABLES & BASE                         */
    /* ======================================================= */
    :root {
        --ssd-card: #1C2338;
        --ssd-box-bg: #222d44;
        --ssd-bg: #151A28;
        --ssd-border: #2d3b55;
        --ssd-primary: #3b82f6;
        --ssd-text: #f1f5f9;
        --ssd-text-muted: #94a3b8;
    }

    .ssd-analytics-new-wrap { font-family: 'Inter', sans-serif; width: 100%; box-sizing: border-box; animation: fadeIn 0.4s ease; display: flex; flex-direction: column; gap: 15px; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    
    .ana-row-top { display: flex; gap: 15px; width: 100%; }
    .ana-col-stats { flex: 1; display: flex; gap: 15px; }
    .ana-col-filters { flex: 0 0 360px; }
    
    .ana-row-charts { display: flex; gap: 15px; width: 100%; align-items: stretch; }
    .ana-col-insights { flex: 1.6; display: flex; flex-direction: column; } 
    .ana-col-breakdown { flex: 1; display: flex; flex-direction: column; }

    .ssd-analytic-card { background: var(--ssd-card); border-radius: 20px; padding: 25px; border: none; height: 100%; box-sizing: border-box; position: relative; box-shadow: none; }
    .ssd-analytic-card-title { font-size: 1rem; font-weight: 700; color: var(--ssd-text); text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; margin: 0; }

    .ssd-streak-rank-card { flex: 1; display: flex; align-items: center; gap: 15px; padding: 15px 20px; }
    .ssd-sr-icon { font-size: 1.8rem; min-width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
    .ssd-sr-streak-icon { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
    .ssd-sr-rank-icon { background: rgba(59, 130, 246, 0.1); color: var(--ssd-primary); }
    .ssd-sr-info { flex: 1; }
    .ssd-sr-value { font-size: 1.5rem; font-weight: 800; color: var(--ssd-text); line-height: 1.2; margin-bottom: 2px; transition: opacity 0.3s; }
    .ssd-sr-label { font-size: 0.75rem; font-weight: 600; color: var(--ssd-text-muted); text-transform: uppercase; }

    /* Modern Professional Range Buttons (Flat Box) */
    .ssd-range-card { padding: 0; background: transparent; border: none; display: flex; align-items: center; justify-content: center; height: 100%; box-shadow: none; }
    .ssd-range-btns-container { display: flex; background: var(--ssd-box-bg); padding: 6px; border-radius: 14px; border: none; width: 100%; position: relative; gap: 4px; box-shadow: none; }
    .ssd-range-btn { flex: 1; white-space: nowrap !important; background: transparent; border: none; color: var(--ssd-text-muted); padding: 10px 8px; font-size: 0.85rem; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: none; }
    .ssd-range-btn:hover { color: var(--ssd-text); background: var(--ssd-border); }
    .ssd-range-btn.active { background: var(--ssd-primary); color: #fff; box-shadow: none; }

    /* CHARTS UI & MODERN TWEAKS */
    .ssd-graph-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
    .ssd-share-trigger-btn { background: var(--ssd-box-bg); color: var(--ssd-text-muted); border: none; padding: 8px 16px; border-radius: 50px; font-weight: 700; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; gap: 6px; box-shadow: none; transition: 0.2s; }
    .ssd-share-trigger-btn:hover { background: var(--ssd-primary); color: white; transform: translateY(-2px); }

    .ssd-graph-main-stats { display: flex; justify-content: space-around; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px dashed var(--ssd-border); }
    .ssd-gs-item { text-align: center; }
    .ssd-gs-label { font-size: 0.8rem; color: var(--ssd-text-muted); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
    .ssd-gs-val { font-size: 1.6rem !important; font-weight: 800 !important; color: var(--ssd-text); line-height: 1; white-space: nowrap; transition: opacity 0.3s; }

    .ssd-building-graph-canvas { height: 220px; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid var(--ssd-border); position: relative; transition: opacity 0.3s; }
    .ssd-graph-bar-wrap { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; margin: 0 4px; z-index: 2; }
    .ssd-bar-seg { width: 100%; max-width: 35px; border-radius: 6px 6px 0 0; background: #f59e0b; position: relative; transition: all 0.2s ease; cursor: pointer; }
    .ssd-bar-seg-blue { background: var(--ssd-primary); }
    .ssd-bar-seg-green { background: #10b981; }
    .ssd-graph-date-label { position: absolute; bottom: -22px; font-size: 0.65rem; color: var(--ssd-text-muted); font-weight: 600; white-space: nowrap; }

    .ax-y-grid-line { position: absolute; width: 100%; border-bottom: 1px dashed var(--ssd-border); z-index: 1; left: 0; }
    .ax-y-grid-label { position: absolute; right: 0; top: -16px; font-size: 0.65rem; color: var(--ssd-text-muted); background: var(--ssd-card); padding-left: 5px; }
    .ax-bar-time-lbl { position: absolute; font-size: 0.65rem; color: #fff; font-weight: 600; white-space: nowrap; z-index: 5; transform: translateY(-100%); margin-bottom: 5px; }

    .ssd-subject-distribution-new { display: flex; flex-direction: column; align-items: center; width: 100%; }
    .ssd-chart-canvas-wrap { position: relative; width: 180px; height: 180px; margin: 0 auto; }
    .ssd-chart-canvas { width: 100%; height: 100%; border-radius: 50%; transition: background 0.5s ease; }
    .ssd-chart-canvas::after { content: ''; position: absolute; top: 18%; left: 18%; width: 64%; height: 64%; background: var(--ssd-card); border-radius: 50%; box-shadow: none; z-index: 5; }
    
    .ssd-pie-center-time { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10; width: 100%; }
    .ssd-pct-val { font-size: 1.4rem; font-weight: 800; color: var(--ssd-text); line-height: 1; transition: opacity 0.3s; }

    .ssd-dist-legends { width: 100%; display: flex; flex-direction: column; gap: 15px; max-height: 250px; overflow-y: auto; padding-right: 5px; margin-top: 20px; transition: opacity 0.3s; }
    .ssd-dist-legends::-webkit-scrollbar { width: 4px; }
    .ssd-dist-legends::-webkit-scrollbar-thumb { background: var(--ssd-border); border-radius: 4px; }
    .ssd-legend-item-new { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .ssd-leg-new-header { display: flex; justify-content: space-between; align-items: center; }
    .ssd-leg-new-name { font-size: 0.85rem; font-weight: 600; color: var(--ssd-text); }
    .ssd-leg-new-time { font-size: 0.85rem; color: var(--ssd-text-muted); font-weight: 600; font-family: monospace; }
    .ssd-leg-new-track { width: 100%; height: 6px; background: var(--ssd-box-bg); border-radius: 10px; overflow: hidden; }
    .ssd-leg-new-bar { height: 100%; border-radius: 10px; }

    /* ======================================================= */
    /* SHARE POPUP UI STYLES                                   */
    /* ======================================================= */
    .ssd-share-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 99998; display: none; backdrop-filter: blur(5px); }
    
    .ssd-share-sidebar { 
        position: fixed; background: var(--ssd-card); z-index: 99999; display: flex; flex-direction: column; 
        box-shadow: none; 
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.4s; 
        visibility: hidden; 
    }
    
    @media (min-width: 992px) { 
        .ssd-share-sidebar { top: 0; right: 0; width: 450px; height: 100vh; transform: translateX(100%); border-radius: 24px 0 0 24px; } 
        .ssd-share-sidebar.show { transform: translateX(0); visibility: visible; } 
    }
    @media (max-width: 991px) { 
        .ssd-share-sidebar { bottom: 0; left: 0; width: 100%; height: 85vh; transform: translateY(100%); border-radius: 24px 24px 0 0; } 
        .ssd-share-sidebar.show { transform: translateY(0); visibility: visible; } 
    }

    .ssd-share-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px dashed var(--ssd-border); }
    .ssd-share-header h3 { margin: 0; color: var(--ssd-text); font-size: 1.2rem; font-weight: 700; }
    .ssd-share-close { background: var(--ssd-box-bg); border: none; color: var(--ssd-text-muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; box-shadow: none;}
    .ssd-share-close:hover { background: #ef4444; color: white; }
    .ssd-share-body { padding: 25px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
    
    .ssd-capture-wrapper { margin-bottom: 25px; overflow: hidden; border-radius: 16px; border: none; box-shadow: none;}
    #ssd-capture-area { transition: all 0.3s ease; border-radius: 16px; }
    #ssd-capture-area.size-month { padding: 15px 25px; }
    #ssd-capture-area.size-month .ssd-building-graph-canvas { height: 160px; }
    #ssd-capture-area.size-3months { padding: 15px 25px; }
    #ssd-capture-area.size-3months .ssd-building-graph-canvas { height: 130px; }
    #ssd-capture-area.size-3months .ssd-graph-main-stats { margin-bottom: 15px; }
    #ssd-capture-area.size-year { padding: 12px 25px; }
    #ssd-capture-area.size-year .ssd-building-graph-canvas { height: 90px; }
    #ssd-capture-area.size-year .ssd-graph-main-stats { margin-bottom: 10px; }
    
    #ssd-capture-content { width: 100%; }
    .ssd-capture-inner-box { background: var(--ssd-card) !important; box-shadow: none !important; border: none !important; }
    #ssd-capture-content .ssd-analytic-card-title { color: var(--ssd-text); margin-bottom: 25px; text-align: center; justify-content: center; font-size: 1.1rem; }
    #ssd-capture-content .ssd-gs-label { color: var(--ssd-text-muted); }
    #ssd-capture-content .ssd-graph-date-label { color: var(--ssd-text-muted); }
    #ssd-capture-content .ssd-chart-canvas::after { background: var(--ssd-card) !important; box-shadow: none !important; border: none !important; z-index: 5; } 
    #ssd-capture-content .ssd-pie-center-time { z-index: 10; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; }
    #ssd-capture-content .ssd-pct-val { color: var(--ssd-text) !important; font-size: 1.3rem; font-weight: 800; }
    #ssd-capture-content .ssd-dist-legends { display: flex; flex-direction: column; gap: 15px; margin-top: 30px; max-height: none; overflow: visible; width: 100%; }
    #ssd-capture-content .ssd-building-graph-canvas { border-bottom-color: var(--ssd-border); }

    /* HORIZONTAL SCROLL FIX FOR COLORS */
    .ssd-share-colors-wrap { margin-bottom: 20px; }
    .ssd-share-colors-wrap label { display: block; color: var(--ssd-text-muted); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; margin-bottom: 12px; text-align: left; }
    
    .ssd-color-swatches { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
    .ssd-color-swatches::-webkit-scrollbar { height: 4px; }
    .ssd-color-swatches::-webkit-scrollbar-thumb { background: var(--ssd-border); border-radius: 4px; }
    .ssd-swatch { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: 0.2s; box-shadow: none; }
    .ssd-swatch:hover { transform: scale(1.1); }
    .ssd-swatch.active { border-color: #fff; transform: scale(1.15); }

    /* HORIZONTAL SCROLL FIX FOR SOCIAL ICONS */
    .ssd-social-share-grid { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 15px; width: 100%; -webkit-overflow-scrolling: touch; }
    .ssd-social-share-grid::-webkit-scrollbar { height: 4px; }
    .ssd-social-share-grid::-webkit-scrollbar-thumb { background: var(--ssd-border); border-radius: 4px; }
    
    .ssd-social-btn { flex-shrink: 0; width: 75px; height: 75px; border-radius: 14px; border: none; cursor: pointer; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: 0.2s; box-shadow: none; gap: 6px; }
    .ssd-social-btn:hover:not(:disabled) { transform: translateY(-3px); }
    .ssd-social-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .ssd-social-btn i { font-size: 1.4rem; }
    
    /* Social Buttons Labels & Specific Colors */
    .ssd-social-label { font-size: 0.65rem; font-weight: 600; text-align: center; line-height: 1.2; }
    .ssd-social-btn.mehewara-feed { background: var(--ssd-box-bg); border: none; }
    .ssd-social-btn.mehewara-feed img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: transparent; padding: 0; }
    .ssd-social-btn.whatsapp { background: #25D366; }
    .ssd-social-btn.facebook { background: #1877F2; }
    .ssd-social-btn.telegram { background: #0088cc; }
    .ssd-social-btn.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
    .ssd-social-btn.native-share { background: var(--ssd-border); }

    .ssd-btn-share-act.download { background: var(--ssd-primary); color: white; border: none; padding: 15px; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.2s; box-shadow: none;}
    .ssd-btn-share-act.download:hover:not(:disabled) { background: #2563eb; }
    .ssd-btn-share-act.download:disabled { opacity: 0.5; cursor: not-allowed; }

    /* RESPONSIVENESS */
    @media (max-width: 992px) {
        .ana-row-top { flex-direction: column; }
        .ana-col-filters { flex: 1; width: 100%; }
        .ana-row-charts { flex-direction: column; }
    }
    @media (max-width: 768px) {
        .ana-col-stats { flex-direction: column; }
        .ssd-chart-canvas-wrap { width: 160px; height: 160px; }
        .ssd-bar-seg { max-width: 20px; }
        .ssd-gs-val { font-size: 1.6rem !important; }
        .ssd-range-btn { padding: 10px 6px; font-size: 0.75rem; }
    }

    /* Light Mode Overrides */
    body.light-mode .ssd-analytic-card { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
    body.light-mode .ssd-analytic-card-title { color: var(--ssd-text); }
    body.light-mode .ssd-sr-value { color: var(--ssd-text); }
    body.light-mode .ssd-range-btns-container { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); }
    body.light-mode .ssd-range-btn { color: var(--ssd-text-muted); }
    body.light-mode .ssd-range-btn:hover { background: var(--ssd-card); color: var(--ssd-text); }
    body.light-mode .ssd-range-btn.active { background: var(--ssd-primary); color: #fff; }
    body.light-mode .ssd-share-trigger-btn { background: var(--ssd-box-bg); color: var(--ssd-text-muted); }
    body.light-mode .ssd-share-trigger-btn:hover { background: var(--ssd-primary); color: #fff; }
    body.light-mode .ssd-gs-val { color: var(--ssd-text); }
    body.light-mode .ssd-building-graph-canvas { border-bottom: 1px solid var(--ssd-border); }
    body.light-mode .ax-y-grid-line { border-bottom: 1px dashed var(--ssd-border); }
    body.light-mode .ax-y-grid-label { background: var(--ssd-card); color: var(--ssd-text-muted); }
    body.light-mode .ssd-chart-canvas::after { background: var(--ssd-card); }
    body.light-mode .ssd-pct-val { color: var(--ssd-text); }
    body.light-mode .ssd-leg-new-name { color: var(--ssd-text); }
    body.light-mode .ssd-leg-new-time { color: var(--ssd-text-muted); }
    body.light-mode .ssd-leg-new-track { background: var(--ssd-box-bg); }
    
    body.light-mode .ssd-share-sidebar { background: var(--ssd-card); border-left: 1px solid var(--ssd-border); }
    body.light-mode .ssd-share-header { border-bottom: 1px dashed var(--ssd-border); }
    body.light-mode .ssd-share-header h3 { color: var(--ssd-text); }
    body.light-mode .ssd-share-close { background: var(--ssd-box-bg); color: var(--ssd-text-muted); }
    body.light-mode .ssd-capture-inner-box { background: var(--ssd-card) !important; border: 1px solid var(--ssd-border) !important; }
    body.light-mode #ssd-capture-content .ssd-analytic-card-title { color: var(--ssd-text); }
    body.light-mode #ssd-capture-content .ssd-gs-val { color: var(--ssd-text) !important; }
    body.light-mode #ssd-capture-content .ssd-pct-val { color: var(--ssd-text) !important; }
    body.light-mode #ssd-capture-content .ssd-chart-canvas::after { background: var(--ssd-card) !important; }

   /* =========================================================
       FLAT MODERN UI VARIABLES & BASE
       ========================================================= */
    :root {
        --ssd-card: #1C2338;
        --ssd-box-bg: #222d44;
        --ssd-bg: #151A28;
        --ssd-border: #2d3b55;
        --ssd-primary: #3b82f6;
        --ssd-text: #f1f5f9;
        --ssd-text-muted: #94a3b8;
    }

    /* --- Main Wrapper --- */
    .ssd-badges-app-wrapper { padding: 10px 0 40px 0; min-height: 600px; font-family: 'Inter', sans-serif; }

    /* --- Header Section --- */
    .ssd-badges-header-section { text-align: center; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; }
    .ssd-header-animation { margin-bottom: 5px; filter: none; }
    .ssd-page-title { color: var(--ssd-text); font-size: 1.8rem; font-weight: 800; margin: 0 0 8px 0; letter-spacing: -0.5px; }
    .ssd-page-subtitle { color: var(--ssd-text-muted); font-size: 0.95rem; max-width: 400px; margin: 0 auto; line-height: 1.5; }

    /* --- Modern Tab Navigation (Flat) --- */
    .ssd-badges-tab-nav {
        display: flex;
        background: var(--ssd-card);
        padding: 6px;
        border-radius: 12px;
        max-width: 550px;
        margin: 0 auto 30px auto;
        border: none;
        position: relative;
    }
    .ssd-b-tab {
        flex: 1;
        background: transparent;
        border: none;
        color: var(--ssd-text-muted);
        padding: 10px 15px;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        z-index: 2;
    }
    .ssd-b-tab:hover { color: var(--ssd-text); background: var(--ssd-box-bg); }
    .ssd-b-tab.active { background: var(--ssd-box-bg); color: var(--ssd-primary); box-shadow: none; }
    .ssd-b-tab i { font-size: 1rem; }

    /* --- Tab Content Animation --- */
    .ssd-badge-tab-content { opacity: 0; transform: translateY(15px); transition: all 0.3s ease; }
    .ssd-badge-tab-content.active { opacity: 1; transform: translateY(0); }

    /* --- Badges Grid --- */
    .ssd-all-badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; padding: 5px; }

    /* --- App-Style Badge Card (Flat) --- */
    .ssd-app-badge-card {
        background: var(--ssd-box-bg);
        border: none;
        border-radius: 16px;
        padding: 20px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
        position: relative;
        box-shadow: none;
    }

    .ssd-app-badge-card.unlocked {
        background: var(--ssd-card);
    }
    .ssd-app-badge-card.unlocked:hover {
        transform: translateY(-3px);
        background: var(--ssd-box-bg);
        box-shadow: inset 0 0 0 1px var(--ssd-primary);
    }
    .ssd-app-badge-card.unlocked .badge-direct-image { filter: none; opacity: 1; transform: scale(1.05); }

    .ssd-app-badge-card.locked { background: var(--ssd-card); opacity: 0.6; }
    .ssd-app-badge-card.locked .badge-direct-image { filter: grayscale(100%) opacity(0.2); }

    .locked-corner-icon { position: absolute; top: 12px; right: 12px; color: var(--ssd-text-muted); font-size: 0.85rem; background: var(--ssd-box-bg); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; }

    .badge-direct-image { width: 100px; height: 100px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
    .badge-svg-image { width: 100%; height: 100%; object-fit: contain; filter: none; }

    .badge-title-text { color: var(--ssd-text); font-size: 0.75rem; font-weight: 700; margin: 0 0 10px 0; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }

    .badge-status-pill { font-size: 0.7rem; font-weight: 700; padding: 4px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; text-transform: uppercase; letter-spacing: 0.5px; border: none; }
    .badge-status-pill.unlocked { background: rgba(16, 185, 129, 0.1); color: #10b981; }
    .badge-status-pill.locked { background: rgba(100, 116, 139, 0.1); color: var(--ssd-text-muted); }

    .ssd-empty-state { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--ssd-text-muted); font-size: 0.9rem; background: var(--ssd-card); border-radius: 16px;}

    /* --- Mobile Responsive --- */
    @media (max-width: 768px) {
        .ssd-badges-header-section { margin-bottom: 20px; }
        .ssd-page-title { font-size: 1.4rem; }
        .ssd-header-animation { transform: scale(0.85); margin-bottom: -10px; }
        
        .ssd-badges-tab-nav { max-width: 100%; margin: 0 10px 25px 10px; padding: 4px; }
        .ssd-b-tab { font-size: 0.7rem; padding: 8px 4px; }
        .ssd-b-tab i { font-size: 0.85rem; }
        
        .ssd-all-badges-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 10px; }
        
        .ssd-app-badge-card { padding: 15px 10px; border-radius: 12px; }
        .badge-direct-image { width: 75px; height: 75px; margin-bottom: 8px; }
        .badge-title-text { font-size: 0.65rem; margin-bottom: 8px; }
        .badge-status-pill { font-size: 0.55rem; padding: 4px 8px; }
        .locked-corner-icon { top: 8px; right: 8px; width: 20px; height: 20px; font-size: 0.65rem; }
        
        .ssd-app-badge-card.unlocked:active { transform: scale(0.97); }
    }

    /* ====================================================
       LIGHT MODE OVERRIDES FOR VIEW BADGES
       ==================================================== */
    body.light-mode .ssd-badges-app-wrapper { color: var(--ssd-text); }
    body.light-mode .ssd-page-title { color: var(--ssd-text); }
    body.light-mode .ssd-page-subtitle { color: var(--ssd-text-muted); }

    body.light-mode .ssd-badges-tab-nav { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
    body.light-mode .ssd-b-tab { color: var(--ssd-text-muted); }
    body.light-mode .ssd-b-tab:hover { background: var(--ssd-box-bg); color: var(--ssd-text); }
    body.light-mode .ssd-b-tab.active { background: var(--ssd-box-bg); color: var(--ssd-primary); box-shadow: none; }

    body.light-mode .ssd-app-badge-card { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); }
    body.light-mode .ssd-app-badge-card.unlocked { background: var(--ssd-card); }
    body.light-mode .ssd-app-badge-card.unlocked:hover { background: var(--ssd-box-bg); box-shadow: inset 0 0 0 1px var(--ssd-primary); border-color: transparent;}
    body.light-mode .ssd-app-badge-card.locked { background: var(--ssd-card); opacity: 0.7; }
    body.light-mode .locked-corner-icon { color: var(--ssd-text-muted); background: var(--ssd-box-bg); border: none; }
    body.light-mode .badge-title-text { color: var(--ssd-text); }

    body.light-mode .badge-status-pill.locked { background: rgba(100, 116, 139, 0.08); color: var(--ssd-text-muted); border: none; }
    body.light-mode .ssd-empty-state { color: var(--ssd-text-muted); background: var(--ssd-card); border: 1px solid var(--ssd-border);}

/* FLAT MODERN UI VARIABLES & BASE */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-bg: #151A28;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

/* --- Rewards Wrapper & Layout --- */
.ssd-rewards-wrapper { padding-bottom: 30px; font-family: 'Inter', sans-serif; }
.reward-sec-title { color: var(--ssd-text); font-size: 1.2rem; margin: 25px 0 15px 0; font-weight: 700; }
.ssd-rewards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }

/* Reward Item (Flat Box) */
.ssd-reward-item-modern { background: var(--ssd-box-bg); border: none; border-radius: 16px; display: flex; align-items: center; gap: 15px; padding: 15px; transition: 0.2s; box-shadow: none; }
.ssd-reward-item-modern:hover:not(.expired-reward) { transform: translateY(-3px); background: var(--ssd-border); }

/* Expired Reward Styles */
.expired-reward { opacity: 0.6; filter: grayscale(100%); cursor: not-allowed; }
.btn-expired { background: var(--ssd-card); color: var(--ssd-text-muted); border: none; padding: 8px 16px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; cursor: not-allowed; width: auto; display: inline-block; }

.r-icon-box { width: 65px; height: 65px; border-radius: 14px; background: var(--ssd-card); color: var(--ssd-primary); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; }
.r-img { width: 65px; height: 65px; border-radius: 14px; background-size: cover; background-position: center; flex-shrink: 0; }
.r-content { flex: 1; }
.r-content h4 { color: var(--ssd-text); margin: 0 0 5px 0; font-size: 1.05rem; }
.r-content p { color: var(--ssd-text-muted); font-size: 0.85rem; margin: 0 0 12px 0; line-height: 1.4; }

.btn-claim-reward { background: var(--ssd-primary); color: white; border: none; padding: 8px 16px; border-radius: 10px; font-size: 0.85rem; cursor: pointer; transition: 0.2s; font-weight: 600; width: auto; display: inline-block; box-shadow: none;}
.btn-claim-reward:hover { background: #2563eb; transform: translateY(-1px); }

/* --- Balance Card Styles (Flat) --- */
.reward-balance-card { background: var(--ssd-card); border-radius: 20px; padding: 30px; color: var(--ssd-text); position: relative; overflow: hidden; margin-bottom: 20px; border: none; box-shadow: none; }
.coin-card-flex { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.cc-label { font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ssd-text-muted); font-weight: 700; margin-bottom: 5px; }
.cc-value { font-size: 3.2rem; font-weight: 800; line-height: 1; text-shadow: none; color: var(--ssd-primary); }

/* --- Today's Coins UI (Flat) --- */
.cc-today-coins { margin-top: 8px; font-size: 0.95rem; font-weight: 600; color: var(--ssd-text); background: transparent; display: inline-block; padding: 0; border-radius: 0; border: none; }
.cc-today-coins span { color: #10b981; }

.cc-wallet-info { font-size: 0.8rem; padding: 8px 12px; border-radius: 8px; display: inline-block; font-weight: 600; background: var(--ssd-box-bg); color: var(--ssd-text-muted); border: none; margin-top: 15px; }

.btn-card-buy { background: var(--ssd-box-bg); color: var(--ssd-text); border: none; padding: 12px 24px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; cursor: pointer; box-shadow: none; display: flex; align-items: center; gap: 8px; transition: all 0.2s ease; }
.btn-card-buy:hover { transform: translateY(-2px); background: var(--ssd-primary); color: white; }

.cc-icon-bg { position: absolute; right: -20px; bottom: -30px; font-size: 10rem; opacity: 0.05; transform: rotate(-15deg); color: var(--ssd-text); pointer-events: none; }

/* --- Header Styles (Flat) --- */
.coin-header-section { text-align: center; margin-bottom: 25px; padding: 10px 0; }
.coin-animation-container { margin: 0 auto 10px; display: flex; justify-content: center; align-items: center; }
.webp-coin-img { width: 85px; height: auto; object-fit: contain; filter: none; animation: floatCoin 3s ease-in-out infinite; }
.coin-header-section h2 { margin: 5px 0; color: var(--ssd-text); font-size: 1.5rem; font-weight: 700; }
.coin-header-section p { color: var(--ssd-text-muted); font-size: 0.9rem; margin: 0; }

@keyframes floatCoin {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

@media (max-width: 480px) {
    .coin-card-flex { flex-direction: column; text-align: center; gap: 20px; }
    .cc-right { width: 100%; }
    .btn-card-buy { width: 100%; justify-content: center; }
    .webp-coin-img { width: 70px; }
}

/* Light Mode Overrides */
body.light-mode .reward-balance-card { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .cc-value { color: var(--ssd-primary); }
body.light-mode .cc-label { color: var(--ssd-text-muted); }
body.light-mode .cc-today-coins { color: var(--ssd-text); }
body.light-mode .cc-today-coins span { color: #10b981; }
body.light-mode .cc-wallet-info { background: var(--ssd-box-bg); color: var(--ssd-text-muted); }
body.light-mode .btn-card-buy { background: var(--ssd-box-bg); color: var(--ssd-text); }
body.light-mode .btn-card-buy:hover { background: var(--ssd-primary); color: white; }
body.light-mode .ssd-reward-item-modern { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-reward-item-modern:hover:not(.expired-reward) { background: var(--ssd-card); box-shadow: inset 0 0 0 1px var(--ssd-primary); }
body.light-mode .r-content h4 { color: var(--ssd-text); }
body.light-mode .r-content p { color: var(--ssd-text-muted); }
body.light-mode .btn-claim-reward { background: var(--ssd-primary); color: white; }
body.light-mode .btn-expired { background: var(--ssd-card); color: var(--ssd-text-muted); }
body.light-mode .r-icon-box { background: var(--ssd-card); color: var(--ssd-primary); }
body.light-mode .cc-icon-bg { color: var(--ssd-text-muted); }

    /* ======================================================= */
    /* FLAT MODERN UI VARIABLES & BASE                         */
    /* ======================================================= */
    :root {
        --ssd-card: #1C2338;
        --ssd-box-bg: #222d44;
        --ssd-bg: #151A28;
        --ssd-border: #2d3b55;
        --ssd-primary: #3b82f6;
        --ssd-text: #f1f5f9;
        --ssd-text-muted: #94a3b8;
    }

    /* Appearance Covers */
    .ssd-sample-covers-container::-webkit-scrollbar { height: 6px; }
    .ssd-sample-covers-container::-webkit-scrollbar-thumb { background: var(--ssd-border); border-radius: 10px; }
    .sample-cover-wrap:hover { transform: scale(1.05); }

    /* Modern App Card Layout (Flat) */
    .ssd-app-card { background: var(--ssd-card); padding: 25px; border-radius: 20px; border: none; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: none; transition: 0.3s; }
    .card-icon-header { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 15px; flex-shrink: 0; background: var(--ssd-box-bg); }
    .card-title { color: var(--ssd-text); font-size: 1.1rem; font-weight: 700; margin: 0 0 5px 0; }
    .card-desc { color: var(--ssd-text-muted); font-size: 0.8rem; margin: 0 0 20px 0; line-height: 1.4; }
    
    /* Theme Swatches (Flat) */
    .theme-swatch-container { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 25px; width: 100%; }
    .ssd-theme-swatch { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: 0.2s; border: 3px solid transparent; box-shadow: none; }
    .ssd-theme-swatch:hover { transform: scale(1.1); }
    .ssd-theme-swatch.active { border-color: var(--ssd-text); transform: scale(1.1); }

    /* Action Buttons (Flat) */
    .ssd-action-btn { width: 100%; padding: 12px; border-radius: 12px; border: none; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: 0.2s; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: none; }
    .ssd-action-btn.primary { background: var(--ssd-primary); color: white; }
    .ssd-action-btn.secondary { background: #10b981; color: white; }
    .ssd-action-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
    .ssd-action-btn:active { transform: scale(0.97); }

    /* Subject List & Switches (Flat) */
    .ssd-subject-list { width: 100%; max-height: 200px; overflow-y: auto; padding-right: 5px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
    .ssd-subject-list::-webkit-scrollbar { width: 4px; }
    .ssd-subject-list::-webkit-scrollbar-thumb { background: var(--ssd-border); border-radius: 10px; }
    .subject-toggle-item { display: flex; justify-content: space-between; align-items: center; background: var(--ssd-box-bg); padding: 10px 15px; border-radius: 12px; border: none; transition: 0.2s; }
    .subject-toggle-item:hover { background: var(--ssd-border); }
    .sub-name { color: var(--ssd-text); font-weight: 600; font-size: 0.85rem; }
    
    .ssd-modern-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
    .ssd-modern-switch input { opacity: 0; width: 0; height: 0; }
    .switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--ssd-border); transition: .4s; border-radius: 34px; }
    .switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
    .ssd-modern-switch input:checked + .switch-slider { background-color: var(--ssd-primary); }
    .ssd-modern-switch input:checked + .switch-slider:before { transform: translateX(20px); }

    /* Inputs & Selects */
    .ssd-modern-input { background: var(--ssd-box-bg) !important; color: var(--ssd-text) !important; border: none !important; font-family: inherit; transition: 0.2s; }
    .ssd-modern-input:focus { box-shadow: inset 0 0 0 1px var(--ssd-primary) !important; outline: none; }

    /* LIGHT MODE OVERRIDES */
    body.light-mode .ssd-app-card { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
    body.light-mode .card-icon-header { background: var(--ssd-box-bg); }
    body.light-mode .card-title { color: var(--ssd-text); }
    body.light-mode .subject-toggle-item { background: var(--ssd-box-bg); }
    body.light-mode .subject-toggle-item:hover { background: var(--ssd-card); box-shadow: inset 0 0 0 1px var(--ssd-primary); }
    body.light-mode .sub-name { color: var(--ssd-text); }
    body.light-mode .ssd-modern-input { background: var(--ssd-box-bg) !important; border: 1px solid var(--ssd-border) !important; }

/* --- General Dashboard Layout - Flat Colors --- */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
}

.ssd-desktop-top-row { display: flex; gap: 20px; align-items: stretch; margin-bottom: 25px; }
.ssd-stats-overview-card { flex: 2; background: var(--ssd-card); border: none; border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 20px; box-shadow: none; margin-bottom: 0; z-index: 1;}
.ssd-stat-rank-col { flex: 0 0 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px dashed var(--ssd-border); padding-right: 20px; text-align: center; }
.ssd-rank-trophy { font-size: 2.8rem; color: #f59e0b; margin-bottom: 8px; filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.4)); }
.ssd-rank-info .lbl { font-size: 0.75rem; color: #94a3b8; display: block; text-transform: uppercase; letter-spacing: 1px; }
.ssd-rank-info .val { font-size: 1.6rem; font-weight: 800; color: #fff; display: block; line-height: 1.2; }
.ssd-rank-info .sub-lbl { font-size: 0.7rem; color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 2px 8px; border-radius: 10px; }
.ssd-stat-grid-col { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.ssd-mini-stat { background: var(--ssd-box-bg); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; border: none; }
.ssd-mini-stat .lbl { font-size: 0.75rem; color: #64748b; margin-bottom: 3px; }
.ssd-mini-stat .val { font-size: 1rem; font-weight: 700; color: #fff; }
.text-orange { color: #f97316 !important; }
.ssd-modern-chart-card { background: var(--ssd-card); border-radius: 16px; padding: 25px; margin-bottom: 25px; border: none; box-shadow: none; }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }

/* --- APP-LIKE DIRECT BADGES SECTION --- */
.ssd-app-badges-widget { flex: 1; background: var(--ssd-card); border: none; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; z-index: 10; box-shadow: none; }
.ssd-badge-categories-container { display: flex; flex-direction: column; gap: 15px; }

.ssd-centered-badge-title { text-align: center; font-size: 0.85rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; margin-bottom: 15px; font-weight: 700; display: block; width: 100%; }

/* Three Large Badges Row */
.ssd-top-badges-row { display: flex; gap: 10px; width: 100%; margin-bottom: 5px; }
.ssd-top-badge-item { flex: 1; min-width: 0; background: var(--ssd-box-bg); border-radius: 16px; border: none; box-shadow: none; display: flex; flex-direction: column; align-items: center; padding: 15px 5px; cursor: pointer; transition: 0.3s; position: relative; justify-content: center;}
.ssd-top-badge-item:hover { background: var(--ssd-box-bg); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ssd-primary); }
.ssd-top-badge-item img { width: 55px; height: 55px; object-fit: contain; margin-bottom: 10px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.ssd-top-badge-item .locked-placeholder { width: 55px; height: 55px; border-radius: 50%; background: var(--ssd-card); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #475569; margin-bottom: 10px; border: none; }
.ssd-top-badge-item .tb-name { color: #f1f5f9; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1.1; word-wrap: break-word; width: 100%;}

.ssd-top-badge-item.unlocked { box-shadow: inset 0 0 0 1px var(--ssd-primary); }
.ssd-top-badge-item.locked { opacity: 0.7; }
.ssd-top-badge-item.locked img { filter: grayscale(100%) opacity(0.5); }

/* FLOATING ABSOLUTE DROPDOWN (Scroll Fix included) */
.ssd-bc-dropdown-content { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    z-index: 1050; 
    margin-top: 10px; 
    background: var(--ssd-card); 
    border: 1px solid var(--ssd-border); 
    border-radius: 16px; 
    padding: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    animation: slideDown 0.3s ease; 
    box-sizing: border-box;
    max-height: 250px; 
    overflow-y: auto;
}
.ssd-bc-dropdown-content::-webkit-scrollbar { width: 5px; }
.ssd-bc-dropdown-content::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 5px; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Grid */
.ssd-bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
.ssd-dropdown-item { background: var(--ssd-box-bg); padding: 12px 8px; border-radius: 12px; text-align: center; border: none; position: relative; transition: 0.2s; }
.ssd-dropdown-item img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.ssd-dropdown-item .item-name { display: block; font-size: 0.6rem; color: #94a3b8; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }

.ssd-dropdown-item.earned { box-shadow: inset 0 0 0 1px var(--ssd-primary); }
.ssd-dropdown-item.earned .item-name { color: #f1f5f9; }
.ssd-dropdown-item.not-earned { opacity: 0.6; }
.ssd-dropdown-item.not-earned img { filter: grayscale(100%) opacity(0.6); }

.item-lock { position: absolute; top: 4px; right: 4px; background: var(--ssd-card); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: #94a3b8; border: none; }

/* --- BUILDING GRAPH STYLES --- */
.ssd-building-graph-canvas { height: 220px; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; margin-top: 15px; }
.ssd-graph-bar-wrap { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; margin: 0 4px; z-index: 2; }
.ssd-bar-seg { width: 100%; max-width: 35px; border-radius: 4px 4px 0 0; background: #f59e0b; transition: all 0.2s ease; cursor: pointer; }
.ssd-bar-seg:hover { filter: brightness(1.2); transform: translateY(-2px); }
.ssd-bar-seg-blue { background: #06b6d4; }
.ssd-bar-seg-green { background: #10b981; }
.ssd-graph-date-label { position: absolute; bottom: -22px; font-size: 0.65rem; color: #94a3b8; font-weight: 600; white-space: nowrap; }
.ax-y-grid-line { position: absolute; width: 100%; border-bottom: 1px dashed rgba(255,255,255,0.1); z-index: 1; left: 0; }
.ax-bar-time-lbl { position: absolute; font-size: 0.65rem; color: #fff; font-weight: 600; white-space: nowrap; z-index: 5; transform: translateY(-100%); margin-bottom: 5px; }

/* --- Mobile Responsive Fixes --- */
@media (max-width: 768px) {
    .ssd-desktop-top-row { flex-direction: column; gap: 15px; }
    .ssd-stats-overview-card { flex-direction: row !important; padding: 10px !important; min-height: auto; }
    .ssd-stat-rank-col { flex: 0 0 32% !important; border-right: 1px dashed var(--ssd-border) !important; padding-right: 8px !important; border-bottom: none !important; }
    .ssd-rank-trophy { font-size: 1.8rem !important; margin-bottom: 4px !important; }
    .ssd-rank-info .val { font-size: 1.2rem !important; }
    .ssd-rank-info .lbl { font-size: 0.6rem !important; }
    .ssd-rank-info .sub-lbl { font-size: 0.6rem !important; padding: 1px 6px !important; }
    .ssd-stat-grid-col { gap: 6px !important; }
    .ssd-mini-stat { padding: 6px 8px !important; min-height: 50px; }
    .ssd-mini-stat .val { font-size: 0.85rem !important; }
    .ssd-mini-stat .lbl { font-size: 0.6rem !important; }
    .ssd-modern-chart-card { padding: 15px !important; }
    
    .ssd-app-badges-widget { padding: 12px !important; }
    .ssd-top-badges-row { gap: 5px; }
    .ssd-top-badge-item { padding: 10px 4px; border-radius: 12px; }
    .ssd-top-badge-item img { width: 40px; height: 40px; margin-bottom: 6px; }
    .ssd-top-badge-item .locked-placeholder { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 6px; }
    .ssd-top-badge-item .tb-name { font-size: 0.55rem; letter-spacing: 0; }
    
    .ssd-bc-dropdown-content { padding: 10px; border-radius: 12px; }
    .ssd-bc-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .ssd-dropdown-item { padding: 10px 4px; }
    .ssd-dropdown-item img { width: 50px; height: 50px; margin-bottom: 4px; }
    .ssd-dropdown-item .item-name { font-size: 0.5rem; }
    .item-lock { width: 14px; height: 14px; font-size: 0.5rem; top: 4px; right: 4px; }

    /* Feed Edge-to-Edge Fix */
    .tutor-content-wrapper { padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden; }
    #my-tab-home, #my-tab-about, #my-tab-classes { padding-left: 15px; padding-right: 15px; }
    #my-tab-posts, #my-tab-photos, #my-tab-videos, #my-tab-blogs, #my-tab-files { width: 100%; margin: 0; padding: 0; }
    .ssd-feed-wrapper { max-width: 100% !important; }
    .ssd-post-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; padding-left: 20px !important; padding-right: 20px !important; }
    
    .ssd-building-graph-canvas { height: 180px; }
    .ssd-bar-seg { max-width: 25px; }
}

/* ====================================================
   LIGHT MODE OVERRIDES FOR DEFAULT PROFILE
   ==================================================== */
body.light-mode .ssd-stats-overview-card { background: #ffffff; border: none; box-shadow: none; }
body.light-mode .ssd-stat-rank-col { border-right: 1px dashed #e2e8f0; }
body.light-mode .ssd-rank-info .lbl { color: #64748b; font-weight: 600; }
body.light-mode .ssd-rank-info .val { color: #0f172a; }
body.light-mode .ssd-mini-stat { background: #f8fafc; border: none; }
body.light-mode .ssd-mini-stat .lbl { color: #64748b; font-weight: 600; }
body.light-mode .ssd-mini-stat .val { color: #1e293b; }

body.light-mode .ssd-modern-chart-card { background: #ffffff; border: none; }
body.light-mode .section-title { color: #0f172a; font-weight: 700; }

body.light-mode .ssd-app-badges-widget { background: #ffffff; border: none; }

body.light-mode .ssd-centered-badge-title { color: #64748b; }
body.light-mode .ssd-top-badge-item { background: #f8fafc; border: none; box-shadow: none; }
body.light-mode .ssd-top-badge-item:hover { background: #f8fafc; box-shadow: inset 0 0 0 1px var(--ssd-primary); }
body.light-mode .ssd-top-badge-item.unlocked { background: #ffffff; box-shadow: inset 0 0 0 1px var(--ssd-primary); }
body.light-mode .ssd-top-badge-item .tb-name { color: #0f172a; }
body.light-mode .ssd-top-badge-item .locked-placeholder { background: #ffffff; color: #94a3b8; border: none; }

body.light-mode .ssd-bc-dropdown-content { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
body.light-mode .ssd-dropdown-item { background: #f8fafc; border: none; box-shadow: none; }
body.light-mode .ssd-dropdown-item .item-name { color: #64748b; }
body.light-mode .ssd-dropdown-item.earned { box-shadow: inset 0 0 0 1px var(--ssd-primary); }
body.light-mode .ssd-dropdown-item.earned .item-name { color: #0f172a; font-weight: 700; }
body.light-mode .ssd-dropdown-item.not-earned { background: #f1f5f9; }
body.light-mode .item-lock { background: #ffffff; color: #64748b; border: none; }

body.light-mode .ssd-building-graph-canvas { border-bottom-color: #e2e8f0; }
body.light-mode .ax-y-grid-line { border-bottom-color: rgba(0,0,0,0.05); }
body.light-mode .ssd-graph-date-label { color: #64748b; }
body.light-mode .ax-bar-time-lbl { color: #0f172a; }

/* =========================================================
   FLAT MODERN UI VARIABLES & BASE
   ========================================================= */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-bg: #151A28;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

.ssd-desktop-top-row { display: flex; gap: 20px; align-items: stretch; margin-bottom: 25px; }
.ssd-stats-overview-card { flex: 2; background: var(--ssd-card); border: none; border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 20px; box-shadow: none; margin-bottom: 0; z-index: 1;}
.ssd-stat-rank-col { flex: 0 0 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px dashed var(--ssd-border); padding-right: 20px; text-align: center; }
.ssd-rank-trophy { font-size: 2.8rem; color: #f59e0b; margin-bottom: 8px; filter: none; }
.ssd-rank-info .lbl { font-size: 0.75rem; color: var(--ssd-text-muted); display: block; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;}
.ssd-rank-info .val { font-size: 1.6rem; font-weight: 800; color: var(--ssd-text); display: block; line-height: 1.2; }
.ssd-rank-info .sub-lbl { font-size: 0.7rem; color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 2px 8px; border-radius: 10px; font-weight: 600;}
.ssd-stat-grid-col { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.ssd-mini-stat { background: var(--ssd-box-bg); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; border: none; }
.ssd-mini-stat .lbl { font-size: 0.75rem; color: var(--ssd-text-muted); margin-bottom: 3px; font-weight: 600;}
.ssd-mini-stat .val { font-size: 1rem; font-weight: 700; color: var(--ssd-text); }
.text-orange { color: #f97316 !important; }
.ssd-modern-chart-card { background: var(--ssd-card); border-radius: 16px; padding: 25px; margin-bottom: 25px; border: none; box-shadow: none; }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }

/* 3 BADGES LAYOUT CSS */
.ssd-app-badges-widget { flex: 1; background: var(--ssd-card); border: none; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; z-index: 10; box-shadow: none;}
.ssd-badge-categories-container { display: flex; flex-direction: column; gap: 15px; }
.ssd-centered-badge-title { text-align: center; font-size: 0.85rem; color: var(--ssd-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 0; margin-bottom: 15px; font-weight: 700; display: block; width: 100%; }

.ssd-top-badges-row { display: flex; gap: 10px; width: 100%; margin-bottom: 5px; }
.ssd-top-badge-item { flex: 1; min-width: 0; background: var(--ssd-box-bg); border-radius: 16px; border: none; display: flex; flex-direction: column; align-items: center; padding: 15px 8px; cursor: pointer; transition: 0.2s; position: relative; justify-content: center; box-shadow: none;}
.ssd-top-badge-item:hover { background: var(--ssd-border); transform: translateY(-2px); }
.ssd-top-badge-item img { width: 55px; height: 55px; object-fit: contain; margin-bottom: 10px; filter: none; }
.ssd-top-badge-item .locked-placeholder { width: 55px; height: 55px; border-radius: 50%; background: var(--ssd-card); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--ssd-text-muted); margin-bottom: 10px; border: none; }
.ssd-top-badge-item .tb-name { color: var(--ssd-text); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1.1; word-wrap: break-word; width: 100%;}
.ssd-top-badge-item.unlocked { box-shadow: inset 0 0 0 1px var(--ssd-primary); }
.ssd-top-badge-item.locked { opacity: 0.6; }
.ssd-top-badge-item.locked img { filter: grayscale(100%) opacity(0.5); }

/* FLOATING ABSOLUTE DROPDOWN (Scroll Fix included) */
.ssd-bc-dropdown-content { position: absolute; top: 100%; left: 0; width: 100%; z-index: 1050; margin-top: 10px; background: var(--ssd-card); border: 1px solid var(--ssd-border); border-radius: 16px; padding: 15px; box-shadow: none; animation: slideDown 0.2s ease; box-sizing: border-box; max-height: 250px; overflow-y: auto; }
.ssd-bc-dropdown-content::-webkit-scrollbar { width: 4px; }
.ssd-bc-dropdown-content::-webkit-scrollbar-thumb { background: var(--ssd-border); border-radius: 4px; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.ssd-bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
.ssd-dropdown-item { background: var(--ssd-box-bg); padding: 12px 8px; border-radius: 12px; text-align: center; border: none; position: relative; transition: 0.2s; box-shadow: none;}
.ssd-dropdown-item img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 8px; filter: none; }
.ssd-dropdown-item .item-name { display: block; font-size: 0.6rem; color: var(--ssd-text-muted); font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }
.ssd-dropdown-item.earned { box-shadow: inset 0 0 0 1px var(--ssd-primary); }
.ssd-dropdown-item.earned .item-name { color: var(--ssd-text); }
.ssd-dropdown-item.not-earned { opacity: 0.5; }
.ssd-dropdown-item.not-earned img { filter: grayscale(100%) opacity(0.6); }
.item-lock { position: absolute; top: 4px; right: 4px; background: var(--ssd-card); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: var(--ssd-text-muted); border: none; }

/* --- BUILDING GRAPH STYLES --- */
.ssd-building-graph-canvas { height: 220px; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid var(--ssd-border); position: relative; margin-top: 15px; }
.ssd-graph-bar-wrap { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; margin: 0 4px; z-index: 2; }
.ssd-bar-seg { width: 100%; max-width: 35px; border-radius: 4px 4px 0 0; background: #f59e0b; transition: all 0.2s ease; cursor: pointer; }
.ssd-bar-seg:hover { transform: translateY(-2px); }
.ssd-bar-seg-blue { background: var(--ssd-primary); }
.ssd-bar-seg-green { background: #10b981; }
.ssd-graph-date-label { position: absolute; bottom: -22px; font-size: 0.65rem; color: var(--ssd-text-muted); font-weight: 600; white-space: nowrap; }
.ax-y-grid-line { position: absolute; width: 100%; border-bottom: 1px dashed var(--ssd-border); z-index: 1; left: 0; }
.ax-bar-time-lbl { position: absolute; font-size: 0.65rem; color: var(--ssd-text); font-weight: 600; white-space: nowrap; z-index: 5; transform: translateY(-100%); margin-bottom: 5px; }

/* --- Mobile Responsive Fixes --- */
@media (max-width: 768px) {
    .ssd-desktop-top-row { flex-direction: column; gap: 15px; }
    .ssd-stats-overview-card { flex-direction: row !important; padding: 15px !important; min-height: auto; }
    .ssd-stat-rank-col { flex: 0 0 32% !important; border-right: 1px dashed var(--ssd-border) !important; padding-right: 8px !important; border-bottom: none !important; }
    .ssd-rank-trophy { font-size: 1.8rem !important; margin-bottom: 4px !important; }
    .ssd-rank-info .val { font-size: 1.2rem !important; }
    .ssd-rank-info .lbl { font-size: 0.6rem !important; }
    .ssd-rank-info .sub-lbl { font-size: 0.6rem !important; padding: 1px 6px !important; }
    .ssd-stat-grid-col { gap: 8px !important; }
    .ssd-mini-stat { padding: 8px 10px !important; min-height: 50px; }
    .ssd-mini-stat .val { font-size: 0.85rem !important; }
    .ssd-mini-stat .lbl { font-size: 0.6rem !important; }
    .ssd-modern-chart-card { padding: 15px !important; }
    
    .ssd-app-badges-widget { padding: 15px !important; }
    .ssd-top-badges-row { gap: 8px; }
    .ssd-top-badge-item { padding: 10px 4px; border-radius: 12px; }
    .ssd-top-badge-item img { width: 40px; height: 40px; margin-bottom: 6px; }
    .ssd-top-badge-item .locked-placeholder { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 6px; }
    .ssd-top-badge-item .tb-name { font-size: 0.55rem; letter-spacing: 0; }
    
    .ssd-bc-dropdown-content { padding: 10px; border-radius: 12px; }
    .ssd-bc-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ssd-dropdown-item { padding: 10px 4px; }
    .ssd-dropdown-item img { width: 50px; height: 50px; margin-bottom: 4px; }
    .ssd-dropdown-item .item-name { font-size: 0.5rem; }
    .item-lock { width: 14px; height: 14px; font-size: 0.5rem; top: 4px; right: 4px; }

    /* Feed Edge-to-Edge Fix */
    .tutor-content-wrapper { padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden; }
    #pub-tab-home, #pub-tab-about, #pub-tab-classes { padding-left: 15px; padding-right: 15px; }
    #pub-tab-posts, #pub-tab-photos, #pub-tab-videos { width: 100%; margin: 0; padding: 0; }
    .ssd-feed-wrapper { max-width: 100% !important; }
    .ssd-post-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; padding-left: 20px !important; padding-right: 20px !important; }
    
    .ssd-building-graph-canvas { height: 180px; }
    .ssd-bar-seg { max-width: 25px; }
}

/* ====================================================
   LIGHT MODE OVERRIDES FOR DEFAULT PROFILE
   ==================================================== */
body.light-mode .ssd-stats-overview-card { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-stat-rank-col { border-right-color: var(--ssd-border); }
body.light-mode .ssd-rank-info .lbl { color: var(--ssd-text-muted); }
body.light-mode .ssd-rank-info .val { color: var(--ssd-text); }
body.light-mode .ssd-mini-stat { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-mini-stat .lbl { color: var(--ssd-text-muted); }
body.light-mode .ssd-mini-stat .val { color: var(--ssd-text); }

body.light-mode .ssd-modern-chart-card { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .section-title { color: var(--ssd-text); font-weight: 700; }

body.light-mode .ssd-app-badges-widget { background: var(--ssd-card); border: 1px solid var(--ssd-border); }

body.light-mode .ssd-centered-badge-title { color: var(--ssd-text-muted); }
body.light-mode .ssd-top-badge-item { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-top-badge-item:hover { background: var(--ssd-card); border-color: var(--ssd-primary); }
body.light-mode .ssd-top-badge-item.unlocked { background: var(--ssd-card); box-shadow: inset 0 0 0 1px var(--ssd-primary); border-color: transparent;}
body.light-mode .ssd-top-badge-item .tb-name { color: var(--ssd-text); }
body.light-mode .ssd-top-badge-item .locked-placeholder { background: var(--ssd-card); color: var(--ssd-text-muted); border: none; }

body.light-mode .ssd-bc-dropdown-content { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-dropdown-item { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-dropdown-item .item-name { color: var(--ssd-text-muted); }
body.light-mode .ssd-dropdown-item.earned .item-name { color: var(--ssd-text); font-weight: 700; }
body.light-mode .ssd-dropdown-item.earned { box-shadow: inset 0 0 0 1px var(--ssd-primary); border-color: transparent; }
body.light-mode .ssd-dropdown-item.not-earned { background: var(--ssd-card); }
body.light-mode .item-lock { background: var(--ssd-card); color: var(--ssd-text-muted); border: none; }

body.light-mode .ssd-building-graph-canvas { border-bottom-color: var(--ssd-border); }
body.light-mode .ax-y-grid-line { border-bottom-color: var(--ssd-border); }
body.light-mode .ssd-graph-date-label { color: var(--ssd-text-muted); }
body.light-mode .ax-bar-time-lbl { color: var(--ssd-text); }

/* =========================================================
       LINKED BANK ACCOUNTS (STRICT HORIZONTAL SCROLLING)
       ========================================================= */
    .ssd-payment-grid { 
        display: flex; 
        flex-wrap: nowrap !important; /* Forces items to stay in a single horizontal row */
        gap: 18px; 
        overflow-x: auto; /* Enables horizontal scrolling */
        padding-bottom: 15px; 
        width: 100%; 
        box-sizing: border-box; 
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--ssd-border) transparent;
    }

    /* Custom Scrollbar Styling */
    .ssd-payment-grid::-webkit-scrollbar { 
        height: 8px; 
    }
    .ssd-payment-grid::-webkit-scrollbar-track {
        background: transparent; 
    }
    .ssd-payment-grid::-webkit-scrollbar-thumb { 
        background: var(--ssd-border); 
        border-radius: 10px; 
    }
    .ssd-payment-grid::-webkit-scrollbar-thumb:hover { 
        background: var(--ssd-text-muted); 
    }
    
    .ssd-payment-card { 
        flex: 0 0 auto !important; /* Prevents cards from shrinking or wrapping */
        width: 320px; /* Fixed width */
        min-width: 320px;
        background: var(--ssd-card); 
        border: none; 
        border-radius: 20px; 
        padding: 25px; 
        display: flex; 
        flex-direction: column; 
        transition: all 0.2s ease; 
        box-shadow: none; 
        box-sizing: border-box; 
    }

.ssd-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55); /* පසුබිම මඳක් අඳුරු කිරීමට */
    backdrop-filter: blur(8px);       /* නවීන Glassmorphic පෙනුමක් ලබා දීමට */
    display: none;                   /* ආරම්භයේදී මින් සැඟවේ */
    justify-content: center;
    align-items: center;
    z-index: 999999;                 /* සියලුම දේට වඩා ඉහළින් තැබීමට */
}

/* ==========================================================================
   CART DRAWER & OVERLAY STYLES (REQUIRED FOR JS ANIMATIONS)
   ========================================================================== */

/* 1. අඳුරු පසුබිම (Background Overlay) */
#ssd-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999990;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#ssd-cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 2. Cart Drawer එක (පැත්තෙන් ඇදී එන කොටස) */
#ssd-cart-drawer {
    position: fixed;
    top: 0;
    right: -450px; /* ආරම්භයේදී තිරයෙන් පිටතට කර තැබීම */
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background-color: #1C2338; /* Dark Theme එකට ගැළපෙන වර්ණය */
    z-index: 999999;
    box-shadow: -5px 0 25px rgba(0,0,0,0.5);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* JS මඟින් .open එකතු කළ විට Cart එක ඇතුළට පැමිණීම */
#ssd-cart-drawer.open {
    right: 0;
}

/* 3. View Cart ලෙස වෙනස් වන බොත්තමේ පෙනුම */
.ssd-view-cart-action {
    background: #10b981 !important; /* කොළ පැහැය */
    border-color: #10b981 !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.ssd-view-cart-action:hover {
    background: #059669 !important;
    transform: translateY(-2px);
}

/* 4. Cart එක අතුළත Scroll වීම සඳහා */
.ssd-cart-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}
.ssd-cart-scroll-area::-webkit-scrollbar {
    width: 6px;
}
.ssd-cart-scroll-area::-webkit-scrollbar-thumb {
    background: #2d3b55;
    border-radius: 4px;
}

/* ==========================================================================
   MODERN CART DRAWER UI STYLES (FLAT MODERN BOX UI EDITION)
   ========================================================================== */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-bg: #151A28;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

/* 1. Cart Steps (පියවර මාරුවීම) */
.ssd-cart-step { display: none; height: 100%; flex-direction: column; }
.ssd-cart-step.active { display: flex; }

/* 2. Header කොටස */
.ssd-cart-header-modern { padding: 25px 25px 15px; border-bottom: 1px dashed var(--ssd-border); background: var(--ssd-card); }
.ssd-cart-header-top { display: flex; justify-content: space-between; align-items: center; }
.ssd-cart-header-top h3 { color: var(--ssd-text); margin: 0; font-size: 1.4rem; display: flex; align-items: center; gap: 10px; font-weight: 800; }
.ssd-cart-count-bubble { background: var(--ssd-primary); color: #ffffff; font-size: 0.85rem; padding: 2px 8px; border-radius: 20px; font-weight: bold; }
.ssd-close-cart-btn-modern { background: var(--ssd-box-bg); border: none; color: var(--ssd-text-muted); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.2s; box-shadow: none; }
.ssd-close-cart-btn-modern:hover { background: #ef4444; color: #fff; transform: rotate(90deg); }
.ssd-cart-subtitle { color: var(--ssd-text-muted); font-size: 0.9rem; margin: 5px 0 0 0; }
.ssd-back-to-cart-btn { background: transparent; border: none; color: var(--ssd-text-muted); cursor: pointer; font-size: 1rem; display: flex; align-items: center; gap: 8px; padding: 0; font-weight: 600; transition: 0.2s; }
.ssd-back-to-cart-btn:hover { color: var(--ssd-text); }

/* 3. Scroll Area (භාණ්ඩ ලැයිස්තුව) */
.ssd-cart-scroll-area { flex-grow: 1; overflow-y: auto; padding: 20px 25px; background: var(--ssd-card); }
.ssd-cart-scroll-area::-webkit-scrollbar { width: 5px; }
.ssd-cart-scroll-area::-webkit-scrollbar-thumb { background: var(--ssd-border); border-radius: 5px; }

/* 4. Empty State (Cart එක හිස්ව ඇතිවිට) */
.ssd-empty-state { text-align: center; padding: 40px 20px; color: var(--ssd-text-muted); }

/* 5. Seller Card & Items */
.ssd-seller-card { background: var(--ssd-bg); border-radius: 16px; padding: 20px; margin-bottom: 20px; border: none; box-shadow: none; }
.ssd-seller-header { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dashed var(--ssd-border); color: var(--ssd-text); font-weight: 700; }
.ssd-cart-items-list { display: flex; flex-direction: column; gap: 15px; }
.ssd-cart-item-modern { display: flex; gap: 12px; align-items: center; background: var(--ssd-box-bg); padding: 12px; border-radius: 12px; position: relative; border: none; transition: 0.2s; }
.ssd-cart-item-modern:hover { transform: translateX(4px); border-color: transparent; }
.ssd-item-oos { opacity: 0.6; border: 1px solid #ef4444; }
.ssd-cart-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: none; background: var(--ssd-card); }
.ssd-item-details { flex-grow: 1; }
.ssd-item-name { margin: 0 0 5px 0; font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: var(--ssd-text); }
.ssd-remove-icon { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; }
.ssd-remove-icon:hover { background: #ef4444; color: #fff; }

/* 6. Calculation Box (මිල ගණනය) */
.ssd-calculation-box { background: var(--ssd-box-bg); padding: 20px; border-radius: 16px; margin: 20px 0; border: none; }
.ssd-calculation-box .calc-row { display: flex; justify-content: space-between; font-size: 0.95rem; color: var(--ssd-text-muted); margin-bottom: 10px; font-weight: 600;}
.ssd-calculation-box .calc-row.total { font-size: 1.2rem; color: var(--ssd-text); font-weight: 800; margin-bottom: 0; padding-top: 15px; border-top: 1px dashed var(--ssd-border); margin-top: 15px; }

/* 7. Buttons (බොත්තම්) */
.ssd-checkout-btn-modern { width: 100%; background: var(--ssd-primary); color: #fff; border: none; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 8px; box-shadow: none; }
.ssd-checkout-btn-modern:hover:not(:disabled) { background: #2563eb; transform: translateY(-2px); }
.ssd-checkout-btn-modern:disabled { cursor: not-allowed; opacity: 0.5; }
.ssd-btn-secondary { background: var(--ssd-box-bg); color: var(--ssd-text); border: none; padding: 12px 20px; border-radius: 12px; cursor: pointer; transition: 0.2s; font-weight: 600;}
.ssd-btn-secondary:hover { background: var(--ssd-border); }

/* 8. Checkout Form (පෝරමය) */
.ssd-checkout-section { margin-bottom: 25px; }
.ssd-section-title { color: var(--ssd-text); font-size: 1.15rem; font-weight: 800; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 1px dashed var(--ssd-border); }
.ssd-input-group { margin-bottom: 18px; text-align: left; }
.ssd-input-group label { display: block; color: var(--ssd-text-muted); font-size: 0.85rem; margin-bottom: 8px; font-weight: 700; }
.ssd-input-group input, .ssd-input-group textarea { width: 100%; background: var(--ssd-box-bg); border: none; color: var(--ssd-text); padding: 14px 16px; border-radius: 12px; outline: none; box-sizing: border-box; transition: 0.2s; font-family: inherit; font-size: 1rem; font-weight: 600;}
.ssd-input-group input:focus, .ssd-input-group textarea:focus { box-shadow: inset 0 0 0 1px var(--ssd-primary); }
.ssd-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* 9. Pay Button & Footer */
.ssd-drawer-footer-sticky { position: sticky; bottom: 0; background: var(--ssd-card); padding: 20px 25px; border-top: 1px dashed var(--ssd-border); z-index: 10; }
.truck-button { width: 100%; background: #10b981; color: #fff; border: none; padding: 14px; border-radius: 12px; font-weight: 800; font-size: 1.05rem; cursor: pointer; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; transition: 0.2s; box-shadow: none;}
.truck-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); }
.truck-button:disabled { background: var(--ssd-box-bg); color: var(--ssd-text-muted); cursor: not-allowed; }
.truck-button .success, .truck-button .truck { display: none; }

/* ==========================================================================
   LIGHT MODE SUPPORT (OPTIONAL BUT RECOMMENDED)
   ========================================================================== */
body.light-mode .ssd-cart-header-modern, body.light-mode .ssd-cart-scroll-area, body.light-mode .ssd-drawer-footer-sticky { background: var(--ssd-card); }
body.light-mode .ssd-seller-card { background: var(--ssd-bg); }
body.light-mode .ssd-cart-item-modern { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-cart-item-modern:hover { background: var(--ssd-box-bg); box-shadow: inset 0 0 0 1px var(--ssd-primary); border-color: transparent; }
body.light-mode .ssd-calculation-box { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-input-group input, body.light-mode .ssd-input-group textarea { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); color: var(--ssd-text); }
body.light-mode .ssd-btn-secondary { background: var(--ssd-box-bg); color: var(--ssd-text); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-btn-secondary:hover { background: var(--ssd-border); }
body.light-mode .ssd-close-cart-btn-modern { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); color: var(--ssd-text-muted); }

/* ==========================================================================
   CLASS SINGLE VIEW: 16:9 IMAGE BOX & DESKTOP FLOATING BAR LOGIC
   ========================================================================== */

/* 1. Desktop සහ Mobile Image Box එක හරියටම 16:9 ලෙස සැකසීම */
div.ssd-dsk-thumb-box, 
div.ssd-hero-media-frame {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important; /* හරියටම 16:9 අනුපාතය */
    height: auto !important;
    min-height: 0 !important;
    background-color: #0f172a !important; 
    background-image: none !important; 
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    display: block !important;
}

/* 2. පින්තූරය හෝ වීඩියෝව කොටුව සම්පූර්ණයෙන්ම පිරී යන සේ (Cover) සැකසීම */
div.ssd-dsk-thumb-box img,
div.ssd-hero-media-frame img,
div.ssd-dsk-thumb-box iframe,
div.ssd-hero-media-frame iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Full View */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    z-index: 5 !important;
    filter: none !important; 
    opacity: 1 !important;
}

/* ====================================================================
   SMART STUDENT DASHBOARD - BOOKSTORE TAB FILTER & SEARCH BAR REFRESH
   ==================================================================== */

/* 1. Bookstore Search Wrapper & Input Custom Fade Design */
.ssd-main-content .ssd-store-search-wrap,
.ssd-main-content .ssd-bookstore-search-box {
    position: relative !important;
    flex: 1;
    min-width: 250px;
}

/* Search Icon එක අකුරු මතට කැපීම වැළැක්වීම */
.ssd-main-content .ssd-store-search-wrap i,
.ssd-main-content .ssd-bookstore-search-box i,
.ssd-main-content .ssd-store-search-wrap .fa-search {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    z-index: 5;
}

/* Custom Fade Input Box */
.ssd-main-content .ssd-store-search-input,
.ssd-main-content .ssd-bookstore-search-input,
.ssd-main-content #ssd-store-search {
    background-color: rgba(34, 45, 68, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 30px !important; /* Pill Shape */
    padding: 12px 20px 12px 45px !important; /* වමෙන් Icon එකට ඉඩ තැබීම */
    font-size: 14px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

/* Click කළ විට පෙනුම (Focus State) */
.ssd-main-content .ssd-store-search-input:focus,
.ssd-main-content .ssd-bookstore-search-input:focus,
.ssd-main-content #ssd-store-search:focus {
    border-color: #3b82f6 !important;
    background-color: rgba(34, 45, 68, 0.9) !important;
}

/* 2. Bookstore Dropdown Filters & Select Boxes */
.ssd-main-content .ssd-store-filter-select,
.ssd-main-content .ssd-store-filters select,
.ssd-main-content .ssd-bookstore-filter {
    background-color: rgba(34, 45, 68, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 30px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

.ssd-main-content .ssd-store-filter-select:focus,
.ssd-main-content .ssd-store-filters select:focus {
    border-color: #3b82f6 !important;
    background-color: rgba(34, 45, 68, 0.9) !important;
}

/* 3. Filter Container Spacing & Flexbox Setup */
.ssd-main-content .ssd-store-filter-container,
.ssd-main-content .ssd-store-filters,
.ssd-main-content .ssd-store-controls {
    margin-bottom: 35px !important;
    padding-bottom: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    align-items: center !important;
}

/* 4. Mobile UI Viewport Optimization (Screen එකෙන් පිටතට යෑම වැළැක්වීම) */
@media (max-width: 768px) {
    .ssd-main-content .ssd-store-filter-container,
    .ssd-main-content .ssd-store-filters,
    .ssd-main-content .ssd-store-controls {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        margin: 0 0 25px 0 !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }
    
    .ssd-main-content .ssd-store-search-wrap,
    .ssd-main-content .ssd-bookstore-search-box,
    .ssd-main-content .ssd-store-search-input,
    .ssd-main-content .ssd-bookstore-search-input,
    .ssd-main-content #ssd-store-search,
    .ssd-main-content .ssd-store-filter-select,
    .ssd-main-content .ssd-store-filters select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   HERO BANNER (TOP BANNER) ROUNDED CORNERS
   ========================================================= */
.ssd-hero-join-section {
    border-radius: 20px !important; /* කොනවල් රවුම් කිරීමේ ප්‍රමාණය (අවශ්‍ය නම් 16px හෝ 24px ලෙස වෙනස් කරන්න) */
    overflow: hidden !important; /* පසුබිම් රූපය රවුමෙන් පිටතට යාම වැළැක්වීම */
}

/* =========================================================
   WORKPLACE TAB: HORIZONTAL WIDGETS FOR DESKTOP
   ========================================================= */

/* Desktop තිර සඳහා පමණක් තිරස් අතට හැරවීම (min-width: 992px) */
@media (min-width: 992px) {
    .ssd-workplace-desktop-row {
        display: flex !important;
        gap: 20px !important; /* කොටස් දෙක අතර පරතරය */
        align-items: stretch !important; /* කොටස් දෙකේම උස සමාන කිරීම */
        margin-bottom: 25px !important;
    }

    /* කොටස් දෙක සමානව (50% - 50%) බෙදීම */
    .ssd-workplace-desktop-row > div {
        flex: 1 !important;
        min-width: 0 !important; /* කුඩා තිරවලදී Responsive දෝෂ මඟහරවා ගැනීමට */
        margin-bottom: 0 !important; /* Flex යොදා ඇති බැවින් යට පරතරය ඉවත් කිරීම */
    }
}

/* ජංගම දුරකථන සහ කුඩා තිර සඳහා පෙර පරිදිම එක මත එක (Vertical) වැටීමට සැලැස්වීම */
@media (max-width: 991px) {
    .ssd-workplace-desktop-row {
        display: block !important;
    }
    
    .ssd-workplace-desktop-row > div {
        margin-bottom: 20px !important;
        width: 100% !important;
    }
}

/* =========================================================
   PUBLIC PROFILE FIXES (BUTTONS & LIGHT MODE TEXT)
   ========================================================= */

/* 1. Dark Mode සහ Light Mode දෙකේදීම බොත්තම් සම්පූර්ණයෙන් රවුම් කිරීම (Pill Shape) */
.tutor-action-btn.ssd-btn-message,
.tutor-action-btn.ssd-btn-follow {
    border-radius: 30px !important;
    padding: 8px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
}

/* 2. Light Mode එකේදී Follow Count ඉලක්කම් තද පැහැ (Dark) කිරීම */
body.light-mode .tutor-follow-stats strong {
    color: var(--ssd-text) !important; 
}

/* 3. Light Mode එකේදී Follow Labels (අකුරු) සහ තිත ළා අළු පැහැ කිරීම */
body.light-mode .tutor-follow-stats span,
body.light-mode .tutor-follow-stats .dot-separator {
    color: var(--ssd-text-muted) !important;
}

/* 4. Light Mode එකේදී Bio එක (විස්තරය) තද පැහැ (Dark) කිරීම */
body.light-mode .tutor-bio-short {
    color: var(--ssd-text) !important;
    font-weight: 500 !important;
}

/* =========================================================
   STUDY TIME TAB - GRID BOXES & PREMIUM LOCK UI
   ========================================================= */

/* Grid Layout */
.ssd-study-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

/* Individual Grid Box */
.ssd-study-box {
    background-color: #222d44; /* Custom Dark Color */
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.ssd-study-box:hover {
    transform: translateY(-3px);
    background-color: #2a3754;
}

.ssd-study-day {
    font-size: 14px;
    font-weight: 600;
    color: #007bff; /* Accent color */
    text-transform: uppercase;
    margin-bottom: 4px;
}

.ssd-study-date {
    font-size: 13px;
    color: #a0aec0;
    margin-bottom: 12px;
}

.ssd-study-hours-badge {
    background-color: #1c2338;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    width: 100%;
}

/* Lock Container & Button */
.ssd-locked-tab-container {
    background-color: #1c2338;
    border-radius: 12px;
    padding: 40px 20px;
}

.btn-get-smart-student {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #fff !important;
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 30px;
    border: none;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.btn-get-smart-student:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

/* =========================================================
   STUDY TIME TAB - GRID BOXES
   ========================================================= */
.ssd-study-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}
.ssd-study-box {
    background-color: var(--ssd-box-bg);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.ssd-study-box:hover {
    transform: translateY(-3px);
    background-color: var(--ssd-card);
}
.ssd-study-day {
    font-size: 14px;
    font-weight: 600;
    color: var(--ssd-primary);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ssd-study-date {
    font-size: 13px;
    color: var(--ssd-text-muted);
    margin-bottom: 12px;
}
.ssd-study-hours-badge {
    background-color: var(--ssd-card);
    color: var(--ssd-text);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    width: 100%;
}

/* =========================================================
   FULL PAGE SKELETON LOADING UI (MATCHING REAL LAYOUT)
   ========================================================= */
@keyframes skeleton-pulse {
    0% { background-color: var(--ssd-box-bg); opacity: 1; }
    50% { background-color: var(--ssd-card); opacity: 0.6; }
    100% { background-color: var(--ssd-box-bg); opacity: 1; }
}

.ssd-skeleton-wrapper {
    width: 100%;
}

.ssd-skeleton-box {
    animation: skeleton-pulse 1.5s infinite ease-in-out;
    background-color: var(--ssd-box-bg);
}

/* Top Row Layout for Skeleton */
.ssd-skeleton-desktop-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}
.ssd-skeleton-desktop-row > div {
    flex: 1;
}

/* 6 Stats Boxes Layout for Skeleton */
.ssd-skeleton-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

/* Bottom Exam Cards Layout */
.ssd-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.ssd-skeleton-card {
    height: 220px;
    border-radius: 12px;
}

/* Responsive Adjustments for Skeleton */
@media (max-width: 1200px) {
    .ssd-skeleton-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .ssd-skeleton-desktop-row {
        display: block;
    }
    .ssd-skeleton-desktop-row > div {
        width: 100%;
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .ssd-skeleton-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   FLAT MODERN UI VARIABLES & BASE
   ========================================================= */
:root {
    --ssd-card: #1C2338;
    --ssd-box-bg: #222d44;
    --ssd-bg: #151A28;
    --ssd-border: #2d3b55;
    --ssd-primary: #3b82f6;
    --ssd-text: #f1f5f9;
    --ssd-text-muted: #94a3b8;
}

#ssd-follows-page { background: var(--ssd-bg); min-height: 100%; color: var(--ssd-text); font-family: 'Inter', sans-serif;}

/* Header */
.tutor-header { background: var(--ssd-card); padding: 15px 20px; border-bottom: 1px dashed var(--ssd-border); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; }
.tutor-header-left { display: flex; align-items: center; gap: 15px; }
.ssd-back-btn { background: var(--ssd-box-bg); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; color: var(--ssd-text-muted); font-size: 1rem; cursor: pointer; transition: 0.2s;}
.ssd-back-btn:hover { background: var(--ssd-border); color: var(--ssd-text); transform: scale(1.05);}
.tutor-header-info h2 { margin: 0; font-size: 1.25rem; color: var(--ssd-text); font-weight: 800;}
.tutor-header-username { font-size: 0.85rem; color: var(--ssd-text-muted); font-weight: 600;}

/* Tabs Navigation */
.modern-center-tabs { display: flex; border-bottom: 1px dashed var(--ssd-border); background: var(--ssd-card); }
.tutor-tab-btn { flex: 1; background: none; border: none; padding: 16px; color: var(--ssd-text-muted); font-size: 0.95rem; font-weight: 700; cursor: pointer; border-bottom: 2px solid transparent; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tutor-tab-btn:hover { color: var(--ssd-text); }
.tutor-tab-btn.active { color: var(--ssd-primary); border-bottom-color: var(--ssd-primary); }
.tab-count { background: var(--ssd-box-bg); color: var(--ssd-text-muted); padding: 2px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 800;}
.tutor-tab-btn.active .tab-count { background: rgba(59, 130, 246, 0.1); color: var(--ssd-primary); }

/* Content Area */
.tutor-content-wrapper { padding: 25px 20px; }
.ssd-followers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

/* Flat User Card */
.ssd-user-card { background: var(--ssd-box-bg); border: none; padding: 18px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; transition: 0.2s; }
.ssd-user-card:hover { transform: translateY(-3px); background: var(--ssd-border); }
.ssd-uc-link { display: flex; align-items: center; gap: 15px; text-decoration: none; flex-grow: 1; overflow: hidden; }
.ssd-uc-avatar { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; background: var(--ssd-card); padding: 2px;}
.ssd-uc-info { display: flex; flex-direction: column; overflow: hidden; }
.ssd-uc-name { color: var(--ssd-text); font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;}
.ssd-uc-username { color: var(--ssd-text-muted); font-size: 0.85rem; font-weight: 500;}

/* Buttons */
.ssd-follow-btn { background: var(--ssd-primary); color: white; border: none; padding: 10px 20px; border-radius: 12px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: 0.2s; flex-shrink: 0; min-width: 100px; text-align: center; }
.ssd-follow-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.ssd-follow-btn.following { background: var(--ssd-card); color: var(--ssd-text); box-shadow: inset 0 0 0 1px var(--ssd-border); }
.ssd-follow-btn.following:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; box-shadow: inset 0 0 0 1px #ef4444; }

/* Empty States */
.ssd-empty-state { text-align: center; padding: 60px 20px; color: var(--ssd-text-muted); background: var(--ssd-card); border-radius: 20px; border: 1px dashed var(--ssd-border);}
.ssd-empty-state i { font-size: 3.5rem; margin-bottom: 15px; opacity: 0.5; }
.ssd-empty-state p { font-weight: 600; font-size: 1rem; margin: 0;}

/* ====================================================
   LIGHT MODE OVERRIDES
   ==================================================== */
body.light-mode #ssd-follows-page { background: var(--ssd-bg); color: var(--ssd-text); }
body.light-mode .tutor-header { background: var(--ssd-card); border-bottom: 1px dashed var(--ssd-border); }
body.light-mode .tutor-header-info h2 { color: var(--ssd-text); }
body.light-mode .tutor-header-username { color: var(--ssd-text-muted); }
body.light-mode .ssd-back-btn { background: var(--ssd-box-bg); color: var(--ssd-text-muted); }
body.light-mode .ssd-back-btn:hover { background: var(--ssd-border); color: var(--ssd-text); }

body.light-mode .modern-center-tabs { background: var(--ssd-card); border-bottom: 1px dashed var(--ssd-border); }
body.light-mode .tutor-tab-btn { color: var(--ssd-text-muted); }
body.light-mode .tutor-tab-btn:hover { color: var(--ssd-text); }
body.light-mode .tutor-tab-btn.active { color: var(--ssd-primary); }
body.light-mode .tab-count { background: var(--ssd-box-bg); color: var(--ssd-text-muted); }
body.light-mode .tutor-tab-btn.active .tab-count { background: rgba(59, 130, 246, 0.1); color: var(--ssd-primary); }

body.light-mode .ssd-user-card { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-user-card:hover { background: var(--ssd-box-bg); border-color: var(--ssd-primary); }
body.light-mode .ssd-uc-name { color: var(--ssd-text); }
body.light-mode .ssd-uc-username { color: var(--ssd-text-muted); }
body.light-mode .ssd-uc-avatar { border-color: var(--ssd-border); background: var(--ssd-box-bg); }

body.light-mode .ssd-follow-btn { background: var(--ssd-primary); color: white; }
body.light-mode .ssd-follow-btn.following { background: var(--ssd-box-bg); color: var(--ssd-text); box-shadow: inset 0 0 0 1px var(--ssd-border); }
body.light-mode .ssd-follow-btn.following:hover { background: #fee2e2; color: #dc2626; box-shadow: inset 0 0 0 1px #ef4444; }
body.light-mode .ssd-empty-state { background: var(--ssd-card); border: 1px dashed var(--ssd-border); color: var(--ssd-text-muted); }


/* =========================================================
   EXAM SKELETON LOADING (SHIMMER EFFECT)
   ========================================================= */

/* Shimmer Animation Keyframes */
@keyframes ssdShimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

/* Skeleton Base Animation Class */
.ssd-skeleton-anim {
    animation: ssdShimmer 1.5s infinite linear !important;
    background: linear-gradient(to right, var(--ssd-surface, #2A344A) 8%, var(--ssd-border, #364259) 18%, var(--ssd-surface, #2A344A) 33%) !important;
    background-size: 800px 104px !important;
    border-radius: 4px !important;
}

/* Light Mode Support for Skeleton */
body.light-mode .ssd-skeleton-anim {
    background: linear-gradient(to right, #e2e8f0 8%, #cbd5e1 18%, #e2e8f0 33%) !important;
}

/* Skeleton Box Layout */
.ssd-skeleton-box {
    pointer-events: none !important;
    box-shadow: none !important;
}

/* Thumbnail Skeleton */
.ssd-skeleton-thumb {
    height: 180px !important;
    width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
}

/* Text and Buttons Skeleton */
.ssd-skeleton-text {
    height: 16px !important;
    margin-bottom: 10px !important;
}

.ssd-skeleton-meta {
    height: 12px !important;
    margin-bottom: 8px !important;
}

.ssd-skeleton-btn {
    height: 35px !important;
    width: 100% !important;
    border-radius: 6px !important;
    margin-top: 10px !important;
}

/* Mobile Adjustments for Skeleton */
@media (max-width: 768px) {
    .ssd-skeleton-thumb {
        height: 110px !important; /* Mobile thumb height */
        border-radius: 8px !important;
    }
}

/* ====================================================
   EXAM TAB - MOBILE UI FIX (ROW LAYOUT LIKE ALL CLASSES)
   ==================================================== */
@media (max-width: 768px) {
    /* 1. ප්‍රධාන කොටුව තිරස් අතට (Row) හැරවීම */
    .ssd-eh-card { 
        flex-direction: row !important; 
        height: auto !important; 
        min-height: 130px !important; 
        align-items: stretch !important; 
        border-radius: 12px !important; 
    }
    
    /* 2. වම් පස පින්තූරයේ ප්‍රමාණය සීමා කිරීම */
    .ssd-eh-card-img { 
        width: 130px !important; 
        height: auto !important; 
        flex-shrink: 0 !important; 
        border-bottom: none !important; 
        border-right: 1px solid var(--ssd-border) !important;
        aspect-ratio: auto !important;
    }

    /* 3. දකුණු පස විස්තර කොටස සැකසීම */
    .ssd-eh-card-body { 
        padding: 12px !important; 
        flex: 1 !important; 
        display: flex !important; 
        flex-direction: column !important; 
        justify-content: center !important; 
        min-width: 0 !important; /* දිගු වචන කොටුවෙන් පිටතට යාම වැළැක්වීම */
    }
    
    /* 4. අකුරු වල ප්‍රමාණය සහ පරතරය All Classes ආකාරයටම සැකසීම */
    .ssd-eh-card-title {
        font-size: 0.95rem !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    .ssd-eh-card-meta {
        margin-bottom: 6px !important;
        flex-wrap: wrap !important;
        font-size: 0.75rem !important;
        gap: 8px !important;
    }

    .ssd-eh-card-grade {
        font-size: 0.75rem !important;
        margin-bottom: 10px !important;
    }

    /* 5. පින්තූරය මත ඇති (MCQ/ESSAY) Badge එකේ පිහිටීම නිවැරදි කිරීම */
    .ssd-eh-badge-type {
        top: 6px !important;
        left: 6px !important;
        right: auto !important;
        font-size: 0.6rem !important;
        padding: 3px 6px !important;
    }
    
    /* 6. Button එකේ ප්‍රමාණය සැකසීම */
    .ssd-eh-card-footer {
        padding-top: 8px !important;
        margin-top: auto !important;
        border-top: none !important;
    }
    
    .ssd-eh-btn-view {
        padding: 8px !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
    }
}

/* ====================================================
   1. INITIAL HIDE UTILITY (REAL BOXES HIDING)
   ==================================================== */
/* පිටුව ලෝඩ් වන විට Real Boxes සහ Filters සැඟවීමට මෙය භාවිතා වේ.
   JS මගින් Load වූ පසු මෙම Class එක ඉවත් කරනු ඇත. */
.ssd-layout-hide {
    display: none !important;
}

/* ====================================================
   2. EXAM CENTER SKELETON LOADING UI (SHIMMER EFFECT)
   ==================================================== */
.ssd-exam-skeleton-wrapper {
    width: 100%;
    display: block; 
}

.ssd-skel-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.ssd-skel-search {
    flex: 1;
    min-width: 250px;
    height: 48px;
    border-radius: 12px;
}

.ssd-skel-filter-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.ssd-skel-select {
    min-width: 170px;
    height: 48px;
    border-radius: 12px;
}

/* Desktop Grid: 4 Boxes Per Row */
.ssd-skel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
}

.ssd-skel-card {
    background: var(--ssd-card, #1C2338);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: none;
}

.ssd-skel-img {
    height: 130px;
    width: 100%;
}

.ssd-skel-body {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ssd-skel-meta { height: 12px; width: 60%; border-radius: 6px; }
.ssd-skel-title { height: 16px; width: 90%; border-radius: 6px; }
.ssd-skel-title.short { width: 50%; }
.ssd-skel-btn { height: 38px; width: 100%; border-radius: 10px; margin-top: auto; }

/* 🌟 Dark Mode: Shimmer Animation Base 🌟 */
.ssd-skel-search, 
.ssd-skel-select, 
.ssd-skel-img, 
.ssd-skel-meta, 
.ssd-skel-title, 
.ssd-skel-btn {
    background: #222d44; /* Dark Box Color */
    background-image: linear-gradient(90deg, #222d44 0px, #2d3b55 40px, #222d44 80px);
    background-size: 200% 100%;
    animation: ssdExamShimmer 1.5s infinite linear;
}

@keyframes ssdExamShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ====================================================
   3. MOBILE RESPONSIVE FOR SKELETON (ROW-REVERSE LAYOUT)
   ==================================================== */
@media (max-width: 768px) {
    .ssd-skel-filters { 
        flex-direction: column; 
        gap: 10px; 
        margin-bottom: 20px;
    }
    .ssd-skel-search { width: 100%; }
    .ssd-skel-filter-group { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        width: 100%; 
        gap: 10px; 
    }
    .ssd-skel-select { min-width: auto; width: 100%; }
    
    .ssd-skel-grid { grid-template-columns: 1fr; gap: 12px; }
    
    /* ජංගම දුරකථනයේදී Thumbnail එක දකුණටත් (Right) විස්තර වමටත් (Left) */
    .ssd-skel-card { 
        flex-direction: row-reverse !important; 
        height: auto !important; 
        min-height: 130px !important;
        align-items: stretch !important;
    }
    .ssd-skel-img { 
        width: 130px !important; 
        height: auto !important; 
        flex-shrink: 0 !important;
        border-left: 1px solid rgba(255,255,255,0.05) !important; /* අඳුරු මාදියේදී වෙන් කිරීමට */
        border-right: none !important;
    }
    .ssd-skel-body { justify-content: center !important; }
}

/* ====================================================
   4. LIGHT MODE OVERRIDES (SKELETON & MOBILE UI)
   ==================================================== */
body.light-mode .ssd-skel-search, 
body.light-mode .ssd-skel-select, 
body.light-mode .ssd-skel-img, 
body.light-mode .ssd-skel-meta, 
body.light-mode .ssd-skel-title, 
body.light-mode .ssd-skel-btn {
    background: #e2e8f0;
    background-image: linear-gradient(90deg, #e2e8f0 0px, #f1f5f9 40px, #e2e8f0 80px);
}

body.light-mode .ssd-skel-card { 
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
}

@media (max-width: 768px) {
    /* Light Mode එකේදී පින්තූරය දකුණු පස ඇතිවිට Border එක වම් පසට දැමීම */
    body.light-mode .ssd-skel-img { 
        border-left: 1px solid #e2e8f0 !important; 
        border-right: none !important;
    }
}

/* ====================================================
   SHARE POPUP OVERLAY FIX (Z-INDEX ISSUE)
   ==================================================== */
   
/* අඳුරු පටලය (Overlay) පසුපසට යැවීම */
.ssd-share-overlay {
    z-index: 99998 !important; 
}

/* Share Popup එක (Sidebar) සම්පූර්ණයෙන්ම ඉදිරියට (උඩට) ගැනීම */
.ssd-share-sidebar {
    z-index: 99999 !important; 
}

/* ====================================================
   ALL CLASSES TAB - SEARCH BAR FIX (Modern Box UI & Icon Overlap Fix)
   ==================================================== */

.ssd-search-box {
    position: relative !important;
    flex-grow: 2 !important;
    min-width: 250px !important;
    display: flex !important;
    align-items: center !important;
}

/* 1. අයිකනය (Search Icon) නිවැරදිව ස්ථානගත කිරීම */
.ssd-search-box i.fa-search {
    position: absolute !important;
    left: 18px !important; /* වම් පසින් නිවැරදි ඉඩ තැබීම */
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--ssd-text-muted, #8b98b0) !important;
    font-size: 15px !important;
    pointer-events: none !important; /* අයිකනය මත ක්ලික් වුවත් Search Box එක වැඩ කිරීම සඳහා */
    z-index: 10 !important;
}

/* 2. Search Bar එක Modern Fade Box ආකාරයට (Filter Boxes මෙන්) සැකසීම */
.ssd-search-box input#ssd-filter-search {
    width: 100% !important;
    height: 48px !important; /* අනෙක් Dropdown වල උසට සමාන කිරීම */
    padding: 0 20px 0 45px !important; /* අයිකනය සඳහා වම් පසින් 45px ක ඉඩක් (Padding) තැබීම */
    background: var(--ssd-box-bg, #222d44) !important; /* Dark Fade Theme Background */
    border: none !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    color: var(--ssd-text, #ffffff) !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important; 
    transition: all 0.3s ease !important;
}

/* 3. Search Bar එක Focus වූ (Click කළ) විට වර්ණය වෙනස් වීම */
.ssd-search-box input#ssd-filter-search:focus {
    box-shadow: inset 0 0 0 1px var(--ssd-primary, #3b82f6) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* 4. Light Mode අනුකූලතාවය */
body.light-mode .ssd-search-box input#ssd-filter-search {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .ssd-search-box input#ssd-filter-search:focus {
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px #3b82f6 !important;
}

/* ====================================================================
   SMART STUDENT DASHBOARD - SCOPED CUSTOM UI UPDATES (EXAMS & CLASSES ONLY)
   ==================================================================== */

/* 1. Desktop & Tablet Grid Layout System (Scoped to Dashboard Content) */
.ssd-main-content .ssd-responsive-grid,
.ssd-main-content .ssd-grid-container,
.ssd-main-content .ssd-classes-grid,
.ssd-main-content .ssd-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    align-items: stretch !important;
}

@media (max-width: 1200px) {
    .ssd-main-content .ssd-responsive-grid, 
    .ssd-main-content .ssd-grid-container, 
    .ssd-main-content .ssd-classes-grid, 
    .ssd-main-content .ssd-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 900px) {
    .ssd-main-content .ssd-responsive-grid, 
    .ssd-main-content .ssd-grid-container, 
    .ssd-main-content .ssd-classes-grid, 
    .ssd-main-content .ssd-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .ssd-main-content .ssd-responsive-grid, 
    .ssd-main-content .ssd-grid-container, 
    .ssd-main-content .ssd-classes-grid, 
    .ssd-main-content .ssd-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 2. Premium Smart Class Card - Fade Modern Refresh (COLORS FIXED) */
.ssd-main-content .smart-card-premium {
    border: none !important;
    box-shadow: none !important;
    /* මෙතැන තිබූ #222d44 ඉවත් කර සාමාන්‍ය පන්ති වල වර්ණය වන #1C2338 යොදා ඇත */
    background-color: var(--ssd-card, #1C2338) !important; 
    border-radius: 12px !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease !important;
}
.ssd-main-content .smart-card-premium:hover {
    transform: translateY(-4px) !important;
    box-shadow: inset 0 0 0 1px var(--ssd-primary, #3b82f6) !important; /* Hover effect */
}

/* Smart Class Button Color Fix (සාමාන්‍ය පන්තිවල බොත්තම් වර්ණයටම හැරවීම) */
.ssd-main-content .smart-card-premium .ssd-pro-class-btn,
.ssd-main-content .smart-card-premium .ssd-share-icon-btn,
.ssd-main-content .smart-card-premium .ssd-action-btn {
    background-color: var(--ssd-box-bg, #222d44) !important;
    color: var(--ssd-text, #f1f5f9) !important;
    border: none !important;
    box-shadow: none !important;
}
.ssd-main-content .smart-card-premium .ssd-pro-class-btn:hover,
.ssd-main-content .smart-card-premium .ssd-share-icon-btn:hover,
.ssd-main-content .smart-card-premium .ssd-action-btn:hover {
    background-color: var(--ssd-border, #2d3b55) !important;
    color: #ffffff !important;
}

/* 4. Filter & Custom Fade Input Fields (Pill Shape) */
.ssd-main-content .ssd-search-input, 
.ssd-main-content select.ssd-filter-select,
.ssd-main-content .ssd-filter-bar input {
    background-color: rgba(34, 45, 68, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 30px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    outline: none !important;
}
.ssd-main-content .ssd-search-input:focus, 
.ssd-main-content select.ssd-filter-select:focus,
.ssd-main-content .ssd-filter-bar input:focus {
    border-color: #3b82f6 !important;
    background-color: rgba(34, 45, 68, 0.9) !important;
}

/* 5. Live Search Icon Realignment Fix */
.ssd-main-content .ssd-search-wrapper {
    position: relative !important;
}
.ssd-main-content .ssd-search-wrapper i,
.ssd-main-content .ssd-search-wrapper .fa-search {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    z-index: 5;
}
.ssd-main-content .ssd-search-input {
    padding-left: 45px !important;
}

/* 6. Mobile Viewport Optimization for Controls */
@media (max-width: 768px) {
    .ssd-main-content .ssd-filter-container,
    .ssd-main-content .ssd-filter-bar,
    .ssd-main-content .ssd-controls-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        margin: 0 0 25px 0 !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }
    .ssd-main-content .ssd-search-wrapper,
    .ssd-main-content .ssd-search-input,
    .ssd-main-content select.ssd-filter-select,
    .ssd-main-content .ssd-filter-bar input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 7. STRICTLY SCOPED MOBILE UI LIST VIEW (EXAMS AND ALL CLASSES ONLY) */
@media (max-width: 768px) {
    /* Target only Dashboard Exam and Class item wrappers */
    .ssd-main-content .ssd-exam-card,
    .ssd-main-content .ssd-exam-item,
    .ssd-main-content .exam-card-wrapper,
    .ssd-main-content .ssd-class-card,
    .ssd-main-content .ssd-card,
    .ssd-main-content .class-card-wrapper {
        display: flex !important;
        flex-direction: row !important; 
        align-items: stretch !important; /* Align properly */
        padding: 12px !important;
        gap: 15px !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Target specific image containers inside dashboard grid */
    .ssd-main-content .ssd-exam-card img,
    .ssd-main-content .ssd-exam-thumbnail img,
    .ssd-main-content .ssd-exam-item img,
    .ssd-main-content .ssd-exam-thumbnail,
    .ssd-main-content .ssd-class-card img,
    .ssd-main-content .ssd-class-thumbnail img,
    .ssd-main-content .ssd-class-card .card-img-top,
    .ssd-main-content .ssd-class-thumbnail {
        width: 100px !important; 
        height: auto !important;
        min-width: 100px !important;
        max-width: 100px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Content Area Fixes */
    .ssd-main-content .ssd-exam-card-content,
    .ssd-main-content .ssd-exam-details,
    .ssd-main-content .ssd-exam-info,
    .ssd-main-content .ssd-class-card-content,
    .ssd-main-content .ssd-class-details,
    .ssd-main-content .ssd-class-info,
    .ssd-main-content .ssd-class-card .card-body,
    .ssd-main-content .ssd-grid-container .card-body {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        width: calc(100% - 115px) !important;
        text-align: left !important;
    }

    /* Metadata & Headings adjustment */
    .ssd-main-content .ssd-exam-card h3, 
    .ssd-main-content .ssd-class-card h3,
    .ssd-main-content .card-title, 
    .ssd-main-content .class-title {
        font-size: 14px !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.3 !important;
    }
    
    .ssd-main-content .ssd-metadata, 
    .ssd-main-content .class-meta, 
    .ssd-main-content .ssd-badges-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 2px !important;
        font-size: 11px !important;
    }

    /* Dashboard Button Actions realignment inside right content box */
    .ssd-main-content .ssd-exam-actions,
    .ssd-main-content .ssd-exam-buttons,
    .ssd-main-content .ssd-class-actions,
    .ssd-main-content .class-action-btn-wrap {
        width: 100% !important;
        margin-top: auto !important; /* Push to bottom */
        padding-top: 8px !important;
        display: flex !important;
        gap: 8px !important;
    }

    .ssd-main-content .ssd-exam-actions a,
    .ssd-main-content .ssd-exam-buttons button,
    .ssd-main-content .ssd-class-actions a,
    .ssd-main-content .ssd-class-actions button,
    .ssd-main-content .action-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        flex: 1 !important; /* Fill available space */
        text-align: center !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }
}

/* ====================================================
   SEARCH BAR FIX (Modern Box UI & Icon Overlap Fix)
   ==================================================== */

.ssd-eh-search-box {
    position: relative !important;
    flex: 1 !important;
    min-width: 250px !important;
    display: flex !important;
    align-items: center !important;
}

/* 1. අයිකනය (Search Icon) නිවැරදිව ස්ථානගත කිරීම */
.ssd-eh-search-box i.fa-search {
    position: absolute !important;
    left: 18px !important; /* වම් පසින් ඉඩ තැබීම */
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--ssd-text-muted, #8b98b0) !important;
    font-size: 15px !important;
    pointer-events: none !important; /* අයිකනය මත ක්ලික් වුවත් Search Box එක වැඩ කිරීම සඳහා */
    z-index: 10 !important;
}

/* 2. Search Bar එක Modern Fade Box ආකාරයට (Filter Boxes මෙන්) සැකසීම */
.ssd-eh-search-box input#ssd-exam-search {
    width: 100% !important;
    height: 48px !important; /* Filter boxes වල උසට සමාන කිරීම */
    padding: 0 20px 0 45px !important; /* අයිකනය සඳහා වම් පසින් 45px ක ඉඩක් (Padding) තැබීම  */
    background: var(--ssd-box-bg, #222d44) !important; /* Dark Fade Theme Background */
    border: none !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    color: var(--ssd-text, #ffffff) !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important; /* Padding ඇතුලතින් තබා ගැනීම */
    transition: all 0.3s ease !important;
}

/* 3. Search Bar එක Focus වූ (Click කළ) විට වර්ණය වෙනස් වීම */
.ssd-eh-search-box input#ssd-exam-search:focus {
    box-shadow: inset 0 0 0 1px var(--ssd-primary, #3b82f6) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* 4. Light Mode අනුකූලතාවය (අවශ්‍ය නම් පමණි) */
body.light-mode .ssd-eh-search-box input#ssd-exam-search {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

body.light-mode .ssd-eh-search-box input#ssd-exam-search:focus {
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px #3b82f6 !important;
}

/* Skeleton Loading UI (Shimmer Effect) */
    .ssd-se-skeleton-wrapper { width: 100%; display: block; margin-bottom: 20px; }
    .ssd-se-skel-hero { width: 100%; height: 280px; border-radius: 16px; margin-bottom: 20px; }
    .ssd-se-skel-title { width: 70%; height: 24px; border-radius: 8px; margin-bottom: 15px; }
    .ssd-se-skel-meta { display: flex; gap: 15px; margin-bottom: 20px; }
    .ssd-se-skel-meta-item { width: 100px; height: 16px; border-radius: 6px; }
    
    .ssd-se-skel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 30px; }
    .ssd-se-skel-box { background: var(--ssd-box-bg); height: 100px; border-radius: 12px; }

    .ssd-se-shimmer {
        background: #222d44;
        background-image: linear-gradient(90deg, #222d44 0px, #2d3b55 40px, #222d44 80px);
        background-size: 200% 100%;
        animation: ssdShimmer 1.5s infinite linear;
    }
    @keyframes ssdShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

    @media (max-width: 768px) {
        .ssd-se-skel-hero { height: 200px; border-radius: 12px; }
        .ssd-se-skel-title { width: 90%; }
        .ssd-se-skel-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    }

    body.light-mode .ssd-se-shimmer {
        background: #e2e8f0;
        background-image: linear-gradient(90deg, #e2e8f0 0px, #f1f5f9 40px, #e2e8f0 80px);
    }
    body.light-mode .ssd-se-skel-box { background: #f8fafc; border: 1px solid #e2e8f0; }

/* ====================================================
   ALL CLASSES TABS & BUNDLE CARDS (FLAT UI)
   ==================================================== */

/* Tabs Navigation */
.ssd-ac-type-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: var(--ssd-box-bg);
    padding: 6px;
    border-radius: 14px;
    width: fit-content;
}

.ssd-ac-type-btn {
    background: transparent;
    color: var(--ssd-text-muted);
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.ssd-ac-type-btn:hover {
    color: var(--ssd-text);
}

.ssd-ac-type-btn.active {
    background: var(--ssd-primary);
    color: #ffffff;
}

.ssd-bundle-offer-badge {
    background: #f59e0b;
    color: #000;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    margin-left: 4px;
}

/* Bundle Card Design */
.ssd-bundle-modern-card {
    background: var(--ssd-card);
    border: 2px solid transparent;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: none;
    position: relative;
}

.ssd-bundle-modern-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px var(--ssd-primary);
    border-color: rgba(59, 130, 246, 0.2);
}

.ssd-bundle-header {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px dashed var(--ssd-border);
}

.bundle-icon-wrap {
    width: 45px;
    height: 45px;
    background: var(--ssd-primary);
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.ssd-bundle-discount {
    background: #ef4444;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
}

.ssd-bundle-body {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ssd-bundle-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ssd-text);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.ssd-bundle-price-row {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--ssd-box-bg);
    padding: 10px 15px;
    border-radius: 10px;
}

.ssd-bundle-price-row .old-price {
    font-size: 0.8rem;
    color: var(--ssd-text-muted);
    text-decoration: line-through;
    font-weight: 500;
}

.ssd-bundle-price-row .new-price {
    font-size: 1.2rem;
    font-weight: 800;
    color: #10b981;
}

.ssd-bundle-footer {
    padding: 16px;
    border-top: 1px solid var(--ssd-border);
}

.ssd-pro-bundle-btn {
    width: 100%;
    padding: 12px;
    background: #4f46e5;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ssd-pro-bundle-btn:hover {
    background: #4338ca;
    transform: translateY(-2px);
}

/* Light Mode Overrides for Bundles */
body.light-mode .ssd-ac-type-tabs { background: #f8fafc; border: 1px solid #e2e8f0; }
body.light-mode .ssd-ac-type-btn { color: #64748b; }
body.light-mode .ssd-ac-type-btn.active { background: var(--ssd-primary); color: #fff; }
body.light-mode .ssd-bundle-modern-card { background: #ffffff; border: 1px solid #e2e8f0; }
body.light-mode .ssd-bundle-header { border-bottom: 1px dashed #e2e8f0; }
body.light-mode .ssd-bundle-price-row { background: #f8fafc; }

@media (max-width: 768px) {
    .ssd-ac-type-tabs { width: 100%; }
    .ssd-ac-type-btn { flex: 1; justify-content: center; font-size: 0.85rem; padding: 10px; }
}

/* =========================================================
   COMPACT PAYMENT MODAL STYLES (BUNDLE & WALLET PAY)
   ========================================================= */

/* --- Modal Overlay & Content --- */
.ssd-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 99999;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(5px);
}

.ssd-modal-content.compact {
    width: 90%; max-width: 420px;
    border-radius: 20px; padding: 0; overflow: hidden;
    position: relative; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    background: var(--ssd-card); color: var(--ssd-text); border: none;
    font-family: 'Inter', sans-serif;
}

/* --- Modal Header --- */
.modal-header-center { 
    background: var(--ssd-box-bg); padding: 30px 20px; text-align: center; 
    border-bottom: 1px dashed var(--ssd-border); 
}

.modal-icon-circle { 
    width: 60px; height: 60px; background: rgba(59, 130, 246, 0.1); color: var(--ssd-primary); 
    border-radius: 16px; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; 
}

.modal-title { margin: 0; font-size: 1.3rem; color: var(--ssd-text); font-weight: 800; }
.modal-subtitle { margin: 5px 0 0; color: var(--ssd-text-muted); font-size: 0.9rem; font-weight: 500;}

/* --- Modal Body --- */
.ssd-wallet-pay-body { padding: 25px; background: var(--ssd-card); }

.ssd-modal-close { 
    position: absolute; top: 15px; right: 15px; background: var(--ssd-card); 
    width: 32px; height: 32px; border-radius: 50%; border: none; font-size: 1.2rem; 
    color: var(--ssd-text-muted); display: flex; align-items: center; justify-content: center; 
    cursor: pointer; transition: 0.2s; z-index: 10;
}
.ssd-modal-close:hover { background: #ef4444; color: white; transform: rotate(90deg); }

/* --- Summary & Balance Grids --- */
.pay-summary-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-weight: 600; color: var(--ssd-text-muted); font-size: 0.95rem;}
.pay-summary-row.big-total { font-weight: 800; font-size: 1.2rem; color: var(--ssd-text); border-top: 1px dashed var(--ssd-border); padding-top: 15px; margin-bottom: 15px; }

.balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.balance-grid[style*="grid-template-columns: 1fr;"] { display: flex; flex-direction: column; }
.bal-box { position: relative; padding: 15px; border-radius: 14px; overflow: hidden; border: none; background: var(--ssd-box-bg); }
.bal-box small { display: block; color: var(--ssd-text-muted); font-size: 0.75rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;}
.bal-box .val { display: block; font-size: 1.1rem; font-weight: 800; color: var(--ssd-text); margin-top: 5px; }
.bal-box.wallet .val { color: #10b981; }
.bal-box .bg-icon { position: absolute; right: -5px; bottom: -5px; font-size: 3rem; opacity: 0.05; color: var(--ssd-text); transform: rotate(-15deg); }

/* --- Payment Buttons --- */
.payment-actions { display: flex; flex-direction: column; gap: 12px; }
.ssd-btn-pay { display: flex; align-items: center; width: 100%; padding: 14px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; transition: 0.2s; opacity: 0.5; pointer-events: none; background: var(--ssd-box-bg); box-shadow: none;}
.ssd-btn-pay.active { opacity: 1; pointer-events: auto; }

.ssd-btn-pay.wallet.active { background: rgba(16, 185, 129, 0.1); border-color: #10b981; }
.ssd-btn-pay.wallet.active:hover { background: rgba(16, 185, 129, 0.15); }
.ssd-btn-pay.wallet .btn-icon { color: #10b981; font-size: 1.4rem; margin-right: 15px; }

.ssd-btn-pay .btn-txt { text-align: left; display: flex; flex-direction: column; }
.ssd-btn-pay .btn-txt span { font-weight: 700; color: var(--ssd-text); font-size: 1rem; margin-bottom: 2px;}
.ssd-btn-pay .btn-txt small { font-size: 0.8rem; color: var(--ssd-text-muted); font-weight: 600;}

/* --- Action Buttons --- */
.ssd-btn-primary-modern.full-width { width: 100%; padding: 14px; background: var(--ssd-primary); border: none; border-radius: 12px; color: white; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; transition: 0.2s; box-shadow: none;}
.ssd-btn-primary-modern.full-width:hover:not(:disabled) { background: #2563eb; transform: translateY(-2px); }
.ssd-btn-primary-modern:disabled { background: var(--ssd-box-bg); color: var(--ssd-text-muted); cursor: not-allowed; opacity: 0.7;}

.ssd-btn-outline { background: var(--ssd-box-bg); color: var(--ssd-text); border: none; border-radius: 12px; padding: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 8px;}
.ssd-btn-outline:hover { background: var(--ssd-border); color: var(--ssd-text); }

/* --- Messages & Success Animations --- */
.ssd-msg { padding: 12px; border-radius: 10px; font-size: 0.9rem; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; font-weight: 600;}
.ssd-msg.error { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: none; }

.ssd-checkmark { width: 80px; height: 80px; border-radius: 50%; display: block; stroke-width: 2; stroke: #10b981; stroke-miterlimit: 10; margin: 0 auto; box-shadow: inset 0px 0px 0px #10b981; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
.ssd-checkmark-circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #10b981; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.ssd-checkmark-check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
@keyframes fill { 100% { box-shadow: inset 0px 0px 0px 50px rgba(16, 185, 129, 0.1); } }

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .ssd-modal-content.compact { padding: 0 !important; width: 95% !important; }
    .modal-header-center, .ssd-wallet-pay-body { width: 100% !important; box-sizing: border-box !important; border-radius: 0 !important; }
    .modal-header-center { margin: 0 !important; border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; }
    .ssd-wallet-pay-body { border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; }
}

/* ====================================================
   LIGHT MODE OVERRIDES FOR PAYMENT MODAL
   ==================================================== */
body.light-mode .ssd-modal-content.compact { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .modal-header-center { background: var(--ssd-box-bg); border-bottom: 1px dashed var(--ssd-border); }
body.light-mode .modal-title { color: var(--ssd-text); }
body.light-mode .modal-subtitle { color: var(--ssd-text-muted); }
body.light-mode .ssd-modal-close { background: var(--ssd-box-bg); color: var(--ssd-text-muted); }
body.light-mode .ssd-modal-close:hover { background: #ef4444; color: white; }

body.light-mode .ssd-wallet-pay-body { background: var(--ssd-card); }
body.light-mode .pay-summary-row { color: var(--ssd-text-muted); }
body.light-mode .pay-summary-row.big-total { color: var(--ssd-text); border-top: 1px dashed var(--ssd-border); }

body.light-mode .bal-box { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); }
body.light-mode .bal-box small { color: var(--ssd-text-muted); }

body.light-mode .ssd-btn-pay { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-btn-pay .btn-txt span { color: var(--ssd-text); }
body.light-mode .ssd-btn-pay .btn-txt small { color: var(--ssd-text-muted); }

body.light-mode .ssd-btn-outline { background: var(--ssd-box-bg); border: 1px solid var(--ssd-border); color: var(--ssd-text); }
body.light-mode .ssd-btn-outline:hover { background: var(--ssd-card); border-color: var(--ssd-primary); }

body.light-mode .ssd-result-content { background: var(--ssd-card); }

/* ====================================================
   ALL CLASSES TABS & BUNDLE CARDS (MODERN CENTERED UI)
   ==================================================== */

/* Modern Centered Tabs Navigation */
.ssd-ac-type-tabs {
    display: flex;
    background: var(--ssd-card); /* Badges පිටුවේ මෙන් පසුබිම */
    padding: 6px;
    border-radius: 12px;
    width: 100%;
    max-width: 450px; /* මැදට ගැනීම සඳහා උපරිම පළලක් දීම */
    margin: 0 auto 30px auto; /* Center කිරීම සහ පහළින් ඉඩ තැබීම */
    border: none;
    position: relative;
}

.ssd-ac-type-btn {
    flex: 1; /* බොත්තම් දෙක සමාන පළලක් ගැනීම */
    background: transparent;
    border: none;
    color: var(--ssd-text-muted);
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center; /* අකුරු මැදට ගැනීම */
    gap: 8px;
    z-index: 2;
}

.ssd-ac-type-btn:hover {
    color: var(--ssd-text);
    background: var(--ssd-box-bg);
}

.ssd-ac-type-btn.active {
    background: var(--ssd-box-bg);
    color: var(--ssd-primary);
    box-shadow: none;
}

.ssd-bundle-offer-badge {
    background: #f59e0b;
    color: #000;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    margin-left: 2px;
}

/* Light Mode Overrides for Tabs */
body.light-mode .ssd-ac-type-tabs { background: var(--ssd-card); border: 1px solid var(--ssd-border); }
body.light-mode .ssd-ac-type-btn { color: var(--ssd-text-muted); }
body.light-mode .ssd-ac-type-btn:hover { background: var(--ssd-box-bg); color: var(--ssd-text); }
body.light-mode .ssd-ac-type-btn.active { background: var(--ssd-box-bg); color: var(--ssd-primary); box-shadow: none; }

/* --- DESKTOP GAP FIX (Filters සහ Grid එක අතර පරතරය) --- */
@media (min-width: 769px) {
    .ssd-filter-bar {
        margin-bottom: 35px !important; /* Desktop එකේදී පැහැදිලි පරතරයක් තැබීම */
    }
}

/* --- MOBILE RESPONSIVE (-10% Scaling) --- */
@media (max-width: 768px) {
    .ssd-ac-type-tabs { 
        max-width: 90%; /* 10% කින් පමණ ප්‍රමාණය කුඩා කිරීම */
        margin: 0 auto 20px auto; 
        padding: 4px;
    }
    .ssd-ac-type-btn { 
        font-size: 0.8rem; /* අකුරු ප්‍රමාණය කුඩා කිරීම */
        padding: 8px 10px; 
    }
    .ssd-bundle-offer-badge {
        font-size: 0.55rem;
        padding: 2px 4px;
    }
    .ssd-filter-bar {
        margin-bottom: 20px !important; /* Mobile එකට ගැලපෙන පරතරයක් */
    }
}

/* --- 1. Verified Tick Header Customization --- */
.ssd-verified-tick {
    display: none !important; /* පැරණි Smart Student ටැග් එක සම්පූර්ණයෙන්ම ඉවත් කිරීම */
}

.ssd-verified-tick-only svg, 
.ssd-verified-tick-only img {
    width: 24px !important;
    height: 24px !important;
    vertical-align: middle;
}

/* --- 2. Complete Payment Popup Fix (image_246261.png) --- */
.checkout-brand-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin: 0 auto;
}

.checkout-brand-icon-wrap svg,
.checkout-brand-icon-wrap img {
    width: 40px !important; /* මුළු තිරයම වැසී තිබූ විශාල අගය සීමා කිරීම */
    height: 40px !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.modern-bottom-sheet {
    max-width: 500px !important;
    height: auto !important;
    min-height: 450px !important;
    max-height: 85vh !important;
    margin: 0 auto !important;
    border-radius: 24px 24px 0 0 !important;
}

/* --- 3. Mobile UI Plan Boxes Grid (2 Columns) --- */
@media (max-width: 768px) {
    .wp-plans-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* තිරස් අතට පෙට්ටි 2 බැගින් පෙන්වීම */
        gap: 12px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .dash-plan-card, .wp-modern-plan-card {
        width: 100% !important; /* මුළු ඉඩම ගැලපෙන සේ සකස් කිරීම */
        min-width: 0 !important;
        padding: 20px 10px !important;
        flex: unset !important;
    }
    
    /* ජංගම දුරකථන වලදී Popular සැලසුම Scale වීම නිසා අඩුවන ඉඩ සැකසීම */
    .dash-plan-card.popular-plan, .wp-modern-plan-card.popular-plan {
        transform: scale(1.02) !important;
    }
}

/* ===================================================
   VERIFIED CUSTOM BENTO GRID SYSTEM
   =================================================== */

/* Toggle Switch පෙනුම */
.ssd-grid-toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}
.ssd-grid-toggle-switch input { opacity: 0; width: 0; height: 0; }
.ssd-grid-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #444; transition: .3s; border-radius: 20px;
}
.ssd-grid-slider:before {
    position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px;
    background-color: white; transition: .3s; border-radius: 50%;
}
input:checked + .ssd-grid-slider { background-color: #00ca72; } /* Active පැහැය */
input:checked + .ssd-grid-slider:before { transform: translateX(16px); }
input:disabled + .ssd-grid-slider { background-color: #222; opacity: 0.5; }

/* --- GRID LAYOUT LOGIC --- */
.ssd-room-grid.layout-custom-bento {
    display: grid !important;
    gap: 16px !important;
}

/* 💻 DESKTOP UI (තිරය විශාල විට) */
@media (min-width: 769px) {
    .ssd-room-grid.layout-custom-bento {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-auto-rows: minmax(120px, auto) !important;
    }

    /* Main Box එක (පළමු box එක) 3x3 ප්‍රමාණයෙන් හැදීම */
    .ssd-room-grid.layout-custom-bento > div:first-child,
    .ssd-room-grid.layout-custom-bento .ssd-user-card:first-child {
        grid-column: span 3 !important;
        grid-row: span 3 !important;
        min-height: 380px !important;
    }

    /* අනෙක් සාමාන්‍ය boxes */
    .ssd-room-grid.layout-custom-bento > div {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

/* 📱 MOBILE UI (තිරය කුඩා විට) */
@media (max-width: 768px) {
    .ssd-room-grid.layout-custom-bento {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* පොදුවේ සියලුම boxes 3 වෙනි තැනට පස්සට තල්ලු කිරීම */
    .ssd-room-grid.layout-custom-bento > div,
    .ssd-room-grid.layout-custom-bento .ssd-user-card {
        order: 3 !important;
        grid-column: span 1 !important;
    }

    /* උඩින්ම එන boxes 4 (JS මඟින් top-box class එක ලබාදේ) */
    .ssd-room-grid.layout-custom-bento > div.top-box,
    .ssd-room-grid.layout-custom-bento .ssd-user-card.top-box {
        order: 1 !important;
        grid-column: span 1 !important;
    }

    /* ප්‍රධාන Main Box එක මැදට (2 වෙනි ස්ථානයට) ගෙන ඒම සහ සම්පූර්ණ පළල දීම */
    .ssd-room-grid.layout-custom-bento > div:first-child,
    .ssd-room-grid.layout-custom-bento .ssd-user-card:first-child {
        order: 2 !important;
        grid-column: span 2 !important; 
        min-height: 240px !important;
    }
}

/* =========================================================
   MEHEWARA PROFESSIONAL PRO CHAT SYSTEM - ENHANCED CSS
   ========================================================= */

/* Typing Indicator Styling */
.ssd-chat-typing-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 4px 0;
    font-size: 0.8rem;
    color: var(--ssd-text-muted);
    animation: ssdChatFadeIn 0.3s ease;
}
.ssd-chat-typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}
.ssd-chat-typing-dot {
    width: 6px;
    height: 6px;
    background-color: var(--ssd-primary);
    border-radius: 50%;
    animation: ssdTypingBounce 1.4s infinite ease-in-out both;
}
.ssd-chat-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.ssd-chat-typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes ssdTypingBounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Chat Row & Bubble Refinement */
.ssd-msg-row {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 12px !important;
    max-width: 85% !important; /* පළල වැඩි වීම වැළැක්වීම */
    width: max-content !important;
}
.ssd-msg-row.me {
    margin-left: auto !important;
    align-items: flex-end !important;
}
.ssd-msg-row.other {
    margin-right: auto !important;
    align-items: flex-start !important;
}

/* Base Bubble Structure */
.ssd-bubble {
    position: relative !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    background: var(--ssd-box-bg) !important;
    color: var(--ssd-text) !important;
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    cursor: pointer !important; /* Clickable */
    user-select: none !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    max-width: 100% !important;
    word-break: break-word !important;
}
.ssd-msg-row.me .ssd-bubble {
    border-bottom-right-radius: 4px !important;
    background: var(--ssd-primary) !important;
    color: #ffffff !important;
}
.ssd-msg-row.other .ssd-bubble {
    border-bottom-left-radius: 4px !important;
}

/* Double Click Heart Overlay Effect */
.ssd-chat-heart-pop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 2.5rem;
    color: #ef4444;
    pointer-events: none;
    z-index: 100;
    animation: ssdHeartBurst 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes ssdHeartBurst {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Live Emoji Badge on Bubble */
.ssd-chat-reactions-badge {
    position: absolute;
    bottom: -10px;
    right: 10px;
    background: var(--ssd-card);
    border: 1px solid var(--ssd-border);
    border-radius: 20px;
    padding: 2px 6px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.ssd-msg-row.me .ssd-chat-reactions-badge {
    right: auto;
    left: 10px;
}

/* Dropdown Content Panel (Telegram Style) */
.ssd-chat-dropdown-panel {
    position: absolute !important;
    z-index: 999999 !important;
    background: var(--ssd-card) !important;
    border: 1px solid var(--ssd-border) !important;
    border-radius: 14px !important;
    width: 220px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
    display: none;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: ssdChatPop 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ssdChatPop {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Horizontal Scrollable Emoji Bar Inside Dropdown */
.ssd-chat-emoji-scroll-bar {
    display: flex !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: var(--ssd-box-bg) !important;
    border-bottom: 1px solid var(--ssd-border) !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important; /* Firefox */
}
.ssd-chat-emoji-scroll-bar::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
}
.ssd-chat-emoji-item {
    font-size: 1.35rem !important;
    cursor: pointer !important;
    transition: transform 0.15s ease !important;
    display: inline-block !important;
}
.ssd-chat-emoji-item:hover {
    transform: scale(1.25) !important;
}

/* Dropdown Action Items */
.ssd-chat-drop-action {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    color: var(--ssd-text) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}
.ssd-chat-drop-action:hover {
    background: rgba(59, 130, 246, 0.08) !important;
}
.ssd-chat-drop-action.danger-zone {
    color: #ef4444 !important;
}
.ssd-chat-drop-action.danger-zone:hover {
    background: rgba(239, 68, 68, 0.08) !important;
}