/* Certificate Verification — extracted from views/verify-certificate.php.
   Loaded only on /certificate/verify/{serial} via a direct <link> tag (this
   view renders its own standalone <head>; it never reaches views/layouts/base.php
   or partials/app-layout.php, so there's no $extraCss array to append to). This
   file's rules use var(--...) design tokens, so the view's <head> ALSO links
   app.css directly (before this file, so this file still wins ties) — without
   it every var() here resolves to nothing. */
        *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
        body {
            font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
            background:var(--gray-50); min-height:100vh; display:flex; flex-direction:column;
            align-items:center; justify-content:center; padding:24px;
        }
        ._vc-card {
            background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.08);
            max-width:520px; width:100%; overflow:hidden;
        }
        ._vc-head {
            padding:24px 28px; border-bottom:1px solid var(--bg-secondary);
            display:flex; align-items:center; gap:16px;
        }
        ._vc-logo { font-size:var(--text-lg); font-weight:700; color:var(--text-primary); }
        ._vc-logo span { color:var(--danger-base); }

        /* Valid */
        ._vc-status {
            padding:20px 28px; display:flex; align-items:center; gap:12px;
            border-bottom:1px solid var(--bg-secondary);
        }
        ._vc-status-icon {
            width:36px; height:36px; border-radius:50%; display:flex;
            align-items:center; justify-content:center; font-size:var(--text-lg); font-weight:700;
        }
        ._vc-valid .icon { background:var(--success-tint); color:var(--success-ink); }
        ._vc-invalid .icon { background:var(--danger-tint); color:var(--danger-ink); }
        ._vc-status-text h2 { font-size:var(--text-base); font-weight:600; }
        ._vc-valid h2 { color:var(--success-ink); }
        ._vc-invalid h2 { color:var(--danger-ink); }
        ._vc-status-text p { font-size:var(--text-xs); color:var(--text-muted); margin-top:2px; }

        /* Details */
        ._vc-body { padding:24px 28px; }
        ._vc-row {
            display:flex; justify-content:space-between; align-items:flex-start;
            padding:10px 0; border-bottom:1px solid var(--bg-secondary);
        }
        ._vc-row:last-child { border-bottom:none; }
        ._vc-label { font-size:var(--text-xs); color:var(--text-light); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; min-width:120px; }
        ._vc-value { font-size:var(--text-sm); color:var(--text-primary); text-align:right; flex:1; }
        ._vc-serial {
            font-family:'SFMono-Regular',Consolas,monospace; font-size:var(--text-sm);
            color:var(--text-muted); letter-spacing:0.5px;
        }
        ._vc-type {
            display:inline-block; font-size:var(--text-xs); font-weight:600; padding:2px 8px;
            border-radius:99px; text-transform:uppercase; letter-spacing:0.3px;
        }
        ._vc-type-cert { background:var(--info-tint); color:var(--info-strong); }
        ._vc-type-appr { background:var(--warning-tint); color:var(--warning-ink); }

        /* Footer */
        ._vc-foot {
            padding:16px 28px; background:var(--gray-50); border-top:1px solid var(--bg-secondary);
            text-align:center;
        }
        ._vc-foot p { font-size:var(--text-xs); color:var(--text-light); }
        ._vc-foot a { color:var(--text-muted); text-decoration:none; }
        ._vc-foot a:hover { color:var(--text-primary); }

        /* Error */
        ._vc-error { padding:48px 28px; text-align:center; }
        ._vc-error-icon { font-size:var(--text-5xl); color:var(--danger-base); margin-bottom:16px; }
        ._vc-error h2 { font-size:var(--text-base); font-weight:600; color:var(--danger-ink); margin-bottom:8px; }
        ._vc-error p { font-size:var(--text-sm); color:var(--text-light); }