/* base.css — the component styles that used to be inlined into every page.
   Byte-identical across all seven, so it is served once and cached, like
   tw.built.css beside it. Extracted from template.html by the same split
   that took the application out (UI consistency review 2026-09-08 §2). */

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

            /* The seven per-site colours are NOT here. This file is served at
               one URL for all eleven domains and cached immutable for a year,
               so a per-site value cannot live in it — the split that extracted
               this file carried the theme placeholders along and nothing
               ever substituted them, which left every var(--accent) unresolved
               and painted the login button white on white. They are declared
               inline in template.html, per site, per request. */
            :root {
                --border: rgba(0, 0, 0, 0.08);
                --dim: rgba(0, 0, 0, 0.15);
                --font-mono: "JetBrains Mono", "Fira Code", monospace;
                --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            }

            html {
                scroll-behavior: smooth;
            }
            body {
                background: var(--bg);
                color: var(--text);
                font-family: var(--font-sans);
                -webkit-font-smoothing: antialiased;
                overflow-x: hidden;
            }
            a {
                color: inherit;
                text-decoration: none;
            }

            /* Terminal components from original template */
            .terminal {
                background: #0f172a; /* slate-900 */
                border: 1px solid rgba(255,255,255,0.1);
                border-radius: 10px;
                overflow: hidden;
                font-family: var(--font-mono);
                font-size: 13px;
                color: #e2e8f0;
            }
            .t-bar {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 9px 14px;
                background: #020617; /* slate-950 */
                border-bottom: 1px solid rgba(255,255,255,0.1);
            }
            .t-dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
            }
            .t-dot:nth-child(1) { background: #ff5f57; }
            .t-dot:nth-child(2) { background: #febc2e; }
            .t-dot:nth-child(3) { background: #28c840; }
            .t-label {
                margin-left: auto;
                font-size: 10.5px;
                color: #64748b;
                letter-spacing: 0.5px;
            }
            .t-body {
                padding: 18px 20px;
                line-height: 1.75;
            }

            /* Copy button */
            .copy-btn {
                font-size: 11px;
                color: #94a3b8;
                border: 1px solid rgba(255,255,255,0.1);
                background: #1e293b;
                padding: 4px 10px;
                border-radius: 4px;
                cursor: pointer;
                font-family: var(--font-sans);
                font-weight: 600;
                transition: all 0.15s;
            }
            .copy-btn:hover {
                background: #334155;
                color: #f8fafc;
            }

            /* Swagger UI Light Theme Overrides */
            .swagger-ui .wrapper { max-width: 100%; padding: 0; }
            .swagger-ui .info { margin: 20px 0; }
            .swagger-ui .scheme-container { background: transparent; box-shadow: none; border-bottom: 1px solid #e2e8f0; padding: 15px 0;}
            .swagger-ui .opblock .opblock-summary-method { border-radius: 4px; }
            
            /* Hide unnecessary Swagger UI elements */
            .swagger-ui .topbar { display: none !important; }
            .swagger-ui .information-container { display: none !important; }
            .swagger-ui .scheme-container .schemes > .schemes-server-container { display: none !important; }

            .modal-overlay {                display: none;
                position: fixed;
                inset: 0;
                z-index: 200;
                background: rgba(0, 0, 0, 0.7);
                backdrop-filter: blur(4px);
                align-items: center;
                justify-content: center;
            }
            .modal-overlay.open {
                display: flex;
            }
            .modal {
                background: white;
                border: 1px solid var(--border);
                border-radius: 12px;
                padding: 36px;
                width: 100%;
                max-width: 400px;
                margin: 24px;
            }

            /* Dashboard styles */
            .dash-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 13px;
            }
            .dash-table th {
                padding: 10px 20px;
                text-align: left;
                font-weight: 500;
                font-size: 11.5px;
                color: var(--muted);
                border-bottom: 1px solid var(--border);
            }
            .dash-table td {
                padding: 12px 20px;
                border-bottom: 1px solid var(--border);
                font-family: var(--font-mono);
                font-size: 12.5px;
            }
            .dash-table tr:last-child td {
                border-bottom: none;
            }
            .dash-table tr:hover td {
                background: var(--surface2);
            }
            .status-pill {
                display: inline-block;
                padding: 2px 8px;
                border-radius: 10px;
                font-size: 11px;
                font-weight: 600;
                font-family: var(--font-sans);
                text-transform: uppercase;
                letter-spacing: 0.4px;
            }
            .status-active {
                background: rgba(74, 222, 128, 0.12);
                color: #4ade80;
            }
            .status-pending {
                background: rgba(251, 191, 36, 0.12);
                color: #fbbf24;
            }
            .status-inactive {
                background: rgba(255, 255, 255, 0.06);
                color: var(--muted);
            }

            .dash-empty {
                text-align: center;
                padding: 48px 20px;
                color: var(--muted);
                font-size: 14px;
            }

            .dash-login {
                max-width: 400px;
                margin: 120px auto 0;
                text-align: center;
            }
            .dash-login h2 {
                font-size: 22px;
                font-weight: 800;
                letter-spacing: -0.5px;
                margin-bottom: 10px;
            }
            .dash-login p {
                font-size: 14px;
                color: var(--muted);
                margin-bottom: 28px;
                line-height: 1.6;
            }
            .dash-login input {
                width: 100%;
                padding: 10px 14px;
                border-radius: 7px;
                border: 1px solid var(--border);
                background: var(--surface);
                color: var(--text);
                font-size: 14px;
                margin-bottom: 10px;
                font-family: var(--font-mono);
                outline: none;
                transition: border-color 0.15s;
            }
            .dash-login input:focus {
                border-color: var(--accent);
            }
            .dash-login input::placeholder {
                color: var(--muted);
            }
            .dash-login-btn {
                width: 100%;
                padding: 11px;
                border-radius: 7px;
                background: var(--text);
                color: var(--bg);
                font-size: 14px;
                font-weight: 600;
                border: none;
                cursor: pointer;
                font-family: var(--font-sans);
                transition: opacity 0.15s;
            }
            .dash-login-btn:hover {
                opacity: 0.88;
            }
            .dash-msg {
                font-size: 13px;
                margin-top: 10px;
                text-align: center;
            }

            .dash-tab-pane {
                display: none;
            }
            .dash-tab-pane.active {
                display: block;
            }

            .dash-overdue {
                background: rgba(248, 113, 113, 0.1);
                border: 1px solid #f87171;
                border-radius: 8px;
                padding: 12px 16px;
                font-size: 13px;
                color: #f87171;
                margin-bottom: 20px;
            }

            /* Blog Typography & Elements */
            .blog-prose {
                color: var(--theme-text, #111827);
                line-height: 1.8;
                font-size: 1.125rem;
            }
            .blog-prose p {
                margin-bottom: 1.5em;
            }
            .blog-prose h2, .blog-prose h3 {
                color: #0f172a;
                font-weight: 700;
                margin-top: 2em;
                margin-bottom: 1em;
                letter-spacing: -0.025em;
            }
            .blog-prose h2 { font-size: 1.875rem; }
            .blog-prose h3 { font-size: 1.5rem; }
            .blog-prose a {
                color: var(--theme-accent, #6366f1);
                text-decoration: underline;
                text-underline-offset: 4px;
            }
            .blog-prose a:hover { color: var(--theme-accent_dark, #4f46e5); }
            
            /* Claims / Callouts */
            .blog-prose blockquote {
                border-left: 4px solid var(--theme-accent, #6366f1);
                background-color: var(--theme-surface2, #f3f4f6);
                padding: 1.5rem 2rem;
                margin: 2em 0;
                font-size: 1.25rem;
                font-weight: 500;
                font-style: italic;
                border-radius: 0 0.5rem 0.5rem 0;
                color: #334155;
            }
            .blog-prose blockquote p:last-child { margin-bottom: 0; }
            
            /* Tables */
            .blog-prose table {
                width: 100%;
                border-collapse: collapse;
                margin: 2.5em 0;
                font-size: 1rem;
            }
            .blog-prose th, .blog-prose td {
                padding: 1rem;
                text-align: left;
                border-bottom: 1px solid #e2e8f0;
            }
            .blog-prose th {
                background-color: #f8fafc;
                font-weight: 600;
                color: #1e293b;
            }
            .blog-prose tbody tr:hover { background-color: #f8fafc; }
            
            .blog-prose img {
                border-radius: 0.75rem;
                margin: 2em 0;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                max-width: 100%;
                height: auto;
            }
            
            /* Code Blocks */
            .blog-prose pre {
                border-radius: 0.5rem;
                margin: 2em 0;
                padding: 1.5rem;
                overflow-x: auto;
                font-size: 0.9em;
                background-color: #282c34 !important; /* OneDark fallback */
            }
            .blog-prose code {
                font-family: var(--font-mono);
            }
            .blog-prose p code, .blog-prose li code {
                background-color: #f1f5f9;
                color: #e11d48;
                padding: 0.2em 0.4em;
                border-radius: 0.25rem;
                font-size: 0.9em;
            }
        
/* Shared site chrome (siteHeader/siteFooter in worker.js). The colours are
   inline so the markup is self-contained on the static pages that carry no
   stylesheet; only the hover state needs a rule. */
.chrome-link:hover { color: #0f172a !important; }
@media (max-width: 800px) {
  .hdr, .pad { padding-left: 24px !important; padding-right: 24px !important; }
  .hdrnav { display: none !important; }
}