:root {--primary-color: #800080; --secondary-color: #660066; --accent-color: #4d004d; --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.8); --text-muted: rgba(255, 255, 255, 0.6); --bg-primary: #000000; --bg-secondary: #2b0028; --bg-tertiary: #000033; --border-color: rgba(255, 255, 255, 0.1); --shadow-light: rgba(0, 0, 0, 0.1); --shadow-medium: rgba(0, 0, 0, 0.2); --shadow-heavy: rgba(0, 0, 0, 0.3); --border-radius: 12px; --border-radius-sm: 8px; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem} @media (max-width: 768px) {a, button, input, textarea, select, [role="button"] {min-height: 48px; min-width: 48px} .btn + .btn {margin-top: var(--spacing-sm)} .btn {width: 100%; margin-bottom: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); font-size: 1rem; border-radius: var(--border-radius-sm); font-weight: 500} .btn-group {display: flex; flex-direction: column; gap: var(--spacing-xs)} .btn-group .btn {border-radius: var(--border-radius-sm) !important; margin-bottom: var(--spacing-xs)} } @media (max-width: 768px) {.form-group {margin-bottom: var(--spacing-lg)} .form-label {font-weight: 600; margin-bottom: var(--spacing-sm); display: block; font-size: 1rem; color: var(--text-primary)} .form-control, .form-select {font-size: 16px; padding: var(--spacing-md) var(--spacing-sm); border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-xs); min-height: 48px; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--border-color); color: var(--text-primary); transition: all 0.3s ease} .form-control:focus, .form-select:focus {background: rgba(255, 255, 255, 0.15); border-color: var(--primary-color); color: var(--text-primary); box-shadow: 0 0 0 0.25rem rgba(128, 0, 128, 0.25); outline: none} textarea.form-control {min-height: 120px; resize: vertical; padding: var(--spacing-md)} } @media (max-width: 768px) {.card {border-radius: var(--border-radius); margin-bottom: var(--spacing-md); box-shadow: 0 4px 12px var(--shadow-medium); padding: 0; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(15px); border: 1px solid var(--border-color); transition: all 0.3s ease} .card:hover {transform: translateY(-2px); box-shadow: 0 8px 25px var(--shadow-heavy); border-color: rgba(128, 0, 128, 0.3)} .card-header {padding: var(--spacing-md); border-bottom: 1px solid var(--border-color); border-radius: var(--border-radius) var(--border-radius) 0 0; background: rgba(128, 0, 128, 0.1); font-weight: 600} .card-body {padding: var(--spacing-md)} .card-footer {padding: var(--spacing-md); border-top: 1px solid var(--border-color); border-radius: 0 0 var(--border-radius) var(--border-radius); background: rgba(0, 0, 0, 0.1)} .row .col-md-4, .row .col-md-6, .row .col-md-8 {width: 100%; margin-bottom: var(--spacing-md)} .card + .card {margin-top: var(--spacing-md)} } @media (max-width: 768px) {.navbar-collapse {display: none !important} .navbar-nav .nav-item {width: 100%} .nav-link {padding: var(--spacing-md); margin: var(--spacing-xs) 0; border-radius: var(--border-radius-sm); font-size: 1rem; min-height: 48px; display: flex; align-items: center; justify-content: center} .nav-link.active {background: rgba(128, 0, 128, 0.2); color: var(--primary-color) !important} .navbar {padding: var(--spacing-sm) 0} .navbar-brand {font-size: 1.3rem; font-weight: 700} } @media (max-width: 768px) {.table-responsive {border-radius: var(--border-radius-sm); overflow: hidden; margin-bottom: var(--spacing-md)} .table {font-size: 0.9rem; margin-bottom: 0} .table th, .table td {padding: var(--spacing-sm); vertical-align: middle} @media (max-width: 480px) {.table-responsive .table {display: block} .table-responsive .table thead {display: none} .table-responsive .table tbody, .table-responsive .table tr, .table-responsive .table td {display: block} .table-responsive .table tr {margin-bottom: var(--spacing-sm); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: var(--spacing-sm)} .table-responsive .table td {border: none; padding: var(--spacing-xs) 0; text-align: left} .table-responsive .table td:before {content: attr(data-label) ": "; font-weight: 600; color: var(--text-secondary)} } } @media (max-width: 768px) {.modal-dialog {margin: var(--spacing-sm); max-width: calc(100% - 2rem)} .modal-content {border-radius: var(--border-radius); background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(20px); border: 1px solid var(--border-color)} .modal-header {padding: var(--spacing-md); border-bottom: 1px solid var(--border-color)} .modal-body {padding: var(--spacing-md)} .modal-footer {padding: var(--spacing-md); border-top: 1px solid var(--border-color)} .modal-footer .btn {width: 100%; margin-bottom: var(--spacing-xs)} } @media (max-width: 768px) {.list-group {border-radius: var(--border-radius-sm); overflow: hidden} .list-group-item {padding: var(--spacing-md); border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-xs); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); transition: all 0.3s ease} .list-group-item:last-child {margin-bottom: 0} .list-group-item:hover {background: rgba(255, 255, 255, 0.1); transform: translateY(-1px)} } @media (max-width: 768px) {.progress {height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden} .progress-bar {border-radius: 6px; transition: width 0.6s ease} } @media (max-width: 768px) {.accordion {border-radius: var(--border-radius-sm); overflow: hidden} .accordion-item {border: 1px solid var(--border-color); margin-bottom: var(--spacing-xs); border-radius: var(--border-radius-sm)} .accordion-button {padding: var(--spacing-md); font-size: 1rem; background: rgba(255, 255, 255, 0.05); border: none; color: var(--text-primary)} .accordion-button:not(.collapsed) {background: rgba(128, 0, 128, 0.1); color: var(--primary-color)} .accordion-button:focus {box-shadow: 0 0 0 0.25rem rgba(128, 0, 128, 0.25)} .accordion-body {padding: var(--spacing-md); background: rgba(0, 0, 0, 0.1)} } @media (max-width: 768px) {.chart-container {height: 300px !important; margin-bottom: var(--spacing-md); border-radius: var(--border-radius-sm); overflow: hidden} canvas {border-radius: var(--border-radius-sm)} } @media (max-width: 768px) {.mobile-mt-0 {margin-top: 0 !important} .mobile-mt-1 {margin-top: var(--spacing-xs) !important} .mobile-mt-2 {margin-top: var(--spacing-sm) !important} .mobile-mt-3 {margin-top: var(--spacing-md) !important} .mobile-mt-4 {margin-top: var(--spacing-lg) !important} .mobile-mt-5 {margin-top: var(--spacing-xl) !important} .mobile-mb-0 {margin-bottom: 0 !important} .mobile-mb-1 {margin-bottom: var(--spacing-xs) !important} .mobile-mb-2 {margin-bottom: var(--spacing-sm) !important} .mobile-mb-3 {margin-bottom: var(--spacing-md) !important} .mobile-mb-4 {margin-bottom: var(--spacing-lg) !important} .mobile-mb-5 {margin-bottom: var(--spacing-xl) !important} .mobile-p-0 {padding: 0 !important} .mobile-p-1 {padding: var(--spacing-xs) !important} .mobile-p-2 {padding: var(--spacing-sm) !important} .mobile-p-3 {padding: var(--spacing-md) !important} .mobile-p-4 {padding: var(--spacing-lg) !important} .mobile-p-5 {padding: var(--spacing-xl) !important} .container {padding: 0 var(--spacing-sm); max-width: 100%} .row {margin-left: calc(-1 * var(--spacing-xs)); margin-right: calc(-1 * var(--spacing-xs))} .col, .col-md-4, .col-md-6, .col-md-8, .col-md-12 {padding-left: var(--spacing-xs); padding-right: var(--spacing-xs)} .py-4 {padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important} .py-5 {padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important} .mt-4 {margin-top: var(--spacing-md) !important} .mt-5 {margin-top: var(--spacing-lg) !important} .mb-4 {margin-bottom: var(--spacing-md) !important} .mb-5 {margin-bottom: var(--spacing-lg) !important} } @media (max-width: 768px) {.mobile-text-center {text-align: center !important} .mobile-text-left {text-align: left !important} .mobile-text-right {text-align: right !important} .mobile-fs-1 {font-size: 1.75rem !important} .mobile-fs-2 {font-size: 1.5rem !important} .mobile-fs-3 {font-size: 1.25rem !important} .mobile-fs-4 {font-size: 1.1rem !important} .mobile-fs-5 {font-size: 1rem !important} .mobile-fs-6 {font-size: 0.9rem !important} body {font-size: 16px; line-height: 1.6} p {margin-bottom: var(--spacing-sm)} h1, h2, h3, h4, h5, h6 {line-height: 1.3; margin-bottom: var(--spacing-sm)} } @media (max-width: 768px) {.mobile-d-none {display: none !important} .mobile-d-block {display: block !important} .mobile-d-flex {display: flex !important} .mobile-d-inline {display: inline !important} .mobile-d-inline-block {display: inline-block !important} } @media (max-width: 768px) {.mobile-flex-column {flex-direction: column !important} .mobile-flex-row {flex-direction: row !important} .mobile-justify-content-center {justify-content: center !important} .mobile-justify-content-start {justify-content: flex-start !important} .mobile-justify-content-end {justify-content: flex-end !important} .mobile-align-items-center {align-items: center !important} .mobile-align-items-start {align-items: flex-start !important} .mobile-align-items-end {align-items: flex-end !important} } @media (max-width: 768px) {.loading {padding: var(--spacing-xl); text-align: center} .loading::after {content: ''; display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 1s ease-in-out infinite} @keyframes spin {to {transform: rotate(360deg)} } } @media (max-width: 768px) {body {-webkit-overflow-scrolling: touch; overflow-x: hidden} .container {overflow-x: hidden} html {scroll-behavior: smooth} html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%} } @media (max-width: 768px) {* {-webkit-tap-highlight-color: transparent} a, button, input, textarea, select {-webkit-tap-highlight-color: rgba(128, 0, 128, 0.2)} .btn:active, .nav-link:active, .card:active {transform: scale(0.98); transition: transform 0.1s ease} } @media (max-width: 768px) {.btn:focus, .nav-link:focus, .form-control:focus, .form-select:focus {outline: none; box-shadow: 0 0 0 0.25rem rgba(128, 0, 128, 0.25)} .text-muted {color: var(--text-muted) !important} .text-white-50 {color: rgba(255, 255, 255, 0.5) !important} } @media (max-width: 768px) {.card:hover {transform: none} * {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none} .card {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none} } @media (max-width: 768px) {.alert {border-radius: var(--border-radius-sm); padding: var(--spacing-md); margin-bottom: var(--spacing-md); background: rgba(255, 255, 255, 0.1); border: none; backdrop-filter: blur(10px)} .alert-dismissible .btn-close {padding: var(--spacing-sm); margin: calc(-1 * var(--spacing-sm))} } @media (max-width: 768px) {.badge {font-size: 0.75rem; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm)} } @media (max-width: 768px) {.row > * {padding-left: var(--spacing-xs); padding-right: var(--spacing-xs)} .row > *:last-child {margin-bottom: 0} } @media print {.navbar, .mobile-nav, .btn, .alert {display: none !important} body {background: white !important; color: black !important; padding-bottom: 0 !important} .card {background: white !important; color: black !important; border: 1px solid #ddd !important; box-shadow: none !important} } @media (max-width: 768px) {.card {margin-bottom: var(--spacing-sm); border-radius: var(--border-radius-sm); box-shadow: 0 2px 8px var(--shadow-light)} .card:hover {transform: none; box-shadow: 0 2px 8px var(--shadow-light)} .card-body {padding: var(--spacing-sm)} .card-header {padding: var(--spacing-sm); font-size: 1rem} .btn {padding: var(--spacing-sm); font-size: 0.9rem; border-radius: var(--border-radius-sm)} h1 {font-size: 1.5rem !important} h2 {font-size: 1.3rem !important} h3 {font-size: 1.1rem !important} h4 {font-size: 1rem !important} h5 {font-size: 0.9rem !important} h6 {font-size: 0.85rem !important} .mb-4 {margin-bottom: var(--spacing-sm) !important} .mb-5 {margin-bottom: var(--spacing-md) !important} .mt-4 {margin-top: var(--spacing-sm) !important} .mt-5 {margin-top: var(--spacing-md) !important} .mobile-nav .nav-link {font-size: 0.7rem; padding: var(--spacing-xs); min-height: 50px} .mobile-nav .nav-link i {font-size: 1rem; margin-bottom: 1px} .form-control, .form-select {padding: var(--spacing-sm); font-size: 16px; min-height: 44px} .alert {padding: var(--spacing-sm); margin-bottom: var(--spacing-sm); font-size: 0.9rem} .badge {font-size: 0.7rem; padding: 0.25rem 0.5rem} .progress {height: 8px; border-radius: 4px} .fs-1 {font-size: 1.5rem !important} .fs-2 {font-size: 1.25rem !important} .fs-3 {font-size: 1.1rem !important} .fs-4 {font-size: 1rem !important} .fs-5 {font-size: 0.9rem !important} .fs-6 {font-size: 0.8rem !important} } @media (max-width: 480px) {.container {padding: 0 var(--spacing-xs)} .card {margin-bottom: var(--spacing-xs); border-radius: 6px} .card-body {padding: var(--spacing-xs)} .btn {padding: 0.5rem; font-size: 0.85rem} .mobile-nav {padding: 0.25rem 0} .mobile-nav .nav-link {font-size: 0.65rem; min-height: 45px} .mobile-nav .nav-link i {font-size: 0.9rem} .lead {font-size: 1rem !important} .display-4 {font-size: 2rem !important} .row {margin-left: calc(-1 * 0.25rem); margin-right: calc(-1 * 0.25rem)} .col, .col-md-4, .col-md-6, .col-md-8, .col-md-12 {padding-left: 0.25rem; padding-right: 0.25rem} } @media (prefers-reduced-motion: reduce) {* {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important} .card:hover {transform: none} .btn:hover {transform: none} } @media (prefers-contrast: high) {.card {border: 2px solid var(--text-primary)} .btn {border: 2px solid var(--text-primary)} .form-control, .form-select {border: 2px solid var(--text-primary)} }