:root { --primary-color: #4361ee; --secondary-color: #3f37c9; --success-color: #4cc9f0; --warning-color: #f72585; --danger-color: #e63946; } body { min-height: 100vh; display: flex; flex-direction: column; background-color: #f8f9fa; margin-top: 0; padding-top: 0; } .countdown { font-family: 'Courier New', Courier, monospace; font-weight: bold; color: var(--danger-color); } main { flex: 1; } .card { border: none; border-radius: 0.75rem; transition: transform 0.2s, box-shadow 0.2s; } .card:hover { transform: translateY(-2px); } .card-header { background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.05); font-weight: 600; } .navbar { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .navbar-brand { font-weight: 700; } .table { background-color: #fff; border-radius: 0.5rem; overflow: hidden; } .table th { font-weight: 600; border-bottom-width: 1px; } .table-hover tbody tr:hover { background-color: rgba(67, 97, 238, 0.05); } .btn { border-radius: 0.5rem; font-weight: 500; } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); } .btn-primary:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); } .badge { font-weight: 500; padding: 0.4em 0.8em; } .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25); } .alert { border: none; border-radius: 0.5rem; } .card.bg-primary, .card.bg-warning, .card.bg-info, .card.bg-danger { border-radius: 1rem; } .card.bg-primary:hover, .card.bg-warning:hover, .card.bg-info:hover, .card.bg-danger:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .nav-tabs .nav-link { font-weight: 500; font-size: 0.9rem; padding: 0.5rem 1rem; color: #6c757d; border: none; } .nav-tabs .nav-link:hover { color: #000; border: none; } .nav-tabs .nav-link.active { color: #000; font-weight: 700; border-bottom: 3px solid #000; background: transparent; } .footer { border-top: 1px solid #e9ecef; } .card.shadow { border-radius: 1rem; } .text-muted.display-1 { color: #dee2e6; } @media (max-width: 768px) { .card-body { padding: 0.75rem; } .table-responsive { font-size: 0.85rem; } } .custom-table thead th { border-bottom: 2px solid #dee2e6; font-size: 0.8rem; color: #495057; font-weight: 600; padding: 0.35rem 0.5rem; white-space: nowrap; } .custom-table tbody tr { transition: background-color 0.2s; } .custom-table tbody td { border-bottom: 1px solid #dee2e6; vertical-align: middle; padding: 0.35rem 0.5rem; font-size: 0.9rem; } .custom-table tbody tr:last-child td { border-bottom: none; } .page-header { margin-bottom: 0.75rem; } .form-control-custom, .form-select-custom, .btn-custom { padding: 0.25rem 0.5rem; font-size: 0.9rem; border-radius: 0.25rem; } .bi-circle, .bi-check-circle-fill { font-size: 1rem; } .countdown-urgent { color: #dc3545; font-weight: 700; } .countdown-warning { color: #fd7e14; font-weight: 700; } @keyframes pulse-bg { 0%, 100% { background-color: #fff3cd; } 50% { background-color: #ffe69c; } } @keyframes pulse-bg-danger { 0%, 100% { background-color: #f8d7da; } 50% { background-color: #f5c2c7; } } @keyframes blink-text { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes blink-banner { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } } .anxiety-warning { animation: pulse-bg 2s infinite; } .anxiety-danger { animation: pulse-bg-danger 1s infinite; } .urgent-banner { position: relative; animation: blink-banner 1.5s infinite; } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } #weekday_group, #day_group { display: none; } .btn-touch { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .copy-feedback { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; opacity: 0; transform: translateY(0.5rem); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .copy-feedback.show { opacity: 1; transform: translateY(0); }