:root{--border:#e7e3dd;--muted:#5c5148;--accent:#d39f42}
.ConfirmMain{padding:80px min(5vw,60px) 120px}
.NameHero{max-width:1000px;margin:60px auto 24px;text-align:center;position:relative}
.NameWallpaper{position:absolute;top:0;left:0;right:0;height:230px;display:flex;align-items:center;justify-content:center;color:#eee;opacity:.35;font-size:clamp(2.4rem,7vw,4rem);line-height:1.3;text-align:center;pointer-events:none;z-index:0;}
.HeroTitle{font-size:clamp(2.4rem,6vw,3.5rem);margin:0 0 10px;font-weight:400;position:relative;z-index:1}
.HeroHint{color:var(--muted);font-style:italic;margin:8px 0 24px;position:relative;z-index:1}

/* animated ellipsis */
.Ellipsis{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle}
.Ellipsis .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.25;animation:ellipsis 1.2s infinite ease-in-out}
.Ellipsis .dot:nth-child(2){animation-delay:.2s}
.Ellipsis .dot:nth-child(3){animation-delay:.4s}
@keyframes ellipsis{0%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}100%{opacity:.25;transform:translateY(0)}}

.HeroInputWrap{display:flex;justify-content:center;position:relative;z-index:1}
.InputEllipsis{margin-left:12px;align-self:center;pointer-events:none}
.HeroInput{font-size:clamp(2rem,6vw,3rem);border:none;border-bottom:1px solid var(--border);outline:none;text-align:center;padding:10px 12px;width:min(700px,82vw); background-color: #fff;}

/* suggestions dropdown */
.Suggestions{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;
    list-style:none;padding:8px 6px;
    background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.08);min-width:min(700px,82vw);
    max-width:min(700px,82vw);display:none;z-index:5}
.Suggestions.show{display:block}
.Suggestions li{padding:10px 14px;border-radius:10px;cursor:pointer; font-size: 18px;
    font-style: italic;
    color: #000000cc;
    letter-spacing: 1.1px;
    margin: 4px 0;
    text-align: center;}
.Suggestions li[aria-selected="true"],.Suggestions li:hover{background:#faf7f2}

.HeroState{margin-top:84px}
.TypedName,.FoundName{font-size:clamp(2rem,5vw,2.6rem);margin:0 0 6px}
.NotFoundText{font-size: 18px;
    font-style: italic;
    color: #0000007a;
    letter-spacing: 1.3px;
    margin-bottom: -18px;
    text-align: center;}
.FoundSub{color:#5c5148;font-size:clamp(1.2rem,3vw,1.6rem);margin:6px 0 16px; font-style: italic;
    letter-spacing: 1.3px;
    margin-bottom: 23px;
    text-align: center}

.FormActions{display:flex;gap:16px;justify-content:center;margin-top:8px}
.Button{padding:14px 22px;border-radius:999px;border:1px solid var(--border);background:#fff;color:#000;cursor:pointer;font-size:1rem}
.Button_primary{border-color:var(--accent);color:#a06b1d;background:#fff}
.Button_primary:hover{background:#fff4e3}
.Button_secondary{border-color:var(--border);color:#444;background:#fff}
.Button_secondary:hover{background:#f5f5f5}

.hidden{display:none !important}

/* Popup modal */
.PopupOverlay{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    width:100vw;height:100vh;
    background:rgba(0,0,0,.45);
    display:grid;place-items:center;
    z-index:9999;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease;
}
.PopupOverlay.show{opacity:1;pointer-events:auto}
.PopupModal{
    box-sizing:border-box;
    background:#fff;
    border:1px solid var(--accent);
    border-radius:16px;
    box-shadow:0 25px 60px rgba(0,0,0,.25);
    width: min(420px, calc(100vw - 48px));
    padding:24px 22px;
    text-align:center;
}
.PopupTitle{font-family:freight-big-pro, serif;font-size:32px;letter-spacing:1.5px;color:#000;margin:0 0 8px}
.PopupMessage{font-size:18px;letter-spacing:1px;color:#5c5148;margin:6px 0 16px}
.PopupActions{display:flex;gap:12px;justify-content:center}
.PopupModal.success{border-color:var(--accent)}
.PopupModal.error{border-color:#c64545}
.PopupModal.info{border-color:#5c5148}