<?php
declare(strict_types=1);

namespace PpPhp\Core\Designer\Auth;

final class DesignerAuthRenderer
{
    public function render(array $page): string
    {
        $props = (array) (($page['components'][0] ?? [])['props'] ?? []);
        if (!isset($props['template'])) {
            return $this->renderLegacy($props);
        }
        $isLogin = (string) ($props['pageType'] ?? 'login') === 'login';
        $template = preg_replace('/[^a-z0-9_-]/', '', strtolower((string) ($props['template'] ?? 'aurora'))) ?: 'aurora';
        $accent = $this->color((string) ($props['accentColor'] ?? '#6d5dfc'), '#6d5dfc');
        $html = ['<style>' . self::templateStyles() . '</style>'];
        $html[] = '<section class="ppd-auth-page is-' . $this->e($template) . '" style="--auth-accent:var(--pp-primary,' . $accent . ')" data-auth-page="' . $this->e((string) ($props['pageType'] ?? 'login')) . '">';
        $html[] = '<aside class="ppd-auth-showcase">' . $this->brand($props) .
            '<div><small>' . $this->e((string) ($props['showcaseEyebrow'] ?? '')) . '</small><h1>' .
            $this->e((string) ($props['showcaseTitle'] ?? '')) . '</h1><p>' .
            $this->e((string) ($props['showcaseText'] ?? '')) . '</p></div>';
        if (($props['testimonial'] ?? '') !== '') {
            $author = trim((string) ($props['quoteAuthor'] ?? ''));
            $footer = $author !== '' ? '<footer>' . $this->e($author) . '</footer>' : '';
            $html[] = '<blockquote>“' . $this->e((string) $props['testimonial']) . '”' . $footer . '</blockquote>';
        }
        $html[] = '</aside><main class="ppd-auth-card-zone"><form class="ppd-auth-form">' . $this->brand($props) .
            '<h2>' . $this->e((string) ($props['title'] ?? 'Sign in')) . '</h2><p class="ppd-auth-subtitle">' .
            $this->e((string) ($props['subtitle'] ?? '')) . '</p>';

        $social = $isLogin ? $this->social($props) : '';
        if ($isLogin && ($props['socialPosition'] ?? 'after') === 'before') {
            $html[] = $social;
        }

        foreach ((array) ($props['fields'] ?? []) as $field) {
            $type = (string) ($field['type'] ?? 'text');
            if ($type === 'display') {
                $html[] = '<div class="ppd-auth-display"><span>' . $this->e((string) ($field['label'] ?? 'Field')) . '</span><strong>{{ ' . $this->e((string) ($field['name'] ?? 'field')) . ' }}</strong></div>';
                continue;
            }
            if ($type === 'checkbox') {
                continue;
            }
            $name = (string) ($field['name'] ?? 'field');
            $placeholder = match (true) {
                $name === 'email' => (string) ($props['emailPlaceholder'] ?? ''),
                $name === 'username' || $name === 'name' => (string) ($props['namePlaceholder'] ?? ''),
                str_contains($name, 'confirm') => (string) ($props['confirmPlaceholder'] ?? ''),
                default => (string) ($props['passwordPlaceholder'] ?? ''),
            };
            $html[] = '<label class="ppd-auth-field"><span>' . $this->e((string) ($field['label'] ?? 'Field')) .
                '</span><input type="' . $this->e($type) . '" name="' . $this->e($name) . '" placeholder="' .
                $this->e($placeholder) . '"' . (($field['required'] ?? false) ? ' required' : '') . '></label>';
        }

        if ($isLogin) {
            $html[] = '<div class="ppd-auth-options">';
            if (($props['showRemember'] ?? true) === true) {
                $html[] = '<label><input type="checkbox" name="remember"> ' . $this->e((string) ($props['rememberLabel'] ?? 'Remember me')) . '</label>';
            }
            if (($props['showForgot'] ?? true) === true) {
                $html[] = '<a href="#forgot_password">' . $this->e((string) ($props['forgotLabel'] ?? 'Forgot password?')) . '</a>';
            }
            $html[] = '</div>';
        }

        foreach ((array) ($props['actions'] ?? []) as $action) {
            $html[] = '<button type="button" class="ppd-auth-action ppd-auth-action-' . $this->e((string) ($action['variant'] ?? 'secondary')) . '" data-auth-action="' . $this->e((string) ($action['id'] ?? 'action')) . '">' . $this->e((string) ($action['label'] ?? 'Action')) . '</button>';
        }

        if ($isLogin && ($props['socialPosition'] ?? 'after') !== 'before') {
            $html[] = $social;
        }
        if ($isLogin && ($props['showSignup'] ?? true) === true) {
            $html[] = '<div class="ppd-auth-links">' . $this->e((string) ($props['signupText'] ?? '')) .
                ' <a href="#register">' . $this->e((string) ($props['signupLabel'] ?? 'Create an account')) . '</a></div>';
        }
        if ($isLogin && ($props['showSecurityNote'] ?? true) === true) {
            $html[] = '<small class="ppd-auth-security">✓ ' . $this->e((string) ($props['securityNote'] ?? '')) . '</small>';
        }

        return implode('', $html) . '</form></main></section>';
    }

    private function renderLegacy(array $props): string
    {
        $html = ['<section class="ppd-auth-page" data-auth-page="' . $this->e((string) ($props['pageType'] ?? 'login')) . '">',
            '<form class="ppd-auth-form"><h2>' . $this->e((string) ($props['title'] ?? 'Auth')) . '</h2>'];
        foreach ((array) ($props['fields'] ?? []) as $field) {
            $type = (string) ($field['type'] ?? 'text');
            if ($type === 'display') {
                $html[] = '<div class="ppd-auth-display"><span>' . $this->e((string) ($field['label'] ?? 'Field')) . '</span><strong>{{ ' . $this->e((string) ($field['name'] ?? 'field')) . ' }}</strong></div>';
                continue;
            }
            $html[] = '<label class="ppd-auth-field"><span>' . $this->e((string) ($field['label'] ?? 'Field')) . '</span><input type="' .
                $this->e($type) . '" name="' . $this->e((string) ($field['name'] ?? 'field')) . '"></label>';
        }
        foreach ((array) ($props['actions'] ?? []) as $action) {
            $html[] = '<button type="button" class="ppd-auth-action ppd-auth-action-' . $this->e((string) ($action['variant'] ?? 'secondary')) .
                '" data-auth-action="' . $this->e((string) ($action['id'] ?? 'action')) . '">' . $this->e((string) ($action['label'] ?? 'Action')) . '</button>';
        }
        if (($props['links'] ?? []) !== []) {
            $html[] = '<div class="ppd-auth-links">';
            foreach ((array) $props['links'] as $link) {
                $html[] = '<a href="#' . $this->e((string) ($link['target'] ?? '')) . '">' . $this->e((string) ($link['label'] ?? 'Link')) . '</a>';
            }
            $html[] = '</div>';
        }
        return implode('', $html) . '</form></section>';
    }

    private function brand(array $props): string
    {
        return '<div class="ppd-auth-brand"><b>' . $this->e((string) ($props['brandMark'] ?? 'N')) . '</b><span><strong>' .
            $this->e((string) ($props['brandName'] ?? 'PPPHP')) . '</strong><small>' .
            $this->e((string) ($props['brandTagline'] ?? '')) . '</small></span></div>';
    }

    private function social(array $props): string
    {
        $raw = $props['socialProviders'] ?? [];
        if (is_string($raw)) {
            $raw = explode(',', $raw);
        }
        $providers = array_filter(array_map(static fn ($p) => trim((string) $p), (array) $raw));
        if ($providers === []) {
            return '';
        }
        $buttons = [];
        foreach ($providers as $provider) {
            $label = match (strtolower($provider)) {
                'github' => 'GitHub',
                default => ucfirst($provider),
            };
            $buttons[] = '<button type="button" data-auth-provider="' . $this->e(strtolower($provider)) . '">' .
                $this->e($label) . '</button>';
        }
        $style = ($props['socialStyle'] ?? 'buttons') === 'icons' ? ' is-icons' : '';
        return '<div class="ppd-auth-divider"><span>' . $this->e((string) ($props['dividerText'] ?? 'or continue with')) .
            '</span></div><div class="ppd-auth-social' . $style . '">' . implode('', $buttons) . '</div>';
    }

    private function color(string $value, string $fallback): string
    {
        return preg_match('/^#[0-9a-f]{3,8}$/i', $value) ? $value : $fallback;
    }

    public static function templateStyles(): string
    {
        return <<<'CSS'
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif}.ppd-auth-page{min-height:100vh;display:grid;grid-template-columns:1.1fr minmax(420px,.9fr);background:#11152d;color:#111827}.ppd-auth-showcase{padding:7vw;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:radial-gradient(circle at 15% 20%,#312b6a,transparent 40%)}.ppd-auth-showcase h1{max-width:650px;font-size:clamp(40px,5vw,70px);line-height:1;letter-spacing:-.06em}.ppd-auth-showcase p{max-width:520px;color:#c9cee4;line-height:1.7}.ppd-auth-showcase blockquote{margin:40px 0 0;padding:20px;border:1px solid #ffffff24;border-radius:16px;background:#ffffff0d}.ppd-auth-showcase footer{margin-top:10px;color:#aeb7d4}.ppd-auth-brand{display:flex;align-items:center;gap:12px}.ppd-auth-brand b{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--auth-accent);color:#fff}.ppd-auth-brand strong,.ppd-auth-brand small{display:block}.ppd-auth-brand small{margin-top:3px;opacity:.65;font-size:11px}.ppd-auth-card-zone{display:grid;place-items:center;padding:40px;background:linear-gradient(160deg,color-mix(in srgb,var(--auth-accent) 15%,#eceffa),color-mix(in srgb,var(--auth-accent) 6%,#eef1f8) 72%)}.ppd-auth-form{width:min(100%,410px);box-sizing:border-box;padding:40px;border:1px solid color-mix(in srgb,var(--auth-accent) 14%,#e5e7eb);border-radius:24px;background:#fff;box-shadow:0 30px 80px color-mix(in srgb,var(--auth-accent) 12%,#0f172a17)}.ppd-auth-form>.ppd-auth-brand{display:none;margin-bottom:30px}.ppd-auth-form h2{margin:0;font-size:30px;letter-spacing:-.04em}.ppd-auth-subtitle{margin:9px 0 25px;color:#7a8499}.ppd-auth-field{display:grid;gap:7px;margin:14px 0;font-size:12px;font-weight:700}.ppd-auth-field input{height:44px;box-sizing:border-box;border:1px solid #dfe3ec;border-radius:11px;padding:0 14px;font:inherit}.ppd-auth-options{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#6b7280;font-size:11px}.ppd-auth-page a{color:var(--auth-accent);font-weight:700;text-decoration:none}.ppd-auth-action{width:100%;height:44px;border:0;border-radius:11px;background:var(--auth-accent);color:#fff;font-weight:800}.ppd-auth-divider{display:flex;align-items:center;gap:10px;margin:20px 0 12px;color:#9aa3b2;font-size:10px;text-transform:uppercase}.ppd-auth-divider:before,.ppd-auth-divider:after{content:"";height:1px;flex:1;background:#e5e7eb}.ppd-auth-social{display:grid;gap:8px}.ppd-auth-social.is-icons{grid-template-columns:repeat(auto-fit,minmax(55px,1fr))}.ppd-auth-social button{height:40px;border:1px solid #e1e5ed;border-radius:10px;background:#fff;font-weight:700}.ppd-auth-links,.ppd-auth-security{display:block;margin-top:20px;text-align:center;color:#7a8499;font-size:11px}.ppd-auth-page.is-halo{grid-template-columns:1fr;background:radial-gradient(circle at 15% 20%,#8b5cf6,transparent 35%),radial-gradient(circle at 85% 80%,#2563eb,transparent 35%),#100b2d}.ppd-auth-page.is-halo>.ppd-auth-showcase{position:absolute;background:none}.ppd-auth-page.is-halo .ppd-auth-showcase>.ppd-auth-brand,.ppd-auth-page.is-halo .ppd-auth-showcase>div:not(.ppd-auth-brand),.ppd-auth-page.is-halo .ppd-auth-showcase blockquote{display:none}.ppd-auth-page.is-halo .ppd-auth-card-zone{z-index:2;background:transparent}.ppd-auth-page.is-halo .ppd-auth-form{background:#fffffff0;backdrop-filter:blur(25px)}.ppd-auth-page.is-halo .ppd-auth-form>.ppd-auth-brand,.ppd-auth-page.is-executive .ppd-auth-form>.ppd-auth-brand{display:flex}.ppd-auth-page.is-executive{grid-template-columns:.8fr 1.2fr;background:#eef3f1}.ppd-auth-page.is-executive .ppd-auth-showcase{color:#17332e;background:linear-gradient(145deg,#e2ece8,#f3f7f5)}.ppd-auth-page.is-executive .ppd-auth-showcase p{color:#5c746e}.ppd-auth-page.is-executive .ppd-auth-card-zone{background:linear-gradient(160deg,color-mix(in srgb,var(--auth-accent) 6%,#f3f7f5),#ffffff 70%)}.ppd-auth-page.is-executive .ppd-auth-form{border:1px solid color-mix(in srgb,var(--auth-accent) 10%,#e2ece8);box-shadow:0 24px 60px color-mix(in srgb,var(--auth-accent) 10%,#17332e14)}.ppd-auth-page.is-verdant{position:relative;overflow:hidden;grid-template-columns:1fr;place-items:center;background:radial-gradient(105% 58% at -2% 79%,#254b31 0 39%,transparent 39.5%),radial-gradient(98% 58% at 104% 73%,#78a54b 0 41%,transparent 41.5%),radial-gradient(80% 30% at 48% 92%,#426e36 0 46%,transparent 47%),linear-gradient(180deg,#77989a 0,#b8ad87 38%,#d9bd7c 47%,#86a957 62%,#294d31 100%)}.ppd-auth-page.is-verdant:before,.ppd-auth-page.is-verdant:after{content:"";position:absolute;z-index:0;left:-6%;right:-6%;bottom:-17%;height:47%;border-radius:50% 48% 0 0/56% 55% 0 0;background:linear-gradient(145deg,#315c39,#76a142 55%,#2c5535);transform:rotate(3deg);filter:drop-shadow(0 -12px 24px #1737252e)}.ppd-auth-page.is-verdant:after{left:42%;right:-18%;bottom:-22%;height:54%;background:linear-gradient(155deg,#91b95c,#4f7d3c 56%,#244a31);transform:rotate(-8deg)}.ppd-auth-page.is-verdant>.ppd-auth-showcase{position:absolute;inset:0;z-index:1;padding:0;background:transparent}.ppd-auth-page.is-verdant .ppd-auth-showcase>.ppd-auth-brand,.ppd-auth-page.is-verdant .ppd-auth-showcase>div:not(.ppd-auth-brand),.ppd-auth-page.is-verdant .ppd-auth-showcase blockquote{display:none}.ppd-auth-page.is-verdant .ppd-auth-card-zone{position:relative;z-index:2;width:100%;min-height:100vh;box-sizing:border-box;background:transparent}.ppd-auth-page.is-verdant .ppd-auth-form{color:#fff;border:1.5px solid #ffffffb3;border-radius:28px;background:linear-gradient(145deg,#ffffff33,#0c231f70);box-shadow:0 28px 80px #10271e66,inset 0 1px 0 #ffffff45;backdrop-filter:blur(24px) saturate(125%)}.ppd-auth-page.is-verdant .ppd-auth-form>.ppd-auth-brand{display:none}.ppd-auth-page.is-verdant .ppd-auth-form h2,.ppd-auth-page.is-verdant .ppd-auth-field{color:#fff}.ppd-auth-page.is-verdant .ppd-auth-subtitle,.ppd-auth-page.is-verdant .ppd-auth-options,.ppd-auth-page.is-verdant .ppd-auth-links,.ppd-auth-page.is-verdant .ppd-auth-security,.ppd-auth-page.is-verdant .ppd-auth-divider{color:#f5fff7d9}.ppd-auth-page.is-verdant a{color:#fff;text-decoration:underline;text-underline-offset:2px}.ppd-auth-page.is-verdant .ppd-auth-field input{border-color:#ffffffa6;background:#0f2a1f3b;color:#fff}.ppd-auth-page.is-verdant .ppd-auth-field input::placeholder{color:#f5fff7b8}.ppd-auth-page.is-verdant .ppd-auth-action{background:linear-gradient(100deg,#bfd600,#22bc67);box-shadow:0 14px 30px #163b2570}.ppd-auth-page.is-verdant .ppd-auth-divider:before,.ppd-auth-page.is-verdant .ppd-auth-divider:after{background:#ffffff50}.ppd-auth-page.is-verdant .ppd-auth-social button{border-color:#ffffff82;background:#ffffff24;color:#fff}.ppd-auth-page.is-liquid{--auth-accent:var(--pp-primary,#6366f1);position:relative;overflow:hidden;grid-template-columns:1fr;place-items:center;background-color:var(--pp-bg,#eceef6);background-image:radial-gradient(42% 48% at 16% 8%,color-mix(in srgb,var(--pp-primary,#6366f1) 62%,transparent),transparent 60%),radial-gradient(38% 44% at 88% 4%,rgba(56,207,255,.5),transparent 58%),radial-gradient(48% 54% at 90% 88%,rgba(168,110,255,.5),transparent 60%),radial-gradient(42% 48% at 6% 94%,rgba(255,110,180,.42),transparent 58%),radial-gradient(60% 66% at 48% 46%,color-mix(in srgb,var(--pp-primary,#6366f1) 26%,transparent),transparent 72%)}.ppd-auth-page.is-liquid>.ppd-auth-showcase{position:absolute;inset:0;z-index:1;padding:0;background:transparent}.ppd-auth-page.is-liquid .ppd-auth-showcase>.ppd-auth-brand,.ppd-auth-page.is-liquid .ppd-auth-showcase>div:not(.ppd-auth-brand),.ppd-auth-page.is-liquid .ppd-auth-showcase blockquote{display:none}.ppd-auth-page.is-liquid .ppd-auth-card-zone{position:relative;z-index:2;width:100%;min-height:100vh;box-sizing:border-box;place-items:center;background:transparent}.ppd-auth-page.is-liquid .ppd-auth-form{position:relative;border:0;border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.2) 46%,rgba(255,255,255,.1) 100%);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);box-shadow:0 34px 74px -26px color-mix(in srgb,var(--pp-primary,#6366f1) 34%,transparent),0 14px 40px rgba(23,26,64,.16),inset 0 1px 0 rgba(255,255,255,.6)}.ppd-auth-page.is-liquid .ppd-auth-form::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.28) 22%,color-mix(in srgb,var(--pp-primary,#6366f1) 34%,transparent) 48%,rgba(255,255,255,.12) 70%,rgba(255,255,255,.55) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.ppd-auth-page.is-liquid .ppd-auth-form::after{content:"";position:absolute;left:8%;right:8%;bottom:-14px;height:28px;border-radius:50%;background:linear-gradient(100deg,#ff5db4,#a07bff,#37cfff,#5dffa8);filter:blur(16px);opacity:.42;z-index:-1;pointer-events:none}.ppd-auth-page.is-liquid .ppd-auth-form>.ppd-auth-brand{display:flex;margin-bottom:26px}.ppd-auth-page.is-liquid .ppd-auth-subtitle{color:#5a6478}.ppd-auth-page.is-liquid .ppd-auth-field input{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--pp-text,#1c2130)}.ppd-auth-page.is-liquid .ppd-auth-field input::placeholder{color:#5a6478b0}.ppd-auth-page.is-liquid .ppd-auth-field input:focus{outline:none;border-color:color-mix(in srgb,var(--pp-primary,#6366f1) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--pp-primary,#6366f1) 20%,transparent)}.ppd-auth-page.is-liquid .ppd-auth-action-primary{position:relative;overflow:hidden;background:var(--pp-primary,#6366f1);color:var(--pp-primary-text,#fff);box-shadow:0 14px 32px -8px color-mix(in srgb,var(--pp-primary,#6366f1) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.55)}.ppd-auth-page.is-liquid .ppd-auth-action-primary::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);pointer-events:none}.ppd-auth-page.is-liquid .ppd-auth-social button{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.ppd-auth-page.is-flat{--auth-accent:var(--pp-primary,#2563eb);position:relative;grid-template-columns:1fr;place-items:center;background:var(--pp-bg,#fafafa)}.ppd-auth-page.is-flat>.ppd-auth-showcase{display:none}.ppd-auth-page.is-flat .ppd-auth-card-zone{width:100%;min-height:100vh;box-sizing:border-box;place-items:center;background:transparent}.ppd-auth-page.is-flat .ppd-auth-form{color:var(--pp-text,#0a0a0a);border:1px solid var(--pp-border,#e4e4e7);border-radius:var(--pp-radius,10px);background:var(--pp-surface,#fff);box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 44px -20px color-mix(in srgb,var(--pp-text,#0a0a0a) 22%,transparent)}.ppd-auth-page.is-flat .ppd-auth-form>.ppd-auth-brand{display:flex;margin-bottom:26px;color:var(--pp-text)}.ppd-auth-page.is-flat .ppd-auth-brand small{color:var(--pp-muted,#71717a)}.ppd-auth-page.is-flat .ppd-auth-form h2{color:var(--pp-text)}.ppd-auth-page.is-flat .ppd-auth-subtitle{color:var(--pp-muted,#71717a)}.ppd-auth-page.is-flat .ppd-auth-field{color:var(--pp-text)}.ppd-auth-page.is-flat .ppd-auth-field input{background:var(--pp-surface,#fff);border:1px solid var(--pp-border,#e4e4e7);color:var(--pp-text)}.ppd-auth-page.is-flat .ppd-auth-field input::placeholder{color:var(--pp-muted,#71717a)}.ppd-auth-page.is-flat .ppd-auth-field input:focus{outline:none;border-color:color-mix(in srgb,var(--pp-primary,#2563eb) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--pp-primary,#2563eb) 18%,transparent)}.ppd-auth-page.is-flat .ppd-auth-action,.ppd-auth-page.is-flat .ppd-auth-action-primary{background:var(--pp-primary,#2563eb);color:var(--pp-primary-text,#fff)}.ppd-auth-page.is-flat .ppd-auth-options,.ppd-auth-page.is-flat .ppd-auth-links,.ppd-auth-page.is-flat .ppd-auth-security{color:var(--pp-muted,#71717a)}.ppd-auth-page.is-flat .ppd-auth-divider{color:var(--pp-muted,#71717a)}.ppd-auth-page.is-flat .ppd-auth-divider:before,.ppd-auth-page.is-flat .ppd-auth-divider:after{background:var(--pp-border,#e4e4e7)}.ppd-auth-page.is-flat a{color:var(--pp-primary,#2563eb)}.ppd-auth-page.is-flat .ppd-auth-social button{background:var(--pp-surface,#fff);border:1px solid var(--pp-border,#e4e4e7);color:var(--pp-text)}@media(max-width:760px){.ppd-auth-page{display:block}.ppd-auth-showcase{display:none}.ppd-auth-card-zone{min-height:100vh;box-sizing:border-box;padding:20px}.ppd-auth-form{padding:28px 22px}.ppd-auth-form>.ppd-auth-brand{display:flex}.ppd-auth-page.is-verdant .ppd-auth-card-zone{background:transparent}.ppd-auth-page.is-verdant .ppd-auth-form>.ppd-auth-brand{display:none}}
CSS;
    }

    private function e(string $value): string
    {
        return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
    }
}
