:root { color-scheme: light; font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif; color: #20252b; background: #f4f6f8; --navy:#26384a; --blue:#2367a9; --line:#d8dee5; --muted:#66727e; --danger:#b42318; --success:#18794e; --warning:#9a6700; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f4f6f8; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
label { display:block; margin: 16px 0 6px; font-size: .9rem; font-weight: 700; }
input, select, textarea { width:100%; min-height:42px; padding:9px 11px; border:1px solid #b9c2cc; border-radius:3px; background:#fff; color:#20252b; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline:3px solid rgba(35,103,169,.22); outline-offset:1px; border-color:var(--blue); }
h1,h2,p { margin-top:0; }
h1 { font-size:1.75rem; }
h2 { font-size:1.25rem; }
.auth-layout { min-height:100vh; display:grid; grid-template-columns:minmax(320px, 42%) 1fr; background:#fff; }
.brand-panel { display:flex; align-items:center; padding:8vw; color:#fff; background:linear-gradient(145deg,#25384b,#174f7b); }
.brand-panel h1 { font-size:clamp(2rem,4vw,3.5rem); max-width:500px; }
.brand-panel p:not(.eyebrow) { color:#d9e6f1; line-height:1.7; }
.auth-panel { width:min(100%,520px); align-self:center; justify-self:center; padding:48px; }
.tabs { display:flex; border-bottom:1px solid var(--line); margin-bottom:30px; }
.tab { flex:1; padding:14px; border:0; border-bottom:3px solid transparent; background:#fff; color:var(--muted); font-weight:700; }
.tab.active { color:var(--blue); border-color:var(--blue); }
.muted { color:var(--muted); line-height:1.6; }
.eyebrow { margin-bottom:8px; color:#3c78ad; font-size:.75rem; font-weight:800; letter-spacing:.14em; }
.brand-panel .eyebrow { color:#afd1ed; }
.button { min-height:42px; padding:9px 16px; border:1px solid transparent; border-radius:3px; font-weight:700; }
.button.primary { color:#fff; background:var(--blue); }
.button.secondary { color:#22374a; background:#fff; border-color:#aeb9c4; }
.button.ghost { color:#4b5966; background:transparent; border-color:#cbd3da; }
.button.danger { color:#fff; background:var(--danger); }
.button.full { width:100%; margin-top:20px; }
.text-button { border:0; background:transparent; color:var(--blue); padding:8px 0; }
.reset-link { margin-top:14px; }
.login-options { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:16px; }
.check-option { display:inline-flex; align-items:center; gap:7px; margin:0; color:var(--muted); font-size:.86rem; font-weight:600; white-space:nowrap; }
.check-option input { width:auto; min-height:0; margin:0; }
.message { padding:10px 12px; margin:14px 0 0; border-left:4px solid; background:#fff4f2; color:var(--danger); }
.message-success { color:var(--success); background:#edf9f2; }
.readonly { padding:12px; border:1px solid var(--line); background:#f7f8fa; }
.topbar { background:var(--navy); color:#fff; }
.app-sticky-header { position:sticky; top:0; z-index:40; box-shadow:0 3px 12px rgba(20,39,58,.18); }
.topbar-inner { width:min(1440px,calc(100% - 40px)); margin:auto; padding:16px 0; }
.app-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.app-brand { flex:0 0 auto; }
.account-navigation { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px 14px; min-width:0; }
.current-member { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.9rem; }
.app-navigation { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
.app-nav-button { min-height:38px; padding:7px 12px; border:1px solid rgba(255,255,255,.42); border-radius:3px; background:transparent; color:#fff; font-weight:700; }
.app-nav-button:hover { background:rgba(255,255,255,.1); }
.app-nav-button.active,.app-nav-button[aria-current="page"] { border-color:#fff; background:#fff; color:var(--navy); }
.app-nav-button.logout-button { margin-left:4px; border-color:rgba(255,255,255,.65); }
[hidden] { display:none !important; }
.page { width:min(1440px,calc(100% - 40px)); margin:36px auto; }
.content-card,.narrow-card,.workspace { background:#fff; border:1px solid var(--line); padding:32px; box-shadow:0 2px 8px rgba(21,32,43,.05); }
.narrow-card { max-width:650px; margin:8vh auto; }
.section-header,.toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); margin-bottom:26px; padding-bottom:20px; }
.button-row,.table-actions { display:flex; flex-wrap:wrap; gap:8px; }
.user-strip { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); background:#f8fafb; }
.youtube-connection-card { margin-top:24px; padding:24px; border:1px solid var(--line); background:#fff; }.youtube-connection-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }.youtube-connection-heading h2 { margin-bottom:8px; }.youtube-connection-heading .muted { margin-bottom:0; }.youtube-connection-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:20px 0 0; border:1px solid var(--line); background:var(--line); }.youtube-connection-details div { min-width:0; padding:13px 15px; background:#f9fafb; }.youtube-connection-details dt { color:var(--muted); font-size:.8rem; }.youtube-connection-details dd { margin:6px 0 0; font-weight:700; }
.settings-page > .youtube-connection-card { margin-top:0; }
.playlist-settings-card { margin-top:24px; padding:24px; border:1px solid var(--line); background:#fff; }
.playlist-settings-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.playlist-capabilities { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:20px 0; border:1px solid var(--line); background:var(--line); }
.playlist-capabilities div { min-width:0; padding:13px 15px; background:#f9fafb; }
.playlist-capabilities dt { color:var(--muted); font-size:.8rem; }
.playlist-capabilities dd { margin:6px 0 0; font-weight:700; overflow-wrap:anywhere; }
.playlist-list-fieldset { min-width:0; margin-top:18px; border:1px solid var(--line); }
.playlist-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.playlist-option { display:flex; align-items:center; gap:10px; min-width:0; margin:0; padding:12px; border:1px solid #e1e6eb; background:#f9fafb; }
.playlist-option input { flex:0 0 auto; width:20px; min-height:20px; margin:0; }
.playlist-option span { min-width:0; }
.playlist-option strong,.playlist-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.playlist-option small { margin-top:4px; color:var(--muted); font-weight:500; }
.connection-summary { margin-top:24px; padding:16px 18px; border-left:4px solid var(--blue); background:#f0f6fb; }
.connection-summary p { margin:6px 0 0; color:var(--muted); line-height:1.6; }
.upload-preparation { margin-top:24px; padding-top:28px; border-top:1px solid var(--line); }
.workspace-intro { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.workspace-menu { position:sticky; top:82px; z-index:30; display:flex; gap:6px; margin:-12px 0 18px; padding:8px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.96); box-shadow:0 4px 14px rgba(20,39,58,.08); }
.workspace-menu-button { min-height:42px; padding:8px 14px; border:0; border-radius:8px; background:transparent; color:var(--navy); font-weight:800; cursor:pointer; }
.workspace-menu-button:hover,.workspace-menu-button:focus-visible,.workspace-menu-button.active { background:#e8f1fa; color:var(--blue); outline:none; }
.workspace-menu-button:focus-visible { box-shadow:0 0 0 3px rgba(35,103,169,.25); }
.youtube-quota-summary { display:grid; gap:2px; min-width:190px; min-height:42px; margin-left:auto; padding:6px 12px; border:1px solid #c5d0da; border-radius:8px; background:#f7fafc; color:#344454; text-align:left; font-size:.78rem; font-weight:800; line-height:1.3; }
.youtube-quota-summary:hover,.youtube-quota-summary:focus-visible { border-color:var(--blue); background:#edf5fb; }
.youtube-quota-summary[data-state="warning"] { border-color:#e2b548; background:#fff8df; color:#765500; }
.youtube-quota-summary[data-state="exhausted"] { border-color:#df8c84; background:#fff0ee; color:var(--danger); }
.youtube-quota-summary[data-state="unavailable"] { color:var(--muted); }
.workspace-context-summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 18px; margin-bottom:18px; padding:12px 16px; border-radius:10px; background:#f1f6fa; color:#344454; }
.folder-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.folder-card { min-width:0; padding:20px; border:1px solid var(--line); background:#f9fafb; }
.folder-card h3 { margin:0; font-size:1.05rem; }
.folder-details { margin:18px 0; }
.folder-details div { display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid #e8ecef; }
.folder-details dt { color:var(--muted); }.folder-details dd { min-width:0; margin:0; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.folder-permission { color:var(--warning); }.analysis-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:22px 0; }
.analysis-progress { display:grid; grid-template-columns:minmax(150px,1fr) minmax(200px,3fr) auto; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); background:#f8fafb; }
.analysis-progress progress { width:100%; height:12px; }
.analysis-summary { display:flex; flex-wrap:wrap; gap:8px 18px; margin:18px 0; padding:14px 16px; border-left:4px solid var(--success); background:#edf9f2; }
.queue-section { margin-top:30px; }.queue-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.troubleshooting-panel { margin:12px 0; padding:12px 16px; border:1px solid #f0cf76; border-radius:10px; background:#fffaf0; }
.troubleshooting-panel summary { cursor:pointer; font-weight:800; }
.selection-action-bar { position:sticky; bottom:0; z-index:25; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:12px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.97); box-shadow:0 -4px 16px rgba(20,39,58,.12); }
.selection-action-bar p { margin:4px 0 0; }
.batch-playlist-control { display:grid; grid-template-columns:minmax(190px,280px) minmax(240px,1fr); align-items:end; gap:8px 16px; margin:18px 0; padding:16px; border:1px solid var(--line); background:#f8fafb; }
.batch-playlist-control label { margin:0; }
.batch-playlist-control select { grid-column:2; grid-row:1; }
.batch-playlist-control p { grid-column:1 / -1; margin:0; }
.batch-upload-status { display:grid; gap:12px; margin:18px 0; padding:16px; border:1px solid var(--line); background:#fff; }
.batch-status-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.batch-status-heading h3 { margin:0; }
.batch-status-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.batch-status-grid div { min-width:0; padding:10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.batch-status-grid dt { color:var(--muted); font-size:.78rem; font-weight:700; }
.batch-status-grid dd { margin:4px 0 0; overflow-wrap:anywhere; font-weight:700; }
.batch-upload-status progress { width:100%; height:12px; }
.batch-upload-status > p { margin:0; }
.queue-tools { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; margin:18px 0 12px; }.queue-tools label { flex:1 1 240px; margin:0; }.queue-tools input,.queue-tools select { margin-top:6px; }
.queue-table { min-width:1180px; }.queue-table th:first-child { width:58px; }.queue-table th:nth-child(2) { min-width:220px; }.queue-table th:nth-child(5) { min-width:185px; }.queue-table th:nth-child(6) { min-width:230px; }.queue-title { max-width:260px; overflow-wrap:anywhere; }
.queue-checkbox { width:22px; height:22px; margin:0; accent-color:var(--blue); cursor:pointer; }
.queue-checkbox:disabled { cursor:not-allowed; }
.queue-checkbox-label { display:inline-flex; min-width:32px; min-height:32px; align-items:center; justify-content:center; }
.queue-checkbox:focus-visible { outline:3px solid rgba(35,103,169,.28); outline-offset:2px; }
.queue-status { display:inline-flex; margin:2px; padding:4px 7px; border-radius:999px; background:#fff1cc; color:#785500; font-size:.75rem; font-weight:800; white-space:nowrap; }.queue-status.ready { color:var(--success); background:#dff5e8; }
.thumbnail-cell { display:grid; grid-template-columns:50px 1fr; align-items:center; gap:6px 8px; }.thumbnail-cell img { grid-row:1 / span 2; width:50px; height:50px; object-fit:cover; border:1px solid var(--line); }.thumbnail-cell select { min-height:34px; padding:4px; font-size:.78rem; }
.preview-modal { width:min(100%,850px); max-height:calc(100vh - 40px); overflow:auto; }.preview-files { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.preview-files div { min-width:0; padding:12px; background:#f7f8fa; }.preview-files dt { color:var(--muted); }.preview-files dd { margin:6px 0 0; overflow-wrap:anywhere; }.preview-thumbnail { display:block; width:min(100%,360px); max-height:210px; margin:18px auto; object-fit:contain; border:1px solid var(--line); }.preview-warnings { margin:14px 0; }
.placeholder { padding:12vh 20px; text-align:center; border:1px dashed #b7c2cc; margin-top:24px; }
.placeholder-icon { width:54px; height:54px; margin:0 auto 18px; display:grid; place-items:center; border-radius:50%; background:#e8f1f8; color:var(--blue); }
.badge { display:inline-flex; padding:4px 9px; border-radius:999px; font-size:.78rem; font-weight:800; white-space:nowrap; }
.badge-pending { color:#765500; background:#fff2c7; }.badge-approved { color:#12633f; background:#dff5e8; }.badge-rejected { color:#8f2118; background:#fde4e1; }.badge-suspended { color:#4f5963; background:#e8ebee; }
.details { margin:28px 0; }.details div { display:grid; grid-template-columns:110px 1fr; padding:12px 0; border-bottom:1px solid #edf0f2; }.details dt { color:var(--muted); }.details dd { margin:0; font-weight:700; }
.notice,.reason { padding:16px; border-left:4px solid var(--blue); background:#f0f6fb; line-height:1.6; }.reason { border-color:var(--danger); background:#fff5f3; margin-bottom:18px; }
.profile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:26px; }.profile-grid div { padding:16px; background:#f9fafb; }.profile-grid span { display:block; color:var(--muted); font-size:.82rem; margin-bottom:7px; }.uid { display:block; overflow:hidden; text-overflow:ellipsis; }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.sub-card { padding:24px; border:1px solid var(--line); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.member-admin-header { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.member-admin-header h1 { margin-bottom:8px; }.member-admin-header .muted { margin-bottom:0; }
.member-admin-header-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:14px; }
.pending-summary { padding:10px 14px; border:1px solid #cbd5df; background:#f7f9fb; color:#405263; font-size:.9rem; white-space:nowrap; }.pending-summary strong { margin-left:7px; color:var(--danger); font-size:1rem; }
.member-admin-tools { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:24px 0 16px; }
.status-tabs { display:flex; flex-wrap:wrap; gap:7px; }.status-tab { min-height:40px; padding:8px 18px; border:1px solid #bac5d0; border-radius:3px; background:#fff; color:#35485a; font-weight:750; }.status-tab.active { border-color:var(--navy); background:var(--navy); color:#fff; }
.member-controls { display:flex; align-items:center; gap:8px; margin-left:auto; }.member-controls input { width:min(290px,36vw); }
.table-wrap { overflow:auto; border:1px solid var(--line); } table { width:100%; min-width:1260px; border-collapse:collapse; } th,td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:.86rem; } th { position:sticky; top:0; background:#eef2f5; color:#344454; } td small { display:block; color:var(--muted); margin-top:4px; }.member-table { min-width:1080px; }.member-table th:nth-child(1) { min-width:100px; }.member-table th:nth-child(2) { min-width:190px; }.member-table th:nth-child(3) { min-width:135px; }.member-table th:nth-child(4),.member-table th:nth-child(6) { min-width:145px; }.member-table th:nth-child(8) { min-width:120px; }.reason-cell { max-width:210px; overflow-wrap:anywhere; }.empty { padding:36px; text-align:center; color:var(--muted); }
.mini { padding:5px 8px; border-radius:3px; border:1px solid; background:#fff; white-space:nowrap; }.mini.success { color:var(--success); }.mini.danger { color:var(--danger); }.mini.warning { color:var(--warning); }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(13,22,31,.55); }.modal-backdrop.hidden { display:none; }.modal { width:min(100%,500px); padding:26px; background:#fff; box-shadow:0 18px 60px rgba(0,0,0,.25); }
.loading,.fatal { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:16px; text-align:center; padding:30px; }.spinner { width:38px; height:38px; border:4px solid #dce5ed; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:900px) { .auth-layout { grid-template-columns:1fr; }.brand-panel { min-height:250px; padding:48px 28px; }.auth-panel { padding:36px 24px; }.app-header { align-items:flex-start; flex-direction:column; }.account-navigation { width:100%; justify-content:flex-start; }.app-navigation { justify-content:flex-start; }.folder-grid { grid-template-columns:1fr; }.profile-grid { grid-template-columns:1fr 1fr; }.two-columns { grid-template-columns:1fr; }.section-header,.toolbar,.member-admin-header,.youtube-connection-heading,.playlist-settings-heading { flex-direction:column; }.youtube-connection-heading .button-row,.playlist-settings-heading .button-row { width:100%; }.playlist-capabilities { grid-template-columns:repeat(2,minmax(0,1fr)); }.member-admin-header-actions { width:100%; justify-content:space-between; }.member-admin-tools { align-items:stretch; flex-direction:column; }.member-controls { width:100%; margin-left:0; }.member-controls input { width:100%; }.page { width:min(100% - 24px,1440px); margin:18px auto; }.content-card,.narrow-card,.workspace { padding:20px; } }
@media (max-width:540px) { .topbar-inner { width:calc(100% - 24px); }.account-navigation,.current-member,.app-navigation { align-items:stretch; }.account-navigation { flex-direction:column; }.current-member { justify-content:space-between; }.app-navigation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }.app-nav-button { min-width:0; padding-inline:6px; }.app-nav-button.logout-button { margin-left:0; }.folder-card { padding:16px; }.analysis-actions .button { width:100%; }.analysis-progress { grid-template-columns:1fr; }.queue-heading { flex-direction:column; }.queue-heading .button-row { width:100%; }.batch-playlist-control { grid-template-columns:1fr; }.batch-playlist-control select { grid-column:1; grid-row:auto; }.batch-status-heading { flex-direction:column; }.batch-status-heading .button { width:100%; }.batch-status-grid { grid-template-columns:1fr 1fr; }.playlist-list,.playlist-capabilities { grid-template-columns:1fr; }.preview-files { grid-template-columns:1fr; }.profile-grid,.youtube-connection-details { grid-template-columns:1fr; }.youtube-connection-details dd { overflow-wrap:anywhere; }.button-row { width:100%; }.button-row .button { flex:1; }.youtube-connection-heading .button-row,.playlist-settings-heading .button-row { align-items:stretch; flex-direction:column; }.youtube-connection-heading .button-row .button,.playlist-settings-heading .button-row .button { width:100%; }.member-admin-header-actions { align-items:stretch; flex-direction:column; }.pending-summary { text-align:center; }.status-tabs { display:grid; grid-template-columns:repeat(2,1fr); }.status-tab:last-child { grid-column:1 / -1; }.member-controls { align-items:stretch; flex-direction:column; }.member-controls .button { width:100%; } }

.current-member strong { max-width:min(42vw,460px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.youtube-connection-chip { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:7px 10px; border:1px solid rgba(255,255,255,.42); border-radius:999px; font-size:.82rem; font-weight:800; }
.youtube-status-icon { width:22px; height:22px; color:#ff3131; }
.youtube-connection-chip[data-state="failed"] { color:#ffd0cb; }
.topbar[data-youtube-connection-state="reconnect-required"],
.topbar[data-youtube-connection-state="disconnected"],
.topbar[data-youtube-connection-state="failed"] { background:#b42318; box-shadow:0 4px 18px rgba(180,35,24,.38); }
.topbar[data-youtube-connection-state="reconnect-required"] .app-nav-button,
.topbar[data-youtube-connection-state="disconnected"] .app-nav-button,
.topbar[data-youtube-connection-state="failed"] .app-nav-button,
.topbar[data-youtube-connection-state="reconnect-required"] .youtube-connection-chip,
.topbar[data-youtube-connection-state="disconnected"] .youtube-connection-chip,
.topbar[data-youtube-connection-state="failed"] .youtube-connection-chip { background:var(--navy); color:#fff; border-color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.22); }
.topbar[data-youtube-connection-state="reconnect-required"] .youtube-status-icon,
.topbar[data-youtube-connection-state="disconnected"] .youtube-status-icon,
.topbar[data-youtube-connection-state="failed"] .youtube-status-icon { color:#fff; }
.topbar[data-youtube-connection-state="reconnect-required"] .app-nav-button.active,
.topbar[data-youtube-connection-state="reconnect-required"] .app-nav-button[aria-current="page"],
.topbar[data-youtube-connection-state="disconnected"] .app-nav-button.active,
.topbar[data-youtube-connection-state="disconnected"] .app-nav-button[aria-current="page"],
.topbar[data-youtube-connection-state="failed"] .app-nav-button.active,
.topbar[data-youtube-connection-state="failed"] .app-nav-button[aria-current="page"] { background:var(--navy); color:#fff; outline:2px solid #fff; outline-offset:1px; }
.folder-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.folder-panel-heading h2 { margin-bottom:6px; }
.folder-panel-summary { margin:0; color:var(--muted); }
.info-button { padding:0 4px; border:0; background:transparent; color:var(--blue); font-weight:800; }
.folder-help { max-width:720px; margin:6px 0; color:var(--muted); font-size:.86rem; }
.folder-reopen-button { flex:0 0 42px; padding:8px; }
.folder-reopen-button svg { width:20px; height:20px; }
.batch-status-line { min-width:0; margin:9px 0; display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; }
#batch-status-current { min-width:0; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.playlist-selection-tools { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:4px 0 12px; }
.playlist-selection-tools span { margin-left:auto; color:var(--muted); }
@media (max-width:540px) {
  .current-member strong { max-width:100%; }
  .youtube-connection-chip { grid-column:1 / -1; justify-content:center; }
  .folder-panel-heading { flex-direction:column; }
  .folder-panel-toggle { width:100%; }
  .playlist-selection-tools span { width:100%; margin-left:0; }
}

@media (max-width:900px) {
  .workspace-menu { top:132px; overflow-x:auto; }
  .workspace-intro,.selection-action-bar { align-items:stretch; flex-direction:column; }
  .selection-action-bar .button { width:100%; }
}
@media (max-width:540px) {
  .workspace-menu { position:static; display:grid; grid-template-columns:1fr 1fr; }
  .youtube-quota-summary { grid-column:1 / -1; width:100%; margin-left:0; text-align:center; }
  .workspace-context-summary { align-items:flex-start; flex-direction:column; }
}