/* =============================================================================
   Admin Console — BlackBirdStudio styles
   Tokens first (swap the brand values here when the design system is final),
   then base, layout, components. Logical properties (inline/block) keep the
   layout correct when Arabic / RTL is added later.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    --brand-black: #000000;
    --brand-orange: #f47920;          /* placeholder: replace with the logo's exact orange */
    --brand-orange-hover: #ff8c3a;

    --canvas: #f4f5f7;
    --surface: #ffffff;
    --surface-sunken: #eceef1;
    --text: #15171a;
    --text-muted: #5d6470;
    --border: #d9dce1;
    --border-strong: #b9bec6;
    --link: #b4500d;                  /* orange dark enough for 4.5:1 on white */
    --focus: #1a5fd0;
    --success: #1f7a4d;
    --success-bg: #e6f4ec;
    --danger: #b42318;
    --danger-bg: #fdecea;
    --info-bg: #eaf1fb;
    --on-orange: #000000;

    --font-heading: "Montserrat", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

    --step--1: 0.8125rem;   /* 13px */
    --step-0: 0.9375rem;    /* 15px */
    --step-1: 1.125rem;     /* 18px */
    --step-2: 1.5rem;       /* 24px */
    --step-3: 1.875rem;     /* 30px */

    --radius-s: 4px;
    --radius-m: 8px;
    --topbar-height: 60px;
    --page-max: 1240px;
    --gutter: clamp(16px, 3vw, 32px);
    --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.18);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --canvas: #0e0f11;
        --surface: #17191c;
        --surface-sunken: #202328;
        --text: #eceef1;
        --text-muted: #a3aab4;
        --border: #2c3036;
        --border-strong: #454b54;
        --link: #ff9c55;
        --focus: #7fb0ff;
        --success: #5fcf95;
        --success-bg: #14291e;
        --danger: #ff8a80;
        --danger-bg: #351a18;
        --info-bg: #172234;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --canvas: #0e0f11;
    --surface: #17191c;
    --surface-sunken: #202328;
    --text: #eceef1;
    --text-muted: #a3aab4;
    --border: #2c3036;
    --border-strong: #454b54;
    --link: #ff9c55;
    --focus: #7fb0ff;
    --success: #5fcf95;
    --success-bg: #14291e;
    --danger: #ff8a80;
    --danger-bg: #351a18;
    --info-bg: #172234;
    color-scheme: dark;
}

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

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

body {
    margin: 0;
    background: var(--canvas);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.5;
    font-feature-settings: "cv11", "ss01";
}

h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; margin: 0; }

a { color: var(--link); text-underline-offset: 2px; }

img { max-width: 100%; }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}

.visually-hidden {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    inset-inline-start: 16px; inset-block-start: -100px;
    z-index: 100;
    padding: 8px 14px;
    background: var(--brand-orange); color: var(--on-orange);
    font-weight: 600;
}
.skip-link:focus { inset-block-start: 8px; }

.icon { inline-size: 18px; block-size: 18px; flex: none; }

[hidden] { display: none !important; }

/* ---------- Top bar ---------- */
.topbar {
    position: sticky; inset-block-start: 0; z-index: 20;
    background: var(--brand-black);
    color: #ffffff;
}

.topbar__inner {
    display: flex; align-items: center; gap: 28px;
    max-inline-size: var(--page-max);
    min-block-size: var(--topbar-height);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.brand {
    display: inline-flex; align-items: center; gap: 10px;
    color: #ffffff; text-decoration: none;
    font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* The bird-less placeholder mark: an orange square with a bitten corner. */
.brand__mark {
    inline-size: 22px; block-size: 22px;
    background: var(--brand-orange);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%);
    flex: none;
}

.topbar__nav {
    display: flex; align-items: center; justify-content: space-between;
    flex: 1; gap: 24px;
}

.menu { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }

.menu__link {
    position: relative;
    display: inline-flex; align-items: center;
    block-size: var(--topbar-height);
    padding-inline: 12px;
    color: #c9ccd1; text-decoration: none; font-weight: 500;
}
.menu__link:hover { color: #ffffff; }
.menu__link[aria-current="page"] { color: #ffffff; }
.menu__link[aria-current="page"]::after {
    content: "";
    position: absolute; inset-inline: 12px; inset-block-end: 0;
    block-size: 3px;
    background: var(--brand-orange);
}

.topbar__user { display: flex; align-items: center; gap: 12px; }
.topbar__username { color: #c9ccd1; font-size: var(--step--1); }
.topbar__user form { margin: 0; }

.topbar__signout {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: transparent; color: #ffffff;
    border: 1px solid #3a3d42; border-radius: var(--radius-s);
    font: inherit; font-size: var(--step--1); cursor: pointer;
}
.topbar__signout:hover { border-color: var(--brand-orange); }

.topbar .icon-button { color: #c9ccd1; }
.topbar .icon-button:hover { color: #ffffff; background: #1d1f23; }

.topbar__toggle {
    display: none;
    margin-inline-start: auto;
    padding: 8px;
    background: none; border: 0; color: #ffffff; cursor: pointer;
}

.icon--sun { display: none; }
:root[data-theme="dark"] .icon--sun { display: block; }
:root[data-theme="dark"] .icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .icon--sun { display: block; }
    :root:not([data-theme="light"]) .icon--moon { display: none; }
}

@media (max-width: 760px) {
    .topbar__toggle { display: inline-flex; }
    .topbar__nav {
        display: none;
        position: absolute; inset-inline: 0; inset-block-start: var(--topbar-height);
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px var(--gutter) 16px;
        background: var(--brand-black);
        border-block-start: 1px solid #23262b;
    }
    .topbar__nav.is-open { display: flex; }
    .menu { flex-direction: column; }
    .menu__link { block-size: 48px; padding-inline: 0; }
    .menu__link[aria-current="page"]::after { inset-inline: auto 0; inset-inline-start: -16px; inset-block: 12px; inline-size: 3px; block-size: auto; }
    .topbar__user { padding-block-start: 12px; border-block-start: 1px solid #23262b; }
    .topbar__username { margin-inline-end: auto; }
}

/* ---------- Page ---------- */
.page {
    max-inline-size: var(--page-max);
    margin-inline: auto;
    padding: 28px var(--gutter) 64px;
}
.page:focus { outline: none; }

.page__header {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 16px;
    margin-block-end: 20px;
}

.page__title { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.01em; }
.page__subtitle { margin: 6px 0 0; color: var(--text-muted); }
.page__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.breadcrumb { margin: 0 0 6px; font-size: var(--step--1); }
.breadcrumb a { color: var(--text-muted); }

/* ---------- Buttons ---------- */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-block-size: 40px;
    padding: 8px 16px;
    border: 1px solid transparent; border-radius: var(--radius-s);
    font: inherit; font-weight: 600; line-height: 1.2;
    text-decoration: none; white-space: nowrap;
    cursor: pointer;
}
.button--primary { background: var(--brand-orange); color: var(--on-orange); }
.button--primary:hover { background: var(--brand-orange-hover); }
.button--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.button--ghost:hover { border-color: var(--text); }
.button--danger { background: var(--danger); color: #ffffff; }
.button--danger:hover { filter: brightness(1.1); }
.button--link { background: none; color: var(--link); padding-inline: 4px; text-decoration: underline; }
.button--block { inline-size: 100%; }
.button--small { min-block-size: 32px; padding: 4px 10px; font-size: var(--step--1); }
.button[aria-busy="true"] { opacity: 0.7; cursor: progress; }

.icon-button {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 36px; block-size: 36px;
    padding: 0;
    background: transparent; color: var(--text-muted);
    border: 0; border-radius: var(--radius-s);
    cursor: pointer;
}
.icon-button:hover { background: var(--surface-sunken); color: var(--text); }
.icon-button--danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ---------- Forms ---------- */
.stack > * + * { margin-block-start: 18px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-block-start: 20px; }
.field__label { font-weight: 600; font-size: var(--step--1); }
.field__optional { font-weight: 400; color: var(--text-muted); }
.field__hint { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
.field__error {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 0; color: var(--danger); font-size: var(--step--1); font-weight: 500;
}
.field__error .icon { inline-size: 16px; block-size: 16px; margin-block-start: 1px; }
.field--inline { flex-direction: row; align-items: center; gap: 10px; }

.input, .select {
    inline-size: 100%;
    min-block-size: 42px;
    padding: 8px 12px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius-s);
    font: inherit;
}
.input:hover, .select:hover { border-color: var(--text-muted); }
.input:focus-visible, .select:focus-visible { outline-offset: 0; }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }

.select {
    appearance: none;
    padding-inline-end: 36px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
[dir="rtl"] .select { background-position: 13px 55%, 18px 55%; }

.checkbox { inline-size: 20px; block-size: 20px; accent-color: var(--brand-orange); margin: 0; }

.input-group { position: relative; display: flex; }
.input-group .input { padding-inline-end: 48px; }
.input-group__button {
    position: absolute; inset-block: 1px; inset-inline-end: 1px;
    inline-size: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; color: var(--text-muted); cursor: pointer;
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.input-group__button[aria-pressed="true"] { color: var(--link); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: clamp(20px, 3vw, 32px);
}

.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 640px) minmax(0, 280px);
    align-items: start;
    gap: 24px;
}
@media (max-width: 960px) { .form-layout { grid-template-columns: minmax(0, 1fr); } }

.form__actions {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px;
    margin-block-start: 28px; padding-block-start: 20px;
    border-block-start: 1px solid var(--border);
}
.form__meta { margin: 16px 0 0; color: var(--text-muted); font-size: var(--step--1); }

.logo-field { display: flex; align-items: center; gap: 12px; }

.restore-card p { margin: 0 0 14px; }

.error-summary {
    margin-block-end: 24px;
    padding: 14px 16px;
    border: 2px solid var(--danger); border-radius: var(--radius-s);
    background: var(--danger-bg);
}
.error-summary:focus { outline: 3px solid var(--focus); }
.error-summary__title { font-size: var(--step-0); margin-block-end: 6px; }
.error-summary__list { margin: 0; padding-inline-start: 20px; }
.error-summary__list a { color: var(--danger); font-weight: 500; }

/* ---------- Notices & flash ---------- */
.notice {
    display: flex; gap: 8px; align-items: flex-start;
    margin: 0 0 18px;
    padding: 10px 12px;
    border-radius: var(--radius-s);
    font-size: var(--step--1);
}
.notice .icon { inline-size: 16px; block-size: 16px; margin-block-start: 1px; }
.notice--info { background: var(--info-bg); }
.notice--error { background: var(--danger-bg); color: var(--danger); font-weight: 500; }

.flash-stack { display: grid; gap: 8px; margin-block-end: 20px; }
.flash {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 10px 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--success);
    border-radius: var(--radius-s);
}
.flash--error { border-inline-start-color: var(--danger); }
.flash--info { border-inline-start-color: var(--focus); }
.flash__text { margin: 0; flex: 1; }
.flash form { margin: 0; }
.flash__action {
    padding: 4px 10px;
    background: none; color: var(--link);
    border: 1px solid currentColor; border-radius: var(--radius-s);
    font: inherit; font-weight: 600; cursor: pointer;
}
.flash__close {
    display: inline-flex; padding: 6px;
    background: none; border: 0; color: var(--text-muted); cursor: pointer;
}

/* ---------- Tabs ---------- */
.tabs {
    display: flex; gap: 4px;
    margin-block-end: 16px;
    border-block-end: 1px solid var(--border);
}
.tabs__link {
    display: inline-flex; align-items: center; gap: 8px;
    margin-block-end: -1px;
    padding: 10px 14px;
    color: var(--text-muted); text-decoration: none; font-weight: 500;
    border-block-end: 3px solid transparent;
}
.tabs__link:hover { color: var(--text); }
.tabs__link[aria-current="page"] { color: var(--text); border-block-end-color: var(--brand-orange); }
.tabs__count {
    padding: 1px 8px;
    background: var(--surface-sunken);
    border-radius: 999px;
    font-size: 0.75rem; font-variant-numeric: tabular-nums;
}

/* ---------- Filters ---------- */
.filters {
    display: grid;
    grid-template-columns: minmax(200px, 1.6fr) repeat(3, minmax(120px, 0.7fr)) auto;
    align-items: end;
    gap: 12px;
    margin-block-end: 12px;
}
.filters__field { display: flex; flex-direction: column; gap: 4px; }
.filters__search { position: relative; align-self: end; }
.filters__search .input { padding-inline-start: 38px; }
.filters__search-icon {
    position: absolute; inset-inline-start: 12px; inset-block-start: 12px;
    color: var(--text-muted);
}
.filters__buttons { display: flex; gap: 6px; align-items: center; }
.js [data-filter-submit] { display: none; }

@media (max-width: 900px) {
    .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filters__search { grid-column: 1 / -1; }
    .filters__buttons { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .filters__field:last-of-type { grid-column: 1 / -1; }
}

.results-line { min-block-size: 1.5em; margin: 0 0 10px; color: var(--text-muted); font-size: var(--step--1); }

/* ---------- Table ---------- */
.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.table { inline-size: 100%; border-collapse: collapse; }
.table th, .table td {
    padding: 10px 16px;
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--border);
}
.table tbody tr:last-child td { border-block-end: 0; }
.table thead th {
    background: var(--surface-sunken);
    font-size: var(--step--1); font-weight: 600; color: var(--text-muted);
    white-space: nowrap;
}
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-sunken) 55%, transparent); }
.table__actions, .table__actions-head { inline-size: 1%; white-space: nowrap; text-align: end; }
.row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.row-actions form { margin: 0; }

.sort-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: inherit; text-decoration: none;
}
.sort-link:hover, .sort-link.is-active { color: var(--text); }
.icon--sort { inline-size: 14px; block-size: 14px; opacity: 0.55; }
.sort-link.is-active .icon--sort { opacity: 1; color: var(--link); }

.channel { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
.channel__logo {
    inline-size: 40px; block-size: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-sunken);
    flex: none;
}
.channel__logo--large { inline-size: 56px; block-size: 56px; }
.channel__logo--empty {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: 700; color: var(--text-muted);
}
.channel__text { display: flex; flex-direction: column; min-inline-size: 0; }
.channel__name {
    color: var(--text); font-weight: 600; text-decoration: none;
    overflow-wrap: anywhere;
}
.channel__name:hover { color: var(--link); text-decoration: underline; }
.channel__url {
    color: var(--text-muted); font-size: 0.75rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-inline-size: 42ch;
}

.tag {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: var(--step--1);
    white-space: nowrap;
}

/* Crawl switch: the one place the brand orange carries state. */
.switch {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px;
    background: none; border: 0; color: var(--text);
    font: inherit; font-size: var(--step--1); cursor: pointer;
}
.switch__track {
    position: relative;
    inline-size: 38px; block-size: 22px;
    background: var(--border-strong);
    border-radius: 999px;
    transition: background-color 0.15s ease;
}
.switch__thumb {
    position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
    inline-size: 16px; block-size: 16px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
    transition: transform 0.15s ease;
}
.switch[aria-checked="true"] .switch__track { background: var(--brand-orange); }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(16px); }
[dir="rtl"] .switch[aria-checked="true"] .switch__thumb { transform: translateX(-16px); }
.switch__text { inline-size: 2em; color: var(--text-muted); }
.switch[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* Narrow screens: rows become stacked cards. */
@media (max-width: 720px) {
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; inline-size: 100%; }
    .table tr { position: relative; padding: 12px 14px; border-block-end: 1px solid var(--border); }
    .table tbody tr:last-child { border-block-end: 0; }
    .table td { padding: 4px 0; border: 0; }
    .table td.cell-channel { padding-inline-end: 84px; }
    .table td[data-label]:not(.cell-channel) { display: flex; align-items: center; gap: 12px; }
    .table td[data-label]:not(.cell-channel)::before {
        content: attr(data-label);
        inline-size: 72px;
        color: var(--text-muted); font-size: var(--step--1);
    }
    .table td.table__actions { position: absolute; inset-block-start: 12px; inset-inline-end: 10px; inline-size: auto; padding: 0; }
    .channel__url { max-inline-size: 60vw; }
}

/* ---------- Pagination ---------- */
.pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 6px;
    margin-block-start: 20px;
}
.pagination__pages { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pagination__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 38px; min-block-size: 38px;
    padding-inline: 10px;
    color: var(--text); text-decoration: none;
    border: 1px solid var(--border); border-radius: var(--radius-s);
    background: var(--surface);
    font-variant-numeric: tabular-nums;
}
.pagination__link:hover { border-color: var(--text); }
.pagination__link.is-current { background: var(--text); color: var(--surface); border-color: var(--text); font-weight: 600; }
.pagination__link.is-disabled { color: var(--text-muted); opacity: 0.5; }
.pagination__gap { align-self: center; padding-inline: 4px; color: var(--text-muted); }

/* ---------- Empty state ---------- */
.empty-state {
    padding: clamp(32px, 6vw, 64px) clamp(20px, 4vw, 48px);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-m);
    max-inline-size: 640px;
}
.empty-state__title { font-size: var(--step-2); margin-block-end: 10px; }
.empty-state__text { margin: 0 0 22px; color: var(--text-muted); max-inline-size: 52ch; }

/* ---------- Dialogs & toasts ---------- */
.dialog {
    inline-size: min(440px, calc(100vw - 32px));
    padding: 24px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-m);
    box-shadow: var(--shadow-pop);
}
.dialog::backdrop { background: rgb(0 0 0 / 0.55); }
.dialog__title { font-size: var(--step-1); margin-block-end: 10px; }
.dialog__text { margin: 0 0 22px; color: var(--text-muted); }
.dialog__text strong { color: var(--text); font-variant-numeric: tabular-nums; }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.toast-region {
    position: fixed; inset-block-end: 20px; inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: grid; gap: 8px;
}
.toast {
    padding: 10px 16px;
    background: var(--text); color: var(--surface);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-pop);
    font-size: var(--step--1);
}
.toast--error { background: var(--danger); color: #ffffff; }

/* ---------- Sign-in & error pages ---------- */
body.auth {
    min-block-size: 100vh;
    background: var(--brand-black);
    display: grid; place-items: center;
}
.auth__main { inline-size: min(400px, calc(100vw - 32px)); padding-block: 40px; }
.auth__brand {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 20px;
    color: #ffffff;
    font-family: var(--font-heading); font-weight: 700; font-size: var(--step-1);
}
.auth__panel {
    padding: 32px 28px;
    background: var(--surface);
    border-block-start: 4px solid var(--brand-orange);
    border-radius: var(--radius-s);
}
.auth__title { font-size: var(--step-2); margin-block-end: 22px; }
.auth__text { margin: -10px 0 24px; color: var(--text-muted); }
.error-code {
    margin: 0 0 4px;
    font-family: var(--font-heading); font-weight: 700; font-size: 3.5rem; line-height: 1;
    color: var(--brand-orange);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =============================================================================
   Videos page (v1.1)
   ========================================================================== */
code {
    white-space: nowrap;
    padding: 1px 6px;
    background: var(--surface-sunken);
    border-radius: var(--radius-s);
    font-size: 0.875em;
}

.channel--large { gap: 16px; }
.channel--large .page__title { font-size: var(--step-2); }
.channel-header .page__subtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; line-height: 1.5;
}
.badge--new { background: var(--brand-orange); color: var(--on-orange); }

.tag--small { padding: 0 8px; font-size: 0.75rem; }

/* "Last checked" bar under the header */
.checkpoint {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin-block-end: 20px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--border-strong);
    border-radius: var(--radius-s);
}
.checkpoint.is-set { border-inline-start-color: var(--brand-orange); }
.checkpoint__icon { color: var(--text-muted); }
.checkpoint.is-set .checkpoint__icon { color: var(--brand-orange); }
.checkpoint__text { margin: 0; flex: 1; min-inline-size: 240px; }
.checkpoint form { margin: 0; }

.grid-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-block-end: 14px;
}
.grid-toolbar .results-line { margin: 0; }
.grid-toolbar__size { display: flex; align-items: center; gap: 8px; margin: 0; }
.select--small { inline-size: auto; min-block-size: 34px; padding-block: 4px; }

/* Grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin: 0; padding: 0;
    list-style: none;
}

.video-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
}

/* The last-checked video: orange frame + label, impossible to miss when scanning. */
.video-card.is-marked {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 2px var(--brand-orange);
}
.video-card__flag {
    position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 1;
    display: none;
    align-items: center; gap: 6px;
    margin: 0;
    padding: 5px 12px;
    background: var(--brand-orange); color: var(--on-orange);
    font-size: var(--step--1); font-weight: 600;
}
.video-card__flag .icon { inline-size: 16px; block-size: 16px; }
.video-card.is-marked .video-card__flag { display: flex; }

.video-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--surface-sunken);
}
.video-card__thumb img {
    display: block;
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
}
.video-card.is-marked .video-card__thumb img { opacity: 0.85; }
.video-card__duration {
    position: absolute; inset-block-end: 8px; inset-inline-end: 8px;
    padding: 1px 6px;
    background: rgb(0 0 0 / 0.82); color: #ffffff;
    border-radius: var(--radius-s);
    font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.video-card__new {
    position: absolute; inset-block-start: 8px; inset-inline-start: 8px;
    display: none;
}
.video-card.is-new .video-card__new { display: inline-block; }

.video-card__body { flex: 1; padding: 12px 14px 4px; }
.video-card__title {
    margin: 0 0 6px;
    font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.video-card__title a { color: var(--text); text-decoration: none; }
.video-card__title a:hover { color: var(--link); text-decoration: underline; }
.video-card__channel { margin: 0 0 6px; color: var(--text-muted); font-size: var(--step--1); }
.video-card__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0;
    color: var(--text-muted); font-size: var(--step--1);
}

.video-card__actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 10px 14px 14px;
}
.video-card__actions form { margin: 0; }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-block-size: 32px;
    padding: 4px 10px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: 999px;
    font: inherit; font-size: var(--step--1); font-weight: 500;
    cursor: pointer;
}
.chip .icon { inline-size: 16px; block-size: 16px; }
a.chip { text-decoration: none; }
.chip:hover { border-color: var(--text); }
.chip .chip__on { display: none; }
.chip.is-on { background: var(--text); color: var(--surface); border-color: var(--text); }
.chip.is-on .chip__on { display: block; }
.chip.is-on .chip__off { display: none; }
.chip--mark.is-on { background: var(--brand-orange); color: var(--on-orange); border-color: var(--brand-orange); }
.chip[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.pagination__status { padding-inline: 8px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pagination__link .icon { inline-size: 16px; block-size: 16px; }
.pagination__link { gap: 4px; }

/* =============================================================================
   YT Videos, player and crawler pages (v1.2)
   ========================================================================== */
:root {
    --warning: #9a5b00;
    --warning-bg: #fff3dc;
}
:root[data-theme="dark"] { --warning: #ffc266; --warning-bg: #33280f; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --warning: #ffc266; --warning-bg: #33280f; }
}

.muted { color: var(--text-muted); font-size: var(--step--1); }
.num { text-align: end !important; font-variant-numeric: tabular-nums; }

.button.is-disabled { opacity: 0.45; pointer-events: none; }
.button__count {
    min-inline-size: 22px;
    padding: 0 6px;
    background: rgb(0 0 0 / 0.14);
    border-radius: 999px;
    font-size: 0.8125rem; font-variant-numeric: tabular-nums;
}
.page__actions form { margin: 0; }

/* Filters panel */
.library-filters {
    margin-block-end: 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
}
.library-filters__search { position: relative; margin-block-end: 12px; }
.library-filters__summary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 0;
    font-weight: 600; font-size: var(--step--1);
    cursor: pointer;
}
.library-filters__summary { list-style: none; }
.library-filters__summary::-webkit-details-marker { display: none; }
.library-filters__summary::before {
    content: "";
    inline-size: 8px; block-size: 8px;
    border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}
[dir="rtl"] .library-filters__summary::before { transform: rotate(135deg); }
.library-filters__more[open] .library-filters__summary::before { transform: rotate(45deg); }
.library-filters__more[open] .library-filters__summary { margin-block-end: 12px; }
@media (min-width: 900px) { .library-filters__grid .filters__range { grid-column: span 2; } }
.library-filters__search .input { padding-inline-start: 38px; }
.library-filters__search .field__hint { margin-block-start: 6px; }
.library-filters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    align-items: end;
    gap: 12px 14px;
}
.filters__range { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.filters__range legend { padding: 0; margin-block-end: 4px; }
.range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.range span { color: var(--text-muted); font-size: var(--step--1); }
.range .input { padding-inline: 8px; }
.filters__toggle { flex-direction: row; align-items: center; gap: 8px; min-block-size: 42px; }
.library-filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 14px; }
.js .library-filters__actions [type="submit"] { display: inline-flex; }   /* date / number inputs need Apply */

/* Cards on YT Videos */
.video-card__play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgb(0 0 0 / 0.35);
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.video-card__play .icon { inline-size: 44px; block-size: 44px; }
.video-card__thumb:hover .video-card__play { opacity: 1; }
.video-card__channel a { color: inherit; text-decoration: none; }
.video-card__channel a:hover { color: var(--link); text-decoration: underline; }
.video-card.is-watched .video-card__thumb img { opacity: 0.45; filter: grayscale(0.6); }
.video-card.is-watched .video-card__title a { color: var(--text-muted); }
.source { font-size: 0.75rem; font-weight: 600; }
.source--crawler { color: var(--text-muted); }
.source--manual { color: var(--link); }

/* Status badges */
.status {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.status--success { background: var(--success-bg); color: var(--success); }
.status--partial { background: var(--warning-bg); color: var(--warning); }
.status--failed { background: var(--danger-bg); color: var(--danger); }
.status--running { background: var(--info-bg); color: var(--focus); }

/* Crawler pages */
.run-summary {
    margin-block-end: 20px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--success);
    border-radius: var(--radius-s);
}
.run-summary--partial { border-inline-start-color: var(--warning); }
.run-summary--failed { border-inline-start-color: var(--danger); }
.run-summary--running { border-inline-start-color: var(--focus); }
.run-summary__label { margin: 0 0 4px; color: var(--text-muted); font-size: var(--step--1); }
.run-summary__main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 600; }
.run-summary__stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.run-summary__stats div { display: flex; flex-direction: column-reverse; }
.run-summary__stats dt { color: var(--text-muted); font-size: var(--step--1); }
.run-summary__stats dd { margin: 0; font-family: var(--font-heading); font-size: var(--step-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.run-summary__stats--page { margin-block-end: 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); }
.run-summary__message { margin: 12px 0 16px; color: var(--text-muted); font-size: var(--step--1); overflow-wrap: anywhere; }
.cell-error { margin: 4px 0 0; color: var(--danger); font-size: var(--step--1); overflow-wrap: anywhere; }
.table--runs td { white-space: nowrap; }
.table--runs td .muted { display: block; }

/* Player */
.player-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: start;
    gap: 20px;
}
@media (max-width: 960px) { .player-layout { grid-template-columns: minmax(0, 1fr); } }

.player-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000000;
    border-radius: var(--radius-m);
    overflow: hidden;
}
.player-frame iframe, .player-frame #player { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.player-fallback {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: #ffffff; text-decoration: none; font-size: var(--step--1);
}
.player-fallback img { inline-size: 40%; border-radius: var(--radius-s); opacity: 0.6; }

.player-notice {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: var(--warning-bg); color: var(--warning);
    border-radius: var(--radius-s);
    font-weight: 500;
}
.player-notice a { color: inherit; font-weight: 700; }

.player-info { margin-block: 14px 10px; }
.player-info__title { font-size: var(--step-1); margin-block-end: 4px; }
.player-info__meta { margin: 0; color: var(--text-muted); }

.player-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; font-size: var(--step--1); cursor: pointer; }

.player-queue {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
}
.player-queue__title {
    display: flex; align-items: center; gap: 8px;
    margin: 0; padding: 12px 14px;
    font-size: var(--step-0);
    border-block-end: 1px solid var(--border);
}
.player-queue__list { max-block-size: 70vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
@media (max-width: 960px) { .player-queue__list { max-block-size: none; } }
.queue-item { display: flex; align-items: center; gap: 4px; padding-inline-end: 6px; border-block-end: 1px solid var(--border); }
.queue-item:last-child { border-block-end: 0; }
.queue-item__play {
    display: flex; flex: 1; align-items: flex-start; gap: 10px;
    min-inline-size: 0;
    padding: 10px 6px 10px 12px;
    background: none; border: 0; color: inherit;
    font: inherit; text-align: start; cursor: pointer;
}
.queue-item__play img { inline-size: 96px; block-size: 54px; object-fit: cover; border-radius: var(--radius-s); flex: none; background: var(--surface-sunken); }
.queue-item__text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.queue-item__title {
    font-size: var(--step--1); font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.queue-item__meta, .queue-item__state { color: var(--text-muted); font-size: 0.75rem; }
.queue-item.is-current { background: color-mix(in srgb, var(--brand-orange) 14%, transparent); box-shadow: inset 3px 0 0 var(--brand-orange); }
.queue-item.is-watched .queue-item__state::before { content: "Watched"; color: var(--success); font-weight: 600; }
.queue-item.is-blocked .queue-item__state::before { content: "Can’t play here"; color: var(--warning); font-weight: 600; }
.queue-item.is-watched img, .queue-item.is-blocked img { opacity: 0.5; }