:root {
        --px-bg: #FFFFFF;
        --px-bg2: #FAFAFC;
        --px-panel: #FFFFFF;
        --px-panel2: #F1F1F4;
        --px-ink: #0A0A0C;
        --px-mute: #555560;
        --px-line: #E2E2E8;
        --px-green: #0E9F42;
        --px-green-bright: #39FF14;
        --px-yellow: #8A9400;
        --px-cyan: #0077A3;
        --px-red: #B00020;
        --px-purple: #7C3AED;
        --black: #0A0A0C;
        --white: #FFFFFF;
        --gray-100: #FAFAFC;
        --gray-200: #E2E2E8;
        --gray-300: #888894;
        --gray-400: #555560;
        --red: #B00020;
        --font-display: 'Press Start 2P', monospace;
        --font-body: 'Inter', system-ui, sans-serif;
        --font-mono: 'JetBrains Mono', monospace;
    }

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

    html { -webkit-text-size-adjust: 100%; }

    body {
        font-family: var(--font-body);
        color: var(--black);
        background-color: var(--white);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; }
    .mono { font-family: var(--font-mono); }

    a { color: inherit; }

    button, input, a, [tabindex] {
        outline-offset: 2px;
    }
    button:focus-visible, input:focus-visible, a:focus-visible, [tabindex]:focus-visible {
        outline: 3px solid var(--black);
        outline-offset: 2px;
    }

    .visually-hidden {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

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

    /* Header */
    header {
        position: sticky;
        top: 0;
        background-color: var(--white);
        border-bottom: 1px solid var(--gray-200);
        padding: 1rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 100;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    header .brand {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.05rem;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        background: none;
        border: none;
        color: var(--black);
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    header nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }

    header nav a {
        text-decoration: none;
        color: var(--gray-400);
        font-size: 0.85rem;
        font-weight: 500;
        transition: color 0.2s;
    }
    header nav a:hover { color: var(--black); }

    main {
        flex: 1;
        padding: 1.25rem 0.75rem;
        max-width: 1440px;
        margin: 0 auto;
        width: 100%;
    }

    @media (max-width: 480px) {
        header { padding: 1rem 1rem; }
        main { padding: 1.5rem 1rem; }
    }

    @media (max-width: 640px) {
        #target-form { flex-wrap: wrap; }
        #target-form input[type="text"] { border-bottom: 3px solid var(--black); }
        #target-form button[type="submit"] { width: 100%; text-align: center; }
        .pat-row { flex-wrap: wrap; }
        .pat-row input[type="password"] { border-bottom: 3px solid var(--black); width: 100%; }
        .pat-row button { border-left: none; border-top: 3px solid var(--black); flex: 1; text-align: center; }
    }

    /* Splash Screen */
    #view-splash {
        text-align: center;
        max-width: 720px;
        margin: 0 auto;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .nav-logo {
        height: 28px;
        width: auto;
        display: block;
    }
    .hero-logo {
        width: 200px;
        max-width: 60vw;
        height: auto;
        display: block;
        margin: 0 auto 0.5rem auto;
    }
    #target-form {
        width: 100%;
        border: 3px solid var(--black);
        box-shadow: 6px 6px 0px var(--black);
        margin: 0 auto 2rem auto;
        display: flex;
        flex-wrap: nowrap;
    }
    #target-form input[type="text"] {
        border: none;
        padding: 1.25rem 1.75rem;
        font-size: 1rem;
        min-width: 0;
        flex: 1;
    }
    #target-form button[type="submit"] {
        border: none;
        padding: 1.25rem 1.75rem;
        font-size: 1.05rem;
        font-family: var(--font-display);
        font-weight: 700;
        white-space: nowrap;
    }
    .tagline { font-size: 0.875rem; text-transform: uppercase; color: var(--gray-300); letter-spacing: 2px; margin-bottom: 2rem; }

    .input-group { width: 100%; display: flex; gap: 0; flex-wrap: wrap; }
    input[type="text"], input[type="password"] {
        flex: 1;
        min-width: 200px;
        padding: 1rem 1.5rem;
        border: 1px solid var(--gray-200);
        font-family: var(--font-mono);
        font-size: 0.875rem;
        background: var(--white);
        color: var(--black);
        outline: none;
        transition: border-color 0.2s;
    }
    input[type="text"]:focus, input[type="password"]:focus { border-color: var(--black); }

    button {
        padding: 1rem 2rem;
        background: var(--black);
        color: var(--white);
        border: 1px solid var(--black);
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }
    button:hover { background: var(--gray-400); border-color: var(--gray-400); }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
    button.outline { background: transparent; color: var(--black); }
    button.outline:hover { background: var(--gray-100); }
    button.small { padding: 0.5rem 1rem; font-size: 0.75rem; font-family: var(--font-mono); text-transform: uppercase; }
    button.danger-outline { background: transparent; color: var(--red); border-color: var(--red); }
    button.danger-outline:hover { background: var(--red); color: var(--white); }

    .chips { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
    .chip {
        padding: 0.5rem 1rem;
        border: 1px solid var(--gray-200);
        background: var(--white);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        color: var(--gray-400);
        cursor: pointer;
        transition: all 0.2s;
        text-transform: uppercase;
    }
    .chip:hover { border-color: var(--black); color: var(--black); }
    .chip.active { background: var(--black); color: var(--white); border-color: var(--black); }
    .chip .count { opacity: 0.7; margin-left: 0.35rem; }

    /* Recent scans */
    .recent-section {
        width: 100%;
        margin-top: 1.5rem;
        text-align: left;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        box-sizing: border-box;
    }
    .recent-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--black); padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
    .recent-header h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
    .recent-list { display: flex; flex-direction: column; gap: 0.5rem; }
    .recent-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border: 1px solid var(--gray-200);
        padding: 0.75rem 1rem;
        background: var(--white);
        cursor: pointer;
        text-align: left;
        width: 100%;
        font-family: var(--font-body);
    }
    .recent-item:hover { border-color: var(--black); }
    .recent-item-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
    .recent-item-repo { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .recent-item-time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--gray-300); text-transform: uppercase; }
    .recent-item-score { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
    .recent-item-score .num { font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; }
    .recent-empty { color: #555560; font-family: var(--font-mono); font-size: 0.78rem; padding: 0.6rem 0; text-align: center; }

    /* PAT field */
    .pat-field { width: 100%; text-align: left; margin: 0 auto 0.75rem auto; }
    .pat-field summary {
        cursor: pointer;
        font-family: var(--font-mono);
        font-size: 0.72rem;
        color: #0A0A0C;
        text-transform: uppercase;
        margin-bottom: 0.4rem;
        display: inline-block;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        padding: 0.25rem 0.6rem;
        border: 1px solid rgba(10, 10, 12, 0.15);
        box-shadow: 2px 2px 0 rgba(10, 10, 12, 0.08);
    }
    .pat-row {
        width: 100%;
        border: 3px solid var(--black);
        box-shadow: 6px 6px 0px var(--black);
        display: flex;
        flex-wrap: nowrap;
        margin-bottom: 0.75rem;
    }
    .pat-row input[type="password"], .pat-row input[type="text"] {
        border: none;
        padding: 1.25rem 1.25rem;
        font-size: 1rem;
        flex: 1;
        min-width: 0;
        outline: none;
        background: var(--white);
        color: var(--black);
        font-family: var(--font-mono);
    }
    .pat-row button {
        border: none;
        border-left: 3px solid var(--black);
        padding: 1.25rem 1rem;
        font-size: 0.85rem;
        font-family: var(--font-display);
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        border-radius: 0;
        background: var(--black);
        color: var(--white);
        transition: background 0.2s;
        flex-shrink: 0;
    }
    .pat-row button:hover {
        background: var(--gray-400);
    }
    /* Leaderboard & Loser Board */
    .pat-note { font-size: 0.7rem; color: var(--gray-300); margin-top: 0.75rem; font-family: var(--font-mono); text-align: left; }

    /* Splash options (token + local AI): containerless, see-through. */
    #view-splash .pat-field summary {
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0.25rem 0;
    }
    #view-splash .pat-field summary:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* Inline connections — intentionally containerless and quiet. */
    #view-splash .connections {
        width: 100%;
        margin: 2.25rem auto 1.5rem;
        text-align: left;
        font-family: var(--font-mono);
    }
    #view-splash .connections-heading,
    #view-splash .connection-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    #view-splash .connections-heading {
        padding: 0 0 0.7rem;
        border-bottom: 1px solid var(--black);
        color: var(--black);
        font-size: 0.72rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }
    #view-splash .connections-heading h2 {
        font: inherit;
        margin: 0;
    }
    #view-splash .connections-heading > span {
        color: var(--gray-300);
    }
    #view-splash .connection-item {
        border-bottom: 1px solid var(--gray-200);
        padding: 1rem 0;
    }
    #view-splash .connection-label {
        display: flex;
        flex-direction: column;
        gap: 0.18rem;
        min-width: 0;
    }
    #view-splash .connection-name {
        color: var(--black);
        font-size: 0.85rem;
    }
    #view-splash .connection-description,
    #view-splash .connection-status {
        color: var(--gray-300);
        font-size: 0.72rem;
        line-height: 1.5;
    }
    #view-splash .connection-action,
    #view-splash .connection-button {
        min-height: 44px;
        border-radius: 0;
        font-family: var(--font-mono);
        font-size: 0.74rem;
        cursor: pointer;
        white-space: nowrap;
    }
    #view-splash .connection-action {
        border: 0;
        padding: 0.5rem 0;
        color: var(--black);
        background: transparent;
        text-decoration: none;
    }
    #view-splash .connection-action:hover { text-decoration: underline; text-underline-offset: 3px; }
    #view-splash .connection-action.muted-action { color: var(--gray-400); }
    #view-splash .connection-button {
        border: 1px solid var(--black);
        padding: 0.65rem 1rem;
        color: var(--white);
        background: var(--black);
    }
    #view-splash .connection-button:hover { background: var(--gray-400); }
    #view-splash .connection-actions,
    #view-splash .connection-saved-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-shrink: 0;
    }
    #view-splash .connection-panel {
        margin-top: 0.9rem;
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }
    #view-splash .connection-panel[hidden] { display: none; }
    #view-splash .connection-panel > label {
        color: var(--gray-400);
        font-size: 0.7rem;
    }
    #view-splash .connection-input-row {
        display: flex;
        align-items: stretch;
        gap: 0.6rem;
    }
    #view-splash .connection-input-row input,
    #view-splash .connection-key-panel select {
        min-width: 0;
        flex: 1;
        height: 44px;
        border: 1px solid var(--gray-200);
        border-radius: 0;
        background: var(--white);
        color: var(--black);
        padding: 0.65rem 0.75rem;
        font-family: var(--font-mono);
        font-size: 0.78rem;
        outline: none;
        box-shadow: none;
    }
    #view-splash .connection-input-row input:focus,
    #view-splash .connection-key-panel select:focus,
    #view-splash .connection-action:focus-visible,
    #view-splash .connection-button:focus-visible,
    #view-splash .connection-key summary:focus-visible {
        outline: 1px solid var(--black);
        outline-offset: 2px;
        box-shadow: none;
        transform: none;
    }
    #view-splash .connection-status:empty { display: none; }
    #view-splash .connection-key { margin-top: 0.25rem; }
    #view-splash .connection-key summary {
        display: inline-block;
        cursor: pointer;
        color: var(--gray-400);
        font-size: 0.72rem;
        list-style: none;
        padding: 0.45rem 0;
    }
    #view-splash .connection-key summary::-webkit-details-marker { display: none; }
    #view-splash .connection-key summary::before { content: '▸ '; color: var(--gray-300); }
    #view-splash .connection-key[open] summary::before { content: '▾ '; }
    #view-splash .connection-key-panel { margin-top: 0.35rem; }
    #view-splash .connection-key-panel select { width: 100%; flex: none; }

    @media (max-width: 640px) {
        #view-splash .connection-row { align-items: flex-start; }
        #view-splash .connection-input-row { flex-direction: column; }
        #view-splash .connection-input-row input,
        #view-splash .connection-input-row .connection-button { width: 100%; }
        #view-splash .connection-actions { align-items: flex-end; flex-direction: column; gap: 0.2rem; }
    }

    /* Scan / Progress view */
    #view-scan { max-width: 900px; margin: 0 auto; width: 100%; }
    .loading-header { margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--black); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0.5rem; }
    .loading-title { font-size: 1.25rem; text-transform: uppercase; }
    .loading-target { color: var(--gray-400); font-size: 0.75rem; font-family: var(--font-mono); }

    .agent-grid-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; width: 100%; }
    @media (max-width: 600px) { .agent-grid-mini { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 375px) { .agent-grid-mini { grid-template-columns: 1fr; } }

    .agent-card-mini {
        border: 3px solid var(--black);
        background: var(--white);
        padding: 1rem;
        min-height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        opacity: 0.35;
        transition: all 0.25s steps(4);
        position: relative;
    }
    .agent-card-mini.active { opacity: 1; background: var(--gray-100); box-shadow: 5px 5px 0px var(--black); transform: translate(-3px, -3px); }
    .agent-card-mini.complete { opacity: 1; background: var(--white); border-color: var(--black); }
    .agent-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; }
    .agent-card-domain { font-family: var(--font-mono); font-size: 0.68rem; color: var(--gray-400); text-transform: uppercase; }
    .agent-card-status { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; margin-top: 0.5rem; color: var(--gray-400); }
    .agent-card-mini.active .agent-card-status { color: var(--black); animation: pulse-status 1s infinite alternate steps(2); }
    @keyframes pulse-status { 0% { opacity: 0.4; } 100% { opacity: 1; } }
    .agent-card-mini.heat { cursor: pointer; }
    .agent-card-mini.heat:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0px var(--black); }
    .agent-card-mini.heat.selected { transform: translate(-3px, -3px); box-shadow: 5px 5px 0px var(--black); }
    .agent-card-mini.heat.selected .agent-card-status { text-decoration: underline; }

    .pixel-progress-container { width: 100%; margin-top: 1rem; }
    .pixel-progress-label { font-family: var(--font-mono); font-size: 0.72rem; margin-bottom: 0.4rem; display: flex; justify-content: space-between; color: var(--gray-400); }
    .pixel-progress-bar { height: 48px; border: 3px solid var(--black); background-color: var(--white); padding: 4px; position: relative; overflow: hidden; box-shadow: 4px 4px 0px var(--black); }
    .pixel-progress-fill {
        height: 100%; width: 0%;
        background-image: linear-gradient(90deg, #DFFF00, #39FF14, #DFFF00);
        background-size: 200% 100%;
        animation: flow-gradient 2s linear infinite;
        transition: width 0.3s ease;
    }
    @keyframes flow-gradient { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

    .scan-actions { display: flex; justify-content: flex-end; margin-top: 1rem; gap: 0.75rem; }

    /* Cerberus agent loading emblem */
    .jules-vfx-box {
        display: flex; flex-direction: column; align-items: center; text-align: center;
        padding: 1.5rem 1rem; border: none; background: transparent;
        box-shadow: none; margin-bottom: 1.5rem; position: relative;
    }
    .jules-hud-corner {
        position: absolute; font-family: var(--font-mono); font-size: 0.65rem; color: #39FF14;
        font-weight: 700; pointer-events: none; z-index: 5;
    }
    .jules-hud-tl { top: 0.6rem; left: 0.8rem; }
    .jules-hud-tr { top: 0.6rem; right: 0.8rem; }
    .jules-hud-bl { bottom: 0.6rem; left: 0.8rem; }
    .jules-hud-br { bottom: 0.6rem; right: 0.8rem; }
    .jules-hud-top {
        display: flex; justify-content: space-between; align-items: center; width: 100%;
        max-width: 600px; margin-bottom: 0.75rem; font-family: var(--font-mono); font-size: 0.68rem;
    }
    .jules-hud-pill {
        background: var(--black); color: #39FF14; padding: 0.2rem 0.6rem; font-weight: 700; letter-spacing: 0.5px;
    }
    .jules-hud-id { color: var(--gray-400); }

    .jules-vfx-container {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 1rem auto 1.5rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1000px;
    }
    .jules-glow-core {
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(57, 255, 20, 0.45) 0%, rgba(223, 255, 0, 0.3) 45%, rgba(0, 240, 255, 0.15) 70%, transparent 85%);
        filter: blur(28px);
        animation: jules-core-pulse 3s ease-in-out infinite alternate;
        pointer-events: none;
    }
    @keyframes jules-core-pulse {
        0% { transform: scale(0.85); opacity: 0.6; filter: blur(20px); }
        100% { transform: scale(1.15); opacity: 1; filter: blur(32px); }
    }
    .jules-sonar-wave {
        position: absolute;
        border-radius: 50%;
        border: 2px solid #39FF14;
        pointer-events: none;
        animation: jules-sonar 2.6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
    }
    .jules-sonar-wave:nth-child(2) { animation-delay: 0.85s; border-color: #DFFF00; }
    .jules-sonar-wave:nth-child(3) { animation-delay: 1.7s; border-color: #00F0FF; }
    @keyframes jules-sonar {
        0% { width: 140px; height: 140px; opacity: 0.9; transform: scale(0.7); }
        50% { opacity: 0.5; }
        100% { width: 330px; height: 330px; opacity: 0; transform: scale(1.35); }
    }
    .jules-orbit-stage {
        position: absolute;
        width: 270px;
        height: 270px;
        transform-style: preserve-3d;
        pointer-events: none;
    }
    .jules-orbit-ring-1 {
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        border: 2.5px solid rgba(57, 255, 20, 0.75);
        box-shadow: 0 0 16px rgba(57, 255, 20, 0.5), inset 0 0 16px rgba(57, 255, 20, 0.35);
        transform: rotateX(68deg) rotateY(15deg);
        animation: jules-orbit-spin-1 7s linear infinite;
    }
    .jules-orbit-ring-1::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        width: 14px;
        height: 14px;
        margin-left: -7px;
        background: #39FF14;
        border-radius: 50%;
        box-shadow: 0 0 14px #39FF14, 0 0 24px #39FF14;
    }
    .jules-orbit-ring-1::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 25%;
        width: 10px;
        height: 10px;
        background: #DFFF00;
        border-radius: 50%;
        box-shadow: 0 0 10px #DFFF00;
    }
    @keyframes jules-orbit-spin-1 {
        0% { transform: rotateX(68deg) rotateY(15deg) rotateZ(0deg); }
        100% { transform: rotateX(68deg) rotateY(15deg) rotateZ(360deg); }
    }
    .jules-orbit-ring-2 {
        position: absolute;
        inset: 24px;
        border-radius: 50%;
        border: 2px dashed rgba(223, 255, 0, 0.8);
        box-shadow: 0 0 12px rgba(223, 255, 0, 0.4);
        transform: rotateX(68deg) rotateY(-35deg);
        animation: jules-orbit-spin-2 5s linear infinite reverse;
    }
    .jules-orbit-ring-2::before {
        content: '';
        position: absolute;
        top: 50%;
        right: -6px;
        width: 12px;
        height: 12px;
        margin-top: -6px;
        background: #DFFF00;
        border-radius: 50%;
        box-shadow: 0 0 12px #DFFF00, 0 0 20px #DFFF00;
    }
    @keyframes jules-orbit-spin-2 {
        0% { transform: rotateX(68deg) rotateY(-35deg) rotateZ(0deg); }
        100% { transform: rotateX(68deg) rotateY(-35deg) rotateZ(360deg); }
    }
    .jules-orbit-ring-3 {
        position: absolute;
        inset: 36px;
        border-radius: 50%;
        border: 1.5px solid rgba(0, 240, 255, 0.6);
        transform: rotateX(25deg) rotateY(70deg);
        animation: jules-orbit-spin-3 9s linear infinite;
    }
    .jules-orbit-ring-3::after {
        content: '';
        position: absolute;
        top: -5px;
        left: 50%;
        width: 9px;
        height: 9px;
        background: #00F0FF;
        border-radius: 50%;
        box-shadow: 0 0 10px #00F0FF;
    }
    @keyframes jules-orbit-spin-3 {
        0% { transform: rotateX(25deg) rotateY(70deg) rotateZ(0deg); }
        100% { transform: rotateX(25deg) rotateY(70deg) rotateZ(360deg); }
    }
    .jules-dog-mascot-wrap {
        position: relative;
        width: 155px;
        height: 155px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: hidden;
        z-index: 2;
    }
    .jules-dog-img {
        width: 140px;
        height: 140px;
        object-fit: contain;
        filter: drop-shadow(0 0 12px rgba(57, 255, 20, 0.95)) drop-shadow(0 0 24px rgba(223, 255, 0, 0.65));
        animation: jules-dog-breathe 2.4s ease-in-out infinite alternate;
    }
    @keyframes jules-dog-breathe {
        0% { transform: scale(0.96) translateY(0); filter: drop-shadow(0 0 10px rgba(57,255,20,0.8)); }
        100% { transform: scale(1.05) translateY(-2px); filter: drop-shadow(0 0 24px rgba(57,255,20,1)) drop-shadow(0 0 38px rgba(223,255,0,0.9)); }
    }
    .jules-dog-sweep {
        position: absolute;
        inset: -50%;
        background: linear-gradient(120deg, transparent 35%, rgba(57,255,20,0.45) 48%, rgba(223,255,0,0.7) 50%, rgba(0,240,255,0.4) 52%, transparent 65%);
        animation: jules-laser-sweep 3s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes jules-laser-sweep {
        0% { transform: translateY(-100%) rotate(25deg); }
        100% { transform: translateY(100%) rotate(25deg); }
    }
    .jules-ember {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #39FF14;
        box-shadow: 0 0 8px #39FF14;
        pointer-events: none;
        animation: jules-float-ember 4s ease-in-out infinite;
    }
    @keyframes jules-float-ember {
        0%, 100% { transform: translate(0, 0) scale(0.8); opacity: 0.3; }
        50% { transform: translate(var(--dx, 20px), var(--dy, -25px)) scale(1.3); opacity: 1; }
    }
    .jules-agent-ticker {
        font-family: var(--font-mono); font-size: 0.72rem; color: var(--black);
        background: var(--gray-100); border: 1px solid var(--gray-200); padding: 0.4rem 0.8rem;
        margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; max-width: 90%;
    }
    .jules-agent-ticker .ticker-dot { color: #39FF14; animation: pulse-status 1s infinite alternate; }

    .pack-stage { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; letter-spacing: -0.5px; margin-top: 0.5rem; }
    .pack-stage::after { content: ''; animation: pack-dots 1.2s infinite steps(4); }
    @keyframes pack-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
    .pack-sub { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gray-400); margin-top: 0.4rem; min-height: 1.1em; }

    .jules-simple-mark {
        width: 92px; height: 92px; display: grid; place-items: center;
        background: #0A0A0C; color: #FFFFFF; border: 4px solid #0A0A0C;
        box-shadow: 6px 6px 0 #555560; font: 700 1.6rem var(--font-display);
        letter-spacing: -0.08em;
    }

    /* Dedicated Kickoff Overlay */
    .jules-kickoff-overlay {
        position: fixed; inset: 0; background: rgba(10, 10, 12, 0.94);
        display: flex; align-items: center; justify-content: center; z-index: 9999;
        backdrop-filter: blur(8px);
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }
    .jules-kickoff-content {
        display: flex; flex-direction: column; align-items: center; text-align: center;
        max-width: 520px; padding: 2rem; color: var(--white);
    }
    .jules-kickoff-vfx {
        position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;
    }
    .jules-kickoff-title {
        font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
        text-transform: uppercase; letter-spacing: -0.5px; margin-bottom: 0.4rem; color: #FFFFFF;
    }
    .jules-kickoff-sub {
        font-size: 0.82rem; color: #AAAAAB; min-height: 1.4em; margin-bottom: 1.25rem;
    }
    .jules-kickoff-bar {
        width: 100%; height: 12px; border: 2px solid var(--white); background: rgba(255,255,255,0.1);
        padding: 2px; margin-bottom: 1rem; position: relative; overflow: hidden;
    }
    .jules-kickoff-fill {
        height: 100%; width: 0%; background: linear-gradient(90deg, #DFFF00, #39FF14);
        transition: width 0.25s ease;
    }
    .jules-skip-btn {
        background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.4);
        cursor: pointer; padding: 0.4rem 0.8rem; font-family: var(--font-mono); font-size: 0.72rem;
    }
    .jules-skip-btn:hover { background: rgba(255,255,255,0.15); border-color: var(--white); }

    /* Cerberus Session Command Bar */
    .jules-session-bar {
        display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
        gap: 1rem; padding: 1rem 1.25rem; border: 3px solid var(--black); background: var(--white);
        box-shadow: 6px 6px 0px var(--black); margin-bottom: 1.5rem;
    }
    .jules-badge-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
    .jules-agent-badge {
        background: var(--black); color: #39FF14; font-family: var(--font-mono); font-size: 0.7rem;
        font-weight: 700; padding: 0.25rem 0.6rem; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .jules-session-id { font-size: 0.72rem; color: var(--gray-400); }
    .jules-status-pill {
        background: #39FF14; color: var(--black); font-size: 0.65rem; font-weight: 800;
        padding: 0.2rem 0.5rem; text-transform: uppercase; border: 1px solid var(--black);
    }
    .jules-target-banner { font-size: 0.82rem; font-weight: 600; }
    .jules-session-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
    .jules-session-actions button, .jules-session-actions a {
        font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; text-decoration: none;
    }
    .gh-link-btn { display: inline-flex; align-items: center; gap: 0.3rem; }

    /* Agent Tab Strip */
    .jules-tab-strip {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem;
        border-bottom: 3px solid var(--black); margin-bottom: 1.5rem; padding-bottom: 0.5rem;
    }
    .jules-tab {
        background: var(--gray-100); border: 3px solid var(--black); border-bottom: none;
        padding: 0.75rem 1.25rem; font-family: var(--font-display); font-weight: 700;
        font-size: 0.92rem; cursor: pointer; display: inline-flex; align-items: center;
        gap: 0.5rem; min-width: 0; width: 100%; text-align: left; transition: all 0.15s ease; color: var(--gray-400);
    }
    .jules-tab:hover { background: var(--gray-200); color: var(--black); }
    .jules-tab.active {
        background: var(--white); color: var(--black); border-bottom: 3px solid var(--white);
        box-shadow: 4px -4px 0px rgba(10,10,12,0.1);
    }
    .jules-tab-pill {
        background: var(--black); color: var(--white); font-family: var(--font-mono);
        font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 2px;
    }
    .jules-tab.active .jules-tab-pill { background: #39FF14; color: var(--black); }
    .jules-tab-content[hidden] { display: none !important; }
    .jules-plan-shell {
        border: 3px solid var(--black); background: var(--white); box-shadow: 6px 6px 0 var(--black);
        padding: clamp(1rem, 2.5vw, 1.5rem); margin-bottom: 1.5rem;
    }
    .jules-plan-toolbar {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
        border-bottom: 2px solid var(--black); padding-bottom: 1rem; margin-bottom: 1.25rem;
    }
    .jules-plan-toolbar .review-intro { margin: 0; max-width: 62ch; }
    .jules-plan-toolbar #copy-review-btn { margin: 0; flex-shrink: 0; }
    .jules-plan-handoff {
        display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .75rem;
        padding: 1rem; margin-bottom: 1.5rem; border: 2px solid var(--black); background: #F3F3F7;
    }
    .jules-plan-handoff > div { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; min-width: 0; }
    .jules-plan-handoff-step { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; background: var(--black); color: #39FF14; font: 700 .65rem var(--font-mono); }
    .jules-plan-handoff b { font: 700 .78rem var(--font-display); text-transform: uppercase; }
    .jules-plan-handoff small { grid-column: 2; color: var(--gray-400); font-size: .72rem; line-height: 1.35; }
    .jules-plan-handoff-arrow { color: var(--gray-400); font: 700 1.25rem var(--font-mono); }
    @media (max-width: 700px) { .jules-plan-handoff { grid-template-columns: 1fr; gap: .85rem; } .jules-plan-handoff-arrow { display: none; } }
    .jules-plan-shell .review-overview { box-shadow: 3px 3px 0 var(--black); margin-bottom: 1.5rem; }
    .jules-plan-shell .review-section { border: 3px solid var(--black); background: var(--white); box-shadow: 4px 4px 0 var(--black); padding: 1.25rem; margin-bottom: 1.25rem; }
    .jules-plan-shell .review-section:last-child { margin-bottom: 0; }
    .jules-engineering-prompt { margin: 0 0 1.5rem; padding: 1.25rem; border: 3px solid var(--black); background: #F3F3F7; box-shadow: 4px 4px 0 var(--black); }
    .jules-engineering-prompt label, .jules-prompt-heading span { display: block; font: 700 .72rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; margin-bottom: .55rem; }
    #agent-intent-input { width: 100%; box-sizing: border-box; resize: vertical; border: 2px solid var(--black); padding: .75rem; font: .8rem/1.5 var(--font-body); background: var(--white); margin-bottom: 1rem; }
    .jules-prompt-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; }
    .jules-prompt-heading span { margin: 0; }
    #agent-engineering-prompt { margin: 0; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; border: 2px solid var(--black); background: #0A0A0C; color: #D7D7DD; padding: 1rem; font: .72rem/1.65 var(--font-mono); }
    @media (max-width: 600px) {
        .jules-tab-strip { grid-template-columns: 1fr; }
    }

    /* Suggested Pull Request View */
    .jules-pr-hero {
        border: 3px solid var(--black); background: var(--white); box-shadow: 6px 6px 0px var(--black);
        padding: 1.5rem; margin-bottom: 1.5rem;
    }
    .connection-repo-access { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }
    .jules-pr-publish {
        border: 3px solid var(--black); background: #F3F3F7; box-shadow: 5px 5px 0 var(--black);
        padding: 1rem 1.25rem; margin-bottom: 1.5rem; display: flex; align-items: center;
        justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    }
    .jules-pr-publish strong { font-family: var(--font-display); text-transform: uppercase; }
    .jules-pr-publish p { margin: 0.25rem 0 0; color: var(--gray-400); font-size: 0.82rem; max-width: 62ch; }
    .jules-pr-publish p.is-busy::after { content: ' .'; animation: publish-dots 1.2s steps(4, end) infinite; color: var(--black); }
    @keyframes publish-dots {
        0%, 20% { content: ' .'; }
        40% { content: ' ..'; }
        60% { content: ' ...'; }
        80%, 100% { content: ' ....'; }
    }
    .jules-pr-publish-actions { display: flex; gap: 0.65rem; flex-wrap: wrap; }
    .jules-agent-activity { font-family: var(--font-mono); font-size: 0.7rem; color: var(--gray-400); margin-top: 0.5rem; }
    .jules-pr-header {
        border-bottom: 2px solid var(--black); padding-bottom: 1rem; margin-bottom: 1rem;
    }
    .jules-pr-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
    .jules-pr-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
    .jules-pr-branch-badge {
        font-family: var(--font-mono); font-size: 0.75rem; background: var(--gray-100);
        border: 1px solid var(--gray-300); padding: 0.3rem 0.6rem; display: inline-flex; align-items: center; gap: 0.4rem;
    }
    .jules-pr-branch-badge b { color: var(--black); }
    .jules-pr-meta {
        font-family: var(--font-mono); font-size: 0.72rem; color: var(--gray-400); margin-top: 0.5rem;
        display: flex; gap: 1rem; flex-wrap: wrap;
    }
    .jules-pr-stats-row {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.25rem 0;
    }
    @media (max-width: 650px) { .jules-pr-stats-row { grid-template-columns: repeat(2, 1fr); } }
    .jules-pr-stat-box {
        border: 2px solid var(--black); background: var(--gray-100); padding: 0.75rem 1rem; text-align: left;
    }
    .jules-pr-stat-val { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 800; color: var(--black); }
    .jules-pr-stat-lbl { font-family: var(--font-mono); font-size: 0.65rem; color: var(--gray-400); text-transform: uppercase; margin-top: 0.15rem; }

    .jules-pr-markdown {
        background: var(--gray-100); border: 1px solid var(--gray-200); padding: 1.25rem; font-size: 0.88rem; line-height: 1.6;
    }
    .jules-pr-markdown h4 {
        font-family: var(--font-display); font-size: 0.95rem; text-transform: uppercase; margin: 1rem 0 0.4rem 0;
    }
    .jules-pr-markdown h4:first-child { margin-top: 0; }
    .jules-pr-markdown p { margin-bottom: 0.5rem; }
    .jules-pr-markdown ul { margin-left: 1.25rem; margin-bottom: 0.5rem; }
    .jules-pr-markdown li { margin-bottom: 0.25rem; }
    .jules-pr-markdown code {
        font-family: var(--font-mono); font-size: 0.8em; background: var(--white); border: 1px solid var(--gray-200); padding: 0.1em 0.35em;
    }

    /* Quick Command */
    .jules-quick-command {
        border: 3px solid var(--black); background: var(--white); box-shadow: 4px 4px 0px var(--black);
        padding: 1rem 1.25rem; margin-bottom: 1.5rem;
    }
    .jules-qc-label {
        display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono);
        font-size: 0.72rem; color: var(--gray-400); margin-bottom: 0.5rem;
    }

    /* Unified Diff Section */
    .jules-diff-section { margin-top: 1.5rem; }
    .jules-diff-section-header {
        display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
        margin-bottom: 1rem; border-bottom: 2px solid var(--black); padding-bottom: 0.5rem;
    }
    .jules-diff-section-header h3 { font-size: 1.15rem; text-transform: uppercase; }
    .jules-diff-tools { display: flex; gap: 0.5rem; }

    .jules-diff-container { display: flex; flex-direction: column; gap: 1rem; }
    .jules-diff-card {
        border: 3px solid var(--black); background: var(--white); box-shadow: 4px 4px 0px var(--black);
    }
    .jules-diff-header {
        background: var(--gray-100); border-bottom: 2px solid var(--black); padding: 0.75rem 1rem;
        display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;
        cursor: pointer;
    }
    .jules-diff-header:hover { background: var(--gray-200); }
    .jules-diff-title-row { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; }
    .jules-diff-badge {
        font-size: 0.65rem; font-weight: 800; padding: 0.15rem 0.45rem; text-transform: uppercase; border-radius: 2px;
    }
    .diff-badge-mod { background: #DFFF00; color: var(--black); }
    .diff-badge-add { background: #39FF14; color: var(--black); }
    .jules-diff-rationale { font-family: var(--font-body); font-size: 0.75rem; color: var(--gray-400); }
    .jules-diff-body {
        background: var(--black); color: var(--gray-200); font-family: var(--font-mono); font-size: 0.75rem;
        line-height: 1.6; overflow-x: auto; padding: 0.75rem 0; margin: 0;
    }
    .jules-diff-body[hidden] { display: none !important; }
    .diff-line {
        display: flex; width: 100%; min-width: fit-content; padding: 0 1rem;
    }
    .diff-line:hover { background: rgba(255,255,255,0.06); }
    .diff-num {
        width: 3.5rem; color: var(--gray-400); user-select: none; text-align: right; padding-right: 1rem; flex-shrink: 0; font-size: 0.68rem;
    }
    .diff-marker { width: 1.2rem; user-select: none; flex-shrink: 0; font-weight: 700; }
    .diff-code { flex: 1; white-space: pre; }
    .diff-add { background: rgba(57, 255, 20, 0.16); color: #39FF14; }
    .diff-add .diff-marker { color: #39FF14; }
    .diff-del { background: rgba(176, 0, 32, 0.22); color: #FF6B6B; }
    .diff-del .diff-marker { color: #FF6B6B; }
    .diff-hunk { background: rgba(255,255,255,0.08); color: #00F0FF; font-style: italic; }

    /* Agent Plan & Reasoning View */
    .jules-plan-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
    }
    @media (max-width: 800px) { .jules-plan-grid { grid-template-columns: 1fr; } }
    .jules-plan-card {
        border: 3px solid var(--black); background: var(--white); box-shadow: 6px 6px 0px var(--black); padding: 1.5rem;
    }
    .jules-plan-card h3 { font-size: 1.15rem; text-transform: uppercase; margin-bottom: 0.3rem; }
    .jules-plan-subtitle { font-size: 0.8rem; color: var(--gray-400); margin-bottom: 1.25rem; font-family: var(--font-mono); }
    .jules-plan-steps { display: flex; flex-direction: column; gap: 0.75rem; }
    .jules-plan-step {
        border: 1px solid var(--gray-200); background: var(--gray-100); padding: 0.85rem 1rem;
        display: flex; gap: 0.85rem; align-items: flex-start;
    }
    .jules-step-icon {
        background: var(--black); color: #39FF14; width: 24px; height: 24px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
    }
    .jules-step-main { flex: 1; min-width: 0; }
    .jules-step-title { font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; margin-bottom: 0.15rem; }
    .jules-step-desc { font-size: 0.78rem; color: var(--gray-400); }
    .jules-step-badge {
        font-family: var(--font-mono); font-size: 0.65rem; background: var(--white); border: 1px solid var(--gray-200);
        padding: 0.15rem 0.4rem; font-weight: 700; text-transform: uppercase; align-self: flex-start;
    }

    .jules-reasoning-container { display: flex; flex-direction: column; gap: 0.75rem; }
    .jules-reasoning-item {
        border: 1px solid var(--gray-200); background: var(--gray-100); padding: 1rem;
    }
    .jules-reasoning-item h4 {
        font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; margin-bottom: 0.35rem; display: flex; justify-content: space-between;
    }
    .jules-reasoning-item p { font-size: 0.8rem; line-height: 1.5; color: var(--gray-500); }
    .jules-reasoning-cwe { font-family: var(--font-mono); font-size: 0.68rem; color: var(--red); font-weight: 700; }

    @media (prefers-reduced-motion: reduce) {
        .jules-glow-core, .jules-sonar-wave, .jules-orbit-ring-1, .jules-orbit-ring-2, .jules-orbit-ring-3,
        .jules-dog-img, .jules-dog-sweep, .jules-ember, .pack-stage::after,
        .hero-logo, .tagline::after { animation: none !important; }
    }

    .ai-report { border: 3px solid var(--black); background: var(--white); box-shadow: 6px 6px 0px var(--black); padding: 1.5rem; margin-top: 2rem; }
    .ai-report-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; border-bottom: 2px solid var(--black); padding-bottom: 0.75rem; margin-bottom: 1rem; }
    .ai-report-head h3 { font-size: 1.1rem; text-transform: uppercase; }
    .ai-report-meta { font-size: 0.7rem; color: var(--gray-400); }
    .ai-body h4 { font-size: 0.95rem; text-transform: uppercase; margin: 1.25rem 0 0.5rem; }
    .ai-body p { font-size: 0.88rem; margin-bottom: 0.6rem; }
    .ai-body ul, .ai-body ol { margin: 0.4rem 0 0.8rem 1.25rem; font-size: 0.88rem; }
    .ai-body li { margin-bottom: 0.3rem; }
    .ai-body pre { background: var(--black); color: var(--gray-200); font-family: var(--font-mono); font-size: 0.75rem; padding: 0.75rem 1rem; overflow-x: auto; margin: 0.5rem 0 0.8rem; white-space: pre-wrap; word-break: break-word; }
    .ai-body code.inline { font-family: var(--font-mono); font-size: 0.8em; background: var(--gray-100); border: 1px solid var(--gray-200); padding: 0.1em 0.35em; }
    .ai-body label.task { display: flex; gap: 0.6rem; align-items: flex-start; border: 1px solid var(--gray-200); background: var(--gray-100); padding: 0.5rem 0.75rem; margin-bottom: 0.4rem; font-size: 0.85rem; cursor: pointer; }
    .ai-body label.task input { margin-top: 0.25rem; accent-color: var(--black); flex-shrink: 0; }
    .ai-error { border: 3px solid var(--red); padding: 1rem; font-family: var(--font-mono); font-size: 0.78rem; }
    .ai-error b { color: var(--red); }
    .ai-error pre { background: var(--gray-100); border: 1px solid var(--gray-200); padding: 0.75rem; margin-top: 0.6rem; white-space: pre-wrap; word-break: break-word; font-size: 0.72rem; }

    .scan-log-wrap { margin-top: 1rem; }
    .scan-log-label { font-family: var(--font-mono); font-size: 0.72rem; margin-bottom: 0.4rem; display: flex; justify-content: space-between; color: var(--gray-400); }
    .scan-log {
        background: var(--black); color: var(--gray-200);
        font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.6;
        border: 3px solid var(--black); box-shadow: 4px 4px 0px var(--gray-300);
        padding: 0.75rem 1rem; height: 300px; overflow-y: auto;
    }
    .scan-log .log-line { display: block; white-space: pre-wrap; word-break: break-word; }
    .scan-log .log-agent { color: #DFFF00; font-weight: 700; }
    .scan-log .log-pass { color: #39FF14; }
    .scan-log .log-fail { background: var(--red); color: var(--white); font-weight: 700; }
    .scan-log .log-na, .scan-log .log-skip { color: var(--gray-300); }
    .scan-log .log-info { color: var(--gray-200); }

    /* Error panels */
    .error-panel {
        max-width: 720px;
        margin: 2rem auto;
        border: 3px solid var(--black);
        box-shadow: 6px 6px 0px var(--black);
        padding: 2rem;
        background: var(--white);
    }
    .error-panel .badge-error {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: 0.7rem;
        text-transform: uppercase;
        background: var(--black);
        color: var(--white);
        padding: 0.25rem 0.6rem;
        margin-bottom: 1rem;
    }
    .error-panel h2 { font-size: 1.3rem; text-transform: uppercase; margin-bottom: 0.75rem; }
    .error-panel p { font-size: 0.9rem; color: var(--gray-400); margin-bottom: 0.75rem; }
    .error-panel .code-block { margin: 0.75rem 0; }
    .error-panel .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }

    /* Code / copy blocks */
    .code-block {
        position: relative;
        background: var(--gray-100);
        border: 1px solid var(--gray-200);
        padding: 0.75rem 1rem;
        font-family: var(--font-mono);
        font-size: 0.78rem;
        overflow-x: auto;
        white-space: pre;
        border-radius: 0;
    }
    .copy-btn {
        position: absolute;
        top: 0.4rem; right: 0.4rem;
        padding: 0.3rem 0.6rem;
        font-size: 0.62rem;
        font-family: var(--font-mono);
        background: var(--black);
        color: var(--white);
        border: none;
        cursor: pointer;
        text-transform: uppercase;
    }
    .copy-btn:hover { background: var(--gray-400); }
    .copy-btn.copied { background: #1c7c2e; }

    /* Report view */
    #view-report { width: 100%; }
    .report-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--black); flex-wrap: wrap; gap: 0.75rem; }
    .report-title-block h1 { font-size: 1.75rem; text-transform: uppercase; letter-spacing: -0.5px; }
    .report-target { font-family: var(--font-mono); color: var(--gray-400); font-size: 0.75rem; word-break: break-all; }
    .report-meta-ribbon { font-size: 0.72rem; color: var(--gray-300); margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 1.1rem; font-family: var(--font-mono); text-transform: uppercase; }
    .report-meta-ribbon b { color: var(--black); }
    .report-notes { font-size: 0.72rem; color: var(--gray-400); font-family: var(--font-mono); margin-top: 0.5rem; }

    .report-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; width: 100%; align-items: start; }

    .report-left { display: flex; flex-direction: column; gap: 1rem; border-bottom: 2px dashed var(--gray-200); padding-bottom: 1.5rem; }

    .score-container-box { border: 3px solid var(--black); padding: 1.25rem 1.5rem; background: var(--white); display: flex; align-items: center; justify-content: space-between; box-shadow: 6px 6px 0px var(--black); flex-wrap: wrap; gap: 0.75rem; }
    .score-meta { display: flex; flex-direction: column; }
    .score-meta-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; color: var(--gray-400); }
    .score-number-big { font-family: var(--font-display); font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -1.5px; }
    .score-grade-box { font-family: var(--font-mono); font-size: 2.25rem; font-weight: 700; padding: 0.4rem 1.2rem; background: var(--black); color: var(--white); }
    .score-grade-box.grade-a { background: #39FF14; color: var(--black); }
    .score-grade-box.grade-b { background: #DFFF00; color: var(--black); }
    .score-grade-box.grade-c { background: #DFFF00; color: var(--black); }
    .score-grade-box.grade-d { background: var(--gray-400); color: var(--white); }
    .score-grade-box.grade-f { background: var(--black); color: var(--white); }

    .report-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

    .site-footer {
        border-top: 1px solid rgba(10, 10, 12, 0.12);
        padding: 0.9rem 1rem;
        color: rgba(255, 255, 255, 0.92);
        background: transparent;
        font-family: var(--font-mono);
        font-size: 0.68rem;
        text-align: center;
        letter-spacing: 0.08em;
    }
    .brand-link { display: inline-flex; align-items: center; margin-right: 30px; }

    .report-right { display: flex; flex-direction: column; width: 100%; }

    .toolbar { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; border: 1px solid var(--gray-200); padding: 1rem; background: var(--gray-100); }
    .toolbar-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
    .toolbar-row .chips { justify-content: flex-start; }
    .search-input { width: 100%; padding: 0.65rem 1rem; border: 1px solid var(--gray-200); font-family: var(--font-mono); font-size: 0.82rem; background: var(--white); }
    .search-input:focus { border-color: var(--black); outline: none; }

    .findings-title-header { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--black); }

    .badge { padding: 0.25rem 0.5rem; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; border: 1px solid transparent; text-transform: uppercase; display: inline-block; }
    .badge.critical { background: var(--black); color: var(--white); }
    .badge.high { background: var(--gray-400); color: var(--white); }
    .badge.medium { background: var(--gray-300); color: var(--white); }
    .badge.low { background: var(--gray-100); color: var(--black); border-color: var(--gray-200); }
    .badge.status-pass, .badge.status-fail, .badge.status-not_applicable, .badge.status-skipped {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        padding: 0;
        flex-shrink: 0;
        border-radius: 0;
    }
    .badge.status-pass { background: transparent; color: var(--black); border: 2px solid var(--black); }
    .badge.status-fail { background: var(--black); color: var(--white); border: 2px solid var(--black); }
    .badge.status-not_applicable { background: transparent; color: var(--gray-300); border: 2px solid var(--gray-200); }
    .badge.status-skipped { background: transparent; color: var(--gray-300); border: 2px dashed var(--gray-200); }
    .status-icon {
        width: 14px;
        height: 14px;
        display: block;
    }
    .badge.grade-a { background: #39FF14; color: var(--black); border-color: #39FF14; }
    .badge.grade-b { background: #DFFF00; color: var(--black); border-color: #DFFF00; }
    .badge.grade-c { background: #DFFF00; color: var(--black); border-color: #DFFF00; }
    .badge.grade-d { background: var(--gray-400); color: var(--white); border-color: var(--gray-400); }
    .badge.grade-f { background: var(--black); color: var(--white); border-color: var(--black); }

    .details-agent { margin-bottom: 1rem; border: 1px solid var(--gray-200); background: rgba(255, 255, 255, 0.9); }
    .details-agent-header { background: rgba(241, 241, 244, 0.92); padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
    .details-agent-title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
    .details-agent-score { font-family: var(--font-mono); font-size: 0.75rem; color: var(--gray-400); }
    .details-agent-body { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; }

    .check-row { border: 1px solid var(--gray-200); background: var(--gray-100); }
    .check-header-btn {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 0.75rem;
        background: transparent;
        border: none;
        text-align: left;
        cursor: pointer;
        font-family: var(--font-body);
        color: var(--black);
    }
    .check-header-btn:hover { background: var(--gray-200); }
    .check-header-btn .check-name { font-family: var(--font-display); font-weight: 700; font-size: 0.87rem; flex: 1; min-width: 0; }
    .check-header-btn .check-id { font-family: var(--font-mono); font-size: 0.68rem; color: var(--gray-300); }
    .check-header-btn .caret { font-family: var(--font-mono); font-size: 0.75rem; transition: transform 0.15s; flex-shrink: 0; }
    .check-header-btn[aria-expanded="true"] .caret { transform: rotate(90deg); }

    .check-body { padding: 0 1rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; background: var(--white); border-top: 1px solid var(--gray-200); }
    .check-body[hidden] { display: none; }
    .check-meta-line { font-family: var(--font-mono); font-size: 0.68rem; color: var(--gray-400); }
    .check-text { font-size: 0.82rem; color: var(--black); }
    .check-text .lbl { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; color: var(--gray-400); display: block; margin-bottom: 0.15rem; }

    .finding-card { border: 1px solid var(--gray-200); padding: 0.75rem; background: var(--gray-100); }
    .finding-loc { font-family: var(--font-mono); font-size: 0.72rem; margin-bottom: 0.4rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
    .finding-loc a { color: var(--black); text-decoration: underline; }
    .finding-snippet { background: var(--white); padding: 0.5rem 0.6rem; margin-bottom: 0; font-size: 0.72rem; overflow-x: auto; border: 1px solid var(--gray-200); font-family: var(--font-mono); white-space: pre; }
    .findings-truncated-note { font-family: var(--font-mono); font-size: 0.68rem; color: var(--gray-400); font-style: italic; }

    .empty-state { text-align: center; padding: 3rem 1rem; color: var(--gray-300); font-family: var(--font-mono); border: 1px dashed var(--gray-200); }

    .cli-callout { border: 1px solid var(--gray-200); background: var(--white); padding: 1rem; margin-top: 1.5rem; }
    .cli-callout h4 { font-family: var(--font-display); font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; }
    .cli-callout p { font-size: 0.78rem; color: var(--gray-400); margin-bottom: 0.75rem; }

    /* ===== PIXEL LAB THEME — WHITE (decorative override, no logic change) ===== */
    body {
        background-color: #FFFFFF;
        color: var(--px-ink);
        background-image: url('cerberus-stipple.png');
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-attachment: fixed;
        min-height: 100vh;
    }
    main, header { position: relative; z-index: 1; }

    header {
        background-color: #FFFFFF;
        border-bottom: 3px solid #000;
        box-shadow: 0 4px 0 rgba(10,10,12,.08);
    }
    header .brand {
        font-family: var(--font-display);
        font-size: 0.65rem;
        color: #0A0A0C;
        letter-spacing: 0;
    }
    .nav-logo { height: 28px; width: auto; display: block; image-rendering: auto; }
    header nav a {
        font-family: var(--font-mono);
        color: var(--px-mute);
    }
    header nav a:hover { color: #000; }

    #view-splash {
        position: relative;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 2.5rem 1.5rem;
        overflow: hidden;
    }
    .hero-logo {
        width: 220px;
        max-width: 85vw;
        height: auto;
        image-rendering: auto;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        display: block;
        margin: 0 auto 0.75rem auto;
        mix-blend-mode: multiply;
    }
    @keyframes hero-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }
    @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
    @keyframes float { from { transform: translateY(0); } to { transform: translateY(-6px); } }
    .px-hero-title {
        display: none !important;
    }
    .px-subtitle {
        font-family: var(--font-mono);
        font-size: 0.72rem;
        color: var(--px-green);
        letter-spacing: 1px;
        margin-bottom: 1.5rem;
    }
    .tagline { color: var(--px-mute); font-family: var(--font-mono); }
    .tagline::after { content: ' \2588'; color: var(--px-green); animation: blink 1s steps(2) infinite; }
    #target-form { background: #FFFFFF; border: 3px solid #000; box-shadow: 6px 6px 0 #000; }
    #target-input { background: #FFFFFF !important; color: #0A0A0C !important; font-family: var(--font-mono); }
    #target-input::placeholder { color: var(--px-mute); }
    #run-btn {
        background: #0A0A0C !important;
        color: #FFFFFF !important;
        font-family: var(--font-display) !important;
        font-size: 0.65rem !important;
        border-left: 3px solid #000 !important;
        box-shadow: 5px 5px 0 #0A0A0C;
        display: inline-flex !important;
        align-items: center;
        gap: 0.45em;
    }
    #run-btn span {
        line-height: 1;
        font-family: var(--font-mono) !important;
    }
    #run-btn:hover { background: #555560 !important; box-shadow: 6px 6px 0 #0A0A0C; }
    #run-btn:active { transform: translate(4px, 4px); }

    button {
        border: 3px solid #000;
        box-shadow: 4px 4px 0 #000;
        border-radius: 0;
        font-family: var(--font-mono);
    }
    button:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #000; }
    button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #000; }
    button:focus-visible, input:focus-visible, a:focus-visible, [tabindex]:focus-visible {
        outline: 3px solid #000;
        outline-offset: 2px;
    }

    .recent-item, .jules-session-bar, .jules-pr-hero, .jules-plan-card,
    .score-container-box, .toolbar, .ai-report, .error-panel {
        background: #FFFFFF;
        color: var(--px-ink);
        border: 3px solid #000;
        box-shadow: 4px 4px 0 #000;
    }
    .jules-session-bar, .jules-pr-hero, .jules-plan-card, .score-container-box, .ai-report, .error-panel {
        box-shadow: 6px 6px 0 #000;
    }
    .recent-item-time, .jules-session-id, .jules-plan-subtitle, .score-meta-label,
    .pat-note, .jules-pr-meta, .ai-report-meta { color: var(--px-mute); }
    input[type="text"], input[type="password"], .search-input {
        background: #FFFFFF;
        color: var(--px-ink);
        border-color: var(--px-line);
    }

    .agent-card-mini { background: #FFFFFF; color: var(--px-ink); }
    .agent-card-mini.active {
        background: #E9FBEF;
        border-color: #000;
        box-shadow: 5px 5px 0 var(--px-green);
    }
    .scan-log { background: #0A0A0C; color: #EDEDF2; }

    .jules-tab {
        background: var(--px-panel2);
        color: var(--px-mute);
        font-family: var(--font-display);
        font-size: 0.6rem;
    }
    .jules-tab.active {
        background: #FFFFFF;
        color: #000;
        border-bottom: 3px solid var(--px-green);
    }
    .jules-diff-body { background: #0A0A0C; }
    .jules-agent-badge { background: #0A0A0C; color: var(--px-green-bright); }

    .jules-vfx-box, .jules-kickoff-overlay .jules-kickoff-content { background: transparent; border: none; box-shadow: none; }


    /* ===== Cerberus Agent Dispatch Banner ===== */
    .jules-agent-dispatch-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        background: linear-gradient(135deg, #0A0A0C 0%, #15151D 60%, #1B1E28 100%);
        border: 3px solid var(--black);
        box-shadow: 6px 6px 0px var(--black);
        padding: 1.25rem 1.5rem;
        margin-bottom: 1.5rem;
        color: #FFFFFF;
        position: relative;
        overflow: hidden;
    }
    .jules-agent-dispatch-box::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, #39FF14, #DFFF00, #00F0FF);
    }
    .dispatch-left {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        flex: 1;
        min-width: 0;
    }
    .dispatch-avatar-beacon {
        position: relative;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: #000;
        border: 2px solid #39FF14;
        box-shadow: 0 0 14px rgba(57, 255, 20, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .dispatch-avatar-img {
        width: 46px;
        height: 46px;
        object-fit: contain;
        filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.8));
    }
    .dispatch-pulse-ring {
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 1.5px solid #39FF14;
        animation: dispatch-beacon 2s ease-out infinite;
        pointer-events: none;
    }
    @keyframes dispatch-beacon {
        0% { transform: scale(0.9); opacity: 0.9; }
        100% { transform: scale(1.4); opacity: 0; }
    }
    .dispatch-info { flex: 1; min-width: 0; }
    .dispatch-tagline {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
        margin-bottom: 0.4rem;
    }
    .dispatch-pill {
        background: #39FF14;
        color: #000000;
        font-family: var(--font-mono);
        font-size: 0.65rem;
        font-weight: 800;
        padding: 0.2rem 0.5rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    .dispatch-protocol {
        font-size: 0.68rem;
        color: #A0A0AB;
        font-family: var(--font-mono);
    }

    .dispatch-message {
        font-size: 0.86rem;
        line-height: 1.5;
        color: #E2E2E8;
    }
    .dispatch-message strong { color: #FFFFFF; }
    .dispatch-message .jules-link {
        color: #39FF14;
        text-decoration: underline;
        font-weight: 700;
    }
    .dispatch-message .jules-link:hover { color: #DFFF00; }
    .dispatch-right { flex-shrink: 0; }
    .jules-launch-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: #39FF14;
        color: #000000;
        font-family: var(--font-mono);
        font-weight: 800;
        font-size: 0.8rem;
        padding: 0.75rem 1.25rem;
        border: 2px solid #000000;
        box-shadow: 3px 3px 0px #000000;
        text-decoration: none;
        cursor: pointer;
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }
    .jules-launch-btn:hover {
        transform: translate(-2px, -2px);
        box-shadow: 5px 5px 0px #000000;
        background: #DFFF00;
    }
    @media (max-width: 850px) {
        .jules-agent-dispatch-box { flex-direction: column; align-items: flex-start; }
        .dispatch-right { width: 100%; }
        .jules-launch-btn { width: 100%; justify-content: center; }
    }

    /* Dedicated Kickoff Overlay Polish */
    .jules-kickoff-overlay {
        position: fixed; inset: 0;
        background: radial-gradient(circle at center, rgba(16, 20, 30, 0.97) 0%, rgba(8, 9, 12, 0.99) 100%);
        display: flex; align-items: center; justify-content: center; z-index: 99999;
        backdrop-filter: blur(14px);
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }
    .jules-kickoff-content {
        display: flex; flex-direction: column; align-items: center; text-align: center;
        max-width: 900px; width: 100%; padding: 2rem clamp(.75rem, 2vw, 1.5rem); color: #FFFFFF;
        background: transparent; border: none;
        box-shadow: none;
        position: relative;
    }
    .jules-kickoff-title { display: none !important; }
    .jules-kickoff-vfx { width: 120px; height: 120px; margin-bottom: 1rem; }
    .jules-kickoff-content .jules-hud-corner { display: none !important; }
    .jules-kickoff-note {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(57, 255, 20, 0.5);
        padding: 0.75rem 1rem;
        margin-top: 0.75rem;
        margin-bottom: 1.25rem;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        color: #DFFF00;
        line-height: 1.5;
        border-radius: 4px;
        width: 100%;
        text-align: left;
    }
    .jules-kickoff-note strong { color: #39FF14; }

    /* Interactive Agent Console Tab */
    .jules-console-container {
        border: 3px solid var(--black);
        background: var(--white);
        box-shadow: 6px 6px 0px var(--black);
        display: flex;
        flex-direction: column;
        height: 600px;
    }
    .jules-console-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
    .jules-console-panel { border: 2px solid var(--black); background: var(--white); padding: 1rem; }
    .jules-console-panel h2 { font: 700 .75rem var(--font-display); text-transform: uppercase; margin: 0 0 .75rem; }
    .jules-console-empty { margin: 0; color: var(--gray-400); font: .72rem/1.5 var(--font-mono); }
    .jules-console-history-item, .jules-console-diff-file { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem 0; border-top: 1px solid var(--gray-200); font-size: .72rem; }
    .jules-console-history-item:first-child, .jules-console-diff-file:first-child { border-top: 0; padding-top: 0; }
    .jules-console-history-item b { display: block; font-size: .76rem; }
    .jules-console-history-item small { display: block; color: var(--gray-400); margin-top: .2rem; }
    .jules-console-history-item a { color: var(--black); text-decoration: underline; }
    .jules-console-diff-dot { width: .5rem; height: .5rem; background: #39FF14; border: 1px solid var(--black); flex-shrink: 0; }
    .jules-console-diff-file-head { display: flex; align-items: center; gap: .5rem; }
    .jules-console-diff-code { margin: .65rem 0 0; max-height: 180px; overflow: auto; background: #0A0A0C; color: #D7D7DD; padding: .55rem; font: .62rem/1.5 var(--font-mono); }
    .jules-console-diff-code .diff-add { color: #39FF14; background: rgba(57,255,20,.12); }
    .jules-console-diff-code .diff-del { color: #FF6B6B; background: rgba(255,45,85,.14); }
    .jules-workflow-step { display: grid; grid-template-columns: 1.25rem 10rem minmax(0,1fr); align-items: baseline; gap: .6rem; padding: .55rem .75rem; border-bottom: 1px solid rgba(255,255,255,.1); color: #D7D7DD; font: .7rem var(--font-mono); }
    .jules-workflow-marker { color: #39FF14; font-weight: 800; }
    .jules-workflow-label { color: #FFFFFF; font-weight: 700; letter-spacing: .04em; }
    .jules-workflow-detail { color: #8B8B96; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .jules-workflow-step.active .jules-workflow-marker { animation: pulse-status 1s infinite alternate; }
    .jules-console-body { background: #0A0A0C; border: 3px solid var(--black); padding: .35rem 0; gap: 0; }
    .jules-console-body .jules-msg { max-width: none; padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
    .jules-console-body .jules-msg-avatar { display: none; }
    .jules-console-body .jules-msg-bubble { background: transparent; border: 0; box-shadow: none; color: #D7D7DD; padding: 0; font: .75rem/1.6 var(--font-mono); }
    .jules-console-container > .jules-console-input-row { order: -3; border: 3px solid var(--black); margin: 1rem; box-shadow: 4px 4px 0 var(--black); }
    .jules-console-container > .jules-console-workspace { order: -2; }
    .jules-console-container > .jules-quick-chips { order: -1; }
    .jules-console-container > .jules-console-body { order: 0; }
    .jules-console-diff-lines { margin-left: auto; color: var(--gray-400); font: .65rem var(--font-mono); }
    @media (max-width: 700px) { .jules-console-workspace { grid-template-columns: 1fr; } }
    .jules-console-header {
        background: #0A0A0C;
        color: #FFFFFF;
        padding: 0.85rem 1.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid var(--black);
    }
    .jules-console-title {
        font-family: var(--font-mono);
        font-size: 0.78rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }
    .jules-console-title span.pulse-dot {
        display: inline-block; width: 8px; height: 8px; border-radius: 50%;
        background: #39FF14; box-shadow: 0 0 8px #39FF14;
        animation: pulse-status 1s infinite alternate;
    }
    .jules-console-status {
        color: #39FF14;
        font-size: 0.62rem;
        font-weight: 400;
        letter-spacing: 0.04em;
    }
    .jules-console-link {
        color: #39FF14;
        font-family: var(--font-mono);
        font-size: 0.7rem;
        text-decoration: none;
        font-weight: 700;
    }
    .jules-console-link:hover { text-decoration: underline; color: #DFFF00; }
    .jules-console-body {
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem;
        background: #F8F8FA;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .jules-msg {
        display: flex;
        gap: 0.85rem;
        max-width: 85%;
        align-items: flex-start;
    }
    .jules-msg-agent { align-self: flex-start; }
    .jules-msg-user { align-self: flex-end; flex-direction: row-reverse; }
    .jules-msg-avatar {
        width: 36px; height: 36px; border-radius: 50%;
        background: #000; border: 2px solid #39FF14;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .jules-msg-avatar img { width: 28px; height: 28px; object-fit: contain; }
    .jules-msg-user .jules-msg-avatar {
        background: var(--black); border-color: var(--black); color: #fff;
        font-family: var(--font-mono); font-size: 0.75rem; font-weight: 800;
    }
    .jules-msg-bubble {
        background: var(--white);
        border: 2px solid var(--black);
        box-shadow: 3px 3px 0px var(--black);
        padding: 0.85rem 1rem;
        font-size: 0.85rem;
        line-height: 1.55;
    }
    .jules-msg-agent .jules-msg-bubble { background: var(--white); }
    .jules-msg-user .jules-msg-bubble { background: #0A0A0C; color: #FFFFFF; border-color: #0A0A0C; }
    .jules-agent-typing .jules-msg-bubble {
        display: inline-flex; align-items: baseline; gap: 0.45rem; color: var(--gray-400);
        min-width: 10.5rem; font-family: var(--font-mono); font-size: 0.72rem;
    }
    .jules-typing-label { letter-spacing: 0.02em; }
    .jules-typing-dots { color: #39FF14; letter-spacing: 0.16em; animation: agent-typing 1.15s steps(4, end) infinite; }
    @keyframes agent-typing {
        0%, 20% { opacity: 0.25; }
        45% { opacity: 0.65; }
        70%, 100% { opacity: 1; }
    }
    .jules-msg-bubble pre {
        background: #0A0A0C; color: #39FF14; padding: 0.6rem 0.8rem;
        font-family: var(--font-mono); font-size: 0.75rem; margin: 0.5rem 0; overflow-x: auto;
    }
    .jules-msg-bubble code.inline {
        font-family: var(--font-mono); font-size: 0.8em; background: #EDEDF2; padding: 0.1em 0.35em;
    }
    .jules-msg-user .jules-msg-bubble code.inline { background: #222; color: #39FF14; }
    .jules-quick-chips {
        padding: 0.6rem 1.25rem;
        background: #FFFFFF;
        border-top: 1px solid var(--gray-200);
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
    }
    .jules-quick-chip {
        font-family: var(--font-mono); font-size: 0.68rem; padding: 0.35rem 0.75rem;
        background: #F0F0F5; border: 1px solid var(--gray-300); color: var(--black);
        white-space: nowrap; cursor: pointer; transition: all 0.12s ease;
    }
    .jules-quick-chip:hover {
        background: #0A0A0C; color: #39FF14; border-color: #0A0A0C;
    }
    .jules-console-input-row {
        display: flex;
        border-top: 2px solid var(--black);
        background: var(--white);
    }
    .jules-console-input {
        flex: 1;
        border: none;
        padding: 1rem 1.25rem;
        font-family: var(--font-body);
        font-size: 0.9rem;
        outline: none;
    }
    .jules-console-send {
        background: #0A0A0C;
        color: #39FF14;
        border: none;
        border-left: 2px solid var(--black);
        padding: 0 1.5rem;
        font-family: var(--font-mono);
        font-weight: 800;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .jules-console-send:hover {
        background: #39FF14;
        color: #000000;
    }
    .diff-copy-file-btn {
        font-family: var(--font-mono); font-size: 0.65rem; padding: 0.2rem 0.5rem;
        background: var(--white); border: 1px solid var(--black); cursor: pointer;
    }
    .diff-copy-file-btn:hover { background: #39FF14; }

    /* ===== Header — centered navigation buttons, no outer elements ===== */
    .site-header {
        position: sticky; top: 0; z-index: 100;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 2px solid #0A0A0C;
        padding: 0 1.5rem;
        min-height: 56px;
        display: flex; align-items: center; justify-content: center;
        gap: 0;
        box-shadow: 0 1px 3px rgba(10,10,12,0.04);
    }
    .site-nav {
        display: flex; align-items: center; justify-content: center;
        gap: 30px; flex-wrap: wrap; margin: 0;
    }
    .site-nav a {
        text-decoration: none; color: #555560; font-size: 0.75rem; font-weight: 700;
        font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
        border: none; padding: 0.4rem 0.25rem;
        transition: color 0.15s ease;
    }
    .site-nav a:hover { color: #0A0A0C; text-decoration: underline; text-underline-offset: 4px; }
    @media (max-width: 640px) {
        .site-nav { gap: 1.25rem; }
        .site-nav a { font-size: 0.7rem; }
    }



    /* ===== B/W PIXEL HERO OVERRIDE (monochrome, no neon) ===== */
    .hero-stage, #view-splash, #view-scan, #view-report {
        --px-green: #0A0A0C;
        --px-green-bright: #0A0A0C;
        --px-cyan: #555560;
        --px-yellow: #555560;
        --px-purple: #555560;
        --px-red: #0A0A0C;
    }
    .pixel-progress-fill, .jules-kickoff-fill, #report-score-fill {
        background: #0A0A0C !important;
        background-image: none !important;
        animation: none !important;
    }
    .badge.grade-a, .badge.grade-b, .badge.grade-c,
    .score-grade-box.grade-a, .score-grade-box.grade-b, .score-grade-box.grade-c,
    .diff-badge-add, .diff-badge-mod,
    .jules-tab.active .jules-tab-pill, .jules-tab-pill,
    .jules-status-pill, .dispatch-pill, .jules-agent-badge,
    .jules-launch-btn, .copy-btn.copied, .jules-console-send:hover, .diff-copy-file-btn:hover {
        background: #0A0A0C !important;
        color: #FFFFFF !important;
        border-color: #0A0A0C !important;
        box-shadow: none !important;
    }
    .status-dot, .jules-console-title span.pulse-dot {
        background: #0A0A0C !important;
        box-shadow: none !important;
    }
    .jules-agent-ticker .ticker-dot { color: #0A0A0C !important; animation: none !important; }
    .badge.status-pass { background: transparent !important; color: #0A0A0C !important; border-color: #0A0A0C !important; font-weight: 800; }
    .badge.status-fail { background: #0A0A0C !important; color: #FFFFFF !important; border-color: #0A0A0C !important; text-decoration: underline; }
    .scan-log .log-agent { color: #FFFFFF !important; font-weight: 700; }
    .scan-log .log-pass { color: #FFFFFF !important; font-weight: 700; }
    .scan-log .log-fail { background: #FFFFFF !important; color: #0A0A0C !important; font-weight: 700; text-decoration: underline; }
    .scan-log .log-na, .scan-log .log-skip { color: #888894 !important; }
    .scan-log .log-info { color: #EDEDF2 !important; }
    .diff-add { background: rgba(10,10,12,0.08) !important; color: #0A0A0C !important; }
    .diff-add .diff-marker { color: #0A0A0C !important; }
    .diff-del { background: transparent !important; color: #0A0A0C !important; text-decoration: underline; }
    .diff-del .diff-marker { color: #0A0A0C !important; }
    .diff-hunk { background: rgba(10,10,12,0.06) !important; color: #555560 !important; }
    .jules-hud-corner, .jules-hud-pill, .jules-hud-id, .jules-status-pill, .jules-agent-badge,
    .px-subtitle, .jules-pr-meta, .jules-plan-subtitle, .cli-callout p,
    .footer-meta, .header-status, #jules-replay-btn,
    .jules-launch-btn, .jules-console-link { display: none !important; }
    .hero-stage { position: relative; background: transparent; }
    .hero-stage #hero-logo, .hero-stage .px-hero-title, .hero-stage .tagline, .hero-stage #target-form { background: transparent; }
    .hero-ctas { display: inline-flex; gap: 0.75rem; margin: 0 auto 1.25rem auto; flex-wrap: wrap; justify-content: center; }
    .hero-ctas a { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; text-decoration: none; border: 3px solid #0A0A0C; padding: 0.6rem 1rem; color: #0A0A0C; background: #FFFFFF; box-shadow: 4px 4px 0 #0A0A0C; }
    .hero-ctas a:first-child { background: #0A0A0C; color: #FFFFFF; }

    .agent-grid-mini { gap: 0.6rem !important; margin-bottom: 1rem; }
    .agent-card-mini {
        min-height: 0;
        padding: 0.7rem;
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 2px 2px 0 rgba(10, 10, 12, 0.18);
    }
    .agent-card-mini.heat:hover,
    .agent-card-mini.heat.selected {
        transform: translate(-2px, -2px);
        box-shadow: 4px 4px 0 #0A0A0C;
    }
    .agent-card-status { margin-top: 0.35rem; color: #555560; }
    .agent-card-domain, .agent-card-status, .report-target, .report-meta-ribbon { letter-spacing: 0.03em; }
    .report-title-block h1 { line-height: 1.2; }
    .agent-profile-legend {
        display: flex; flex-wrap: wrap; gap: .55rem .9rem; margin: -.35rem 0 .65rem;
        color: #555560; font: .62rem var(--font-mono); text-transform: uppercase;
    }
    .agent-profile-legend span { display: inline-flex; align-items: center; gap: .35rem; }
    .agent-profile-legend i { width: .65rem; height: .65rem; display: inline-block; border: 1px solid #0A0A0C; }
    .agent-profile-legend .legend-clean { background: #39FF14; }
    .agent-profile-legend .legend-watch { background: #DFFF00; }
    .agent-profile-legend .legend-high { background: #FF2D55; }
    .agent-failure-icons {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        min-height: 1.2rem;
        margin-top: 0.4rem;
    }
    .agent-failure-icon {
        display: inline-flex;
        width: 1.15rem;
        height: 1.15rem;
        align-items: center;
        justify-content: center;
        background: #0A0A0C;
        color: #FFFFFF;
    }
    .agent-failure-icon .status-icon { width: 0.72rem; height: 0.72rem; }
    .agent-failure-more {
        font-family: var(--font-mono);
        font-size: 0.62rem;
        color: #555560;
    }
    .agent-card-file {
        overflow: hidden;
        margin-top: 0.35rem;
        color: #555560;
        font-family: var(--font-mono);
        font-size: 0.62rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .agent-card-clean {
        min-height: 1.2rem;
        margin-top: 0.4rem;
        color: #888894;
        font-family: var(--font-mono);
        font-size: 0.62rem;
        text-transform: uppercase;
    }
    .agent-card-mini.risk-clean {
        border-color: #39FF14 !important;
        background: linear-gradient(135deg, rgba(57, 255, 20, 0.28), rgba(0, 240, 255, 0.08), rgba(255, 255, 255, 0.88)) !important;
        box-shadow: 0 0 12px rgba(57, 255, 20, 0.38), 3px 3px 0 #0A0A0C;
    }
    .agent-card-mini.risk-watch {
        border-color: #DFFF00 !important;
        background: linear-gradient(135deg, rgba(223, 255, 0, 0.34), rgba(57, 255, 20, 0.1), rgba(255, 255, 255, 0.88)) !important;
        box-shadow: 0 0 12px rgba(223, 255, 0, 0.42), 3px 3px 0 #0A0A0C;
    }
    .agent-card-mini.risk-high {
        border-color: #FF2D55 !important;
        background: linear-gradient(135deg, rgba(255, 45, 85, 0.28), rgba(255, 0, 170, 0.12), rgba(0, 240, 255, 0.08), rgba(255, 255, 255, 0.88)) !important;
        box-shadow: 0 0 14px rgba(255, 45, 85, 0.46), 3px 3px 0 #0A0A0C;
    }
    .agent-card-mini.risk-clean .agent-card-status { color: #16803C; }
    .agent-card-mini.risk-watch .agent-card-status { color: #756B00; }
    .agent-card-mini.risk-high .agent-card-status { color: #B00020; }

    .badge.grade-a, .score-grade-box.grade-a {
        background: #39FF14 !important;
        color: #0A0A0C !important;
        border-color: #39FF14 !important;
        box-shadow: 0 0 14px rgba(57, 255, 20, 0.42) !important;
    }
    .badge.grade-b, .badge.grade-c, .score-grade-box.grade-b, .score-grade-box.grade-c {
        background: #DFFF00 !important;
        color: #0A0A0C !important;
        border-color: #DFFF00 !important;
        box-shadow: 0 0 14px rgba(223, 255, 0, 0.42) !important;
    }
    .badge.grade-d, .score-grade-box.grade-d {
        background: #FF2D55 !important;
        color: #FFFFFF !important;
        border-color: #FF2D55 !important;
        box-shadow: 0 0 14px rgba(255, 45, 85, 0.42) !important;
    }
    .badge.grade-f, .score-grade-box.grade-f {
        background: #0A0A0C !important;
        color: #FFFFFF !important;
        border-color: #FF2D55 !important;
        box-shadow: 0 0 14px rgba(255, 45, 85, 0.42) !important;
    }

    /* ===== DESIGN CONSOLIDATION — one rigid box system, narrow margins ===== */
    /* Splash shares the same outer rhythm as scan + report */
    #view-splash { max-width: 680px; margin: 0 auto; padding-top: 1.5rem; padding-bottom: 3rem; }
    #view-report {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding: 1rem clamp(0.75rem, 2vw, 1.5rem) 2.5rem;
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    #view-scan {
        max-width: 900px;
        margin: 0 auto;
        padding: 1rem clamp(0.75rem, 2vw, 1.5rem) 2.5rem;
    }

    #view-report .jules-session-bar,
    #view-report .jules-tab-strip,
    #view-report .report-header,
    #view-report .report-grid,
    #view-report .ai-report {
        position: relative;
        z-index: 1;
    }

    @media (max-width: 600px) {
        #view-report { padding: .75rem .55rem 1.5rem; }
        .report-header { margin-bottom: 1rem; }
        .report-title-block h1 { font-size: 1.25rem; }
        .score-container-box { padding: 1rem; }
        .jules-session-bar { padding: .75rem; gap: .65rem; }
        .report-actions { gap: .45rem; }
        .report-actions button { flex: 1 1 140px; }
        .check-file { max-width: 24%; }
    }

    /* Kill page-level horizontal scroll: flex/grid children may shrink,
       inner code surfaces scroll instead of the page */
    .report-grid > *, .report-left, .report-right,
    .jules-session-info, .dispatch-info, .jules-pr-title-row,
    .jules-diff-title-row, .check-header-btn .check-name { min-width: 0; }
    .code-block, .finding-snippet, .jules-diff-body,
    .ai-body pre, .jules-msg-bubble pre { max-width: 100%; }
    .jules-diff-title-row span:nth-child(2) {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .jules-plan-grid { grid-template-columns: 1fr; }

    #view-report .report-grid { background: rgba(255,255,255,.2); }
    .check-header-btn:hover .check-name { text-decoration: underline; text-underline-offset: 3px; }
    .check-file {
        max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        color: #555560; font: .62rem var(--font-mono);
    }
    button:focus-visible, a:focus-visible, .jules-tab:focus-visible, .agent-card-mini:focus-visible, .check-header-btn:focus-visible {
        outline: 3px solid #00F0FF; outline-offset: 2px;
    }

    /* ===== Loading screen: borderless floating logo & VFX ===== */
    .jules-vfx-box { padding: .65rem 1rem; border: none !important; background: transparent !important; box-shadow: none !important; }
    .pack-stage { font-size: 1.05rem; }
    .jules-vfx-container, .jules-kickoff-vfx {
        width: 240px; height: 240px; margin: 0.75rem auto 1rem auto;
        border: none !important; box-shadow: none !important; background: transparent !important;
    }
    .jules-simple-mark {
        animation: none !important;
        border-radius: 0 !important;
    }
    .jules-dog-mascot-wrap {
        width: 155px; height: 155px; border-radius: 50%;
        background: transparent !important; border: none !important;
        box-shadow: none !important; overflow: hidden;
    }
    .jules-dog-mascot-wrap .jules-dog-img { width: 140px; height: 140px; }
    .jules-hud-corner { display: none !important; }
    .jules-hud-pill { background: #0A0A0C; color: #FFFFFF; }
    .jules-agent-ticker .ticker-dot { color: #39FF14; }
    .pack-stage::after { animation: pack-dots 1.2s infinite steps(4); }

    /* Dispatch banner joins the rigid white-box language */
    .jules-agent-dispatch-box {
        background: #FFFFFF; color: #0A0A0C;
        padding: 1rem 1.25rem; gap: 1rem;
    }
    .jules-agent-dispatch-box::before { display: none; }
    .dispatch-message { color: #0A0A0C; }
    .dispatch-message strong { color: #0A0A0C; }
    .dispatch-message .jules-link { color: #0A0A0C; }
    .dispatch-protocol { color: #555560; }
    .jules-launch-btn { background: #0A0A0C; color: #FFFFFF; }
    .jules-launch-btn:hover { background: #555560; }

    /* ===== Monochrome icon set + self-explanatory review chrome ===== */
    .mi { width: 12px; height: 12px; flex-shrink: 0; }
    .jules-tab .mi { width: 13px; height: 13px; }
    .jules-agent-badge, .dispatch-pill {
        display: inline-flex; align-items: center; gap: 0.45rem;
    }
    .diff-legend {
        font-family: var(--font-mono); font-size: 0.7rem; color: var(--gray-400);
        margin: -0.25rem 0 1rem 0;
    }
    .diff-legend b { color: var(--black); }
    .jules-diff-body { font-size: 0.78rem; line-height: 1.7; }
    .jules-diff-body .diff-line { border-left: 3px solid transparent; }
    .jules-diff-body .diff-add { border-left-color: #FFFFFF; }
    .jules-diff-body .diff-del { border-left-color: #888894; }

    /* Keep unified diffs readable against the dark code surface. */
    .jules-diff-body,
    .jules-diff-body .diff-line,
    .jules-diff-body .diff-code { color: #F1F1F4 !important; }
    .jules-diff-body .diff-num { color: #888894 !important; }
    .jules-diff-body .diff-add { background: rgba(57, 255, 20, 0.16) !important; color: #39FF14 !important; }
    .jules-diff-body .diff-add .diff-marker { color: #39FF14 !important; }
    .jules-diff-body .diff-del { background: rgba(176, 0, 32, 0.22) !important; color: #FF6B6B !important; text-decoration: none; }
    .jules-diff-body .diff-del .diff-marker { color: #FF6B6B !important; }
    .jules-diff-body .diff-hunk { background: rgba(255,255,255,0.08) !important; color: #00F0FF !important; }

    /* ===== Full monochrome: no green anywhere ===== */
    .jules-kickoff-overlay { background: radial-gradient(circle at center, rgba(16, 20, 30, 0.97) 0%, rgba(8, 9, 12, 0.99) 100%); }
    .jules-kickoff-content {
        background: transparent !important; color: #FFFFFF !important;
        border: none !important; box-shadow: none !important;
    }
    .jules-kickoff-title { display: none !important; }
    .jules-kickoff-sub { color: #555560; }
    .jules-kickoff-note {
        background: #F1F1F4; border: 1px solid #E2E2E8; color: #0A0A0C;
    }
    .jules-kickoff-note strong { color: #0A0A0C; }
    .jules-kickoff-note a { color: #0A0A0C; }
    .jules-kickoff-bar { border-color: #0A0A0C; background: #FFFFFF; }
    .jules-skip-btn { color: #0A0A0C !important; border-color: #0A0A0C !important; }
    .jules-skip-btn:hover { background: #F1F1F4 !important; }
    .jules-console-title .mi { color: #FFFFFF; }
    .jules-console-link { color: #FFFFFF; }
    .jules-console-link:hover { color: #FFFFFF; text-decoration: underline; }
    .jules-console-send { color: #FFFFFF; }
    .jules-console-send:hover { background: #FFFFFF; color: #0A0A0C; }
    .jules-quick-chip:hover { background: #0A0A0C; color: #FFFFFF; border-color: #0A0A0C; }
    .jules-msg-avatar { border-color: #0A0A0C; }
    .jules-msg-bubble pre { color: #FFFFFF; }
    .jules-msg-user .jules-msg-bubble code.inline { color: #FFFFFF; }

    /* Console is a long-form workspace: let the page grow instead of clipping its panels. */
    .jules-console-container { height: auto; min-height: 0; }
    .jules-console-workspace { grid-template-columns: 1fr; gap: 1.25rem; margin: 1.25rem; }
    .jules-console-panel { padding: 1.25rem; }
    .jules-console-diff-code { max-height: 320px; }
    .jules-console-diff-file { min-width: 0; display: block; width: 100%; }
    .jules-console-diff-code { width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; white-space: pre; }
    #view-report { overflow-x: hidden; }
    .jules-console-body { flex: none; min-height: 220px; max-height: none; overflow: visible; padding: .35rem 0; background: #0A0A0C; }
    .jules-console-container > .jules-console-input-row { margin: 1.25rem; }
    .jules-console-container { display: grid; grid-template-columns: 180px minmax(0, 1fr) 330px; grid-template-areas: 'header header header' 'sidebar body review' 'sidebar chips review' 'sidebar input review'; align-items: start; column-gap: 1.5rem; row-gap: 0; }
    .jules-console-header { grid-area: header; }
    .jules-task-sidebar { grid-area: sidebar; padding: 1.25rem 0; min-width: 0; }
    .jules-console-workspace { grid-area: review; margin: 1.25rem 0; min-width: 0; }
    .jules-console-body { grid-area: body; margin: 1.25rem 0 0; min-width: 0; }
    .jules-console-container > .jules-console-input-row { grid-area: input; align-self: end; margin: 1rem 0 1.25rem; transform: none; }
    .jules-console-container > .jules-quick-chips { grid-area: chips; align-self: end; margin: 0; }
    .jules-task-sidebar { font: .72rem/1.5 var(--font-mono); }
    .jules-sidebar-new { width: 100%; padding: .7rem .75rem; border: 2px solid var(--black); background: var(--white); font: 700 .72rem var(--font-mono); text-align: left; cursor: pointer; }
    .jules-sidebar-label { margin: 1.5rem 0 .6rem; color: var(--gray-400); font-size: .62rem; text-transform: uppercase; }
    .jules-sidebar-task { padding: .7rem .65rem; border-left: 3px solid var(--black); background: var(--gray-100); }
    .jules-sidebar-task b, .jules-sidebar-task span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .jules-sidebar-task span, .jules-sidebar-empty, .jules-sidebar-connections { color: var(--gray-400); font-size: .65rem; }
    .jules-sidebar-empty { margin-top: .8rem; }
    .jules-sidebar-connections { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--gray-200); }
    .jules-sidebar-connections span, .jules-sidebar-connections small { display: block; }
    .jules-review-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-bottom: 2px solid var(--black); padding-bottom: .65rem; margin-bottom: .85rem; }
    .jules-review-panel-heading > span { font: 700 .68rem var(--font-mono); letter-spacing: .08em; }
    .jules-review-tabs { display: flex; gap: .25rem; }
    .jules-review-tabs button { border: 0; background: transparent; padding: .3rem .4rem; color: var(--gray-400); font: 700 .64rem var(--font-mono); cursor: pointer; }
    .jules-review-tabs button.active { color: var(--black); border-bottom: 2px solid var(--black); }
    .jules-history-panel { margin-top: 1rem; }
    @media (max-width: 950px) { .jules-console-container { grid-template-columns: 150px minmax(0,1fr); grid-template-areas: 'header header' 'sidebar body' 'sidebar chips' 'sidebar input' 'workspace workspace'; } .jules-console-workspace { grid-area: workspace; } }
    @media (max-width: 700px) { .jules-console-container { display: flex; flex-direction: column; } .jules-task-sidebar { order: 1; width: 100%; padding: .75rem 0; } .jules-console-header { order: 0; width: 100%; } .jules-console-workspace { order: 3; width: 100%; margin: 1rem 0; } .jules-console-body { order: 4; width: 100%; margin: 0; } .jules-console-container > .jules-quick-chips { order: 2; margin: 0; } .jules-console-container > .jules-console-input-row { order: 5; transform: none; margin: 1rem 0 0; width: 100%; } }
    /* Open section treatment: the individual surfaces carry the structure. */
    .jules-console-container { border: 0; box-shadow: none; background: transparent; }
    .jules-plan-shell { border: 0; box-shadow: none; background: transparent; padding: 0; }
    .jules-console-container > * { box-sizing: border-box; min-width: 0; max-width: 100%; }
    .jules-console-workspace { width: auto; max-width: 100%; margin-inline: 0; }
    .jules-console-panel { min-width: 0; max-width: 100%; overflow: hidden; }
    .jules-console-body { border-left: 0; border-right: 0; }
    .jules-step-icon { color: #FFFFFF; }
    .jules-step-badge { color: #FFFFFF !important; background: #0A0A0C !important; }
    .jules-pr-stat-val { color: #0A0A0C !important; }

    /* ===== Section headers carry the mono icon set ===== */
    .jules-diff-section-header h3, .jules-plan-card h3, .report-title-block h1,
    .cli-callout h4, .qc-label { display: inline-flex; align-items: center; gap: 0.5rem; }
    .jules-diff-section-header h3 .mi, .jules-plan-card h3 .mi { width: 15px; height: 15px; }
    .report-title-block h1 .mi { width: 22px; height: 22px; }

    /* ===== Full-page backdrop — artsy stipple engraving full-bleed ===== */
    body {
        background-color: #FFFFFF;
        background-image: url('cerberus-stipple.png');
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    .hero-stage::before, .hero-stage::after, body::before { display: none !important; }
    .jules-vfx-container, .jules-kickoff-vfx {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    [hidden] { display: none !important; }

    /* Final loading treatment: the scan and report share the same narrow rail. */
    #view-scan { max-width: 900px; }
    .jules-kickoff-content { max-width: 900px; }
    .jules-kickoff-vfx { width: 120px; height: 120px; margin: 0 auto 1rem; }
    .jules-kickoff-vfx .jules-simple-mark { width: 92px; height: 92px; }

/* CSP hardening (2026-09-07): replacements for removed style attributes.
   Kept last so these win on equal specificity. */
.sprite-layer{position:absolute}
#recent-section{display:none}
#scan-progress-fill,#report-score-fill{width:0%}
#report-agent-grid{gap:0.75rem}
.panel-h4{font-size:0.85rem;margin-bottom:0.75rem;text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center;gap:0.5rem}
.report-actions-spaced{margin-top:1rem}

/* Console workspace: wide conversation, selected diff, compact task context. */
.jules-console-container{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);grid-template-areas:'header header' 'sidebar sidebar' 'input input' 'body review' 'chips review';column-gap:1.5rem;align-items:start}
.jules-console-header{grid-area:header}
.jules-task-sidebar{grid-area:sidebar;display:grid;grid-template-columns:auto auto minmax(180px,1fr) auto;gap:.75rem;align-items:center;width:100%;padding:1rem 0;border-bottom:1px solid var(--gray-200)}
.jules-sidebar-new{width:auto;white-space:nowrap;color:var(--black)}
.jules-sidebar-label{margin:0}
.jules-sidebar-task{min-width:0;padding:.55rem .7rem}
.jules-sidebar-empty{display:none}
.jules-sidebar-connections{margin:0;padding:0 0 0 .9rem;border-top:0;border-left:1px solid var(--gray-200);white-space:nowrap}
.jules-console-container>.jules-console-input-row{grid-area:input;margin:1.15rem 0 0;transform:none;min-height:68px}
.jules-console-input{font-size:1rem;padding:1.15rem 1.25rem}
.jules-console-body{grid-area:body;margin:1.25rem 0 0;min-height:360px}
.jules-console-container>.jules-quick-chips{grid-area:chips;margin:0 0 1.25rem;padding:.75rem 0;border-top:0;flex-wrap:wrap;overflow:visible}
.jules-console-workspace{grid-area:review;margin:1.25rem 0;min-width:0;width:100%}
.jules-console-body .jules-msg-agent .jules-msg-bubble,.jules-console-body .jules-msg-user .jules-msg-bubble{background:transparent;color:#D7D7DD;border:0;box-shadow:none}
.jules-console-diff-file-head{display:flex;align-items:center;gap:.5rem;width:100%;padding:.65rem 0;border:0;border-top:1px solid var(--gray-200);background:transparent;color:var(--black);text-align:left;cursor:pointer}
.jules-console-diff-file:first-child .jules-console-diff-file-head{border-top:0}
.jules-console-diff-code{display:none;max-height:420px}
.jules-console-diff-file.active .jules-console-diff-code{display:block}
@media(max-width:820px){.jules-console-container{grid-template-columns:1fr;grid-template-areas:'header' 'sidebar' 'input' 'body' 'chips' 'review';column-gap:0}.jules-task-sidebar{grid-template-columns:auto minmax(0,1fr)}.jules-sidebar-label,.jules-sidebar-connections{display:none}.jules-console-body{min-height:280px}.jules-console-workspace{margin-top:.5rem}}

/* Agent Console: a modular workspace with no enclosing visual shell. */
#view-report:has(#jules-view-console.active) {
    max-width: 1180px;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#jules-view-console .jules-console-container {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(320px, .68fr);
    grid-template-areas:
        'context tasks'
        'composer composer'
        'conversation review'
        'actions review';
    gap: 1.25rem 1.5rem;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

#jules-view-console .jules-console-header {
    grid-area: context;
    min-height: 78px;
    padding: 1rem 1.15rem;
    border: 2px solid var(--black);
    background: #0A0A0C;
    box-shadow: 4px 4px 0 rgba(10, 10, 12, .2);
}

#jules-view-console .jules-task-sidebar {
    grid-area: tasks;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .55rem .75rem;
    align-content: center;
    width: auto;
    min-height: 78px;
    padding: .75rem;
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 4px 4px 0 rgba(10, 10, 12, .12);
}

#jules-view-console .jules-sidebar-new {
    grid-row: 1 / span 2;
    align-self: stretch;
    min-height: 48px;
}

#jules-view-console .jules-sidebar-label {
    margin: 0;
    align-self: end;
}

#jules-view-console .jules-sidebar-task {
    align-self: start;
    padding: .35rem .55rem;
}

#jules-view-console .jules-sidebar-connections {
    grid-column: 1 / -1;
    margin: .15rem 0 0;
    padding: .55rem 0 0;
    border-top: 1px solid var(--gray-200);
    border-left: 0;
    white-space: normal;
}

#jules-view-console .jules-console-container > .jules-console-input-row {
    grid-area: composer;
    width: 100%;
    min-height: 84px;
    margin: 0;
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 5px 5px 0 var(--black);
}

#jules-view-console .jules-console-body {
    grid-area: conversation;
    min-height: 430px;
    margin: 0;
    padding: 1.25rem;
    border: 2px solid var(--black);
    background: #0A0A0C;
    box-shadow: 5px 5px 0 rgba(10, 10, 12, .2);
    overflow: visible;
}

#jules-view-console .jules-console-container > .jules-quick-chips {
    grid-area: actions;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#jules-view-console .jules-console-workspace {
    grid-area: review;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-content: start;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

#jules-view-console .jules-review-panel-heading,
#jules-view-console .jules-console-panel {
    margin: 0;
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 4px 4px 0 rgba(10, 10, 12, .12);
}

#jules-view-console .jules-review-panel-heading {
    padding: .75rem .85rem;
}

#jules-view-console .jules-console-panel {
    padding: 1rem;
    overflow: hidden;
}

#jules-view-console .jules-console-history-panel {
    margin-top: 0;
}

@media (max-width: 920px) {
    #jules-view-console .jules-console-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'context tasks'
            'composer composer'
            'conversation conversation'
            'review review';
        gap: 1rem;
    }

    #jules-view-console .jules-console-workspace {
        grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
        grid-template-areas:
            'review-head review-head'
            'changes history';
    }

    #jules-view-console .jules-review-panel-heading { grid-area: review-head; }
    #jules-view-console .jules-console-panel:not(.jules-console-history-panel) { grid-area: changes; }
    #jules-view-console .jules-console-history-panel { grid-area: history; }
}

@media (max-width: 640px) {
    #view-report:has(#jules-view-console.active) { padding-inline: .55rem; }

    #jules-view-console .jules-console-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            'context'
            'tasks'
            'composer'
            'conversation'
            'review';
    }

    #jules-view-console .jules-console-workspace {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 'review-head' 'changes' 'history';
    }

    #jules-view-console .jules-console-header,
    #jules-view-console .jules-task-sidebar,
    #jules-view-console .jules-console-workspace,
    #jules-view-console .jules-console-body,
    #jules-view-console .jules-console-container > .jules-quick-chips,
    #jules-view-console .jules-console-container > .jules-console-input-row {
        order: initial;
        width: 100%;
        margin: 0;
    }
}

/* Console diffs reuse the full Suggested PR card language. */
#jules-view-console #jules-console-diff {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#jules-view-console .jules-console-pr-diff {
    width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, .94);
}

#jules-view-console .jules-console-pr-diff-count {
    color: var(--gray-400);
    font-size: .7rem;
    font-weight: 400;
}

#jules-view-console .jules-console-pr-diff-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    min-width: 0;
}

#jules-view-console .jules-console-pr-diff .jules-diff-body {
    overflow: visible;
}

#jules-view-console .jules-console-pr-diff .diff-line {
    min-width: 0;
}

#jules-view-console .jules-console-pr-diff .diff-code {
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    #jules-view-console .jules-console-pr-diff-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* Landing-page readability: contain the dense controls over the illustration. */
#view-splash {
    overflow: visible;
}

#view-splash .connections {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
}

#view-splash .connections-heading {
    padding: .7rem .9rem;
    border: 0;
    border-left: 4px solid var(--black);
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

#view-splash .connection-item {
    padding: 1rem 1.1rem;
    border: 2px solid var(--black);
    background: rgba(255, 255, 255, .92);
    box-shadow: 4px 4px 0 rgba(10, 10, 12, .18);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

#view-splash .connection-description,
#view-splash .connection-status {
    color: #45454D;
}

#view-splash .connection-status {
    max-width: 62ch;
    margin-top: .55rem;
}

#view-splash .connection-panel {
    padding-top: .8rem;
    border-top: 1px solid rgba(10, 10, 12, .16);
}

#view-splash .connection-button:disabled {
    opacity: .68;
}

#view-splash .recent-section {
    padding: 1rem;
    border: 2px solid var(--black);
    background: rgba(255, 255, 255, .9);
    box-shadow: 4px 4px 0 rgba(10, 10, 12, .16);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

#view-splash .recent-item {
    background: rgba(255, 255, 255, .84);
}

#view-splash .chips {
    margin-top: .35rem;
}

#view-splash .sample-report-link {
    padding: .5rem .75rem;
    background: rgba(255, 255, 255, .86);
}

/* Console flow: greeting, question, terminal, shortcuts, review modules. */
#jules-view-console .jules-console-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        'welcome'
        'composer'
        'conversation'
        'review';
    gap: 1.15rem;
}

#view-report > .jules-report-welcome {
    margin: 0 0 1.15rem;
    padding: .7rem 1rem;
    border: 0;
    border-left: 5px solid var(--black);
    background: rgba(255, 255, 255, .9);
    box-shadow: 4px 4px 0 rgba(10, 10, 12, .12);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

#view-report > .jules-report-welcome h2 {
    margin: .15rem 0 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.15rem, 5vw, 4.6rem);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.045em;
    text-transform: none;
}

#view-report > .jules-report-welcome .jules-console-eyebrow {
    color: var(--gray-400);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#jules-view-console .jules-console-welcome {
    grid-area: welcome;
    padding: 1.4rem 1.6rem 1.5rem;
    border: 0;
    border-left: 5px solid var(--black);
    background: rgba(255, 255, 255, .96);
    box-shadow: 4px 4px 0 rgba(10, 10, 12, .12);
}

#jules-view-console .jules-console-welcome h2 {
    margin: .15rem 0 .35rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.15rem, 5vw, 4.6rem);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.045em;
    text-transform: none;
}

/* Align the console type with the report and site typography. */
#jules-view-console .jules-console-welcome h2 {
    font-family: var(--font-body);
    font-size: clamp(1.65rem, 3.2vw, 2.35rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.04em;
}

/* Console section headings use the same small pixel display face as the tabs. */
#jules-view-console .jules-console-welcome h2 {
    margin: .3rem 0 .55rem;
    font: 400 clamp(2.15rem, 5vw, 4.6rem)/.98 Georgia, 'Times New Roman', serif;
    letter-spacing: -.045em;
    text-transform: none;
}

#jules-view-console .jules-console-section-kicker {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    color: var(--gray-400);
    font: 400 10.5px/1.8 var(--font-pixel);
    letter-spacing: -.02em;
    text-transform: uppercase;
}

#jules-view-console .jules-console-section-kicker span {
    color: var(--black);
    font-size: .8em;
}

#jules-view-console .jules-console-welcome #jules-console-repository {
    margin: 0;
    color: var(--gray-400);
    font: 400 10.5px/1.8 var(--font-mono);
    letter-spacing: .035em;
    text-transform: none;
}

#jules-view-console .jules-console-repository,
#jules-view-console .jules-console-input-row label {
    font-family: var(--font-mono);
    font-size: .66rem;
    line-height: 1.6;
    letter-spacing: .07em;
    text-transform: uppercase;
}

#jules-view-console .jules-console-welcome > p:last-child {
    color: var(--gray-400);
    font-size: .95rem;
}

#jules-view-console .jules-console-eyebrow {
    color: var(--gray-400);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#jules-view-console .jules-console-container > .jules-console-input-row {
    grid-area: composer;
    min-height: 90px;
}

#jules-view-console .jules-console-body {
    grid-area: conversation;
    min-height: 390px;
}

#jules-view-console .jules-console-container > .jules-quick-chips {
    grid-area: actions;
    display: flex;
    gap: .6rem;
    margin: 0;
    padding: 0;
}

#jules-view-console .jules-console-workspace {
    grid-area: review;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
    grid-template-areas: 'changes history';
    gap: 1.15rem;
    align-items: start;
}

#jules-view-console .jules-console-panel {
    height: auto;
    min-height: 190px;
}

#jules-view-console .jules-console-panel:not(.jules-console-history-panel) {
    min-height: 300px;
}

@media (max-width: 760px) {
    #jules-view-console .jules-console-workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'changes' 'history';
    }

    #jules-view-console .jules-console-welcome h2 {
        font-size: clamp(2.1rem, 12vw, 3.4rem);
    }

    #jules-view-console .jules-console-container > .jules-quick-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .35rem;
    }

    #jules-view-console .jules-quick-chip {
        flex: 0 0 auto;
    }
}

/* Console surfaces use page scrolling; no nested scroll regions. */
#jules-view-console .jules-console-body {
    height: auto;
    min-height: 400px;
    max-height: none;
    overflow: visible;
    background: rgba(10, 10, 12, .94);
}

#jules-view-console .jules-console-body .jules-msg-bubble,
#jules-view-console .jules-console-body .jules-msg-bubble p,
#jules-view-console .jules-console-body .jules-msg-bubble h4,
#jules-view-console .jules-console-body .jules-msg-bubble strong {
    color: #F4F4F6;
}

#jules-view-console .jules-console-body .jules-msg-bubble h4 {
    margin: 0 0 .65rem;
}

#jules-view-console .jules-console-body .jules-msg-bubble code.inline {
    border: 1px solid #3B3B42;
    background: #202024;
    color: #FFFFFF;
}

#jules-view-console .jules-console-body .jules-msg-bubble pre {
    border: 1px solid #3B3B42;
    background: #151518;
    color: #F4F4F6;
}

#jules-view-console .jules-workflow-detail {
    color: #B8B8C1;
}

#jules-view-console .jules-console-workspace {
    align-items: start;
}

#jules-view-console .jules-console-panel,
#jules-view-console .jules-console-panel:not(.jules-console-history-panel) {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 240px;
    max-height: none;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

#jules-view-console #jules-console-diff,
#jules-view-console #jules-console-history {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}

#jules-view-console .jules-console-diff-code {
    max-height: none;
    overflow: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: rgba(10, 10, 12, .95);
}

#jules-view-console .jules-console-diff-code .diff-line {
    min-width: 0;
}

#jules-view-console .jules-console-diff-code .diff-code {
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#jules-view-console .jules-console-diff-code .diff-line {
    color: #E9E9ED !important;
}

#jules-view-console .jules-console-diff-code .diff-add {
    border-left: 3px solid #39FF14;
    background: rgba(57, 255, 20, .16) !important;
    color: #67FF4C !important;
    text-decoration: none !important;
}

#jules-view-console .jules-console-diff-code .diff-add .diff-num,
#jules-view-console .jules-console-diff-code .diff-add .diff-marker,
#jules-view-console .jules-console-diff-code .diff-add .diff-code {
    color: #67FF4C !important;
}

#jules-view-console .jules-console-diff-code .diff-del {
    border-left: 3px solid #FF4D68;
    background: rgba(255, 45, 85, .2) !important;
    color: #FF7A8E !important;
    text-decoration: none !important;
}

#jules-view-console .jules-console-diff-code .diff-del .diff-num,
#jules-view-console .jules-console-diff-code .diff-del .diff-marker,
#jules-view-console .jules-console-diff-code .diff-del .diff-code {
    color: #FF7A8E !important;
}

#jules-view-console .jules-console-diff-code .diff-hunk,
#jules-view-console .jules-console-diff-code .diff-hunk .diff-num,
#jules-view-console .jules-console-diff-code .diff-hunk .diff-code {
    background: rgba(0, 240, 255, .08) !important;
    color: #70EAF2 !important;
}

@media (max-width: 760px) {
    #jules-view-console .jules-console-body {
        height: auto;
        min-height: 360px;
        max-height: none;
    }

    #jules-view-console .jules-console-panel,
    #jules-view-console .jules-console-panel:not(.jules-console-history-panel) {
        height: auto;
        min-height: 220px;
        max-height: none;
    }
}

#jules-view-console .jules-console-welcome,
#jules-view-console .jules-console-container > .jules-console-input-row {
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

#jules-view-console .jules-console-input {
    background: transparent;
}

/* Keep copy controls readable on the light diff headers. */
#jules-view-console .diff-copy-file-btn,
#jules-view-pr .diff-copy-file-btn,
.diff-copy-file-btn {
    color: #111214 !important;
    background: #F8F8F3 !important;
    border-color: #111214 !important;
    opacity: 1;
    text-shadow: none;
}

#jules-view-console .diff-copy-file-btn:hover,
#jules-view-pr .diff-copy-file-btn:hover,
.diff-copy-file-btn:hover {
    color: #111214 !important;
    background: #39FF14 !important;
}

#jules-view-console .jules-console-welcome {
    background: transparent;
    border-left-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Match the section rhythm used across the report with a divider before the composer. */
#jules-view-console .jules-console-welcome {
    border-bottom: 2px solid var(--black);
    padding-bottom: 1.15rem;
    margin-bottom: 1rem;
}

/* Compact, line-oriented terminal transcript. */
#jules-view-console .jules-console-body {
    min-height: 240px;
    padding: .25rem 0;
    gap: 0;
}

#jules-view-console .jules-workflow-step {
    grid-template-columns: 1rem 8.5rem minmax(0, 1fr);
    gap: .5rem;
    padding: .34rem .8rem;
    line-height: 1.35;
}

#jules-view-console .jules-msg,
#jules-view-console .jules-msg-agent,
#jules-view-console .jules-msg-user {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-self: stretch;
    width: 100%;
    max-width: none;
    gap: .5rem;
    padding: .38rem .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

#jules-view-console .jules-msg::before {
    content: attr(data-terminal-label) ' $';
    color: #78E36C;
    font: 700 .68rem/1.45 var(--font-mono);
    letter-spacing: .02em;
}

#jules-view-console .jules-msg-user::before {
    color: #70EAF2;
}

#jules-view-console .jules-msg-bubble {
    min-width: 0;
    padding: 0;
    font: .72rem/1.45 var(--font-mono);
}

#jules-view-console .jules-msg-bubble h4 {
    display: block;
    margin: 0 0 .25rem;
    font: 700 .72rem/1.45 var(--font-mono);
    letter-spacing: 0;
    text-transform: none;
}

#jules-view-console .jules-msg-bubble br {
    line-height: .65;
}

#jules-view-console .jules-agent-typing {
    min-height: 0;
}

.jules-intent-sync-note {
    margin-left: .45rem;
    color: var(--gray-400);
    font: 500 .64rem var(--font-mono);
    letter-spacing: 0;
    text-transform: none;
}

@media (max-width: 640px) {
    #jules-view-console .jules-console-body { min-height: 210px; }
    #jules-view-console .jules-msg,
    #jules-view-console .jules-msg-agent,
    #jules-view-console .jules-msg-user {
        grid-template-columns: 5.5rem minmax(0, 1fr);
    }
    #jules-view-console .jules-workflow-step {
        grid-template-columns: 1rem 6.5rem minmax(0, 1fr);
    }
}

/* Final terminal sizing override. */
#jules-view-console .jules-console-body {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 10;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

#jules-view-console .jules-console-body::-webkit-scrollbar {
    display: none;
}

/* Replace the terminal treatment with a calm, readable conversation surface. */
#jules-view-console .jules-console-body {
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 1rem 0 0;
    background: rgba(255, 255, 255, .9);
    border: 2px solid var(--black);
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(10, 10, 12, .14);
}

#jules-view-console .jules-console-body.console-idle {
    display: none !important;
}

#jules-view-console .jules-console-body .jules-msg,
#jules-view-console .jules-console-body .jules-msg-agent,
#jules-view-console .jules-console-body .jules-msg-user {
    display: block;
    padding: .8rem 0;
    border-bottom: 1px solid rgba(68, 74, 61, .14);
}

#jules-view-console .jules-console-body .jules-msg::before {
    display: none;
}

#jules-view-console .jules-console-body .jules-msg-bubble {
    color: #3D433A;
    font: .92rem/1.6 var(--font-body);
}

#jules-view-console .jules-console-body .jules-msg-bubble h4 {
    color: #30362D;
    font: 700 .9rem/1.4 var(--font-body);
}

#jules-view-console .jules-workflow-step {
    grid-template-columns: 1rem auto minmax(0, 1fr);
    padding: .45rem 0;
    border-bottom: 1px solid rgba(68, 74, 61, .12);
    color: #596153;
    font: .72rem/1.4 var(--font-mono);
}

#jules-view-console .jules-workflow-label {
    color: #596153;
}

#jules-view-console .jules-workflow-detail {
    color: #7B8274;
}

#jules-view-console .jules-console-container > .jules-console-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .7rem;
    min-height: 0;
    padding: 1rem;
    border: 2px solid var(--black);
    border-radius: 0;
    background: rgba(255, 255, 255, .92);
    box-shadow: 5px 5px 0 rgba(10, 10, 12, .16);
}

#jules-view-console .jules-console-input {
    width: 100%;
    min-height: 142px;
    resize: vertical;
    padding: 1.1rem 1.2rem;
    border: 2px solid var(--black);
    border-radius: 0;
    background: rgba(255, 255, 255, .7);
    color: #30362D;
    font: 400 14px/1.7 var(--font-body);
    letter-spacing: 0;
}

#jules-view-console .jules-console-send {
    align-self: end;
    min-width: 150px;
    min-height: 88px;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 0;
    background: var(--black);
    color: #F8F8F3;
    font: 700 10.5px/1.6 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

#jules-view-console .jules-console-send:hover {
    background: #394234;
    color: #F8F8F3;
}

@media (max-width: 640px) {
    #jules-view-console .jules-console-container > .jules-console-input-row {
        grid-template-columns: 1fr;
    border-radius: 0;
    }
    #jules-view-console .jules-console-send {
        width: 100%;
        min-height: 56px;
    }
}