.omni-local-page {
    --omni-local: #155eef;
    --omni-local-accent: #17b897;
    --omni-soft: color-mix(in srgb, var(--omni-local) 8%, var(--omni-surface, #fff));
}

.omni-tool-heading-row { padding-block: .5rem; }
.omni-local-heading-icon {
    display: inline-flex;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 3.25rem;
    align-items: center;
    justify-content: center;
    color: var(--omni-local);
    background: var(--omni-soft);
    border: 1px solid color-mix(in srgb, var(--omni-local) 15%, transparent);
    border-radius: 1rem;
    font-size: 1.35rem;
}
.omni-tool-page-title { color: var(--omni-text, #172033); font-size: clamp(1.8rem, 4vw, 2.65rem); letter-spacing: -.035em; }
[dir="rtl"] .omni-tool-page-title { letter-spacing: 0; }
.omni-local-privacy { color: inherit; background: var(--omni-soft); border: 1px solid color-mix(in srgb, var(--omni-local) 18%, var(--omni-border, #e4eaf2)); border-radius: .9rem; }
.omni-local-page > .card { border: 1px solid var(--omni-border, #e4eaf2) !important; border-radius: 1.25rem; box-shadow: 0 12px 34px rgba(21,35,56,.07) !important; }

.omni-local-form { display: grid; gap: 1rem; }
.omni-local-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 1rem; }
.omni-local-grid > .col-span-12 { grid-column: span 12; }
.omni-local-grid > .col-span-8 { grid-column: span 8; }
.omni-local-grid > .col-span-6 { grid-column: span 6; }
.omni-local-grid > .col-span-4 { grid-column: span 4; }
.omni-local-grid > .col-span-3 { grid-column: span 3; }
.omni-local-result { padding: 1rem; background: color-mix(in srgb, var(--omni-local) 6%, var(--omni-surface, #fff)); border: 1px solid color-mix(in srgb, var(--omni-local) 22%, var(--omni-border, #e4eaf2)); border-radius: 1rem; }
.omni-local-result strong { font-size: 1.2rem; }
.omni-local-error { padding: .85rem; color: var(--omni-danger, #991b1b); background: color-mix(in srgb, var(--omni-danger, #c4324d) 8%, var(--omni-surface, #fff)); border: 1px solid color-mix(in srgb, var(--omni-danger, #c4324d) 26%, var(--omni-border, #e4eaf2)); border-radius: .75rem; }
.omni-course-row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(7rem,.7fr) minmax(8rem,.8fr) auto; gap: .75rem; align-items: end; padding: 1rem; background: var(--omni-surface, #fff); border: 1px solid var(--omni-border, #e2e8f0); border-radius: .85rem; }
.omni-course-remove { min-width: 2.75rem; min-height: 2.75rem; }
.omni-student-cta { padding: 1rem; background: var(--omni-soft); border-inline-start: 4px solid var(--omni-local); border-radius: .75rem; }
.omni-image-drop { padding: 1.5rem; text-align: center; background: var(--omni-surface-soft, #f8fafc); border: 2px dashed color-mix(in srgb, var(--omni-muted, #667085) 65%, transparent); border-radius: 1rem; transition: .2s; }
.omni-image-drop.is-dragging { background: var(--omni-soft); border-color: var(--omni-local); }
.omni-image-results { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; }
.omni-image-card { min-width: 0; padding: 1rem; background: var(--omni-surface, #fff); border: 1px solid var(--omni-border, #e2e8f0); border-radius: 1rem; }
.omni-image-card img { display: block; width: 100%; height: 150px; margin-bottom: .75rem; object-fit: contain; background: var(--omni-surface-soft, #f8fafc); border-radius: .65rem; }
.omni-diff-list { max-height: 24rem; overflow: auto; border: 1px solid var(--omni-border, #e2e8f0); border-radius: .75rem; }
.omni-diff-line { padding: .5rem .75rem; overflow-wrap: anywhere; white-space: pre-wrap; border-bottom: 1px solid var(--omni-border, #f1f5f9); }
.omni-diff-line:last-child { border-bottom: 0; }
.omni-diff-added { color: #166534; background: #f0fdf4; }
.omni-diff-removed { color: #991b1b; background: #fef2f2; }
.omni-diff-same { color: var(--omni-muted, #475569); }
.omni-code-output { max-height: 28rem; overflow: auto; overflow-wrap: anywhere; direction: ltr; text-align: left; white-space: pre-wrap; }
.omni-local-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.omni-local-actions .btn { min-height: 2.75rem; }
.omni-local-stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(135px,1fr)); gap: .75rem; }
.omni-local-stat { padding: 1rem; background: var(--omni-surface, #fff); border: 1px solid var(--omni-border, #e2e8f0); border-radius: .75rem; }
.omni-local-stat strong { display: block; font-size: 1.4rem; }
.omni-weight-total.is-invalid { color: var(--omni-danger, #b91c1c); }
.omni-weight-total.is-valid { color: var(--omni-success, #166534); }
.omni-content-section { color: var(--omni-text, #172033); }
.omni-content-section > h2 { margin-bottom: .75rem; font-size: clamp(1.35rem, 3vw, 1.75rem); }
.omni-content-section p, .omni-content-section li { color: var(--omni-muted, #667085); line-height: 1.8; }
.omni-related-card { color: var(--omni-text, #172033); background: var(--omni-surface, #fff); border-color: var(--omni-border, #e4eaf2); border-radius: 1rem; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.omni-related-card:hover { color: var(--omni-text, #172033); border-color: color-mix(in srgb, var(--omni-local) 32%, var(--omni-border, #e4eaf2)); box-shadow: 0 10px 28px rgba(21,35,56,.08); transform: translateY(-2px); }
.omni-related-icon { display: inline-grid; width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; place-items: center; color: var(--omni-local); background: var(--omni-soft); border-radius: .8rem; }

[data-theme-style="dark"] .omni-diff-added { color: #7ee2b8; background: rgba(21,149,112,.14); }
[data-theme-style="dark"] .omni-diff-removed { color: #ff9eb0; background: rgba(196,50,77,.14); }

@media(max-width:767.98px) {
    .omni-local-grid > .col-span-8,
    .omni-local-grid > .col-span-6,
    .omni-local-grid > .col-span-4,
    .omni-local-grid > .col-span-3 { grid-column: span 12; }
    .omni-course-row { grid-template-columns: 1fr 1fr; }
    .omni-course-row .omni-course-name { grid-column: span 2; }
    .omni-course-remove { width: 100%; }
}
@media(max-width:420px) {
    .omni-course-row { grid-template-columns: 1fr; }
    .omni-course-row .omni-course-name { grid-column: span 1; }
    .omni-local-actions .btn { width: 100%; }
}
