/* ============================================
   CITIBRIDGE - Modern Design System
   Glassmorphism + Neon Gradients + Animations
   ============================================ */

/* ===== CSS VARIABLES ===== */
:root {
    /* Primary Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-warning: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-dark: linear-gradient(135deg, #0c0c1e 0%, #1a1a3e 100%);
    
    /* Colors */
    --bg-primary: #0c0c1e;
    --bg-secondary: #1a1a3e;
    --bg-glass: rgba(255, 255, 255, 0.05);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    
    /* Accent Colors */
    --accent-purple: #667eea;
    --accent-pink: #f5576c;
    --accent-blue: #4facfe;
    --accent-gold: #ffd700;
    
    /* Shadows */
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    --shadow-glow: 0 0 20px rgba(102, 126, 234, 0.5);
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.3);
    
    /* Borders */
    --border-glass: 1px solid rgba(255, 255, 255, 0.1);
    --border-glow: 1px solid rgba(102, 126, 234, 0.3);
    
    /* Animation Speeds */
    --animation-fast: 0.3s;
    --animation-normal: 0.5s;
    --animation-slow: 0.8s;
}

/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* Animated Background Particles */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(245, 87, 108, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(79, 172, 254, 0.1) 0%, transparent 50%);
    z-index: -1;
    animation: particleFloat 20s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

/* ===== LOADING SCREEN ===== */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0c0c1e 0%, #1a1a3e 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====================================================
   COMPONENT POLISH & READABILITY
   
   These styles clean up the appearance of cards, tables,
   dropdowns, form controls and badges throughout the
   application. They remove stark white backgrounds and
   ensure text remains readable on the dark theme. The
   spacing and shadow values are standardized to create
   a cohesive look across user and admin interfaces.
   ==================================================== */

/* Cards: unify backgrounds and spacing */
.card {
    background-color: var(--bg-secondary);
    border: var(--border-glass);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    color: var(--text-primary);
}

/* Tables: dark theme and alternate row shading */
.table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
    color: var(--text-primary);
}
.table thead {
    background-color: rgba(255, 255, 255, 0.05);
}
.table thead th {
    border-bottom: var(--border-glass);
    padding: 0.75rem;
    text-align: left;
    white-space: normal;
}
.table tbody tr {
    border-bottom: var(--border-glass);
}
.table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}
.table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.table td {
    padding: 0.75rem;
    vertical-align: middle;
    white-space: normal;
    word-break: break-word;
}

/* Dropdown menu improvements */
.dropdown-menu {
    background-color: var(--bg-secondary);
    border: var(--border-glass);
    box-shadow: var(--shadow-card);
    color: var(--text-primary);
}
.dropdown-item {
    color: var(--text-primary);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Form controls improvements */
.form-control,
.form-select {
    background-color: var(--bg-glass);
    border: var(--border-glass);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    width: 100%;
}
.form-control:focus,
.form-select:focus {
    outline: none;
    border: var(--border-glow);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Buttons */
.btn {
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.btn.btn-primary {
    background: var(--gradient-primary);
    border: none;
    color: var(--text-primary);
}
.btn.btn-primary:hover {
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}
.btn.btn-secondary {
    background: var(--gradient-dark);
    border: none;
    color: var(--text-primary);
}
.btn.btn-secondary:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.btn.btn-outline {
    background: transparent;
    border: var(--border-glow);
    color: var(--text-primary);
}
.btn.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
}
.btn.btn-gradient {
    background: var(--gradient-secondary);
    border: none;
    color: var(--text-primary);
}
.btn.btn-gradient:hover {
    box-shadow: 0 0 10px rgba(245, 87, 108, 0.5);
}

/* Badges styling to make them stand out on dark backgrounds */
.badge {
    border-radius: 6px;
    padding: 0.35em 0.6em;
    font-size: 0.85em;
    font-weight: 600;
}
.badge-success { background-color: #28a745; color: #fff; }
.badge-danger { background-color: #dc3545; color: #fff; }
.badge-warning { background-color: #ffc107; color: #111; }
.badge-info { background-color: #17a2b8; color: #fff; }

/* Info boxes */
.info-box,
.success-box,
.error-box {
    background-color: var(--bg-glass);
    border: var(--border-glass);
    padding: 1rem;
    border-radius: 8px;
    color: var(--text-primary);
}

/* Dashboard stats and stat cards */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.stat-card {
    background-color: var(--bg-secondary);
    border: var(--border-glass);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    text-align: center;
}
.stat-card h3 {
    margin-bottom: 0.5rem;
    font-size: 2rem;
}
.stat-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Background Animation Particles */
#loading-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(245, 87, 108, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(79, 172, 254, 0.15) 0%, transparent 50%);
    animation: loadingPulse 4s ease-in-out infinite;
}

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

.loading-content {
    text-align: center;
    z-index: 1;
    position: relative;
}

/* Modern Logo Animation */
.loading-logo {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}

.loading-logo span {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) rotate(-5deg);
    animation: letterReveal 0.5s forwards;
}

.loading-logo span:nth-child(1) { animation-delay: 0.1s; }
.loading-logo span:nth-child(2) { animation-delay: 0.15s; }
.loading-logo span:nth-child(3) { animation-delay: 0.2s; }
.loading-logo span:nth-child(4) { animation-delay: 0.25s; }
.loading-logo span:nth-child(5) { animation-delay: 0.3s; }
.loading-logo span:nth-child(6) { animation-delay: 0.35s; }
.loading-logo span:nth-child(7) { animation-delay: 0.4s; }
.loading-logo span:nth-child(8) { animation-delay: 0.45s; }
.loading-logo span:nth-child(9) { animation-delay: 0.5s; }
.loading-logo span:nth-child(10) { animation-delay: 0.55s; }
.loading-logo span:nth-child(11) { animation-delay: 0.6s; }
.loading-logo span:nth-child(12) { animation-delay: 0.65s; }
.loading-logo span:nth-child(13) { animation-delay: 0.7s; }
.loading-logo span:nth-child(14) { animation-delay: 0.75s; }

@keyframes letterReveal {
    to {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

/* Animated Bank Icon */
.loading-icon {
    font-size: 4rem;
    margin-bottom: 2rem;
    display: inline-block;
    position: relative;
}

.loading-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
    animation: iconPulse 2s ease-in-out infinite;
}

.loading-icon i {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.1; }
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Modern Circular Progress */
.loading-progress {
    width: 200px;
    height: 200px;
    margin: 0 auto 2rem;
    position: relative;
}

.loading-progress svg {
    transform: rotate(-90deg);
}

.loading-progress-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 8;
}

.loading-progress-bar {
    fill: none;
    stroke: url(#gradient);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 565;
    stroke-dashoffset: 565;
    animation: progressFill 2s ease-out forwards;
}

@keyframes progressFill {
    to { stroke-dashoffset: 0; }
}

/* Percentage Display */
.loading-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: percentageCount 2s ease-out forwards;
}

@keyframes percentageCount {
    from { content: '0%'; }
    to { content: '100%'; }
}

/* Loading Text Animation */
.loading-text {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.loading-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent-purple);
    border-radius: 50%;
    animation: dotBounce 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
}

/* Glowing Line */
.loading-line {
    width: 0;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
    margin: 2rem auto;
    animation: lineExpand 2s ease-out forwards;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

@keyframes lineExpand {
    to { width: 200px; }
}

/* ===== HEADER & NAVIGATION ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(12, 12, 30, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: var(--border-glass);
    z-index: 1000;
    transition: all 0.3s ease;
}

.header.scrolled {
    background: rgba(12, 12, 30, 0.95);
    box-shadow: var(--shadow-glass);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: bold;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Modern Navigation */
.nav {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-glass);
}

.nav-link:hover::before {
    width: 80%;
}

.nav-link.active {
    color: var(--text-primary);
    background: var(--bg-glass);
}

.nav-link.active::before {
    width: 80%;
}


.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.header-actions .btn {
    white-space: nowrap;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.8);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: var(--border-glow);
}

.btn-secondary:hover {
    background: var(--bg-glass);
    border-color: var(--accent-purple);
    transform: translateY(-3px);
}

.btn-gradient {
    background: var(--gradient-secondary);
    color: white;
    box-shadow: 0 5px 20px rgba(245, 87, 108, 0.4);
}

.btn-gradient:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(245, 87, 108, 0.8);
}

.btn-outline-gold {
    background: transparent;
    color: var(--accent-gold);
    border: 2px solid var(--accent-gold);
}

.btn-outline-gold:hover {
    background: var(--accent-gold);
    color: var(--bg-primary);
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* ===== GLASSMORPHISM CARDS ===== */
.glass-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: var(--border-glass);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-10px);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: var(--shadow-glow);
}

.glass-card-gradient {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(245, 87, 108, 0.1) 100%);
}

/* ===== HERO SECTION ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 6rem 2rem 2rem;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.15) 0%, transparent 30%),
        radial-gradient(circle at 70% 70%, rgba(245, 87, 108, 0.15) 0%, transparent 30%);
    animation: heroPulse 10s ease-in-out infinite;
}

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

.hero-content {
    text-align: center;
    max-width: 900px;
    z-index: 1;
    animation: fadeInUp 1s ease-out;
}

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

.hero-title {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-title-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== FORMS ===== */
.form-container {
    max-width: 500px;
    margin: 0 auto;
    animation: fadeInUp 0.5s ease-out;
}

.form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
}

.form-input {
    width: 100%;
    padding: 1rem 1.2rem;
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

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

.form-select {
    width: 100%;
    padding: 1rem 1.2rem;
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-select:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

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

/*
 * Global list/dropdown styling
 * Ensure that all native <select> and <option> elements, as well as
 * drop-down menus rendered by browsers, adopt the dark theme. Without
 * these rules many lists render with a light background (white) which
 * makes the text impossible to read against our dark UI.  The following
 * selectors apply to all selects and optgroups whether or not the
 * .form-select class is present.  They set an appropriate background
 * colour and text colour consistent with the rest of the application.
 */
select,
select option,
select optgroup {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Also target datalist dropdowns (the rendered suggestion list when using
 * input[list]) which are implemented as <datalist> in some browsers.
 * Although these cannot be styled directly in all browsers, setting the
 * background and colour on the input itself helps ensure the list
 * inherits dark colours where supported.
 */
input[list] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Standardise list group backgrounds used on admin and user pages.  The
 * .list-group and .list-group-item classes appear in ticket listings
 * and other components.  Without these rules they inherited a white
 * background from Bootstrap defaults.  We override them here to
 * maintain consistency with the dark theme.
 */
.list-group,
.list-group-item {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: var(--border-glass);
}

.list-group-item:hover {
    background-color: var(--bg-glass);
}

/*
 * Ensure the main content is never hidden beneath the fixed header.
 * Because the header uses a fixed position, it can overlap page content
 * when the page scrolls or on initial load.  Apply top padding to the
 * body element equal to the approximate height of the header so that
 * page content begins below the header.  Adjust padding for mobile
 * viewports where the header may wrap and require extra space.
 */
body {
    padding-top: 92px;
}

@media (max-width: 768px) {
    body {
        padding-top: 132px;
    }
}

.form-textarea {
    width: 100%;
    padding: 1rem 1.2rem;
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    resize: vertical;
    min-height: 120px;
    transition: all 0.3s ease;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.form-helper {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.form-error {
    color: var(--accent-pink);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.form-success {
    color: var(--accent-blue);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* ===== ALERTS ===== */
.alert {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.alert-success {
    background: rgba(79, 172, 254, 0.1);
    border: 1px solid rgba(79, 172, 254, 0.3);
    color: var(--accent-blue);
}

.alert-error {
    background: rgba(245, 87, 108, 0.1);
    border: 1px solid rgba(245, 87, 108, 0.3);
    color: var(--accent-pink);
}

.alert-warning {
    background: rgba(250, 112, 154, 0.1);
    border: 1px solid rgba(250, 112, 154, 0.3);
    color: var(--accent-pink);
}

.alert-info {
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: var(--accent-purple);
}

/* ===== SECTIONS ===== */
.section {
    padding: 5rem 2rem;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

/* ===== FOOTER ===== */
.footer {
    background: rgba(12, 12, 30, 0.9);
    border-top: var(--border-glass);
    padding: 4rem 2rem 2rem;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
}

.footer-section h3 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--accent-purple);
    padding-left: 5px;
}

.footer-bottom {
    text-align: center;
    padding-top: 3rem;
    margin-top: 3rem;
    border-top: var(--border-glass);
    color: var(--text-muted);
}

/* ===== UTILITY CLASSES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }

.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }
.p-4 { padding: 4rem; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.gap-3 { gap: 3rem; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.hidden { display: none; }
.block { display: block; }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .hero-title { font-size: 3rem; }
    .section-title { font-size: 2.5rem; }
}

@media (max-width: 768px) {
    .header-content {
        padding: 0.7rem 1rem;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .logo {
        font-size: 1.25rem;
        max-width: 52%;
        line-height: 1.15;
    }

    .logo-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .header-actions {
        display: flex;
        align-items: flex-start;
        flex-direction: column-reverse;
        margin-left: auto;
        gap: 0.45rem;
    }

    .action-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    .header-actions .btn.btn-sm {
        padding: 0.45rem 0.75rem;
        font-size: 0.82rem;
        width: 100%;
        text-align: center;
    }

    .menu-toggle {
        margin-top: 0.1rem;
        align-self: flex-end;
    }

    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(12, 12, 30, 0.98);
        flex-direction: column;
        padding: 1rem;
        gap: 0.7rem;
        border-top: var(--border-glass);
        max-height: calc(100svh - 120px);
        overflow-y: auto;
    }
    
    .nav.active {
        display: flex;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    .hero { min-height: calc(100svh - 110px); padding: 4rem 1rem 2rem; }
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .section-title { font-size: 2rem; }
    
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 560px) {
    .header-content {
        padding: 0.65rem 0.75rem;
    }

    .logo {
        max-width: 48%;
        font-size: 1.08rem;
        gap: 0.4rem;
    }

    .header-actions {
        width: 48%;
    }

    .action-buttons .btn.btn-sm {
        font-size: 0.76rem;
        padding: 0.38rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .hero-title { font-size: 2rem; }
    .section-title { font-size: 1.5rem; }
    
    .grid-cols-4, .grid-cols-3, .grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    .btn-lg {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
}

/*
 * -----------------------------------------------------------------------------
 * Modern form control styling
 * -----------------------------------------------------------------------------
 *
 * Inputs, selects and textareas marked with the `form-control` class lacked
 * styling in the modern theme and appeared as plain white boxes, which
 * contrasted poorly with the dark glassmorphic backgrounds. The following
 * definitions apply a subtle glass background, thin border, rounded corners
 * and responsive focus effects so that form controls visually integrate with
 * the rest of the interface. Placeholders are muted and the focus state adds
 * a blue glow to signify interaction.
 */
.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-glass);
    border: var(--border-glass);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color var(--animation-fast), box-shadow var(--animation-fast), background var(--animation-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.2rem rgba(79, 172, 254, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

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

.tx-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-glass);
    border-radius: 12px;
}

@media (max-width: 768px) {
    .tx-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .tx-item .tx-amount {
        align-self: flex-end;
        font-size: 1.05rem !important;
    }
    .table-responsive {
        overflow-x: auto;
    }
}