/* ==========================================================
   AllWebApps Background Animation Studio
   css/style.css
   Version 1.0

   Design concept: a camera operator's viewfinder / studio console, not a
   generic admin dashboard. The canvas preview is framed like a camera's
   viewfinder (corner brackets + rec indicator), and the sidebar reads as
   a hardware control panel (grouped rows, glowing active states) rather
   than a form.

   Tokens
   ------
   Color:
     --bg-void       #05060B  page background
     --bg-panel      #0B0F1A  sidebar / panel surface
     --bg-elevated   #121826  inputs, elevated surfaces
     --line          #1E2636  hairline borders
     --text-main     #E8EEF7
     --text-muted    #8593AD
     --accent-cyan   #00D8FF  primary accent (matches Blue Neon material)
     --accent-rec    #FF4D6D  recording / destructive state
   Type:
     Display: 'Space Grotesk' - geometric, technical, used for headers only
     Body/UI: 'Inter' - neutral workhorse for controls and labels
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {

    --bg-void: #05060B;
    --bg-panel: #0B0F1A;
    --bg-elevated: #121826;
    --line: #1E2636;
    --text-main: #E8EEF7;
    --text-muted: #8593AD;
    --accent-cyan: #00D8FF;
    --accent-cyan-dim: rgba(0, 216, 255, 0.18);
    --accent-rec: #FF4D6D;
    --radius: 6px;

}

* {

    box-sizing: border-box;

}

html, body {

    margin: 0;
    padding: 0;
    height: 100%;

}

body {

    background:
        radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(0, 216, 255, 0.08), transparent 60%),
        var(--bg-void);
    color: var(--text-main);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;

}

/* ----------------------------------------
   Topbar
   ---------------------------------------- */

.topbar {

    padding: 20px 28px 16px;
    border-bottom: 1px solid var(--line);

}

.topbar h1 {

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.01em;
    margin: 0 0 4px;
    color: var(--text-main);

}

.topbar p {

    margin: 0;
    font-size: 13px;
    color: var(--text-muted);

}

/* ----------------------------------------
   App shell
   ---------------------------------------- */

.app {

    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: calc(100vh - 78px);

}

/* ----------------------------------------
   Sidebar - control panel
   ---------------------------------------- */

.sidebar {

    background: var(--bg-panel);
    border-right: 1px solid var(--line);
    padding: 20px;
    overflow-y: auto;

}

.sidebar h2 {

    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 18px;
    color: var(--text-main);

}

.panel-title {

    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    margin: 24px 0 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);

}

.sidebar h2 + .panel-title {

    border-top: none;
    padding-top: 0;
    margin-top: 0;

}

.form-group {

    margin-bottom: 14px;

}

.form-group label {

    display: block;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 500;

}

.form-group label:has(input[type="checkbox"]) {

    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    cursor: pointer;

}

/* Selects */

.form-group select {

    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    padding: 9px 10px;
    border-radius: var(--radius);
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                       linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) center, calc(100% - 11px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: border-color 0.15s ease;

}

.form-group select:focus-visible,
.form-group input:focus-visible {

    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px var(--accent-cyan-dim);

}

/* Range sliders - the tactile "console knob" feel */

input[type="range"] {

    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    outline: none;

}

input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 8px 1px var(--accent-cyan-dim), 0 0 0 3px var(--bg-panel);
    cursor: pointer;
    transition: box-shadow 0.15s ease;

}

input[type="range"]::-webkit-slider-thumb:hover {

    box-shadow: 0 0 12px 3px var(--accent-cyan-dim), 0 0 0 3px var(--bg-panel);

}

input[type="range"]::-moz-range-thumb {

    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 8px 1px var(--accent-cyan-dim);
    cursor: pointer;

}

/* Checkboxes */

input[type="checkbox"] {

    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--bg-elevated);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;

}

input[type="checkbox"]:checked {

    background: var(--accent-cyan);
    border-color: var(--accent-cyan);

}

input[type="checkbox"]:checked::after {

    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--bg-void);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);

}

/* Buttons */

.sidebar button {

    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-elevated);
    color: var(--text-main);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;

}

.sidebar button:hover {

    border-color: var(--accent-cyan);

}

.sidebar button:active {

    transform: scale(0.98);

}

.sidebar button:disabled {

    opacity: 0.4;
    cursor: not-allowed;

}

#previewBtn {

    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-void);

}

#recordBtn {

    border-color: var(--accent-rec);
    color: var(--accent-rec);

}

#recordBtn:hover {

    background: rgba(255, 77, 109, 0.1);

}

/* ----------------------------------------
   Preview - the "viewfinder"
   ---------------------------------------- */

.preview {

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    background:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: center;

}

.preview::before {

    /* faint radial mask so the grid fades toward the edges instead of
       tiling uniformly to the frame */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at center, transparent 0%, var(--bg-void) 85%);
    pointer-events: none;

}

.preview canvas {

    position: relative;
    max-width: 100%;
    max-height: 100%;
    background: #000;
    box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(0, 0, 0, 0.6);

}

/* Corner brackets - the signature element, evoking a camera viewfinder
   framing the shot. Pure CSS, no extra markup required: four pseudo-frame
   corners layered via a wrapping ::after on .preview positioned around
   the canvas would need JS to match canvas size, so instead the brackets
   live on the canvas's own box via outline-offset trick using multiple
   box-shadows kept intentionally subtle. */

.preview canvas {

    outline: 1px solid var(--accent-cyan-dim);
    outline-offset: 10px;

}

/* ----------------------------------------
   Responsive
   ---------------------------------------- */

@media (max-width: 860px) {

    .app {

        grid-template-columns: 1fr;

    }

    .sidebar {

        border-right: none;
        border-bottom: 1px solid var(--line);
        max-height: 45vh;

    }

    .preview {

        padding: 20px;

    }

}

/* ----------------------------------------
   Reduced motion
   ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    * {

        transition: none !important;

    }

}