@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Sans+JP:wght@300;400;500;600&family=Cairo:wght@300;400;600&display=swap');
body { background-color: #ffffff; color: #111827; transition: background-color 0.5s, color 0.5s; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; }
.dark body { background-color: #0f172a; color: #f8fafc; }
.bg-dots { background-image: radial-gradient(#d1d5db 1px, transparent 1px); background-size: 24px 24px; }
.dark .bg-dots { background-image: radial-gradient(#334155 1px, transparent 1px); }
.card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border: 1px solid #e5e7eb; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border-radius: 8px; transition: all 0.3s ease; }
.dark .card { background: rgba(30, 41, 59, 0.95); border: 1px solid #334155; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3); }
.input { background: #f9fafb; border: 1px solid #e5e7eb; color: #111827; transition: all 0.2s ease; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.dark .input { background: #1e293b; border: 1px solid #475569; color: #f8fafc; }
.input:focus { border-color: #111827; box-shadow: 0 0 0 1px #111827; outline: none; }
.dark .input:focus { border-color: #f8fafc; box-shadow: 0 0 0 1px #f8fafc; }
select.input { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important; background-position: right 0.5rem center !important; background-repeat: no-repeat !important; background-size: 1.5em 1.5em !important; padding-right: 2.5rem !important; }
.dark select.input { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important; }
html[dir="rtl"] select.input { background-position: left 0.5rem center !important; padding-right: 1rem !important; padding-left: 2.5rem !important; }
select.input::-ms-expand { display: none; }
.step-active { border-bottom: 2px solid #111827; color: #111827; font-weight: 600; }
.dark .step-active { border-bottom: 2px solid #f8fafc; color: #f8fafc; }
.step-inactive { border-bottom: 2px solid transparent; color: #9ca3af; }
.btn-primary { background-color: #111827; color: #ffffff; transition: transform 0.1s, opacity 0.2s; }
.dark .btn-primary { background-color: #f8fafc; color: #0f172a; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:hover { opacity: 0.9; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.loader { border: 2px solid transparent; border-top: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 50%; width: 18px; height: 18px; animation: spin 0.8s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.hidden-step { display: none !important; }
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.file-input-wrapper { position: relative; overflow: hidden; display: inline-block; }
.file-input-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; height: 100%; }
.error-shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px,0,0); } 20%, 80% { transform: translate3d(2px,0,0); } 30%, 50%, 70% { transform: translate3d(-4px,0,0); } 40%, 60% { transform: translate3d(4px,0,0); } }
#splash { position: fixed; inset: 0; background: #ffffff; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.5s ease; }
.dark #splash { background: #0f172a; }
.splash-content { display: flex; align-items: center; font-size: 2.5rem; font-weight: 700; height: 4rem; }
.splash-heart { color: #ef4444; animation: heartbeat 1s infinite; margin: 0 10px; display: inline-block; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.splash-text { color: #111827; }
.dark .splash-text { color: #f8fafc; }
.loader-line { width: 150px; height: 2px; background: #e5e7eb; margin-top: 2rem; position: relative; overflow: hidden; border-radius: 2px; }
.dark .loader-line { background: #334155; }
.loader-line::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 40px; background: #111827; animation: lineSlide 1s infinite linear; }
.dark .loader-line::after { background: #f8fafc; }
@keyframes lineSlide { 0% { transform: translateX(-40px); } 100% { transform: translateX(150px); } }
.btn-pwned { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; padding: 4px 8px; border-radius: 4px; transition: all 0.2s; cursor: pointer; border: 1px solid #e5e7eb; background: #f9fafb; color: #4b5563; }
.dark .btn-pwned { border-color: #475569; background: #1e293b; color: #cbd5e1; }
.btn-pwned:hover { background: #e5e7eb; }
.dark .btn-pwned:hover { background: #334155; }