/* RewindMedia — shared app theme (everything except the standalone landing) */
/* Pulls the same VHS palette + fonts as landing.css but tuned for app pages
   (forms, tables, dashboards). Kept separate from landing.css so a content
   change to one doesn't risk visual regressions on the other. */

:root {
    --cream:        #FFF1D6;
    --paper:        #FFF1D6;
    --ink:          #FFF1D6;
    --ink-dark:     #15093D;
    --orange:       #FF5E3A;
    --walnut:       #2D1B5C;
    --walnut-deep:  #0E0838;
    --card:         #1A1145;
    --magenta:      #FF2E93;
    --cyan:         #2EE6E0;
    --lime:         #A6FF2A;
    --amber:        #FFD23F;
    --grain-opacity: 0.06;
}

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

html, body {
    background: var(--walnut-deep);
    color: var(--cream);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5 {
    font-family: 'Anton', 'Oswald', Impact, sans-serif;
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.1;
    color: var(--cream);
    text-transform: uppercase;
}
.serif {
    font-family: 'Playfair Display', Georgia, serif !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
}
.hand { font-family: 'Permanent Marker', cursive; }
.mono { font-family: 'VT323', ui-monospace, monospace; letter-spacing: 0.04em; }

.rgb-split {
    position: relative; display: inline-block;
    text-shadow:
        -2px 0 0 rgba(255,46,147,0.85),
        2px 0 0 rgba(46,230,224,0.85);
}

.grain { position: relative; isolation: isolate; }
.grain::after {
    content: ""; position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    opacity: var(--grain-opacity);
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.scanlines { position: relative; }
.scanlines::before {
    content: ""; position: absolute; inset: 0;
    pointer-events: none; z-index: 2;
    background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
    opacity: 0.55;
}

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ───────── Top tape-counter ───────── */
.counter-bar {
    position: fixed; top: 0; left: 0; right: 0;
    background: #000; color: var(--cyan);
    z-index: 60;
    font-family: 'VT323', monospace;
    font-size: 15px;
    letter-spacing: 0.08em;
    padding: 5px 18px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--magenta);
}
.counter-bar .left, .counter-bar .right { display: flex; align-items: center; gap: 14px; }
.counter-bar .rec { display: inline-flex; align-items: center; gap: 6px; color: var(--magenta); }
.counter-bar .rec::before { content: "●"; animation: blink 1.4s infinite step-end; }
.counter-bar .play { color: var(--lime); }
@keyframes blink { 50% { opacity: 0.2; } }

/* ───────── Nav ───────── */
.nav {
    position: fixed; top: 30px; left: 0; right: 0;
    z-index: 50; padding: 12px 0;
    background: rgba(14,8,56,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,46,147,0.2);
}
.nav .row { display: flex; align-items: center; justify-content: space-between; gap: 28px; }

.brand {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Anton', Impact, sans-serif;
    font-size: 22px; letter-spacing: 0.03em;
    color: var(--cream); text-transform: uppercase;
}
.brand img { height: 40px; width: auto; filter: drop-shadow(0 0 12px rgba(255,46,147,0.4)); }
.brand-dot { color: var(--cyan); font-size: 16px; letter-spacing: 0.04em; margin-left: 2px; }

.nav-links { display: flex; align-items: center; gap: 22px; font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; }
.nav-links a { color: var(--cream); padding: 6px 0; transition: color 200ms ease; opacity: 0.85; }
.nav-links a:hover, .nav-links a.active { color: var(--cyan); opacity: 1; }

/* User dropdown */
.user-menu { position: relative; }
.user-menu summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 4px;
    transition: background 200ms ease;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { background: rgba(255,46,147,0.10); }
.user-menu .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--magenta), var(--orange));
    display: flex; align-items: center; justify-content: center;
    font-family: 'Anton', Impact, sans-serif; font-size: 16px;
    color: var(--ink-dark); border: 1px solid var(--cyan);
}
.user-menu .uname { font-family: 'Source Serif 4', serif; font-size: 14px; color: var(--cream); }
.user-menu .caret { color: var(--cyan); font-size: 11px; opacity: 0.7; }
.user-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 240px;
    background: var(--card); border: 1px solid var(--magenta);
    border-radius: 6px; padding: 8px;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.6);
}
.user-dropdown .header { padding: 10px 12px; border-bottom: 1px dashed rgba(46,230,224,0.3); margin-bottom: 6px; }
.user-dropdown .header .name { font-family: 'Anton', Impact, sans-serif; font-size: 15px; letter-spacing: 0.04em; color: var(--cream); text-transform: uppercase; }
.user-dropdown .header .email { font-family: 'VT323', monospace; font-size: 14px; color: var(--cyan); margin-top: 2px; word-break: break-all; }
.user-dropdown a, .user-dropdown button {
    display: block; width: 100%; text-align: left;
    background: transparent; border: none;
    padding: 9px 12px; border-radius: 4px;
    font-family: 'Source Serif 4', serif; font-size: 14.5px;
    color: var(--cream);
    transition: background 200ms ease, color 200ms ease;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: rgba(46,230,224,0.10); color: var(--cyan); }
.user-dropdown .divider { height: 1px; background: rgba(46,230,224,0.18); margin: 6px 0; }
.user-dropdown .danger:hover { color: var(--magenta); background: rgba(255,46,147,0.10); }

/* ───────── Buttons ───────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: 'Anton', Impact, sans-serif;
    font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 12px 22px; border-radius: 4px; border: none;
    cursor: pointer; white-space: nowrap;
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn-amber { background: var(--amber); color: var(--ink-dark); box-shadow: 0 4px 0 var(--magenta); }
.btn-amber:hover:not([disabled]) { background: #FFDC5E; transform: translateY(-2px); box-shadow: 0 6px 0 var(--magenta); }
.btn-orange { background: var(--magenta); color: var(--cream); box-shadow: 0 4px 0 #7a1448; }
.btn-orange:hover:not([disabled]) { background: #ff4ba6; transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--cyan); border: 2px solid var(--cyan); }
.btn-outline:hover:not([disabled]) { background: rgba(46,230,224,0.12); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--cream); border: 1px solid rgba(255,241,214,0.25); }
.btn-ghost:hover:not([disabled]) { background: rgba(255,241,214,0.06); border-color: var(--cyan); color: var(--cyan); }
/* Solid navy — pixel-identical to landing.css's .btn-navy so the Sign
   in button looks the same on the marketing page and on every authed
   shell that extends base.html. The soft glow in the second shadow is
   the bit that was missing in earlier revs. */
.btn-navy {
    background: #1E3A8A; color: var(--cream);
    box-shadow: 0 4px 0 var(--magenta), 0 0 24px -6px rgba(30,58,138,0.55);
}
.btn-navy:hover:not([disabled]) {
    background: #2B4FB0; transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--magenta), 0 0 32px -4px rgba(30,58,138,0.7);
}
.btn-danger { background: transparent; color: var(--magenta); border: 1px solid rgba(255,46,147,0.5); }
.btn-danger:hover:not([disabled]) { background: rgba(255,46,147,0.12); }
.btn-lg { font-size: 16px; padding: 15px 28px; }
.btn-sm { font-size: 12px; padding: 8px 14px; }
.btn .play-icon { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.btn .rec-icon { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

/* ───────── App page wrapper ───────── */
.app-page { padding: 110px 0 60px; min-height: 100vh; position: relative; }
.app-page::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(255,46,147,0.10), transparent 50%),
        radial-gradient(ellipse at 90% 80%, rgba(46,230,224,0.08), transparent 50%);
    pointer-events: none;
}

/* Page heading */
.page-head { margin-bottom: 32px; }
.page-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'VT323', monospace; font-size: 14px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--cyan); margin-bottom: 14px; padding: 4px 10px;
    border: 1px solid var(--cyan); border-radius: 2px;
    background: rgba(46,230,224,0.08);
}
.page-eyebrow .dot { width: 6px; height: 6px; background: var(--magenta); border-radius: 50%; box-shadow: 0 0 8px var(--magenta); }
.page-head h1 { font-size: clamp(32px, 4.5vw, 48px); }
.page-head p { font-family: 'Source Serif 4', serif; font-size: 17px; color: rgba(255,241,214,0.78); margin-top: 6px; }

/* ───────── Cards ───────── */
.vhs-card {
    background: linear-gradient(180deg, var(--card) 0%, var(--walnut-deep) 100%);
    border: 1px solid rgba(255,46,147,0.4);
    border-radius: 6px; padding: 26px;
    position: relative; overflow: hidden;
}
.vhs-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--magenta), var(--amber), var(--cyan));
}

/* ───────── Forms ───────── */
.form-row { margin-bottom: 18px; }
.form-row label, label.form-label {
    display: block; margin-bottom: 6px;
    font-family: 'VT323', monospace; font-size: 16px;
    color: var(--cyan); letter-spacing: 0.08em; text-transform: uppercase;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="search"],
.form-row input[type="number"],
.form-row textarea,
.form-row select,
input.field, textarea.field, select.field {
    width: 100%;
    background: rgba(255,241,214,0.04);
    border: 1px solid rgba(46,230,224,0.30);
    border-radius: 4px;
    padding: 11px 14px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 16px;
    color: var(--cream);
    transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus,
input.field:focus, textarea.field:focus, select.field:focus {
    outline: none;
    border-color: var(--cyan);
    background: rgba(46,230,224,0.05);
    box-shadow: 0 0 0 3px rgba(46,230,224,0.18);
}
.form-row textarea { resize: vertical; min-height: 84px; }
.form-row .help, .field-help {
    font-family: 'Source Serif 4', serif;
    font-size: 13px;
    color: rgba(255,241,214,0.55);
    margin-top: 6px;
    line-height: 1.5;
}
.form-row .errors, .field-errors {
    font-family: 'VT323', monospace; font-size: 14px;
    color: var(--magenta); margin-top: 6px;
    letter-spacing: 0.04em;
}

/* ───────── Toast notifications ───────── */
#rm-toasts {
    position: fixed; top: 96px; right: 24px; z-index: 70;
    display: flex; flex-direction: column; gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: var(--card);
    border: 1px solid var(--magenta);
    border-left-width: 4px;
    border-radius: 4px; padding: 14px 16px;
    box-shadow: 0 12px 40px -8px rgba(0,0,0,0.6);
    display: flex; align-items: flex-start; gap: 12px;
    font-family: 'Source Serif 4', serif; font-size: 15px;
    color: var(--cream);
    animation: toast-in 250ms ease-out;
}
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } }
.toast.success { border-left-color: var(--lime); }
.toast.error   { border-left-color: var(--magenta); }
.toast.warning { border-left-color: var(--amber); }
.toast.info    { border-left-color: var(--cyan); }
.toast-tag {
    flex-shrink: 0;
    font-family: 'VT323', monospace; font-size: 12px;
    letter-spacing: 0.10em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 2px;
    background: rgba(255,255,255,0.06);
}
.toast.success .toast-tag { color: var(--lime); }
.toast.error   .toast-tag { color: var(--magenta); }
.toast.warning .toast-tag { color: var(--amber); }
.toast.info    .toast-tag { color: var(--cyan); }
.toast button.close {
    background: transparent; border: none; color: rgba(255,241,214,0.5);
    font-size: 18px; line-height: 1; padding: 0; margin-left: auto; align-self: flex-start;
    transition: color 200ms ease;
}
.toast button.close:hover { color: var(--cream); }

/* ───────── Footer ───────── */
.app-footer {
    background: #000; color: rgba(255,241,214,0.5);
    padding: 30px 0; margin-top: 60px;
    border-top: 2px solid rgba(255,46,147,0.4);
    font-family: 'VT323', monospace;
    font-size: 14px; letter-spacing: 0.08em;
    text-align: center;
}
.app-footer .end-of-tape { color: var(--magenta); margin-bottom: 8px; }

/* ───────── Status pills ───────── */
.status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 999px;
    font-family: 'VT323', monospace; font-size: 12px;
    letter-spacing: 0.10em; text-transform: uppercase;
    border: 1px solid currentColor;
    background: rgba(255,255,255,0.03);
}
.status-pill.ready   { color: var(--lime); }
.status-pill.pending { color: var(--amber); }
.status-pill.failed  { color: var(--magenta); }
.status-pill::before {
    content: "●"; font-size: 10px; line-height: 1;
}

/* ───────── Responsive ───────── */
.nav-toggle {
    display: none;
    background: none; border: none; cursor: pointer;
    padding: 8px; flex-direction: column; gap: 5px;
}
.nav-toggle span {
    display: block; width: 24px; height: 2px;
    background: var(--cream); border-radius: 2px;
    transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
    .container { padding: 0 20px; }
    .nav-toggle { display: inline-flex; }
    .nav-links {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #0E0838; border-bottom: 1px solid rgba(46,230,224,0.25);
        padding: 8px 20px 14px; box-shadow: 0 12px 24px rgba(0,0,0,0.45);
        z-index: 40;
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 12px 0; font-size: 15px; border-bottom: 1px dashed rgba(46,230,224,0.12); }
    .nav-links a:last-of-type { border-bottom: none; }
    .nav-links .btn { display: inline-flex; margin-top: 10px; justify-content: center; }
    .nav-links .user-menu { padding: 10px 0 0; }
    .counter-bar { font-size: 13px; padding: 4px 12px; }
    .counter-bar .left, .counter-bar .right { gap: 8px; }
    .counter-bar .left span:nth-child(2),
    .counter-bar .left span:nth-child(3),
    .counter-bar .right span:first-child { display: none; }
    .nav { top: 26px; }
    .app-page { padding: 100px 0 40px; }
    .page-head h1 { font-size: 28px; }
    #rm-toasts { right: 16px; left: 16px; width: auto; }
}