/* ============================================
   OZAN Admin Panel - 2026 Design Trends
   Color: Dark Mode + Teal/Neon Accents
   Font: Inter + DM Serif Display
   Style: Glassmorphism + Soft Gradients
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
    /* Dark Mode Base */
    --bg-primary: #0a0e1a;
    --bg-secondary: #111827;
    --bg-card: #1a1f35;
    --bg-card-hover: #222845;
    --bg-sidebar: #0d1224;
    --bg-input: #1e2540;

    /* Teal / Accent Colors */
    --teal-primary: #14b8a6;
    --teal-light: #5eead4;
    --teal-dark: #0d9488;
    --teal-glow: rgba(20, 184, 166, 0.3);

    /* Neon Accents */
    --neon-purple: #a855f7;
    --neon-blue: #3b82f6;
    --neon-pink: #ec4899;
    --neon-orange: #f97316;
    --neon-green: #22c55e;
    --neon-red: #ef4444;

    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-white: #ffffff;

    /* Glass Effect */
    --glass-bg: rgba(26, 31, 53, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    /* Borders & Shadows */
    --border-color: rgba(255, 255, 255, 0.06);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-glow-teal: 0 0 20px rgba(20, 184, 166, 0.15);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ---- Reset & Base ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

h1, h2, h3, h4, h5 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.font-serif {
    font-family: 'DM Serif Display', serif;
}

a {
    color: var(--teal-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--teal-light);
}

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: var(--teal-dark);
    border-radius: 3px;
}

/* ---- Layout ---- */
.admin-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
    width: 270px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base);
}

.sidebar-header {
    padding: 24px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-logo {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--teal-primary), var(--neon-blue));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    color: white;
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.3);
}

.sidebar-brand h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.sidebar-brand span {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
}

.nav-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    padding: 16px 12px 8px;
    font-weight: 600;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    transition: all var(--transition-fast);
    margin-bottom: 2px;
    position: relative;
}

.sidebar-nav .nav-link i {
    font-size: 18px;
    width: 22px;
    text-align: center;
}

.sidebar-nav .nav-link:hover {
    background: rgba(20, 184, 166, 0.08);
    color: var(--teal-light);
}

.sidebar-nav .nav-link.active {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(59, 130, 246, 0.1));
    color: var(--teal-light);
    font-weight: 600;
}

.sidebar-nav .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--teal-primary);
    border-radius: 0 3px 3px 0;
}

.nav-badge {
    margin-left: auto;
    background: var(--neon-purple);
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* ---- Sidebar Dropdown ---- */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    transition: all var(--transition-fast);
    margin-bottom: 2px;
    position: relative;
    cursor: pointer;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.nav-dropdown-toggle i.bi:first-child {
    font-size: 18px;
    width: 22px;
    text-align: center;
}

.nav-dropdown-toggle:hover {
    background: rgba(20, 184, 166, 0.08);
    color: var(--teal-light);
}

.nav-dropdown-toggle.active {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(59, 130, 246, 0.1));
    color: var(--teal-light);
    font-weight: 600;
}

.nav-dropdown-toggle.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--teal-primary);
    border-radius: 0 3px 3px 0;
}

.nav-dropdown-arrow {
    margin-left: auto;
    font-size: 12px !important;
    width: auto !important;
    transition: transform var(--transition-base);
}

.nav-dropdown.open .nav-dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding-left: 18px;
}

.nav-dropdown.open .nav-dropdown-menu {
    max-height: 400px;
}

.nav-dropdown-menu .nav-link {
    padding: 8px 14px 8px 22px !important;
    font-size: 12.5px !important;
    position: relative;
}

.nav-dropdown-menu .nav-link::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: background var(--transition-fast);
}

.nav-dropdown-menu .nav-link:hover::before,
.nav-dropdown-menu .nav-link.active::before {
    background: var(--teal-primary);
}

.nav-dropdown-menu .nav-link.active {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(59, 130, 246, 0.08));
    color: var(--teal-light);
    font-weight: 600;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

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

.sidebar-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: white;
}

.sidebar-user-info h6 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.sidebar-user-info span {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- Main Content ---- */
.main-content {
    margin-left: 270px;
    flex: 1;
    min-height: 100vh;
}

/* ---- Top Navbar ---- */
.top-navbar {
    background: rgba(10, 14, 26, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    padding: 0 28px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 999;
}

.navbar-search {
    position: relative;
    width: 320px;
}

.navbar-search input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 9px 16px 9px 42px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-fast);
}

.navbar-search input:focus {
    outline: none;
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.navbar-search input::placeholder {
    color: var(--text-muted);
}

.navbar-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 15px;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-action-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    font-size: 18px;
}

.nav-action-btn:hover {
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-light);
    border-color: rgba(20, 184, 166, 0.2);
}

.nav-action-btn .badge-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--neon-red);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-primary);
}

/* ---- Page Content ---- */
.page-content {
    padding: 28px;
}

.page-header {
    margin-bottom: 28px;
}

.page-header h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 6px;
}

.page-header p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ---- Stat Cards ---- */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.stat-card.teal::before { background: linear-gradient(90deg, var(--teal-primary), var(--teal-light)); }
.stat-card.purple::before { background: linear-gradient(90deg, var(--neon-purple), #c084fc); }
.stat-card.blue::before { background: linear-gradient(90deg, var(--neon-blue), #60a5fa); }
.stat-card.orange::before { background: linear-gradient(90deg, var(--neon-orange), #fb923c); }

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 255, 255, 0.1);
}

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.stat-icon.teal { background: rgba(20, 184, 166, 0.12); color: var(--teal-primary); }
.stat-icon.purple { background: rgba(168, 85, 247, 0.12); color: var(--neon-purple); }
.stat-icon.blue { background: rgba(59, 130, 246, 0.12); color: var(--neon-blue); }
.stat-icon.orange { background: rgba(249, 115, 22, 0.12); color: var(--neon-orange); }

.stat-trend {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}
.stat-trend.up { background: rgba(34, 197, 94, 0.12); color: var(--neon-green); }
.stat-trend.down { background: rgba(239, 68, 68, 0.12); color: var(--neon-red); }

.stat-value {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ---- Glass Cards ---- */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
}

.card-dark {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.card-header-custom {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header-custom h6 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.card-body-custom {
    padding: 22px;
}

/* ---- Charts ---- */
.chart-container {
    position: relative;
    width: 100%;
    height: 300px;
}

.chart-container-sm {
    height: 200px;
}

/* ---- Tables ---- */
.table-dark-custom {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table-dark-custom thead th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.table-dark-custom tbody td {
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.table-dark-custom tbody tr:hover {
    background: rgba(20, 184, 166, 0.04);
}

.table-dark-custom tbody tr:last-child td {
    border-bottom: none;
}

/* ---- Status Badges ---- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
}

.status-badge.active { background: rgba(34, 197, 94, 0.12); color: var(--neon-green); }
.status-badge.active::before { background: var(--neon-green); }
.status-badge.pending { background: rgba(249, 115, 22, 0.12); color: var(--neon-orange); }
.status-badge.pending::before { background: var(--neon-orange); }
.status-badge.inactive { background: rgba(239, 68, 68, 0.12); color: var(--neon-red); }
.status-badge.inactive::before { background: var(--neon-red); }
.status-badge.info { background: rgba(59, 130, 246, 0.12); color: var(--neon-blue); }
.status-badge.info::before { background: var(--neon-blue); }

/* ---- User Avatars ---- */
.user-avatar-sm {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

/* ---- Progress Bars ---- */
.progress-custom {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.progress-custom .bar {
    height: 100%;
    border-radius: 3px;
    transition: width var(--transition-slow);
}

/* ---- Buttons ---- */
.btn-teal {
    background: linear-gradient(135deg, var(--teal-primary), var(--teal-dark));
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-teal:hover {
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.3);
    transform: translateY(-1px);
    color: white;
}

.btn-glass {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.12);
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 16px;
}

.btn-icon:hover {
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-light);
    border-color: rgba(20, 184, 166, 0.2);
}

/* ---- Modals (2026 Glass Design) ---- */
.modal-content {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(20, 184, 166, 0.05) !important;
    color: var(--text-primary);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--border-color) !important;
    padding: 20px 24px !important;
    background: rgba(255, 255, 255, 0.02);
}

.modal-header .modal-title {
    font-weight: 700;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}
.modal-header .btn-close:hover {
    opacity: 1;
}

.modal-body {
    padding: 24px !important;
}

.modal-footer {
    border-top: 1px solid var(--border-color) !important;
    padding: 16px 24px !important;
    background: rgba(255, 255, 255, 0.02);
}

.modal-backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Modal Sizes */
.modal-xl-custom {
    max-width: 900px;
}

/* Modal Form Styles */
.modal .form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.modal .form-control,
.modal .form-select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-fast);
}

.modal .form-control:focus,
.modal .form-select:focus {
    border-color: var(--teal-primary) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1) !important;
    outline: none;
}

.modal .form-control::placeholder {
    color: var(--text-muted);
}

.modal .form-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.modal .form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}
.modal .form-check-input:checked {
    background-color: var(--teal-primary);
    border-color: var(--teal-primary);
}

.modal textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* Modal Tabs */
.modal .nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

.modal .nav-tabs .nav-link {
    color: var(--text-muted);
    border: none;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    transition: all var(--transition-fast);
    border-bottom: 2px solid transparent;
    background: transparent;
}

.modal .nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-color: transparent;
}

.modal .nav-tabs .nav-link.active {
    color: var(--teal-primary);
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--teal-primary);
}

/* Modal Steps Indicator */
.modal-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-color);
}

.modal-step {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-step-number {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 2px solid var(--border-color);
    transition: all var(--transition-base);
}

.modal-step.active .modal-step-number {
    background: var(--teal-primary);
    color: white;
    border-color: var(--teal-primary);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.3);
}

.modal-step.completed .modal-step-number {
    background: var(--neon-green);
    color: white;
    border-color: var(--neon-green);
}

.modal-step-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.modal-step.active .modal-step-label {
    color: var(--teal-primary);
}

.modal-step-divider {
    width: 40px;
    height: 2px;
    background: var(--border-color);
    border-radius: 1px;
}

.modal-step.completed + .modal-step-divider,
.modal-step.completed ~ .modal-step-divider {
    background: var(--neon-green);
}

/* ---- Activity Items ---- */
.activity-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.activity-content h6 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
}

.activity-content p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* ---- File Upload Zone ---- */
.upload-zone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 40px 20px;
    text-align: center;
    transition: all var(--transition-base);
    cursor: pointer;
}

.upload-zone:hover {
    border-color: var(--teal-primary);
    background: rgba(20, 184, 166, 0.04);
}

.upload-zone i {
    font-size: 36px;
    color: var(--teal-primary);
    margin-bottom: 12px;
}

.upload-zone h6 {
    font-size: 14px;
    margin-bottom: 4px;
}

.upload-zone p {
    font-size: 12px;
    color: var(--text-muted);
}

/* ---- Tags/Chips ---- */
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-light);
    border: 1px solid rgba(20, 184, 166, 0.15);
}

.tag-chip .remove-tag {
    cursor: pointer;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}
.tag-chip .remove-tag:hover {
    opacity: 1;
}

/* ---- Color Swatches ---- */
.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-fast);
}

.color-swatch:hover, .color-swatch.active {
    border-color: white;
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

/* ---- Toggle Switch Custom ---- */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    display: none;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-input);
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid var(--border-color);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    background: var(--text-muted);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--teal-primary);
    border-color: var(--teal-primary);
}

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

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.show {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
    }
    .navbar-search {
        width: 200px;
    }
}

@media (max-width: 767.98px) {
    .page-content {
        padding: 16px;
    }
    .navbar-search {
        display: none;
    }
    .stat-value {
        font-size: 22px;
    }
}

/* ---- Animations ---- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(20, 184, 166, 0.2); }
    50% { box-shadow: 0 0 20px rgba(20, 184, 166, 0.4); }
}

.animate-in {
    animation: fadeInUp 0.4s ease forwards;
}

/* ---- Notification Item ---- */
.notification-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    cursor: pointer;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.notification-item.unread {
    background: rgba(20, 184, 166, 0.04);
}

.notification-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--teal-primary);
    flex-shrink: 0;
    margin-top: 5px;
}

/* ---- Permission Matrix ---- */
.perm-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.perm-grid-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.perm-grid-header:first-child {
    text-align: left;
}

.perm-grid-cell {
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.perm-grid-cell:first-child {
    justify-content: flex-start;
    color: var(--text-secondary);
}

/* ---- Timeline ---- */
.timeline-item {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 20px;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

.timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-content h6 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.timeline-content p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* ---- Pricing Cards in Modal ---- */
.pricing-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    transition: all var(--transition-base);
}

.pricing-card:hover {
    border-color: rgba(20, 184, 166, 0.3);
}

.pricing-card.featured {
    border-color: var(--teal-primary);
    background: rgba(20, 184, 166, 0.06);
    position: relative;
}

.pricing-card.featured::before {
    content: 'Popular';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--teal-primary);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-price {
    font-size: 32px;
    font-weight: 800;
    margin: 12px 0;
}

.pricing-price span {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 6px 0;
}

.pricing-feature i {
    color: var(--teal-primary);
    font-size: 14px;
}

/* ---- Image Preview Grid ---- */
.image-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.image-preview-item {
    aspect-ratio: 1;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.image-preview-item:hover {
    border-color: var(--teal-primary);
    color: var(--teal-primary);
}

/* ---- Kanban Columns in Modal ---- */
.kanban-column {
    background: var(--bg-input);
    border-radius: var(--radius-md);
    padding: 14px;
    min-height: 200px;
}

.kanban-column-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 8px;
    cursor: grab;
    transition: all var(--transition-fast);
}

.kanban-card:hover {
    border-color: rgba(20, 184, 166, 0.2);
    transform: translateY(-1px);
}

/* ---- Range Slider Custom ---- */
.form-range::-webkit-slider-thumb {
    background: var(--teal-primary);
}
.form-range::-webkit-slider-track {
    background: var(--bg-input);
}

/* ============================================
   FORMS PAGE - Enhanced Form Styles
   ============================================ */

/* ---- Page-Level Form Styles ---- */
.page-content .form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.page-content .form-control,
.page-content .form-select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-base);
}

.page-content .form-control:focus,
.page-content .form-select:focus {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12), 0 0 16px rgba(20, 184, 166, 0.06);
    outline: none;
    background: rgba(30, 37, 64, 0.9);
}

.page-content .form-control::placeholder {
    color: var(--text-muted);
}

.page-content .form-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.page-content .form-check-input {
    background-color: var(--bg-input);
    border: 2px solid rgba(255, 255, 255, 0.12);
    width: 18px;
    height: 18px;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.page-content .form-check-input:checked {
    background-color: var(--teal-primary);
    border-color: var(--teal-primary);
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.3);
}

.page-content .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
    border-color: var(--teal-primary);
}

.page-content .form-check-label {
    font-size: 13.5px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast);
    padding-left: 4px;
}

.page-content .form-check-input:checked ~ .form-check-label {
    color: var(--text-primary);
}

/* Switch Enhancement */
.page-content .form-switch .form-check-input {
    width: 42px;
    height: 22px;
    border-radius: 12px;
    background-image: none;
    position: relative;
    background-color: var(--bg-input);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.page-content .form-switch .form-check-input::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all var(--transition-base);
}

.page-content .form-switch .form-check-input:checked {
    background-color: var(--teal-primary);
    border-color: var(--teal-primary);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.35);
}

.page-content .form-switch .form-check-input:checked::before {
    transform: translateX(20px);
    background: white;
}

/* ---- Icon Input Wrapper ---- */
.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper .form-control {
    padding-left: 42px;
}

.input-icon-wrapper .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    transition: color var(--transition-fast);
    z-index: 2;
    pointer-events: none;
}

.input-icon-wrapper .form-control:focus ~ .input-icon,
.input-icon-wrapper .form-control:focus + .input-icon {
    color: var(--teal-primary);
}

/* Right icon */
.input-icon-wrapper .input-icon-right {
    left: auto;
    right: 14px;
    cursor: pointer;
    pointer-events: auto;
}

/* ---- Password Strength Meter ---- */
.password-strength {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.password-strength .strength-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    transition: background var(--transition-base);
}

.password-strength .strength-bar.active.weak { background: var(--neon-red); }
.password-strength .strength-bar.active.medium { background: var(--neon-orange); }
.password-strength .strength-bar.active.strong { background: var(--neon-green); }

.password-strength-text {
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
    transition: color var(--transition-fast);
}

/* ---- Character Counter ---- */
.char-counter {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    margin-top: 4px;
    transition: color var(--transition-fast);
}

.char-counter.warning { color: var(--neon-orange); }
.char-counter.danger { color: var(--neon-red); }

/* ---- Form Section Header ---- */
.form-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.form-section-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.form-section-header h6 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 2px;
}

.form-section-header p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* ---- Dropzone.js Özel Stilleri ---- */
.dropzone {
    border: 2px dashed rgba(20, 184, 166, 0.25) !important;
    border-radius: var(--radius-lg) !important;
    background: rgba(20, 184, 166, 0.02) !important;
    padding: 20px !important;
    min-height: 200px !important;
    transition: all var(--transition-base) !important;
}

.dropzone:hover {
    border-color: var(--teal-primary) !important;
    background: rgba(20, 184, 166, 0.06) !important;
    box-shadow: 0 0 24px rgba(20, 184, 166, 0.1);
}

.dropzone .dz-custom-message {
    text-align: center;
}

.dropzone .dz-custom-message i {
    font-size: 40px;
    color: var(--teal-primary);
    display: block;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
}

.dropzone:hover .dz-custom-message i {
    transform: translateY(-4px);
}

.dropzone .dz-custom-message h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.dropzone .dz-custom-message p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.dropzone .dz-message {
    margin: 1em 0 !important;
}

.dropzone .dz-preview {
    background: var(--bg-input) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    margin: 8px !important;
    min-height: 140px;
}

.dropzone .dz-preview .dz-image {
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}

.dropzone .dz-preview .dz-image img {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.dropzone .dz-preview .dz-details {
    background: rgba(10, 14, 26, 0.85) !important;
    color: var(--text-primary) !important;
    padding: 8px !important;
    opacity: 0;
    transition: opacity 0.3s ease !important;
}

.dropzone .dz-preview:hover .dz-details {
    opacity: 1;
}

.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
    background: none !important;
    color: var(--text-secondary) !important;
    font-size: 11px;
}

.dropzone .dz-preview .dz-progress {
    height: 4px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    top: 80% !important;
}

.dropzone .dz-preview .dz-progress .dz-upload {
    background: var(--teal-primary) !important;
    border-radius: 2px !important;
}

.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
    width: 40px !important;
    height: 40px !important;
}

.dropzone .dz-preview .dz-success-mark {
    color: var(--neon-green) !important;
}

.dropzone .dz-preview .dz-error-mark {
    color: var(--neon-red) !important;
}

/* Özel silme butonu - görselin ortasında */
.dropzone .dz-preview .dz-remove-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.dropzone .dz-preview:hover .dz-remove-btn {
    transform: translate(-50%, -50%) scale(1);
}

.dropzone .dz-preview .dz-remove-btn:hover {
    background: rgba(239, 68, 68, 1);
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 6px 24px rgba(239, 68, 68, 0.5);
}

/* SortableJS sürükleme stilleri */
.dropzone .dz-preview {
    cursor: grab;
}

.dropzone .dz-preview:active {
    cursor: grabbing;
}

.dz-sortable-ghost {
    opacity: 0.35 !important;
    border: 2px dashed var(--teal-primary) !important;
    border-radius: var(--radius-md) !important;
}

.dz-sortable-chosen {
    box-shadow: 0 8px 32px rgba(20, 184, 166, 0.25) !important;
    border-color: var(--teal-primary) !important;
    transform: scale(1.04);
    z-index: 10;
}

.dz-sortable-drag {
    opacity: 0.9 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

.dropzone .dz-preview .dz-error-message {
    top: 130px !important;
    background: var(--neon-red) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
}

.dropzone .dz-preview .dz-error-message::after {
    border-bottom-color: var(--neon-red) !important;
}

.dropzone .dz-preview.dz-success .dz-progress {
    display: none;
}

/* ---- Tekli Dosya Seçimi Önizleme ---- */
.single-file-preview {
    margin-top: 10px;
}

.single-file-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px;
    animation: fadeInUp 0.3s ease;
}

.single-file-thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.single-file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-file-thumb.file-icon-thumb {
    background: rgba(20, 184, 166, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--teal-primary);
}

.single-file-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.85);
    border: none;
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
}

.single-file-item:hover .single-file-remove {
    opacity: 1;
}

.single-file-remove:hover {
    background: var(--neon-red);
    transform: scale(1.15);
}

.single-file-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.single-file-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.single-file-size {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- Çoklu Dosya Listesi ---- */
.multi-file-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.multi-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    animation: fadeInUp 0.3s ease;
}

.multi-file-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multi-file-size {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

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

/* ---- Dosya Input Stili ---- */
.page-content input[type="file"].form-control {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.page-content input[type="file"].form-control:hover {
    border-color: var(--teal-primary);
    background: rgba(20, 184, 166, 0.04);
}

.page-content input[type="file"].form-control::file-selector-button {
    background: rgba(20, 184, 166, 0.12);
    color: var(--teal-light);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: var(--radius-sm);
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 12px;
    transition: all 0.2s ease;
}

.page-content input[type="file"].form-control::file-selector-button:hover {
    background: rgba(20, 184, 166, 0.2);
    border-color: var(--teal-primary);
}

/* ---- Custom Select Card ---- */
.select-card-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.select-card {
    flex: 1;
    min-width: 120px;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
}

.select-card:hover {
    border-color: rgba(20, 184, 166, 0.3);
    background: rgba(20, 184, 166, 0.04);
}

.select-card.selected {
    border-color: var(--teal-primary);
    background: rgba(20, 184, 166, 0.08);
    box-shadow: 0 0 16px rgba(20, 184, 166, 0.1);
}

.select-card .select-card-icon {
    font-size: 28px;
    margin-bottom: 8px;
    display: block;
}

.select-card .select-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.select-card .select-card-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ---- Option Card (Checkbox/Radio alternative) ---- */
.option-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.option-card:hover {
    border-color: rgba(20, 184, 166, 0.25);
    background: rgba(30, 37, 64, 0.8);
}

.option-card.selected {
    border-color: var(--teal-primary);
    background: rgba(20, 184, 166, 0.06);
}

.option-card .option-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.option-card .option-content h6 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 2px;
}

.option-card .option-content p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.option-card .option-check {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.option-card.selected .option-check {
    background: var(--teal-primary);
    border-color: var(--teal-primary);
    color: white;
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.3);
}

/* ---- Tags Input ---- */
.tags-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    min-height: 44px;
    align-items: center;
    transition: all var(--transition-fast);
    cursor: text;
}

.tags-input-wrapper:focus-within {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.tags-input-wrapper .tag-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    animation: fadeInUp 0.2s ease;
}

.tags-input-wrapper .tag-item .tag-remove {
    cursor: pointer;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
    line-height: 1;
}

.tags-input-wrapper .tag-item .tag-remove:hover {
    opacity: 1;
}

.tags-input-wrapper input {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    flex: 1;
    min-width: 80px;
    padding: 2px 0;
}

.tags-input-wrapper input::placeholder {
    color: var(--text-muted);
}

/* ---- Star Rating ---- */
.star-rating {
    display: flex;
    gap: 6px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.star-rating input {
    display: none;
}

.star-rating label {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}

/* ---- Enhanced Range Slider ---- */
.range-enhanced {
    position: relative;
}

.range-enhanced .form-range {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: linear-gradient(90deg, var(--teal-primary), var(--neon-blue));
    border-radius: 3px;
    outline: none;
}

.range-enhanced .form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--teal-primary);
    border: 3px solid var(--bg-card);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.4);
    transition: all var(--transition-fast);
}

.range-enhanced .form-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px rgba(20, 184, 166, 0.5);
}

.range-enhanced .range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.range-enhanced .range-value-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--teal-primary);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    min-width: 36px;
}

/* ---- Form Floating Enhancement ---- */
.page-content .form-floating > .form-control,
.page-content .form-floating > .form-select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    height: 56px;
    padding: 1.625rem 0.875rem 0.625rem;
}

.page-content .form-floating > .form-control::placeholder {
    color: transparent;
}

.page-content .form-floating > label {
    color: var(--text-muted);
    padding: 1rem 0.875rem;
    font-size: 13.5px;
    transition: all 0.15s ease;
    transform-origin: 0 0;
}

.page-content .form-floating > .form-control:focus,
.page-content .form-floating > .form-select:focus {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.page-content .form-floating > .form-control:focus::placeholder {
    color: var(--text-muted);
}

.page-content .form-floating > .form-control:focus ~ label,
.page-content .form-floating > .form-control:not(:placeholder-shown) ~ label,
.page-content .form-floating > .form-select ~ label {
    color: var(--teal-primary);
    font-weight: 600;
    opacity: 1;
    transform: scale(0.8) translateY(-0.5rem) translateX(0.15rem);
}

/* ---- Enhanced Input Group ---- */
.page-content .input-group-text {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 13.5px;
    transition: all var(--transition-fast);
}

.page-content .input-group:focus-within .input-group-text {
    border-color: var(--teal-primary);
    color: var(--teal-primary);
}

/* ---- Validation Enhancement ---- */
.page-content .form-control.is-valid {
    border-color: var(--neon-green) !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1);
    background-image: none;
    padding-right: 14px;
}

.page-content .form-control.is-invalid {
    border-color: var(--neon-red) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
    background-image: none;
    padding-right: 14px;
}

.page-content .valid-feedback {
    color: var(--neon-green);
    font-size: 12px;
    font-weight: 500;
}

.page-content .invalid-feedback {
    color: var(--neon-red);
    font-size: 12px;
    font-weight: 500;
}

/* ---- Disabled/Readonly Enhancement ---- */
.page-content .form-control:disabled,
.page-content .form-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-content .form-control[readonly] {
    background: rgba(30, 37, 64, 0.5);
    border-style: dashed;
}

/* ---- Color Picker Enhancement ---- */
.page-content .form-control-color {
    width: 60px;
    height: 44px;
    padding: 4px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

/* ---- Dropdown Menu for Forms ---- */
.page-content .dropdown-menu {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 6px;
}

.page-content .dropdown-item {
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    transition: all var(--transition-fast);
}

.page-content .dropdown-item:hover {
    background: rgba(20, 184, 166, 0.08);
    color: var(--teal-light);
}

/* ---- Code Block ---- */
.code-block {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12.5px;
    color: var(--teal-light);
    overflow-x: auto;
    line-height: 1.8;
}

/* ---- Rating Stars ---- */
.rating-stars {
    display: flex;
    gap: 4px;
}

.rating-stars i {
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.rating-stars i.active,
.rating-stars i:hover {
    color: #fbbf24;
}

/* ============================================
   TEMEL MODALLER - Status & Trigger Styles
   ============================================ */

/* ---- Status Modal Icon ---- */
.status-modal-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 36px;
    animation: statusBounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.status-modal-icon.success {
    background: rgba(34, 197, 94, 0.12);
    color: var(--neon-green);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.3);
    animation: statusBounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
    pulseSuccess 2s ease-in-out infinite;
}

.status-modal-icon.danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--neon-red);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
    animation: statusBounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
    pulseDanger 2s ease-in-out infinite;
}

.status-modal-icon.warning {
    background: rgba(249, 115, 22, 0.12);
    color: var(--neon-orange);
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.3);
    animation: statusBounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
    pulseWarning 2s ease-in-out infinite;
}

.status-modal-icon.info {
    background: rgba(59, 130, 246, 0.12);
    color: var(--neon-blue);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3);
    animation: statusBounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
    pulseInfo 2s ease-in-out infinite;
}

@keyframes statusBounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.15); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes pulseSuccess {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
}

@keyframes pulseDanger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}

@keyframes pulseWarning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.3); }
    50% { box-shadow: 0 0 0 12px rgba(249, 115, 22, 0); }
}

@keyframes pulseInfo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
}

/* ---- Modal Trigger Buttons ---- */
.btn-modal-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.btn-modal-trigger:hover {
    transform: translateY(-2px);
}

.btn-modal-trigger.success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--neon-green);
    border-color: rgba(34, 197, 94, 0.2);
}
.btn-modal-trigger.success:hover {
    background: rgba(34, 197, 94, 0.18);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.15);
}

.btn-modal-trigger.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--neon-red);
    border-color: rgba(239, 68, 68, 0.2);
}
.btn-modal-trigger.danger:hover {
    background: rgba(239, 68, 68, 0.18);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.15);
}

.btn-modal-trigger.warning {
    background: rgba(249, 115, 22, 0.1);
    color: var(--neon-orange);
    border-color: rgba(249, 115, 22, 0.2);
}
.btn-modal-trigger.warning:hover {
    background: rgba(249, 115, 22, 0.18);
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.15);
}

.btn-modal-trigger.info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--neon-blue);
    border-color: rgba(59, 130, 246, 0.2);
}
.btn-modal-trigger.info:hover {
    background: rgba(59, 130, 246, 0.18);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
}

.btn-modal-trigger.teal {
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-light);
    border-color: rgba(20, 184, 166, 0.2);
}
.btn-modal-trigger.teal:hover {
    background: rgba(20, 184, 166, 0.18);
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.15);
}

/* ---- Danger Custom Button ---- */
.btn-danger-custom {
    background: linear-gradient(135deg, var(--neon-red), #dc2626);
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-danger-custom:hover {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
}

/* ============================================
   BUTONLAR PAGE - Enhanced Button Styles
   ============================================ */

/* ---- Icon Only Button ---- */
.btn-icon-only {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 16px;
}

/* ---- Icon Circle Button ---- */
.btn-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: white;
}

.btn-icon-circle.teal {
    background: rgba(20, 184, 166, 0.15);
    color: var(--teal-light);
}
.btn-icon-circle.teal:hover {
    background: var(--teal-primary);
    color: white;
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.4);
}

.btn-icon-circle.purple {
    background: rgba(168, 85, 247, 0.15);
    color: var(--neon-purple);
}
.btn-icon-circle.purple:hover {
    background: var(--neon-purple);
    color: white;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

.btn-icon-circle.blue {
    background: rgba(59, 130, 246, 0.15);
    color: var(--neon-blue);
}
.btn-icon-circle.blue:hover {
    background: var(--neon-blue);
    color: white;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.btn-icon-circle.red {
    background: rgba(239, 68, 68, 0.15);
    color: var(--neon-red);
}
.btn-icon-circle.red:hover {
    background: var(--neon-red);
    color: white;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

/* ---- Neon Glow Buttons ---- */
.btn-neon {
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.btn-neon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.btn-neon:hover::before {
    opacity: 1;
}

.btn-neon:hover {
    transform: translateY(-2px);
}

.btn-neon.teal {
    background: rgba(20, 184, 166, 0.12);
    color: var(--teal-light);
    border-color: rgba(20, 184, 166, 0.25);
}
.btn-neon.teal:hover {
    box-shadow: 0 0 24px rgba(20, 184, 166, 0.35), 0 0 48px rgba(20, 184, 166, 0.15), inset 0 0 12px rgba(20, 184, 166, 0.1);
    border-color: var(--teal-primary);
    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
}

.btn-neon.purple {
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.25);
}
.btn-neon.purple:hover {
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.35), 0 0 48px rgba(168, 85, 247, 0.15), inset 0 0 12px rgba(168, 85, 247, 0.1);
    border-color: var(--neon-purple);
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

.btn-neon.blue {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.25);
}
.btn-neon.blue:hover {
    box-shadow: 0 0 24px rgba(59, 130, 246, 0.35), 0 0 48px rgba(59, 130, 246, 0.15), inset 0 0 12px rgba(59, 130, 246, 0.1);
    border-color: var(--neon-blue);
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.btn-neon.pink {
    background: rgba(236, 72, 153, 0.12);
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.25);
}
.btn-neon.pink:hover {
    box-shadow: 0 0 24px rgba(236, 72, 153, 0.35), 0 0 48px rgba(236, 72, 153, 0.15), inset 0 0 12px rgba(236, 72, 153, 0.1);
    border-color: var(--neon-pink);
    text-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

.btn-neon.orange {
    background: rgba(249, 115, 22, 0.12);
    color: #fb923c;
    border-color: rgba(249, 115, 22, 0.25);
}
.btn-neon.orange:hover {
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.35), 0 0 48px rgba(249, 115, 22, 0.15), inset 0 0 12px rgba(249, 115, 22, 0.1);
    border-color: var(--neon-orange);
    text-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
}

.btn-neon.green {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.25);
}
.btn-neon.green:hover {
    box-shadow: 0 0 24px rgba(34, 197, 94, 0.35), 0 0 48px rgba(34, 197, 94, 0.15), inset 0 0 12px rgba(34, 197, 94, 0.1);
    border-color: var(--neon-green);
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

/* ---- Gradient Buttons ---- */
.btn-gradient {
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    color: white;
    background-size: 200% auto;
}

.btn-gradient:hover {
    background-position: right center;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: white;
}

.btn-gradient.sunset {
    background-image: linear-gradient(135deg, #f97316, #ef4444, #ec4899);
}
.btn-gradient.sunset:hover {
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.35);
}

.btn-gradient.ocean {
    background-image: linear-gradient(135deg, #06b6d4, #3b82f6, #6366f1);
}
.btn-gradient.ocean:hover {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.35);
}

.btn-gradient.aurora {
    background-image: linear-gradient(135deg, #14b8a6, #a855f7, #ec4899);
}
.btn-gradient.aurora:hover {
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.35);
}

.btn-gradient.candy {
    background-image: linear-gradient(135deg, #ec4899, #f472b6, #a855f7);
}
.btn-gradient.candy:hover {
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.35);
}

.btn-gradient.forest {
    background-image: linear-gradient(135deg, #22c55e, #14b8a6, #06b6d4);
}
.btn-gradient.forest:hover {
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.35);
}

.btn-gradient.royal {
    background-image: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
}
.btn-gradient.royal:hover {
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
}

/* ---- Social Media Buttons ---- */
.btn-social {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    color: white;
}

.btn-social:hover {
    transform: translateY(-2px);
    color: white;
}

.btn-social.github { background: #24292e; }
.btn-social.github:hover { box-shadow: 0 4px 16px rgba(36, 41, 46, 0.5); }

.btn-social.twitter { background: #000000; }
.btn-social.twitter:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); }

.btn-social.google { background: #ea4335; }
.btn-social.google:hover { box-shadow: 0 4px 16px rgba(234, 67, 53, 0.4); }

.btn-social.discord { background: #5865F2; }
.btn-social.discord:hover { box-shadow: 0 4px 16px rgba(88, 101, 242, 0.4); }

.btn-social.youtube { background: #FF0000; }
.btn-social.youtube:hover { box-shadow: 0 4px 16px rgba(255, 0, 0, 0.35); }

.btn-social.linkedin { background: #0A66C2; }
.btn-social.linkedin:hover { box-shadow: 0 4px 16px rgba(10, 102, 194, 0.4); }

/* ---- Social Icon-Only Buttons ---- */
.btn-social-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-social-icon:hover {
    transform: translateY(-2px);
    border-color: transparent;
    color: white;
}

.btn-social-icon.github { color: #e6edf3; }
.btn-social-icon.github:hover { background: #24292e; box-shadow: 0 4px 16px rgba(36, 41, 46, 0.4); }

.btn-social-icon.twitter { color: #e7e9ea; }
.btn-social-icon.twitter:hover { background: #000; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }

.btn-social-icon.google { color: #ea4335; }
.btn-social-icon.google:hover { background: #ea4335; color: white; box-shadow: 0 4px 16px rgba(234, 67, 53, 0.4); }

.btn-social-icon.discord { color: #5865F2; }
.btn-social-icon.discord:hover { background: #5865F2; color: white; box-shadow: 0 4px 16px rgba(88, 101, 242, 0.4); }

.btn-social-icon.youtube { color: #FF0000; }
.btn-social-icon.youtube:hover { background: #FF0000; color: white; box-shadow: 0 4px 16px rgba(255, 0, 0, 0.35); }

.btn-social-icon.linkedin { color: #0A66C2; }
.btn-social-icon.linkedin:hover { background: #0A66C2; color: white; box-shadow: 0 4px 16px rgba(10, 102, 194, 0.4); }

.btn-social-icon.instagram { color: #E4405F; }
.btn-social-icon.instagram:hover { background: linear-gradient(135deg, #833AB4, #E4405F, #FCAF45); color: white; box-shadow: 0 4px 16px rgba(228, 64, 95, 0.4); }

.btn-social-icon.whatsapp { color: #25D366; }
.btn-social-icon.whatsapp:hover { background: #25D366; color: white; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4); }

/* ---- 3D Buttons ---- */
.btn-3d {
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.1s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    color: white;
    position: relative;
}

.btn-3d:active {
    transform: translateY(3px);
}

.btn-3d.teal {
    background: var(--teal-primary);
    box-shadow: 0 4px 0 var(--teal-dark), 0 6px 12px rgba(20, 184, 166, 0.2);
}
.btn-3d.teal:active { box-shadow: 0 1px 0 var(--teal-dark); }

.btn-3d.purple {
    background: var(--neon-purple);
    box-shadow: 0 4px 0 #7c3aed, 0 6px 12px rgba(168, 85, 247, 0.2);
}
.btn-3d.purple:active { box-shadow: 0 1px 0 #7c3aed; }

.btn-3d.blue {
    background: var(--neon-blue);
    box-shadow: 0 4px 0 #2563eb, 0 6px 12px rgba(59, 130, 246, 0.2);
}
.btn-3d.blue:active { box-shadow: 0 1px 0 #2563eb; }

.btn-3d.red {
    background: var(--neon-red);
    box-shadow: 0 4px 0 #dc2626, 0 6px 12px rgba(239, 68, 68, 0.2);
}
.btn-3d.red:active { box-shadow: 0 1px 0 #dc2626; }

.btn-3d.orange {
    background: var(--neon-orange);
    box-shadow: 0 4px 0 #ea580c, 0 6px 12px rgba(249, 115, 22, 0.2);
}
.btn-3d.orange:active { box-shadow: 0 1px 0 #ea580c; }

/* ---- Ripple Button ---- */
.btn-ripple {
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-fast);
}

.btn-ripple:hover {
    transform: translateY(-1px);
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: var(--ripple-color, rgba(255, 255, 255, 0.4));
    transform: scale(0);
    animation: rippleAnim 0.6s ease-out;
    pointer-events: none;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ---- Pulse Button ---- */
.btn-pulse {
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    position: relative;
}

.btn-pulse.teal {
    background: var(--teal-primary);
    animation: pulseBtnTeal 2s ease-in-out infinite;
}

.btn-pulse.red {
    background: var(--neon-red);
    animation: pulseBtnRed 2s ease-in-out infinite;
}

@keyframes pulseBtnTeal {
    0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.5); }
    50% { box-shadow: 0 0 0 10px rgba(20, 184, 166, 0); }
}

@keyframes pulseBtnRed {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

/* ---- Hover Slide Button ---- */
.btn-hover-slide {
    padding: 10px 28px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: 1px solid var(--teal-primary);
    background: transparent;
    color: var(--teal-light);
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
    z-index: 1;
}

.btn-hover-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--teal-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-hover-slide:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-hover-slide:hover {
    color: white;
}

/* ---- Hover Fill Button ---- */
.btn-hover-fill {
    padding: 10px 28px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: 1px solid var(--neon-purple);
    background: transparent;
    color: var(--neon-purple);
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}

.btn-hover-fill::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: var(--neon-purple);
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-hover-fill:hover::before {
    height: 100%;
}

.btn-hover-fill:hover {
    color: white;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
}

/* ---- Shine Button ---- */
.btn-shine {
    padding: 10px 28px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-fast);
}

.btn-shine:hover {
    transform: translateY(-2px);
}

.btn-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-25deg);
    animation: shineAnim 3s ease-in-out infinite;
}

@keyframes shineAnim {
    0%, 100% { left: -75%; }
    50% { left: 125%; }
}

/* ---- Counter Display ---- */
.counter-display {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    min-width: 60px;
    text-align: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 16px;
    font-variant-numeric: tabular-nums;
}

/* ---- Like Button ---- */
.btn-like {
    padding: 10px 20px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
}

.btn-like:hover {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.06);
}

.btn-like.liked {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
    color: var(--neon-red);
}

.btn-like.liked i {
    animation: likeAnim 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.btn-like .like-count {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.btn-like.liked .like-count {
    background: rgba(239, 68, 68, 0.15);
}

@keyframes likeAnim {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* ---- Copy Button ---- */
.btn-copy {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-fast);
}

.btn-copy:hover {
    border-color: rgba(20, 184, 166, 0.3);
    color: var(--teal-light);
}

.btn-copy.copied {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.1);
    color: var(--neon-green);
}

/* ============================================
   TABLOLAR PAGE - Enhanced Table Styles
   ============================================ */

/* ---- Striped & Hover Table ---- */
.table-striped-dark tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.table-hover-dark tbody tr {
    transition: background var(--transition-fast);
}

.table-hover-dark tbody tr:hover {
    background: rgba(20, 184, 166, 0.06);
}

/* ---- Table Product Icon ---- */
.table-product-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.table-product-icon.teal { background: rgba(20, 184, 166, 0.12); color: var(--teal-primary); }
.table-product-icon.purple { background: rgba(168, 85, 247, 0.12); color: var(--neon-purple); }
.table-product-icon.blue { background: rgba(59, 130, 246, 0.12); color: var(--neon-blue); }
.table-product-icon.orange { background: rgba(249, 115, 22, 0.12); color: var(--neon-orange); }
.table-product-icon.pink { background: rgba(236, 72, 153, 0.12); color: var(--neon-pink); }

/* ---- Stock Indicator ---- */
.stock-indicator {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
}

.stock-indicator.high { background: rgba(34, 197, 94, 0.12); color: var(--neon-green); }
.stock-indicator.medium { background: rgba(249, 115, 22, 0.12); color: var(--neon-orange); }
.stock-indicator.low { background: rgba(239, 68, 68, 0.12); color: var(--neon-red); }

/* ---- Table User ---- */
.table-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---- Role Badges ---- */
.role-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.role-badge.admin { background: rgba(20, 184, 166, 0.12); color: var(--teal-light); }
.role-badge.editor { background: rgba(168, 85, 247, 0.12); color: var(--neon-purple); }
.role-badge.viewer { background: rgba(59, 130, 246, 0.12); color: var(--neon-blue); }
.role-badge.moderator { background: rgba(249, 115, 22, 0.12); color: var(--neon-orange); }

/* ---- Table Actions ---- */
.table-actions {
    display: flex;
    gap: 4px;
}

.btn-table-action {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 13px;
}

.btn-table-action:hover {
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-light);
    border-color: rgba(20, 184, 166, 0.2);
}

.btn-table-action.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--neon-red);
    border-color: rgba(239, 68, 68, 0.2);
}

/* ---- Selected Row ---- */
.table-dark-custom tbody tr.row-selected {
    background: rgba(20, 184, 166, 0.06);
}

/* ---- Department Tag ---- */
.dept-tag {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* ---- DataTable Toolbar ---- */
.dt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.dt-toolbar-left,
.dt-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dt-search {
    position: relative;
}

.dt-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
}

.dt-search input {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px 8px 36px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    width: 240px;
    transition: all var(--transition-fast);
}

.dt-search input:focus {
    outline: none;
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.dt-search input::placeholder {
    color: var(--text-muted);
}

.dt-select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dt-select:focus {
    outline: none;
    border-color: var(--teal-primary);
}

.dt-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.dt-date {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    color-scheme: dark;
}

.dt-date:focus {
    outline: none;
    border-color: var(--teal-primary);
}

.dt-filter-group {
    display: flex;
    gap: 8px;
}

.dt-export-group {
    display: flex;
    gap: 2px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.dt-export-group .dt-btn {
    border: none;
    border-radius: 0;
    border-right: 1px solid var(--border-color);
}

.dt-export-group .dt-btn:last-child {
    border-right: none;
}

.dt-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
}

.dt-btn:hover {
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-light);
    border-color: rgba(20, 184, 166, 0.2);
}

/* ---- DataTable Wrapper ---- */
.dt-table-wrapper {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

.dt-table-wrapper .table-dark-custom thead th {
    background: rgba(255, 255, 255, 0.04);
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ---- Sortable Column ---- */
.sortable {
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.sortable:hover {
    color: var(--teal-light);
}

.sort-icon {
    font-size: 10px !important;
    margin-left: 4px;
    transition: all var(--transition-fast);
}

/* ---- DataTable Footer ---- */
.dt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.dt-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.dt-select-sm {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px 8px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}

.dt-select-sm option {
    background: var(--bg-secondary);
}

/* ---- Pagination ---- */
.dt-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dt-page-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-family: 'Inter', sans-serif;
}

.dt-page-btn:hover:not(:disabled):not(.active) {
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-light);
    border-color: rgba(20, 184, 166, 0.2);
}

.dt-page-btn.active {
    background: var(--teal-primary);
    color: white;
    border-color: var(--teal-primary);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.3);
}

.dt-page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.dt-page-dots {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ---- Server-Side Specific ---- */
.server-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: all var(--transition-fast);
}

.server-status-dot.online {
    background: var(--neon-green);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.server-status-dot.loading {
    background: var(--neon-orange);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
    animation: pulseDot 0.8s ease-in-out infinite;
}

.server-status-dot.idle {
    background: var(--teal-primary);
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.ss-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.ss-info-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ss-request-badge {
    color: var(--teal-light);
    background: rgba(20, 184, 166, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
}

.ss-response-time {
    color: var(--neon-green);
}

.ss-info-right {
    color: var(--text-muted);
}

.ss-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 26, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--radius-sm);
}

.ss-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.ss-loading-indicator {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* ---- Editable Cells ---- */
.editable {
    padding: 4px 8px;
    border-radius: 4px;
    transition: all var(--transition-fast);
    cursor: text;
    border: 1px solid transparent;
    display: inline-block;
    min-width: 60px;
}

.editable:hover {
    border-color: rgba(20, 184, 166, 0.2);
    background: rgba(20, 184, 166, 0.04);
}

.editable:focus {
    outline: none;
    border-color: var(--teal-primary);
    background: rgba(20, 184, 166, 0.06);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
}

@keyframes editFlash {
    0% { background: rgba(34, 197, 94, 0.15); }
    100% { background: transparent; }
}

.dt-select-inline {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dt-select-inline:hover {
    border-color: rgba(20, 184, 166, 0.2);
    background: rgba(20, 184, 166, 0.04);
}

.dt-select-inline:focus {
    outline: none;
    border-color: var(--teal-primary);
    background: rgba(20, 184, 166, 0.06);
}

.dt-select-inline option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ---- Expandable Row ---- */
.expandable-row {
    cursor: pointer;
    transition: background var(--transition-fast);
}

.expandable-row:hover {
    background: rgba(20, 184, 166, 0.04);
}

.expand-icon {
    transition: transform var(--transition-fast);
    color: var(--text-muted);
    font-size: 14px;
}

.expand-content {
    display: none;
}

.expand-content.show {
    display: table-row;
}

.expand-content td {
    padding: 0 !important;
    border-bottom: 1px solid var(--border-color);
}

.expand-detail {
    padding: 16px 20px;
    background: rgba(20, 184, 166, 0.02);
    border-top: 1px solid rgba(20, 184, 166, 0.08);
    animation: fadeInUp 0.3s ease;
}

.expand-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.expand-detail-grid small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.expand-detail-grid p {
    font-size: 13px;
    color: var(--text-primary);
    margin: 4px 0 0;
}

/* ---- Table Toast ---- */
.table-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Inter', sans-serif;
}

.table-toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* ---- Tables Responsive ---- */
@media (max-width: 991.98px) {
    .dt-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .dt-toolbar-left,
    .dt-toolbar-right {
        justify-content: flex-start;
    }
    .dt-search input {
        width: 100%;
    }
    .dt-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .dt-filter-group {
        flex-direction: column;
        width: 100%;
    }
    .dt-select {
        width: 100%;
    }
    .dt-date {
        width: 100%;
    }
    .ss-info-bar {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }
    .expand-detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   SEKMELER PAGE - Enhanced Tab Styles
   ============================================ */

/* ---- Bootstrap Tabs Dark Override ---- */
.nav-tabs-dark {
    border-bottom: 1px solid var(--border-color);
    gap: 2px;
}

.nav-tabs-dark .nav-link {
    color: var(--text-muted);
    border: none;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-fast);
    border-bottom: 2px solid transparent;
    background: transparent;
    border-radius: 0;
}

.nav-tabs-dark .nav-link:hover {
    color: var(--text-primary);
    border-color: transparent;
    border-bottom-color: rgba(20, 184, 166, 0.3);
}

.nav-tabs-dark .nav-link.active {
    color: var(--teal-primary);
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--teal-primary);
}

.nav-tabs-dark .nav-link.disabled {
    color: var(--text-muted);
    opacity: 0.4;
}

/* ---- Bootstrap Pills Dark Override ---- */
.nav-pills-dark {
    gap: 6px;
}

.nav-pills-dark .nav-link {
    color: var(--text-muted);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    background: transparent;
    border: 1px solid transparent;
}

.nav-pills-dark .nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.nav-pills-dark .nav-link.active {
    color: var(--teal-light);
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.15);
}

/* ---- Tab Content ---- */
.tab-content-dark .tab-pane {
    padding: 16px 0 0;
}

.tab-content-dark .tab-pane h6 {
    font-size: 14px;
    margin-bottom: 8px;
}

.tab-content-dark .tab-pane p {
    font-size: 13px;
    line-height: 1.7;
}

/* ---- Tab Badge ---- */
.tab-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 6px;
}

.tab-badge.teal { background: var(--teal-primary); color: white; }
.tab-badge.purple { background: var(--neon-purple); color: white; }
.tab-badge.red { background: var(--neon-red); color: white; }
.tab-badge.blue { background: var(--neon-blue); color: white; }

/* ---- Tab List Item ---- */
.tab-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

.tab-list-item:last-child {
    border-bottom: none;
}

.tab-list-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.tab-list-dot.teal { background: var(--teal-primary); }
.tab-list-dot.purple { background: var(--neon-purple); }
.tab-list-dot.blue { background: var(--neon-blue); }

/* ---- Underline Tabs ---- */
.tabs-underline-nav {
    display: flex;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    gap: 4px;
    overflow-x: auto;
}

.tabs-underline-btn {
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: color var(--transition-fast);
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.tabs-underline-btn:hover {
    color: var(--text-primary);
}

.tabs-underline-btn.active {
    color: var(--teal-primary);
}

.tabs-underline-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: var(--teal-primary);
    border-radius: 2px 2px 0 0;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.4);
}

.tabs-underline-content {
    padding-top: 20px;
}

.tabs-underline-pane {
    display: none;
    animation: tabFadeIn 0.35s ease;
}

.tabs-underline-pane.active {
    display: block;
}

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

/* ---- Tab Stat Card ---- */
.tab-stat-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px;
    transition: all var(--transition-fast);
}

.tab-stat-card:hover {
    border-color: rgba(20, 184, 166, 0.15);
}

.tab-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 12px;
}

.tab-stat-icon.teal { background: rgba(20, 184, 166, 0.12); color: var(--teal-primary); }
.tab-stat-icon.purple { background: rgba(168, 85, 247, 0.12); color: var(--neon-purple); }
.tab-stat-icon.blue { background: rgba(59, 130, 246, 0.12); color: var(--neon-blue); }

.tab-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.tab-stat-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* ---- Vertical Tabs ---- */
.tabs-vertical {
    display: flex;
    gap: 20px;
    min-height: 240px;
}

.tabs-vertical-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    border-right: 1px solid var(--border-color);
    padding-right: 16px;
}

.tabs-vertical-btn {
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
}

.tabs-vertical-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.tabs-vertical-btn.active {
    color: var(--teal-light);
    background: rgba(20, 184, 166, 0.1);
    font-weight: 600;
}

.tabs-vertical-btn.active::after {
    content: '';
    position: absolute;
    right: -17px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--teal-primary);
    border-radius: 3px 0 0 3px;
}

.tabs-vertical-content {
    flex: 1;
}

.tabs-vertical-pane {
    display: none;
    animation: tabFadeIn 0.3s ease;
}

.tabs-vertical-pane.active {
    display: block;
}

.tabs-vertical-pane h6 {
    font-size: 15px;
    margin-bottom: 8px;
}

.tabs-vertical-pane p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ---- Segment Control ---- */
.segment-control {
    display: flex;
    position: relative;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 3px;
}

.segment-slider {
    position: absolute;
    top: 3px;
    bottom: 3px;
    background: var(--teal-primary);
    border-radius: 6px;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.3);
    z-index: 0;
}

.segment-btn {
    flex: 1;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: color var(--transition-fast);
    position: relative;
    z-index: 1;
}

.segment-btn.active {
    color: white;
}

.segment-btn:not(.active):hover {
    color: var(--text-primary);
}

.segment-icon-only .segment-btn {
    padding: 8px;
    font-size: 16px;
}

.segment-content .segment-pane {
    display: none;
    animation: tabFadeIn 0.3s ease;
    padding-top: 16px;
}

.segment-content .segment-pane.active {
    display: block;
}

/* ---- Gradient Pill Tabs ---- */
.tabs-gradient-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tab-gradient-pill {
    padding: 8px 18px;
    border-radius: 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tab-gradient-pill:hover {
    border-color: rgba(20, 184, 166, 0.3);
    color: var(--text-primary);
}

.tab-gradient-pill.active {
    background: linear-gradient(135deg, var(--teal-primary), var(--neon-blue));
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.3);
}

.tabs-gradient-content .tabs-gradient-pane {
    display: none;
    animation: tabFadeIn 0.3s ease;
    padding-top: 12px;
}

.tabs-gradient-content .tabs-gradient-pane.active {
    display: block;
}

/* ---- Neon Glow Tabs ---- */
.tabs-neon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tab-neon {
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-base);
}

.tab-neon:hover {
    color: var(--text-primary);
}

.tab-neon.active.teal {
    background: rgba(20, 184, 166, 0.12);
    color: var(--teal-light);
    border-color: rgba(20, 184, 166, 0.3);
    box-shadow: 0 0 16px rgba(20, 184, 166, 0.2), inset 0 0 8px rgba(20, 184, 166, 0.06);
    text-shadow: 0 0 6px rgba(20, 184, 166, 0.4);
}

.tab-neon.active.purple {
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.2), inset 0 0 8px rgba(168, 85, 247, 0.06);
    text-shadow: 0 0 6px rgba(168, 85, 247, 0.4);
}

.tab-neon.active.blue {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.2), inset 0 0 8px rgba(59, 130, 246, 0.06);
    text-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
}

.tab-neon.active.pink {
    background: rgba(236, 72, 153, 0.12);
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.3);
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.2), inset 0 0 8px rgba(236, 72, 153, 0.06);
    text-shadow: 0 0 6px rgba(236, 72, 153, 0.4);
}

.tabs-neon-content .tabs-neon-pane {
    display: none;
    animation: tabFadeIn 0.3s ease;
    padding-top: 12px;
}

.tabs-neon-content .tabs-neon-pane.active {
    display: block;
}

/* ---- Wizard Tabs ---- */
.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px 0 24px;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.wizard-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 2px solid var(--border-color);
    transition: all var(--transition-base);
    z-index: 1;
}

.wizard-step.active .wizard-step-circle {
    background: var(--teal-primary);
    color: white;
    border-color: var(--teal-primary);
    box-shadow: 0 0 16px rgba(20, 184, 166, 0.4);
}

.wizard-step.completed .wizard-step-circle {
    background: var(--neon-green);
    color: white;
    border-color: var(--neon-green);
}

.wizard-step-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.wizard-step.active .wizard-step-label {
    color: var(--teal-primary);
}

.wizard-step.completed .wizard-step-label {
    color: var(--neon-green);
}

.wizard-step-line {
    width: 80px;
    height: 2px;
    background: var(--border-color);
    margin: 0 12px;
    margin-bottom: 24px;
    border-radius: 1px;
    transition: background var(--transition-base);
}

.wizard-step-line.completed {
    background: var(--neon-green);
}

.wizard-content {
    min-height: 160px;
}

.wizard-pane {
    display: none;
    animation: tabFadeIn 0.35s ease;
}

.wizard-pane.active {
    display: block;
}

.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
}

.wizard-progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.wizard-success {
    text-align: center;
    padding: 20px;
}

.wizard-success-icon {
    font-size: 56px;
    color: var(--neon-green);
    margin-bottom: 16px;
    animation: statusBounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.wizard-success h5 {
    font-size: 18px;
    margin-bottom: 8px;
}

/* ---- Closable Tabs ---- */
.tabs-closable-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    padding-bottom: 0;
}

.tab-closable {
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tab-closable:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.tab-closable.active {
    color: var(--teal-light);
    border-bottom-color: var(--teal-primary);
    background: rgba(20, 184, 166, 0.06);
}

.tab-close {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all var(--transition-fast);
    opacity: 0.5;
}

.tab-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--neon-red);
    opacity: 1;
}

.tab-add {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px dashed var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    margin-left: 4px;
    flex-shrink: 0;
}

.tab-add:hover {
    border-color: var(--teal-primary);
    color: var(--teal-primary);
    background: rgba(20, 184, 166, 0.06);
}

.tabs-closable-content {
    padding-top: 12px;
}

.tabs-closable-pane {
    display: none;
    animation: tabFadeIn 0.25s ease;
}

.tabs-closable-pane.active {
    display: block;
}

/* ---- Card Tabs ---- */
.tabs-card-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tab-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: 'Inter', sans-serif;
    flex: 1;
    min-width: 120px;
}

.tab-card:hover {
    border-color: rgba(20, 184, 166, 0.2);
}

.tab-card.active {
    border-color: var(--teal-primary);
    background: rgba(20, 184, 166, 0.06);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.1);
}

.tab-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.tab-card-icon.teal { background: rgba(20, 184, 166, 0.12); color: var(--teal-primary); }
.tab-card-icon.purple { background: rgba(168, 85, 247, 0.12); color: var(--neon-purple); }
.tab-card-icon.blue { background: rgba(59, 130, 246, 0.12); color: var(--neon-blue); }

.tab-card-info strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.tab-card-info small {
    font-size: 11px;
    color: var(--text-muted);
}

.tabs-card-content .tabs-card-pane {
    display: none;
    animation: tabFadeIn 0.3s ease;
    padding-top: 4px;
}

.tabs-card-content .tabs-card-pane.active {
    display: block;
}

/* ---- Bordered Tabs ---- */
.tabs-bordered {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    overflow: hidden;
}

.tab-bordered {
    flex: 1;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: none;
    border-top: 3px solid transparent;
    border-right: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tab-bordered:last-child {
    border-right: none;
}

.tab-bordered:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.tab-bordered.active {
    background: rgba(20, 184, 166, 0.04);
    color: var(--text-primary);
}

.tab-bordered.active.teal { border-top-color: var(--teal-primary); }
.tab-bordered.active.purple { border-top-color: var(--neon-purple); }
.tab-bordered.active.blue { border-top-color: var(--neon-blue); }
.tab-bordered.active.orange { border-top-color: var(--neon-orange); }

.tabs-bordered-content {
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: 16px;
}

.tabs-bordered-content .tabs-bordered-pane {
    display: none;
    animation: tabFadeIn 0.25s ease;
}

.tabs-bordered-content .tabs-bordered-pane.active {
    display: block;
}

/* ---- Minimal Tabs ---- */
.tabs-minimal {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0;
}

.tab-minimal {
    padding: 8px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tab-minimal:hover {
    color: var(--text-primary);
}

.tab-minimal.active {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
    font-weight: 600;
}

.tabs-minimal-content .tabs-minimal-pane {
    display: none;
    animation: tabFadeIn 0.25s ease;
    padding-top: 12px;
}

.tabs-minimal-content .tabs-minimal-pane.active {
    display: block;
}

/* ---- Tabs Responsive ---- */
@media (max-width: 767.98px) {
    .tabs-vertical {
        flex-direction: column;
    }
    .tabs-vertical-nav {
        flex-direction: row;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 8px;
        overflow-x: auto;
    }
    .tabs-vertical-btn.active::after {
        display: none;
    }
    .wizard-steps {
        flex-wrap: wrap;
        gap: 8px;
    }
    .wizard-step-line {
        width: 30px;
        margin: 0 4px;
        margin-bottom: 24px;
    }
    .wizard-step-label {
        font-size: 10px;
    }
    .tabs-card-nav {
        flex-direction: column;
    }
}

/* ================================================================
   OFFCANVAS STYLES
   ================================================================ */

/* ---- Dark Offcanvas Base ---- */
.oc-dark {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

.oc-dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.oc-dark .btn-close:hover {
    opacity: 1;
}

/* ---- Offcanvas Header ---- */
.oc-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
    min-height: 60px;
}

.oc-header h5 {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}

.oc-header h6 {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.oc-header-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 14px;
}

.oc-header-btn:hover {
    border-color: var(--teal-primary);
    color: var(--teal-primary);
    background: rgba(20, 184, 166, 0.06);
}

/* ---- Offcanvas Body ---- */
.oc-body {
    padding: 20px;
    font-family: 'Inter', sans-serif;
}

/* ---- Offcanvas Footer ---- */
.oc-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    gap: 10px;
}

/* ---- Sections & Labels ---- */
.oc-section {
    margin-bottom: 20px;
}

.oc-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* ---- Check List ---- */
.oc-check-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oc-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.oc-check:hover {
    background: rgba(255, 255, 255, 0.03);
}

.oc-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* ---- Color Picker ---- */
.oc-color-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.oc-color-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    padding: 0;
}

.oc-color-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

.oc-color-btn.active {
    border-color: #fff;
    transform: scale(1.15);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
}

/* ---- Tags ---- */
.oc-tag {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.oc-tag:hover {
    border-color: rgba(20, 184, 166, 0.3);
    color: var(--text-primary);
}

.oc-tag.active {
    background: var(--teal-primary);
    border-color: var(--teal-primary);
    color: #fff;
}

/* ---- Shopping Cart ---- */
.oc-cart-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
    align-items: flex-start;
}

.oc-cart-item:first-child {
    padding-top: 0;
}

.oc-cart-item:last-of-type {
    border-bottom: none;
}

.oc-cart-img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.oc-cart-info {
    flex: 1;
    min-width: 0;
}

.oc-cart-info h6 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-cart-info span {
    font-size: 11px;
}

.oc-cart-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--teal-primary);
    margin-top: 4px;
}

.oc-cart-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.oc-qty {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.oc-qty button {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.oc-qty button:hover {
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-primary);
}

.oc-qty span {
    width: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    line-height: 28px;
}

.oc-cart-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.oc-cart-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--neon-red);
}

.oc-coupon {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.oc-cart-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    width: 100%;
}

.oc-cart-total {
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 15px;
    color: var(--teal-primary);
}

/* ---- Notification Panel ---- */
.oc-notif-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    gap: 0;
}

.oc-notif-tab {
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.oc-notif-tab:hover {
    color: var(--text-primary);
}

.oc-notif-tab.active {
    color: var(--teal-primary);
    border-bottom-color: var(--teal-primary);
}

.oc-notif-list {
    padding: 0;
}

.oc-notif {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
    cursor: pointer;
}

.oc-notif:hover {
    background: rgba(255, 255, 255, 0.02);
}

.oc-notif.unread {
    background: rgba(20, 184, 166, 0.03);
    border-left: 3px solid var(--teal-primary);
}

.oc-notif-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.oc-notif-icon.teal { background: rgba(20, 184, 166, 0.12); color: var(--teal-primary); }
.oc-notif-icon.purple { background: rgba(168, 85, 247, 0.12); color: var(--neon-purple); }
.oc-notif-icon.blue { background: rgba(59, 130, 246, 0.12); color: var(--neon-blue); }
.oc-notif-icon.green { background: rgba(34, 197, 94, 0.12); color: var(--neon-green); }
.oc-notif-icon.red { background: rgba(239, 68, 68, 0.12); color: var(--neon-red); }
.oc-notif-icon.orange { background: rgba(249, 115, 22, 0.12); color: var(--neon-orange); }

.oc-notif-content {
    flex: 1;
    min-width: 0;
}

.oc-notif-content strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.oc-notif-content p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.oc-notif-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
    opacity: 0.7;
}

/* ---- Profile Panel ---- */
.oc-profile-card {
    text-align: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.oc-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-primary), var(--neon-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin: 0 auto 12px;
    box-shadow: 0 0 24px rgba(20, 184, 166, 0.3);
}

.oc-profile-card h6 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.oc-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.oc-profile-stat {
    padding: 14px;
    text-align: center;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oc-profile-stat:last-child {
    border-right: none;
}

.oc-stat-val {
    font-size: 18px;
    font-weight: 800;
    color: var(--teal-primary);
}

.oc-stat-lbl {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ---- Menu List ---- */
.oc-menu-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oc-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.oc-menu-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--teal-primary);
}

.oc-menu-item i:first-child {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: var(--text-muted);
}

.oc-menu-item:hover i:first-child {
    color: var(--teal-primary);
}

/* ---- Settings Panel ---- */
.oc-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

.oc-setting-row:last-child {
    border-bottom: none;
}

.oc-setting-row span {
    display: flex;
    align-items: center;
}

/* ---- Chat Panel ---- */
.oc-chat-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding-bottom: 0 !important;
}

.oc-chat-date {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    padding: 8px 0;
    position: relative;
}

.oc-chat-date::before,
.oc-chat-date::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 30px);
    height: 1px;
    background: var(--border-color);
}

.oc-chat-date::before { left: 0; }
.oc-chat-date::after { right: 0; }

.oc-chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}

.oc-chat-msg.sent {
    align-self: flex-end;
    align-items: flex-end;
}

.oc-chat-msg.received {
    align-self: flex-start;
    align-items: flex-start;
}

.oc-chat-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

.oc-chat-msg.sent .oc-chat-bubble {
    background: var(--teal-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.oc-chat-msg.received .oc-chat-bubble {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}

.oc-chat-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    opacity: 0.7;
}

.oc-chat-input {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.oc-chat-input input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color var(--transition-fast);
}

.oc-chat-input input:focus {
    border-color: var(--teal-primary);
}

.oc-chat-input input::placeholder {
    color: var(--text-muted);
}

.oc-chat-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--teal-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 14px;
    flex-shrink: 0;
}

.oc-chat-send:hover {
    background: var(--teal-hover);
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(20, 184, 166, 0.4);
}

/* ---- Detail Panel ---- */
.oc-detail-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.oc-detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.oc-detail-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 13px;
}

.oc-detail-product:last-child {
    border-bottom: none;
}

/* ---- Timeline ---- */
.oc-timeline {
    position: relative;
    padding-left: 28px;
}

.oc-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border-color);
}

.oc-timeline-item {
    position: relative;
    padding-bottom: 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.oc-timeline-item:last-child {
    padding-bottom: 0;
}

.oc-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    left: -26px;
    top: 3px;
    border: 3px solid var(--bg-primary);
    z-index: 1;
}

.oc-timeline-dot.teal { background: var(--teal-primary); box-shadow: 0 0 8px rgba(20, 184, 166, 0.4); }
.oc-timeline-dot.green { background: var(--neon-green); box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); }
.oc-timeline-dot.blue { background: var(--neon-blue); box-shadow: 0 0 8px rgba(59, 130, 246, 0.4); }
.oc-timeline-dot.orange { background: var(--neon-orange); box-shadow: 0 0 8px rgba(249, 115, 22, 0.4); }
.oc-timeline-dot.purple { background: var(--neon-purple); box-shadow: 0 0 8px rgba(168, 85, 247, 0.4); }
.oc-timeline-dot.red { background: var(--neon-red); box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }

.oc-timeline-item div:last-child strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.oc-timeline-item div:last-child span {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- Activity Panel ---- */
.oc-activity-group {
    padding: 0;
}

.oc-activity-date {
    padding: 10px 20px;
    background: var(--bg-secondary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.oc-activity-item {
    display: flex;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.oc-activity-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* ---- Offcanvas Animations ---- */
.offcanvas.oc-dark.show .oc-notif,
.offcanvas.oc-dark.show .oc-cart-item,
.offcanvas.oc-dark.show .oc-activity-item,
.offcanvas.oc-dark.show .oc-menu-item,
.offcanvas.oc-dark.show .oc-timeline-item {
    animation: ocSlideIn 0.3s ease forwards;
    opacity: 0;
}

.offcanvas.oc-dark.show .oc-notif:nth-child(1),
.offcanvas.oc-dark.show .oc-cart-item:nth-child(1),
.offcanvas.oc-dark.show .oc-activity-item:nth-child(1) { animation-delay: 0.05s; }
.offcanvas.oc-dark.show .oc-notif:nth-child(2),
.offcanvas.oc-dark.show .oc-cart-item:nth-child(2),
.offcanvas.oc-dark.show .oc-activity-item:nth-child(2) { animation-delay: 0.1s; }
.offcanvas.oc-dark.show .oc-notif:nth-child(3),
.offcanvas.oc-dark.show .oc-cart-item:nth-child(3),
.offcanvas.oc-dark.show .oc-activity-item:nth-child(3) { animation-delay: 0.15s; }
.offcanvas.oc-dark.show .oc-notif:nth-child(4),
.offcanvas.oc-dark.show .oc-activity-item:nth-child(4) { animation-delay: 0.2s; }
.offcanvas.oc-dark.show .oc-notif:nth-child(5),
.offcanvas.oc-dark.show .oc-activity-item:nth-child(5) { animation-delay: 0.25s; }
.offcanvas.oc-dark.show .oc-menu-item:nth-child(1) { animation-delay: 0.05s; }
.offcanvas.oc-dark.show .oc-menu-item:nth-child(2) { animation-delay: 0.1s; }
.offcanvas.oc-dark.show .oc-menu-item:nth-child(3) { animation-delay: 0.15s; }
.offcanvas.oc-dark.show .oc-menu-item:nth-child(4) { animation-delay: 0.2s; }
.offcanvas.oc-dark.show .oc-menu-item:nth-child(5) { animation-delay: 0.25s; }
.offcanvas.oc-dark.show .oc-timeline-item:nth-child(1) { animation-delay: 0.05s; }
.offcanvas.oc-dark.show .oc-timeline-item:nth-child(2) { animation-delay: 0.1s; }
.offcanvas.oc-dark.show .oc-timeline-item:nth-child(3) { animation-delay: 0.15s; }
.offcanvas.oc-dark.show .oc-timeline-item:nth-child(4) { animation-delay: 0.2s; }

@keyframes ocSlideIn {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---- Offcanvas Backdrop ---- */
.offcanvas-backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ---- Offcanvas Responsive ---- */
@media (max-width: 767.98px) {
    .offcanvas.oc-dark[style*="width:400px"],
    .offcanvas.oc-dark[style*="width:380px"],
    .offcanvas.oc-dark[style*="width:360px"],
    .offcanvas.oc-dark[style*="width:480px"] {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .oc-cart-info h6 {
        font-size: 12px;
    }

    .oc-chat-msg {
        max-width: 90%;
    }
}

/* ================================================================
   CARDS STYLES
   ================================================================ */

/* ---- Stat / KPI Cards ---- */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.stat-card-icon.teal { background: rgba(20, 184, 166, 0.12); color: var(--teal-primary); }
.stat-card-icon.purple { background: rgba(168, 85, 247, 0.12); color: var(--neon-purple); }
.stat-card-icon.blue { background: rgba(59, 130, 246, 0.12); color: var(--neon-blue); }
.stat-card-icon.orange { background: rgba(249, 115, 22, 0.12); color: var(--neon-orange); }
.stat-card-icon.green { background: rgba(34, 197, 94, 0.12); color: var(--neon-green); }
.stat-card-icon.pink { background: rgba(236, 72, 153, 0.12); color: var(--neon-pink); }
.stat-card-icon.red { background: rgba(239, 68, 68, 0.12); color: var(--neon-red); }

.stat-card-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
}

.stat-card-badge.up {
    background: rgba(34, 197, 94, 0.1);
    color: var(--neon-green);
}

.stat-card-badge.down {
    background: rgba(239, 68, 68, 0.1);
    color: var(--neon-red);
}

.stat-card-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-card-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-card-spark {
    margin-top: 14px;
    height: 32px;
}

.spark-line {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spark-line.teal { stroke: var(--teal-primary); }
.spark-line.purple { stroke: var(--neon-purple); }
.spark-line.blue { stroke: var(--neon-blue); }
.spark-line.orange { stroke: var(--neon-orange); }

/* ---- Mini Stats ---- */
.mini-stat {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-base);
    text-align: center;
}

.mini-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
}

.mini-stat i {
    font-size: 22px;
}

.mini-stat-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
}

.mini-stat-lbl {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ---- Profile Cards ---- */
.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.profile-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.profile-card-cover {
    height: 80px;
    position: relative;
}

.profile-card-cover.teal { background: linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(59, 130, 246, 0.2)); }
.profile-card-cover.purple { background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.2)); }
.profile-card-cover.blue { background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(20, 184, 166, 0.2)); }
.profile-card-cover.orange { background: linear-gradient(135deg, rgba(249, 115, 22, 0.3), rgba(239, 68, 68, 0.2)); }

.profile-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-primary), var(--neon-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: -32px auto 0;
    border: 4px solid var(--bg-card);
    position: relative;
    z-index: 1;
}

.profile-card-body {
    padding: 14px 20px 20px;
    text-align: center;
}

.profile-card-body h6 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.profile-card-body > span {
    font-size: 12px;
}

.profile-card-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 16px 0;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.profile-card-stats div {
    text-align: center;
}

.profile-card-stats strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

.profile-card-stats span {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- Product Cards ---- */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.product-card:hover .product-card-actions {
    opacity: 1;
    transform: translateX(0);
}

.product-card-img {
    height: 180px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(59, 130, 246, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.product-card-img.purple { background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.08)); }
.product-card-img.blue { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(20, 184, 166, 0.08)); }
.product-card-img.green { background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(20, 184, 166, 0.08)); }

.product-card-icon {
    font-size: 56px;
    color: var(--text-muted);
    opacity: 0.4;
}

.product-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: var(--teal-primary);
    color: #fff;
    z-index: 1;
}

.product-card-badge.sale { background: var(--neon-red); }
.product-card-badge.hot { background: linear-gradient(135deg, var(--neon-orange), var(--neon-red)); }

.product-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(12px);
    transition: all var(--transition-base);
}

.product-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-card);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 14px;
    box-shadow: var(--shadow-sm);
}

.product-action-btn:hover {
    background: var(--teal-primary);
    color: #fff;
}

.product-action-btn.liked {
    background: var(--neon-red);
    color: #fff;
}

.product-card-body {
    padding: 16px;
}

.product-card-cat {
    font-size: 11px;
    color: var(--teal-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-card-body h6 {
    font-size: 14px;
    font-weight: 700;
    margin: 6px 0 8px;
}

.product-card-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: var(--neon-orange);
    margin-bottom: 12px;
}

.product-card-rating span {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 4px;
}

.product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.price-current {
    font-size: 18px;
    font-weight: 800;
    color: var(--teal-primary);
}

.price-old {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: line-through;
    margin-left: 8px;
}

.product-cart-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 16px;
}

.product-cart-btn:hover {
    background: var(--teal-primary);
    border-color: var(--teal-primary);
    color: #fff;
}

/* ---- Pricing Cards ---- */
.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    transition: all var(--transition-base);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.pricing-card.popular {
    border-color: var(--teal-primary);
    box-shadow: 0 0 30px rgba(20, 184, 166, 0.15);
}

.pricing-card.enterprise {
    border-color: rgba(168, 85, 247, 0.3);
}

.pricing-popular-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--teal-primary);
    color: #fff;
    padding: 4px 20px;
    border-radius: 0 0 12px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-card-header {
    text-align: center;
    margin-bottom: 20px;
}

.pricing-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-muted);
    margin: 0 auto 14px;
}

.pricing-icon.popular {
    background: rgba(20, 184, 166, 0.12);
    color: var(--teal-primary);
}

.pricing-icon.enterprise {
    background: rgba(168, 85, 247, 0.12);
    color: var(--neon-purple);
}

.pricing-card-header h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.pricing-card-header p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.pricing-card-price {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.pricing-currency {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-muted);
    vertical-align: top;
}

.pricing-amount {
    font-size: 48px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.pricing-period {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
}

.pricing-features li.included {
    color: var(--text-primary);
}

.pricing-features li.included i {
    color: var(--neon-green);
}

.pricing-features li.excluded {
    color: var(--text-muted);
    opacity: 0.5;
}

.pricing-features li.excluded i {
    color: var(--text-muted);
}

/* ---- Glassmorphism Cards ---- */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all var(--transition-base);
}

.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-shadow);
    border-color: rgba(255, 255, 255, 0.12);
}

.glass-card-orb {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    top: -30px;
    right: -30px;
    pointer-events: none;
}

.glass-card-orb.teal { background: var(--teal-primary); }
.glass-card-orb.purple { background: var(--neon-purple); }
.glass-card-orb.blue { background: var(--neon-blue); }
.glass-card-orb.orange { background: var(--neon-orange); }

.glass-card-orb-2 {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.3;
    bottom: -20px;
    left: -20px;
    pointer-events: none;
}

.glass-card-orb-2.purple { background: var(--neon-purple); }
.glass-card-orb-2.pink { background: var(--neon-pink); }
.glass-card-orb-2.green { background: var(--neon-green); }

.glass-card-content {
    position: relative;
    z-index: 1;
}

.glass-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(20, 184, 166, 0.15);
    color: var(--teal-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.glass-card h5 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.glass-card p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 0;
    line-height: 1.5;
}

.glass-card-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 14px;
}

.glass-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--teal-primary), var(--teal-light));
    transition: width 1.5s ease;
}

.glass-card-bar.green .glass-bar-fill {
    background: linear-gradient(90deg, var(--neon-green), var(--teal-primary));
}

.glass-metric {
    text-align: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    flex: 1;
}

.glass-metric-val {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

.glass-metric-lbl {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ---- Neon Glow Cards ---- */
.neon-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.neon-card:hover {
    transform: translateY(-4px);
}

.neon-card.teal:hover { border-color: var(--teal-primary); box-shadow: 0 0 30px rgba(20, 184, 166, 0.2), inset 0 0 30px rgba(20, 184, 166, 0.03); }
.neon-card.purple:hover { border-color: var(--neon-purple); box-shadow: 0 0 30px rgba(168, 85, 247, 0.2), inset 0 0 30px rgba(168, 85, 247, 0.03); }
.neon-card.blue:hover { border-color: var(--neon-blue); box-shadow: 0 0 30px rgba(59, 130, 246, 0.2), inset 0 0 30px rgba(59, 130, 246, 0.03); }
.neon-card.pink:hover { border-color: var(--neon-pink); box-shadow: 0 0 30px rgba(236, 72, 153, 0.2), inset 0 0 30px rgba(236, 72, 153, 0.03); }

.neon-card-bg-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 90px;
    opacity: 0.04;
    pointer-events: none;
    transition: all var(--transition-base);
}

.neon-card:hover .neon-card-bg-icon {
    opacity: 0.08;
    transform: scale(1.1) rotate(-5deg);
}

.neon-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.neon-card.teal .neon-card-icon { background: rgba(20, 184, 166, 0.12); color: var(--teal-primary); }
.neon-card.purple .neon-card-icon { background: rgba(168, 85, 247, 0.12); color: var(--neon-purple); }
.neon-card.blue .neon-card-icon { background: rgba(59, 130, 246, 0.12); color: var(--neon-blue); }
.neon-card.pink .neon-card-icon { background: rgba(236, 72, 153, 0.12); color: var(--neon-pink); }

.neon-card h6 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.neon-card p {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.neon-card-count {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

/* ---- Gradient Cards ---- */
.gradient-card {
    border-radius: var(--radius-lg);
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
    min-height: 200px;
    display: flex;
    align-items: flex-end;
}

.gradient-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.gradient-card.teal-blue { background: linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(59, 130, 246, 0.85)); }
.gradient-card.purple-pink { background: linear-gradient(135deg, rgba(168, 85, 247, 0.85), rgba(236, 72, 153, 0.85)); }
.gradient-card.orange-red { background: linear-gradient(135deg, rgba(249, 115, 22, 0.85), rgba(239, 68, 68, 0.85)); }

.gradient-card-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 40%);
    pointer-events: none;
}

.gradient-card-content {
    position: relative;
    z-index: 1;
}

.gradient-card-icon {
    font-size: 32px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
}

.gradient-card h5 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.gradient-card p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16px;
}

.gradient-card-btn {
    padding: 8px 20px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    backdrop-filter: blur(8px);
}

.gradient-card-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ---- Blog / Article Cards ---- */
.blog-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.blog-card-img {
    height: 140px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(59, 130, 246, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    color: var(--teal-primary);
    position: relative;
}

.blog-card-tag {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--teal-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-card-body {
    padding: 18px;
}

.blog-card-meta {
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.blog-card-body h6 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}

.blog-card-body p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.blog-card-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-primary), var(--neon-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.blog-card-author span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.blog-card-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.blog-card-stats i {
    margin-right: 3px;
}

/* ---- Testimonial Cards ---- */
.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all var(--transition-base);
    border-top: 3px solid var(--teal-primary);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.testimonial-card.purple { border-top-color: var(--neon-purple); }
.testimonial-card.orange { border-top-color: var(--neon-orange); }

.testimonial-quote {
    font-size: 32px;
    color: var(--teal-primary);
    line-height: 1;
    margin-bottom: 8px;
    opacity: 0.5;
}

.testimonial-card.purple .testimonial-quote { color: var(--neon-purple); }
.testimonial-card.orange .testimonial-quote { color: var(--neon-orange); }

.testimonial-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 14px;
    font-style: italic;
}

.testimonial-rating {
    display: flex;
    gap: 3px;
    font-size: 13px;
    color: var(--neon-orange);
    margin-bottom: 16px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-primary), var(--neon-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.testimonial-author strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.testimonial-author span {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- Flip Cards ---- */
.flip-card {
    perspective: 1000px;
    height: 220px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.flip-card-front {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.flip-card-front i {
    font-size: 40px;
    margin-bottom: 12px;
}

.flip-card-front.teal i { color: var(--teal-primary); }
.flip-card-front.purple i { color: var(--neon-purple); }
.flip-card-front.blue i { color: var(--neon-blue); }
.flip-card-front.orange i { color: var(--neon-orange); }

.flip-card-front.teal { border-bottom: 3px solid var(--teal-primary); }
.flip-card-front.purple { border-bottom: 3px solid var(--neon-purple); }
.flip-card-front.blue { border-bottom: 3px solid var(--neon-blue); }
.flip-card-front.orange { border-bottom: 3px solid var(--neon-orange); }

.flip-card-front h6 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.flip-card-front p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.flip-card-back {
    background: var(--bg-secondary);
    border: 1px solid rgba(20, 184, 166, 0.2);
    transform: rotateY(180deg);
}

.flip-card-back h6 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--teal-primary);
}

.flip-card-back ul {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    width: 100%;
}

.flip-card-back li {
    font-size: 12px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.flip-card-back li:last-child {
    border-bottom: none;
}

/* ---- Horizontal Cards ---- */
.horiz-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all var(--transition-base);
}

.horiz-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
}

.horiz-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.horiz-card-icon.teal { background: rgba(20, 184, 166, 0.12); color: var(--teal-primary); }
.horiz-card-icon.purple { background: rgba(168, 85, 247, 0.12); color: var(--neon-purple); }
.horiz-card-icon.blue { background: rgba(59, 130, 246, 0.12); color: var(--neon-blue); }
.horiz-card-icon.orange { background: rgba(249, 115, 22, 0.12); color: var(--neon-orange); }

.horiz-card-body {
    flex: 1;
    min-width: 0;
}

.horiz-card-body h6 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.horiz-card-avatars {
    display: flex;
    margin-left: auto;
}

.horiz-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    border: 2px solid var(--bg-card);
    margin-left: -6px;
}

.horiz-avatar:first-child {
    margin-left: 0;
}

.horiz-avatar.more {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-muted);
    font-size: 10px;
}

/* ---- Widget Cards ---- */
.widget-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all var(--transition-base);
    height: 100%;
}

.widget-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
}

/* Weather Widget */
.widget-weather-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.widget-weather-top h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.widget-weather-top span {
    font-size: 12px;
    color: var(--text-muted);
}

.widget-weather-temp {
    font-size: 48px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 12px;
}

.widget-weather-details {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 14px;
}

.widget-weather-details i {
    margin-right: 4px;
}

.widget-weather-forecast {
    display: flex;
    justify-content: space-between;
}

.widget-weather-forecast > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.widget-weather-forecast > div span:first-child {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.widget-weather-forecast > div span:last-child {
    font-weight: 700;
    color: var(--text-primary);
}

/* Music Widget */
.music-cover {
    height: 100px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.1));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--neon-purple);
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

.music-wave {
    position: absolute;
    bottom: 12px;
    right: 14px;
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 24px;
}

.music-wave span {
    width: 3px;
    border-radius: 2px;
    background: var(--neon-purple);
    animation: musicWave 1.2s ease-in-out infinite;
}

.music-wave span:nth-child(1) { height: 8px; animation-delay: 0s; }
.music-wave span:nth-child(2) { height: 16px; animation-delay: 0.15s; }
.music-wave span:nth-child(3) { height: 12px; animation-delay: 0.3s; }
.music-wave span:nth-child(4) { height: 20px; animation-delay: 0.45s; }
.music-wave span:nth-child(5) { height: 10px; animation-delay: 0.6s; }

@keyframes musicWave {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.4); }
}

.music-info {
    text-align: center;
    margin-bottom: 12px;
}

.music-info h6 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.music-info span {
    font-size: 12px;
    color: var(--text-muted);
}

.music-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    margin-bottom: 4px;
    overflow: hidden;
}

.music-progress-bar {
    height: 100%;
    background: var(--neon-purple);
    border-radius: 2px;
}

.music-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.music-controls button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 14px;
}

.music-controls button:hover {
    color: var(--text-primary);
}

.music-play {
    width: 40px !important;
    height: 40px !important;
    background: var(--neon-purple) !important;
    color: #fff !important;
    font-size: 18px !important;
}

.music-play:hover {
    transform: scale(1.1);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.4);
}

/* Tasks Widget */
.widget-tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.widget-tasks-header h6 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.widget-task-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.widget-task {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    transition: background var(--transition-fast);
}

.widget-task:hover {
    background: rgba(255, 255, 255, 0.03);
}

.widget-task.done span {
    text-decoration: line-through;
    color: var(--text-muted);
}

.widget-task input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all var(--transition-fast);
}

.widget-task input[type="checkbox"]:checked {
    background: var(--teal-primary);
    border-color: var(--teal-primary);
}

.widget-task input[type="checkbox"]:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.widget-task-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}

.widget-task-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--teal-primary), var(--neon-green));
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Live Activity Widget */
.widget-live-header {
    margin-bottom: 14px;
}

.widget-live-header h6 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon-green);
    display: inline-block;
    animation: livePulse 2s ease infinite;
}

@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.widget-live-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.widget-live-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.widget-live-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.widget-live-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.widget-live-info {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.widget-live-info strong {
    color: var(--text-primary);
}

.widget-live-info span {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* ---- Expandable Cards ---- */
.expand-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-base);
}

.expand-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.expand-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
}

.expand-arrow {
    color: var(--text-muted);
    font-size: 14px;
    transition: transform var(--transition-base);
}

.expand-card.expanded .expand-arrow {
    transform: rotate(180deg);
}

.expand-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 20px;
}

.expand-card.expanded .expand-card-body {
    max-height: 300px;
    padding: 0 20px 20px;
}

.expand-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 12px;
}

.expand-detail > span:first-child {
    width: 100px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.expand-detail > span:last-child {
    width: 40px;
    text-align: right;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
}

.expand-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.expand-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s ease;
}

.expand-bar-fill.teal { background: var(--teal-primary); }
.expand-bar-fill.purple { background: var(--neon-purple); }
.expand-bar-fill.blue { background: var(--neon-blue); }
.expand-bar-fill.orange { background: var(--neon-orange); }

/* ---- Dismissible Card ---- */
.dismiss-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 22px;
    position: relative;
    transition: all 0.4s ease;
    border-left: 4px solid var(--neon-green);
}

.dismiss-card-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all var(--transition-fast);
}

.dismiss-card-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--neon-red);
}

/* ---- Cards Responsive ---- */
@media (max-width: 767.98px) {
    .stat-card-value {
        font-size: 22px;
    }

    .pricing-amount {
        font-size: 36px;
    }

    .flip-card {
        height: 200px;
    }

    .gradient-card {
        min-height: 180px;
    }

    .horiz-card-avatars {
        display: none;
    }

    .widget-weather-forecast {
        gap: 4px;
    }
}

/* ================================================================
   AUTH PAGES STYLES
   ================================================================ */

/* ---- Auth Body ---- */
.auth-body {
    min-height: 100vh;
    background: var(--bg-primary);
    overflow-x: hidden;
    position: relative;
}

/* ---- Animated Background ---- */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.auth-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.25;
}

.auth-orb.orb-1 {
    width: 500px;
    height: 500px;
    background: var(--teal-primary);
    top: -150px;
    right: -100px;
    animation: authOrbFloat 20s ease-in-out infinite;
}

.auth-orb.orb-2 {
    width: 400px;
    height: 400px;
    background: var(--neon-blue);
    bottom: -100px;
    left: -100px;
    animation: authOrbFloat 25s ease-in-out infinite reverse;
}

.auth-orb.orb-3 {
    width: 300px;
    height: 300px;
    background: var(--neon-purple);
    top: 50%;
    left: 40%;
    animation: authOrbFloat 18s ease-in-out infinite 5s;
}

@keyframes authOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(50px, -30px) scale(1.1); }
    50% { transform: translate(-20px, 50px) scale(0.95); }
    75% { transform: translate(30px, 20px) scale(1.05); }
}

.auth-grid {
    position: absolute;
    inset: 0;
    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: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* ---- Auth Wrapper ---- */
.auth-wrapper {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
}

.auth-wrapper.auth-centered {
    align-items: center;
    justify-content: center;
}

/* ---- Brand Panel (Left) ---- */
.auth-brand-panel {
    width: 45%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.auth-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.05), rgba(59, 130, 246, 0.03));
    border-right: 1px solid var(--border-color);
}

.auth-brand-content {
    position: relative;
    z-index: 1;
    max-width: 440px;
}

.auth-brand-logo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--teal-primary), var(--neon-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    font-family: 'DM Serif Display', serif;
    margin-bottom: 28px;
    box-shadow: 0 0 30px rgba(20, 184, 166, 0.3);
}

.auth-brand-content h1 {
    font-family: 'DM Serif Display', serif;
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 12px;
}

.auth-brand-content h1 span {
    color: var(--teal-primary);
}

.auth-brand-content > p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 36px;
}

/* Auth Features */
.auth-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 36px;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(20, 184, 166, 0.12);
    color: var(--teal-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.auth-feature strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.auth-feature span {
    font-size: 12px;
    color: var(--text-muted);
}

/* Auth Brand Stats */
.auth-brand-stats {
    display: flex;
    gap: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--border-color);
}

.auth-brand-stats > div {
    display: flex;
    flex-direction: column;
}

.auth-stat-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--teal-primary);
}

.auth-stat-lbl {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Auth Testimonial */
.auth-testimonial {
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: 32px;
}

.auth-testimonial p {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 14px;
}

.auth-testimonial-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-testimonial-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.auth-testimonial-author strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.auth-testimonial-author span {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- Form Panel (Right) ---- */
.auth-form-panel {
    flex: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.auth-form-panel.auth-form-centered {
    min-height: auto;
    width: 100%;
    max-width: 520px;
}

.auth-form-container {
    width: 100%;
    max-width: 420px;
}

.auth-form-centered .auth-form-container {
    max-width: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 40px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--glass-shadow);
}

/* ---- Form Header ---- */
.auth-form-header {
    margin-bottom: 28px;
}

.auth-mobile-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--teal-primary), var(--neon-blue));
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    font-family: 'DM Serif Display', serif;
    margin-bottom: 20px;
}

.auth-form-header h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 6px;
}

.auth-form-header p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* ---- Reset Icon ---- */
.auth-reset-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.12);
    color: var(--neon-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
}

/* ---- Social Login ---- */
.auth-social {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.auth-social-btn {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-social-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.auth-social-btn.google:hover { border-color: #ea4335; color: #ea4335; }
.auth-social-btn.github:hover { border-color: #f0f6fc; }
.auth-social-btn.apple:hover { border-color: #f0f6fc; }

/* ---- Divider ---- */
.auth-divider {
    text-align: center;
    position: relative;
    margin-bottom: 24px;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.auth-divider span {
    position: relative;
    background: var(--bg-primary);
    padding: 0 14px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.auth-form-centered .auth-divider span {
    background: rgba(26, 31, 53, 0.85);
}

/* ---- Auth Form ---- */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auth-field-row {
    display: flex;
    gap: 12px;
}

.auth-field-row .auth-field {
    flex: 1;
}

.auth-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0 14px;
    transition: all var(--transition-fast);
    height: 46px;
}

.auth-input-wrap > i {
    font-size: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.auth-input-wrap.focused {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.auth-input-wrap.focused > i {
    color: var(--teal-primary);
}

.auth-input-wrap.error {
    border-color: var(--neon-red);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    animation: authShake 0.4s ease;
}

@keyframes authShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
}

.auth-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    height: 100%;
}

.auth-input-wrap input::placeholder {
    color: var(--text-muted);
}

.auth-eye {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

.auth-eye:hover {
    color: var(--text-primary);
}

/* ---- Password Strength ---- */
.password-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.strength-bars {
    display: flex;
    gap: 4px;
    flex: 1;
}

.strength-bar {
    height: 4px;
    flex: 1;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    transition: background var(--transition-fast);
}

.strength-text {
    font-size: 11px;
    font-weight: 700;
    min-width: 40px;
    text-align: right;
}

/* ---- Password Rules ---- */
.auth-password-rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.auth-rule {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition-fast);
}

.auth-rule.pass {
    color: var(--neon-green);
}

.auth-rule i {
    font-size: 12px;
}

/* ---- Auth Options ---- */
.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.4;
}

.auth-remember input {
    display: none;
}

.auth-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
    position: relative;
}

.auth-remember input:checked + .auth-checkbox {
    background: var(--teal-primary);
    border-color: var(--teal-primary);
}

.auth-remember input:checked + .auth-checkbox::after {
    content: '\2713';
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.auth-link {
    font-size: 12px;
    color: var(--teal-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.auth-link:hover {
    color: var(--teal-light);
}

/* ---- Submit Button ---- */
.auth-submit {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--teal-primary), var(--teal-dark));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.auth-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.1));
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.auth-submit:hover::before {
    opacity: 1;
}

.auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.3);
}

.auth-submit:active {
    transform: translateY(0);
}

.auth-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.auth-submit.purple {
    background: linear-gradient(135deg, var(--neon-purple), #7c3aed);
}

.auth-submit.purple:hover {
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.3);
}

.auth-submit.orange {
    background: linear-gradient(135deg, var(--neon-orange), #ea580c);
}

.auth-submit.orange:hover {
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.3);
}

.auth-submit.blue {
    background: linear-gradient(135deg, var(--neon-blue), #2563eb);
}

.auth-submit.blue:hover {
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.auth-submit.green {
    background: linear-gradient(135deg, var(--neon-green), #16a34a);
}

.auth-submit.green:hover {
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}

.auth-submit span {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ---- Button Loader ---- */
.auth-btn-loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: authSpin 0.6s linear infinite;
}

@keyframes authSpin {
    to { transform: rotate(360deg); }
}

/* ---- OTP Input ---- */
.otp-container {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.otp-input {
    width: 52px;
    height: 56px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    text-align: center;
    outline: none;
    transition: all var(--transition-fast);
    caret-color: var(--teal-primary);
}

.otp-input:focus {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.otp-timer {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.auth-resend {
    background: none;
    border: none;
    color: var(--teal-primary);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
}

.auth-resend:hover {
    color: var(--teal-light);
}

.auth-email-sent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 16px;
    background: rgba(20, 184, 166, 0.06);
    border: 1px solid rgba(20, 184, 166, 0.15);
    border-radius: 24px;
    font-size: 12px;
    font-weight: 600;
    color: var(--teal-primary);
}

/* ---- Success State ---- */
.auth-success {
    text-align: center;
    padding: 20px 0;
}

.auth-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.12);
    color: var(--neon-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin: 0 auto 24px;
    animation: authSuccessPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes authSuccessPop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.auth-success h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 24px;
    margin-bottom: 8px;
}

.auth-success p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 28px;
}

/* ---- Auth Switch ---- */
.auth-switch {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 24px;
}

.auth-switch a {
    color: var(--teal-primary);
    text-decoration: none;
    font-weight: 700;
    transition: color var(--transition-fast);
}

.auth-switch a:hover {
    color: var(--teal-light);
}

/* ---- Auth Footer ---- */
.auth-footer {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}

.auth-footer-links {
    display: flex;
    gap: 16px;
}

.auth-footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.auth-footer-links a:hover {
    color: var(--text-primary);
}

/* ---- Auth Responsive ---- */
@media (max-width: 991.98px) {
    .auth-brand-panel {
        display: none;
    }

    .auth-form-panel {
        padding: 24px;
    }

    .auth-mobile-logo {
        display: flex;
    }

    .auth-divider span {
        background: var(--bg-primary);
    }
}

@media (max-width: 575.98px) {
    .auth-form-container {
        max-width: 100%;
    }

    .auth-form-centered .auth-form-container {
        padding: 28px 20px;
    }

    .auth-field-row {
        flex-direction: column;
    }

    .auth-social {
        flex-direction: column;
    }

    .otp-input {
        width: 44px;
        height: 48px;
        font-size: 18px;
    }

    .otp-container {
        gap: 6px;
    }

    .auth-form-header h2 {
        font-size: 24px;
    }

    .auth-password-rules {
        grid-template-columns: 1fr;
    }

    .auth-footer {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* ============================================================
   EDITORS - Rich Text, Markdown, Inline, Code
   ============================================================ */

/* ---- Rich Text Editor ---- */
.rich-editor {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.rich-editor:focus-within {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.re-toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.re-toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 6px;
    flex-shrink: 0;
}

.re-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.re-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.re-btn.active {
    background: rgba(20, 184, 166, 0.15);
    color: var(--teal-primary);
}

.re-btn[title]:hover {
    position: relative;
}

.re-select {
    height: 32px;
    padding: 0 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    outline: none;
    transition: all var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 22px;
}

.re-select:hover {
    border-color: var(--teal-primary);
}

.re-select:focus {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
}

.re-select-sm {
    width: 60px;
}

.re-color-btn {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    padding: 4px;
}

.re-color-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.re-color-btn i {
    font-size: 14px;
    color: var(--text-secondary);
}

.re-color-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.re-color-bar {
    width: 14px;
    height: 3px;
    border-radius: 1px;
    background: var(--teal-primary);
    transition: background var(--transition-fast);
}

.rich-editor-body {
    min-height: 280px;
    max-height: 500px;
    overflow-y: auto;
    padding: 20px 24px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
    outline: none;
    font-family: 'Inter', sans-serif;
}

.rich-editor-body:empty::before {
    content: 'Yazmaya başlayın...';
    color: var(--text-muted);
    pointer-events: none;
}

.rich-editor-body h1,
.rich-editor-body h2,
.rich-editor-body h3 {
    font-family: 'DM Serif Display', serif;
    margin: 16px 0 8px;
    line-height: 1.3;
}

.rich-editor-body h1 { font-size: 28px; }
.rich-editor-body h2 { font-size: 22px; }
.rich-editor-body h3 { font-size: 18px; }

.rich-editor-body p {
    margin-bottom: 12px;
}

.rich-editor-body ul,
.rich-editor-body ol {
    margin: 8px 0;
    padding-left: 24px;
}

.rich-editor-body blockquote {
    border-left: 3px solid var(--teal-primary);
    margin: 12px 0;
    padding: 8px 16px;
    background: rgba(20, 184, 166, 0.04);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    font-style: italic;
}

.rich-editor-body a {
    color: var(--teal-primary);
    text-decoration: underline;
}

.rich-editor-body img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin: 8px 0;
}

.rich-editor-body hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 16px 0;
}

.rich-editor-body pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    overflow-x: auto;
    margin: 12px 0;
}

.rich-editor-body code {
    background: rgba(20, 184, 166, 0.08);
    color: var(--teal-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
}

/* Rich Editor - Scrollbar */
.rich-editor-body::-webkit-scrollbar {
    width: 6px;
}

.rich-editor-body::-webkit-scrollbar-track {
    background: transparent;
}

.rich-editor-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.rich-editor-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

.rich-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    font-size: 11px;
    color: var(--text-muted);
}

.re-word-count {
    display: flex;
    gap: 16px;
}

.re-word-count span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Rich Editor - Fullscreen */
.re-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex;
    flex-direction: column;
}

.re-fullscreen .rich-editor-body {
    flex: 1;
    max-height: none;
}

/* ---- Markdown Editor ---- */
.md-editor {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.md-editor:focus-within {
    border-color: var(--neon-purple);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.md-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.md-editor-toolbar .re-toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.md-editor-toolbar .re-toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 6px;
    flex-shrink: 0;
}

.md-editor-toolbar .re-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: all var(--transition-fast);
}

.md-editor-toolbar .re-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.md-editor-toolbar .re-btn.active {
    background: rgba(168, 85, 247, 0.15);
    color: var(--neon-purple);
}

.md-editor-body {
    display: flex;
    min-height: 400px;
}

.md-edit-pane {
    flex: 1;
    display: flex;
    position: relative;
    border-right: 1px solid var(--border-color);
}

.md-preview-pane {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.01);
}

.md-preview-pane.fullwidth {
    border-right: none;
}

.md-textarea {
    flex: 1;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.8;
    padding: 20px 20px 20px 0;
    resize: none;
    tab-size: 2;
}

.md-textarea::placeholder {
    color: var(--text-muted);
}

.md-textarea::-webkit-scrollbar {
    width: 6px;
}

.md-textarea::-webkit-scrollbar-track {
    background: transparent;
}

.md-textarea::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.md-line-numbers {
    padding: 20px 8px 20px 12px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-muted);
    text-align: right;
    user-select: none;
    min-width: 40px;
    opacity: 0.5;
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}

/* Markdown Preview Styles */
.md-preview-pane h1,
.md-preview-pane h2,
.md-preview-pane h3 {
    font-family: 'DM Serif Display', serif;
    margin: 20px 0 10px;
    line-height: 1.3;
}

.md-preview-pane h1 {
    font-size: 28px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}

.md-preview-pane h2 {
    font-size: 22px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.md-preview-pane h3 {
    font-size: 18px;
}

.md-preview-pane p {
    margin-bottom: 12px;
}

.md-preview-pane strong {
    color: var(--text-primary);
    font-weight: 700;
}

.md-preview-pane em {
    color: var(--text-secondary);
}

.md-preview-pane del {
    color: var(--text-muted);
    text-decoration: line-through;
}

.md-preview-pane code {
    background: rgba(168, 85, 247, 0.08);
    color: var(--neon-purple);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
}

.md-preview-pane pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
    overflow-x: auto;
    margin: 12px 0;
}

.md-preview-pane pre code {
    background: transparent;
    color: var(--text-primary);
    padding: 0;
}

.md-preview-pane blockquote {
    border-left: 3px solid var(--neon-purple);
    margin: 12px 0;
    padding: 8px 16px;
    background: rgba(168, 85, 247, 0.04);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    font-style: italic;
}

.md-preview-pane ul,
.md-preview-pane ol {
    margin: 8px 0;
    padding-left: 24px;
}

.md-preview-pane li {
    margin-bottom: 4px;
}

.md-preview-pane hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 20px 0;
}

.md-preview-pane a {
    color: var(--neon-purple);
    text-decoration: underline;
    text-decoration-color: rgba(168, 85, 247, 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color var(--transition-fast);
}

.md-preview-pane a:hover {
    text-decoration-color: var(--neon-purple);
}

.md-preview-pane img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin: 8px 0;
}

.md-preview-pane::-webkit-scrollbar {
    width: 6px;
}

.md-preview-pane::-webkit-scrollbar-track {
    background: transparent;
}

.md-preview-pane::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

/* Markdown Table */
.md-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

.md-table th,
.md-table td {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    text-align: left;
}

.md-table th {
    background: var(--bg-tertiary);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.md-table td {
    color: var(--text-primary);
}

.md-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Markdown Task List */
.md-task {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    list-style: none;
}

.md-task input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--neon-purple);
    cursor: pointer;
    flex-shrink: 0;
}

/* Markdown Syntax Badge */
.md-syntax-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--neon-purple);
    font-family: 'Fira Code', 'Consolas', monospace;
}

/* Markdown Editor Footer */
.md-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    font-size: 11px;
    color: var(--text-muted);
}

.md-editor-footer .re-word-count {
    display: flex;
    gap: 16px;
}

.md-editor-footer .re-word-count span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ---- Inline Editor ---- */
.inline-editor-demo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.inline-edit-card {
    padding: 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    cursor: pointer;
    position: relative;
}

.inline-edit-card:hover {
    border-color: rgba(20, 184, 166, 0.3);
    background: rgba(20, 184, 166, 0.02);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.inline-edit-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.inline-edit-label i {
    font-size: 12px;
    color: var(--teal-primary);
}

.inline-edit-value {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.6;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    outline: none;
    transition: all var(--transition-fast);
    min-height: 32px;
}

.inline-edit-value:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-color);
}

.inline-edit-value:focus {
    background: var(--bg-input);
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.inline-edit-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 14px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.inline-edit-card:hover .inline-edit-icon {
    opacity: 1;
}

/* ---- Code Editor ---- */
.code-editor {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
}

.code-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.code-editor-dots {
    display: flex;
    gap: 8px;
}

.code-editor-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.code-editor-dots span:nth-child(1) {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
}

.code-editor-dots span:nth-child(2) {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.3);
}

.code-editor-dots span:nth-child(3) {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
}

.code-editor-title {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.code-editor-title i {
    font-size: 14px;
    color: var(--neon-green);
}

.code-editor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.code-editor-actions select {
    height: 28px;
    padding: 0 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.code-editor-actions select:hover {
    border-color: var(--neon-green);
}

.code-editor-actions .re-btn {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

.code-editor-actions .re-btn:hover {
    color: var(--neon-green);
    background: rgba(34, 197, 94, 0.1);
}

.code-editor-body {
    display: flex;
    min-height: 300px;
    max-height: 500px;
    overflow: hidden;
}

.code-line-numbers {
    padding: 16px 8px 16px 12px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
    text-align: right;
    user-select: none;
    min-width: 44px;
    opacity: 0.4;
    border-right: 1px solid var(--border-color);
    overflow-y: hidden;
    background: rgba(0, 0, 0, 0.1);
}

.code-textarea {
    flex: 1;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--neon-green);
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.7;
    padding: 16px 20px;
    resize: none;
    tab-size: 2;
    caret-color: var(--neon-green);
    overflow-y: auto;
}

.code-textarea::placeholder {
    color: var(--text-muted);
}

.code-textarea::selection {
    background: rgba(34, 197, 94, 0.15);
}

.code-textarea::-webkit-scrollbar {
    width: 6px;
}

.code-textarea::-webkit-scrollbar-track {
    background: transparent;
}

.code-textarea::-webkit-scrollbar-thumb {
    background: rgba(34, 197, 94, 0.15);
    border-radius: 3px;
}

.code-textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(34, 197, 94, 0.3);
}

/* Code Editor Footer */
.code-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    font-size: 11px;
    color: var(--text-muted);
}

.code-editor-footer span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ---- Editor Responsive ---- */
@media (max-width: 991.98px) {
    .md-editor-body {
        flex-direction: column;
        min-height: 500px;
    }

    .md-edit-pane {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        min-height: 250px;
    }

    .md-preview-pane {
        min-height: 250px;
    }

    .rich-editor-toolbar {
        padding: 6px 8px;
    }

    .re-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .re-select {
        font-size: 11px;
        height: 28px;
    }

    .re-toolbar-sep {
        margin: 0 4px;
        height: 20px;
    }
}

@media (max-width: 767.98px) {
    .inline-editor-demo {
        grid-template-columns: 1fr;
    }

    .rich-editor-body {
        padding: 16px;
        min-height: 200px;
    }

    .md-textarea {
        padding: 16px 16px 16px 0;
    }

    .md-preview-pane {
        padding: 16px;
    }

    .code-editor-header {
        padding: 8px 12px;
    }

    .code-editor-body {
        min-height: 220px;
    }

    .code-textarea {
        padding: 12px 16px;
    }
}

@media (max-width: 575.98px) {
    .rich-editor-footer,
    .md-editor-footer,
    .code-editor-footer {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    .re-word-count {
        justify-content: center;
    }

    .md-line-numbers,
    .code-line-numbers {
        display: none;
    }

    .md-textarea {
        padding-left: 16px;
    }

    .code-textarea {
        padding-left: 16px;
    }

    .code-editor-dots span {
        width: 10px;
        height: 10px;
    }
}

/* ============================================================
   BADGES & TAGS
   ============================================================ */

/* ---- Base Badge ---- */
.bdg-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bdg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    border-radius: var(--radius-sm);
    line-height: 1.4;
    white-space: nowrap;
    transition: all var(--transition-fast);
    position: relative;
}

.bdg-pill { border-radius: 50px; }

/* ---- Size Variants ---- */
.bdg-xs { padding: 2px 7px; font-size: 10px; font-weight: 700; }
.bdg-sm { padding: 3px 8px; font-size: 11px; }
.bdg-lg { padding: 6px 14px; font-size: 13px; }
.bdg-xl { padding: 8px 18px; font-size: 15px; }

/* ---- Solid Badges ---- */
.bdg-solid-teal { background: var(--teal-primary); color: #fff; }
.bdg-solid-purple { background: var(--neon-purple); color: #fff; }
.bdg-solid-blue { background: var(--neon-blue); color: #fff; }
.bdg-solid-green { background: var(--neon-green); color: #fff; }
.bdg-solid-orange { background: var(--neon-orange); color: #fff; }
.bdg-solid-red { background: var(--neon-red); color: #fff; }
.bdg-solid-pink { background: var(--neon-pink); color: #fff; }

/* ---- Soft Badges ---- */
.bdg-soft-teal { background: rgba(20, 184, 166, 0.1); color: var(--teal-primary); }
.bdg-soft-purple { background: rgba(168, 85, 247, 0.1); color: var(--neon-purple); }
.bdg-soft-blue { background: rgba(59, 130, 246, 0.1); color: var(--neon-blue); }
.bdg-soft-green { background: rgba(34, 197, 94, 0.1); color: var(--neon-green); }
.bdg-soft-orange { background: rgba(249, 115, 22, 0.1); color: var(--neon-orange); }
.bdg-soft-red { background: rgba(239, 68, 68, 0.1); color: var(--neon-red); }
.bdg-soft-pink { background: rgba(236, 72, 153, 0.1); color: var(--neon-pink); }

/* ---- Outline Badges ---- */
.bdg-outline-teal { background: transparent; color: var(--teal-primary); border: 1px solid var(--teal-primary); }
.bdg-outline-purple { background: transparent; color: var(--neon-purple); border: 1px solid var(--neon-purple); }
.bdg-outline-blue { background: transparent; color: var(--neon-blue); border: 1px solid var(--neon-blue); }
.bdg-outline-green { background: transparent; color: var(--neon-green); border: 1px solid var(--neon-green); }
.bdg-outline-orange { background: transparent; color: var(--neon-orange); border: 1px solid var(--neon-orange); }
.bdg-outline-red { background: transparent; color: var(--neon-red); border: 1px solid var(--neon-red); }
.bdg-outline-pink { background: transparent; color: var(--neon-pink); border: 1px solid var(--neon-pink); }

/* ---- Glass Badges ---- */
.bdg-glass-teal {
    background: rgba(20, 184, 166, 0.08);
    color: var(--teal-light);
    border: 1px solid rgba(20, 184, 166, 0.2);
    backdrop-filter: blur(8px);
}
.bdg-glass-purple {
    background: rgba(168, 85, 247, 0.08);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.2);
    backdrop-filter: blur(8px);
}
.bdg-glass-blue {
    background: rgba(59, 130, 246, 0.08);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(8px);
}
.bdg-glass-green {
    background: rgba(34, 197, 94, 0.08);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.2);
    backdrop-filter: blur(8px);
}
.bdg-glass-orange {
    background: rgba(249, 115, 22, 0.08);
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, 0.2);
    backdrop-filter: blur(8px);
}
.bdg-glass-red {
    background: rgba(239, 68, 68, 0.08);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.2);
    backdrop-filter: blur(8px);
}
.bdg-glass-pink {
    background: rgba(236, 72, 153, 0.08);
    color: #f9a8d4;
    border: 1px solid rgba(236, 72, 153, 0.2);
    backdrop-filter: blur(8px);
}

/* ---- Gradient Badges ---- */
.bdg-gradient-1 { background: linear-gradient(135deg, var(--teal-primary), var(--neon-blue)); color: #fff; }
.bdg-gradient-2 { background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink)); color: #fff; }
.bdg-gradient-3 { background: linear-gradient(135deg, var(--neon-orange), var(--neon-red)); color: #fff; }
.bdg-gradient-4 { background: linear-gradient(135deg, var(--neon-green), var(--teal-primary)); color: #fff; }
.bdg-gradient-5 { background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)); color: #fff; }
.bdg-gradient-6 { background: linear-gradient(135deg, var(--neon-pink), var(--neon-orange)); color: #fff; }

/* ---- Neon Glow Badges ---- */
.bdg-neon-teal {
    background: transparent;
    color: var(--teal-light);
    border: 1px solid var(--teal-primary);
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.3), inset 0 0 8px rgba(20, 184, 166, 0.08);
}
.bdg-neon-purple {
    background: transparent;
    color: #c084fc;
    border: 1px solid var(--neon-purple);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.3), inset 0 0 8px rgba(168, 85, 247, 0.08);
}
.bdg-neon-blue {
    background: transparent;
    color: #93c5fd;
    border: 1px solid var(--neon-blue);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3), inset 0 0 8px rgba(59, 130, 246, 0.08);
}
.bdg-neon-green {
    background: transparent;
    color: #86efac;
    border: 1px solid var(--neon-green);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3), inset 0 0 8px rgba(34, 197, 94, 0.08);
}
.bdg-neon-pink {
    background: transparent;
    color: #f9a8d4;
    border: 1px solid var(--neon-pink);
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.3), inset 0 0 8px rgba(236, 72, 153, 0.08);
}
.bdg-neon-orange {
    background: transparent;
    color: #fdba74;
    border: 1px solid var(--neon-orange);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.3), inset 0 0 8px rgba(249, 115, 22, 0.08);
}

/* ---- Dot Indicators ---- */
.bdg-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-green { background: var(--neon-green); }
.dot-orange { background: var(--neon-orange); }
.dot-red { background: var(--neon-red); }
.dot-blue { background: var(--neon-blue); }
.dot-purple { background: var(--neon-purple); }
.dot-teal { background: var(--teal-primary); }
.dot-pink { background: var(--neon-pink); }

.dot-pulse {
    animation: bdgDotPulse 1.5s ease-in-out infinite;
}

@keyframes bdgDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

/* ---- Avatar Badges ---- */
.bdg-avatar-wrap {
    position: relative;
    display: inline-flex;
}

.bdg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.bdg-avatar-lg { width: 52px; height: 52px; font-size: 16px; }
.bdg-avatar-xl { width: 64px; height: 64px; font-size: 20px; }

.bdg-avatar-status {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}

.bdg-avatar-status-lg {
    width: 14px;
    height: 14px;
    bottom: 2px;
    right: 2px;
}

.bdg-avatar-status-xl {
    width: 16px;
    height: 16px;
    bottom: 3px;
    right: 3px;
    border-width: 3px;
}

.status-online { background: var(--neon-green); box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }
.status-busy { background: var(--neon-red); box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
.status-away { background: var(--neon-orange); box-shadow: 0 0 6px rgba(249, 115, 22, 0.5); }
.status-offline { background: var(--text-muted); }

/* ---- Notification Counters ---- */
.bdg-notif-wrap {
    position: relative;
    display: inline-flex;
}

.bdg-counter {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

.bdg-counter-red { background: var(--neon-red); }
.bdg-counter-teal { background: var(--teal-primary); }
.bdg-counter-purple { background: var(--neon-purple); }
.bdg-counter-orange { background: var(--neon-orange); }
.bdg-counter-pink { background: var(--neon-pink); }
.bdg-counter-green { background: var(--neon-green); }

.bdg-counter-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}

.bdg-counter-dot.bdg-counter-red { background: var(--neon-red); }

.bdg-pulse {
    animation: bdgPulseCounter 1.5s ease-in-out infinite;
}

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

/* Icon Circles */
.bdg-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.bdg-icon-circle.teal { background: rgba(20, 184, 166, 0.1); color: var(--teal-primary); }
.bdg-icon-circle.purple { background: rgba(168, 85, 247, 0.1); color: var(--neon-purple); }
.bdg-icon-circle.blue { background: rgba(59, 130, 246, 0.1); color: var(--neon-blue); }
.bdg-icon-circle.green { background: rgba(34, 197, 94, 0.1); color: var(--neon-green); }
.bdg-icon-circle.orange { background: rgba(249, 115, 22, 0.1); color: var(--neon-orange); }

/* Notification Button */
.bdg-btn-notif {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.bdg-btn-notif:hover {
    background: var(--bg-card-hover);
    border-color: var(--teal-primary);
    transform: translateY(-1px);
}

.bdg-btn-notif.purple:hover { border-color: var(--neon-purple); }
.bdg-btn-notif.green:hover { border-color: var(--neon-green); }

/* ---- Tag System ---- */
.bdg-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-fast);
    animation: bdgTagIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bdgTagIn {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

.tag-teal { background: rgba(20, 184, 166, 0.1); color: var(--teal-primary); border: 1px solid rgba(20, 184, 166, 0.2); }
.tag-purple { background: rgba(168, 85, 247, 0.1); color: var(--neon-purple); border: 1px solid rgba(168, 85, 247, 0.2); }
.tag-blue { background: rgba(59, 130, 246, 0.1); color: var(--neon-blue); border: 1px solid rgba(59, 130, 246, 0.2); }
.tag-green { background: rgba(34, 197, 94, 0.1); color: var(--neon-green); border: 1px solid rgba(34, 197, 94, 0.2); }
.tag-orange { background: rgba(249, 115, 22, 0.1); color: var(--neon-orange); border: 1px solid rgba(249, 115, 22, 0.2); }
.tag-pink { background: rgba(236, 72, 153, 0.1); color: var(--neon-pink); border: 1px solid rgba(236, 72, 153, 0.2); }
.tag-red { background: rgba(239, 68, 68, 0.1); color: var(--neon-red); border: 1px solid rgba(239, 68, 68, 0.2); }

.bdg-tag-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-left: 2px;
    padding: 0;
    line-height: 1;
}

.bdg-tag-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--neon-red);
}

/* Category Tags */
.bdg-tag-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-fast);
    cursor: default;
}

.cat-teal { background: rgba(20, 184, 166, 0.08); color: var(--teal-primary); border: 1px solid rgba(20, 184, 166, 0.15); }
.cat-purple { background: rgba(168, 85, 247, 0.08); color: var(--neon-purple); border: 1px solid rgba(168, 85, 247, 0.15); }
.cat-blue { background: rgba(59, 130, 246, 0.08); color: var(--neon-blue); border: 1px solid rgba(59, 130, 246, 0.15); }
.cat-green { background: rgba(34, 197, 94, 0.08); color: var(--neon-green); border: 1px solid rgba(34, 197, 94, 0.15); }
.cat-orange { background: rgba(249, 115, 22, 0.08); color: var(--neon-orange); border: 1px solid rgba(249, 115, 22, 0.15); }
.cat-red { background: rgba(239, 68, 68, 0.08); color: var(--neon-red); border: 1px solid rgba(239, 68, 68, 0.15); }

.bdg-tag-cat:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Tag Input */
.bdg-tag-input-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    min-height: 48px;
    transition: all var(--transition-fast);
    cursor: text;
}

.bdg-tag-input-wrap:focus-within {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.bdg-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bdg-tag-input {
    flex: 1;
    min-width: 120px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
}

.bdg-tag-input::placeholder {
    color: var(--text-muted);
}

/* ---- Ribbon Badges ---- */
.bdg-ribbon-card {
    position: relative;
    overflow: hidden;
}

.bdg-ribbon {
    position: absolute;
    top: 12px;
    left: -30px;
    width: 120px;
    padding: 4px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    color: #fff;
    transform: rotate(-45deg);
    z-index: 2;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.bdg-ribbon-right {
    left: auto;
    right: -30px;
    transform: rotate(45deg);
}

.bdg-ribbon-teal { background: linear-gradient(135deg, var(--teal-primary), var(--teal-dark)); }
.bdg-ribbon-purple { background: linear-gradient(135deg, var(--neon-purple), #7c3aed); }

/* Corner Ribbon */
.bdg-corner-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 2;
}

.bdg-corner-red {
    border-width: 0 70px 70px 0;
    border-color: transparent var(--neon-red) transparent transparent;
    font-size: 0;
}

.bdg-corner-red::after {
    content: 'SATIŞ';
    position: absolute;
    top: 12px;
    right: -62px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    font-family: 'Inter', sans-serif;
    transform: rotate(45deg);
    letter-spacing: 0.5px;
}

/* Flag Badge */
.bdg-flag {
    position: absolute;
    top: 12px;
    left: 0;
    padding: 4px 14px 4px 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: #fff;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}

.bdg-flag-green {
    background: linear-gradient(135deg, var(--neon-green), #16a34a);
}

/* ---- Interactive Selectable Tags ---- */
.bdg-select-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bdg-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.bdg-select:hover {
    border-color: var(--teal-primary);
    color: var(--text-primary);
    background: rgba(20, 184, 166, 0.04);
}

.bdg-select.active {
    background: rgba(20, 184, 166, 0.1);
    border-color: var(--teal-primary);
    color: var(--teal-primary);
    box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.2);
}

/* Multi Select */
.bdg-select-multi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.bdg-select-multi i {
    opacity: 0;
    transform: scale(0);
    transition: all var(--transition-fast);
    font-size: 12px;
}

.bdg-select-multi:hover {
    border-color: var(--neon-purple);
    color: var(--text-primary);
}

.bdg-select-multi.active {
    background: rgba(168, 85, 247, 0.1);
    border-color: var(--neon-purple);
    color: var(--neon-purple);
}

.bdg-select-multi.active i {
    opacity: 1;
    transform: scale(1);
}

/* Color Select */
.bdg-color-select-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bdg-color-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.bdg-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--clr);
    transition: all var(--transition-fast);
}

.bdg-color-select:hover {
    border-color: var(--clr);
    color: var(--text-primary);
}

.bdg-color-select.active {
    border-color: var(--clr);
    color: var(--clr);
    background: color-mix(in srgb, var(--clr) 8%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--clr) 20%, transparent);
}

.bdg-color-select.active .bdg-color-dot {
    transform: scale(1.3);
    box-shadow: 0 0 8px var(--clr);
}

/* ---- Badge Groups ---- */
.bdg-group {
    display: inline-flex;
}

.bdg-group .bdg {
    border-radius: 0;
}

.bdg-group .bdg:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.bdg-group .bdg:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Avatar Stack */
.bdg-avatar-stack {
    display: flex;
}

.bdg-avatar-stack-item {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    font-family: 'Inter', sans-serif;
    border: 2px solid var(--bg-card);
    margin-left: -10px;
    transition: all var(--transition-fast);
    position: relative;
    z-index: 1;
}

.bdg-avatar-stack-item:first-child {
    margin-left: 0;
}

.bdg-avatar-stack-item:hover {
    transform: translateY(-3px);
    z-index: 10;
}

.bdg-avatar-stack-more {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    font-size: 10px;
    border: 2px solid var(--border-color);
}

.bdg-avatar-stack-lg-item {
    width: 44px;
    height: 44px;
    font-size: 14px;
    margin-left: -12px;
}

.bdg-avatar-stack-lg-item:first-child {
    margin-left: 0;
}

/* ---- Order Timeline ---- */
.bdg-order-timeline {
    padding: 0;
}

.bdg-order-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.bdg-order-step:last-child { border-bottom: none; }

.bdg-order-step:hover {
    background: rgba(255, 255, 255, 0.02);
}

.bdg-order-step::before {
    content: '';
    position: absolute;
    left: 33px;
    top: 42px;
    width: 2px;
    height: calc(100% - 28px);
    background: var(--border-color);
}

.bdg-order-step:last-child::before { display: none; }

.bdg-order-step.completed::before {
    background: var(--neon-green);
}

.bdg-order-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 2px solid var(--border-color);
    position: relative;
    z-index: 2;
}

.bdg-order-step.completed .bdg-order-dot {
    background: rgba(34, 197, 94, 0.1);
    border-color: var(--neon-green);
    color: var(--neon-green);
}

.bdg-order-step.active .bdg-order-dot {
    background: rgba(249, 115, 22, 0.1);
    border-color: var(--neon-orange);
    color: var(--neon-orange);
}

.bdg-order-dot.pulse {
    animation: bdgOrderPulse 2s ease-in-out infinite;
}

@keyframes bdgOrderPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); }
}

.bdg-order-info {
    flex: 1;
}

.bdg-order-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.bdg-order-time {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- Profile Card ---- */
.bdg-profile-card {
    padding: 0;
}

.bdg-profile-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.bdg-profile-info h6 {
    color: var(--text-primary);
    font-size: 16px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bdg-profile-info p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.bdg-profile-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--border-color);
    margin: 0 -20px -20px;
    padding: 0;
}

.bdg-profile-stat {
    flex: 1;
    text-align: center;
    padding: 14px 10px;
    border-right: 1px solid var(--border-color);
}

.bdg-profile-stat:last-child { border-right: none; }

.bdg-profile-stat-val {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

.bdg-profile-stat-lbl {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ---- Notification List ---- */
.bdg-notif-list {
    padding: 0;
}

.bdg-notif-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.bdg-notif-item:last-child { border-bottom: none; }

.bdg-notif-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.bdg-notif-item.unread {
    background: rgba(20, 184, 166, 0.02);
    border-left: 3px solid var(--teal-primary);
}

.bdg-notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.bdg-notif-icon.teal { background: rgba(20, 184, 166, 0.1); color: var(--teal-primary); }
.bdg-notif-icon.purple { background: rgba(168, 85, 247, 0.1); color: var(--neon-purple); }
.bdg-notif-icon.orange { background: rgba(249, 115, 22, 0.1); color: var(--neon-orange); }
.bdg-notif-icon.blue { background: rgba(59, 130, 246, 0.1); color: var(--neon-blue); }
.bdg-notif-icon.green { background: rgba(34, 197, 94, 0.1); color: var(--neon-green); }

.bdg-notif-content {
    flex: 1;
    min-width: 0;
}

.bdg-notif-content p {
    font-size: 13px;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bdg-notif-content span {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- Animated Badges ---- */

/* Typing */
.bdg-typing {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 4px;
}

.bdg-typing span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: bdgTyping 1.2s ease-in-out infinite;
}

.bdg-typing span:nth-child(2) { animation-delay: 0.2s; }
.bdg-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bdgTyping {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* Shimmer */
.bdg-shimmer {
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink), var(--neon-purple));
    background-size: 200% 100%;
    color: #fff;
    animation: bdgShimmer 2s ease-in-out infinite;
}

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

/* Bounce */
.bdg-bounce {
    animation: bdgBounce 2s ease-in-out infinite;
}

@keyframes bdgBounce {
    0%, 100% { transform: translateY(0); }
    15% { transform: translateY(-6px); }
    30% { transform: translateY(0); }
    45% { transform: translateY(-3px); }
    60% { transform: translateY(0); }
}

/* Wave Text */
.bdg-wave {
    display: inline-flex;
}

.bdg-wave span {
    display: inline-block;
    animation: bdgWave 1.5s ease-in-out infinite;
}

.bdg-wave span:nth-child(1) { animation-delay: 0s; }
.bdg-wave span:nth-child(2) { animation-delay: 0.1s; }
.bdg-wave span:nth-child(3) { animation-delay: 0.2s; }
.bdg-wave span:nth-child(4) { animation-delay: 0.3s; }
.bdg-wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes bdgWave {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-3px); }
    50% { transform: translateY(0); }
}

/* Progress Badge */
.bdg-progress {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    overflow: hidden;
    position: relative;
    min-width: 100px;
}

.bdg-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--teal-primary), var(--neon-blue));
    border-radius: inherit;
    transition: width 1s ease;
}

.bdg-progress-text {
    position: relative;
    z-index: 1;
    color: var(--text-primary);
    font-weight: 700;
}

/* Glow Rotate */
.bdg-glow-rotate {
    animation: bdgGlowRotate 3s linear infinite;
}

@keyframes bdgGlowRotate {
    0% { box-shadow: 0 0 6px rgba(168, 85, 247, 0.3); }
    25% { box-shadow: 2px 2px 10px rgba(168, 85, 247, 0.5); }
    50% { box-shadow: 0 0 6px rgba(168, 85, 247, 0.3); }
    75% { box-shadow: -2px -2px 10px rgba(168, 85, 247, 0.5); }
    100% { box-shadow: 0 0 6px rgba(168, 85, 247, 0.3); }
}

/* ---- Achievement Cards ---- */
.bdg-achieve-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    text-align: center;
    transition: all var(--transition-base);
    overflow: hidden;
}

.bdg-achieve-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.bdg-achieve-glow {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: var(--glow);
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.15;
    transition: opacity var(--transition-base);
}

.bdg-achieve-card:hover .bdg-achieve-glow {
    opacity: 0.3;
}

.bdg-achieve-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 14px;
    position: relative;
    z-index: 1;
}

.bdg-achieve-card h6 {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

.bdg-achieve-card p {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.bdg-achieve-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

/* Locked Achievement */
.bdg-achieve-card.locked {
    opacity: 0.6;
    filter: grayscale(0.5);
}

.bdg-achieve-card.locked:hover {
    transform: none;
    box-shadow: none;
}

.bdg-achieve-lock {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 14px;
    color: var(--text-muted);
    z-index: 2;
}

/* ---- Badges Responsive ---- */
@media (max-width: 767.98px) {
    .bdg-showcase {
        gap: 6px;
    }

    .bdg-profile-top {
        flex-direction: column;
        text-align: center;
    }

    .bdg-profile-info .bdg-showcase {
        justify-content: center;
    }

    .bdg-notif-content p {
        white-space: normal;
    }

    .bdg-order-step {
        flex-wrap: wrap;
    }

    .bdg-btn-notif {
        font-size: 12px;
        padding: 6px 12px;
    }

    .bdg-color-select-group {
        gap: 6px;
    }

    .bdg-color-select {
        padding: 5px 12px;
        font-size: 12px;
    }
}

@media (max-width: 575.98px) {
    .bdg-profile-stats {
        flex-direction: column;
    }

    .bdg-profile-stat {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 10px;
    }

    .bdg-profile-stat:last-child { border-bottom: none; }

    .bdg-select-group {
        gap: 6px;
    }

    .bdg-select,
    .bdg-select-multi {
        padding: 5px 12px;
        font-size: 12px;
    }

    .bdg-achieve-card {
        padding: 20px 16px;
    }

    .bdg-order-step::before {
        display: none;
    }
}

/* ============================================================
   ACCORDIONS
   ============================================================ */

/* ---- Base Accordion ---- */
.acc-group {
    display: flex;
    flex-direction: column;
}

.acc-item {
    border-bottom: 1px solid var(--border-color);
}

.acc-item:last-child {
    border-bottom: none;
}

.acc-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: color var(--transition-fast);
    text-align: left;
}

.acc-header:hover {
    color: var(--teal-primary);
}

.acc-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.acc-header-left i {
    font-size: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.acc-item.acc-open > .acc-header .acc-header-left > i,
.acc-item.acc-open > .acc-timeline-content > .acc-header .acc-header-left > i {
    color: var(--teal-primary);
}

.acc-arrow {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.acc-item.acc-open > .acc-header > .acc-arrow,
.acc-item.acc-open > .acc-timeline-content > .acc-header > .d-flex > .acc-arrow,
.acc-item.acc-open > .acc-timeline-content > .acc-header > .acc-arrow {
    transform: rotate(180deg);
    color: var(--teal-primary);
}

/* Plus/Minus Arrow */
.acc-arrow-plus {
    font-size: 14px;
    transition: transform var(--transition-base), color var(--transition-fast);
}

.acc-item.acc-open > .acc-header > .acc-arrow-plus {
    transform: rotate(45deg);
    color: var(--teal-primary);
}

/* Subtitle */
.acc-subtitle {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Accordion Body */
.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.acc-body p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    padding-bottom: 14px;
}

.acc-body p:last-child {
    margin-bottom: 0;
}

.acc-body code {
    background: rgba(20, 184, 166, 0.08);
    color: var(--teal-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
}

/* Number Badge */
.acc-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(20, 184, 166, 0.08);
    color: var(--teal-primary);
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.acc-item.acc-open .acc-number {
    background: var(--teal-primary);
    color: #fff;
}

/* Icon Wrap */
.acc-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.acc-icon-wrap.teal { background: rgba(20, 184, 166, 0.1); color: var(--teal-primary); }
.acc-icon-wrap.purple { background: rgba(168, 85, 247, 0.1); color: var(--neon-purple); }
.acc-icon-wrap.blue { background: rgba(59, 130, 246, 0.1); color: var(--neon-blue); }
.acc-icon-wrap.green { background: rgba(34, 197, 94, 0.1); color: var(--neon-green); }
.acc-icon-wrap.orange { background: rgba(249, 115, 22, 0.1); color: var(--neon-orange); }

/* ---- Bordered Style ---- */
.acc-bordered .acc-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.acc-bordered .acc-item:last-child { margin-bottom: 0; }

.acc-bordered .acc-item.acc-open {
    border-color: rgba(20, 184, 166, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.acc-bordered .acc-header {
    padding: 14px 16px;
}

.acc-bordered .acc-body {
    padding: 0 16px;
}

/* ---- Separated Style ---- */
.acc-separated .acc-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    transition: all var(--transition-fast);
}

.acc-separated .acc-item:last-child { margin-bottom: 0; }

.acc-separated .acc-item.acc-open {
    background: rgba(20, 184, 166, 0.02);
    border-color: rgba(20, 184, 166, 0.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.acc-separated .acc-header {
    padding: 14px 16px;
}

.acc-separated .acc-body {
    padding: 0 16px;
}

/* ---- Colored Left Border ---- */
.acc-colored .acc-item {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--acc-clr, var(--teal-primary));
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    transition: all var(--transition-fast);
}

.acc-colored .acc-item:last-child { margin-bottom: 0; }

.acc-colored .acc-item.acc-open {
    background: rgba(255, 255, 255, 0.01);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.acc-colored .acc-header {
    padding: 12px 14px;
}

.acc-colored .acc-body {
    padding: 0 14px;
}

/* ---- Gradient Header ---- */
.acc-gradient .acc-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.acc-gradient .acc-item:last-child { margin-bottom: 0; }

.acc-gradient .acc-item.acc-open {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.acc-gradient .acc-header {
    padding: 14px 16px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.acc-gradient .acc-item.acc-open > .acc-header {
    background: var(--acc-grad, linear-gradient(135deg, var(--teal-primary), var(--neon-blue)));
    color: #fff;
}

.acc-gradient .acc-item.acc-open > .acc-header .acc-header-left i {
    color: rgba(255, 255, 255, 0.8);
}

.acc-gradient .acc-item.acc-open > .acc-header .acc-arrow {
    color: rgba(255, 255, 255, 0.7);
}

.acc-gradient .acc-body {
    padding: 0 16px;
}

/* ---- Nested Accordion ---- */
.acc-nested {
    margin-top: 4px;
    padding-left: 12px;
    border-left: 2px solid var(--border-color);
}

.acc-nested .acc-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.acc-nested .acc-header {
    padding: 10px 0;
    font-size: 13px;
}

.acc-nested .acc-body p {
    font-size: 12px;
    padding-bottom: 10px;
}

/* ---- FAQ Style ---- */
.acc-faq .acc-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    transition: all var(--transition-fast);
}

.acc-faq .acc-item:last-child { margin-bottom: 0; }

.acc-faq .acc-item.acc-open {
    background: rgba(34, 197, 94, 0.02);
    border-color: rgba(34, 197, 94, 0.2);
}

.acc-faq .acc-header { padding: 14px 16px; }
.acc-faq .acc-body { padding: 0 16px; }

.acc-faq-q,
.acc-faq-a {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
}

.acc-faq-q {
    background: rgba(34, 197, 94, 0.1);
    color: var(--neon-green);
}

.acc-faq-a {
    background: rgba(20, 184, 166, 0.1);
    color: var(--teal-primary);
}

.acc-faq-answer {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding-bottom: 14px;
}

.acc-faq-answer p {
    padding-bottom: 0;
    margin: 0;
}

/* ---- Timeline Accordion ---- */
.acc-timeline .acc-item {
    display: flex;
    gap: 16px;
    border-bottom: none;
    padding-bottom: 0;
    position: relative;
}

.acc-timeline .acc-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 22px;
    width: 2px;
    height: calc(100% - 6px);
    background: var(--border-color);
}

.acc-timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 14px;
    border: 3px solid var(--border-color);
    background: var(--bg-card);
    position: relative;
    z-index: 2;
    transition: all var(--transition-fast);
}

.acc-timeline .acc-item.acc-open .acc-timeline-dot {
    transform: scale(1.2);
}

.acc-timeline-dot.teal { border-color: var(--teal-primary); background: rgba(20, 184, 166, 0.15); }
.acc-timeline-dot.purple { border-color: var(--neon-purple); background: rgba(168, 85, 247, 0.15); }
.acc-timeline-dot.blue { border-color: var(--neon-blue); background: rgba(59, 130, 246, 0.15); }
.acc-timeline-dot.green { border-color: var(--neon-green); background: rgba(34, 197, 94, 0.15); }
.acc-timeline-dot.orange { border-color: var(--neon-orange); background: rgba(249, 115, 22, 0.15); }

.acc-timeline-content {
    flex: 1;
    min-width: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.acc-timeline .acc-item:last-child .acc-timeline-content {
    border-bottom: none;
}

.acc-timeline .acc-header {
    padding: 10px 0;
}

.acc-timeline .acc-body {
    padding: 0;
}

/* Changelog List */
.acc-changelog {
    list-style: none;
    padding: 0 0 12px;
    margin: 0;
}

.acc-changelog li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.acc-changelog li i { font-size: 14px; flex-shrink: 0; }
.acc-changelog li.added i { color: var(--neon-green); }
.acc-changelog li.improved i { color: var(--neon-blue); }
.acc-changelog li.fixed i { color: var(--neon-orange); }
.acc-changelog li.breaking i { color: var(--neon-red); }

/* ---- Wizard Style ---- */
.acc-wizard .acc-item {
    border-bottom: none;
    margin-bottom: 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.acc-wizard .acc-item:last-child { margin-bottom: 0; }
.acc-wizard .acc-header { padding: 14px 16px; }
.acc-wizard .acc-body { padding: 0 16px; }

.acc-wizard-step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 2px solid var(--border-color);
    transition: all var(--transition-fast);
}

.acc-wizard-step.active {
    background: rgba(168, 85, 247, 0.1);
    border-color: var(--neon-purple);
    color: var(--neon-purple);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.acc-wizard-step.done {
    background: var(--neon-green);
    border-color: var(--neon-green);
    color: #fff;
}

.acc-wizard-active {
    border-color: rgba(168, 85, 247, 0.3) !important;
    background: rgba(168, 85, 247, 0.02);
}

.acc-wizard-done {
    border-color: rgba(34, 197, 94, 0.2) !important;
}

.acc-wizard-pending {
    opacity: 0.6;
}

.acc-wizard-summary {
    padding-bottom: 14px;
}

.acc-wizard-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 13px;
}

.acc-wizard-field span { color: var(--text-muted); }
.acc-wizard-field strong { color: var(--text-primary); }

/* ---- Glassmorphism Style ---- */
.acc-glass .acc-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    backdrop-filter: blur(10px);
    transition: all var(--transition-fast);
}

.acc-glass .acc-item:last-child { margin-bottom: 0; }

.acc-glass .acc-item.acc-open {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(20, 184, 166, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.acc-glass .acc-header { padding: 14px 16px; }
.acc-glass .acc-body { padding: 0 16px; }

/* ---- Neon Style ---- */
.acc-neon .acc-item {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    transition: all var(--transition-base);
}

.acc-neon .acc-item:last-child { margin-bottom: 0; }

.acc-neon .acc-item.acc-open {
    border-color: var(--acc-neon, var(--neon-purple));
    box-shadow: 0 0 12px color-mix(in srgb, var(--acc-neon, var(--neon-purple)) 25%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--acc-neon, var(--neon-purple)) 5%, transparent);
}

.acc-neon .acc-item.acc-open > .acc-header {
    color: var(--acc-neon, var(--neon-purple));
}

.acc-neon .acc-item.acc-open > .acc-header .acc-header-left i {
    color: var(--acc-neon, var(--neon-purple));
}

.acc-neon .acc-item.acc-open > .acc-header .acc-arrow {
    color: var(--acc-neon, var(--neon-purple));
}

.acc-neon .acc-header { padding: 14px 16px; }
.acc-neon .acc-body { padding: 0 16px; }

/* ---- Rich Content Inside Accordion ---- */

/* Stats Grid */
.acc-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-bottom: 16px;
}

.acc-stat-item {
    padding: 0;
}

.acc-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.acc-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.acc-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
}

.acc-progress-bar.green { background: linear-gradient(90deg, var(--neon-green), #4ade80); }
.acc-progress-bar.orange { background: linear-gradient(90deg, var(--neon-orange), #fb923c); }
.acc-progress-bar.blue { background: linear-gradient(90deg, var(--neon-blue), #60a5fa); }
.acc-progress-bar.purple { background: linear-gradient(90deg, var(--neon-purple), #c084fc); }
.acc-progress-bar.red { background: linear-gradient(90deg, var(--neon-red), #f87171); }

/* Team List */
.acc-team-list {
    padding-bottom: 12px;
}

.acc-team-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.acc-team-member:last-child { border-bottom: none; }

.acc-team-info {
    flex: 1;
}

.acc-team-info span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.acc-team-info small {
    font-size: 11px;
    color: var(--text-muted);
}

/* Pricing Grid */
.acc-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-bottom: 16px;
}

.acc-pricing-item {
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    position: relative;
    transition: all var(--transition-fast);
}

.acc-pricing-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.acc-pricing-item.featured {
    border-color: rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.04);
}

.acc-pricing-item h6 {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.acc-pricing-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--teal-primary);
    font-family: 'Inter', sans-serif;
}

.acc-pricing-val small {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.acc-pricing-item ul {
    list-style: none;
    padding: 10px 0 0;
    margin: 0;
}

.acc-pricing-item li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.acc-pricing-item li i { font-size: 14px; color: var(--neon-green); }
.acc-pricing-item li.disabled { opacity: 0.4; }
.acc-pricing-item li.disabled i { color: var(--neon-red); }

/* ---- Accordion Responsive ---- */
@media (max-width: 767.98px) {
    .acc-stats-grid {
        grid-template-columns: 1fr;
    }

    .acc-pricing-grid {
        grid-template-columns: 1fr;
    }

    .acc-timeline .acc-item {
        gap: 12px;
    }

    .acc-header {
        font-size: 13px;
    }

    .acc-wizard-step {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

@media (max-width: 575.98px) {
    .acc-bordered .acc-header,
    .acc-separated .acc-header,
    .acc-faq .acc-header,
    .acc-glass .acc-header,
    .acc-neon .acc-header,
    .acc-wizard .acc-header {
        padding: 12px;
    }

    .acc-bordered .acc-body,
    .acc-separated .acc-body,
    .acc-faq .acc-body,
    .acc-glass .acc-body,
    .acc-neon .acc-body,
    .acc-wizard .acc-body {
        padding: 0 12px;
    }

    .acc-icon-wrap {
        width: 28px;
        height: 28px;
        font-size: 14px;
        border-radius: 8px;
    }

    .acc-timeline .acc-item:not(:last-child)::before {
        left: 5px;
    }

    .acc-timeline-dot {
        width: 12px;
        height: 12px;
    }
}

/* ============================================================
   ALERTS & TOASTS
   ============================================================ */

/* ---- Base Alert ---- */
.alt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    position: relative;
    animation: altSlideIn 0.3s ease;
    transition: opacity 0.3s, transform 0.3s;
}

.alt:last-child { margin-bottom: 0; }

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

.alt-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.alt-icon-lg {
    font-size: 24px;
}

.alt-content {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
}

.alt-content strong {
    display: inline;
    font-weight: 700;
}

.alt-content p {
    margin: 4px 0 0;
    color: inherit;
    opacity: 0.85;
    font-size: 12px;
}

.alt-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    font-size: 12px;
    padding: 4px;
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
    margin-top: -2px;
}

.alt-close:hover { opacity: 1; }

/* ---- Solid Alerts ---- */
.alt-solid-green { background: var(--neon-green); color: #fff; }
.alt-solid-blue { background: var(--neon-blue); color: #fff; }
.alt-solid-orange { background: var(--neon-orange); color: #fff; }
.alt-solid-red { background: var(--neon-red); color: #fff; }

/* ---- Soft Alerts ---- */
.alt-soft-green { background: rgba(34, 197, 94, 0.08); color: var(--neon-green); border: 1px solid rgba(34, 197, 94, 0.15); }
.alt-soft-blue { background: rgba(59, 130, 246, 0.08); color: var(--neon-blue); border: 1px solid rgba(59, 130, 246, 0.15); }
.alt-soft-orange { background: rgba(249, 115, 22, 0.08); color: var(--neon-orange); border: 1px solid rgba(249, 115, 22, 0.15); }
.alt-soft-red { background: rgba(239, 68, 68, 0.08); color: var(--neon-red); border: 1px solid rgba(239, 68, 68, 0.15); }
.alt-soft-teal { background: rgba(20, 184, 166, 0.08); color: var(--teal-primary); border: 1px solid rgba(20, 184, 166, 0.15); }
.alt-soft-purple { background: rgba(168, 85, 247, 0.08); color: var(--neon-purple); border: 1px solid rgba(168, 85, 247, 0.15); }

/* ---- Left Border Alerts ---- */
.alt-left-green { background: rgba(34, 197, 94, 0.04); color: var(--text-primary); border-left: 4px solid var(--neon-green); }
.alt-left-blue { background: rgba(59, 130, 246, 0.04); color: var(--text-primary); border-left: 4px solid var(--neon-blue); }
.alt-left-orange { background: rgba(249, 115, 22, 0.04); color: var(--text-primary); border-left: 4px solid var(--neon-orange); }
.alt-left-red { background: rgba(239, 68, 68, 0.04); color: var(--text-primary); border-left: 4px solid var(--neon-red); }

.alt-left-green .alt-icon { color: var(--neon-green); }
.alt-left-blue .alt-icon { color: var(--neon-blue); }
.alt-left-orange .alt-icon { color: var(--neon-orange); }
.alt-left-red .alt-icon { color: var(--neon-red); }

.alt-left-green .alt-content p,
.alt-left-blue .alt-content p,
.alt-left-orange .alt-content p,
.alt-left-red .alt-content p { color: var(--text-secondary); }

/* ---- Outline Alerts ---- */
.alt-outline-teal { background: transparent; color: var(--teal-primary); border: 1px solid var(--teal-primary); }
.alt-outline-purple { background: transparent; color: var(--neon-purple); border: 1px solid var(--neon-purple); }
.alt-outline-orange { background: transparent; color: var(--neon-orange); border: 1px solid var(--neon-orange); }
.alt-outline-red { background: transparent; color: var(--neon-red); border: 1px solid var(--neon-red); }

/* ---- Glass Alerts ---- */
.alt-glass {
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.alt-glass-teal { background: rgba(20, 184, 166, 0.06); color: var(--teal-light); border-color: rgba(20, 184, 166, 0.15); }
.alt-glass-purple { background: rgba(168, 85, 247, 0.06); color: #c084fc; border-color: rgba(168, 85, 247, 0.15); }
.alt-glass-pink { background: rgba(236, 72, 153, 0.06); color: #f9a8d4; border-color: rgba(236, 72, 153, 0.15); }

/* ---- Neon Alerts ---- */
.alt-neon {
    background: transparent;
    color: var(--alt-neon, var(--teal-primary));
    border: 1px solid var(--alt-neon, var(--teal-primary));
    box-shadow: 0 0 10px color-mix(in srgb, var(--alt-neon, var(--teal-primary)) 20%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--alt-neon, var(--teal-primary)) 5%, transparent);
}

/* ---- Rich Alert Elements ---- */
.alt-rich { align-items: flex-start; }

.alt-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.alt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.alt-btn-primary { background: var(--teal-primary); color: #fff; }
.alt-btn-primary:hover { background: var(--teal-dark); transform: translateY(-1px); }

.alt-btn-danger { background: var(--neon-red); color: #fff; }
.alt-btn-danger:hover { background: #dc2626; transform: translateY(-1px); }

.alt-btn-ghost { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); border: 1px solid var(--border-color); }
.alt-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }

.alt-btn-solid {
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
}

.alt-btn-solid.green { background: var(--neon-green); }
.alt-btn-solid.blue { background: var(--neon-blue); }
.alt-btn-solid.orange { background: var(--neon-orange); }
.alt-btn-solid.red { background: var(--neon-red); }
.alt-btn-solid.purple { background: var(--neon-purple); }
.alt-btn-solid:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* Alert List */
.alt-list {
    list-style: none;
    padding: 6px 0 0;
    margin: 0;
}

.alt-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 12px;
}

.alt-list li i { color: var(--neon-red); font-size: 13px; }

/* Alert Progress */
.alt-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.alt-progress {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.alt-progress-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--teal-primary), var(--teal-light));
    transition: width 0.5s ease;
}

.alt-progress-text {
    font-size: 12px;
    font-weight: 800;
    min-width: 32px;
    text-align: right;
}

/* Alert Avatar */
.alt-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* Alert Meta */
.alt-meta {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    font-size: 11px;
    opacity: 0.6;
}

.alt-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Spin Animation */
.alt-spin {
    animation: altSpin 1.5s linear infinite;
}

@keyframes altSpin {
    to { transform: rotate(360deg); }
}

/* ---- Confirm Alert ---- */
.alt-confirm {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 20px;
    color: var(--text-primary);
}

.alt-confirm-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.alt-confirm-icon.red { background: rgba(239, 68, 68, 0.1); color: var(--neon-red); }
.alt-confirm-icon.orange { background: rgba(249, 115, 22, 0.1); color: var(--neon-orange); }

.alt-confirm .alt-content p {
    color: var(--text-secondary);
}

/* ---- Sticky Alert ---- */
.alt-sticky {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    overflow: hidden;
}

.alt-sticky-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal-primary), var(--neon-blue), var(--neon-purple));
}

.alt-sticky .alt-icon { color: var(--teal-primary); }
.alt-sticky .alt-content p { color: var(--text-secondary); }

/* Countdown */
.alt-countdown {
    font-weight: 800;
    font-family: 'Fira Code', monospace;
    font-size: 14px;
}

/* Auto Dismiss */
.alt-auto-dismiss {
    position: relative;
    overflow: hidden;
}

.alt-auto-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
}

.alt-auto-bar {
    height: 100%;
    background: var(--neon-green);
    transition: width 1s linear;
    border-radius: 0 3px 3px 0;
}

/* ---- Banner Alerts ---- */
.alt-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-radius: var(--radius-lg);
    animation: altSlideIn 0.3s ease;
}

.alt-banner-content {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.alt-banner-content > i {
    font-size: 22px;
    flex-shrink: 0;
}

.alt-banner-content strong {
    font-size: 13px;
    font-weight: 700;
}

.alt-banner-content span {
    display: block;
    font-size: 12px;
    opacity: 0.8;
    margin-top: 1px;
}

.alt-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.alt-banner-btn {
    padding: 6px 16px;
    border-radius: 50px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.alt-banner-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.alt-banner-link {
    background: none;
    border: none;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.alt-banner-link:hover { opacity: 1; }

.alt-banner-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    transition: opacity var(--transition-fast);
}

.alt-banner-close:hover { opacity: 1; }

.alt-banner-gradient {
    background: var(--ban-grad, linear-gradient(135deg, var(--neon-purple), var(--neon-pink)));
    color: #fff;
}

.alt-banner-info {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    color: var(--neon-blue);
}

.alt-banner-info .alt-banner-btn {
    background: var(--neon-blue);
    color: #fff;
}

.alt-banner-dark {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.alt-banner-dark .alt-banner-btn {
    background: var(--teal-primary);
    color: #fff;
}

.alt-banner-dark .alt-banner-link {
    color: var(--text-muted);
}

/* ---- Toast Position Grid ---- */
.alt-pos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.alt-pos-btn {
    padding: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.alt-pos-btn:hover {
    border-color: var(--teal-primary);
    color: var(--text-primary);
}

.alt-pos-btn.active {
    border-color: var(--teal-primary);
    background: rgba(20, 184, 166, 0.08);
    color: var(--teal-primary);
}

/* ---- Toast System ---- */
.tst-container {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.tst-top-right { top: 20px; right: 20px; }
.tst-top-left { top: 20px; left: 20px; }
.tst-bottom-right { bottom: 20px; right: 20px; }
.tst-bottom-left { bottom: 20px; left: 20px; }
.tst-top-center { top: 20px; left: 50%; transform: translateX(-50%); align-items: center; }

.tst {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 320px;
    max-width: 400px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    pointer-events: all;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tst-top-left .tst,
.tst-bottom-left .tst {
    transform: translateX(-30px);
}

.tst-top-center .tst {
    transform: translateY(-20px) translateX(0);
}

.tst.tst-show {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

.tst.tst-hide {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
}

.tst-top-left .tst.tst-hide,
.tst-bottom-left .tst.tst-hide {
    transform: translateX(-30px) scale(0.95);
}

.tst-top-center .tst.tst-hide {
    transform: translateY(-20px) scale(0.95);
}

.tst-accent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
}

.tst-success .tst-accent { background: var(--neon-green); }
.tst-info .tst-accent { background: var(--neon-blue); }
.tst-warning .tst-accent { background: var(--neon-orange); }
.tst-error .tst-accent { background: var(--neon-red); }
.tst-custom .tst-accent { background: var(--neon-purple); }

.tst-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.tst-success .tst-icon { color: var(--neon-green); }
.tst-info .tst-icon { color: var(--neon-blue); }
.tst-warning .tst-icon { color: var(--neon-orange); }
.tst-error .tst-icon { color: var(--neon-red); }
.tst-custom .tst-icon { color: var(--neon-purple); }

.tst-body {
    flex: 1;
    min-width: 0;
}

.tst-body strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.tst-body p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px 0 0;
}

.tst-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 4px;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.tst-close:hover { color: var(--text-primary); }

.tst-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.04);
}

.tst-timer::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    animation: tstTimerShrink 5s linear forwards;
}

.tst-success .tst-timer::after { background: var(--neon-green); }
.tst-info .tst-timer::after { background: var(--neon-blue); }
.tst-warning .tst-timer::after { background: var(--neon-orange); }
.tst-error .tst-timer::after { background: var(--neon-red); }
.tst-custom .tst-timer::after { background: var(--neon-purple); }

@keyframes tstTimerShrink {
    from { width: 100%; }
    to { width: 0%; }
}

/* Toast Preview (Static) */
.alt-toast-preview .tst {
    position: relative;
    opacity: 1;
    transform: none;
    margin-bottom: 8px;
    min-width: auto;
    max-width: 100%;
}

.alt-toast-preview .tst:last-child { margin-bottom: 0; }

.alt-toast-preview .tst-timer::after {
    animation: none;
    width: 65%;
}

/* ---- Notification Center ---- */
.alt-notif-group {
    border-bottom: 1px solid var(--border-color);
}

.alt-notif-group:last-child { border-bottom: none; }

.alt-notif-group-header {
    padding: 10px 16px;
    background: var(--bg-tertiary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.alt-notif-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background var(--transition-fast);
}

.alt-notif-item:last-child { border-bottom: none; }

.alt-notif-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.alt-notif-item.unread {
    background: rgba(20, 184, 166, 0.02);
}

.alt-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal-primary);
    flex-shrink: 0;
}

.alt-notif-dot.read {
    background: transparent;
    border: 1px solid var(--border-color);
}

.alt-notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.alt-notif-icon.green { background: rgba(34, 197, 94, 0.1); color: var(--neon-green); }
.alt-notif-icon.purple { background: rgba(168, 85, 247, 0.1); color: var(--neon-purple); }
.alt-notif-icon.red { background: rgba(239, 68, 68, 0.1); color: var(--neon-red); }
.alt-notif-icon.blue { background: rgba(59, 130, 246, 0.1); color: var(--neon-blue); }
.alt-notif-icon.teal { background: rgba(20, 184, 166, 0.1); color: var(--teal-primary); }

.alt-notif-body {
    flex: 1;
    min-width: 0;
}

.alt-notif-body p {
    font-size: 13px;
    color: var(--text-primary);
    margin: 0;
}

.alt-notif-body span {
    font-size: 11px;
    color: var(--text-muted);
}

.alt-notif-action {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.alt-notif-action:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

/* ---- Alerts Responsive ---- */
@media (max-width: 767.98px) {
    .alt-banner {
        flex-direction: column;
        gap: 10px;
        padding: 14px;
    }

    .alt-banner-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .tst {
        min-width: 280px;
        max-width: calc(100vw - 40px);
    }

    .alt-confirm-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .alt-pos-grid {
        gap: 6px;
    }
}

@media (max-width: 575.98px) {
    .alt {
        padding: 12px;
        gap: 10px;
    }

    .alt-actions {
        flex-wrap: wrap;
    }

    .tst-container {
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
    }

    .tst {
        min-width: auto;
        max-width: 100%;
    }

    .alt-notif-body p {
        font-size: 12px;
    }
}

/* ============================================
   PROGRESS & SPINNERS
   ============================================ */

/* --- Progress Bar Base --- */
.prg-bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 100px;
    overflow: hidden;
    display: flex;
}

.prg-fill {
    height: 100%;
    background: var(--prg-clr, var(--teal-primary));
    border-radius: 100px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Boyut Varyantları */
.prg-xs { height: 2px; }
.prg-sm { height: 4px; }
.prg-md { height: 12px; }
.prg-lg { height: 18px; }
.prg-xl { height: 24px; }

/* Etiket */
.prg-label {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    white-space: nowrap;
}

/* Yüzde Göstergesi */
.prg-percent {
    font-size: 13px;
    font-weight: 700;
    color: var(--prg-clr, var(--teal-primary));
    font-family: 'Fira Code', monospace;
}

/* Gradient Fill */
.prg-gradient {
    background: linear-gradient(90deg, var(--prg-from), var(--prg-to)) !important;
}

/* Rainbow */
.prg-rainbow {
    background: linear-gradient(90deg,
    var(--neon-red), var(--neon-orange), var(--neon-green),
    var(--teal-primary), var(--neon-blue), var(--neon-purple), var(--neon-pink)) !important;
}

/* --- Çizgili (Striped) --- */
.prg-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,0.12) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.12) 75%,
        transparent 75%,
        transparent
    );
    background-size: 20px 20px;
}

.prg-animated {
    animation: prgStripe 0.8s linear infinite;
}
.prg-animated-reverse {
    animation: prgStripe 0.8s linear infinite reverse;
}

@keyframes prgStripe {
    0% { background-position: 20px 0; }
    100% { background-position: 0 0; }
}

/* --- Pulse Glow --- */
.prg-pulse {
    animation: prgPulse 2s ease-in-out infinite;
}
@keyframes prgPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--prg-clr) 40%, transparent); }
    50% { box-shadow: 0 0 12px 2px color-mix(in srgb, var(--prg-clr) 60%, transparent); }
}

/* --- Shimmer --- */
.prg-shimmer {
    overflow: hidden;
}
.prg-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: prgShimmer 2s ease-in-out infinite;
}
@keyframes prgShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* --- Indeterminate --- */
.prg-indeterminate {
    width: 40% !important;
    animation: prgIndeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    border-radius: 100px;
}
@keyframes prgIndeterminate {
    0% { margin-left: 0; width: 30%; }
    50% { margin-left: 30%; width: 40%; }
    100% { margin-left: 100%; width: 10%; }
}

/* --- Wave --- */
.prg-wave::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: rgba(255,255,255,0.4);
    border-radius: 0 100px 100px 0;
    animation: prgWave 1.5s ease-in-out infinite;
}
@keyframes prgWave {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.5); }
}

/* --- Neon Glow Progress --- */
.prg-neon {
    border: 1px solid color-mix(in srgb, var(--prg-clr) 20%, transparent);
    background: color-mix(in srgb, var(--prg-clr) 5%, transparent);
}
.prg-neon-fill {
    box-shadow:
        0 0 8px color-mix(in srgb, var(--prg-clr) 50%, transparent),
        0 0 20px color-mix(in srgb, var(--prg-clr) 25%, transparent);
}

/* --- Yığınlı (Stacked) --- */
.prg-stacked {
    display: flex;
    gap: 0;
    overflow: hidden;
}
.prg-stacked .prg-fill {
    border-radius: 0;
}
.prg-stacked .prg-fill:first-child {
    border-radius: 100px 0 0 100px;
}
.prg-stacked .prg-fill:last-child {
    border-radius: 0 100px 100px 0;
}

.prg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}
.prg-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* --- Segmentli --- */
.prg-segmented {
    display: flex;
    gap: 4px;
}
.prg-seg {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    transition: all 0.3s ease;
}
.prg-seg-active {
    background: var(--prg-clr, var(--teal-primary));
    box-shadow: 0 0 6px color-mix(in srgb, var(--prg-clr, var(--teal-primary)) 30%, transparent);
}
.prg-seg-10 .prg-seg {
    height: 6px;
    border-radius: 3px;
}

/* --- Dairesel Progress (SVG) --- */
.prg-circle {
    width: var(--prg-size, 100px);
    height: var(--prg-size, 100px);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.prg-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.prg-circle-bg {
    fill: none;
    stroke: rgba(255,255,255,0.06);
    stroke-width: 3;
}
.prg-circle-fill {
    fill: none;
    stroke: var(--prg-clr, var(--teal-primary));
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 1s ease;
}
.prg-circle-text {
    position: absolute;
    font-size: 16px;
    font-weight: 700;
    color: var(--prg-clr, var(--text-primary));
    font-family: 'Fira Code', monospace;
}

/* Neon Circle */
.prg-circle-neon .prg-circle-fill {
    filter: drop-shadow(0 0 6px var(--prg-clr));
}
.prg-circle-neon .prg-circle-bg {
    stroke: color-mix(in srgb, var(--prg-clr) 10%, transparent);
}

/* --- Yarı Dairesel Gauge --- */
.prg-gauge {
    width: 140px;
    position: relative;
    text-align: center;
}
.prg-gauge svg {
    width: 100%;
    overflow: visible;
}
.prg-gauge-bg {
    fill: none;
    stroke: rgba(255,255,255,0.06);
    stroke-width: 3;
    stroke-linecap: round;
}
.prg-gauge-fill {
    fill: none;
    stroke: var(--prg-clr, var(--teal-primary));
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--prg-clr) 40%, transparent));
    transition: stroke-dasharray 1s ease;
}
.prg-gauge-info {
    margin-top: -16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.prg-gauge-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--prg-clr, var(--text-primary));
    font-family: 'Fira Code', monospace;
}
.prg-gauge-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: -2px;
}

/* --- Adım Progress (Steps) --- */
.prg-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px 0;
}
.prg-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}
.prg-step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.3s ease;
    z-index: 1;
}
.prg-step-label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.prg-step-line {
    width: 60px;
    height: 2px;
    background: rgba(255,255,255,0.08);
    margin: 0 4px;
    margin-bottom: 24px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Done */
.prg-step-done .prg-step-dot {
    background: var(--teal-primary);
    border-color: var(--teal-primary);
    color: #fff;
    box-shadow: 0 0 12px rgba(20,184,166,0.3);
}
.prg-step-done .prg-step-label {
    color: var(--teal-primary);
}
.prg-step-line-done {
    background: var(--prg-clr, var(--teal-primary));
}

/* Active */
.prg-step-active .prg-step-dot {
    background: transparent;
    border-color: var(--prg-clr, var(--teal-primary));
    color: var(--prg-clr, var(--teal-primary));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--prg-clr, var(--teal-primary)) 15%, transparent);
}
.prg-step-active .prg-step-label {
    color: var(--prg-clr, var(--teal-primary));
    font-weight: 600;
}

/* Icon Steps */
.prg-steps-icon .prg-step-dot {
    font-size: 16px;
}
.prg-steps-icon .prg-step-done .prg-step-dot {
    background: var(--prg-clr, var(--teal-primary));
    border-color: var(--prg-clr, var(--teal-primary));
    box-shadow: 0 0 12px color-mix(in srgb, var(--prg-clr) 30%, transparent);
}
.prg-steps-icon .prg-step-done .prg-step-label {
    color: var(--prg-clr, var(--teal-primary));
}

/* --- Dikey Adımlar --- */
.prg-steps-vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 8px;
}
.prg-vstep {
    display: flex;
    gap: 16px;
    padding-bottom: 24px;
    position: relative;
}
.prg-vstep:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: rgba(255,255,255,0.08);
}
.prg-vstep-dot {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-muted);
    z-index: 1;
}
.prg-vstep-content h6 {
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--text-primary);
}
.prg-vstep-content p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

/* Done */
.prg-vstep-done .prg-vstep-dot {
    background: var(--teal-primary);
    border-color: var(--teal-primary);
    color: #fff;
}
.prg-vstep-done::after {
    background: var(--teal-primary) !important;
}

/* Active */
.prg-vstep-active .prg-vstep-dot {
    border-color: var(--teal-primary);
    color: var(--teal-primary);
    box-shadow: 0 0 0 4px rgba(20,184,166,0.15);
}
.prg-vstep-active::after {
    background: linear-gradient(to bottom, var(--teal-primary), rgba(255,255,255,0.08)) !important;
}

/* --- Mini Step Bars --- */
.prg-mini-steps {
    display: flex;
    gap: 3px;
}
.prg-mini-step {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    transition: all 0.3s ease;
}
.prg-mini-done {
    background: var(--prg-clr, var(--teal-primary));
    box-shadow: 0 0 4px color-mix(in srgb, var(--prg-clr, var(--teal-primary)) 25%, transparent);
}

/* ============================================
   SPINNERS
   ============================================ */

/* --- Border Spinner --- */
.spn-border {
    width: var(--spn-size, 32px);
    height: var(--spn-size, 32px);
    border: 3px solid color-mix(in srgb, var(--spn-clr) 20%, transparent);
    border-top-color: var(--spn-clr, var(--teal-primary));
    border-radius: 50%;
    animation: spnRotate 0.75s linear infinite;
    flex-shrink: 0;
}
.spn-thick {
    border-width: 5px;
}
.spn-thin {
    border-width: 2px;
}

@keyframes spnRotate {
    to { transform: rotate(360deg); }
}

/* --- Growing Spinner --- */
.spn-grow {
    width: var(--spn-size, 32px);
    height: var(--spn-size, 32px);
    background: var(--spn-clr, var(--teal-primary));
    border-radius: 50%;
    animation: spnGrow 0.75s linear infinite;
    flex-shrink: 0;
}
@keyframes spnGrow {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

/* --- Dot Spinner --- */
.spn-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}
.spn-dot {
    width: var(--spn-size, 10px);
    height: var(--spn-size, 10px);
    background: var(--spn-clr, var(--teal-primary));
    border-radius: 50%;
    animation: spnDotPulse 1.4s ease-in-out infinite;
}
.spn-dot:nth-child(2) { animation-delay: 0.16s; }
.spn-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes spnDotPulse {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* --- Bounce Dots --- */
.spn-bounce {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 30px;
}
.spn-bounce-dot {
    width: 10px;
    height: 10px;
    background: var(--spn-clr, var(--teal-primary));
    border-radius: 50%;
    animation: spnBounce 0.6s ease-in-out infinite alternate;
}
.spn-bounce-dot:nth-child(2) { animation-delay: 0.2s; }
.spn-bounce-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes spnBounce {
    from { transform: translateY(0); }
    to { transform: translateY(-16px); }
}

/* --- Bar Spinner --- */
.spn-bars {
    display: flex;
    gap: 3px;
    align-items: center;
    height: 30px;
}
.spn-bar-item {
    width: 4px;
    height: 10px;
    background: var(--spn-clr, var(--teal-primary));
    border-radius: 2px;
    animation: spnBar 1.2s ease-in-out infinite;
}
.spn-bar-item:nth-child(1) { animation-delay: 0s; }
.spn-bar-item:nth-child(2) { animation-delay: 0.1s; }
.spn-bar-item:nth-child(3) { animation-delay: 0.2s; }
.spn-bar-item:nth-child(4) { animation-delay: 0.3s; }
.spn-bar-item:nth-child(5) { animation-delay: 0.4s; }

@keyframes spnBar {
    0%, 40%, 100% { height: 10px; }
    20% { height: 26px; }
}

/* --- Pulse Ring --- */
.spn-pulse {
    width: 48px;
    height: 48px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spn-pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--spn-clr, var(--teal-primary));
    animation: spnPulseRing 1.5s ease-out infinite;
}
.spn-pulse-ring:nth-child(2) { animation-delay: 0.5s; }
.spn-pulse-core {
    width: 12px;
    height: 12px;
    background: var(--spn-clr, var(--teal-primary));
    border-radius: 50%;
}

@keyframes spnPulseRing {
    0% { transform: scale(0.3); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

/* --- Orbit Spinner --- */
.spn-orbit {
    width: 48px;
    height: 48px;
    position: relative;
}
.spn-orbit-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--spn-clr, var(--teal-primary));
    animation: spnRotate 1s linear infinite;
}
.spn-orbit-ring:nth-child(2) {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    border-top-color: color-mix(in srgb, var(--spn-clr) 50%, transparent);
    animation-duration: 0.6s;
    animation-direction: reverse;
}

/* --- Dual Ring --- */
.spn-dual {
    width: 48px;
    height: 48px;
    border: 3px solid transparent;
    border-top-color: var(--spn-clr, var(--teal-primary));
    border-bottom-color: var(--spn-clr2, var(--neon-purple));
    border-radius: 50%;
    animation: spnRotate 0.8s linear infinite;
}

/* --- Spinner with Text --- */
.spn-with-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.spn-with-text span {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ============================================
   SKELETON LOADERS
   ============================================ */

.skel-shimmer {
    background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: skelShimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

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

/* Card Skeleton */
.skel-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.skel-img {
    width: 100%;
    height: 140px;
    border-radius: 0;
}
.skel-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Lines */
.skel-line {
    height: 12px;
    border-radius: 4px;
}
.skel-w30 { width: 30%; }
.skel-w40 { width: 40%; }
.skel-w50 { width: 50%; }
.skel-w60 { width: 60%; }
.skel-w70 { width: 70%; }
.skel-w80 { width: 80%; }
.skel-w100 { width: 100%; }

/* List Skeleton */
.skel-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.skel-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
}
.skel-list-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Table Skeleton */
.skel-table {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.skel-table-head {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.skel-table-row {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.skel-table-head .skel-line,
.skel-table-row .skel-line {
    flex: 1;
}

/* Stat Card Skeleton */
.skel-stat-card {
    height: 100px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* Chart Skeleton */
.skel-chart {
    height: 220px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* ============================================
   FILE UPLOAD PROGRESS
   ============================================ */

.prg-file {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}
.prg-file-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.prg-file-info {
    flex: 1;
    min-width: 0;
}
.prg-file-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prg-file-status {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Upload Zone */
.prg-upload-zone {
    border: 2px dashed rgba(20,184,166,0.3);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    background: rgba(20,184,166,0.03);
    transition: all 0.3s ease;
}
.prg-upload-zone:hover {
    border-color: var(--teal-primary);
    background: rgba(20,184,166,0.06);
}

/* ============================================
   OVERLAY & BUTTON LOADERS
   ============================================ */

.prg-btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    background: var(--btn-clr, var(--teal-primary));
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: not-allowed;
    opacity: 0.85;
}
.prg-btn-outline {
    background: transparent !important;
    border: 1px solid var(--btn-clr) !important;
    color: var(--btn-clr) !important;
}

/* Section Overlay */
.prg-overlay-section {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 26, 0.8);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 10;
}

/* Top Loading Bar */
.prg-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--teal-primary), var(--neon-blue));
    border-radius: 0 2px 2px 0;
    z-index: 100;
    transition: none;
    box-shadow: 0 0 8px var(--teal-primary);
}
.prg-top-active {
    animation: prgTopBar 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.prg-top-done {
    animation: none !important;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes prgTopBar {
    0% { width: 0; }
    20% { width: 40%; }
    50% { width: 65%; }
    80% { width: 85%; }
    100% { width: 95%; }
}

/* ============================================
   DOWNLOAD MANAGER & REAL WORLD
   ============================================ */

.prg-download {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}
.prg-download-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.prg-download-paused {
    opacity: 0.6;
}

.prg-dl-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.prg-dl-btn:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

/* Skill Bars */
.prg-skill {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.prg-skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prg-skill-name {
    font-size: 13px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.prg-skill-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    font-family: 'Fira Code', monospace;
}

/* Project Status */
.prg-project {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}
.prg-project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.prg-project-meta {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}
.prg-project-meta span {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Resource Card */
.prg-resource-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}
.prg-resource-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ============================================
   PROGRESS & SPINNERS RESPONSIVE
   ============================================ */

@media (max-width: 767.98px) {
    .prg-steps {
        flex-wrap: wrap;
        gap: 4px;
    }
    .prg-step-line {
        width: 30px;
    }
    .prg-step-dot {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
    .prg-step-label {
        font-size: 10px;
    }
    .prg-gauge {
        width: 110px;
    }
    .prg-gauge-value {
        font-size: 20px;
    }
    .prg-download-header {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 575.98px) {
    .prg-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .prg-step {
        flex-direction: row;
        gap: 12px;
    }
    .prg-step-line {
        width: 2px;
        height: 20px;
        margin: 0 0 0 15px;
    }
    .prg-legend {
        flex-direction: column;
        gap: 4px;
    }
    .prg-circle {
        --prg-size: 70px !important;
    }
    .prg-circle-text {
        font-size: 12px !important;
    }
    .prg-resource-card {
        padding: 10px 4px;
    }
}

/* ============================================
   SETTINGS PAGE
   ============================================ */

/* --- Settings Layout --- */
.stg-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* --- Settings Nav (Left) --- */
.stg-nav {
    width: 280px;
    min-width: 280px;
    position: sticky;
    top: 90px;
}
.stg-nav-inner {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stg-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}
.stg-nav-item i {
    font-size: 18px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.stg-nav-item div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.stg-nav-item span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.stg-nav-item small {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stg-nav-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
}
.stg-nav-item.active {
    background: rgba(20,184,166,0.08);
    border: 1px solid rgba(20,184,166,0.15);
}
.stg-nav-item.active i {
    color: var(--teal-primary);
}
.stg-nav-item.active span {
    color: var(--teal-primary);
    font-weight: 600;
}

/* --- Settings Content (Right) --- */
.stg-content {
    flex: 1;
    min-width: 0;
}
.stg-panel {
    display: none;
}
.stg-panel.active {
    display: block;
}

/* Panel Header */
.stg-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.stg-panel-header h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.stg-panel-header h5 i {
    color: var(--teal-primary);
}
.stg-panel-header p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Save Button */
.stg-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    background: var(--teal-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.stg-save-btn:hover {
    background: var(--teal-dark);
    box-shadow: 0 0 16px rgba(20,184,166,0.3);
}

/* --- Section --- */
.stg-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
}
.stg-section-title {
    margin-bottom: 20px;
}
.stg-section-title h6 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.stg-section-title p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* --- Form Fields --- */
.stg-field {
    margin-bottom: 16px;
}
.stg-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.stg-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}
.stg-input:focus {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.1);
}
.stg-textarea {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.stg-textarea:focus {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.1);
}
.stg-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    outline: none;
    cursor: pointer;
}
.stg-select:focus {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.1);
}
.stg-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}

/* Input Group */
.stg-input-group {
    display: flex;
    align-items: stretch;
}
.stg-input-group .stg-input {
    border-radius: 0 10px 10px 0;
    border-left: none;
}
.stg-input-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: 10px 0 0 10px;
    font-size: 13px;
    color: var(--text-muted);
    font-family: 'Fira Code', monospace;
    white-space: nowrap;
}
.stg-input-group .stg-btn {
    border-radius: 0 10px 10px 0;
    border-left: none;
}

/* Rows */
.stg-row {
    display: flex;
    gap: 16px;
}
.stg-half {
    flex: 1;
}

/* Range */
.stg-range-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.stg-range {
    flex: 1;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.08);
    outline: none;
}
.stg-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--teal-primary);
    cursor: pointer;
    box-shadow: 0 0 8px rgba(20,184,166,0.3);
}
.stg-range-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-primary);
    font-family: 'Fira Code', monospace;
    white-space: nowrap;
    min-width: 90px;
    text-align: right;
}

/* --- Logo Upload --- */
.stg-logo-upload {
    display: flex;
    align-items: center;
    gap: 20px;
}
.stg-logo-current {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--teal-primary), var(--neon-blue));
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Serif Display', serif;
}
.stg-logo-img {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid var(--border-color);
}
.stg-logo-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stg-logo-actions .stg-btn {
    align-self: flex-start;
}

/* --- Toggle / Switch --- */
.stg-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.stg-toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stg-toggle-item:last-child {
    border-bottom: none;
}
.stg-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stg-toggle-info span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}
.stg-toggle-info small {
    font-size: 12px;
    color: var(--text-muted);
}

/* Custom Switch */
.stg-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.stg-switch input { opacity: 0; width: 0; height: 0; }
.stg-switch-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.stg-switch-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
}
.stg-switch input:checked + .stg-switch-slider {
    background: var(--teal-primary);
}
.stg-switch input:checked + .stg-switch-slider::before {
    transform: translateX(20px);
}
.stg-switch-sm {
    width: 36px;
    height: 20px;
}
.stg-switch-sm .stg-switch-slider::before {
    width: 14px;
    height: 14px;
}
.stg-switch-sm input:checked + .stg-switch-slider::before {
    transform: translateX(16px);
}
.stg-switch-lg {
    width: 56px;
    height: 30px;
}
.stg-switch-lg .stg-switch-slider::before {
    width: 24px;
    height: 24px;
}
.stg-switch-lg input:checked + .stg-switch-slider::before {
    transform: translateX(26px);
}

/* --- Buttons --- */
.stg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.stg-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
}
.stg-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}
.stg-btn-ghost {
    border-color: transparent;
    background: transparent;
}
.stg-btn-ghost:hover {
    background: rgba(255,255,255,0.04);
}
.stg-btn-danger {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.2);
    color: var(--neon-red);
}
.stg-btn-danger:hover {
    background: rgba(239,68,68,0.2);
}
.stg-btn-warning {
    background: rgba(249,115,22,0.1);
    border-color: rgba(249,115,22,0.2);
    color: var(--neon-orange);
}
.stg-btn-warning:hover {
    background: rgba(249,115,22,0.2);
}
.stg-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.stg-btn-icon:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}

/* --- Notification Channels --- */
.stg-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.stg-channel-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}
.stg-channel-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ch-clr) 12%, transparent);
    color: var(--ch-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.stg-channel-info {
    flex: 1;
    min-width: 0;
}
.stg-channel-info h6 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}
.stg-channel-info small {
    font-size: 11px;
    color: var(--text-muted);
}

/* --- Notification Table --- */
.stg-notif-table {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}
.stg-notif-head {
    display: grid;
    grid-template-columns: 1fr 80px 80px 80px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stg-notif-head span:not(:first-child) {
    text-align: center;
}
.stg-notif-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px 80px;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.stg-notif-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-primary);
}

/* Custom Checkbox */
.stg-check {
    display: flex;
    justify-content: center;
    cursor: pointer;
}
.stg-check input { display: none; }
.stg-checkmark {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.12);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.stg-check input:checked + .stg-checkmark {
    background: var(--teal-primary);
    border-color: var(--teal-primary);
}
.stg-check input:checked + .stg-checkmark::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

/* --- 2FA Card --- */
.stg-2fa-card {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(20,184,166,0.15);
    background: rgba(20,184,166,0.04);
}
.stg-2fa-status {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.stg-2fa-active i {
    font-size: 24px;
    color: var(--neon-green);
}
.stg-2fa-active span {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.stg-2fa-active small {
    font-size: 12px;
    color: var(--text-muted);
}
.stg-2fa-active div {
    display: flex;
    flex-direction: column;
}
.stg-2fa-methods {
    display: flex;
    gap: 8px;
}
.stg-2fa-method {
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.stg-2fa-method:hover {
    background: rgba(255,255,255,0.06);
}
.stg-2fa-selected {
    background: rgba(20,184,166,0.1);
    border-color: rgba(20,184,166,0.2);
    color: var(--teal-primary);
}

/* --- Sessions --- */
.stg-sessions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stg-session-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}
.stg-session-current {
    border-color: rgba(20,184,166,0.15);
    background: rgba(20,184,166,0.04);
}
.stg-session-icon {
    font-size: 20px;
    color: var(--text-muted);
    width: 24px;
    text-align: center;
}
.stg-session-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.stg-session-info span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.stg-session-info small {
    font-size: 12px;
    color: var(--text-muted);
}
.stg-session-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--teal-primary);
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(20,184,166,0.1);
}

/* --- API Keys --- */
.stg-api-keys {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.stg-api-key {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}
.stg-api-key-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.stg-api-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.stg-api-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.stg-api-live {
    background: rgba(34,197,94,0.15);
    color: var(--neon-green);
}
.stg-api-test {
    background: rgba(249,115,22,0.15);
    color: var(--neon-orange);
}
.stg-api-key-value {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-primary);
    margin-bottom: 8px;
}
.stg-api-key-value code {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    font-family: 'Fira Code', monospace;
}
.stg-api-key-meta {
    display: flex;
    gap: 16px;
}
.stg-api-key-meta span {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Webhook Tags --- */
.stg-tag-select {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.stg-tag-chip {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: 'Fira Code', monospace;
    cursor: pointer;
    transition: all 0.2s ease;
}
.stg-tag-chip:hover {
    background: rgba(255,255,255,0.04);
}
.stg-tag-active {
    background: rgba(20,184,166,0.1);
    border-color: rgba(20,184,166,0.2);
    color: var(--teal-primary);
}

/* --- Integrations --- */
.stg-integrations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.stg-integ-card {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}
.stg-integ-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.stg-integ-logo {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.stg-integ-header h6 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}
.stg-integ-status-on {
    font-size: 11px;
    color: var(--neon-green);
    font-weight: 600;
}
.stg-integ-status-off {
    font-size: 11px;
    color: var(--text-muted);
}
.stg-integ-card p {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.4;
}
.stg-integ-connected {
    border-color: rgba(34,197,94,0.12);
}

/* --- Theme Grid --- */
.stg-theme-grid {
    display: flex;
    gap: 16px;
}
.stg-theme-card {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
}
.stg-theme-card:hover {
    border-color: rgba(255,255,255,0.12);
}
.stg-theme-selected {
    border-color: var(--teal-primary) !important;
    background: rgba(20,184,166,0.04);
}
.stg-theme-check {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--teal-primary);
    font-size: 16px;
}
.stg-theme-selected .stg-theme-check {
    display: block;
}
.stg-theme-card span {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}
.stg-theme-selected span {
    color: var(--teal-primary);
}

/* Theme Preview Mini */
.stg-theme-preview {
    height: 80px;
    border-radius: 8px;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}
.stg-tp-sidebar {
    width: 30%;
}
.stg-tp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.stg-tp-navbar { height: 20%; }
.stg-tp-content { flex: 1; }

.stg-theme-dark-preview .stg-tp-sidebar { background: #0d1224; }
.stg-theme-dark-preview .stg-tp-navbar { background: #111827; }
.stg-theme-dark-preview .stg-tp-content { background: #0a0e1a; }

.stg-theme-light-preview .stg-tp-sidebar { background: #f1f5f9; }
.stg-theme-light-preview .stg-tp-navbar { background: #ffffff; }
.stg-theme-light-preview .stg-tp-content { background: #f8fafc; }

.stg-theme-auto-preview .stg-tp-sidebar { background: linear-gradient(to right, #0d1224 50%, #f1f5f9 50%); }
.stg-theme-auto-preview .stg-tp-navbar { background: linear-gradient(to right, #111827 50%, #ffffff 50%); }
.stg-theme-auto-preview .stg-tp-content { background: linear-gradient(to right, #0a0e1a 50%, #f8fafc 50%); }

/* --- Color Picker --- */
.stg-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.stg-color-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}
.stg-color-opt:hover {
    background: rgba(255,255,255,0.03);
}
.stg-color-selected {
    border-color: var(--teal-primary);
    background: rgba(20,184,166,0.04);
}
.stg-color-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sw-clr);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.stg-color-opt span {
    font-size: 11px;
    color: var(--text-secondary);
}
.stg-color-selected span {
    color: var(--teal-primary);
    font-weight: 600;
}

/* --- Template List --- */
.stg-template-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.stg-template-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stg-template-item:last-child { border-bottom: none; }
.stg-template-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.stg-template-info i { font-size: 18px; }
.stg-template-info span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}
.stg-template-info small {
    font-size: 12px;
    color: var(--text-muted);
}
.stg-template-info div {
    display: flex;
    flex-direction: column;
}

/* --- Backup List --- */
.stg-backup-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stg-backup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}
.stg-backup-icon {
    font-size: 18px;
    width: 20px;
    text-align: center;
}
.stg-backup-success { color: var(--neon-green); }
.stg-backup-fail { color: var(--neon-red); }
.stg-backup-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.stg-backup-info span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: 'Fira Code', monospace;
}
.stg-backup-info small {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Export Grid --- */
.stg-export-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.stg-export-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
    text-align: center;
}
.stg-export-card h6 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}
.stg-export-card small {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* --- Maintenance --- */
.stg-maintenance-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}
.stg-maint-status {
    display: flex;
    align-items: center;
    gap: 12px;
}
.stg-maint-status div {
    display: flex;
    flex-direction: column;
}
.stg-maint-status span {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.stg-maint-status small {
    font-size: 12px;
    color: var(--text-muted);
}
.stg-maint-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.stg-maint-off {
    background: var(--neon-green);
    box-shadow: 0 0 8px rgba(34,197,94,0.4);
}
.stg-maint-on {
    background: var(--neon-red);
    box-shadow: 0 0 8px rgba(239,68,68,0.4);
    animation: stgMaintPulse 1.5s ease-in-out infinite;
}
@keyframes stgMaintPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(239,68,68,0.4); }
    50% { box-shadow: 0 0 16px rgba(239,68,68,0.7); }
}

/* --- System Status --- */
.stg-system-status {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.stg-status-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stg-status-item:last-child { border-bottom: none; }
.stg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.stg-dot-ok {
    background: var(--neon-green);
    box-shadow: 0 0 6px rgba(34,197,94,0.4);
}
.stg-dot-warn {
    background: var(--neon-orange);
    box-shadow: 0 0 6px rgba(249,115,22,0.4);
}
.stg-dot-err {
    background: var(--neon-red);
    box-shadow: 0 0 6px rgba(239,68,68,0.4);
}
.stg-status-item span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}
.stg-status-uptime {
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'Fira Code', monospace;
}

/* --- Danger Zone --- */
.stg-danger-zone {
    border-color: rgba(239,68,68,0.15);
    background: rgba(239,68,68,0.02);
}
.stg-danger-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.stg-danger-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(239,68,68,0.08);
}
.stg-danger-item:last-child { border-bottom: none; }
.stg-danger-item span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}
.stg-danger-item small {
    font-size: 12px;
    color: var(--text-muted);
}
.stg-danger-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* --- Toast --- */
.stg-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    z-index: 9999;
    opacity: 0;
    transform: translateY(16px);
    transition: all 0.3s ease;
}
.stg-toast strong {
    font-size: 14px;
    color: var(--text-primary);
}
.stg-toast small {
    font-size: 12px;
    color: var(--text-muted);
}
.stg-toast div {
    display: flex;
    flex-direction: column;
}
.stg-toast-show {
    opacity: 1;
    transform: translateY(0);
}
.stg-toast-hide {
    opacity: 0;
    transform: translateY(16px);
}

/* --- Test Email --- */
.stg-test-email {
    padding: 16px;
    border-radius: 10px;
    border: 1px dashed rgba(20,184,166,0.2);
    background: rgba(20,184,166,0.03);
    margin-top: 8px;
}

/* ============================================
   SETTINGS RESPONSIVE
   ============================================ */

@media (max-width: 991.98px) {
    .stg-layout {
        flex-direction: column;
    }
    .stg-nav {
        width: 100%;
        min-width: 100%;
        position: static;
    }
    .stg-nav-inner {
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
        padding: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .stg-nav-item {
        flex-shrink: 0;
        padding: 10px 14px;
    }
    .stg-nav-item small {
        display: none;
    }
    .stg-channel-grid {
        grid-template-columns: 1fr;
    }
    .stg-integrations {
        grid-template-columns: 1fr;
    }
    .stg-export-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .stg-panel-header {
        flex-direction: column;
        gap: 12px;
    }
    .stg-row {
        flex-direction: column;
        gap: 0;
    }
    .stg-theme-grid {
        flex-direction: column;
    }
    .stg-2fa-methods {
        flex-direction: column;
    }
    .stg-backup-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .stg-notif-head,
    .stg-notif-row {
        grid-template-columns: 1fr 60px 60px 60px;
    }
    .stg-logo-upload {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .stg-section {
        padding: 16px;
    }
    .stg-export-grid {
        grid-template-columns: 1fr 1fr;
    }
    .stg-nav-item i {
        font-size: 16px;
    }
    .stg-nav-item span {
        font-size: 12px;
    }
    .stg-session-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .stg-maintenance-toggle {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .stg-color-picker {
        gap: 8px;
    }
    .stg-color-opt {
        padding: 6px 8px;
    }
    .stg-color-swatch {
        width: 28px;
        height: 28px;
    }
}

/* ============================================
   USER PROFILE PAGE
   ============================================ */

/* --- Cover Photo --- */
.prf-cover {
    position: relative;
    height: 220px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    margin: -24px -24px 0;
}
.prf-cover-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0d1224 0%, #1a1f35 30%, var(--teal-dark) 60%, var(--neon-blue) 100%);
    background-size: 200% 200%;
    animation: prfCoverShift 12s ease-in-out infinite;
}
@keyframes prfCoverShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.prf-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(10,14,26,0.85));
}
.prf-cover-edit {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.prf-cover-edit:hover {
    background: rgba(0,0,0,0.6);
}

/* --- Profile Header --- */
.prf-header {
    position: relative;
    padding: 0 24px 20px;
    margin: -60px -24px 0;
    border-bottom: 1px solid var(--border-color);
}
.prf-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}
.prf-avatar {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--teal-primary), var(--neon-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--bg-primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    position: relative;
}
.prf-avatar span {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
    font-family: 'DM Serif Display', serif;
}
.prf-avatar-status {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--neon-green);
    border: 3px solid var(--bg-primary);
    box-shadow: 0 0 8px rgba(34,197,94,0.4);
}
.prf-avatar-edit {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.prf-avatar-edit:hover {
    background: var(--teal-primary);
    color: #fff;
}

/* Header Info */
.prf-header-info {
    margin-top: 4px;
}
.prf-name-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.prf-name-row h2 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 2px;
}
.prf-role {
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.prf-role i { color: var(--teal-primary); }
.prf-verified {
    color: var(--neon-blue);
    font-size: 16px;
}
.prf-bio {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 12px 0;
    max-width: 700px;
}
.prf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}
.prf-meta span {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.prf-meta a {
    color: var(--teal-primary);
    text-decoration: none;
}
.prf-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Social Buttons */
.prf-socials {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.prf-social-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--sc-clr) 12%, transparent);
    color: var(--sc-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.prf-social-btn:hover {
    background: color-mix(in srgb, var(--sc-clr) 25%, transparent);
    transform: translateY(-2px);
}

/* Buttons */
.prf-btn {
    padding: 9px 18px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.prf-btn-primary {
    background: var(--teal-primary);
    color: #fff;
}
.prf-btn-primary:hover {
    background: var(--teal-dark);
    box-shadow: 0 0 16px rgba(20,184,166,0.3);
}
.prf-btn-ghost {
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.prf-btn-ghost:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}

/* Stats Bar */
.prf-stats-bar {
    display: flex;
    gap: 0;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.prf-stat {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    border-right: 1px solid rgba(255,255,255,0.04);
}
.prf-stat:last-child { border-right: none; }
.prf-stat-val {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Fira Code', monospace;
}
.prf-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Profile Tabs --- */
.prf-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 20px 0;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.prf-tab {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.prf-tab:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.04);
}
.prf-tab.active {
    background: var(--teal-primary);
    color: #fff;
    font-weight: 600;
}

/* Tab Content */
.prf-tab-content {
    display: none;
}
.prf-tab-content.active {
    display: block;
}

/* --- Profile Cards --- */
.prf-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}
.prf-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.prf-card-title i {
    color: var(--teal-primary);
}

/* --- About List --- */
.prf-about-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.prf-about-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.prf-about-item:last-child { border-bottom: none; }
.prf-about-item > i {
    font-size: 16px;
    color: var(--text-muted);
    width: 20px;
    text-align: center;
}
.prf-about-item div {
    display: flex;
    flex-direction: column;
}
.prf-about-item small {
    font-size: 11px;
    color: var(--text-muted);
}
.prf-about-item span {
    font-size: 13px;
    color: var(--text-primary);
}

/* --- Skills Tags --- */
.prf-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.prf-skill-tag {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    background: color-mix(in srgb, var(--sk-clr) 10%, transparent);
    color: var(--sk-clr);
    border: 1px solid color-mix(in srgb, var(--sk-clr) 15%, transparent);
    transition: all 0.2s ease;
}
.prf-skill-tag:hover {
    background: color-mix(in srgb, var(--sk-clr) 18%, transparent);
    transform: translateY(-1px);
}

/* --- Team Members --- */
.prf-team {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.prf-team-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.prf-team-member:last-child { border-bottom: none; }
.prf-team-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.prf-team-member span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.prf-team-member small {
    font-size: 12px;
    color: var(--text-muted);
}
.prf-team-member div:last-child {
    display: flex;
    flex-direction: column;
}

/* --- Quick Stats --- */
.prf-quick-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}
.prf-qs-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--qs-clr) 10%, transparent);
    color: var(--qs-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.prf-qs-info {
    display: flex;
    flex-direction: column;
}
.prf-qs-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Fira Code', monospace;
    line-height: 1.1;
}
.prf-qs-info small {
    font-size: 11px;
    color: var(--text-muted);
}

/* --- Contribution Grid (GitHub style) --- */
.prf-contrib-grid {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-auto-flow: column;
    gap: 3px;
    margin-bottom: 10px;
}
.prf-contrib-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: rgba(255,255,255,0.04);
    transition: all 0.2s ease;
}
.prf-contrib-cell:hover {
    outline: 1px solid var(--teal-primary);
}
.prf-contrib-cell[data-level="1"] { background: rgba(20,184,166,0.2); }
.prf-contrib-cell[data-level="2"] { background: rgba(20,184,166,0.4); }
.prf-contrib-cell[data-level="3"] { background: rgba(20,184,166,0.65); }
.prf-contrib-cell[data-level="4"] { background: var(--teal-primary); box-shadow: 0 0 4px rgba(20,184,166,0.3); }

.prf-contrib-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}
.prf-contrib-legend span {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 4px;
}
.prf-contrib-legend .prf-contrib-cell {
    width: 12px;
    height: 12px;
    aspect-ratio: auto;
}

/* --- Timeline --- */
.prf-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 8px;
}
.prf-tl-item {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    position: relative;
}
.prf-tl-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: rgba(255,255,255,0.06);
}
.prf-tl-dot {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--tl-clr) 12%, transparent);
    color: var(--tl-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 1;
}
.prf-tl-content {
    flex: 1;
    min-width: 0;
}
.prf-tl-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}
.prf-tl-header span {
    font-size: 13px;
    color: var(--text-primary);
}
.prf-tl-header small {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.prf-tl-content p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}
.prf-tl-code {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}
.prf-tl-code code {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-family: 'Fira Code', monospace;
    display: block;
}
.prf-tl-review {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    margin-top: 6px;
}
.prf-tl-review span {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}
.prf-tl-badge { margin-top: 6px; }
.prf-achievement-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(249,115,22,0.06);
    border: 1px solid rgba(249,115,22,0.12);
}
.prf-achievement-mini div {
    display: flex;
    flex-direction: column;
}
.prf-achievement-mini span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.prf-achievement-mini small {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Project Cards --- */
.prf-project-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.prf-filter-btn {
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.prf-filter-btn.active {
    background: var(--teal-primary);
    border-color: var(--teal-primary);
    color: #fff;
}

.prf-project-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    height: 100%;
    transition: all 0.2s ease;
}
.prf-project-card:hover {
    border-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.prf-prj-completed { opacity: 0.85; }
.prf-prj-archived { opacity: 0.55; }
.prf-prj-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.prf-prj-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}
.prf-prj-status {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.prf-prj-active {
    background: rgba(59,130,246,0.1);
    color: var(--neon-blue);
}
.prf-prj-done {
    background: rgba(34,197,94,0.1);
    color: var(--neon-green);
}
.prf-prj-arch {
    background: rgba(100,116,139,0.1);
    color: var(--text-muted);
}
.prf-project-card h6 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}
.prf-project-card p {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.4;
}
.prf-prj-progress {
    margin-bottom: 12px;
}
.prf-prj-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prf-prj-avatars {
    display: flex;
}
.prf-prj-av {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    margin-right: -6px;
    border: 2px solid var(--bg-card);
}
.prf-prj-av-more {
    background: rgba(255,255,255,0.1) !important;
    color: var(--text-muted) !important;
    font-size: 9px;
}
.prf-prj-footer small {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Activity Log --- */
.prf-activity-log {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.prf-log-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 0 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.prf-log-date:first-child { padding-top: 0; }
.prf-log-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.prf-log-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--lg-clr) 10%, transparent);
    color: var(--lg-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.prf-log-body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.prf-log-body span {
    font-size: 13px;
    color: var(--text-secondary);
}
.prf-log-body small {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* --- Achievements --- */
.prf-achievements {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.prf-ach-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.prf-ach-item:last-child { border-bottom: none; }
.prf-ach-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ach-clr) 10%, transparent);
    color: var(--ach-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.prf-ach-item > div:nth-child(2) {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.prf-ach-item span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.prf-ach-item small {
    font-size: 12px;
    color: var(--text-muted);
}
.prf-ach-unlocked .prf-ach-icon {
    box-shadow: 0 0 8px color-mix(in srgb, var(--ach-clr) 25%, transparent);
}
.prf-ach-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    min-width: 100px;
}
.prf-ach-progress .prg-bar { flex: 1; }

/* --- Danger Card --- */
.prf-danger-card {
    border-color: rgba(239,68,68,0.12);
    background: rgba(239,68,68,0.02);
}

/* --- Edit Form --- */
.prf-edit-form {
    display: flex;
    flex-direction: column;
}

/* ============================================
   PROFILE RESPONSIVE
   ============================================ */

@media (max-width: 991.98px) {
    .prf-cover {
        height: 180px;
    }
    .prf-stats-bar {
        flex-wrap: wrap;
    }
    .prf-stat {
        flex: 1 1 calc(50% - 1px);
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .prf-stat:nth-child(2) { border-right: none; }
}

@media (max-width: 767.98px) {
    .prf-cover {
        height: 140px;
        margin: -16px -16px 0;
    }
    .prf-header {
        padding: 0 16px 16px;
        margin: -40px -16px 0;
    }
    .prf-avatar {
        width: 90px;
        height: 90px;
        border-radius: 20px;
    }
    .prf-avatar span { font-size: 30px; }
    .prf-name-row {
        flex-direction: column;
        gap: 10px;
    }
    .prf-name-row h2 { font-size: 22px; }
    .prf-header-actions {
        align-self: flex-start;
    }
    .prf-meta {
        gap: 10px;
    }
    .prf-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .prf-tab {
        white-space: nowrap;
        min-width: fit-content;
    }
    .prf-project-filters {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .prf-tl-header {
        flex-direction: column;
        gap: 2px;
    }
    .prf-log-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

@media (max-width: 575.98px) {
    .prf-stats-bar {
        gap: 0;
    }
    .prf-stat-val {
        font-size: 18px;
    }
    .prf-qs-val {
        font-size: 16px;
    }
    .prf-quick-stat {
        padding: 12px;
    }
    .prf-contrib-grid {
        gap: 2px;
    }
}


/* ============================================
   USER MANAGEMENT - Kullanici Yonetimi
   ============================================ */

/* ---------- Stat Cards ---------- */
.usr-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.usr-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.usr-stat-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(-2px);
}
.usr-stat-card:hover::before {
    opacity: 1;
}
.usr-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--accent);
    flex-shrink: 0;
}
.usr-stat-info {
    flex: 1;
    min-width: 0;
}
.usr-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.usr-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 2px 0;
    line-height: 1.2;
}
.usr-stat-change {
    font-size: 12px;
    font-weight: 500;
}
.usr-stat-change.positive {
    color: var(--neon-green);
}
.usr-stat-change.negative {
    color: #ef4444;
}

/* ---------- Toolbar ---------- */
.usr-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.usr-search {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.usr-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
}
.usr-search input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 9px 12px 9px 36px;
    color: var(--text-primary);
    font-size: 13px;
    transition: all 0.3s ease;
}
.usr-search input:focus {
    outline: none;
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px var(--teal-glow);
}
.usr-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.usr-filter-select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 9px 30px 9px 12px;
    color: var(--text-primary);
    font-size: 13px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.usr-filter-select:focus {
    outline: none;
    border-color: var(--teal-primary);
}
.usr-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.usr-view-toggle {
    display: flex;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}
.usr-view-btn {
    background: none;
    border: none;
    padding: 8px 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}
.usr-view-btn.active {
    background: var(--teal-primary);
    color: #fff;
}
.usr-view-btn:hover:not(.active) {
    color: var(--text-primary);
}
.usr-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--teal-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--teal-primary) 30%, transparent);
    border-radius: 10px;
    animation: usrFadeIn 0.3s ease;
}
@keyframes usrFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.usr-bulk-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-primary);
    white-space: nowrap;
}

/* ---------- Table ---------- */
.usr-table {
    width: 100%;
    border-collapse: collapse;
}
.usr-table thead {
    background: var(--bg-input);
}
.usr-table th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.usr-th-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}
.usr-th-sortable:hover {
    color: var(--teal-primary);
}
.usr-th-sortable i {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.4;
}
.usr-table td {
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    vertical-align: middle;
}
.usr-table tbody tr {
    transition: background 0.2s ease;
}
.usr-table tbody tr:hover {
    background: color-mix(in srgb, var(--teal-primary) 5%, transparent);
}
.usr-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--teal-primary);
    cursor: pointer;
}

/* User Cell */
.usr-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}
.usr-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}
.usr-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--ring) 50%, transparent);
}
.usr-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}
.usr-status-dot.online { background: var(--neon-green); }
.usr-status-dot.offline { background: var(--text-muted); }
.usr-status-dot.suspended { background: #ef4444; }
.usr-status-dot.pending { background: var(--neon-orange); animation: usrPulse 2s infinite; }
@keyframes usrPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--neon-orange) 40%, transparent); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--neon-orange) 0%, transparent); }
}
.usr-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.usr-user-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.usr-user-email {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Role Badges */
.usr-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.usr-role-badge i { font-size: 10px; }
.usr-role-badge.admin {
    background: color-mix(in srgb, var(--teal-primary) 15%, transparent);
    color: var(--teal-primary);
    border: 1px solid color-mix(in srgb, var(--teal-primary) 30%, transparent);
}
.usr-role-badge.editor {
    background: color-mix(in srgb, var(--neon-purple) 15%, transparent);
    color: var(--neon-purple);
    border: 1px solid color-mix(in srgb, var(--neon-purple) 30%, transparent);
}
.usr-role-badge.moderator {
    background: color-mix(in srgb, var(--neon-blue) 15%, transparent);
    color: var(--neon-blue);
    border: 1px solid color-mix(in srgb, var(--neon-blue) 30%, transparent);
}
.usr-role-badge.user {
    background: color-mix(in srgb, var(--neon-green) 15%, transparent);
    color: var(--neon-green);
    border: 1px solid color-mix(in srgb, var(--neon-green) 30%, transparent);
}
.usr-role-badge.viewer {
    background: color-mix(in srgb, var(--neon-orange) 15%, transparent);
    color: var(--neon-orange);
    border: 1px solid color-mix(in srgb, var(--neon-orange) 30%, transparent);
}

/* Status Badges */
.usr-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.usr-status-badge.active {
    background: color-mix(in srgb, var(--neon-green) 15%, transparent);
    color: var(--neon-green);
}
.usr-status-badge.inactive {
    background: color-mix(in srgb, var(--text-muted) 15%, transparent);
    color: var(--text-muted);
}
.usr-status-badge.suspended {
    background: color-mix(in srgb, #ef4444 15%, transparent);
    color: #ef4444;
}
.usr-status-badge.pending {
    background: color-mix(in srgb, var(--neon-orange) 15%, transparent);
    color: var(--neon-orange);
}

.usr-meta {
    font-size: 12px;
    color: var(--text-muted);
}

/* Action Buttons */
.usr-actions {
    display: flex;
    gap: 4px;
}
.usr-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 14px;
}
.usr-action-btn:hover {
    background: color-mix(in srgb, var(--teal-primary) 15%, transparent);
    color: var(--teal-primary);
}
.usr-action-btn.danger:hover {
    background: color-mix(in srgb, #ef4444 15%, transparent);
    color: #ef4444;
}
.usr-action-btn.success:hover {
    background: color-mix(in srgb, var(--neon-green) 15%, transparent);
    color: var(--neon-green);
}
.usr-action-btn.success {
    color: var(--neon-green);
}
.usr-action-btn.danger {
    color: #ef4444;
}

/* ---------- Pagination ---------- */
.usr-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    gap: 12px;
    flex-wrap: wrap;
}
.usr-pagination-info {
    font-size: 13px;
    color: var(--text-muted);
}
.usr-pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.usr-page-btns {
    display: flex;
    gap: 4px;
}
.usr-page-btn {
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.usr-page-btn:hover:not(:disabled):not(.active) {
    border-color: var(--teal-primary);
    color: var(--teal-primary);
}
.usr-page-btn.active {
    background: var(--teal-primary);
    border-color: var(--teal-primary);
    color: #fff;
    font-weight: 600;
}
.usr-page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ---------- Grid / Card View ---------- */
.usr-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.usr-card:hover {
    border-color: color-mix(in srgb, var(--teal-primary) 40%, transparent);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--teal-primary) 10%, transparent);
}
.usr-card.suspended {
    opacity: 0.7;
    border-color: color-mix(in srgb, #ef4444 30%, transparent);
}
.usr-card.suspended:hover {
    border-color: #ef4444;
    opacity: 1;
}
.usr-card.pending {
    border-color: color-mix(in srgb, var(--neon-orange) 30%, transparent);
}
.usr-card-header {
    padding: 24px 20px 16px;
    text-align: center;
    position: relative;
}
.usr-card-menu {
    position: absolute;
    top: 12px;
    right: 12px;
}
.usr-card-avatar {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    position: relative;
}
.usr-card-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--ring) 50%, transparent);
}
.usr-card-avatar .usr-status-dot {
    width: 14px;
    height: 14px;
    border-width: 3px;
}
.usr-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.usr-card-email {
    font-size: 12px;
    color: var(--text-muted);
}
.usr-card-body {
    padding: 0 20px 16px;
    flex: 1;
}
.usr-card-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.usr-card-stat {
    text-align: center;
}
.usr-card-stat-val {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.usr-card-stat-label {
    font-size: 11px;
    color: var(--text-muted);
}
.usr-card-footer {
    padding: 12px 20px;
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--border-color);
}
.usr-card-btn {
    flex: 1;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.usr-card-btn:hover {
    border-color: var(--teal-primary);
    color: var(--teal-primary);
}
.usr-card-btn.primary {
    background: color-mix(in srgb, var(--teal-primary) 15%, transparent);
    border-color: color-mix(in srgb, var(--teal-primary) 30%, transparent);
    color: var(--teal-primary);
}
.usr-card-btn.primary:hover {
    background: var(--teal-primary);
    color: #fff;
}
.usr-card-btn.success {
    background: color-mix(in srgb, var(--neon-green) 15%, transparent);
    border-color: color-mix(in srgb, var(--neon-green) 30%, transparent);
    color: var(--neon-green);
}
.usr-card-btn.success:hover {
    background: var(--neon-green);
    color: #fff;
}
.usr-card-btn.danger {
    background: color-mix(in srgb, #ef4444 15%, transparent);
    border-color: color-mix(in srgb, #ef4444 30%, transparent);
    color: #ef4444;
}
.usr-card-btn.danger:hover {
    background: #ef4444;
    color: #fff;
}

/* ---------- Detail Panel (Offcanvas) ---------- */
.usr-detail-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.usr-detail-panel.open {
    pointer-events: auto;
    opacity: 1;
}
.usr-detail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
.usr-detail-content {
    position: absolute;
    top: 0;
    right: -420px;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}
.usr-detail-panel.open .usr-detail-content {
    right: 0;
}
.usr-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}
.usr-detail-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.usr-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.usr-detail-profile {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}
.usr-detail-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 12px;
    position: relative;
}
.usr-detail-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--ring) 50%, transparent);
}
.usr-detail-avatar .usr-status-dot {
    width: 16px;
    height: 16px;
    border-width: 3px;
}
.usr-detail-profile h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}
.usr-detail-section {
    margin-bottom: 20px;
}
.usr-detail-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

/* Detail Info List */
.usr-detail-info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.usr-detail-info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.usr-detail-info-item > i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal-primary);
    font-size: 14px;
    flex-shrink: 0;
}
.usr-detail-info-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}
.usr-detail-info-value {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Detail Stats */
.usr-detail-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.usr-detail-stat-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}
.usr-detail-stat-fill {
    height: 100%;
    background: var(--color);
    border-radius: 3px;
    transition: width 0.6s ease;
}
.usr-detail-stat-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 4px;
}
.usr-detail-stat-info span {
    color: var(--text-muted);
}
.usr-detail-stat-info strong {
    color: var(--text-primary);
}

/* Detail Permissions */
.usr-detail-perms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.usr-perm-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}
.usr-perm-tag.granted {
    background: color-mix(in srgb, var(--neon-green) 12%, transparent);
    color: var(--neon-green);
}
.usr-perm-tag.denied {
    background: color-mix(in srgb, #ef4444 12%, transparent);
    color: #ef4444;
}
.usr-perm-tag i { font-size: 10px; }

/* Detail Activity */
.usr-detail-activity {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.usr-detail-act-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.usr-detail-act-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color) 12%, transparent);
    color: var(--color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.usr-detail-act-info {
    flex: 1;
    min-width: 0;
}
.usr-detail-act-info span {
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
}
.usr-detail-act-info small {
    font-size: 11px;
    color: var(--text-muted);
}

/* Detail Sessions */
.usr-detail-sessions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.usr-detail-session {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--bg-input);
    border-radius: 10px;
}
.usr-detail-session-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--teal-primary) 12%, transparent);
    color: var(--teal-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.usr-detail-session-info {
    flex: 1;
    min-width: 0;
}
.usr-detail-session-info span {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.usr-detail-session-info small {
    font-size: 11px;
    color: var(--text-muted);
}
.usr-session-current {
    padding: 3px 8px;
    background: color-mix(in srgb, var(--neon-green) 15%, transparent);
    color: var(--neon-green);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

/* Detail Footer */
.usr-detail-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ---------- Permission Grid (Modal) ---------- */
.usr-perm-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.usr-perm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-input);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s;
}
.usr-perm-item:hover {
    border-color: color-mix(in srgb, var(--teal-primary) 30%, transparent);
}
.usr-perm-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.usr-perm-info > i {
    font-size: 16px;
}
.usr-perm-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.usr-perm-info small {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---------- Role Cards ---------- */
.usr-role-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.usr-role-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.3s;
}
.usr-role-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(-3px);
}
.usr-role-card:hover::after {
    opacity: 1;
}
.usr-role-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 10px;
}
.usr-role-card-count {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.usr-role-card-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    display: block;
    margin-bottom: 10px;
}
.usr-role-card-bar {
    height: 4px;
    background: var(--bg-input);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}
.usr-role-card-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* ---------- Activity List ---------- */
.usr-activity-list {
    display: flex;
    flex-direction: column;
}
.usr-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    transition: background 0.2s;
}
.usr-activity-item:last-child { border-bottom: none; }
.usr-activity-item:hover {
    background: color-mix(in srgb, var(--teal-primary) 5%, transparent);
}
.usr-activity-avatar {
    position: relative;
    flex-shrink: 0;
}
.usr-activity-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--ring) 40%, transparent);
}
.usr-mini-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}
.usr-mini-dot.online { background: var(--neon-green); }
.usr-mini-dot.away { background: var(--neon-orange); }
.usr-activity-info {
    flex: 1;
    min-width: 0;
}
.usr-activity-info span {
    font-size: 13px;
    color: var(--text-secondary);
    display: block;
}
.usr-activity-info small {
    font-size: 11px;
    color: var(--text-muted);
}
.usr-activity-type {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.usr-activity-type.publish { background: color-mix(in srgb, var(--neon-green) 12%, transparent); color: var(--neon-green); }
.usr-activity-type.approve { background: color-mix(in srgb, var(--neon-blue) 12%, transparent); color: var(--neon-blue); }
.usr-activity-type.settings { background: color-mix(in srgb, var(--teal-primary) 12%, transparent); color: var(--teal-primary); }
.usr-activity-type.suspend { background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; }
.usr-activity-type.register { background: color-mix(in srgb, var(--neon-orange) 12%, transparent); color: var(--neon-orange); }
.usr-activity-type.moderate { background: color-mix(in srgb, var(--neon-purple) 12%, transparent); color: var(--neon-purple); }
.usr-activity-type.edit { background: color-mix(in srgb, var(--neon-blue) 12%, transparent); color: var(--neon-blue); }

/* ---------- Online Users ---------- */
.usr-online-list {
    display: flex;
    flex-direction: column;
}
.usr-online-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    transition: background 0.2s;
}
.usr-online-item:last-child { border-bottom: none; }
.usr-online-item:hover {
    background: color-mix(in srgb, var(--teal-primary) 5%, transparent);
}
.usr-online-info {
    flex: 1;
    min-width: 0;
}
.usr-online-info span {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.usr-online-info small {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---------- Pending List ---------- */
.usr-pending-list {
    display: flex;
    flex-direction: column;
}
.usr-pending-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    transition: background 0.2s;
}
.usr-pending-item:last-child { border-bottom: none; }
.usr-pending-item:hover {
    background: color-mix(in srgb, var(--neon-orange) 5%, transparent);
}
.usr-pending-info {
    flex: 1;
    min-width: 0;
}
.usr-pending-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.usr-pending-info small {
    font-size: 11px;
    color: var(--text-muted);
}
.usr-pending-actions {
    display: flex;
    gap: 4px;
}

/* ---------- Avatar Upload ---------- */
.usr-avatar-upload {
    display: flex;
    align-items: center;
    gap: 16px;
}
.usr-avatar-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--text-muted);
    overflow: hidden;
    flex-shrink: 0;
}

/* ---------- Delete Modal ---------- */
.usr-delete-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, #ef4444 12%, transparent);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px;
    animation: usrShake 0.5s ease;
}
@keyframes usrShake {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(8deg); }
    60% { transform: rotate(-4deg); }
    80% { transform: rotate(4deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .usr-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .usr-search {
        min-width: 100%;
    }
    .usr-filters {
        flex-wrap: wrap;
    }
    .usr-toolbar-actions {
        margin-left: 0;
        justify-content: space-between;
    }
    .usr-detail-content {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .usr-stat-card {
        padding: 16px;
    }
    .usr-stat-value {
        font-size: 22px;
    }
    .usr-stat-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    .usr-pagination {
        flex-direction: column;
        text-align: center;
    }
    .usr-pagination-controls {
        flex-direction: column;
        gap: 8px;
    }
    .usr-role-card-count {
        font-size: 22px;
    }
    .usr-bulk-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .usr-card-stats {
        gap: 8px;
    }
    .usr-card-stat-val {
        font-size: 14px;
    }
    .usr-filter-select {
        width: 100%;
    }
    .usr-page-btns .usr-page-btn:not(.active):not(:first-child):not(:last-child) {
        display: none;
    }
}


/* =====================================================
   USER FORM PAGE (.uf-*)
   ===================================================== */

/* Avatar Section */
.uf-avatar-section {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.uf-avatar-preview {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--teal-primary);
    flex-shrink: 0;
    cursor: pointer;
}

.uf-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uf-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    color: #fff;
    font-size: 12px;
}

.uf-avatar-overlay i {
    font-size: 20px;
}

.uf-avatar-preview:hover .uf-avatar-overlay {
    opacity: 1;
}

.uf-avatar-info h6 {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--text-primary);
}

/* Password Strength */
.uf-password-strength {
    display: flex;
    align-items: center;
    gap: 10px;
}

.uf-strength-bars {
    display: flex;
    gap: 4px;
    flex: 1;
}

.uf-strength-bar {
    height: 4px;
    flex: 1;
    border-radius: 4px;
    background: var(--border-color);
    opacity: 0.3;
    transition: all 0.3s;
}

.uf-password-strength small {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Info Box */
.uf-info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--neon-blue) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--neon-blue) 20%, transparent);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.uf-info-box i {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Role Cards */
.uf-role-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uf-role-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-card) 60%, transparent);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.25s;
}

.uf-role-card:hover {
    border-color: color-mix(in srgb, var(--teal-primary) 40%, transparent);
    background: color-mix(in srgb, var(--teal-primary) 5%, var(--bg-card));
}

.uf-role-card.active {
    border-color: var(--teal-primary);
    background: color-mix(in srgb, var(--teal-primary) 10%, var(--bg-card));
    box-shadow: 0 0 12px color-mix(in srgb, var(--teal-primary) 15%, transparent);
}

.uf-role-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.uf-role-card-info {
    flex: 1;
}

.uf-role-card-info strong {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.uf-role-card-info small {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Permission Grid */
.uf-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.uf-perm-group-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

/* Warning Icon */
.uf-warning-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--neon-orange) 15%, transparent);
    color: var(--neon-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 16px;
}

/* Bottom Actions */
.uf-bottom-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
    position: sticky;
    bottom: 20px;
    z-index: 10;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Responsive */
@media (max-width: 767.98px) {
    .uf-avatar-section {
        flex-direction: column;
        text-align: center;
    }
    .uf-avatar-info .d-flex {
        justify-content: center;
    }
    .uf-perm-grid {
        grid-template-columns: 1fr;
    }
    .uf-bottom-actions {
        flex-direction: column;
        position: static;
    }
    .uf-bottom-actions > div {
        width: 100%;
        justify-content: center;
    }
    .uf-role-card {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .uf-avatar-preview {
        width: 96px;
        height: 96px;
    }
}


/* =====================================================
   SELECT2 DARK THEME OVERRIDES
   ===================================================== */

/* Container */
.select2-container--default .select2-selection--single {
    background: var(--bg-input, #1a1f2e);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    height: 42px;
    padding: 6px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.select2-container--default .select2-selection--single:hover {
    border-color: color-mix(in srgb, var(--teal-primary) 50%, var(--border-color));
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal-primary) 15%, transparent);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
    line-height: 28px;
    padding: 0;
    font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-muted) transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--teal-primary);
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--text-muted);
    font-size: 18px;
    margin-right: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--neon-red, #ef4444);
}

/* Multiple */
.select2-container--default .select2-selection--multiple {
    background: var(--bg-input, #1a1f2e);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    min-height: 42px;
    padding: 4px 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.select2-container--default .select2-selection--multiple:hover {
    border-color: color-mix(in srgb, var(--teal-primary) 50%, var(--border-color));
}

.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal-primary) 15%, transparent);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: color-mix(in srgb, var(--teal-primary) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--teal-primary) 30%, transparent);
    border-radius: 6px;
    color: var(--teal-primary);
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    font-size: 12px;
    font-weight: 500;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--teal-primary);
    margin-right: 4px;
    font-size: 14px;
    font-weight: 700;
    opacity: 0.7;
    border: none;
    background: transparent;
    padding: 0 2px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--neon-red, #ef4444);
    opacity: 1;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    color: var(--text-primary);
    font-size: 14px;
    margin-top: 4px;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: var(--text-muted);
}

/* Dropdown */
.select2-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    z-index: 9999;
}

.select2-container--open .select2-dropdown--below {
    border-top: 1px solid var(--border-color);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-top: 4px;
}

.select2-container--open .select2-dropdown--above {
    border-bottom: 1px solid var(--border-color);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 4px;
}

/* Search box */
.select2-search--dropdown {
    padding: 8px 10px;
}

.select2-search--dropdown .select2-search__field {
    background: var(--bg-input, #1a1f2e);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal-primary) 12%, transparent);
}

/* Results */
.select2-results__options {
    max-height: 260px;
}

.select2-results__option {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
}

.select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: color-mix(in srgb, var(--teal-primary) 15%, transparent);
    color: var(--teal-primary);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: color-mix(in srgb, var(--teal-primary) 25%, transparent);
    color: var(--teal-primary);
    font-weight: 500;
}

.select2-container--default .select2-results__option--disabled {
    color: var(--text-muted);
    opacity: 0.5;
}

.select2-results__group {
    color: var(--teal-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px 4px;
}

/* No results */
.select2-results__message {
    color: var(--text-muted);
    font-size: 13px;
    padding: 12px;
    text-align: center;
}

/* Disabled state */
.select2-container--disabled .select2-selection--single,
.select2-container--disabled .select2-selection--multiple {
    background: color-mix(in srgb, var(--bg-input, #1a1f2e) 60%, transparent);
    opacity: 0.6;
    cursor: not-allowed;
}

/* User template option */
.s2-user-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
}

.s2-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.s2-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.s2-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.s2-user-role {
    font-size: 11px;
    color: var(--text-muted);
}

.s2-user-selected {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.s2-user-avatar-sm {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* Max selection message */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 0;
}


/* =====================================================
   ROLES & PERMISSIONS PAGE (.rp-*)
   ===================================================== */

/* Stat Cards */
.rp-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}
.rp-stat-card:hover {
    border-color: color-mix(in srgb, var(--teal-primary) 30%, var(--border-color));
    transform: translateY(-2px);
}
.rp-stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.rp-stat-label { font-size: 12px; color: var(--text-muted); }
.rp-stat-value { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 2px 0; }
.rp-stat-sub { font-size: 11px; color: var(--text-muted); }

/* Role Cards */
.rp-role-card {
    padding: 20px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.rp-role-card:hover {
    border-color: color-mix(in srgb, var(--teal-primary) 40%, var(--border-color));
    transform: translateY(-2px);
}
.rp-role-card.active {
    border-color: var(--teal-primary);
    box-shadow: 0 0 20px color-mix(in srgb, var(--teal-primary) 12%, transparent);
}
.rp-role-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.rp-role-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.rp-role-title { flex: 1; }
.rp-role-title h5 { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--text-primary); }
.rp-role-type {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 2px 8px; border-radius: 4px;
}
.rp-role-type.system { background: color-mix(in srgb, var(--neon-blue) 15%, transparent); color: var(--neon-blue); }
.rp-role-type.custom { background: color-mix(in srgb, var(--neon-purple) 15%, transparent); color: var(--neon-purple); }
.rp-role-desc {
    font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; flex: 1;
}
.rp-role-meta {
    display: flex; gap: 16px; margin-bottom: 14px;
}
.rp-role-meta-item {
    display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary);
}
.rp-role-meta-item i { font-size: 14px; color: var(--text-muted); }
.rp-role-users {
    display: flex; align-items: center; gap: 0; padding-top: 14px;
    border-top: 1px solid var(--border-color);
}
.rp-role-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 10px; font-weight: 700;
    margin-right: -6px; border: 2px solid var(--bg-card);
    position: relative; z-index: 1;
}
.rp-role-avatar:nth-child(2) { z-index: 2; }
.rp-role-avatar:nth-child(3) { z-index: 3; }
.rp-role-avatar-more {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--border-color); color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; margin-left: 2px;
    border: 2px solid var(--bg-card);
}

/* Permission Matrix Table */
.rp-matrix-table {
    width: 100%;
    border-collapse: collapse;
}
.rp-matrix-table thead th {
    padding: 12px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    white-space: nowrap;
}
.rp-matrix-perm-col { text-align: left !important; min-width: 200px; padding-left: 16px !important; }
.rp-matrix-role-col { width: 100px; }
.rp-matrix-role-head {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.rp-matrix-role-head i { font-size: 16px; color: var(--accent); }
.rp-matrix-role-head span { font-size: 11px; }
.rp-matrix-group td {
    padding: 10px 16px !important;
    font-size: 12px; font-weight: 700; color: var(--teal-primary);
    text-transform: uppercase; letter-spacing: 0.5px;
    background: color-mix(in srgb, var(--teal-primary) 5%, transparent);
    border-top: 1px solid var(--border-color);
}
.rp-matrix-table tbody tr:not(.rp-matrix-group) td {
    padding: 10px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    text-align: center;
    vertical-align: middle;
}
.rp-perm-name {
    text-align: left !important; padding-left: 16px !important;
}
.rp-perm-name span { display: block; font-size: 13px; color: var(--text-primary); font-weight: 500; }
.rp-perm-name small { font-size: 11px; color: var(--text-muted); }

/* Custom Check */
.rp-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: color-mix(in srgb, #ef4444 8%, transparent);
    cursor: pointer; transition: all 0.2s;
}
.rp-check input { display: none; }
.rp-check span {
    width: 14px; height: 14px; display: block; position: relative;
}
.rp-check span::after {
    content: '\F62A'; font-family: 'bootstrap-icons';
    font-size: 12px; color: rgba(239, 68, 68, 0.6);
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.rp-check.granted {
    background: color-mix(in srgb, var(--neon-green) 15%, transparent);
}
.rp-check.granted span::after {
    content: '\F26E'; color: var(--neon-green);
}
.rp-check:has(input:disabled) {
    opacity: 0.7; cursor: default;
    background: color-mix(in srgb, var(--teal-primary) 12%, transparent);
}
.rp-check:has(input:disabled) span::after {
    content: '\F62B'; color: var(--teal-primary);
}
.rp-check:hover:not(:has(input:disabled)) { transform: scale(1.1); }

/* Legend */
.rp-legend-dot {
    width: 10px; height: 10px; border-radius: 4px; display: inline-block;
}
.rp-legend-dot.granted { background: color-mix(in srgb, var(--neon-green) 40%, transparent); }
.rp-legend-dot.denied { background: color-mix(in srgb, #ef4444 40%, transparent); }
.rp-legend-dot.locked { background: color-mix(in srgb, var(--teal-primary) 40%, transparent); }

/* Bar Chart */
.rp-bar-chart { display: flex; flex-direction: column; gap: 14px; }
.rp-bar-item { display: flex; align-items: center; gap: 12px; }
.rp-bar-label { width: 110px; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rp-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.rp-bar-track { flex: 1; height: 28px; background: color-mix(in srgb, var(--border-color) 30%, transparent); border-radius: 6px; overflow: hidden; }
.rp-bar-fill {
    height: 100%; border-radius: 6px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, transparent), var(--c));
    display: flex; align-items: center; justify-content: flex-end; padding: 0 8px;
    min-width: 28px; transition: width 0.6s ease;
}
.rp-bar-fill span { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
.rp-bar-pct { font-size: 12px; font-weight: 600; color: var(--text-muted); width: 40px; text-align: right; flex-shrink: 0; }

/* Activity List */
.rp-activity-list { display: flex; flex-direction: column; }
.rp-activity-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    transition: background 0.2s;
}
.rp-activity-item:last-child { border-bottom: none; }
.rp-activity-item:hover { background: color-mix(in srgb, var(--teal-primary) 3%, transparent); }
.rp-activity-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: color-mix(in srgb, var(--c) 12%, transparent);
    color: var(--c);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.rp-activity-info { flex: 1; }
.rp-activity-info span { font-size: 13px; color: var(--text-secondary); line-height: 1.4; display: block; }
.rp-activity-info small { font-size: 11px; color: var(--text-muted); }

/* Color Picker */
.rp-color-btn {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--c); border: 2px solid transparent;
    cursor: pointer; transition: all 0.2s;
    position: relative;
}
.rp-color-btn:hover { transform: scale(1.15); }
.rp-color-btn.active {
    border-color: #fff;
    box-shadow: 0 0 0 3px var(--c);
}

/* Responsive */
@media (max-width: 991.98px) {
    .rp-matrix-table { font-size: 12px; }
    .rp-matrix-perm-col { min-width: 160px; }
    .rp-matrix-role-col { width: 70px; }
    .rp-bar-label { width: 80px; font-size: 12px; }
}
@media (max-width: 767.98px) {
    .rp-role-meta { flex-direction: column; gap: 6px; }
    .rp-bar-item { flex-wrap: wrap; }
    .rp-bar-label { width: 100%; }
    .rp-bar-pct { display: none; }
}


/* =====================================================
   NOTIFICATIONS PAGE (.nt-*)
   ===================================================== */

/* Stat Cards */
.nt-stat-card {
    display: flex; align-items: center; gap: 16px;
    padding: 20px; border-radius: 14px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    transition: all 0.3s;
}
.nt-stat-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color)); transform: translateY(-2px); }
.nt-stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.nt-stat-label { font-size: 12px; color: var(--text-muted); }
.nt-stat-value { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 2px 0; }

/* Filter Tabs */
.nt-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 6px; border-radius: 12px;
    background: var(--bg-card); border: 1px solid var(--border-color);
}
.nt-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px;
    background: transparent; border: none;
    color: var(--text-muted); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.nt-tab:hover { color: var(--text-primary); background: color-mix(in srgb, var(--teal-primary) 8%, transparent); }
.nt-tab.active { color: var(--teal-primary); background: color-mix(in srgb, var(--teal-primary) 12%, transparent); }
.nt-tab i { font-size: 14px; }
.nt-tab-count {
    padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700;
    background: color-mix(in srgb, var(--teal-primary) 20%, transparent); color: var(--teal-primary);
}
.nt-tab-count.orange { background: color-mix(in srgb, var(--neon-orange) 20%, transparent); color: var(--neon-orange); }

/* Time Headers */
.nt-time-header {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0; margin: 8px 0;
}
.nt-time-header span:first-child {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted); white-space: nowrap;
}
.nt-time-line { flex: 1; height: 1px; background: var(--border-color); }

/* Notification List */
.nt-list { display: flex; flex-direction: column; gap: 2px; }

/* Notification Item */
.nt-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px; border-radius: 12px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    transition: all 0.3s;
    position: relative;
}
.nt-item:hover { border-color: color-mix(in srgb, var(--teal-primary) 25%, var(--border-color)); }
.nt-item.unread {
    background: color-mix(in srgb, var(--teal-primary) 4%, var(--bg-card));
    border-left: 3px solid var(--teal-primary);
}
.nt-item.unread.critical {
    background: color-mix(in srgb, #ef4444 5%, var(--bg-card));
    border-left-color: #ef4444;
}
.nt-item.pinned { border-color: color-mix(in srgb, var(--neon-orange) 40%, var(--border-color)); }

/* Checkbox */
.nt-item-check { padding-top: 2px; flex-shrink: 0; }
.nt-checkbox {
    width: 16px; height: 16px; border-radius: 4px;
    border: 2px solid var(--border-color); background: transparent;
    cursor: pointer; accent-color: var(--teal-primary);
}

/* Icon */
.nt-item-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.nt-item-icon.critical { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.nt-item-icon.system { background: color-mix(in srgb, var(--neon-blue) 15%, transparent); color: var(--neon-blue); }
.nt-item-icon.security { background: color-mix(in srgb, var(--neon-red, #ef4444) 15%, transparent); color: var(--neon-red, #ef4444); }
.nt-item-icon.user { background: color-mix(in srgb, var(--neon-green) 15%, transparent); color: var(--neon-green); }
.nt-item-icon.content { background: color-mix(in srgb, var(--neon-purple) 15%, transparent); color: var(--neon-purple); }
.nt-item-icon.update { background: color-mix(in srgb, var(--neon-orange) 15%, transparent); color: var(--neon-orange); }

/* Body */
.nt-item-body { flex: 1; min-width: 0; cursor: pointer; }
.nt-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.nt-item-title { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.nt-item.unread .nt-item-title { color: #fff; }
.nt-item-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; padding-top: 2px; }
.nt-item-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; }
.nt-item.unread .nt-item-desc { color: var(--text-secondary); }

/* Tags */
.nt-item-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.nt-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.nt-tag.critical { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.nt-tag.security { background: color-mix(in srgb, var(--neon-red, #ef4444) 12%, transparent); color: var(--neon-red, #ef4444); }
.nt-tag.system { background: color-mix(in srgb, var(--neon-blue) 12%, transparent); color: var(--neon-blue); }
.nt-tag.user { background: color-mix(in srgb, var(--neon-green) 12%, transparent); color: var(--neon-green); }
.nt-tag.content { background: color-mix(in srgb, var(--neon-purple) 12%, transparent); color: var(--neon-purple); }
.nt-tag.update { background: color-mix(in srgb, var(--neon-orange) 12%, transparent); color: var(--neon-orange); }
.nt-tag.success { background: color-mix(in srgb, var(--neon-green) 12%, transparent); color: var(--neon-green); }
.nt-tag.warning { background: color-mix(in srgb, var(--neon-orange) 12%, transparent); color: var(--neon-orange); }
.nt-tag.pending { background: color-mix(in srgb, var(--neon-orange) 12%, transparent); color: var(--neon-orange); }
.nt-tag.info { background: color-mix(in srgb, var(--neon-blue) 12%, transparent); color: var(--neon-blue); }
.nt-tag i { font-size: 9px; }

/* CTA Buttons */
.nt-item-cta { display: flex; gap: 8px; margin-top: 10px; }

/* Actions */
.nt-item-actions {
    display: flex; gap: 4px; flex-shrink: 0;
    opacity: 0; transition: opacity 0.2s;
}
.nt-item:hover .nt-item-actions { opacity: 1; }
.nt-action-btn {
    width: 30px; height: 30px; border-radius: 8px;
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; transition: all 0.2s;
}
.nt-action-btn:hover { color: var(--teal-primary); border-color: var(--teal-primary); background: color-mix(in srgb, var(--teal-primary) 8%, transparent); }
.nt-action-btn.danger:hover { color: #ef4444; border-color: #ef4444; background: color-mix(in srgb, #ef4444 8%, transparent); }

/* Bulk Bar */
.nt-bulk-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-radius: 12px;
    background: var(--bg-card); border: 1px solid var(--teal-primary);
    margin-bottom: 16px;
    position: sticky; bottom: 20px; z-index: 10;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    font-size: 13px; color: var(--text-secondary);
}

/* Summary */
.nt-summary-list { display: flex; flex-direction: column; gap: 14px; }
.nt-summary-item { display: flex; align-items: center; gap: 12px; }
.nt-summary-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.nt-summary-info { width: 70px; flex-shrink: 0; }
.nt-summary-info span { font-size: 13px; color: var(--text-secondary); }
.nt-summary-bar { flex: 1; height: 8px; background: color-mix(in srgb, var(--border-color) 30%, transparent); border-radius: 4px; overflow: hidden; }
.nt-summary-fill { height: 100%; border-radius: 4px; background: var(--c); transition: width 0.6s; }
.nt-summary-count { font-size: 13px; font-weight: 700; color: var(--text-primary); width: 30px; text-align: right; flex-shrink: 0; }

/* Responsive */
@media (max-width: 767.98px) {
    .nt-item { flex-wrap: wrap; }
    .nt-item-actions { opacity: 1; width: 100%; justify-content: flex-end; margin-top: 8px; }
    .nt-item-header { flex-direction: column; gap: 2px; }
    .nt-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .nt-bulk-bar { position: static; flex-direction: column; gap: 10px; text-align: center; }
}
@media (max-width: 575.98px) {
    .nt-item-icon { width: 34px; height: 34px; font-size: 14px; }
    .nt-item-check { display: none; }
}

/* ==================== MESSAGES PAGE ==================== */
.msg-layout {
    display: grid;
    grid-template-columns: 220px 360px 1fr;
    gap: 0;
    height: calc(100vh - 180px);
    background: rgba(15, 23, 42, .6);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    overflow: hidden;
}

/* Folder Sidebar */
.msg-folders {
    border-right: 1px solid rgba(255,255,255,.06);
    padding: 16px 0;
    overflow-y: auto;
}
.msg-folders-inner { padding: 0 12px; }
.msg-folder-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.7);
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
    text-align: left;
}
.msg-folder-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.msg-folder-btn.active {
    background: rgba(20,184,166,.12);
    color: #14b8a6;
}
.msg-folder-btn i { font-size: 16px; width: 20px; text-align: center; }
.msg-folder-btn span:last-child:not(:nth-child(2)) { margin: 0; }
.msg-folder-count {
    margin-left: auto;
    background: rgba(20,184,166,.2);
    color: #14b8a6;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}

/* Labels */
.msg-labels-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.msg-labels-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(255,255,255,.4);
    padding: 0 14px;
    margin-bottom: 8px;
}
.msg-label-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.6);
    font-size: 13px;
    cursor: pointer;
    border-radius: 8px;
    transition: all .2s;
}
.msg-label-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.msg-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Storage */
.msg-storage {
    margin-top: 20px;
    padding: 12px 14px 0;
    border-top: 1px solid rgba(255,255,255,.06);
}
.msg-storage-bar {
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 4px;
    overflow: hidden;
}
.msg-storage-fill {
    height: 100%;
    background: linear-gradient(90deg, #14b8a6, #06b6d4);
    border-radius: 4px;
    transition: width .3s;
}

/* Message List Panel */
.msg-list-panel {
    border-right: 1px solid rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.msg-list-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}
.msg-search {
    position: relative;
    flex: 1;
}
.msg-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.3);
    font-size: 14px;
}
.msg-search input {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 8px 12px 8px 34px;
    color: #fff;
    font-size: 13px;
    outline: none;
    transition: border-color .2s;
}
.msg-search input:focus { border-color: rgba(20,184,166,.4); }
.msg-search input::placeholder { color: rgba(255,255,255,.3); }

.msg-list-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.msg-action-sm {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.5);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.msg-action-sm:hover { background: rgba(255,255,255,.08); color: #fff; }
.msg-sort-select {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
    cursor: pointer;
}
.msg-sort-select option { background: #1e293b; }

/* Message List */
.msg-list {
    flex: 1;
    overflow-y: auto;
}
.msg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.04);
    position: relative;
    transition: background .2s;
}
.msg-item:hover { background: rgba(255,255,255,.04); }
.msg-item.active { background: rgba(20,184,166,.08); }
.msg-item.unread {
    background: rgba(20,184,166,.04);
    border-left: 3px solid #14b8a6;
}
.msg-item.unread .msg-sender { font-weight: 600; color: #fff; }
.msg-item.unread .msg-subject { font-weight: 600; color: rgba(255,255,255,.95); }

.msg-item-check { flex-shrink: 0; }
.msg-item-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #14b8a6;
    cursor: pointer;
}

.msg-star {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 50%;
    transition: all .2s;
}
.msg-star:hover { color: #f59e0b; }
.msg-star.active { color: #f59e0b; }

.msg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.msg-avatar.draft-avatar {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.4);
    font-size: 16px;
}

.msg-item-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.msg-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.msg-sender {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-time {
    font-size: 11px;
    color: rgba(255,255,255,.4);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}
.msg-subject {
    font-size: 13px;
    color: rgba(255,255,255,.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.msg-preview {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Label Tags */
.msg-label-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.msg-label-tag.important { background: rgba(239,68,68,.15); color: #f87171; }
.msg-label-tag.work { background: rgba(59,130,246,.15); color: #60a5fa; }
.msg-label-tag.personal { background: rgba(34,197,94,.15); color: #4ade80; }
.msg-label-tag.finance { background: rgba(245,158,11,.15); color: #fbbf24; }

.msg-draft-tag {
    color: #f59e0b;
    font-weight: 600;
    font-size: 11px;
}

/* Item Actions */
.msg-item-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity .2s;
    flex-shrink: 0;
}
.msg-item:hover .msg-item-actions { opacity: 1; }
.msg-item-actions button {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.msg-item-actions button:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Bulk Bar */
.msg-bulk-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(20,184,166,.1);
    border-top: 1px solid rgba(20,184,166,.2);
    flex-shrink: 0;
}
.msg-bulk-bar.show { display: flex; }
.msg-bulk-count { font-size: 13px; color: #14b8a6; font-weight: 500; }

/* Empty State */
.msg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: rgba(255,255,255,.3);
}
.msg-empty i { font-size: 48px; margin-bottom: 16px; }
.msg-empty h5 { color: rgba(255,255,255,.5); margin-bottom: 4px; }

/* Detail Panel */
.msg-detail-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.msg-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255,255,255,.3);
    text-align: center;
}
.msg-detail-empty i { font-size: 64px; margin-bottom: 16px; }
.msg-detail-empty h5 { color: rgba(255,255,255,.5); }

.msg-detail-header {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.msg-detail-back {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255,255,255,.06);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msg-detail-actions { display: flex; gap: 4px; margin-left: auto; }
.msg-detail-actions button {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.msg-detail-actions button:hover { background: rgba(255,255,255,.08); color: #fff; }

.msg-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.msg-detail-subject {
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    margin-bottom: 20px;
    color: #fff;
}
.msg-detail-meta {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.msg-detail-sender-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.msg-detail-sender-info { flex: 1; min-width: 0; }
.msg-detail-sender-info strong { font-size: 14px; }
.msg-detail-sender-info span { font-size: 13px; margin-left: 6px; }
.msg-detail-to {
    font-size: 12px;
    width: 100%;
    padding-left: 58px;
    margin-top: -6px;
}

.msg-detail-text {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,.8);
}
.msg-detail-text p { margin-bottom: 12px; }
.msg-detail-text ul, .msg-detail-text ol { margin-bottom: 12px; padding-left: 24px; }
.msg-detail-text li { margin-bottom: 4px; }
.msg-detail-text code {
    background: rgba(255,255,255,.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    color: #14b8a6;
}
.msg-detail-text table { width: 100%; border-collapse: collapse; }
.msg-detail-text table td { padding: 8px; }

/* Attachments */
.msg-attachments {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.msg-attachments-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg-attachment-list { display: flex; flex-wrap: wrap; gap: 10px; }
.msg-attachment-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    transition: all .2s;
    min-width: 200px;
}
.msg-attachment-item:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.1); }
.msg-attachment-icon {
    width: 36px;
    height: 36px;
    background: rgba(239,68,68,.12);
    color: #f87171;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.msg-attachment-icon.xlsx { background: rgba(34,197,94,.12); color: #4ade80; }
.msg-attachment-info { flex: 1; }
.msg-attachment-name { display: block; font-size: 13px; color: rgba(255,255,255,.85); }
.msg-attachment-size { font-size: 11px; color: rgba(255,255,255,.4); }
.msg-attachment-download {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.msg-attachment-download:hover { background: rgba(20,184,166,.12); color: #14b8a6; }

/* Quick Reply */
.msg-quick-reply {
    margin-top: 24px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    overflow: hidden;
}
.msg-reply-header {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 13px;
    color: rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg-reply-input {
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    resize: none;
    outline: none;
    font-family: 'Inter', sans-serif;
}
.msg-reply-input::placeholder { color: rgba(255,255,255,.3); }
.msg-reply-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.msg-reply-tools { display: flex; gap: 4px; }
.msg-reply-tools button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.msg-reply-tools button:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Compose Modal */
.msg-compose-modal {
    background: #1e293b;
    border: 1px solid rgba(255,255,255,.08);
}
.msg-compose-modal .modal-header {
    border-color: rgba(255,255,255,.06);
}
.msg-compose-modal .modal-footer {
    border-color: rgba(255,255,255,.06);
}
.msg-compose-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.msg-compose-field label {
    font-size: 13px;
    color: rgba(255,255,255,.5);
    width: 50px;
    flex-shrink: 0;
}
.msg-compose-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    outline: none;
    padding: 4px 0;
}
.msg-compose-input::placeholder { color: rgba(255,255,255,.3); }
.msg-compose-textarea {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    padding: 14px;
    resize: none;
    outline: none;
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
}
.msg-compose-textarea:focus { border-color: rgba(20,184,166,.3); }
.msg-compose-textarea::placeholder { color: rgba(255,255,255,.3); }
.msg-compose-att-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.7);
    margin: 8px 6px 0 0;
}
.msg-compose-att-item button {
    border: none;
    background: transparent;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.msg-compose-att-item button:hover { color: #ef4444; }

/* Mobile Back */
.msg-mobile-back {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255,255,255,.06);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Toast override */
#msgToast {
    background: rgba(30, 41, 59, .95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    border-radius: 10px;
}

/* ==================== MESSAGES RESPONSIVE ==================== */
@media (max-width: 1199px) {
    .msg-layout { grid-template-columns: 220px 1fr; }
    .msg-detail-panel { display: none; }
    .msg-list-panel.detail-open { display: none; }
    .msg-list-panel.detail-open ~ .msg-detail-panel { display: flex; }
}

@media (max-width: 991px) {
    .msg-layout { grid-template-columns: 1fr; height: calc(100vh - 160px); }
    .msg-folders {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100vh;
        background: #1e293b;
        z-index: 1050;
        border-right: 1px solid rgba(255,255,255,.08);
        box-shadow: 4px 0 24px rgba(0,0,0,.4);
    }
    .msg-folders.show { display: block; }
    .msg-list-panel.detail-open { display: none; }
    .msg-list-panel.detail-open ~ .msg-detail-panel { display: flex; grid-column: 1; }
}

@media (max-width: 576px) {
    .msg-list-header { flex-direction: column; gap: 8px; }
    .msg-list-actions { width: 100%; justify-content: flex-end; }
    .msg-item { padding: 10px 12px; gap: 8px; }
    .msg-avatar { width: 32px; height: 32px; font-size: 11px; }
    .msg-item-check { display: none; }
    .msg-detail-body { padding: 16px; }
    .msg-detail-subject { font-size: 18px; }
    .msg-attachment-item { min-width: 100%; }
}