*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; width: 100%; max-width: 100%;}

:root {
    --primary: #667eea;
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary: #2c3e50;
    --accent: #3498db;
    --bg-light: #f5f5f5;
    --text-dark: #333;
    --text-medium: #555;
    --text-light: #666;
    --text-muted: #999;
    --border-color: #e0e0e0;
    --danger: #e74c3c;
    --danger-bg: #f8d7da;
    --danger-border: #f5c6cb;
    --success: #27ae60;
    --success-bg: #d4edda;
    --success-border: #c3e6cb;
    --warning: #f39c12;
    --warning-bg: #fff3cd;
    --warning-border: #ffeeba;
    --radius: 8px;
    --shadow: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-hover: 0 4px 12px rgba(0,0,0,0.15);
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    padding-top: 70px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 { color: var(--secondary); margin-top: 0; }
h1 { color: var(--text-dark); }
a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { text-decoration: underline; color: var(--primary); }

/* --- Layout Systems --- */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.container-sm { max-width: 600px; }
.container-md { max-width: 900px; }
.main-content { padding: 30px 0; }

/* --- Utilities --- */
.w-100 { width: 100% !important; }
.text-center { text-align: center !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important;}
.align-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.hidden { display: none !important; }
.mt-0 { margin-top: 0 !important; }
.mt-5 { margin-top: 5px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.gap-10 { gap: 10px !important; }
.gap-20 { gap: 20px !important; }
.justify-center { justify-content: center !important; }
.container-xl { max-width: 1400px; }
.text-white { color: white !important; }
.text-sm { font-size: 0.9rem !important; }
.icon-2x { font-size: 2rem; }
.p-10 { padding: 10px !important; }
.border-warning { border: 2px solid var(--warning) !important; }
.border-danger { border: 2px solid var(--danger) !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.min-w-100 { min-width: 100px !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mr-5 { margin-right: 5px !important; }
.border-0 { border: none !important; }
.rounded-0 { border-radius: 0 !important; }
.flex-wrap { flex-wrap: wrap !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-dark { color: var(--text-dark) !important; }
.text-lg { font-size: 1.1rem !important; }
.font-bold { font-weight: bold !important; }
.font-semibold { font-weight: 600 !important; }
.w-auto { width: auto !important; }
.max-w-300 { max-width: 300px !important; }
.m-0 { margin: 0 !important; }
.p-6 { padding: 6px !important; }
.p-15 { padding: 15px !important; }
.p-40 { padding: 40px !important; }
.pb-10 { padding-bottom: 10px !important; }
.border-bottom { border-bottom: 2px solid var(--border-color) !important; }
.border-top-accent { border-top: 4px solid var(--accent) !important; }
.border-dashed { border: 2px dashed var(--border-color) !important; }
.bg-light { background-color: var(--bg-light) !important; }
.icon-3x { font-size: 2.5rem !important; }
.d-block { display: block !important; }
.flex-column { flex-direction: column !important; }