<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', config('app.name'))</title>

    <link rel="icon" type="image/png" href="{{ asset('storage/images/logo.png') }}">
    <link rel="apple-touch-icon" href="{{ asset('storage/images/logo.png') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

    <style>
        :root {
            --brand-red: #e61e1e;
            --bg-dark: #0f0f0f;
            --bg-secondary: #1a1a1a;
            --bg-card: #1e1e1e;
            --border-color: #2e2e2e;
            --text-primary: #f1f1f1;
            --text-secondary: #888;
        }

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

        body {
            background: var(--bg-dark);
            color: var(--text-primary);
            font-family: "Inter", "Roboto", "Arial", sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 16px;
        }

        /* Subtle radial glow behind card */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(230,30,30,.07) 0%, transparent 70%);
            pointer-events: none;
        }

        /* ── Auth card ─────────────────────────────────────────────────── */
        .auth-wrap {
            width: 100%;
            max-width: 400px;
            position: relative;
        }

        .auth-logo {
            text-align: center;
            margin-bottom: 32px;
        }
        .auth-logo a {
            display: inline-block;
            text-decoration: none;
        }
        .auth-logo img { height: 36px; }

        .auth-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 36px 32px;
            box-shadow: 0 24px 64px rgba(0,0,0,.5);
        }

        .auth-title {
            font-size: 22px;
            font-weight: 700;
            letter-spacing: -.3px;
            margin-bottom: 6px;
            text-align: center;
        }
        .auth-subtitle {
            font-size: 14px;
            color: var(--text-secondary);
            text-align: center;
            margin-bottom: 28px;
        }

        /* ── Form elements ─────────────────────────────────────────────── */
        .form-group { margin-bottom: 16px; }

        .form-label {
            display: block;
            margin-bottom: 7px;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
        }

        .form-input {
            width: 100%;
            background: #121212;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 11px 14px;
            color: var(--text-primary);
            font-size: 14px;
            font-family: inherit;
            transition: border-color .2s;
            outline: none;
        }
        .form-input:focus { border-color: var(--brand-red); }
        .form-input::placeholder { color: var(--text-secondary); }

        .form-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-secondary);
            user-select: none;
        }
        .form-checkbox input[type="checkbox"] {
            width: 16px; height: 16px;
            cursor: pointer;
            accent-color: var(--brand-red);
            flex-shrink: 0;
        }

        /* ── Primary button ────────────────────────────────────────────── */
        .btn-primary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            background: var(--brand-red);
            color: #fff;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background .2s;
            margin-top: 8px;
        }
        .btn-primary:hover { background: #c91a1a; }

        /* ── Error ─────────────────────────────────────────────────────── */
        .auth-error {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            background: rgba(230,30,30,.1);
            border: 1px solid rgba(230,30,30,.35);
            color: #f87171;
            padding: 12px 14px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 13px;
            line-height: 1.5;
        }
        .auth-error i { flex-shrink: 0; margin-top: 1px; }

        /* ── Footer link ───────────────────────────────────────────────── */
        .auth-footer {
            text-align: center;
            margin-top: 24px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        .auth-footer a { color: var(--brand-red); text-decoration: none; font-weight: 500; }
        .auth-footer a:hover { text-decoration: underline; }

        @media (max-width: 480px) {
            .auth-card { padding: 28px 20px; border-radius: 12px; }
        }
    </style>

    @yield('extra_styles')
</head>
<body>
    <div class="auth-wrap">
        <div class="auth-logo">
            <a href="{{ route('videos.index') }}">
                <img src="{{ asset('storage/images/fullLogo.png') }}" alt="{{ config('app.name') }}">
            </a>
        </div>

        @yield('content')

        <div class="auth-footer">@yield('footer_link')</div>
    </div>

    @yield('scripts')
</body>
</html>
