/* ui.css — the extension's own blocks (prefix rscs-) on YouTube, in Studio and on its pages. Follows YouTube's light/dark theme. */
.rscs {
  --rs-bg: #ffffff; --rs-fg: #0f0f0f; --rs-muted: #606060; --rs-line: #e5e5e5; --rs-soft: #f2f2f2;
  --rs-accent: #0b6e69; --rs-accent-fg: #ffffff; --rs-good: #1e7d32; --rs-warn: #a15c00; --rs-bad: #c62828; --rs-info: #3d5afe;
  font: 400 14px/1.45 Roboto, "Segoe UI", "Hiragino Sans", "Noto Sans JP", Arial, sans-serif; color: var(--rs-fg);
  box-sizing: border-box;
}
html[dark] .rscs, .rscs.rscs-dark {
  --rs-bg: #212121; --rs-fg: #f1f1f1; --rs-muted: #aaaaaa; --rs-line: #3f3f3f; --rs-soft: #2c2c2c;
  --rs-accent: #4fd1c5; --rs-accent-fg: #0f0f0f; --rs-good: #81c784; --rs-warn: #ffb74d; --rs-bad: #ef9a9a; --rs-info: #9fa8ff;
}
.rscs *, .rscs *::before, .rscs *::after { box-sizing: border-box; }
.rscs-card, .rscs-bar, .rscs-studio { background: var(--rs-bg); border: 1px solid var(--rs-line); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.rscs-card-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rscs-card-head > b { flex: 1; }
.rscs-collapsed .rscs-card-body { display: none; }
.rscs-card-body { margin-top: 10px; display: grid; gap: 10px; }
.rscs-badge { background: var(--rs-accent); color: var(--rs-accent-fg); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.rscs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.rscs-stat { background: var(--rs-soft); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.rscs-stat-l { font-size: 12px; color: var(--rs-muted); }
.rscs-stat-v { font-size: 18px; font-weight: 700; }
.rscs-stat-s { font-size: 12px; color: var(--rs-muted); overflow-wrap: anywhere; }
.rscs-tagsrow { display: flex; gap: 8px; align-items: flex-start; }
.rscs-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.rscs-chip { border: 1px solid var(--rs-line); background: var(--rs-bg); color: var(--rs-fg); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 13px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rscs-chip:hover { border-color: var(--rs-accent); }
.rscs-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rscs-input, .rscs-market, .rscs-lang { font: inherit; color: var(--rs-fg); background: var(--rs-bg); border: 1px solid var(--rs-line); border-radius: 8px; padding: 6px 10px; min-width: 0; }
.rscs-input { flex: 1 1 160px; }
textarea.rscs-input { width: 100%; resize: vertical; }
.rscs-market { max-width: 100%; }
.rscs-btn { font: inherit; font-weight: 600; border: 1px solid var(--rs-line); background: var(--rs-soft); color: var(--rs-fg); border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; }
.rscs-btn:disabled { opacity: .6; cursor: default; }
.rscs-primary { background: var(--rs-accent); color: var(--rs-accent-fg); border-color: var(--rs-accent); }
.rscs-pro { background: #1a237e; color: #fff; border-color: #1a237e; }
.rscs-link { font: inherit; background: none; border: 0; color: var(--rs-accent); cursor: pointer; padding: 0; text-decoration: underline; }
.rscs-muted { color: var(--rs-muted); }
.rscs-small { font-size: 12px; }
.rscs-err { color: var(--rs-bad); font-weight: 600; }
.rscs-quota { margin-left: auto; }
.rscs-score { border: 1px solid var(--rs-line); border-radius: 12px; padding: 12px; background: var(--rs-bg); display: grid; gap: 10px; }
.rscs-score-head { display: flex; gap: 12px; align-items: center; }
.rscs-score-num { flex: none; width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center; padding-top: 18px; font-weight: 800; color: #fff; }
.rscs-score-num small { font-size: 12px; font-weight: 600; opacity: .9; }
.rscs-score-val { font-size: 30px; line-height: 1; }
.rscs-band-good { background: var(--rs-good); } .rscs-band-ok { background: #8a6d00; } .rscs-band-hard { background: var(--rs-bad); }
html[dark] .rscs-score-num, .rscs-dark .rscs-score-num { color: #0f0f0f; }
.rscs-score-kw { font-size: 13px; color: var(--rs-muted); overflow-wrap: anywhere; }
.rscs-score-kw b { color: var(--rs-fg); }
.rscs-score-band { font-weight: 600; margin-top: 2px; }
.rscs-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rscs-meter-top { display: flex; justify-content: space-between; font-size: 13px; }
.rscs-meterbar { height: 8px; background: var(--rs-soft); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.rscs-meterbar i { display: block; height: 100%; border-radius: 99px; }
.rscs-meterbar-demand { background: var(--rs-good); } .rscs-meterbar-competition { background: var(--rs-bad); }
.rscs-facts { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; font-size: 13px; }
.rscs-facts dt { color: var(--rs-muted); } .rscs-facts dd { margin: 0; font-weight: 600; text-align: right; }
.rscs-checks-sum { font-weight: 700; margin-bottom: 4px; }
.rscs-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rscs-chk { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.rscs-ico { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; margin-top: 1px; }
.rscs-ok .rscs-ico { background: var(--rs-good); } .rscs-warn .rscs-ico { background: var(--rs-warn); } .rscs-bad .rscs-ico { background: var(--rs-bad); } .rscs-info .rscs-ico { background: var(--rs-info); }
html[dark] .rscs-ico { color: #0f0f0f; }
.rscs-bar .rscs-brand { margin-right: 4px; }
.rscs-bar { margin: 8px 0 16px; }
.rscs-pill { position: fixed; left: 16px; bottom: 16px; z-index: 2200; background: var(--rs-bg); border: 1px solid var(--rs-line); border-radius: 999px; padding: 6px; display: flex; gap: 8px; align-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.18); max-width: calc(100vw - 32px); }
.rscs-launch { position: fixed; right: 20px; bottom: 20px; z-index: 2300; background: #0b6e69; color: #fff; border: 0; border-radius: 999px; padding: 10px 16px; font: 700 14px/1 Roboto, Arial, sans-serif; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.rscs-studio { position: fixed; right: 20px; bottom: 70px; z-index: 2301; width: 380px; max-width: calc(100vw - 40px); max-height: calc(100vh - 100px); overflow: auto; box-shadow: 0 8px 28px rgba(0,0,0,.28); }
.rscs-studio h4 { margin: 4px 0 0; font-size: 13px; }
.rscs-paste { display: grid; gap: 6px; }
.rscs-paste[hidden] { display: none; }
.rscs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rscs-table th, .rscs-table td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--rs-line); vertical-align: top; }
.rscs-table td:not(:first-child), .rscs-table th:not(:first-child) { text-align: right; white-space: nowrap; }
.rscs-tr-ch td { text-align: left !important; padding-top: 8px; }