:root {
    --color-green: #14a800;
    --color-green-hover: #108a00;
    --color-green-dark: #0c7a00;
    --color-green-light: #e9f7e7;
    --color-green-soft: #f2fbef;
    --color-white: #ffffff;
    --color-bg-secondary: #f7f7f7;
    --color-bg-soft: #f2f7f2;
    --color-text: #181818;
    --color-text-secondary: #5e6d55;
    --color-text-muted: #767676;
    --color-border: #d5e0d5;
    --color-border-light: #e4ebe4;
    --color-success: #14a800;
    --color-warning: #f2a900;
    --color-warning-text: #8a5b00;
    --color-warning-bg: #fff8e8;
    --color-error: #d93025;
    --color-error-bg: #fef2f2;
    --color-error-border: #fecaca;
    --color-info: #1f57c3;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-subtle: 0 8px 24px rgba(24, 24, 24, 0.04);
    --content-max: 1200px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --header-height: 72px;
    --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --bs-primary: var(--color-green);
    --bs-primary-rgb: 20, 168, 0;
    --bs-link-color: var(--color-green);
    --bs-link-hover-color: var(--color-green-hover);
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-white);
    --bs-border-color: var(--color-border);
}

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

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font);
    color: var(--color-text);
    background-color: var(--color-white);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    line-height: 1.2;
    font-weight: 600;
}

h1:focus {
    outline: none;
}

a {
    color: var(--color-green);
    text-decoration: none;
}

a:hover {
    color: var(--color-green-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid rgba(20, 168, 0, 0.45);
    outline-offset: 2px;
}

.dn-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
}

.dn-main {
    flex: 1;
}

.dn-container {
    width: min(100% - 32px, var(--content-max));
    margin-inline: auto;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--header-height);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
}

.site-header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.brand {
    display: inline-flex;
    align-items: baseline;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.brand:hover {
    color: inherit;
}

.brand-dev {
    color: var(--color-text);
}

.brand-nestro {
    color: var(--color-green);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.site-nav a {
    color: var(--color-text);
    font-weight: 500;
}

.site-nav a:hover,
.site-nav a.active {
    color: var(--color-green);
}

.nav-toggle,
.nav-toggle-label {
    display: none;
}

/* Buttons */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline-green,
.btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.btn-primary {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-green-hover);
    border-color: var(--color-green-hover);
    color: var(--color-white);
}

.btn-primary:active {
    background: var(--color-green-dark);
    border-color: var(--color-green-dark);
    color: var(--color-white);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-copy:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--color-bg-secondary);
    border-color: var(--color-green);
    color: var(--color-text);
}

.btn-outline-green {
    background: transparent;
    color: var(--color-green-hover);
    border-color: var(--color-green);
}

.btn-outline-green:hover,
.btn-outline-green:focus {
    background: var(--color-green-soft);
    color: var(--color-green-hover);
}

.btn-copy {
    min-height: 36px;
    padding: 6px 12px;
    background: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-border);
    font-size: 0.875rem;
}

.btn-copy:hover {
    border-color: var(--color-green);
}

.btn-copy.is-copied {
    background: var(--color-green-soft);
    color: var(--color-green-hover);
    border-color: var(--color-green-light);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Hero */
.hero {
    padding: var(--space-8) 0;
    background: var(--color-white);
}

.hero-eyebrow {
    margin: 0 0 var(--space-4);
    color: var(--color-green);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0 0 var(--space-5);
    max-width: 16ch;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    letter-spacing: -0.03em;
}

.hero-accent {
    color: var(--color-green);
}

.hero-copy {
    margin: 0 0 var(--space-6);
    max-width: 38rem;
    color: var(--color-text-secondary);
    font-size: 1.125rem;
}

.hero-visual {
    margin-top: var(--space-7);
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    background: var(--color-green-soft);
    color: var(--color-green-dark);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    overflow-x: auto;
}

/* Sections */
.section {
    padding: var(--space-8) 0;
}

.section-muted {
    background: var(--color-bg-secondary);
}

.section-soft {
    background: var(--color-bg-soft);
}

.section-title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.section-lead {
    margin: 0 0 var(--space-6);
    color: var(--color-text-secondary);
    max-width: 40rem;
}

.section-center {
    text-align: center;
}

.section-center .section-lead {
    margin-inline: auto;
}

/* Cards */
.tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

.tool-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.tool-card:hover {
    color: var(--color-text);
    border-color: var(--color-green);
    box-shadow: var(--shadow-subtle);
}

.tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-green-soft);
    color: var(--color-green);
    font-family: var(--font-mono);
    font-weight: 600;
}

.tool-category {
    display: inline-block;
    margin-bottom: var(--space-2);
    color: var(--color-green-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tool-card h3 {
    margin: 0 0 var(--space-2);
    font-size: 1.125rem;
}

.tool-card p {
    margin: 0 0 var(--space-5);
    color: var(--color-text-secondary);
    flex: 1;
}

.tool-card-meta {
    margin: 0 0 var(--space-3) !important;
    flex: 0 0 auto !important;
    font-size: 0.9rem;
}

.tool-card-link {
    color: var(--color-green);
    font-weight: 500;
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

.why-item h3 {
    margin: 0 0 var(--space-2);
}

.why-item p {
    margin: 0;
    color: var(--color-text-secondary);
}

/* Forms / tools */
.tool-layout {
    padding: var(--space-7) 0 var(--space-8);
}

.tool-panel {
    display: grid;
    gap: var(--space-5);
}

.field-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 500;
}

.form-control,
textarea.form-control,
select.form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-text);
    font-family: inherit;
    font-size: 1rem;
}

textarea.form-control,
.output-area {
    min-height: 220px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    resize: vertical;
}

textarea.form-control.tall,
.output-area.tall {
    min-height: 280px;
}

.tools-toolbar {
    margin-bottom: var(--space-6);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.chip:hover,
.chip.is-active {
    border-color: var(--color-green);
    background: var(--color-green-soft);
    color: var(--color-green-dark);
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.stat-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.stat-card strong {
    display: block;
    font-size: 1.35rem;
    line-height: 1.2;
}

.stat-card span {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.stat-card.is-over strong {
    color: var(--color-error);
}

.option-stack {
    margin: var(--space-5) 0 0;
    padding: 0;
    border: 0;
}

.option-stack .check-row {
    margin-top: var(--space-2);
}

.tool-note {
    margin: var(--space-5) 0 0;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.tool-content {
    margin-top: var(--space-7);
}

.related-tools {
    margin-top: var(--space-8);
}

.related-tools h2 {
    margin: 0 0 var(--space-5);
    font-size: 1.5rem;
}

.empty-tools {
    color: var(--color-text-secondary);
}

.prose ol {
    margin: 0 0 var(--space-5);
    padding-left: 1.2rem;
    color: var(--color-text-secondary);
}

.prose h3 {
    margin: var(--space-5) 0 var(--space-2);
    font-size: 1.05rem;
}

.calc-section {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.calc-section h2 {
    margin: 0 0 var(--space-4);
    font-size: 1.125rem;
}

.field-grid {
    display: grid;
    gap: var(--space-4);
}

.field-grid.two {
    grid-template-columns: 1fr;
}

.input-compact {
    max-width: 18rem;
}

.conversion-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-4);
}

.conversion-table th,
.conversion-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
}

.conversion-table td:last-child {
    font-family: var(--font-mono);
}

.result-line {
    margin: var(--space-4) 0 0;
    font-size: 1.05rem;
}

.result-line strong {
    color: var(--color-green-dark);
}

.password-output {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    min-height: 4.5rem;
}

.strength-bar {
    display: flex;
    gap: 6px;
    margin: 12px 0;
}

.strength-bar span {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--color-border-light);
}

.strength-bar.is-weak span:nth-child(1) {
    background: var(--color-error);
}

.strength-bar.is-fair span:nth-child(-n + 2) {
    background: var(--color-warning);
}

.strength-bar.is-good span:nth-child(-n + 3) {
    background: var(--color-green);
}

.strength-bar.is-strong span {
    background: var(--color-green-dark);
}

.strength-label {
    font-weight: 600;
}

.strength-label.is-weak {
    color: var(--color-error);
}

.strength-label.is-fair {
    color: var(--color-warning-text);
}

.strength-label.is-good,
.strength-label.is-strong {
    color: var(--color-green-dark);
}

.qr-preview {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
}

.qr-preview canvas {
    max-width: 100%;
    height: auto;
}

.color-field {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.color-field input[type="color"] {
    width: 48px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.winner-list {
    margin: var(--space-4) 0 0;
    padding: var(--space-4);
    border: 1px solid var(--color-green-light);
    border-radius: var(--radius-md);
    background: var(--color-green-soft);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.winner-list span {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.winner-list strong {
    font-size: 1.25rem;
}

.winner-list ol {
    margin: var(--space-3) 0 0;
    padding-left: 1.2rem;
}

.notepad-meta {
    margin: 0 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    text-align: right;
}

.wheel-layout {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

.wheel-stage {
    position: relative;
    width: min(100%, 360px);
    margin: 0 auto;
}

.wheel-stage canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.wheel-pointer {
    position: absolute;
    top: -4px;
    left: 50%;
    z-index: 2;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 18px solid var(--color-green);
    transform: translateX(-50%);
}

.range-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.range-row input[type="range"] {
    flex: 1;
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--color-text-muted);
}

.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: var(--color-green);
    box-shadow: 0 0 0 3px rgba(20, 168, 0, 0.16);
}

.output-area {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.status {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-weight: 500;
}

.status-success {
    color: var(--color-green-hover);
    background: var(--color-green-soft);
    border: 1px solid var(--color-green-light);
}

.status-error {
    color: var(--color-error);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
}

.status-warning {
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
    border: 1px solid #fde7a8;
}

.file-drop {
    padding: var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.file-drop input[type="file"] {
    width: 100%;
}

.file-drop.is-drag {
    border-color: var(--color-green);
    background: var(--color-green-soft);
}

.file-meta {
    margin: var(--space-3) 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.file-queue {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.file-queue li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.file-queue-name {
    flex: 1 1 12rem;
    font-weight: 500;
    word-break: break-word;
}

.file-queue-meta {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.file-queue-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.file-queue-btn {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    font-size: 0.85rem;
}

.file-queue-btn:hover,
.file-queue-btn:focus {
    border-color: var(--color-green);
}

.pdf-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.pdf-page-card {
    padding: var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.pdf-page-card canvas,
.pdf-page-card img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--color-white);
}

.pdf-page-card p {
    margin: var(--space-2) 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.pdf-page-card .btn-secondary {
    width: 100%;
}

.image-preview {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.image-preview figure {
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.image-preview figcaption {
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.image-preview img {
    display: block;
    max-width: 100%;
    height: auto;
}

.image-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.crop-stage {
    position: relative;
    width: 100%;
    height: min(70vh, 520px);
    margin-top: var(--space-4);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #181818;
    touch-action: none;
}

.crop-stage img {
    position: absolute;
    max-width: none;
    user-select: none;
    pointer-events: none;
    transform-origin: center center;
}

.crop-box {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--color-green);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    cursor: move;
}

.crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--color-white);
    border: 1px solid var(--color-green);
    pointer-events: auto;
}

.crop-handle.nw {
    top: -6px;
    left: -6px;
    cursor: nwse-resize;
}

.crop-handle.se {
    right: -6px;
    bottom: -6px;
    cursor: nwse-resize;
}

.check-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-weight: 500;
}

.bullet-list {
    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-4) 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.bullet-list li + li {
    margin-top: var(--space-3);
}

.page-intro {
    margin-bottom: var(--space-6);
}

.page-intro .hero-eyebrow {
    margin: 0 0 var(--space-3);
    color: var(--color-green);
}

.page-intro p {
    margin: var(--space-3) 0 0;
    color: var(--color-text-secondary);
    max-width: 40rem;
}

.features-platform {
    margin-bottom: var(--space-7);
}

.features-toc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
}

.features-toc .chip {
    text-decoration: none;
    min-height: 44px;
}

.features-category {
    margin-bottom: var(--space-7);
    scroll-margin-top: 5rem;
}

.features-category-title {
    margin: 0 0 var(--space-4);
    font-size: 1.15rem;
}

/* Footer */
.site-footer {
    padding: var(--space-7) 0;
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-light);
    color: var(--color-text-secondary);
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-5);
}

.footer-note {
    margin: var(--space-3) 0 0;
    max-width: 24rem;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
}

.footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-text);
    font-weight: 500;
}

.footer-nav a:hover {
    color: var(--color-green);
}

.prose {
    max-width: 42rem;
}

.prose h1 {
    margin: 0 0 var(--space-3);
}

.prose h2 {
    margin: var(--space-6) 0 var(--space-3);
    font-size: 1.25rem;
}

.prose p,
.prose li {
    color: var(--color-text-secondary);
}

.prose ul {
    margin: 0 0 var(--space-5);
    padding-left: 1.2rem;
}

.prose li + li {
    margin-top: var(--space-2);
}

.prose .btn-primary {
    margin-top: var(--space-4);
}

.prose .hero-eyebrow {
    margin: 0 0 var(--space-3);
    color: var(--color-green);
}

.prose .article-meta {
    color: var(--color-text-muted);
}

.article-meta {
    margin: 0 0 var(--space-5);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Blazor / validation leftovers */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-green);
}

.invalid {
    outline: 1px solid var(--color-error);
}

.validation-message {
    color: var(--color-error);
}

.blazor-error-boundary {
    background: var(--color-error);
    padding: 1rem;
    color: var(--color-white);
}

#blazor-error-ui {
    color-scheme: light only;
    background: var(--color-warning-bg);
    color: var(--color-text);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui a {
    color: var(--color-green);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (min-width: 720px) {
    .tool-grid,
    .why-grid,
    .tool-panel,
    .stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .field-grid.two {
        grid-template-columns: 1fr 1fr;
    }

    .image-preview,
    .image-stats {
        grid-template-columns: 1fr 1fr;
    }

    .image-stats {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .wheel-layout {
        grid-template-columns: minmax(240px, 360px) 1fr;
    }
}

@media (min-width: 1024px) {
    .tool-grid,
    .why-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 719.98px) {
    .nav-toggle-label {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 12px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-white);
        color: var(--color-text);
        font-weight: 500;
        cursor: pointer;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        padding: var(--space-4);
        background: var(--color-white);
        border-bottom: 1px solid var(--color-border-light);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .nav-toggle:checked ~ .site-nav {
        display: flex;
    }

    .site-header-inner {
        position: relative;
    }

    .hero,
    .section,
    .tool-layout {
        padding-top: var(--space-7);
        padding-bottom: var(--space-7);
    }

    .btn,
    .btn-primary,
    .btn-secondary {
        width: 100%;
    }

    .btn-row .btn,
    .btn-row .btn-primary,
    .btn-row .btn-secondary {
        width: auto;
        flex: 1 1 auto;
    }
}

.file-share-drop {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    min-height: 220px;
    padding: var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    text-align: center;
}

.file-share-drop.is-drag {
    border-color: var(--color-green);
    background: var(--color-green-soft);
}

.file-share-drop-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.file-share-name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    word-break: break-word;
}

.file-share-ready {
    margin: 0 0 var(--space-3);
    font-weight: 600;
}

.file-share-progress-label {
    margin: var(--space-4) 0 var(--space-2);
}

.file-share-bar {
    height: 10px;
    border-radius: 999px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.file-share-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-green);
}

.file-share-email-title {
    margin: var(--space-7) 0 var(--space-4);
    font-size: 1.25rem;
}

.field-optional {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.privacy-scan {
    margin: var(--space-6) 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
}

.privacy-scan h2 {
    margin: 0 0 var(--space-2);
    font-size: 1.25rem;
}

.scan-count {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
    font-weight: 600;
}

.finding-list {
    display: grid;
    gap: var(--space-3);
}

.finding-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.finding-row.is-location {
    border-color: var(--color-warning);
    background: var(--color-warning-bg);
}

.finding-body {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.finding-badge {
    display: inline-block;
    width: fit-content;
    margin-bottom: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.finding-badge.is-high {
    color: var(--color-error);
    background: var(--color-error-bg);
}

.finding-badge.is-medium {
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
}

.finding-badge.is-possible {
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
}

.finding-preview {
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    word-break: break-word;
}

.redact-stage {
    position: relative;
    width: 100%;
    height: min(70vh, 520px);
    margin-top: var(--space-4);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #181818;
    touch-action: none;
}

.redact-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

.risk-banner {
    margin-top: var(--space-5);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-weight: 700;
}

.risk-banner.is-high {
    color: var(--color-error);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
}

.risk-banner.is-medium {
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
    border: 1px solid #fde7a8;
}

.risk-banner.is-low {
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
}

.risk-banner.is-inconclusive {
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
    border: 1px solid #fde7a8;
}

.auth-preview-wrap {
    margin-top: 24px;
}

.auth-preview {
    display: block;
    max-width: 100%;
    max-height: 280px;
    margin-top: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}

.evidence-grid {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.evidence-card {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    background: #fff;
}

.evidence-card h3 {
    margin: 0 0 6px;
    font-size: 0.95rem;
}

.evidence-card p {
    margin: 0;
    color: var(--color-text-secondary);
}

.auth-details {
    margin-top: 24px;
}

.auth-details summary {
    cursor: pointer;
    font-weight: 600;
}

.privacy-scan .bullet-list {
    margin-top: 0;
    border: 0;
    background: transparent;
    padding-left: 1.2rem;
}

.qa-thread {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.qa-turn {
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
}

.qa-q {
    margin: 0 0 var(--space-3);
    font-weight: 600;
}

.qa-a {
    margin: 0;
    color: var(--color-text);
    white-space: pre-wrap;
}

.qa-mode {
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.qa-hits {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.qa-hit {
    display: block;
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.qa-hit:hover,
.qa-hit:focus {
    border-color: var(--color-green);
}

.match-results {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.match-block {
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
}

.match-block h2 {
    margin: 0 0 var(--space-3);
    font-size: 1.15rem;
}

.match-block p {
    margin: 0 0 var(--space-2);
}

.match-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.match-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.match-cat {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

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

.sr-privacy {
    margin: 0 0 var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-green-light);
    border-radius: var(--radius-lg);
    background: var(--color-green-soft);
}

.sr-privacy p {
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}

.sr-privacy p:last-child {
    margin-bottom: 0;
}

.sr-privacy-title {
    font-weight: 600;
}

.sr-card {
    padding: var(--space-6);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.sr-card h2 {
    margin: 0 0 var(--space-3);
    font-size: 1.25rem;
}

.sr-card h3 {
    margin: var(--space-6) 0 var(--space-3);
    font-size: 1.1rem;
}

.sr-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 500;
}

.sr-toggle input {
    width: 1.1rem;
    height: 1.1rem;
}

.sr-advanced {
    margin-top: var(--space-5);
}

.sr-advanced summary {
    cursor: pointer;
    font-weight: 600;
}

.sr-checks {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.sr-checks li {
    padding-left: 1.4rem;
    position: relative;
}

.sr-checks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-green);
    font-weight: 600;
}

.sr-meter {
    margin-top: var(--space-3);
}

.sr-meter-track {
    height: 10px;
    border-radius: 999px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.sr-meter-track span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-green);
}

.sr-cam-preview {
    display: block;
    width: 140px;
    height: 140px;
    margin-top: var(--space-3);
    object-fit: cover;
    border-radius: 50%;
    background: #111;
}

.sr-countdown {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-7);
    text-align: center;
}

#screen-recorder-root [hidden] {
    display: none !important;
}

.sr-count-label {
    margin: 0;
    font-size: 4rem;
    font-weight: 600;
    color: var(--color-text);
}

.sr-rec-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.sr-rec-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-weight: 600;
}

.sr-rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-error);
}

.sr-rec-label[data-state="paused"] .sr-rec-dot {
    background: var(--color-text-secondary);
}

.sr-rec-timer {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.sr-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: #111;
    min-height: 220px;
}

.sr-live-video,
.sr-live-canvas,
.sr-preview {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: #111;
}

.sr-hidden-video {
    position: absolute;
    width: 160px;
    height: 90px;
    left: -9999px;
    top: 0;
}

.sr-live-mic {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.sr-live-mic p {
    margin: 0;
    font-weight: 500;
}

.sr-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: var(--space-5) 0 0;
}

.sr-meta div {
    margin: 0;
}

.sr-meta dt {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.sr-meta dd {
    margin: 4px 0 0;
    font-weight: 600;
}

.sr-share-confirm {
    margin-top: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

#pdf-editor-root [hidden] {
    display: none !important;
}

.pe-wrap {
    max-width: 1280px;
}

.pe-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
}

.pe-sep {
    width: 1px;
    height: 28px;
    background: var(--color-border);
    margin: 0 4px;
}

.pe-more {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 100%;
}

.pe-zoom-select {
    width: auto;
    min-width: 120px;
}

.pe-mobile-only {
    display: none;
}

.pe-shell {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 220px;
    gap: var(--space-4);
    align-items: start;
}

.pe-thumbs,
.pe-props {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
    padding: var(--space-3);
}

.pe-page-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-3);
}

.pe-page-actions .btn-secondary {
    width: 100%;
}

.pe-thumb-list {
    display: grid;
    gap: 8px;
    max-height: min(70vh, 720px);
    overflow: auto;
}

.pe-thumb {
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.pe-thumb.is-active {
    border-color: var(--color-green);
    background: var(--color-green-soft);
}

.pe-thumb canvas {
    width: 72px;
    height: auto;
    background: #fff;
    border: 1px solid var(--color-border-light);
}

.pe-stage {
    min-width: 0;
    overflow: auto;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.pe-canvas-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.pe-canvas-wrap canvas {
    display: block;
    background: #fff;
    box-shadow: 0 1px 8px rgba(17, 17, 17, 0.08);
}

.pe-overlay {
    position: absolute;
    left: 0;
    top: 0;
    touch-action: none;
    cursor: crosshair;
}

.pe-obj {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
}

.pe-obj.is-selected {
    outline: 2px solid var(--color-green);
    outline-offset: 1px;
}

.pe-obj img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.pe-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color-green);
    border: 1px solid #fff;
    pointer-events: auto;
    z-index: 2;
}

.pe-handle-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.pe-handle-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.pe-handle-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.pe-handle-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }

.pe-props .field-label,
.pe-props .form-control,
.pe-props .sr-toggle {
    margin-top: 8px;
}

.pe-form-field {
    display: grid;
    gap: 4px;
    margin-top: 8px;
}

.pe-modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: rgba(17, 17, 17, 0.4);
}

.pe-modal-card {
    width: min(520px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    border: 1px solid var(--color-border);
}

.pe-sign-pad {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 140px;
    margin: 12px 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    touch-action: none;
}

@media (max-width: 1023px) {
    .pe-mobile-only {
        display: inline-flex;
    }

    .pe-shell {
        grid-template-columns: 1fr;
    }

    .pe-thumbs,
    .pe-props {
        display: none;
    }

    .pe-thumbs.is-open,
    .pe-props.is-open {
        display: block;
    }

    .pe-page-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .pe-page-actions .btn-secondary {
        width: auto;
    }

    .pe-thumb-list {
        grid-auto-flow: column;
        grid-auto-columns: 96px;
        max-height: none;
        overflow-x: auto;
    }
}

@media (max-width: 767px) {
    .pe-toolbar .chip,
    .pe-toolbar .btn-secondary,
    .pe-toolbar .btn-primary {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 0.85rem;
    }

    .pe-sep {
        display: none;
    }
}

#script-to-video-root [hidden] {
    display: none !important;
}

.stv-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.stv-steps li {
    position: relative;
}

.stv-steps li + li::before {
    content: "→";
    margin-right: 16px;
    color: var(--color-border);
}

.stv-card {
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.stv-card h2 {
    margin-top: 0;
}

.stv-modes {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-5);
}

.stv-modes legend {
    font-weight: 600;
    margin-bottom: 12px;
}

.stv-modes label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 12px;
}

.stv-engine-label {
    font-weight: 600;
    margin: 0 0 12px;
}

.stv-status-line {
    margin: var(--space-4) 0;
    font-weight: 500;
}

.stv-scene-list,
.stv-image-list {
    display: grid;
    gap: var(--space-4);
}

.stv-scene {
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.stv-scene h3 {
    margin-top: 0;
}

.stv-image-row img {
    display: block;
    max-width: 180px;
    max-height: 120px;
    margin-top: 8px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.stv-canvas {
    display: block;
    width: 100%;
    max-width: 960px;
    height: auto;
    margin: 0 0 var(--space-3);
    background: #111;
    border-radius: var(--radius-md);
}

.stv-seek {
    width: 100%;
    max-width: 960px;
    margin: 0 0 var(--space-4);
}

.stv-progress {
    margin-top: var(--space-4);
}

.stv-bar {
    height: 8px;
    border-radius: 99px;
    background: var(--color-border-light);
    overflow: hidden;
    margin: 8px 0 12px;
}

.stv-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-green);
}

@media (max-width: 767px) {
    .stv-steps {
        font-size: 0.8rem;
    }

    .stv-canvas {
        border-radius: var(--radius-sm);
    }
}

#text-to-speech-root [hidden] {
    display: none !important;
}

.tts-card {
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
    margin-bottom: var(--space-5);
}

.tts-card h2 {
    margin-top: 0;
}

.tts-drop {
    margin-top: var(--space-4);
}

.tts-engine-label {
    font-weight: 600;
    margin: 0 0 12px;
}

.tts-voice-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.tts-voice-group {
    margin: 16px 0 0;
    font-size: 0.95rem;
}

.tts-voice-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.tts-voice-card.is-selected {
    border-color: var(--color-green);
    box-shadow: inset 0 0 0 1px var(--color-green);
}

.tts-voice-name {
    margin: 0 0 4px;
    font-weight: 600;
}

.tts-selected {
    margin: 0 0 8px;
    font-weight: 600;
    min-height: 1.2em;
}

.tts-compare {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.tts-player {
    display: block;
    width: 100%;
    margin: 16px 0;
}

.tts-compare-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
}

@media (max-width: 767px) {
    .tts-voice-card {
        grid-template-columns: auto 1fr;
    }

    .tts-player {
        min-height: 40px;
    }
}

.ca-preview {
    margin: 16px 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.ca-heading {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 8px;
}

.tz-grid {
    display: grid;
    gap: 0;
    margin: 16px 0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: auto;
}

.tz-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-light);
}

.tz-row:last-child {
    border-bottom: 0;
}

.tz-head {
    font-weight: 600;
    background: var(--color-bg-secondary);
}

.tz-row.is-good {
    box-shadow: inset 4px 0 0 var(--color-green);
}

.tz-row.is-compromise {
    box-shadow: inset 4px 0 0 #c4a000;
}

.seo-card,
.seo-social {
    max-width: 640px;
    padding: var(--space-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
    margin: 12px 0;
}

.seo-url {
    color: #202124;
    font-size: 0.875rem;
    margin: 0 0 4px;
}

.seo-title {
    color: #1a0dab;
    font-size: 1.25rem;
    margin: 0 0 8px;
}

.diff-hunk {
    white-space: pre-wrap;
    padding: 2px 8px;
}

.diff-hunk.is-added::before {
    content: "+ ";
    font-weight: 600;
}

.diff-hunk.is-removed::before {
    content: "− ";
    font-weight: 600;
}

.diff-hunk.is-equal::before {
    content: "  ";
}

.diff-hunk.is-added {
    background: #e6f4ea;
}

.diff-hunk.is-removed {
    background: #fce8e6;
}

.table-scroll {
    overflow: auto;
    max-height: 420px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.dn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.dn-table th,
.dn-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
    white-space: nowrap;
}

.dn-table th {
    position: sticky;
    top: 0;
    background: var(--color-bg-secondary);
}

@media (max-width: 767px) {
    .tz-row {
        font-size: 0.85rem;
    }

    .ca-preview,
    .seo-card {
        padding: var(--space-4);
    }
}

.sitemap-tabs {
    margin-top: var(--space-4);
}

.sitemap-tabs > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sitemap-tablist .chip {
    cursor: pointer;
}

#sitemap-tab-html:checked ~ .sitemap-tablist label[for="sitemap-tab-html"],
#sitemap-tab-xml:checked ~ .sitemap-tablist label[for="sitemap-tab-xml"] {
    border-color: var(--color-green);
    background: var(--color-green-soft);
    color: var(--color-green-dark);
}

.sitemap-actions {
    margin-top: 16px;
}

.sitemap-panel {
    display: none;
    margin-top: var(--space-6);
}

#sitemap-tab-html:checked ~ .sitemap-panel-html,
#sitemap-tab-xml:checked ~ .sitemap-panel-xml {
    display: block;
}

.sitemap-html {
    margin-top: var(--space-6);
}

.sitemap-group {
    margin-top: var(--space-6);
}

.sitemap-group h2 {
    margin: 0 0 var(--space-3);
    font-size: 1.15rem;
}

.sitemap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.sitemap-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
}

.sitemap-list a {
    font-weight: 600;
    color: var(--color-text);
}

.sitemap-list a:hover {
    color: var(--color-green);
}

.sitemap-xml {
    min-height: 360px;
    max-height: 70vh;
    overflow: auto;
    margin-top: 12px;
    white-space: pre;
}

.mtx-modes input[type="radio"],
.mtx-tabs > input[type="radio"],
#media-text-root .chip input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#mtx-mode-spoken:checked ~ label[for="mtx-mode-spoken"],
#mtx-mode-visible:checked ~ label[for="mtx-mode-visible"],
#mtx-mode-both:checked ~ label[for="mtx-mode-both"],
#mtx-tab-combined:checked ~ .sitemap-tablist label[for="mtx-tab-combined"],
#mtx-tab-spoken:checked ~ .sitemap-tablist label[for="mtx-tab-spoken"],
#mtx-tab-visible:checked ~ .sitemap-tablist label[for="mtx-tab-visible"],
#media-text-root .chip:has(input[type="radio"]:checked) {
    border-color: var(--color-green);
    background: var(--color-green-soft);
    color: var(--color-green-dark);
}

.mtx-player-card {
    margin: var(--space-5) 0;
}

.mtx-player {
    position: relative;
    background: #111;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mtx-player video,
.mtx-player audio {
    display: block;
    width: 100%;
    max-height: 420px;
    background: #111;
}

.mtx-player.is-custom {
    cursor: crosshair;
}

.mtx-region {
    position: absolute;
    border: 2px solid #14A800;
    background: rgba(20, 168, 0, 0.12);
    pointer-events: none;
    box-sizing: border-box;
}

.mtx-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.mtx-dual p {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
}

.mtx-timeline {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    max-height: 240px;
    overflow: auto;
}

.mtx-cue {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
}

.mtx-cue:hover {
    border-color: var(--color-green);
}

.mtx-cue-screen {
    border-left: 3px solid var(--color-green);
}

.mtx-cue-spoken {
    border-left: 3px solid var(--color-text-secondary);
}

.mtx-tts {
    margin-top: var(--space-4);
}

.mtx-tabs {
    margin: var(--space-4) 0;
}

.expiry-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.expiry-badge.is-expired {
    color: var(--color-error);
    background: var(--color-error-bg);
}

.expiry-badge.is-soon {
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
}

.expiry-badge.is-active {
    color: var(--color-green-dark);
    background: var(--color-green-soft);
}

.scan-stage,
.pp-stage {
    position: relative;
    width: 100%;
    min-height: 280px;
    margin-top: var(--space-4);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #181818;
    touch-action: none;
}

.scan-stage canvas,
.pp-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.scan-handle {
    position: absolute;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: grab;
    z-index: 2;
}

.scan-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--color-white);
    background: var(--color-green);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(20, 168, 0, 0.35);
}

.scan-pages-title {
    margin: var(--space-5) 0 var(--space-3);
    font-size: 1.15rem;
}

.scan-page-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.scan-page-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.scan-page-item.is-active {
    border-color: var(--color-green);
    background: var(--color-green-soft);
}

.scan-page-item img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.scan-page-item .btn-row {
    grid-column: 1 / -1;
}

.pp-stage {
    background: var(--color-bg-secondary);
    max-width: 360px;
}

.pp-guide {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pp-oval {
    position: absolute;
    left: 18%;
    width: 64%;
    height: var(--head, 62%);
    top: 14%;
    border: 2px dashed var(--color-green);
    border-radius: 50%;
}

.pp-eye {
    position: absolute;
    left: 10%;
    right: 10%;
    top: var(--eye, 42%);
    border-top: 1px dashed rgba(20, 168, 0, 0.7);
}

.pp-head-min,
.pp-head-max {
    position: absolute;
    left: 6%;
    width: 12px;
    border-top: 2px solid rgba(20, 168, 0, 0.45);
}

.pp-head-min { top: 16%; }
.pp-head-max { top: 78%; }

.pp-warnings {
    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-4) 1.4rem;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.pp-warnings li + li {
    margin-top: var(--space-2);
}

.pp-review {
    margin-bottom: var(--space-5);
}

.receipt-fields,
.guide-steps {
    display: grid;
    gap: var(--space-3);
}

.guide-step-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.json-toolbar {
    display: grid;
    gap: var(--space-4);
}

.json-search-bar {
    display: grid;
    gap: var(--space-2);
}

.json-editor {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    min-height: 360px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    overflow: hidden;
}

.json-editor.is-large .json-highlight {
    display: none;
}

.json-gutter {
    margin: 0;
    padding: 12px 8px;
    height: 360px;
    overflow: hidden;
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.55;
    text-align: right;
    user-select: none;
}

.json-gutter-line {
    display: block;
}

.json-gutter-error {
    color: var(--color-error);
    font-weight: 600;
}

.json-editor-main {
    position: relative;
    min-width: 0;
}

.json-highlight,
.json-input {
    margin: 0;
    padding: 12px 14px;
    border: 0;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre;
    tab-size: 2;
}

.json-highlight {
    position: absolute;
    inset: 0;
    overflow: auto;
    pointer-events: none;
    color: var(--color-text);
}

.json-input {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 360px;
    resize: none;
    background: transparent;
    color: transparent;
    caret-color: var(--color-text);
    overflow: auto;
}

.json-input::selection {
    background: rgba(20, 168, 0, 0.22);
    color: transparent;
}

.json-tok-key { color: var(--color-green-dark); }
.json-tok-string { color: var(--color-text); }
.json-tok-number { color: #0b6e99; }
.json-tok-bool { color: #8a5b00; }
.json-tok-null { color: var(--color-text-muted); }
.json-tok-punct { color: var(--color-text-secondary); }
.json-tok-error { background: var(--color-error-bg); }

.json-tree,
.json-fixer {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.json-tree-children {
    margin-left: 1rem;
    border-left: 1px solid var(--color-border-light);
    padding-left: var(--space-3);
}

.json-tree-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    padding: 2px 0;
}

.json-tree-toggle,
.json-tree-copy {
    border: 0;
    background: transparent;
    color: var(--color-green);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.json-tree-copy {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.json-tree-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.json-fix-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin: var(--space-2) 0;
}

.json-fix-preview {
    max-height: 180px;
    overflow: auto;
    padding: var(--space-3);
    background: var(--color-bg-secondary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    white-space: pre-wrap;
}

.json-tree-toggle,
.json-tree-copy {
    min-height: 44px;
    min-width: 44px;
}

.json-tree-node.is-match > .json-tree-row {
    background: var(--color-green-soft);
    border-radius: var(--radius-sm);
}

.html-preview-wrap {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.html-preview-frame {
    width: 100%;
    min-height: 240px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

@media (max-width: 719px) {
    .json-editor {
        grid-template-columns: 2.5rem 1fr;
    }
}

.tool-layout .chip {
    min-height: 44px;
}

.gemini-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.gemini-title-row h1 {
    margin: 0;
}

.gemini-cloud-badge {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--color-green);
    border-radius: 999px;
    color: var(--color-green-hover);
    background: var(--color-green-soft);
    font-size: 0.85rem;
    font-weight: 600;
}

.gemini-powered,
.gemini-usage {
    margin: var(--space-3) 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.gemini-disclosure {
    margin: 0 0 var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--color-warning-border, #fde7a8);
    border-radius: var(--radius-md);
    background: var(--color-warning-bg);
}

.gemini-disclosure h2 {
    margin: 0 0 var(--space-3);
    font-size: 1rem;
}

.gemini-disclosure p {
    margin: 0 0 var(--space-3);
}

.gemini-disclosure p:last-child {
    margin-bottom: 0;
}

.gemini-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.gemini-workspace {
    margin-bottom: var(--space-6);
}

.gemini-processing {
    margin-top: 16px;
    background: var(--color-green-soft);
    border: 1px solid var(--color-green-light);
}

.gemini-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-green);
    border-radius: 50%;
    animation: gemini-spin 0.8s linear infinite;
}

@keyframes gemini-spin {
    to { transform: rotate(360deg); }
}

.gemini-chat {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.gemini-bubble {
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.gemini-bubble-user {
    background: var(--color-white);
}

.gemini-bubble-role {
    margin: 0 0 var(--space-2);
    font-size: 0.85rem;
    color: var(--color-green);
}

.gemini-markdown {
    margin-top: var(--space-4);
}

.gemini-markdown pre,
.gemini-json {
    overflow: auto;
    max-height: 28rem;
}

.gemini-raw {
    margin-top: var(--space-4);
}

.gemini-file-list {
    margin: var(--space-3) 0 0;
    padding-left: 1.2rem;
    color: var(--color-text-secondary);
}

.gemini-sources {
    margin-top: var(--space-4);
}

.gemini-sources ul {
    margin: var(--space-2) 0 0;
    padding-left: 1.2rem;
}

.gemini-sources a {
    color: #14A800;
}

.gemini-workspace .check-row {
    margin-top: var(--space-4);
}

.gemini-generated-note {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-green-light);
    border-radius: var(--radius-md);
    background: var(--color-green-soft);
    color: var(--color-text-secondary);
}

.gemini-image-preview,
.gemini-image-pair {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.gemini-image-pair {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    align-items: start;
}

.gemini-image-preview figure,
.gemini-original {
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.gemini-image-preview img,
.gemini-original img {
    display: block;
    max-width: 100%;
    height: auto;
}

.gemini-image-preview figcaption,
.gemini-original figcaption {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.gemini-video-preview,
.gemini-audio-preview,
.gemini-live-preview {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.gemini-audio-preview figure,
.gemini-live-preview {
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.gemini-audio-preview audio,
.gemini-live-preview video,
.gemini-video-preview video {
    display: block;
    width: 100%;
    max-width: 36rem;
}

.gemini-video-preview figure {
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

@media (max-width: 719.98px) {
    .gemini-title-row {
        align-items: flex-start;
    }

    .gemini-title-row h1 {
        font-size: 1.5rem;
    }

    .gemini-options {
        grid-template-columns: 1fr;
    }

    .gemini-workspace .btn-row .btn-copy,
    .btn-row .btn-copy {
        width: auto;
        flex: 1 1 auto;
    }
}

/* Phase 2 — Resume Builder & Batch Images */
.rb-layout .rb-tabs {
    display: none;
    margin-bottom: 12px;
}

.rb-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.rb-panels [data-rb-panel="preview"] {
    display: block !important;
}

.rb-preview,
.rb-sheet {
    background: #fff;
    border: 1px solid var(--color-border-light, #e5e5e5);
    padding: 20px;
    color: #111;
}

.rb-sheet h1 {
    margin: 0 0 4px;
    font-size: 1.6rem;
}

.rb-sheet h2 {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
    margin: 16px 0 8px;
}

.rb-sheet.rb-modern h1 {
    color: #14A800;
}

.rb-sheet.rb-simple {
    font-family: Georgia, "Times New Roman", serif;
}

.rb-sheet.rb-technical h2 {
    font-family: ui-monospace, Consolas, monospace;
}

.rb-item {
    border: 1px solid var(--color-border-light, #e5e5e5);
    padding: 12px;
    margin-bottom: 12px;
}

.batch-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.4fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light, #e5e5e5);
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .rb-layout .rb-tabs {
        display: flex;
    }

    .rb-panels {
        grid-template-columns: 1fr;
    }

    .rb-panels [data-rb-panel][hidden] {
        display: none !important;
    }

    .batch-row {
        grid-template-columns: 1fr;
    }
}

/* Smart Workflows */
.workflow-runner-grid {
    display: grid;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(220px, 280px);
    gap: var(--space-5);
    margin-top: var(--space-5);
    align-items: start;
}

.workflow-progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: var(--space-3);
    max-width: 420px;
}

.workflow-progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-border);
    flex: 0 0 auto;
}

.workflow-progress-dot.done,
.workflow-progress-dot.current {
    background: var(--color-green);
}

.workflow-progress-dot.current {
    box-shadow: 0 0 0 3px var(--color-green-light);
}

.workflow-progress-line {
    height: 2px;
    flex: 1 1 auto;
    background: var(--color-border);
    min-width: 12px;
}

.workflow-progress-line.done {
    background: var(--color-green);
}

.workflow-steps ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.workflow-step-btn {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    border: 1px solid var(--color-border-light);
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 10px;
    cursor: pointer;
    color: inherit;
}

.workflow-step-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.workflow-steps li.current .workflow-step-btn {
    border-color: var(--color-green);
    background: var(--color-green-soft);
}

.workflow-step-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    flex: 0 0 auto;
}

.workflow-steps li.current .workflow-step-order,
.workflow-steps li.done .workflow-step-order {
    background: var(--color-green);
    color: var(--color-white);
}

.workflow-step-btn em {
    display: block;
    font-style: normal;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.workflow-active,
.workflow-versions {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--color-white);
}

.workflow-version-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.workflow-version-list li {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 10px;
}

.workflow-version-list li.current {
    border-color: var(--color-green);
    background: var(--color-green-soft);
}

.workflow-preview img,
.workflow-preview iframe {
    width: 100%;
    max-height: 280px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    margin: 8px 0;
}

.workflow-preview-text {
    max-height: 200px;
    overflow: auto;
    font-size: 0.85rem;
    background: var(--color-bg-secondary);
    padding: 8px;
    border-radius: var(--radius-sm);
}

.workflow-runner .file-drop {
    position: relative;
}

.workflow-runner .file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.workflow-actions {
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .workflow-runner-grid {
        grid-template-columns: 1fr;
    }
}

.workflow-recommend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.workflow-recommend-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tool-card-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tool-card-wrap .tool-card {
    height: 100%;
}

.tool-favorite-btn {
    align-self: flex-start;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.tool-favorite-btn[aria-pressed="true"] {
    border-color: var(--color-green);
    color: var(--color-green-dark);
    background: var(--color-green-soft);
}

.workspace-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.workspace-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

@media (max-width: 768px) {
    .workspace-grid {
        grid-template-columns: 1fr;
    }
}

.assistant-layout .assistant-hero {
    margin-bottom: var(--space-5);
}

.assistant-eyebrow {
    margin: 0 0 var(--space-2);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted, #5c6b73);
}

.assistant-lead {
    max-width: 42rem;
    margin: 0;
}

.assistant-starters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 var(--space-4);
}

.assistant-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--space-4);
}

.assistant-count {
    color: var(--color-muted, #5c6b73);
    font-size: 0.9rem;
}

.assistant-chat {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.assistant-empty {
    margin: 0;
    color: var(--color-muted, #5c6b73);
}

.assistant-message {
    padding: var(--space-4);
    border: 1px solid var(--color-border, #d9e2e8);
    border-radius: var(--radius-md);
    background: #fff;
}

.assistant-message.is-user {
    background: var(--color-green-soft, #eefaf1);
}

.assistant-message h2 {
    margin: 0 0 var(--space-2);
    font-size: 0.95rem;
}

.assistant-message p {
    margin: 0;
    white-space: pre-wrap;
}

.assistant-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.assistant-card {
    padding: var(--space-3);
    border: 1px solid var(--color-border, #d9e2e8);
    border-radius: var(--radius-md);
    background: #fff;
}

.assistant-card h3 {
    margin: 0.35rem 0;
    font-size: 1rem;
}

.assistant-card p {
    margin: 0 0 var(--space-3);
    font-size: 0.92rem;
}

.assistant-compose {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.assistant-compose textarea {
    width: 100%;
    min-height: 5rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border, #d9e2e8);
    border-radius: var(--radius-md);
    resize: vertical;
}

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