:root{
    --bg:#F4F5FF;
    --text:#111827;
    --muted:#727586;
    --purple:#673DE6;
    --purple-dark:#5b34d6;
    --border:rgba(214,216,230,.95);
    --card:rgba(255,255,255,.85);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
    margin:0;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 18px;
    background:
    radial-gradient(1200px 520px at 50% 0%, rgba(103,61,230,.10), rgba(244,245,255,0) 55%),
    var(--bg);
    color:var(--text);
    font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    overflow:hidden;
}

.content{
    width:100%;
    max-width:820px;
    padding:48px 18px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.coming-zh{
    font-family:"Noto Sans SC","DM Sans",sans-serif;
    font-size:96px;
    font-weight:700;
    line-height:1;
    color:var(--purple);
    margin:0 0 12px;
}

.coming-pinyin{
    font-size:18px;
    font-weight:700;
    color:#36344D;
    margin:0 0 18px;
}

h1{
    font-size:28px;
    font-weight:800;
    margin:6px 0;
}

.subtitle{
    width:100%;
    max-width:560px;
    font-size:16px;
    color:var(--muted);
    margin:0;
}

.notice{
    margin-top:12px;
    font-size:14px;
    color:var(--muted);
}

.mail-bar{
    margin-top:18px;
    width:min(520px,92vw);
    padding:10px;
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:0 14px 40px rgba(17,24,39,.08);
    backdrop-filter:blur(6px);
}

.mail-bar input{
    flex:1;
    height:44px;
    border:0;
    border-radius:12px;
    padding:0 14px;
    font-size:15px;
    font-family:inherit;
    color:#1F2130;
    background:transparent;
    box-shadow:none;
    appearance:none;
    -webkit-appearance:none;
}

.mail-bar input::placeholder{color:#9A9CB0}
.mail-bar input:focus{outline:none}

.mail-bar input:-webkit-autofill{
    -webkit-box-shadow:0 0 0 1000px transparent inset !important;
    box-shadow:0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color:#1F2130 !important;
}

.mail-bar button{
    height:44px;
    padding:0 18px;
    border:0;
    border-radius:14px;
    background:var(--purple);
    color:#fff;
    font-family:inherit;
    font-weight:800;
    font-size:14px;
    letter-spacing:.2px;
    box-shadow:0 10px 24px rgba(103,61,230,.28);
    transition:transform .08s ease, filter .15s ease, background .15s ease;
}

.mail-bar button:hover{cursor:pointer;background:var(--purple-dark)}
.mail-bar button:active{transform:translateY(1px)}

.flash{
    margin-top:10px;
    padding:10px 12px;
    width:min(520px,92vw);
    border-radius:12px;
    font-size:14px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.7);
    color:#36344D;
}

.flash.success{
    border-color:rgba(34,197,94,.35);
    box-shadow:0 10px 24px rgba(34,197,94,.12);
}

.flash.error{
    border-color:rgba(239,68,68,.35);
    box-shadow:0 10px 24px rgba(239,68,68,.10);
}

.mail-bar button[data-state="sent"],
.mail-bar button[data-sent="ok"]{
    background:linear-gradient(135deg,#22c55e,#16a34a);
    box-shadow:0 10px 24px rgba(34,197,94,.25);
    cursor:default;
}

.mail-bar button[data-state="already"],
.mail-bar button[data-sent="already"]{
    background:rgba(17,24,39,.08);
    color:#1F2130;
    box-shadow:none;
    cursor:default;
}

@media (max-width:580px){
    .coming-zh{font-size:64px}
    h1{font-size:24px}
}

@media (max-width:420px){
    body{padding:36px 14px}
    .mail-bar{flex-direction:column;align-items:stretch}
    .mail-bar button{width:100%}
}