:root { color-scheme:dark; --bg:#101114; --panel:#1b1d22d9; --line:#363942; --accent:#f04f67; --text:#f7f7f7; --muted:#aaaeb8; --inverse-bg:#efeeeb; --inverse-text:#101114; --chrome:rgba(16,17,20,.82); --input-bg:rgba(17,19,24,.78); --control-bg:rgba(16,17,20,.22); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif; }
html { width:100%; background:var(--bg); }
body { width:100%; overflow-x:hidden; background:transparent; isolation:isolate; }
#themeBackgroundLayer { position:fixed; inset:0; z-index:-1; width:100%; height:100%; background-color:var(--bg); background-repeat:no-repeat; background-position:center center; background-size:cover; pointer-events:none; }
header { width:100%; padding:20px 16px 12px; text-align:center; }
header h1 { margin:0; font-size:clamp(24px,6vw,38px); }
header p { margin:5px 0 0; color:var(--muted); }
.tabs { position:sticky; top:0; z-index:10; display:flex; width:100%; justify-content:center; gap:6px; padding:8px; background:var(--chrome); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
button, input, textarea, select { font:inherit; }
button { min-height:42px; border:1px solid var(--line); border-radius:9px; padding:8px 13px; background:#292c33; color:var(--text); cursor:pointer; }
button:hover, button:focus-visible { border-color:var(--inverse-bg); }
.tab { border:1px solid color-mix(in srgb,var(--inverse-bg) 58%,transparent); background:var(--control-bg); color:var(--inverse-bg); box-shadow:0 2px 8px rgba(0,0,0,.16); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.tab.active { border-color:var(--accent); background:color-mix(in srgb,var(--control-bg) 82%,var(--inverse-bg) 18%); color:var(--inverse-bg); box-shadow:0 0 0 1px color-mix(in srgb,var(--inverse-bg) 20%,transparent),0 3px 12px rgba(0,0,0,.22); }
#addTrackButton, #exportButton { background:var(--control-bg); border-color:color-mix(in srgb,var(--inverse-bg) 58%,transparent); color:var(--inverse-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
body.video-focus-mode .tabs,
body.video-focus-mode #colorToggleButton,
body.video-focus-mode #colorControlPanel { display:none !important; }
body.video-focus-mode .player-sticky { position:static !important; top:auto !important; z-index:auto !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
body.video-focus-mode .player-sticky > .now-playing,
body.video-focus-mode .player-sticky > .player-controls { display:none !important; }
body.lock-active .tabs,
body.lock-active #colorToggleButton,
body.lock-active #colorControlPanel,
body.lock-active .player-sticky > .now-playing,
body.lock-active .player-sticky > .player-controls,
body.pseudo-fullscreen .tabs,
body.pseudo-fullscreen #colorToggleButton,
body.pseudo-fullscreen #colorControlPanel,
body.pseudo-fullscreen .player-sticky > .now-playing,
body.pseudo-fullscreen .player-sticky > .player-controls { display:none !important; }
main { width:100%; max-width:960px; margin:0 auto; padding:12px; }
.view { display:none; }.view.active { display:block; }
.player-sticky { position:sticky; top:var(--tabs-height,58px); z-index:9; margin:-4px -4px 10px; padding:4px 4px 1px; background:var(--chrome); border-bottom:1px solid color-mix(in srgb,var(--inverse-bg) 20%,transparent); border-radius:0 0 12px 12px; box-shadow:0 8px 18px rgba(0,0,0,.12); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.player-stage { position:relative; display:flex; width:100%; justify-content:center; background:#000; }
.player-wrap { position:relative; width:100% !important; max-width:960px; aspect-ratio:16/9; margin:0 auto; background:#000; overflow:hidden; }
#youtubePlayer, #youtubePlayer iframe { display:block; width:100% !important; height:100% !important; margin:0 auto; border:0; }
#fullscreenExitButton { display:none; position:absolute; top:max(10px,env(safe-area-inset-top)); right:10px; z-index:10030; width:46px; min-width:46px; height:46px; padding:0; border-radius:50%; background:rgba(0,0,0,.7); color:#fff; font-size:22px; }
body.pseudo-fullscreen { overflow:hidden; touch-action:none; }
body.pseudo-fullscreen .player-stage { position:fixed; inset:0; z-index:10020; display:flex; align-items:center; width:100vw; height:100dvh; }
body.pseudo-fullscreen .player-wrap { width:100vw !important; max-width:none; max-height:100dvh; }
body.pseudo-fullscreen #fullscreenExitButton { display:block; }
.player-stage:fullscreen, .player-stage:-webkit-full-screen { display:flex; align-items:center; justify-content:center; width:100vw; height:100vh; background:#000; }
.player-stage:fullscreen .player-wrap, .player-stage:-webkit-full-screen .player-wrap { width:100vw !important; max-width:none; max-height:100vh; }
.player-stage:fullscreen #fullscreenExitButton, .player-stage:-webkit-full-screen #fullscreenExitButton { display:block; }
.now-playing { padding:14px 4px 6px; text-align:center; }.now-playing span { display:block; color:var(--muted); margin-top:4px; }
.player-controls { display:flex; width:100%; justify-content:center; align-items:center; gap:7px; margin:8px auto 18px; }
.player-controls button { display:grid; place-items:center; width:48px; min-width:48px; height:48px; min-height:48px; padding:0; border:1px solid color-mix(in srgb,var(--inverse-bg) 66%,transparent); border-radius:10px; background:var(--control-bg); color:var(--inverse-bg); font-size:20px; box-shadow:0 2px 8px rgba(0,0,0,.18); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.player-controls #playButton { width:56px; min-width:56px; background:var(--control-bg); border-color:var(--accent); color:var(--inverse-bg); }
.player-controls #fullscreenButton { margin-left:4px; font-size:23px; }
.player-controls button span { display:block; line-height:1; }
.player-controls #prevButton { margin-right:auto; }
.player-controls #nextButton { margin-left:auto; }
.lock-switch-wrap { display:flex; align-items:center; gap:5px; min-height:48px; margin:0 0 0 4px; padding:0 10px; border:1px solid color-mix(in srgb,var(--inverse-bg) 70%,transparent); border-radius:999px; background:rgba(0,0,0,.08); color:var(--inverse-bg); font-size:11px; font-weight:700; box-shadow:0 2px 7px rgba(0,0,0,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lock-switch-wrap input, .overlay-lock-switch-wrap input { width:20px; height:20px; margin:0; accent-color:var(--inverse-bg); }
#touchLockOverlay { display:none; }
body.lock-active { overflow:hidden; touch-action:none; overscroll-behavior:none; }
body.lock-active .player-stage { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; width:100vw; height:100dvh; background:#000; }
body.lock-active .player-wrap { width:100vw !important; max-width:none; max-height:100dvh; margin:auto; }
body.lock-active #touchLockOverlay { position:fixed; inset:0; z-index:10040; display:block; width:100vw; height:100dvh; background:rgba(0,0,0,.04); user-select:none; -webkit-user-select:none; touch-action:none; }
.overlay-lock-switch-wrap { position:absolute; top:max(14px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; min-height:48px; padding:7px 12px; border:1px solid color-mix(in srgb,var(--inverse-bg) 70%,transparent); border-radius:999px; background:rgba(0,0,0,.1); color:var(--inverse-bg); font-size:13px; font-weight:700; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.lock-player-controls { position:absolute; left:50%; bottom:max(22px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:10px; }
.lock-player-controls button { width:56px; min-width:56px; height:56px; min-height:56px; padding:0; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(0,0,0,.78); color:#fff; font-size:22px; backdrop-filter:blur(8px); }
#colorToggleButton { position:fixed; right:10px; bottom:max(10px,env(safe-area-inset-bottom)); z-index:9000; width:46px; min-width:46px; height:46px; min-height:46px; padding:0; border-radius:50%; background:rgba(125,125,125,.72); font-size:20px; backdrop-filter:blur(10px); }
#colorControlPanel { position:fixed; right:10px; bottom:66px; z-index:9001; display:none; width:min(270px,calc(100vw - 20px)); padding:12px; border:1px solid rgba(125,125,125,.45); border-radius:10px; background:rgba(25,25,25,.78); color:#fff; box-shadow:0 5px 18px rgba(0,0,0,.4); backdrop-filter:blur(14px); }
#colorControlPanel.open { display:block; }
#colorControlPanel label { display:grid; grid-template-columns:1fr 60px; align-items:center; gap:8px; color:#fff; }
#colorControlPanel input[type="color"] { width:60px; height:38px; padding:2px; border:1px solid #777; border-radius:6px; background:#fff; }
#colorControlPanel input[type="range"] { width:120px; padding:0; background:transparent; }
.overlay-value { display:block; margin:-7px 0 8px; text-align:right; color:#ddd; font-size:11px; }
#colorControlPanel .image-file-label { display:block; margin-top:10px; }
#colorControlPanel .image-file-label input { width:100%; padding:7px; font-size:11px; color:#fff; background:rgba(255,255,255,.08); }
.background-image-actions { margin-top:7px; }.background-image-actions button { width:100%; min-height:34px; padding:5px; }
.image-note { display:block; margin-top:6px; color:#ccc; font-size:10px; line-height:1.35; }
.color-panel-head { display:flex; align-items:center; margin-bottom:8px; }.color-panel-head strong { flex:1; }.color-panel-head button { min-height:34px; padding:3px 9px; }
.color-panel-actions { display:flex; gap:8px; margin-top:10px; }.color-panel-actions button { flex:1; min-height:38px; }
#themeSaveButton { background:var(--control-bg); border-color:color-mix(in srgb,var(--inverse-bg) 58%,transparent); }.color-panel-actions + span { display:block; min-height:18px; margin-top:6px; font-size:11px; }
.add-buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:10px 0 18px; }
.save-bar { position:sticky; top:66px; z-index:8; display:flex; align-items:center; justify-content:center; gap:12px; padding:9px; margin-bottom:8px; background:var(--chrome); border:1px solid var(--line); border-radius:10px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
#saveButton { background:var(--control-bg); border-color:color-mix(in srgb,var(--inverse-bg) 58%,transparent); color:var(--inverse-bg); }
#saveStatus { color:var(--muted); font-size:13px; }
.fetch-title-button { min-height:36px; margin:0 0 5px; }.fetch-status { display:inline-block; margin-left:8px; color:var(--muted); font-size:13px; }
.play-list, .editor-list { display:grid; gap:8px; }
.play-list { scroll-margin-top:calc(var(--tabs-height,58px) + var(--player-sticky-height,360px) + 8px); }
.play-heading { margin:18px 0 3px; padding:8px 10px; border-bottom:2px solid color-mix(in srgb,var(--inverse-bg) 58%,transparent); font-size:19px; }
.play-track { position:relative; isolation:isolate; overflow:hidden; width:100%; min-width:0; display:grid; grid-template-columns:30px minmax(0,1fr); gap:7px; padding:8px 10px; text-align:left; align-items:center; background:var(--panel); }
.play-track > span { position:relative; z-index:2; }
.play-track > span:last-child { min-width:0; white-space:normal; overflow-wrap:anywhere; word-break:break-word; font-size:15px; line-height:1.3; }
.play-track.playing { border-color:var(--accent); background:color-mix(in srgb,var(--panel) 88%,var(--inverse-bg) 12%); box-shadow:0 0 0 1px color-mix(in srgb,var(--inverse-bg) 82%,transparent),0 0 13px color-mix(in srgb,var(--inverse-bg) 30%,transparent),inset 0 0 16px color-mix(in srgb,var(--inverse-bg) 10%,transparent); animation:playingGlowPulse 3.4s ease-in-out infinite; }
.play-track.playing::before { content:""; position:absolute; z-index:0; inset:-55%; pointer-events:none; opacity:.24; background:radial-gradient(circle at 18% 30%,var(--inverse-bg) 0,transparent 23%),radial-gradient(circle at 82% 72%,var(--inverse-bg) 0,transparent 17%),linear-gradient(112deg,transparent 27%,color-mix(in srgb,var(--inverse-bg) 42%,transparent) 48%,transparent 66%); filter:blur(13px); transform:translate3d(-9%,-4%,0) rotate(-3deg); animation:playingLightWander 5.8s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
.play-track.playing::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; opacity:.36; background:linear-gradient(104deg,transparent 15%,color-mix(in srgb,var(--inverse-bg) 30%,transparent) 43%,transparent 58%); transform:translateX(-125%); animation:playingLightFlash 4.7s ease-in-out infinite; }
@keyframes playingGlowPulse { 0%,100% { box-shadow:0 0 0 1px color-mix(in srgb,var(--inverse-bg) 76%,transparent),0 0 9px color-mix(in srgb,var(--inverse-bg) 22%,transparent),inset 0 0 13px color-mix(in srgb,var(--inverse-bg) 8%,transparent); } 19% { box-shadow:0 0 0 1px var(--inverse-bg),0 0 16px color-mix(in srgb,var(--inverse-bg) 36%,transparent),inset 0 0 21px color-mix(in srgb,var(--inverse-bg) 13%,transparent); } 37% { box-shadow:0 0 0 1px color-mix(in srgb,var(--inverse-bg) 84%,transparent),0 0 11px color-mix(in srgb,var(--inverse-bg) 25%,transparent),inset 0 0 15px color-mix(in srgb,var(--inverse-bg) 9%,transparent); } 71% { box-shadow:0 0 0 1px color-mix(in srgb,var(--inverse-bg) 96%,transparent),0 0 18px color-mix(in srgb,var(--inverse-bg) 32%,transparent),inset 0 0 18px color-mix(in srgb,var(--inverse-bg) 12%,transparent); } }
@keyframes playingLightWander { 0% { transform:translate3d(-12%,-7%,0) rotate(-4deg) scale(.96); } 23% { transform:translate3d(9%,-2%,0) rotate(2deg) scale(1.06); } 48% { transform:translate3d(-3%,11%,0) rotate(-1deg) scale(1.01); } 76% { transform:translate3d(13%,4%,0) rotate(4deg) scale(1.08); } 100% { transform:translate3d(-5%,-10%,0) rotate(-2deg) scale(1); } }
@keyframes playingLightFlash { 0%,18% { transform:translateX(-125%); opacity:.08; } 42% { opacity:.34; } 61% { transform:translateX(135%); opacity:.2; } 100% { transform:translateX(135%); opacity:.06; } }
@media (prefers-reduced-motion:reduce) { .play-track.playing,.play-track.playing::before,.play-track.playing::after { animation:none; } }
.play-track small { display:block; max-width:100%; color:var(--muted); margin-top:3px; font-size:8px; line-height:1.15; font-weight:400; white-space:normal; overflow-wrap:anywhere; word-break:break-all; }
.edit-row, .panel { border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--panel); }
.edit-row.dragging { opacity:.35; }.heading-row { border-left:5px solid color-mix(in srgb,var(--inverse-bg) 58%,transparent); }
.row-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }.row-head strong { flex:1; }.drag-handle { cursor:grab; min-height:36px; }.delete-button { color:#ff9bab; }
label { display:block; color:var(--muted); font-size:13px; margin:7px 0; }
input[type="text"], input[type="url"], input[type="number"], textarea, select, input[type="file"] { display:block; width:100%; margin-top:4px; padding:10px; color:var(--text); background:var(--input-bg); border:1px solid var(--line); border-radius:7px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.two-cols, .four-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.four-cols { grid-template-columns:repeat(4,minmax(0,1fr)); }.check-label { display:flex; align-items:center; padding-top:23px; color:var(--text); }
.notice, .status { padding:10px; text-align:center; color:#bfe8c8; }.panel { margin-bottom:12px; }.panel h2 { margin-top:0; font-size:19px; }.danger { border-color:#683946; }
@media (max-width:650px) { main { width:100%; max-width:none; padding:8px; }.tab { flex:1; padding:8px 4px; font-size:12px; }.player-wrap { width:100% !important; max-width:none; }.player-controls { gap:4px; }.player-controls button { width:42px; min-width:42px; height:44px; min-height:44px; }.player-controls #playButton { width:48px; min-width:48px; }.lock-switch-wrap { min-height:44px; padding:0 7px; font-size:9px; }.lock-switch-wrap input { width:17px; height:17px; }.play-track > span:last-child { font-size:14px; }.play-track small { font-size:7px; }.two-cols,.four-cols { grid-template-columns:1fr 1fr; }.check-label { padding-top:4px; }.edit-row { padding:10px; } }

/* 2026-09-02: 公開版 安全チェック・利用規約 */
.safety-checking-note{margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted);font-size:.92rem}
.safety-blocked{opacity:.72}
.safety-blocked .fetch-status{color:#ffb6b6}
.terms-link-wrap{text-align:center;padding:18px 12px 28px;font-size:.9rem}
.terms-link-wrap a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* 2026-09-03: /ylist/ 共有版 */
.share-intro{margin-bottom:12px}
.share-panel{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.share-panel>p{color:var(--muted);line-height:1.6}
.share-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.share-actions button{flex:1;min-width:120px}
.share-panel progress{display:block;width:100%;height:10px;margin:12px 0;accent-color:var(--inverse-bg)}
.share-panel progress[hidden]{display:none}
#cancelReceiveButton{margin-top:9px}
.share-result{min-height:20px;margin-top:9px;color:#bfe8c8;font-size:13px;overflow-wrap:anywhere}
.share-result input{margin:7px 0}
.receive-code-row{display:flex;align-items:center;gap:8px;margin:10px 0}
.receive-code-row code{flex:1;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--input-bg);color:var(--text);font-size:15px;letter-spacing:.08em;overflow-wrap:anywhere}
.notice-inbox{display:grid;gap:8px;margin-top:12px}
.notice-card{padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--control-bg)}
.notice-card strong,.notice-card small{display:block}.notice-card small{margin-top:4px;color:var(--muted)}
.notice-empty{color:var(--muted);text-align:center}
#incomingTransferPanel{border-color:var(--line)}
@media(max-width:650px){.receive-code-row{align-items:stretch;flex-direction:column}.receive-code-row button{width:100%}}