@font-face { font-family: Cairo; font-weight: 400; font-display: swap; src: url(fonts/cairo-400.woff2) format("woff2"); }
@font-face { font-family: Cairo; font-weight: 700; font-display: swap; src: url(fonts/cairo-700.woff2) format("woff2"); }
@font-face { font-family: Cairo; font-weight: 400; font-display: swap; src: url(fonts/cairo-400-ar.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: Cairo; font-weight: 700; font-display: swap; src: url(fonts/cairo-700-ar.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

:root {
    --night: #070a14;
    --mist: #f4f6fb;
    --dim: rgba(236, 240, 250, 0.66);
    --line: rgba(255, 255, 255, 0.16);
    --violet: #7a5cff;
    --orchid: #c86bff;
    --sky: #4fc3f7;
    --aqua: #4fe8e0;
    --good: #5ee6a8;
    --warn: #ffc56b;
    --bad: #ff8a80;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
    background: var(--night) radial-gradient(90% 60% at 10% 0, rgba(122, 92, 255, 0.3), transparent) no-repeat;
    color: var(--mist);
    font: 400 16px/1.5 Cairo, "Segoe UI", system-ui, sans-serif;
}

main { max-width: 480px; margin: 0 auto; padding: 28px 16px 40px; }

.logo { display: block; width: 210px; max-width: 70%; margin: 4px auto 24px; }

.card {
    padding: 24px 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
}

h1 { margin: 0 0 6px; font-size: 24px; line-height: 1.25; }

p { margin: 0 0 16px; color: var(--dim); }

label { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 700; }

input, textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--mist);
    font: inherit;
    /* 16px keeps phones from zooming in on focus. */
    font-size: 16px;
}

textarea { min-height: 96px; resize: vertical; direction: ltr; text-align: left; word-break: break-all; }

input:focus, textarea:focus { outline: 2px solid var(--sky); outline-offset: 1px; }

button {
    display: block;
    width: 100%;
    min-height: 50px;
    margin-top: 18px;
    border: 0;
    border-radius: 25px;
    background: linear-gradient(90deg, var(--orchid), var(--violet) 45%, var(--sky));
    color: #fff;
    font: 700 16px Cairo, "Segoe UI", system-ui, sans-serif;
    cursor: pointer;
}

button.quiet { background: transparent; border: 1px solid var(--line); }

button:disabled { opacity: 0.55; cursor: default; }

.result { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.result.good { color: var(--good); }
.result.warn { color: var(--warn); }
.result.bad { color: var(--bad); }

.big { font-size: 52px; line-height: 1; text-align: center; margin-bottom: 12px; color: var(--good); }

.fine { margin: 18px 0 0; font-size: 13px; text-align: center; color: var(--dim); }

.code { text-align: center; text-transform: uppercase; letter-spacing: 0.3em; font-size: 22px; font-weight: 700; direction: ltr; }

.hidden { display: none; }

.spin {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-inline-end: 8px;
    vertical-align: -3px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--sky);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }