:root{
    --bg:#0f1014;
    --surface:#181a21;
    --card:#20232d;
    --border:#303441;
    --text:#f2f2f2;
    --muted:#9ca3af;
    --accent:#d9468f;
    --success:#22c55e;
}

html[data-theme="light"]{
    --bg:#e4e6ea;
    --surface:#eceee8;
    --card:#ffffff;
    --border:#c4c8ce;
    --text:#1a1d22;
    --muted:#5c636c;
    --accent:#b83280;
}

*{
    box-sizing:border-box;
}

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

body{
    background:var(--bg);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
}

.brand-name{
    display:inline;
    white-space:nowrap;
    color:var(--text);
}

.brand-d{
    display:inline;
    color:var(--accent);
}

.queue-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:36px 18px;
}

.queue-shell{
    width:100%;
    max-width:920px;
    padding:36px 40px 32px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
}

.queue-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:0 0 22px;
    text-align:left;
}

.queue-brand img{
    width:52px;
    height:52px;
    object-fit:contain;
    flex-shrink:0;
}

.queue-brand h1{
    margin:0;
    font-size:28px;
    line-height:1.15;
    font-weight:800;
}

.queue-brand p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:13px;
}

.queue-intro{
    margin:0 0 22px;
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
    text-align:center;
}

.queue-features{
    margin:0 0 24px;
    padding:0;
    list-style:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.queue-features li{
    padding:16px 16px 14px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
}

.queue-features strong{
    display:block;
    margin-bottom:6px;
    color:var(--accent);
    font-size:13px;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.queue-features span{
    display:block;
    color:var(--text);
    font-size:14px;
    line-height:1.55;
}

.queue-guide{
    margin:0 0 16px;
    padding:14px 16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--muted);
    font-size:15px;
    line-height:1.65;
    text-align:center;
}

.queue-guide-link{
    color:var(--accent);
    font-weight:700;
    text-decoration:none;
}

.queue-guide-link:hover{
    text-decoration:underline;
}

.queue-note{
    margin:0 0 18px;
    color:var(--muted);
    font-size:13px;
    line-height:1.65;
    text-align:center;
}

.queue-free-notice{
    margin:0;
    color:var(--success);
    font-weight:700;
    font-size:15px;
    text-align:center;
}

.queue-enter-wrap{
    margin-top:26px;
    padding-top:22px;
    border-top:1px solid var(--border);
    text-align:center;
}

.queue-enter-wrap form{
    position:relative;
    min-height:76px;
}

.queue-enter-wrap form::before{
    content:"";
    position:absolute;
    left:50%;
    top:16px;
    transform:translateX(-50%);
    width:220px;
    height:6px;
    border-radius:10px;
    background:
        linear-gradient(var(--accent),var(--accent)) no-repeat,
        var(--border);
    background-size:0% 100%,100% 100%;
    animation:
        queue-loading-fill 6s linear forwards,
        queue-loading-hide 0s 6s forwards;
}

.queue-enter-wrap form::after{
    content:"Please wait…";
    position:absolute;
    left:50%;
    top:34px;
    transform:translateX(-50%);
    color:var(--muted);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    animation:queue-loading-hide 0s 6s forwards;
}

.queue-enter-button{
    position:relative;
    margin-top:16px;
    padding:14px 32px;
    border:0;
    border-radius:10px;
    background:var(--accent);
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    animation:queue-button-show 0s 6s forwards;
}

.queue-enter-button:hover{
    filter:brightness(1.08);
}

@keyframes queue-loading-fill{
    from{ background-size:0% 100%,100% 100%; }
    to{ background-size:100% 100%,100% 100%; }
}

@keyframes queue-loading-hide{
    to{
        opacity:0;
        visibility:hidden;
    }
}

@keyframes queue-button-show{
    to{
        opacity:1;
        pointer-events:auto;
    }
}

@media(max-width:700px){
    .queue-shell{
        padding:26px 18px 22px;
    }

    .queue-brand h1{
        font-size:22px;
    }

    .queue-features{
        grid-template-columns:1fr;
    }

    .queue-intro,
    .queue-guide{
        font-size:14px;
    }
}

html[dir="rtl"] .queue-brand{
    text-align:right;
}