@font-face {
    font-family: "Yekan";
    src: url("Yekan.ttf") format("truetype");
    font-display: swap;
}

:root {
    --navy: #06152f;
    --navy-deep: #040d20;
    --navy-raised: #0b1d3d;
    --line: #26375a;
    --violet: #8a68ff;
    --violet-strong: #6f46df;
    --violet-soft: rgba(138, 104, 255, 0.16);
    --text: #f6f7ff;
    --muted: #9aa3b8;
    --success: #4fd1a5;
    --success-soft: rgba(79, 209, 165, 0.14);
    --warning: #ffb86b;
    --warning-soft: rgba(255, 184, 107, 0.14);
    --danger: #ff8d9a;
    --radius: 14px;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
    background: var(--navy-deep);
    color: var(--text);
    font-family: Yekan, Tahoma, sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button, input, select { font: inherit; color: inherit; }

.field {
    background: rgba(4, 12, 29, 0.45);
    border: 1px solid #4d5a74;
    border-radius: 12px;
    color: var(--text);
    font-size: 1.05rem;
    min-height: 52px;
    outline: none;
    padding: 10px 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
    width: 100%;
}
.field::placeholder { color: #707a90; }
.field:focus { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.field[aria-invalid="true"] { border-color: var(--danger); }
.ltr { direction: ltr; text-align: left; }
.ltr::placeholder { text-align: right; direction: rtl; }

.btn {
    align-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    gap: 8px;
    justify-content: center;
    min-height: 48px;
    padding: 10px 20px;
    transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn:hover { border-color: #3b5180; background: rgba(255, 255, 255, 0.04); }
.btn:focus-visible { outline: 3px solid var(--violet-soft); outline-offset: 2px; }
.btn:disabled { cursor: progress; opacity: .6; }
.btn-primary {
    background: linear-gradient(90deg, #6f46df 0%, #8571ff 52%, #6551f4 100%);
    border: 0;
    box-shadow: 0 10px 26px rgba(111, 70, 223, 0.32);
    color: #fff;
    font-weight: 700;
}
.btn-primary:hover { background: linear-gradient(90deg, #7d52eb 0%, #907eff 52%, #715df8 100%); }
.btn-link { border: 0; color: var(--muted); min-height: 40px; }
.btn-link:hover { background: transparent; color: var(--text); }

.spinner {
    animation: spin .8s linear infinite;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    height: 18px;
    width: 18px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.status-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    height: 72px;
    justify-content: center;
    width: 72px;
}
.status-icon svg { height: 36px; width: 36px; }
.status-icon.success { background: var(--success-soft); color: var(--success); }
.status-icon.warning { background: var(--warning-soft); color: var(--warning); }

.form-error { color: var(--danger); font-size: .9rem; margin: 8px 0 0; min-height: 1.5em; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}