/* Channels only: the shared shell and sidebar remain the source of truth. */
.channels-workspace {
  --channels-edge: color-mix(in srgb, var(--sia-sidebar-active-line) 20%, var(--sia-line));
  --channels-control-edge: color-mix(in srgb, var(--sia-sidebar-active-line) 35%, var(--sia-line));
  --channels-control-fill: linear-gradient(color-mix(in srgb, var(--sia-surface) 65%, transparent), color-mix(in srgb, var(--sia-surface) 65%, transparent)), var(--sia-sidebar-active);
  --channels-glow: inset 0 1px 0 rgba(121,215,210,.035), 0 0 12px rgba(67,189,184,.035);
}
.channels-workspace .main { padding: 32px 32px 40px; }
.channels-workspace .channels-page { container-type: inline-size; }
.channels-workspace .top-header { align-items: flex-start; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; padding: 0; }
.channels-workspace .top-header-left { flex: 1 1 440px; align-items: flex-start; gap: 16px; }
.channels-workspace .top-header-icon {
  background: var(--channels-control-fill) !important;
  border: 1px solid var(--channels-control-edge);
  border-radius: 18px;
  box-shadow: var(--channels-glow);
  color: var(--sia-sidebar-accent) !important;
  flex: 0 0 64px;
  height: 64px;
}
.channels-workspace .top-header-icon svg { width: 30px; height: 30px; stroke-width: 1.7; }
.channels-workspace .top-header-copy { min-width: 0; }
.channels-workspace .top-header-copy h1 { color: var(--sia-heading); font-size: clamp(36px, 3.2vw, 48px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.channels-workspace .top-header-copy h1 span { color: var(--sia-sidebar-accent); }
.channels-workspace .top-header-copy p { color: var(--sia-muted); font-size: 16px; line-height: 1.55; margin-top: 10px; }
.channels-workspace .top-cap { background: var(--channels-control-fill) !important; border-color: var(--channels-control-edge); border-radius: 999px; color: var(--sia-muted) !important; font-size: 13px; gap: 6px; min-height: 40px; padding: 8px 14px; white-space: normal; }
.channels-workspace .top-cap strong { color: var(--sia-sidebar-accent); }
.channels-workspace .channels-page > .card {
  background: var(--sia-sidebar-bg) !important;
  border-color: var(--channels-edge) !important;
  border-radius: 24px;
  box-shadow: var(--channels-glow) !important;
  margin: 0 0 24px;
}
.channels-workspace .add-card { align-items: start; gap: 24px; grid-template-columns: minmax(0, 1fr) 260px; padding: 28px; }
.channels-workspace .add-art { display: none; }
.channels-workspace .add-main h2 { color: var(--sia-heading); font-size: 24px; font-weight: 800; letter-spacing: 0; line-height: 1.25; }
.channels-workspace .add-main p { color: var(--sia-muted); font-size: 15px; line-height: 1.55; margin-bottom: 20px; }
.channels-workspace .add-form { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-bottom: 12px; }
.channels-workspace .input-shell { background: var(--sia-surface) !important; border-color: var(--sia-line-strong); border-radius: 16px; min-height: 52px; min-width: 0; padding: 0 14px; }
.channels-workspace .input-shell input { background: transparent !important; color: var(--sia-text) !important; font-size: 15px; min-width: 0; }
.channels-workspace .input-shell input::placeholder { color: var(--sia-muted) !important; }
.channels-workspace .input-shell svg { color: var(--sia-sidebar-accent); }
.channels-workspace .input-shell:focus-within { border-color: var(--sia-teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sia-teal) 14%, transparent); }
.channels-workspace :is(.btn-add, .add-niche-channels-btn) {
  background: linear-gradient(110deg, #0b7178, #0c666f);
  border: 1px solid var(--channels-control-edge);
  border-radius: 16px;
  box-shadow: var(--channels-glow);
  color: #fff;
  font: 800 14px/1.4 Inter, sans-serif;
  min-height: 52px;
  padding: 12px 20px;
  width: auto;
}
html[data-theme="dark"] .channels-workspace :is(.btn-add, .add-niche-channels-btn) { background: var(--sia-sidebar-active) !important; color: var(--sia-heading) !important; }
.channels-workspace :is(.btn-add, .add-niche-channels-btn):hover:not(:disabled) { border-color: var(--sia-sidebar-active-line); box-shadow: var(--sia-sidebar-glow); filter: brightness(1.06); transform: none; }
.channels-workspace :is(.btn-add, .add-niche-channels-btn, .add-suggested-channel-btn):disabled { cursor: not-allowed; opacity: .55; box-shadow: none; filter: none; }
.channels-workspace .example-row { gap: 8px; }
.channels-workspace .example-chip { background: var(--sia-surface-soft) !important; border-color: var(--sia-line); border-radius: 12px; color: var(--sia-muted) !important; font: 600 12px/1.4 Inter, sans-serif; min-height: 44px; overflow-wrap: anywhere; padding: 8px 12px; }
.channels-workspace .example-chip:hover { background: var(--channels-control-fill) !important; border-color: var(--channels-control-edge); color: var(--sia-sidebar-accent) !important; }
.channels-workspace .add-benefits { border-color: var(--sia-line); padding-left: 24px; }
.channels-workspace .add-benefits ul { gap: 14px; }
.channels-workspace .add-benefits li { color: var(--sia-text); font-size: 15px; line-height: 1.5; }
.channels-workspace .add-benefits li::before { background: var(--channels-control-fill); border: 1px solid var(--channels-control-edge); color: var(--sia-sidebar-accent); width: 22px; height: 22px; }
.channels-workspace .progress-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(80px, .4fr) auto; gap: 16px; padding: 20px 24px; }
.channels-workspace .quota-ring { width: 64px; height: 64px; }
.channels-workspace .quota-ring::after { background: var(--sia-surface); border-color: var(--sia-line); width: 54px; height: 54px; }
html .channels-workspace .quota-ring span { color: var(--sia-heading) !important; font-size: 14px; font-weight: 800; }
.channels-workspace .quota-copy { min-width: 0; }
.channels-workspace .quota-copy h3 { color: var(--sia-heading); font-size: 20px; letter-spacing: 0; line-height: 1.35; }
.channels-workspace .quota-copy p { color: var(--sia-muted); font-size: 15px; line-height: 1.5; }
.channels-workspace .quota-track { background: var(--sia-line); height: 8px; width: 100%; }
.channels-workspace .quota-fill { background: linear-gradient(90deg, var(--sia-teal), var(--sia-teal-dark)); }
.channels-workspace .quota-spark { display: none; }
.channels-workspace :is(.delete-all-btn, .confirm-actions .delete-confirm) { background: var(--sia-danger-soft) !important; border: 1px solid color-mix(in srgb, var(--sia-danger) 35%, var(--sia-line)) !important; border-radius: 14px; box-shadow: none; color: var(--sia-danger) !important; font: 750 14px/1.4 Inter, sans-serif; min-height: 44px; padding: 10px 16px; }
.channels-workspace :is(.delete-all-btn, .confirm-actions .delete-confirm):hover:not(:disabled) { border-color: var(--sia-danger) !important; background: color-mix(in srgb, var(--sia-danger) 12%, var(--sia-surface)) !important; transform: none; }
.channels-workspace :is(.channels-card-head, .channel-suggestions-head) { background: transparent !important; border-color: var(--sia-line); border-radius: 24px 24px 0 0; padding: 24px; }
.channels-workspace :is(.channels-card-head h2, .channel-suggestions-head h2) { color: var(--sia-heading); font-size: 24px; font-weight: 800; letter-spacing: 0; line-height: 1.3; }
.channels-workspace .channels-card-head h2 span { color: var(--sia-muted); font-size: 14px; }
.channels-workspace .channel-suggestions-head p { color: var(--sia-muted); font-size: 15px; line-height: 1.55; }
.channels-workspace .channel-row { background: transparent !important; border-color: var(--sia-line); grid-template-columns: minmax(180px, 1.7fr) repeat(2, minmax(80px, .8fr)) minmax(95px, .9fr) minmax(55px, .5fr) auto 44px; gap: 16px; padding: 20px 24px; }
.channels-workspace .channel-row:hover { background: color-mix(in srgb, var(--sia-teal) 3%, transparent) !important; }
.channels-workspace .channel-row:last-child { border-radius: 0 0 24px 24px; }
.channels-workspace .channel-avatar { width: 52px; height: 52px; background: var(--sia-teal-soft); border-color: var(--channels-control-edge); color: var(--sia-sidebar-accent); }
.channels-workspace .channel-avatar.avatar-fallback { background: var(--sia-teal-soft); }
.channels-workspace .channel-name { color: var(--sia-heading); font-size: 16px; line-height: 1.4; letter-spacing: 0; }
.channels-workspace .metric-label { color: var(--sia-muted); font-size: 12px; font-weight: 600; line-height: 1.5; }
.channels-workspace .metric-value { color: var(--sia-heading); font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.5; }
.channels-workspace .channel-row .metric-col-added { display: block; }
.channels-workspace .status-pill { background: var(--channels-control-fill) !important; border-color: var(--channels-control-edge); color: var(--sia-sidebar-accent) !important; font-size: 12px; line-height: 1.4; padding: 6px 10px; white-space: normal; }
.channels-workspace .status-pill::before { background: currentColor; flex: 0 0 6px; height: 6px; }
.channels-workspace .status-pill.inactive { background: var(--sia-surface-soft) !important; border-color: var(--sia-line); color: var(--sia-muted) !important; }
.channels-workspace .status-pill.preview { background: color-mix(in srgb, #c99c45 10%, var(--sia-surface)) !important; border-color: color-mix(in srgb, #c99c45 35%, var(--sia-line)); color: #947025 !important; }
html[data-theme="dark"] .channels-workspace .status-pill.preview { color: #edcd84 !important; }
.channels-workspace .kebab-btn { background: transparent; border-color: var(--sia-line); border-radius: 14px; color: var(--sia-muted); width: 44px; height: 44px; }
.channels-workspace .kebab-btn:hover { background: var(--channels-control-fill); border-color: var(--channels-control-edge); color: var(--sia-sidebar-accent); }
.channels-workspace :is(.kebab-menu, .channels-sort-menu) { background: var(--sia-surface-soft) !important; border: 1px solid var(--sia-line-strong); border-radius: 16px; box-shadow: var(--sia-shadow); max-width: calc(100vw - 48px); padding: 6px; }
.channels-workspace .kebab-menu button { color: var(--sia-text); min-height: 44px; font-size: 14px; border-radius: 10px; }
.channels-workspace .kebab-menu button:hover { background: var(--sia-teal-soft); }
.channels-workspace .kebab-menu button.danger { color: var(--sia-danger); }
.channels-workspace .kebab-menu button.danger:hover { background: var(--sia-danger-soft); }
.channels-workspace .sort-select { background-color: var(--sia-surface-soft); border-color: var(--sia-line-strong); border-radius: 14px; color: var(--sia-text); font: 600 14px/1.4 Inter, sans-serif; min-height: 48px; max-width: 100%; }
.channels-sort { position: relative; min-width: 0; max-width: 100%; }
.channels-sort.is-enhanced > select { display: none; }
.channels-workspace .channels-sort-trigger { align-items: center; background: var(--channels-control-fill); border: 1px solid var(--channels-control-edge); border-radius: 14px; color: var(--sia-text); cursor: pointer; display: flex; font: 700 14px/1.4 Inter, sans-serif; gap: 12px; justify-content: space-between; min-height: 48px; padding: 10px 14px; text-align: left; width: 100%; }
.channels-sort-trigger svg { color: var(--sia-sidebar-accent); flex: 0 0 18px; height: 18px; }
.channels-workspace .channels-sort-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 100%; width: max-content; z-index: 60; }
.channels-sort-menu[hidden] { display: none; }
.channels-workspace .channels-sort-option { align-items: center; background: transparent; border: 0; border-radius: 10px; color: var(--sia-text); cursor: pointer; display: flex; font: 600 14px/1.4 Inter, sans-serif; min-height: 44px; padding: 10px 12px; text-align: left; width: 100%; }
.channels-workspace .channels-sort-option[aria-selected="true"], .channels-workspace .channels-sort-option:hover { background: var(--sia-teal-soft); color: var(--sia-sidebar-accent); }
.channels-workspace .empty-state { color: var(--sia-muted); font-size: 15px; line-height: 1.55; padding: 40px 24px; }
.channels-workspace .empty-state h3 { color: var(--sia-heading); font-size: 20px; }
.channels-workspace :is(.channel-suggestions-status, .recommendations-intro p, .channel-suggestion-niche, .channel-suggestion-subscribers) { color: var(--sia-muted); font-size: 15px; line-height: 1.55; }
.channels-workspace :is(.niche-recommendation, .recommendations-loading span) { background: var(--sia-surface-soft); border-color: var(--sia-line); box-shadow: none; }
.channels-workspace .niche-recommendation h4 { color: var(--sia-heading); font-size: 18px; }
.channels-workspace .niche-recommendation-category { color: var(--sia-sidebar-accent); font-size: 12px; }
.channels-workspace .recommended-channel-avatar { background: var(--sia-teal-soft); border-color: var(--channels-control-edge); color: var(--sia-sidebar-accent); height: 44px; width: 44px; flex-basis: 44px; }
.channels-workspace .recommended-channel-name { color: var(--sia-heading); font-size: 15px; }
.channels-workspace .recommended-channel-meta { color: var(--sia-muted); font-size: 12px; }
.channels-workspace .channel-suggestion-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .7fr) auto; gap: 16px; padding: 16px 24px; }
.channels-workspace :is(.channel-suggestion-niche strong, .channel-suggestion-subscribers strong) { color: var(--sia-heading); font-size: 15px; }
.channels-workspace .add-suggested-channel-btn { background: var(--channels-control-fill); border-color: var(--channels-control-edge); color: var(--sia-sidebar-accent); font-size: 14px; }
.channels-workspace .add-suggested-channel-btn:hover:not(:disabled) { background: var(--sia-sidebar-active); color: var(--sia-heading); }
.channels-workspace .feedback { background: var(--sia-surface-soft) !important; border-color: var(--sia-line); color: var(--sia-text) !important; font-size: 14px; line-height: 1.55; }
.channels-workspace .feedback.success { background: var(--sia-teal-soft) !important; border-color: var(--channels-control-edge); color: var(--sia-sidebar-accent) !important; }
.channels-workspace .feedback.error { background: var(--sia-danger-soft) !important; border-color: color-mix(in srgb, var(--sia-danger) 40%, var(--sia-line)); color: var(--sia-danger) !important; }
.channels-workspace .feedback.warning { background: color-mix(in srgb, #c99c45 8%, var(--sia-surface)) !important; border-color: color-mix(in srgb, #c99c45 40%, var(--sia-line)); color: var(--sia-text) !important; }
.channels-workspace .footer-note { background: transparent !important; border: 0; border-top: 1px solid var(--sia-line); border-radius: 0; color: var(--sia-muted); font-size: 14px; line-height: 1.6; max-width: none; padding: 20px 0 0; }
.channels-workspace .footer-note strong { color: var(--sia-sidebar-accent); }
.channels-workspace .confirm-modal { background: var(--sia-sidebar-bg) !important; border-color: var(--channels-edge) !important; color: var(--sia-text); max-height: calc(100dvh - 48px); overflow-y: auto; }
.channels-workspace .confirm-icon { background: var(--sia-danger-soft); border-color: color-mix(in srgb, var(--sia-danger) 30%, var(--sia-line)); color: var(--sia-danger); }
.channels-workspace .confirm-modal h3 { font-size: 24px; line-height: 1.3; }
.channels-workspace .confirm-modal p { color: var(--sia-muted); font-size: 15px; overflow-wrap: anywhere; }
.channels-workspace .confirm-modal strong { color: var(--sia-heading); }
.channels-workspace .confirm-actions button { background: var(--sia-surface-soft); border-color: var(--sia-line-strong); border-radius: 14px; color: var(--sia-text); font-size: 14px; }
.channels-workspace :is(.channels-page, .confirm-overlay) :is(button, a, select):focus-visible { outline: 2px solid var(--sia-teal); outline-offset: 3px; }

@container (max-width: 1000px) {
  .channels-workspace .channel-row { grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(75px, .7fr)) minmax(55px, .5fr) auto 44px; }
  .channels-workspace .channel-row .metric-col-added { display: none; }
  .channels-workspace .progress-card { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .channels-workspace .quota-track { grid-column: 2; grid-row: 2; }
  .channels-workspace .quota-ring { grid-row: span 2; }
  .channels-workspace .quota-delete-btn { grid-column: 3; grid-row: span 2; }
}
@container (max-width: 760px) {
  .channels-workspace .add-card { grid-template-columns: minmax(0, 1fr); }
  .channels-workspace .add-benefits { border-left: 0; border-top: 1px solid var(--sia-line); padding: 20px 0 0; }
  .channels-workspace .add-benefits ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .channels-workspace .channel-row { grid-template-columns: repeat(2, minmax(0, 1fr)) 44px; gap: 16px; }
  .channels-workspace .channel-main { grid-column: 1 / 3; grid-row: 1; }
  .channels-workspace .channel-row .kebab-wrap { grid-column: 3; grid-row: 1; align-self: center; }
  .channels-workspace .channel-row .metric { display: block; grid-column: auto; grid-row: auto; }
  .channels-workspace .channel-row .metric-col-added { display: block; }
  .channels-workspace .channel-row .status-pill { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
  .channels-workspace .channel-row .metric-label { margin-bottom: 4px; font-size: 12px; }
  .channels-workspace .channel-row .metric-value { font-size: 15px; }
  .channels-workspace .channel-row > .metric:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .channels-workspace .channel-row > .metric:nth-of-type(3) { grid-column: 2 / -1; grid-row: 2; }
  .channels-workspace .channel-row > .metric:nth-of-type(4) { grid-column: 1; grid-row: 3; }
  .channels-workspace .channel-row > .metric:nth-of-type(5) { grid-column: 2 / -1; grid-row: 3; }
  .channels-workspace .niche-recommendation-grid, .channels-workspace .recommendations-loading { grid-template-columns: minmax(0, 1fr); }
  .channels-workspace .channel-suggestion-row { grid-template-columns: minmax(0, 1fr) auto; }
  .channels-workspace .channel-suggestion-niche, .channels-workspace .channel-suggestion-subscribers { display: none; }
}
@container (max-width: 500px) {
  .channels-workspace .top-header-left { flex-basis: 100%; gap: 12px; }
  .channels-workspace .top-header-icon { width: 52px; height: 52px; flex-basis: 52px; border-radius: 16px; }
  .channels-workspace .top-header-copy h1 { font-size: 32px; }
  .channels-workspace .top-header-copy p { font-size: 15px; }
  .channels-workspace .top-cap { width: auto; justify-content: flex-start; align-self: flex-start; }
  .channels-workspace .add-card { padding: 24px 20px; }
  .channels-workspace .add-form { grid-template-columns: minmax(0, 1fr); }
  .channels-workspace .btn-add { width: 100%; }
  .channels-workspace .add-benefits ul { grid-template-columns: minmax(0, 1fr); }
  .channels-workspace .progress-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 20px; }
  .channels-workspace .quota-copy h3 { font-size: 18px; }
  .channels-workspace .quota-delete-btn { grid-column: 1 / -1; grid-row: 3; order: 0; width: 100%; }
  .channels-workspace :is(.channels-card-head, .channel-suggestions-head) { padding: 20px; }
  .channels-workspace .channels-card-actions, .channels-workspace .channels-sort { width: 100%; }
  .channels-workspace .channel-row { padding: 20px; }
  .channels-workspace .channel-suggestion-row { padding: 16px 20px; gap: 12px; }
  .channels-workspace .add-suggested-channel-btn { min-width: 72px; padding: 0 12px; }
}
@media (max-width: 900px) {
  .channels-workspace .floating-theme-toggle { bottom: auto; right: 16px; top: 17px; z-index: 41; }
  .channels-workspace .main { padding: 24px 20px 32px; }
  .channels-workspace .top-header { padding-right: 52px; }
  .channels-workspace .top-header-copy h1 { overflow-wrap: normal; }
}
@media (max-width: 420px) {
  .channels-workspace .main { padding: 24px 16px 32px; }
  .channels-workspace .top-header-left { display: block; }
  .channels-workspace .top-header-icon { display: flex; margin-bottom: 14px; }
  .channels-workspace .confirm-overlay { padding: 16px; }
  .channels-workspace .confirm-actions { flex-wrap: wrap; }
  .channels-workspace .confirm-actions button { flex: 1 1 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .channels-workspace .channels-page *, .channels-workspace .confirm-overlay * { animation: none !important; transition: none !important; }
}