/* Shared HIP product language for the consumer, admin, and built-in sign-in surfaces. */
.app {
    --bg: #0b1220;
    --panel: #111827;
    --elevated: #161e2e;
    --soft: #172033;
    --ink: #f8fafb;
    --text-secondary: #d1d5db;
    --muted: #9ca3af;
    --line: #1f2937;
    --input: #0f172a;
    --hover: #1b2940;
    --primary: #14b8a6;
    --primary-hover: #5eead4;
    --accent: #14b8a6;
    --accent-soft: #103c39;
    --success: #22c55e;
    --warn: #f59e0b;
    --danger: #ef4444;
    --critical: #b91c1c;
    --side: #0b1220;
    --side-ink: #f8fafb;
    --cc-border: #243146;
    --cc-side-ink: #f8fafb;
    --cc-side-soft: #172033;
    --cc-accent: #5eead4;
    isolation: isolate;
    position: relative;
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 78% -12%, rgb(20 184 166 / 12%), transparent 34rem),
        radial-gradient(circle at 24% 18%, rgb(31 111 235 / 9%), transparent 30rem),
        linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
}

[data-theme="light"] .app {
    --bg: #f8fafc;
    --panel: #ffffff;
    --elevated: #f1f5f9;
    --soft: #eaf2ff;
    --ink: #0f172a;
    --text-secondary: #42526b;
    --muted: #64748b;
    --line: #e5e7eb;
    --input: #ffffff;
    --hover: #eaf2ff;
    --primary: #0f9488;
    --primary-hover: #0b756d;
    --accent: #0f9488;
    --accent-soft: #ddfbf6;
    --cc-border: #243146;
    --cc-side-ink: #f8fafb;
    --cc-side-soft: #172033;
    --cc-accent: #5eead4;
    background-image:
        radial-gradient(circle at 78% -12%, rgb(20 184 166 / 10%), transparent 34rem),
        radial-gradient(circle at 24% 18%, rgb(31 111 235 / 7%), transparent 30rem),
        linear-gradient(rgb(15 23 42 / 4%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(15 23 42 / 4%) 1px, transparent 1px);
}

.app::before {
    position: fixed;
    z-index: 6;
    top: 0;
    right: 0;
    left: 270px;
    height: 2px;
    background: linear-gradient(90deg, #1f6feb, #14b8a6 58%, #7c3aed);
    box-shadow: 0 0 24px rgb(20 184 166 / 28%);
    content: "";
    pointer-events: none;
}

.app .sidebar {
    border-right-color: rgb(36 49 70 / 86%);
    background-color: #0b1220;
    background-image:
        radial-gradient(circle at 40% 0, rgb(20 184 166 / 11%), transparent 18rem),
        linear-gradient(rgb(255 255 255 / 2.5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 2.5%) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
}

.app .brand {
    min-height: 65px;
    color: #f8fafb;
    text-decoration: none;
}

.app .brand .mark {
    width: 46px;
    height: 46px;
    filter: drop-shadow(0 8px 18px rgb(31 111 235 / 22%));
}

.app .brand b {
    font-size: 22px;
    letter-spacing: -.02em;
}

.app .brand small {
    max-width: 145px;
    color: #9ca3af;
    font-size: 8px;
    line-height: 1.45;
}

.app .nav-item {
    min-height: 40px;
    border: 1px solid transparent;
}

.app .nav-item:hover {
    border-color: rgb(94 234 212 / 16%);
}

.app .nav-item.active {
    border-color: rgb(94 234 212 / 20%);
    background: linear-gradient(90deg, rgb(20 184 166 / 18%), rgb(31 111 235 / 7%));
}

.app .operator {
    border-color: rgb(94 234 212 / 14%);
    background: rgb(15 24 40 / 88%);
    box-shadow: 0 14px 34px rgb(0 0 0 / 18%);
}

.app .topbar {
    min-height: 78px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    box-shadow: 0 12px 30px rgb(0 0 0 / 8%);
}

.app .portal-context span {
    color: var(--primary-hover);
}

.app .portal-context strong {
    font-size: 15px;
    letter-spacing: -.01em;
}

.mobile-portal-brand {
    display: none;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    text-decoration: none;
}

.mobile-portal-brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.mobile-portal-brand strong {
    font-size: 18px;
}

.app .search,
.app .public-site-link,
.app .iconbtn {
    backdrop-filter: blur(12px);
}

.app .content {
    padding-top: clamp(24px, 3vw, 42px);
}

.app .stage .admin-rule-header h1,
.app .stage > header h1,
.app .stage > section > header h1,
.app .stage > div > header h1 {
    color: var(--ink);
    font-family: 'Satoshi', 'Segoe UI', sans-serif;
    font-weight: 800;
    letter-spacing: -.04em;
}

.app .stage .score-card,
.app .stage .hip-metric-card,
.app .stage .lookup-result,
.app .stage .hip-panel,
.app .stage .rule-builder-panel,
.app .stage .hip-alert-row,
.app .stage .hip-platform-row,
.app .stage .hip-action-card,
.app .stage .hip-privacy-callout {
    border-color: color-mix(in srgb, var(--line) 88%, var(--primary) 12%);
    border-radius: 16px;
    box-shadow: 0 18px 46px rgb(0 0 0 / 10%);
}

.app :is(a, button, input, select, textarea):focus-visible,
.auth-layout :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, #5eead4 50%, transparent);
    outline-offset: 3px;
}

.auth-layout {
    min-height: 100vh;
    background: #0b1220;
    color: #f8fafb;
    font-family: 'Satoshi', 'Segoe UI', sans-serif;
}

.auth-layout .login-page {
    background-image:
        radial-gradient(circle at 20% 0, rgb(20 184 166 / 12%), transparent 32rem),
        radial-gradient(circle at 92% 100%, rgb(31 111 235 / 8%), transparent 28rem);
}

.auth-layout .login-brand-panel {
    border-right-color: #243146;
    background-color: rgb(17 24 39 / 42%);
}

.auth-layout .login-brand img {
    filter: drop-shadow(0 9px 20px rgb(31 111 235 / 24%));
}

@media (max-width: 1050px) {
    .app::before {
        left: 78px;
    }

    .app .brand {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (max-width: 680px) {
    .app::before {
        left: 0;
    }

    .mobile-portal-brand {
        display: inline-flex;
    }

    .app .topbar {
        min-height: 70px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app *,
    .auth-layout * {
        scroll-behavior: auto !important;
    }
}

/* Consumer portal uses the same design language and interaction standards as HIP Admin. */
.consumer-portal {
    --portal-bg:#0B1220;
    --portal-surface:#111827;
    --portal-elev:#161E2E;
    --portal-border:#1F2937;
    --portal-text:#F8FAFB;
    --portal-secondary:#D1D5DB;
    --portal-muted:#9CA3AF;
    --portal-action:#14B8A6;
    --portal-ok:#22C55E;
    --portal-warn:#F59E0B;
    --portal-danger:#EF4444;
    min-height:100vh;
    background-color:var(--portal-bg);
    background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:64px 64px;
    color:var(--portal-text);
    font-family:"Satoshi",ui-sans-serif,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
}
.consumer-portal *,
.consumer-portal *::before,
.consumer-portal *::after { box-sizing:border-box; }
.consumer-portal :is(button,input,select,textarea) { font:inherit; }
.consumer-portal :is(.eyebrow,table thead th,time,.key) { font-family:"JetBrains Mono",Consolas,monospace !important; }
.consumer-portal .stage > main { width:100%; max-width:none; min-height:calc(100vh - 70px); margin:0; color:var(--portal-text); }
.consumer-portal .admin-rule-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0 0 24px; }
.consumer-portal .admin-rule-header h1 { margin:8px 0 6px; color:var(--portal-text); font:800 clamp(28px,4vw,42px)/1.05 "Satoshi",sans-serif; letter-spacing:-.04em; }
.consumer-portal .admin-rule-header p:last-child { max-width:780px; margin:0; color:var(--portal-muted); font-size:15px; line-height:1.6; }
.consumer-portal .eyebrow { margin:0; color:var(--portal-action); font-size:10.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.consumer-portal :is(.lookup-result,.score-card,.hip-panel,.rule-builder-panel,.hip-action-card) { border:1px solid var(--portal-border) !important; border-radius:14px !important; background:var(--portal-surface) !important; box-shadow:none !important; }
.consumer-portal .table-wrap { overflow-x:auto; border:1px solid var(--portal-border); border-radius:14px; background:var(--portal-surface); }
.consumer-portal table { width:100%; border-collapse:separate; border-spacing:0; color:var(--portal-secondary); }
.consumer-portal table thead { background:var(--portal-elev); }
.consumer-portal table th { padding:12px 16px; color:var(--portal-muted); font-size:9.5px; font-weight:800; letter-spacing:.13em; text-align:left; text-transform:uppercase; }
.consumer-portal table td { padding:14px 16px; border-top:1px solid rgba(255,255,255,.06); color:var(--portal-secondary); font-size:13px; }
.consumer-portal table tbody tr > td:first-child { border-left:3px solid var(--portal-action); }
.consumer-portal table tbody tr:is(:hover,:focus-within) { background:var(--portal-elev); }
.consumer-portal :is(a,button,input,select,textarea,summary):focus-visible { outline:2px solid var(--portal-action) !important; outline-offset:3px; }
.portal-menu-button { display:none; width:40px; height:40px; place-items:center; border:1px solid var(--portal-border); border-radius:9px; background:var(--portal-surface); color:var(--portal-secondary); }
.portal-menu-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

@media (max-width:680px) {
    .consumer-portal .portal-menu-button { display:grid; }
    .consumer-portal .mobile-portal-brand { display:none; }
    .consumer-portal.nav-open .sidebar { position:fixed; inset:0 auto 0 0; z-index:51; width:min(290px,86vw); height:100vh; display:flex; }
    .consumer-portal.nav-open::after { content:""; position:fixed; inset:0; z-index:50; background:rgba(4,8,16,.72); }
    .consumer-portal .admin-rule-header { display:block; }
    .consumer-portal .table-wrap { border-radius:11px; }
}

@media (prefers-reduced-motion:reduce) {
    .consumer-portal *,
    .consumer-portal *::before,
    .consumer-portal *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}