:root {
    --teal: #009BA6;
    --blue: #008AA8;
    --gold: #F4BA4B;
    --mint: #72C3B5;

    --teal-dark: #007D85;
    --teal-deep: #16444A;
    --ink: #173B40;
    --muted: #60787A;
    --surface: #FFFFFF;
    --soft: #F2FAF9;
    --line: #CDE7E3;

    font-family: -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
html,
body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(
            circle at top left,
            rgba(114, 195, 181, 0.18),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #F9FDFD 0%,
            #EFF9F7 100%
        );
    color: var(--ink);
}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}
button,input{font:inherit}
.shell{width:min(820px,100%);position:relative}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 18px}
.mark{font-size:42px;line-height:1;color:var(--blue);font-weight:300}
.brandname{font-size:36px;letter-spacing:-1px;color:var(--navy);font-weight:650}
.test-banner{background:#fff4c8;border:1px solid #e6cf74;color:#594b11;border-radius:12px;padding:10px 16px;text-align:center;font-weight:700;margin-bottom:14px}
.card{background:var(--white);border-radius:24px;padding:52px 60px;box-shadow:0 12px 40px rgba(18,40,70,.10);text-align:center;min-height:520px;position:relative}
.screen{display:none}
.screen.active{display:block}
h1{font-size:clamp(32px,5vw,48px);line-height:1.12;margin:18px 0 16px;color:var(--navy)}
.lead{font-size:clamp(21px,3vw,28px);line-height:1.45;color:var(--text);margin:12px 0 28px}
p{font-size:20px;line-height:1.5;color:var(--muted)}
.icon-circle{width:78px;height:78px;border-radius:50%;margin:4px auto 12px;background:#e8f0f7;color:var(--blue);display:grid;place-items:center;font-size:40px;font-weight:800}
.icon-circle.success{background:#e7f3ec;color:var(--ok)}
button{width:100%;min-height:72px;border-radius:15px;border:2px solid transparent;padding:16px 24px;font-weight:750;font-size:22px;cursor:pointer;margin-top:14px}
button:focus,
input:focus {
    outline: 4px solid rgba(244, 186, 75, 0.45);
    outline-offset: 3px;
}
.primary {
    background: linear-gradient(
        135deg,
        var(--teal) 0%,
        var(--blue) 100%
    );
    color: white;
    box-shadow: 0 8px 18px rgba(0, 155, 166, 0.18);
}
.primary:hover{background:#223c6c}
.secondary{background:white;border-color:var(--navy);color:var(--navy)}
.huge{min-height:92px;font-size:28px;margin-top:34px}
.back{position:absolute;left:30px;top:24px;width:auto;min-height:auto;background:transparent;color:var(--blue);padding:10px;border:0;font-size:18px}
form{text-align:left;margin-top:28px}
label{display:block;font-size:20px;font-weight:700;margin:22px 0 8px;color:var(--navy)}
input{width:100%;height:72px;border:2px solid var(--line);border-radius:14px;padding:12px 18px;font-size:24px;background:white;color:var(--text)}
.hint{font-size:16px;background:#f7f8fa;border-radius:10px;padding:10px 12px;margin:12px 0}
.countdown{font-size:16px;margin-top:20px}
.working{position:absolute;inset:0;background:rgba(255,255,255,.94);border-radius:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10}
.working[hidden]{display:none}
.spinner{width:54px;height:54px;border:6px solid #dbe3ec;border-top-color:var(--navy);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:620px){
    body{padding:12px}
    .card{padding:46px 24px 34px;min-height:500px;border-radius:18px}
    .brandname{font-size:30px}.mark{font-size:36px}
    .back{left:14px;top:12px}
    button{font-size:20px}
}
@media(orientation:landscape) and (max-height:700px){
    body{align-items:flex-start}
    .card{min-height:auto;padding-top:34px;padding-bottom:34px}
    .brand{margin-bottom:8px}
    h1{font-size:34px;margin:8px 0}.lead{font-size:22px;margin:8px 0 18px}
    .icon-circle{width:58px;height:58px;font-size:30px}
}

.medaid-logo {
    display: block;
    width: min(500px, 85%);
    height: auto;
    margin: 0 auto;
}

.waiting-help {
    margin-top: 28px;
    padding: 20px 22px;
    border-radius: 14px;
    background: rgba(114, 195, 181, 0.14);
    border-left: 5px solid var(--gold);
    color: var(--teal-deep);
    font-size: 18px;
    line-height: 1.55;
    text-align: left;
}