/* style.css */
/* ── Variables ──────────────────────────────────────────────────── */
        :root {
            --bg:       #06080f;
            --bg2:      #0d111c;
            --bg3:      #141929;
            --bg4:      #1a2035;
            --border:   #202840;
            --accent:   #5eebc4;        /* teal-mint */
            --accent2:  #6c8ffa;        /* periwinkle */
            --accent3:  #f7c44a;        /* amber */
            --danger:   #ff6b6b;
            --text:     #dce5f5;
            --muted:    #5a6a8a;
            --mono:     'IBM Plex Mono', monospace;
            --sans:     'Outfit', sans-serif;
            --radius:   14px;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: var(--sans);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* ── Background effects ─────────────────────────────────────────── */
        .bg-grid {
            position: fixed; inset: 0; z-index: 0; pointer-events: none;
            background-image:
                linear-gradient(rgba(94,235,196,.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(94,235,196,.03) 1px, transparent 1px);
            background-size: 32px 32px;
        }
        .bg-glow {
            position: fixed; border-radius: 50%; filter: blur(120px);
            pointer-events: none; z-index: 0; opacity: .12;
        }
        .bg-glow-1 { width: 600px; height: 600px; background: var(--accent);  top:-200px; left:-150px; animation: pulse 12s ease-in-out infinite; }
        .bg-glow-2 { width: 500px; height: 500px; background: var(--accent2); bottom:-150px; right:-100px; animation: pulse 16s ease-in-out infinite reverse; }

        @keyframes pulse {
            0%,100% { transform: scale(1); opacity: .12; }
            50%      { transform: scale(1.1); opacity: .18; }
        }

        /* ── Layout ─────────────────────────────────────────────────────── */
        .wrapper {
            position: relative; z-index: 1;
            max-width: 960px; margin: 0 auto;
            padding: 3rem 1.5rem 6rem;
        }

        /* ── Header ─────────────────────────────────────────────────────── */
        header { text-align: center; margin-bottom: 3.5rem; animation: fadeDown .7s ease both; }
        .logo-badge {
            display: inline-flex; align-items: center; gap: .6rem;
            background: var(--bg3); border: 1px solid var(--border);
            border-radius: 999px; padding: .35rem 1rem;
            font-family: var(--mono); font-size: .75rem; color: var(--accent);
            letter-spacing: .5px; margin-bottom: 1.2rem;
        }
        .logo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 2s ease-in-out infinite; }
        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

        h1 {
            font-size: clamp(2rem, 5vw, 3.2rem);
            font-weight: 700;
            letter-spacing: -1.5px;
            line-height: 1.1;
        }
        h1 .omega {
            background: linear-gradient(135deg, var(--accent), var(--accent2));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .subtitle { color: var(--muted); margin-top: .8rem; font-size: 1rem; font-weight: 300; }

        /* ── Section cards ──────────────────────────────────────────────── */
        .section {
            background: var(--bg2);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
            margin-bottom: 1.5rem;
            animation: fadeUp .6s ease both;
        }
        .section:nth-child(2) { animation-delay: .05s; }
        .section:nth-child(3) { animation-delay: .10s; }
        .section:nth-child(4) { animation-delay: .15s; }

        .section-header {
            display: flex; align-items: center; gap: .8rem;
            padding: 1.1rem 1.5rem;
            background: var(--bg3);
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            user-select: none;
        }
        .section-header:hover { background: var(--bg4); }
        .section-num {
            width: 26px; height: 26px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), var(--accent2));
            color: #000;
            display: grid; place-items: center;
            font-family: var(--mono); font-size: .7rem; font-weight: 700;
            flex-shrink: 0;
        }
        .section-title { font-weight: 600; font-size: .95rem; flex: 1; }
        .section-badge {
            font-family: var(--mono); font-size: .72rem;
            background: var(--bg4); border: 1px solid var(--border);
            border-radius: 5px; padding: .15rem .55rem; color: var(--muted);
        }
        .chevron { transition: transform .3s; color: var(--muted); }
        .section.collapsed .chevron { transform: rotate(-90deg); }
        .section-body { padding: 1.5rem; }
        .section.collapsed .section-body { display: none; }

        /* ── Input mode tabs ────────────────────────────────────────────── */
        .mode-tabs {
            display: flex; gap: .4rem;
            background: var(--bg); border: 1px solid var(--border);
            border-radius: 10px; padding: .3rem;
            margin-bottom: 1.2rem;
        }
        .mode-tab {
            flex: 1; padding: .6rem .8rem;
            border: none; border-radius: 8px;
            font-family: var(--sans); font-size: .82rem; font-weight: 500;
            cursor: pointer; transition: all .2s;
            background: transparent; color: var(--muted);
            white-space: nowrap;
        }
        .mode-tab.active {
            background: linear-gradient(135deg, var(--accent), var(--accent2));
            color: #000; font-weight: 600;
        }
        .mode-tab:not(.active):hover { background: var(--bg3); color: var(--text); }

        /* ── Input panels ────────────────────────────────────────────────── */
        .input-panel { display: none; }
        .input-panel.active { display: block; }

        /* ── Form controls ──────────────────────────────────────────────── */
        label.field-label {
            display: block;
            font-size: .75rem; font-weight: 600; letter-spacing: .6px;
            text-transform: uppercase; color: var(--muted);
            margin-bottom: .45rem;
        }
        .field-hint {
            font-size: .78rem; color: var(--muted);
            margin-top: .35rem; line-height: 1.5;
        }
        .field-hint code {
            background: var(--bg4); border-radius: 4px;
            padding: .05rem .4rem; font-family: var(--mono); font-size: .75rem;
            color: var(--accent);
        }

        textarea, input[type="text"] {
            width: 100%;
            background: var(--bg);
            border: 1.5px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            font-size: .85rem;
            padding: .85rem 1rem;
            outline: none;
            transition: border-color .2s, box-shadow .2s;
        }
        textarea { font-family: var(--mono); font-size: .78rem; resize: vertical; line-height: 1.6; }
        textarea:focus, input[type="text"]:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(94,235,196,.1);
        }

        /* ── Upload zone ────────────────────────────────────────────────── */
        .upload-zone {
            border: 2px dashed var(--border);
            border-radius: 12px; padding: 2.5rem;
            text-align: center; cursor: pointer;
            transition: all .2s; position: relative;
        }
        .upload-zone:hover, .upload-zone.drag-over {
            border-color: var(--accent);
            background: rgba(94,235,196,.03);
        }
        .upload-zone input[type="file"] {
            position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
        }
        .upload-icon { font-size: 2.8rem; margin-bottom: .6rem; }
        .upload-text { font-size: .88rem; color: var(--muted); }
        .upload-text strong { color: var(--accent); font-family: var(--mono); }
        .upload-filename {
            display: none; margin-top: .7rem; font-family: var(--mono);
            font-size: .78rem; color: var(--accent);
        }

        /* ── Options grid ───────────────────────────────────────────────── */
        .options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }
        .opt-group { display: flex; flex-direction: column; gap: .45rem; }

        select {
            background: var(--bg);
            border: 1.5px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            font-size: .85rem;
            font-family: var(--sans);
            padding: .75rem 1rem;
            outline: none;
            cursor: pointer;
            transition: border-color .2s;
            width: 100%;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a8a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right .9rem center;
            padding-right: 2.2rem;
        }
        select:focus { border-color: var(--accent); }

        .toggle-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: .75rem 1rem;
            background: var(--bg); border: 1.5px solid var(--border);
            border-radius: 10px;
        }
        .toggle-label { font-size: .85rem; }
        .toggle-switch { position: relative; width: 40px; height: 22px; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .toggle-slider {
            position: absolute; inset: 0; background: var(--bg3);
            border: 1px solid var(--border); border-radius: 999px;
            cursor: pointer; transition: all .25s;
        }
        .toggle-slider::before {
            content: ''; position: absolute;
            left: 3px; top: 50%; transform: translateY(-50%);
            width: 14px; height: 14px; border-radius: 50%;
            background: var(--muted); transition: all .25s;
        }
        .toggle-switch input:checked + .toggle-slider { background: rgba(94,235,196,.2); border-color: var(--accent); }
        .toggle-switch input:checked + .toggle-slider::before { left: 21px; background: var(--accent); }

        /* ── Advanced options ────────────────────────────────────────────── */
        .advanced-toggle {
            display: flex; align-items: center; gap: .5rem;
            font-size: .82rem; color: var(--muted);
            cursor: pointer; margin-top: 1rem;
            transition: color .2s;
        }
        .advanced-toggle:hover { color: var(--text); }
        .advanced-body { display: none; margin-top: 1rem; }
        .advanced-body.open { display: block; }

        /* ── Submit ─────────────────────────────────────────────────────── */
        .submit-btn {
            width: 100%; padding: 1.1rem;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
            border: none; border-radius: 12px;
            font-family: var(--mono); font-size: 1rem; font-weight: 600;
            letter-spacing: .3px; color: #000;
            cursor: pointer; transition: all .25s;
            margin-top: 1.5rem;
            position: relative; overflow: hidden;
        }
        .submit-btn::before {
            content: ''; position: absolute; inset: 0;
            background: rgba(255,255,255,0); transition: background .2s;
        }
        .submit-btn:hover::before { background: rgba(255,255,255,.12); }
        .submit-btn:active { transform: scale(.99); }

        /* ── Footer note ────────────────────────────────────────────────── */
        .footnote {
            text-align: center; color: var(--muted); font-size: .78rem;
            margin-top: 2rem;
        }
        .footnote a { color: var(--accent); text-decoration: none; }
        .footnote a:hover { text-decoration: underline; }

        /* ── Animations ─────────────────────────────────────────────────── */
        @keyframes fadeDown {
            from { opacity: 0; transform: translateY(-24px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ── Responsive ─────────────────────────────────────────────────── */
        @media (max-width: 600px) {
            .wrapper { padding: 2rem 1rem 4rem; }
            .mode-tabs { flex-wrap: wrap; }
        }