:root {
    color-scheme: light;
    --bg: #eef1f4;
    --sidebar-bg: #f9fafb;
    --panel: #ffffff;
    --panel-soft: #fbfcfd;
    --field-bg: #ffffff;
    --ink: #17202a;
    --muted: #6b7684;
    --line: #d9dee5;
    --accent: #0f766e;
    --accent-2: #2563eb;
    --neutral: #334155;
    --danger: #b42318;
    --ok: #15803d;
    --warn: #b45309;
    --help-bg: #fff8e6;
    --help-border: #f3c86b;
    --help-ink: #6f4f00;
    --category-bg: #eaf2ff;
    --category-ink: #1e3a8a;
    --row-hover: #f6faf9;
    --logo-bg: #eef2f7;
    --footer-bg: rgba(238, 241, 244, .94);
    --toast-bg: #111827;
    --toast-ink: #ffffff;
    --shadow: 0 14px 35px rgba(31, 41, 55, .10);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f172a;
    --sidebar-bg: #111827;
    --panel: #182235;
    --panel-soft: #111827;
    --field-bg: #0f172a;
    --ink: #e5edf7;
    --muted: #a7b2c2;
    --line: #2f3b4d;
    --accent: #14b8a6;
    --accent-2: #60a5fa;
    --neutral: #475569;
    --danger: #ef4444;
    --ok: #22c55e;
    --warn: #f59e0b;
    --help-bg: #2a210f;
    --help-border: #9a6a14;
    --help-ink: #f8d889;
    --category-bg: #122a4a;
    --category-ink: #bfdbfe;
    --row-hover: #1f2b3d;
    --logo-bg: #0f172a;
    --footer-bg: rgba(15, 23, 42, .94);
    --toast-bg: #e5edf7;
    --toast-ink: #0f172a;
    --shadow: 0 18px 42px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--ink);
}

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

button, input, select, textarea {
    font: inherit;
}

button {
    border: 0;
    border-radius: 7px;
    background: var(--accent);
    color: white;
    min-height: 40px;
    padding: 0 14px;
    cursor: pointer;
    font-weight: 700;
}

button:hover { filter: brightness(.96); }
button:disabled { opacity: .55; cursor: wait; }

input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--field-bg);
    color: var(--ink);
    min-height: 40px;
    padding: 9px 10px;
    outline: none;
    font-size: 16px;
}

textarea { resize: vertical; min-height: 96px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }

.theme-toggle {
    background: var(--field-bg);
    color: var(--ink);
    border: 1px solid var(--line);
    white-space: nowrap;
}

.theme-toggle::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--accent-2) 0 50%, var(--ink) 50% 100%);
    vertical-align: -1px;
}

html[data-theme="dark"] .theme-toggle::before {
    background: linear-gradient(90deg, #f8fafc 0 50%, var(--accent-2) 50% 100%);
}

.app-shell {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    height: calc(100vh - 42px);
    min-height: 0;
    overflow: hidden;
}

.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--line);
    padding: 18px;
    overflow-y: auto;
    min-height: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-weight: 900;
}

.brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--field-bg);
    border: 1px solid var(--line);
}

.brand h1, .brand p, .panel h2, .selected-info h2, .selected-info p { margin: 0; }
.brand h1 { font-size: 22px; letter-spacing: 0; }
.brand p { color: var(--muted); font-size: 13px; }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(17, 24, 39, .04);
}

.panel h2 {
    font-size: 15px;
    margin-bottom: 10px;
}

.stack { display: grid; gap: 10px; }
.compact { gap: 8px; }

.workspace {
    padding: 18px;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    height: calc(100vh - 42px);
    min-height: 0;
}

.toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(190px, 260px) 92px auto auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.search-wrap {
    position: relative;
}

.search-wrap::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 13px;
    height: 13px;
    border: 2px solid var(--muted);
    border-radius: 50%;
    transform: translateY(-58%);
    opacity: .75;
    pointer-events: none;
}

.search-wrap::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 26px;
    width: 8px;
    height: 2px;
    background: var(--muted);
    transform: rotate(45deg);
    opacity: .75;
    pointer-events: none;
}

.search-wrap input {
    padding-left: 40px;
}

.toolbar-select {
    min-height: 40px;
    font-weight: 800;
    color: var(--muted);
    background: var(--field-bg);
}

.compact-select {
    min-width: 92px;
}

.tabs {
    display: flex;
    border: 1px solid var(--line);
    background: var(--field-bg);
    border-radius: 8px;
    padding: 3px;
}

.tab {
    min-height: 34px;
    background: transparent;
    color: var(--muted);
    padding: 0 12px;
}

.tab.active {
    background: var(--accent-2);
    color: #fff;
}

.group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--field-bg);
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.group-toggle input {
    width: 16px;
    min-height: 16px;
    padding: 0;
}

.danger { background: var(--danger); }
.warning-btn { background: var(--warn); }

.small-btn {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

.stats-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}

.stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.user-list-info {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.bulk-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.bulk-actions .small-btn {
    min-height: 30px;
}

.bulk-actions .danger {
    background: var(--danger);
}

.bulk-actions button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.chip {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 14px;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.table-panel, .player-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.table-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.table-head, .row {
    display: grid;
    grid-template-columns: 42px minmax(220px, 1.45fr) 76px minmax(130px, 1fr) 104px 112px 300px;
    gap: 10px;
    align-items: center;
}

.table-head {
    min-height: 44px;
    padding: 0 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
}

.list {
    overflow: auto;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.pagination button {
    min-height: 32px;
    background: var(--neutral);
    font-size: 12px;
}

.pagination button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.row {
    min-height: 64px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}

.category-row {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--category-bg);
    color: var(--category-ink);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.row:hover, .row.active { background: var(--row-hover); }

.name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.select-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.select-cell input {
    width: 18px;
    min-height: 18px;
    padding: 0;
}

.logo {
    width: 38px;
    height: 38px;
    border-radius: 7px;
    object-fit: contain;
    background: var(--logo-bg);
    border: 1px solid var(--line);
    flex: 0 0 auto;
}

.title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.min { min-width: 0; }

.sub {
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    border-radius: 999px;
    background: #e8f3f1;
    color: var(--accent);
    font-weight: 900;
    font-size: 12px;
    padding: 0 8px;
}

.status.ok { color: var(--ok); font-weight: 800; }
.status.bad { color: var(--danger); font-weight: 800; }
.status.wait { color: var(--warn); font-weight: 800; }

.actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.row-actions {
    grid-template-columns: 32px 32px minmax(76px, 1fr) 58px 64px;
}

.series-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.actions button {
    min-height: 32px;
    padding: 0 8px;
    font-size: 12px;
    background: var(--neutral);
}

.row-actions button:nth-child(4),
.series-actions button:nth-child(2) { background: var(--accent-2); }
.row-actions button:nth-child(5),
.series-actions button:nth-child(3) { background: var(--accent); }

.move-btn {
    padding: 0;
    font-size: 16px;
    line-height: 1;
}

.player-panel {
    display: grid;
    grid-template-rows: auto auto 1fr;
}

.player-frame {
    background: #080b11;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
}

.video-js {
    width: 100%;
    height: 100%;
    background: #080b11;
}

.video-js .vjs-tech {
    width: 100%;
    height: 100%;
}

.selected-info {
    padding: 14px;
    border-bottom: 1px solid var(--line);
}

.selected-info h2 { font-size: 17px; }
.selected-info p { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }

.playback-help {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--help-border);
    background: var(--help-bg);
    border-radius: 8px;
}

.playback-help p {
    color: var(--help-ink);
    font-weight: 700;
}

.playback-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.playback-actions button {
    min-height: 34px;
    background: var(--neutral);
    font-size: 12px;
    padding: 0 8px;
}

.debug-box {
    margin-top: 10px;
    border-top: 1px solid var(--help-border);
    padding-top: 8px;
    color: var(--help-ink);
    font-size: 12px;
}

.debug-box summary {
    cursor: pointer;
    font-weight: 900;
}

.debug-box dl {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 5px 8px;
    margin: 8px 0 0;
}

.debug-box dt {
    font-weight: 900;
}

.debug-box dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.series-info-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.series-info-head button {
    background: var(--accent-2);
    min-height: 34px;
    font-size: 12px;
    white-space: nowrap;
}

.season-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 0 8px;
}

.season-tabs a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.season-list {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow: auto;
    padding-right: 2px;
}

.season-block {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.season-block h3 {
    margin: 0;
    padding: 8px 10px;
    background: var(--panel-soft);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.episode-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
}

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

.episode-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--ink);
    font-size: 12px;
}

.episode-row input {
    width: 16px;
    min-height: 16px;
    padding: 0;
    flex: 0 0 auto;
}

.episode-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.episode-actions {
    display: flex;
    gap: 6px;
}

.episode-actions button {
    min-height: 28px;
    padding: 0 8px;
    font-size: 11px;
    background: var(--neutral);
}

.editor {
    padding: 14px;
    display: grid;
    gap: 10px;
    overflow-y: auto;
}

.hidden { display: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.button-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.loading-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(3px);
    z-index: 90;
}

.loading-overlay.hidden {
    display: none;
}

.loading-box {
    display: grid;
    justify-items: center;
    gap: 14px;
    width: min(360px, 100%);
    padding: 28px 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
    text-align: center;
    box-shadow: var(--shadow);
}

.loading-spinner {
    width: 54px;
    height: 54px;
    border: 5px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: loading-spin .8s linear infinite;
}

.loading-box p {
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.35;
}

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

.toast {
    position: fixed;
    left: 50%;
    bottom: 58px;
    transform: translateX(-50%) translateY(20px);
    background: var(--toast-bg);
    color: var(--toast-ink);
    border-radius: 8px;
    padding: 10px 14px;
    max-width: min(720px, calc(100vw - 24px));
    text-align: center;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transition: .18s ease;
    box-shadow: var(--shadow);
    z-index: 50;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.empty {
    padding: 28px;
    color: var(--muted);
    text-align: center;
}

.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 42px;
    padding: 8px 14px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.export-panel .two {
    grid-template-columns: 1fr 120px;
}

.export-actions {
    grid-template-columns: 1fr;
}

.export-count {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.app-footer a {
    color: var(--accent-2);
    text-decoration: none;
}

.fixed-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: var(--footer-bg);
    border-top: 1px solid var(--line);
}

.auth-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

.app-shell {
    padding-bottom: 42px;
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.button-link.secondary,
.secondary-btn {
    background: var(--neutral);
}

.account-panel {
    display: grid;
    gap: 10px;
    padding: 10px;
}

.account-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.restart-server-form {
    margin: 0;
}

.restart-server-form button {
    white-space: nowrap;
}

.profile-box {
    border-top: 1px solid var(--line);
    padding-top: 8px;
}

.profile-box summary {
    cursor: pointer;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
}

.profile-box[open] summary {
    margin-bottom: 10px;
}

.profile-expiry {
    display: grid;
    gap: 3px;
    margin-bottom: 10px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}

.profile-expiry span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-expiry strong {
    color: var(--ink);
    font-size: 13px;
}

.manual-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 20px 20px 72px;
}

.manual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.manual-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.manual-video {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) minmax(320px, 1.2fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.manual-video h2 {
    margin: 0 0 8px;
    font-size: 22px;
}

.manual-video p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.manual-video video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #020617;
}

.manual-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    box-shadow: var(--shadow);
}

.manual-card h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.manual-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.tour-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .48);
    z-index: 80;
}

.tour-card {
    position: fixed;
    z-index: 90;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    box-shadow: var(--shadow);
}

.tour-card h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.tour-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.tour-count {
    margin-bottom: 6px !important;
    color: var(--accent-2) !important;
    font-size: 12px !important;
    font-weight: 900;
    text-transform: uppercase;
}

.tour-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.tour-actions button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
}

.tour-highlight {
    position: relative;
    z-index: 85;
    outline: 3px solid var(--accent-2);
    outline-offset: 4px;
    box-shadow: 0 0 0 9999px rgba(2, 6, 23, .18);
}

.auth-page {
    display: grid;
    place-items: center;
    padding: 20px 20px 72px;
}

.auth-shell {
    display: grid;
    justify-items: center;
    gap: 16px;
    width: min(1240px, 100%);
}

.auth-box {
    position: relative;
    width: min(420px, 100%);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.auth-brand {
    margin-bottom: 16px;
}

.auth-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.auth-note {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.login-pricing {
    width: 100%;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    border-radius: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, #020617), color-mix(in srgb, var(--panel-soft) 88%, #020617));
    box-shadow: var(--shadow);
    text-align: center;
}

.login-pricing h2 {
    margin: 0 0 16px;
    color: var(--ink);
    font-size: clamp(24px, 4vw, 42px);
    font-weight: 900;
    letter-spacing: 0;
}

.login-plan-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.login-plan-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 260px;
    padding: 18px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--field-bg) 82%, #020617);
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--accent) 16%, transparent);
}

.login-plan-card.featured {
    border-color: #fbbf24;
    box-shadow: inset 0 0 26px rgba(251, 191, 36, .24), 0 0 22px rgba(251, 191, 36, .18);
}

.login-plan-card strong {
    color: var(--ink);
    font-size: 20px;
    font-weight: 900;
}

.login-plan-card span {
    color: var(--accent);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 900;
    line-height: 1;
}

.login-plan-card.featured span {
    color: #fbbf24;
}

.login-plan-card ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.login-plan-card li {
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
}

.login-plan-card li::before {
    content: "✓";
    margin-right: 7px;
    color: var(--accent);
    font-weight: 900;
}

.login-plan-card em {
    align-self: end;
    display: inline-flex;
    justify-content: center;
    min-height: 32px;
    padding: 7px 9px;
    border-radius: 7px;
    background: #fbbf24;
    color: #111827;
    font-style: normal;
    font-weight: 900;
}

.demo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 16px;
    padding: 0 22px;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}

.alert {
    margin-bottom: 12px;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 800;
}

.alert.ok {
    background: color-mix(in srgb, var(--ok) 12%, var(--panel));
    color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 36%, var(--line));
}

.alert.bad {
    background: color-mix(in srgb, var(--danger) 12%, var(--panel));
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--line));
}

.admin-shell {
    width: min(1600px, 100%);
    margin: 0 auto;
    padding: 20px;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.admin-create {
    margin-bottom: 14px;
}

.admin-form {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) 130px 150px auto;
    gap: 10px;
    align-items: end;
}

.settings-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
    align-items: end;
}

.settings-form button {
    min-width: 190px;
}

.pricing-admin-block {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}

.pricing-benefits-field,
.pricing-plan-editor {
    grid-column: 1 / -1;
}

.pricing-plan-editor {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.pricing-plan-editor fieldset {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.pricing-plan-editor legend {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.section-title h2 {
    margin: 0;
}

.section-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.admin-messages {
    margin-bottom: 14px;
}

.message-form,
.message-edit-form {
    display: grid;
    gap: 10px;
}

.message-form {
    grid-template-columns: minmax(150px, .85fr) minmax(160px, .85fr) minmax(210px, 1.2fr) 145px 140px 90px auto;
    align-items: end;
    margin-bottom: 12px;
}

.message-body-field {
    grid-column: 1 / -1;
}

.message-body-field textarea {
    min-height: 92px;
    resize: vertical;
}

.message-active {
    align-self: end;
}

.message-list {
    display: grid;
    gap: 10px;
}

.message-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}

.message-edit-form {
    grid-template-columns: minmax(160px, .85fr) minmax(210px, 1.2fr) 155px 140px 90px;
}

.message-actions,
.message-side-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.message-actions {
    grid-column: 1 / -1;
    justify-content: space-between;
}

.message-actions span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.message-side-actions {
    align-content: start;
    justify-content: end;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: var(--ink);
}

.check-row input {
    width: 16px;
    min-height: 16px;
    padding: 0;
}

.brand-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    font-weight: 900;
}

.admin-users {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow-x: auto;
    overflow-y: hidden;
}

.admin-user-head,
.admin-user-row {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) 78px 90px minmax(220px, .95fr) 88px minmax(220px, .9fr) minmax(430px, 1.25fr);
    gap: 10px;
    align-items: center;
    min-width: 1220px;
    padding: 10px 12px;
}

.admin-user-head {
    color: var(--muted);
    background: var(--panel-soft);
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-user-row {
    border-bottom: 1px solid var(--line);
}

.admin-actions,
.inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.library-policy .inline-form,
.account-expiry .inline-form {
    align-items: stretch;
}

.library-policy select,
.account-expiry select {
    width: 170px;
}

.account-expiry {
    display: grid;
    gap: 6px;
}

.expiry-note {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.user-import-history {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    min-width: 0;
}

.history-title,
.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.history-title strong {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

.history-empty {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.history-list {
    display: grid;
    gap: 8px;
}

.history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.history-item div {
    min-width: 0;
}

.history-item strong {
    display: block;
    max-width: none;
    margin-top: 6px;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.35;
}

.history-item p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.history-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 8px 12px;
    margin: 10px 0 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}

.history-meta dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.history-meta dd {
    margin: 3px 0 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.history-meta-empty {
    margin-top: 8px !important;
    color: var(--warn) !important;
}

.info-m3u-btn {
    margin-top: 8px;
    background: var(--accent-2);
}

.info-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(2, 6, 23, .58);
}

.info-modal.hidden {
    display: none;
}

.tour-backdrop.hidden,
.tour-card.hidden {
    display: none;
}

.info-modal-panel {
    width: min(560px, 100%);
    max-height: min(760px, calc(100vh - 36px));
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.client-message-panel {
    width: min(520px, 100%);
}

.info-modal-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background: var(--panel-soft);
    border-bottom: 1px solid var(--line);
}

.info-modal-head h2 {
    margin: 0;
    font-size: 18px;
}

.info-modal-body {
    padding: 14px;
}

.client-message-body {
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.info-section {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.info-section:last-child {
    border-bottom: 0;
}

.info-section h3 {
    margin: 0 0 8px;
    color: var(--accent-2);
    font-size: 14px;
}

.info-section dl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.info-section dl div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.info-section dt {
    color: var(--ink);
    font-weight: 900;
}

.info-section dd {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.inline-form input {
    width: 170px;
}

@media (max-width: 900px) {
    .admin-header,
    .admin-form,
    .settings-form,
    .pricing-admin-block,
    .message-form,
    .message-edit-form,
    .message-item,
    .admin-user-head,
    .admin-user-row {
        grid-template-columns: 1fr;
    }
    .message-body-field,
    .message-actions {
        grid-column: auto;
    }
    .message-side-actions {
        justify-content: start;
    }
    .admin-header {
        display: grid;
    }
    .admin-user-head {
        display: none;
    }
    .admin-user-row {
        margin: 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
    }
    .history-title,
    .history-item {
        align-items: stretch;
        flex-direction: column;
    }
    .history-item strong {
        max-width: 100%;
    }
    .history-meta {
        grid-template-columns: 1fr;
    }
    .info-section dl div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .inline-form,
    .inline-form input,
    .library-policy select,
    .account-expiry select,
    .inline-form button,
    .settings-form button {
        width: 100%;
    }
    .pricing-plan-editor {
        grid-template-columns: 1fr;
    }
    .manual-header {
        display: grid;
    }
    .manual-video {
        grid-template-columns: 1fr;
    }
    .manual-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1120px) {
    .app-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100vh - 42px);
        overflow: visible;
    }
    .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
    .workspace {
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    .content-grid { grid-template-columns: 1fr; height: auto; }
    .table-panel { min-height: 520px; order: 2; }
    .player-panel { min-height: 560px; order: 1; }
    .list { max-height: 620px; }
}

@media (max-width: 900px) {
    .brand h1 { font-size: 20px; }
    .sidebar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }
    .brand {
        grid-column: 1 / -1;
        margin-bottom: 2px;
    }
    .panel { margin-bottom: 0; }
    .toolbar {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
    .search-wrap {
        grid-column: 1 / -1;
    }
    .tabs {
        grid-column: 1 / -1;
        width: 100%;
    }
    .tab {
        flex: 1 0 auto;
        min-height: 40px;
    }
}

@media (max-width: 760px) {
    .workspace, .sidebar { padding: 10px; }
    .sidebar { grid-template-columns: 1fr; }
    .toolbar { grid-template-columns: 1fr; }
    .login-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tabs {
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stats-bar,
    .user-list-info {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .chip {
        border-radius: 8px;
        text-align: center;
    }
    .content-grid {
        gap: 10px;
        min-height: 0;
    }
    .player-panel {
        min-height: 0;
    }
    .player-frame {
        aspect-ratio: 16 / 9;
    }
    .selected-info,
    .editor {
        padding: 12px;
    }
    .table-panel {
        min-height: 0;
    }
    .list {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .pagination {
        position: sticky;
        bottom: 0;
        z-index: 2;
    }
    .table-head { display: none; }
    .row {
        grid-template-columns: 1fr;
        gap: 9px;
        min-height: 0;
        padding: 12px;
        margin: 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
    }
    .category-row {
        position: static;
        margin-top: 8px;
    }
    .title {
        white-space: normal;
        line-height: 1.25;
    }
    .sub {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .meta-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 28px;
        border-top: 1px solid #eef2f7;
        padding-top: 8px;
    }
    .select-cell {
        justify-content: space-between;
        border-bottom: 1px solid #eef2f7;
        padding-bottom: 8px;
    }
    .select-cell::before {
        content: "Seleccionar";
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
    }
    .meta-cell::before,
    .actions::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
    }
    .pill.meta-cell {
        border-radius: 0;
        background: transparent;
        color: var(--ink);
        justify-content: space-between;
        padding-left: 0;
        padding-right: 0;
    }
    .actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        border-top: 1px solid #eef2f7;
        padding-top: 8px;
    }
    .actions::before {
        grid-column: 1 / -1;
    }
    .actions button,
    .playback-actions button {
        min-height: 42px;
    }
    .playback-actions {
        grid-template-columns: 1fr;
    }
    .series-info-head,
    .episode-row {
        grid-template-columns: 1fr;
        display: grid;
    }
    .episode-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .two, .button-row { grid-template-columns: 1fr; }
    .toast {
        width: calc(100vw - 24px);
        text-align: center;
    }
}

@media (max-width: 420px) {
    .login-plan-grid {
        grid-template-columns: 1fr;
    }
    .brand-mark {
        width: 42px;
        height: 42px;
    }
    .brand h1 { font-size: 18px; }
    .brand p { font-size: 12px; }
    .stats { grid-template-columns: 1fr; }
    .actions {
        grid-template-columns: 1fr;
    }
}