:root { --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 0.75rem; --spacing-lg: 1rem; --spacing-xl: 1.5rem; --spacing-xxl: 2rem; --input-height-sm: 36px; --input-height-md: 40px; --input-height-lg: 44px; --btn-height-sm: 34px; --btn-height-md: 38px; --btn-height-lg: 42px; --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-elegant: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } body { font-size: 15px; line-height: 1.55; } h1 { font-size: clamp(1.95rem, 4vw, 2.75rem); margin-bottom: 1rem; font-weight: 800; line-height: 1.15; } h2 { font-size: clamp(1.7rem, 3.5vw, 2.35rem); margin-bottom: 0.9rem; font-weight: 700; line-height: 1.2; } h3 { font-size: clamp(1.45rem, 3vw, 2rem); margin-bottom: 0.8rem; font-weight: 700; line-height: 1.25; } h4 { font-size: clamp(1.25rem, 2.5vw, 1.7rem); margin-bottom: 0.7rem; font-weight: 600; } h5 { font-size: clamp(1.1rem, 2vw, 1.4rem); margin-bottom: 0.65rem; font-weight: 600; } h6 { font-size: clamp(1rem, 1.5vw, 1.2rem); margin-bottom: 0.6rem; font-weight: 600; } p { margin-bottom: 0.9rem; line-height: 1.6; } .btn, button[type="submit"], .submit-btn, .auth-submit-btn { padding: 0.65rem 1.35rem !important; font-size: 0.88rem !important; font-weight: 600 !important; border-radius: 10px !important; letter-spacing: 0.4px !important; text-transform: uppercase; transition: var(--transition-smooth) !important; position: relative; overflow: hidden; border: none; } .btn-sm, .btn-small { padding: 0.5rem 1.1rem !important; font-size: 0.82rem !important; border-radius: 8px !important; } .btn-lg, .btn-large { padding: 0.75rem 1.6rem !important; font-size: 0.95rem !important; border-radius: 12px !important; } .btn:hover, button:hover, .submit-btn:hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 6px 20px rgba(108, 99, 255, 0.4) !important; } .btn:active, button:active, .submit-btn:active { transform: translateY(0) scale(0.98) !important; box-shadow: 0 2px 10px rgba(108, 99, 255, 0.3) !important; } .btn-primary, .submit-btn { background: linear-gradient(135deg, #6c63ff 0%, #b026ff 70%, #ff64c7 100%) !important; color: white !important; box-shadow: 0 4px 15px rgba(108, 99, 255, 0.35), 0 2px 8px rgba(255, 100, 199, 0.25) !important; } .btn-primary:hover, .submit-btn:hover { background: linear-gradient(135deg, #7a72ff 0%, #be3eff 70%, #ff72ce 100%) !important; box-shadow: 0 6px 25px rgba(108, 99, 255, 0.55), 0 4px 12px rgba(255, 100, 199, 0.45) !important; } .btn-secondary { background: linear-gradient(135deg, #ff64c7 0%, #ff8ad9 100%) !important; color: white !important; box-shadow: 0 4px 15px rgba(255, 100, 199, 0.35) !important; } .btn-outline, .btn-outline-primary { background: transparent !important; border: 2px solid rgba(108, 99, 255, 0.5) !important; color: #6c63ff !important; padding: 0.6rem 1.3rem !important; } .btn-outline:hover, .btn-outline-primary:hover { background: rgba(108, 99, 255, 0.1) !important; border-color: rgba(108, 99, 255, 0.8) !important; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], select, textarea, .form-control { padding: 0.7rem 1rem !important; font-size: 0.9rem !important; border-radius: 10px !important; border: 2px solid rgba(108, 99, 255, 0.2) !important; transition: var(--transition-smooth) !important; background: rgba(255, 255, 255, 0.05) !important; color: inherit !important; } input:focus, select:focus, textarea:focus, .form-control:focus { border-color: rgba(108, 99, 255, 0.7) !important; box-shadow: 0 0 0 0.25rem rgba(108, 99, 255, 0.15) !important; transform: translateY(-1px); outline: none !important; } .form-group { margin-bottom: 1rem !important; } .form-label, label { font-size: 0.88rem !important; font-weight: 600 !important; margin-bottom: 0.55rem !important; color: inherit; } .card, .magic-card, .feature-card { border-radius: 14px !important; padding: 1.2rem !important; border: 1px solid rgba(108, 99, 255, 0.2) !important; transition: var(--transition-elegant) !important; background: linear-gradient(135deg, rgba(108, 99, 255, 0.08) 0%, rgba(138, 99, 255, 0.06) 50%, rgba(255, 100, 199, 0.04) 100%) !important; backdrop-filter: blur(20px); } .card:hover, .magic-card:hover { transform: translateY(-5px) scale(1.01) !important; border-color: rgba(108, 99, 255, 0.4) !important; box-shadow: 0 12px 35px rgba(108, 99, 255, 0.25), 0 0 25px rgba(108, 99, 255, 0.12) !important; } .card-header { padding: 1rem 1.2rem !important; border-radius: 14px 14px 0 0 !important; font-size: 1.1rem !important; font-weight: 700 !important; } .card-body { padding: 1.2rem !important; } .card-footer { padding: 0.9rem 1.2rem !important; border-radius: 0 0 14px 14px !important; } .nav-link { padding: 0.6rem 1rem !important; font-size: 0.88rem !important; font-weight: 600 !important; border-radius: 8px !important; transition: var(--transition-smooth) !important; } .nav-link:hover { background: rgba(108, 99, 255, 0.1) !important; transform: translateX(3px); } .nav-link.active { background: rgba(108, 99, 255, 0.15) !important; color: #6c63ff !important; } .dropdown-menu { padding: 0.4rem !important; border-radius: 10px !important; border: 1px solid rgba(108, 99, 255, 0.2) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; backdrop-filter: blur(20px); } .dropdown-item { padding: 0.55rem 0.9rem !important; font-size: 0.88rem !important; border-radius: 8px !important; transition: var(--transition-fast) !important; } .dropdown-item:hover { background: rgba(108, 99, 255, 0.12) !important; transform: translateX(3px); } .modal-content { border-radius: 18px !important; border: 1px solid rgba(108, 99, 255, 0.2) !important; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2) !important; } .modal-header { padding: 1.3rem 1.5rem !important; border-bottom: 1px solid rgba(108, 99, 255, 0.15) !important; } .modal-body { padding: 1.3rem 1.5rem !important; } .modal-footer { padding: 1.1rem 1.5rem !important; border-top: 1px solid rgba(108, 99, 255, 0.15) !important; } .alert { padding: 0.9rem 1.2rem !important; border-radius: 10px !important; font-size: 0.9rem !important; border: none !important; } .alert-error { background: rgba(255, 0, 55, 0.842) !important; border: 1px solid rgba(255, 99, 132, 0.3) !important; color: #4d101b !important; } .badge, .pill { padding: 0.35rem 0.75rem !important; font-size: 0.78rem !important; font-weight: 700 !important; border-radius: 8px !important; letter-spacing: 0.3px; text-transform: uppercase; } .table { font-size: 0.88rem !important; } .table th { padding: 0.75rem 0.9rem !important; font-weight: 700 !important; font-size: 0.85rem !important; } .table td { padding: 0.7rem 0.9rem !important; } .progress { height: 8px !important; border-radius: 8px !important; overflow: hidden; } .progress-bar { border-radius: 8px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; } .list-group-item { padding: 0.8rem 1.1rem !important; font-size: 0.9rem !important; border-radius: 10px !important; margin-bottom: 0.4rem !important; } ul, ol { padding-left: 1.5rem; } li { margin-bottom: 0.4rem; line-height: 1.6; } .pagination { gap: 0.3rem !important; } .page-link { padding: 0.5rem 0.8rem !important; font-size: 0.87rem !important; border-radius: 8px !important; font-weight: 600; } @media (max-width: 992px) { body { font-size: 14.5px; } h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); } h2 { font-size: clamp(1.55rem, 3.5vw, 2.1rem); } h3 { font-size: clamp(1.35rem, 3vw, 1.8rem); } .btn, .submit-btn { padding: 0.6rem 1.25rem !important; font-size: 0.85rem !important; } .card, .magic-card { padding: 1.1rem !important; } input, select, textarea, .form-control { padding: 0.65rem 0.9rem !important; font-size: 0.88rem !important; } } @media (max-width: 768px) { body { font-size: 14px; } h1 { font-size: clamp(1.65rem, 4vw, 2.2rem); } h2 { font-size: clamp(1.45rem, 3.5vw, 1.9rem); } h3 { font-size: clamp(1.25rem, 3vw, 1.65rem); } h4 { font-size: clamp(1.12rem, 2.5vw, 1.45rem); } .btn, .submit-btn { padding: 0.58rem 1.15rem !important; font-size: 0.82rem !important; } .card, .magic-card { padding: 1rem !important; border-radius: 12px !important; } input, select, textarea, .form-control { padding: 0.6rem 0.85rem !important; font-size: 0.86rem !important; } .form-label, label { font-size: 0.85rem !important; } .modal-content { margin: 0.5rem; border-radius: 14px !important; } } @media (max-width: 576px) { body { font-size: 13.5px; } h1 { font-size: clamp(1.5rem, 4vw, 2rem); } h2 { font-size: clamp(1.35rem, 3.5vw, 1.75rem); } h3 { font-size: clamp(1.18rem, 3vw, 1.5rem); } .btn, .submit-btn { padding: 0.55rem 1.05rem !important; font-size: 0.8rem !important; border-radius: 8px !important; } .card, .magic-card { padding: 0.9rem !important; border-radius: 10px !important; } input, select, textarea, .form-control { padding: 0.55rem 0.8rem !important; font-size: 0.84rem !important; border-radius: 8px !important; } .card-header, .card-body, .card-footer { padding: 0.9rem !important; } .nav-link { padding: 0.5rem 0.8rem !important; font-size: 0.85rem !important; } } .glow-on-hover { transition: var(--transition-elegant); } .glow-on-hover:hover { box-shadow: 0 0 20px rgba(108, 99, 255, 0.4), 0 0 40px rgba(108, 99, 255, 0.2) !important; } .scale-on-hover { transition: var(--transition-smooth); } .scale-on-hover:hover { transform: scale(1.03); } .p-compact { padding: 0.7rem !important; } .px-compact { padding-left: 0.7rem !important; padding-right: 0.7rem !important; } .py-compact { padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; } .m-compact { margin: 0.7rem !important; } .mx-compact { margin-left: 0.7rem !important; margin-right: 0.7rem !important; } .my-compact { margin-top: 0.7rem !important; margin-bottom: 0.7rem !important; } .gap-compact { gap: 0.7rem !important; } .gap-sm { gap: 0.5rem !important; } .gap-xs { gap: 0.3rem !important; } .rounded-compact { border-radius: 10px !important; } .rounded-sm-compact { border-radius: 8px !important; } .rounded-lg-compact { border-radius: 14px !important; } @media print { body { font-size: 11pt; } .btn, .nav, .navbar, .bottom-nav, .modal, .alert, .dropdown-menu { display: none !important; } .card, .magic-card { border: 1px solid #ddd !important; box-shadow: none !important; page-break-inside: avoid; } }