/* Shared panel layout. Player and capture styles remain in app.css. */
:root {
  --bg: #0b111a;
  --panel: #111a26;
  --panel2: #172230;
  --line: #243142;
  --brand: #8065ef;
  --brand2: #8065ef;
  --radius: 12px;
}
html[data-theme="light"] {
  --bg: #f5f6f8;
  --panel: #fff;
  --panel2: #f2f4f7;
  --line: #e1e5eb;
}
body { background: var(--bg); }
.sidebar { width: 224px; padding: 24px 14px; background: var(--panel); backdrop-filter: none; }
html[data-theme="light"] .sidebar { background: var(--panel); }
.brand { padding: 0 8px 26px; }
.brand-mark { background: var(--brand); box-shadow: none; border-radius: 10px; }
.nav-link { min-height: 44px; border-radius: 8px; margin: 4px 0; }
.nav-link.active { background: rgba(128,101,239,.12); box-shadow: none; color: var(--text); }
.nav-link.active .ico { color: var(--brand); }
.main { margin-left: 224px; }
.topbar { height: 68px; padding: 0 28px; background: var(--bg); backdrop-filter: none; }
html[data-theme="light"] .topbar { background: var(--bg); }
.breadcrumb { display: none; }
.topbar h1 { font-size: 22px; margin: 0; letter-spacing: -.4px; }
.content { max-width: 1280px; padding: 24px 28px 32px; }
.panel, .metric-card, .creator-profile-card, .system-simple-card { background: var(--panel); box-shadow: none; }
.panel { padding: 18px; }
.primary, .secondary, .ghost, .icon-btn { min-height: 40px; border-radius: 8px; }
.primary { background: var(--brand); box-shadow: none; }
.section-head { align-items: center; gap: 16px; margin: 0 0 18px; }
.section-head p { font-size: 13px; margin: 0; }
.section-actions { margin-left: auto; }
.section-tabs { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.section-tabs > a { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px; color: var(--muted); border-radius: 8px; font-weight: 650; }
.section-tabs > a:hover { color: var(--text); background: var(--panel2); }
.section-tabs > a.active { color: var(--text); background: var(--panel2); }
.section-tabs .section-tab-actions { margin-left: auto; }
.panel-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.panel-footer a:hover { color: var(--text); }
.overview-status { display: flex; align-items: center; gap: 10px; padding: 13px 0; margin-bottom: 12px; color: var(--soft); }
.overview-status .ico { flex: 0 0 18px; }
.overview-status.is-ready .ico { color: var(--green); }
.overview-status.needs-attention { color: var(--amber); }
.overview-status a { margin-left: auto; font-size: 12px; text-decoration: underline; white-space: nowrap; }
.smart-metrics.overview-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); background: var(--panel); border-radius: 12px; }
.overview-metrics > div { padding: 18px; }
.overview-metrics strong { font-size: 27px; }
.overview-metrics small { font-size: 11px; }
.live-now-panel .panel-head p { font-size: 12px; }
.creator-directory { background: transparent; border: 0; padding: 0; }
.creator-toolbar { margin-bottom: 16px; }
.creator-card-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.creator-directory .creator-profile-card { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; }
.creator-directory .creator-card-head { margin: 0; align-items: center; gap: 12px; min-width: 0; }
.creator-identity { min-width: 0; }
.creator-identity h3 { margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.creator-identity h3 a:hover { color: var(--brand); }
.profile-avatar { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; width: 40px; height: 40px; flex: 0 0 40px; }
.account-handles { display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.account-handles a:hover { color: var(--text); }
.account-card-status { justify-self: start; }
.creator-directory .creator-card-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 0; margin: 0; border: 0; }
.creator-card-actions > .inline-form { margin: 0; }
.creator-card-actions .inline-form > .secondary { min-width: 80px; }
.creator-profile-card .account-card-warning { grid-column: 1 / -1; margin: 0; font-size: 12px; }
.account-card-warning a { white-space: nowrap; text-decoration: underline; }
.creator-profile-card > .watch-live-row { grid-column: 1 / -1; margin: 0; }
.card-more { position: relative; margin: 0; }
.card-more > summary { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--panel); list-style: none; cursor: pointer; }
.card-more > div { min-width: 210px; border-radius: 10px; padding: 6px; bottom: calc(100% + 8px); }
.card-more button, .card-more > div > a { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 9px 10px; border-radius: 6px; border: 0; background: transparent; color: var(--soft); font-size: 13px; font-weight: 550; text-align: left; white-space: nowrap; }
.card-more button:hover, .card-more > div > a:hover { background: var(--panel2); color: var(--text); }
.card-more button.danger-text { color: var(--red); }
.card-more .ico { width: 17px; height: 17px; flex: 0 0 17px; }
.page-more > div, .section-tab-actions .card-more > div { bottom: auto; top: calc(100% + 8px); }
.card-more[data-menu-side="above"] > div { top: auto; bottom: calc(100% + 8px); overflow-y: auto; }
.card-more[data-menu-side="below"] > div { top: calc(100% + 8px); bottom: auto; overflow-y: auto; }
.archive-overview { margin-bottom: 18px; }
.archive-overview > div, .archive-overview > a { padding: 14px; }
.archive-overview strong { font-size: 21px; }
.archive-overview small { font-size: 10px; }
.recordings-panel { background: transparent; padding: 0; border: 0; }
.archive-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.archive-toolbar .search-box, .creator-toolbar .search-box { flex: 1 1 260px; min-width: 0; }
.search-box input { min-width: 0; }
.filter-drawer > summary { min-height: 40px; border-radius: 8px; }
.filter-drawer[data-active] > summary { border-color: var(--brand); }
.filter-drawer > div { max-width: calc(100vw - 32px); border-radius: 12px; }
.archive-filters > div { width: 480px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.archive-filters .date-pair, .archive-filters .filter-actions { grid-column: 1 / -1; }
.archive-filters .date-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.recording-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.modern-recording-card { min-width: 0; border-radius: 12px; overflow: visible; background: var(--panel); }
.modern-recording-card .recording-thumb { border-radius: 11px 11px 0 0; overflow: hidden; }
.recording-body { padding: 14px; }
.recording-title-line > div { min-width: 0; }
.modern-card-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 40px; gap: 8px; align-items: center; }
.modern-card-actions > .recording-more { grid-column: 3; }
.modern-card-actions > .inline-form:has(.repair-action) { grid-column: 1 / -1; order: 0; }
.modern-card-actions > .inline-form:has(.stop-btn) { grid-column: auto; }
.modern-card-actions .watch-action, .modern-card-actions .download-action { min-width: 0; width: 100%; padding: 9px 8px; font-size: 12px; }
.modern-card-actions .download-action span { display: inline; }
.modern-card-actions .recording-wait-note { grid-column: 1 / 3; }
.recording-report { border: 0; border-radius: 0; margin: 5px 0 9px; background: transparent; }
.recording-report > summary { padding: 6px 0; min-height: 30px; color: var(--muted); font-size: 12px; }
.recording-report .smart-details-body { padding: 10px 0; border-top: 1px solid var(--line); font-size: 12px; overflow-wrap: anywhere; }
.settings-grid { display: grid; gap: 12px; max-width: 860px; }
.settings-section { margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.settings-grid > .settings-section { margin: 0; }
.settings-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; list-style: none; font-size: 14px; font-weight: 650; cursor: pointer; }
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary::after { content: ''; width: 7px; height: 7px; flex: 0 0 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); margin: 0 4px; }
.settings-section[open] > summary::after { transform: rotate(225deg); }
.settings-section > summary small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 400; }
.settings-section-body { padding: 0 18px 18px; min-width: 0; }
.settings-section-body > .form-grid { max-width: 700px; }
.settings-section-body .form-grid label, .settings-section-body input, .settings-section-body select { min-width: 0; }
.security-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.security-panel h2 { font-size: 14px; margin: 0 0 3px; }
.security-panel p { margin: 0; font-size: 12px; color: var(--muted); }
.system-simple-grid { gap: 12px; margin: 0 0 18px; }
.system-simple-card { border-radius: 12px; padding: 16px; }
.system-advanced > summary { padding: 18px; }
.profile-hero { background: var(--panel); border-radius: 12px; padding: 18px; }
.profile-hero .profile-actions { gap: 8px; margin-top: 12px; }
.profile-hero .profile-avatar.xl { background: var(--panel2); border-radius: 12px; }
.profile-hero .account-handles { margin-top: 10px; font-size: 14px; }
.profile-statistics .metric-card { min-height: 110px; padding: 14px; }
.profile-statistics .metric-card > strong { font-size: 24px; }
.profile-statistics .dashboard-grid, .profile-statistics .two-col { margin: 12px 0; }
.recent-row { min-width: 0; }
.recent-row > div { min-width: 0; }
.recent-row strong, .recent-row span { overflow-wrap: anywhere; }
:is(a, button, summary, input, select):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 1180px) {
  .recording-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .sidebar { width: 260px; }
  .main { margin-left: 0; }
  .topbar { padding: 0 18px; }
  .topbar h1 { font-size: 20px; }
  .content { padding: 20px 18px 24px; }
  .bottom-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .bottom-nav .active .ico { background: rgba(128,101,239,.12); color: var(--brand); }
  .card-more > summary, .card-more button, .card-more > div > a { min-height: 44px; }
}
@media (max-width: 760px) {
  .section-head { flex-direction: row; }
  .section-head p { font-size: 12px; }
  .section-tabs { gap: 2px; }
  .section-tabs > a { padding: 8px 11px; font-size: 12px; }
  .content { padding: 16px 16px 24px; }
  .overview-metrics > div { padding: 12px 9px; }
  .overview-metrics strong { font-size: 23px; }
  .overview-metrics small { font-size: 10px; }
  .creator-directory .creator-profile-card { grid-template-columns: minmax(0,1fr) auto; gap: 8px 10px; padding: 12px; }
  .creator-card-head { grid-column: 1; }
  .account-card-status { grid-column: 1; grid-row: 2; padding-left: 52px; }
  .creator-directory .creator-card-actions { grid-column: 2; grid-row: 1 / 3; }
  .creator-card-actions .inline-form > .secondary { min-width: 64px; padding: 8px; font-size: 12px; }
  .creator-card-actions .secondary .ico { display: none; }
  .account-card-status .realtime-live-badge { font-size: 10px; }
  .creator-profile-card .account-card-warning { grid-column: 1 / -1; }
  .creator-toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .creator-toolbar .search-box { grid-column: 1 / -1; width: 100%; }
  .creator-toolbar > .secondary, .creator-toolbar > .filter-drawer > summary { width: 100%; justify-content: center; }
  .archive-toolbar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .archive-toolbar .search-box { grid-column: 1 / -1; }
  .archive-toolbar > .secondary { width: 100%; }
  .archive-toolbar > .filter-drawer > summary { width: 100%; justify-content: center; }
  .filter-drawer > div { position: fixed; inset: 90px 16px auto; width: auto; max-width: none; max-height: calc(100dvh - 180px); overflow-y: auto; z-index: 60; }
  .recording-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .archive-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .security-panel { align-items: flex-start; flex-direction: column; gap: 12px; }
  .settings-section > summary { padding: 16px; }
  .settings-section-body { padding: 0 16px 16px; }
  .system-simple-grid { grid-template-columns: 1fr; gap: 8px; }
  .system-simple-card { padding: 12px; }
  .system-simple-card p { margin: 4px 0 0; }
  .panel-footer { padding-bottom: 12px; }
}
@media (max-width: 560px) {
  .recording-grid { grid-template-columns: minmax(0,1fr); }
  .recent-row { grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; }
  .recent-row .file-size { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-link, .section-tabs > a { transition: none; }
}