:root {
    --wcscg-bg-1: #f7f4ef;
    --wcscg-bg-2: #fffaf6;
    --wcscg-text: #4b4958;
    --wcscg-heading: #2f2f3f;
    --wcscg-muted: #6f7083;
    --wcscg-card: rgba(255, 255, 255, 0.82);
    --wcscg-card-border: rgba(170, 164, 189, 0.22);
    --wcscg-shadow: 0 24px 80px rgba(145, 135, 169, 0.18);
    --wcscg-accent: linear-gradient(135deg, #a8d8ff 0%, #c9b7ff 52%, #ffc7df 100%);
    --wcscg-accent-soft: rgba(236, 230, 255, 0.72);
    --wcscg-input-bg: rgba(249, 246, 255, 0.96);
    --wcscg-input-border: rgba(186, 177, 209, 0.36);
    --wcscg-error-bg: #fff0f3;
    --wcscg-error-border: #f5c4cf;
    --wcscg-error-text: #b44d68;
}

html,
body.wcscg-gate-active {
    min-height: 100%;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(168, 216, 255, 0.45), transparent 28%),
        radial-gradient(circle at right bottom, rgba(255, 199, 223, 0.45), transparent 30%),
        linear-gradient(180deg, var(--wcscg-bg-1) 0%, var(--wcscg-bg-2) 100%);
    color: var(--wcscg-text);
}

body.wcscg-gate-active * {
    box-sizing: border-box;
}

.wcscg-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.wcscg-bg-shape {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(10px);
    opacity: 0.9;
}

.wcscg-bg-shape--1 {
    width: 38vw;
    height: 38vw;
    min-width: 220px;
    min-height: 220px;
    left: -10vw;
    top: -8vw;
    background: rgba(168, 216, 255, 0.34);
}

.wcscg-bg-shape--2 {
    width: 34vw;
    height: 34vw;
    min-width: 220px;
    min-height: 220px;
    right: -8vw;
    bottom: -8vw;
    background: rgba(255, 199, 223, 0.34);
}

.wcscg-card {
    position: relative;
    z-index: 2;
    width: min(100%, 620px);
    border-radius: 30px;
    border: 1px solid var(--wcscg-card-border);
    background: var(--wcscg-card);
    box-shadow: var(--wcscg-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 34px 34px 28px;
}

.wcscg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--wcscg-accent-soft);
    border: 1px solid rgba(186, 177, 209, 0.28);
    color: #675f86;
    font-size: 12px;
    letter-spacing: 0.12em;
}

.wcscg-card h1 {
    margin: 18px 0 12px;
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.28;
    letter-spacing: -0.03em;
    color: var(--wcscg-heading);
}

.wcscg-copy {
    margin: 0 0 20px;
    color: var(--wcscg-muted);
    font-size: 16px;
    line-height: 1.9;
}

.wcscg-error {
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: 16px;
    background: var(--wcscg-error-bg);
    border: 1px solid var(--wcscg-error-border);
    color: var(--wcscg-error-text);
    font-size: 14px;
    line-height: 1.7;
}

.wcscg-form {
    display: grid;
    gap: 14px;
}

.wcscg-label {
    font-size: 14px;
    font-weight: 700;
    color: #5d5f73;
}

.wcscg-input-wrap {
    display: block;
    padding: 0;
    border-radius: 18px;
    border: 1px solid var(--wcscg-input-border);
    background: var(--wcscg-input-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.wcscg-input {
    appearance: none;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--wcscg-heading);
    font-size: 16px;
    line-height: 1.5;
    padding: 18px 18px;
}

.wcscg-input::placeholder {
    color: #9a98aa;
}

.wcscg-input:focus {
    box-shadow: 0 0 0 4px rgba(201, 183, 255, 0.16);
    border-radius: 18px;
}

.wcscg-submit {
    appearance: none;
    border: 0;
    cursor: pointer;
    min-height: 58px;
    padding: 0 18px;
    border-radius: 18px;
    background: var(--wcscg-accent);
    color: #2e2d42;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.01em;
    box-shadow: 0 16px 34px rgba(186, 177, 209, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.wcscg-submit:hover,
.wcscg-submit:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(186, 177, 209, 0.3);
    opacity: 0.98;
}

.wcscg-note {
    margin: 16px 0 0;
    color: #8b889b;
    font-size: 13px;
    line-height: 1.8;
}

@media (max-width: 640px) {
    .wcscg-shell {
        padding: 16px;
    }

    .wcscg-card {
        padding: 24px 18px 22px;
        border-radius: 24px;
    }

    .wcscg-card h1 {
        margin-top: 16px;
        font-size: 30px;
        line-height: 1.36;
    }

    .wcscg-copy {
        font-size: 15px;
    }

    .wcscg-input {
        padding: 16px;
    }
}