/* ----- Base + Theme (Girlypop pastel + intentional chaos) ----- */
:root {
    --bg1: linear-gradient(135deg, #fff0f6 0%, #fff8f0 50%, #f0fff4 100%);
    --accent: #ff8ab1;
    --mint: #bff5d0;
    --lav: #e9d7ff;
    --gold: #ffd66b;
    --char: #374151;
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: "Poppins", system-ui, sans-serif;
    background: var(--bg1);
    color: var(--char);
}

.container {
    max-width: 1100px;
    margin: 32px auto;
    padding: 28px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(24, 24, 24, 0.08);
    position: relative;
    overflow: hidden
}

h1 {
    font-size: 36px;
    margin: 0 0 8px;
    letter-spacing: 1px
}

.subtitle {
    color: #6b7280;
    margin-bottom: 18px
}

/* glitter / sparkle overlay (subtle jitter) */
.glitter {
    position: absolute;
    left: -20px;
    top: -20px;
    width: 200%;
    height: 200%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px);
    opacity: 0.06;
    transform: rotate(12deg);
    pointer-events: none;
    animation: jitter 6s infinite
}

@keyframes jitter {
    0% {
        transform: translate(0, 0) rotate(12deg)
    }

    50% {
        transform: translate(6px, -4px) rotate(11deg)
    }

    100% {
        transform: translate(0, 0) rotate(12deg)
    }
}

.layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 24px;
    align-items: start
}

.hero {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
    padding: 20px;
    border-radius: 12px;
    border: 2px dashed rgba(255, 138, 177, 0.25)
}

.hero-ill {
    height: 220px;
    background: conic-gradient(from 200deg at 50% 50%, #ffd6e6, #fff0f6, #f0fff4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #7f1d4f
}

.hero p {
    margin: 12px 0 0
}

/* Form area */
.form-wrap {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(250, 250, 255, 0.95));
    padding: 20px;
    border-radius: 14px;
    position: relative
}

form {
    display: flex;
    flex-direction: column;
    gap: 12px
}

label {
    font-size: 13px;
    font-weight: 600
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
    padding: 12px;
    border-radius: 10px;
    border: 2px solid #f3f4f6;
    outline: none;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.6)
}

input:focus,
select:focus {
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.06);
    border-color: var(--accent)
}

.row {
    display: flex;
    gap: 10px
}

.small {
    flex: 1
}

.note {
    font-size: 12px;
    color: #9ca3af
}

/* intentional extra fonts / chaos */
.title-chaos {
    font-family: "Comic Sans MS", "Brush Script MT", serif;
    font-size: 28px;
    color: var(--accent);
    text-shadow: 1px 1px 0 #fff
}

.title-huge {
    font-size: 44px;
    color: #6b1a5a;
    font-family: "Georgia", serif
}

/* moving submit */
#submitBtn {
    padding: 14px 18px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(90deg, var(--accent), #ffa4c9);
    font-weight: 700;
    cursor: pointer;
    position: relative;
    transition: transform .12s
}

#submitBtn.catchable {
    cursor: grab
}

/* tiny terms */
.terms {
    font-size: 0.3px;
    line-height: 1;
    color: #111;
    opacity: 0.9
}

/* tooltips (insulting) */
.tooltip {
    position: relative;
    display: inline-block
}

.tooltip .tiptext {
    visibility: hidden;
    width: 160px;
    background: #111;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 6px 8px;
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity .2s
}

.tooltip:hover .tiptext {
    visibility: visible;
    opacity: 1
}

/* confetti */
.confetti {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.confetti i {
    position: absolute;
    width: 10px;
    height: 6px;
    border-radius: 2px;
    opacity: 0;
    animation: confetti 3s linear infinite
}

@keyframes confetti {
    0% {
        transform: translateY(-50vh) rotate(0);
        opacity: 1
    }

    100% {
        transform: translateY(120vh) rotate(720deg);
        opacity: 0
    }
}

/* floating pop-up */
.popup {
    position: fixed;
    right: 18px;
    bottom: 18px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    width: 260px
}

.chat-bubble {
    position: fixed;
    left: 18px;
    bottom: 18px;
    background: #ffeff6;
    border-radius: 999px;
    padding: 12px 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    font-weight: 700
}

/* small insulting toasts */
.toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    background: #111;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    opacity: 0;
    transition: opacity .2s;
    z-index: 50
}

.toast.show {
    opacity: 1
}

/* mobile worse */
@media (max-width:900px) {
    .layout {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .hero-ill {
        height: 160px
    }

    .container {
        margin: 8px;
        padding: 12px
    }
}

/* intentionally clashing fonts on headings */
.clash1 {
    font-family: 'Courier New', monospace;
    color: #4b1d3f
}

.clash2 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    color: #0f172a
}