:root {
      --bg-color:#0f1114; --surface:#171a1f; --surface-2:#20242b; --header-bg:#15181d;
      --border-color:#303640; --text-color:#f2f4f7; --text-muted:#9ba4b0; --accent-color:#10a37f;
      --accent-hover:#18c798; --link-color:#71b7ff; --input-bg:#242932; --danger:#d45b63;
      --shadow:0 8px 24px rgba(0,0,0,.18); --radius:10px;
    }
    html[data-theme="light"] {
      --bg-color:#f6f7f9; --surface:#fff; --surface-2:#eef1f4; --header-bg:#fff;
      --border-color:#d9dee5; --text-color:#18202b; --text-muted:#687384; --accent-color:#087f63;
      --accent-hover:#069a78; --link-color:#1769aa; --input-bg:#f0f3f6; --danger:#bd3e48;
      --shadow:0 8px 24px rgba(20,35,55,.08);
    }
    * { box-sizing:border-box; margin:0; padding:0; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",Arial,sans-serif; }
    html { background:var(--bg-color); }
    body { background:var(--bg-color); color:var(--text-color); line-height:1.5; min-height:100vh; }
    a { color:var(--link-color); text-decoration:none; }
    button, input, select { font:inherit; }
    button { cursor:pointer; }
    .topbar { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:18px; min-height:64px; padding:10px 22px; background:var(--header-bg); border-bottom:1px solid var(--border-color); }
    .brand { display:flex; align-items:center; gap:10px; color:var(--text-color); flex:none; }
    .brand:hover { color:var(--accent-hover); }
    .brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:var(--accent-color); color:#fff; font-weight:800; letter-spacing:-1px; }
    .brand-name { font-size:18px; font-weight:800; letter-spacing:.5px; }
    .search-form { display:flex; flex:1; max-width:650px; margin:0 auto; }
    .search-form input { min-width:0; width:100%; padding:10px 14px; color:var(--text-color); background:var(--input-bg); border:1px solid var(--border-color); border-right:0; border-radius:8px 0 0 8px; outline:none; }
    .search-form input:focus { border-color:var(--accent-color); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-color) 20%,transparent); }
    .search-form button { display:grid; place-items:center; width:48px; color:var(--text-color); background:var(--surface-2); border:1px solid var(--border-color); border-radius:0 8px 8px 0; }
    .search-form button:hover { color:var(--accent-hover); }
    .top-actions { display:flex; align-items:center; gap:6px; flex:none; }
    .icon-button { width:38px; height:38px; display:grid; place-items:center; color:var(--text-muted); background:transparent; border:1px solid transparent; border-radius:8px; }
    .icon-button:hover,.icon-button.active { color:var(--text-color); background:var(--surface-2); border-color:var(--border-color); }
    .icon-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .app-shell { max-width:1560px; margin:0 auto; }
    .content { min-width:0; padding:28px clamp(16px,3vw,38px) 60px; }
    .page-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
    .section-title { font-size:21px; font-weight:750; letter-spacing:-.2px; }
    .section-subtitle { margin-top:4px; color:var(--text-muted); font-size:13px; }
    .toolbar-actions { display:flex; gap:8px; align-items:center; }
    .btn { min-height:36px; padding:8px 13px; color:#fff; background:var(--accent-color); border:1px solid var(--accent-color); border-radius:8px; font-size:13px; white-space:nowrap; transition:transform .16s ease,background .16s ease,border-color .16s ease; }
    .btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
    .btn:active { transform:scale(.97); }
    .btn.ghost { color:var(--text-color); background:transparent; border-color:var(--border-color); }
    .btn.ghost:hover { background:var(--surface-2); }
    .btn.danger { background:var(--danger); border-color:var(--danger); }
    .btn.small { min-height:30px; padding:5px 9px; font-size:12px; }
    .video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:18px; }
    .video-card { overflow:hidden; background:var(--surface); border:1px solid var(--border-color); border-radius:var(--radius); cursor:pointer; box-shadow:var(--shadow); transition:transform .18s ease,border-color .18s ease; }
    .video-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent-color) 55%,var(--border-color)); }
    .thumbnail-wrapper { position:relative; aspect-ratio:16/9; background:#050607; }
    .thumbnail-wrapper img { width:100%; height:100%; object-fit:cover; display:block; }
    .length-badge { position:absolute; right:7px; bottom:7px; padding:2px 5px; color:#fff; background:rgba(0,0,0,.8); border-radius:4px; font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }
    .video-info { display:flex; flex-direction:column; gap:5px; padding:11px 12px 13px; }
    .video-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:42px; color:var(--text-color); font-size:14px; font-weight:700; line-height:1.45; }
    .video-meta { color:var(--text-muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .video-meta.channel-link { color:var(--link-color); cursor:pointer; }
    .video-meta.channel-link:hover { text-decoration:underline; }
    .status-msg { grid-column:1 / -1; padding:56px 18px; color:var(--text-muted); text-align:center; }
    .status-msg.error { color:#e27a82; }
    .result-group { margin-bottom:28px; }
    .result-group-title { margin-bottom:12px; font-size:15px; font-weight:700; }
    .channel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
    .channel-card { display:flex; align-items:center; gap:12px; padding:13px; background:var(--surface); border:1px solid var(--border-color); border-radius:var(--radius); cursor:pointer; box-shadow:var(--shadow); }
    .channel-card:hover { border-color:var(--accent-color); }
    .channel-card img,.channel-avatar { width:48px; height:48px; flex:none; border-radius:50%; object-fit:cover; background:var(--input-bg); }
    .channel-card-body { min-width:0; }
    .channel-card-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
    .channel-card-meta { color:var(--text-muted); font-size:12px; }
    .channel-hero { display:none; overflow:hidden; margin-bottom:22px; background:var(--surface); border:1px solid var(--border-color); border-radius:var(--radius); box-shadow:var(--shadow); }
    .channel-hero.open { display:block; }
    .channel-banner { display:block; width:100%; height:150px; object-fit:cover; background:var(--input-bg); }
    .channel-hero-body { display:flex; align-items:center; gap:15px; padding:16px; }
    .channel-hero-avatar { width:78px; height:78px; flex:none; border-radius:50%; object-fit:cover; background:var(--input-bg); }
    .channel-hero-main { min-width:0; flex:1; }
    .channel-hero-name { font-size:21px; font-weight:800; }
    .channel-hero-meta { color:var(--text-muted); font-size:13px; }
    .channel-hero-desc { max-height:100px; overflow:auto; padding:0 16px 16px; color:var(--text-muted); font-size:13px; white-space:pre-wrap; }
    .channel-tabs { display:flex; gap:3px; overflow:auto; padding:0 12px; border-top:1px solid var(--border-color); }
    .channel-tabs button { position:relative; flex:none; padding:12px 13px; color:var(--text-muted); background:transparent; border:0; border-bottom:2px solid transparent; font-size:13px; }
    .channel-tabs button:hover,.channel-tabs button.active { color:var(--text-color); border-bottom-color:var(--accent-color); }
    .pager { display:flex; justify-content:center; align-items:center; gap:10px; margin:28px 0 6px; }
    .page-num { min-width:92px; color:var(--text-muted); font-size:12px; text-align:center; }
    .special-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
    .playlist-card { padding:13px; background:var(--surface); border:1px solid var(--border-color); border-radius:var(--radius); box-shadow:var(--shadow); }
    .playlist-card img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:7px; background:#050607; }
    .playlist-title { margin-top:9px; font-weight:700; }
    .playlist-meta { color:var(--text-muted); font-size:12px; }
    .post-card { padding:15px; background:var(--surface); border:1px solid var(--border-color); border-radius:var(--radius); box-shadow:var(--shadow); }
    .post-head { display:flex; align-items:center; gap:9px; color:var(--text-muted); font-size:12px; }
    .post-head img { width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--input-bg); }
    .post-content { margin-top:10px; white-space:pre-wrap; word-break:break-word; }
    .watch-layout { display:none; grid-template-columns:minmax(0,1fr) 360px; gap:22px; }
    .watch-layout.open { display:grid; }
    .watch-layout.theater-mode { grid-template-columns:minmax(0,1fr) 310px; }
    .player-shell { overflow:hidden; background:#000; border-radius:var(--radius); box-shadow:var(--shadow); }
    #native-player { display:block; width:100%; aspect-ratio:16/9; background:#000; }
    .watch-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
    .watch-toolbar select { max-width:180px; padding:7px 9px; color:var(--text-color); background:var(--input-bg); border:1px solid var(--border-color); border-radius:7px; font-size:12px; }
    .source-info { margin-left:auto; color:var(--text-muted); font-size:11px; }
    .video-details-box,.collab-panel,.comments-section { margin-top:15px; padding:16px; background:var(--surface); border:1px solid var(--border-color); border-radius:var(--radius); }
    .video-details-title { margin-bottom:12px; font-size:20px; font-weight:800; line-height:1.35; }
    .watch-stats { margin:0 0 13px; color:var(--text-muted); font-size:13px; }
    .watch-channel { display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); }
    .watch-channel .channel-avatar { width:44px; height:44px; cursor:pointer; }
    .channel-author { color:var(--link-color); font-weight:700; cursor:pointer; }
    .channel-author:hover { text-decoration:underline; }
    .channel-subs { color:var(--text-muted); font-size:12px; }
    .video-description { max-height:260px; overflow:auto; margin-top:13px; color:var(--text-muted); font-size:14px; white-space:pre-wrap; }
    .related-sidebar { min-width:0; }
    .related-card { display:grid; grid-template-columns:145px minmax(0,1fr); gap:9px; overflow:hidden; margin-bottom:10px; background:var(--surface); border:1px solid var(--border-color); border-radius:8px; cursor:pointer; }
    .related-thumb { aspect-ratio:16/9; background:#000; }
    .related-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .related-info { display:flex; flex-direction:column; justify-content:space-between; min-width:0; padding:8px 7px 8px 0; }
    .related-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; font-weight:700; line-height:1.3; }
    .related-author,.related-meta { color:var(--text-muted); font-size:11px; }
    .comments-section { margin-top:15px; }
    .comment-card { display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--border-color); }
    .comment-card:last-child { border-bottom:0; }
    .comment-avatar { width:32px; height:32px; flex:none; border-radius:50%; object-fit:cover; background:var(--input-bg); }
    .comment-author { font-size:13px; font-weight:700; }
    .comment-date { margin-left:7px; color:var(--text-muted); font-size:11px; }
    .comment-content { margin-top:2px; font-size:13px; word-break:break-word; }
    .collab-title { font-size:15px; font-weight:750; }
    .collab-help { margin-top:3px; color:var(--text-muted); font-size:11px; }
    .collab-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
    .collab-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; color:var(--text-color); background:var(--surface-2); border:1px solid var(--border-color); border-radius:999px; font-size:12px; }
    .collab-chip a { color:var(--link-color); }
    .collab-chip button { display:grid; place-items:center; width:17px; height:17px; color:var(--text-muted); background:transparent; border:0; }
    .collab-form { display:flex; gap:7px; margin-top:12px; }
    .collab-form input { min-width:0; flex:1; padding:8px 10px; color:var(--text-color); background:var(--input-bg); border:1px solid var(--border-color); border-radius:7px; }
    .empty-note { padding:26px; color:var(--text-muted); text-align:center; }
    .settings-page { display:none; max-width:900px; margin:0 auto; }
    .settings-page.open { display:block; }
    .settings-card { margin-bottom:16px; padding:18px; background:var(--surface); border:1px solid var(--border-color); border-radius:var(--radius); box-shadow:var(--shadow); }
    .settings-card h2 { margin-bottom:4px; font-size:17px; }
    .settings-card > p { margin-bottom:12px; color:var(--text-muted); font-size:12px; }
    .setting-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px 0; border-bottom:1px solid var(--border-color); }
    .setting-row:last-child { border-bottom:0; }
    .setting-label { font-size:13px; font-weight:650; }
    .setting-desc { color:var(--text-muted); font-size:11px; }
    .setting-control { flex:none; }
    .setting-control input[type="number"],.setting-control input[type="text"],.setting-control select,.api-add input,.api-add select { min-width:150px; padding:8px 9px; color:var(--text-color); background:var(--input-bg); border:1px solid var(--border-color); border-radius:7px; font-size:12px; }
    .switch { position:relative; display:block; width:42px; height:24px; }
    .switch input { position:absolute; opacity:0; }
    .slider { position:absolute; inset:0; background:var(--border-color); border-radius:20px; transition:.18s; }
    .slider:before { content:""; position:absolute; width:18px; height:18px; top:3px; left:3px; background:#fff; border-radius:50%; transition:.18s; }
    .switch input:checked + .slider { background:var(--accent-color); }
    .switch input:checked + .slider:before { transform:translateX(18px); }
    .api-list { display:flex; flex-direction:column; gap:7px; }
    .api-item { display:grid; grid-template-columns:65px minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:8px; background:var(--input-bg); border-radius:7px; font-size:12px; }
    .api-type { color:var(--accent-color); font-weight:800; text-transform:uppercase; }
    .api-url { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .api-add { display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:7px; margin-top:10px; }
    .settings-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:15px; }
    .subscriptions-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:13px; }
    .subscription-card { display:flex; align-items:center; gap:12px; padding:14px; background:var(--surface); border:1px solid var(--border-color); border-radius:var(--radius); box-shadow:var(--shadow); }
    .subscription-card img { width:54px; height:54px; border-radius:50%; object-fit:cover; background:var(--input-bg); }
    .subscription-main { min-width:0; flex:1; }
    .subscription-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:750; }
    .subscription-id { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); font-size:11px; }
    .badge { display:inline-block; padding:2px 7px; color:#fff; background:var(--accent-color); border-radius:999px; font-size:10px; }
    @media (max-width:900px) {
      .watch-layout,.watch-layout.theater-mode { grid-template-columns:1fr; }
      .related-sidebar { margin-top:5px; }
    }
    /* 初版UIを基準にした互換テーマ */
    :root { --bg-color:#121212; --surface:#1f1f1f; --surface-2:#2a2a2a; --header-bg:#1a1a1a; --border-color:#333333; --text-color:#eeeeee; --text-muted:#aaaaaa; --accent-color:#009688; --accent-hover:#00bfa5; --link-color:#39a0ed; --input-bg:#2a2a2a; --shadow:none; --radius:4px; }
    html[data-theme="light"] { --bg-color:#f6f6f4; --surface:#fff; --surface-2:#f0f0ec; --header-bg:#fff; --border-color:#dcdcd6; --text-color:#1b1b1b; --text-muted:#666; --accent-color:#00796b; --accent-hover:#009688; --link-color:#1565c0; --input-bg:#f0f0ec; }
    .topbar { min-height:0; padding:10px 20px; gap:12px; }
    .brand-mark { width:28px; height:28px; border-radius:4px; font-size:16px; }
    .brand-name { font-size:22px; }
    .search-form { max-width:500px; gap:4px; }
    .search-form input { padding:6px 12px; border-radius:3px; }
    .search-form button { width:auto; min-width:70px; padding:6px 14px; color:#fff; background:var(--accent-color); border:0; border-radius:3px; }
    .search-form button:hover { color:#fff; background:var(--accent-hover); }
    .icon-button { border-radius:4px; }
    .content { max-width:1400px; margin:0 auto; padding:20px; }
    .video-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
    .video-card,.channel-card,.related-card,.video-details-box,.settings-card { border-radius:4px; box-shadow:none; }
    .video-info { padding:10px; }
    .video-title { font-size:14px; }
    .btn { border-radius:3px; }
    @media (max-width:620px) {
      .topbar { gap:8px; padding:8px 12px; flex-wrap:wrap; }
      .brand-name { display:none; }
      .search-form { order:3; flex-basis:100%; max-width:none; }
      .content { padding:20px 12px 45px; }
      .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
      .video-title { min-height:36px; font-size:12px; }
      .video-info { padding:8px; }
      .channel-hero-body { align-items:flex-start; flex-wrap:wrap; }
      .channel-hero-name { font-size:18px; }
      .source-info { width:100%; margin-left:0; }
      .api-add { grid-template-columns:1fr; }
      .setting-row { align-items:flex-start; }
      .setting-control input[type="text"] { max-width:220px; }
    }