:root {
  --bg: #101414;
  --surface: #1a2020;
  --border: #2c3434;
  --text: #e8eeec;
  --muted: #9aa8a5;
  --primary: #7fd3c4;
  --on-primary: #0b302a;
  --copy: #3b82f6;
  --danger: #e5484d;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
a { color: var(--primary); }
h1 { font-size: 30px; margin: 8px 0 4px; }
h1 .sub { font-size: 16px; color: var(--muted); font-weight: 500; }
h2 { font-size: 16px; margin: 0 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.bold { font-weight: 700; }
.dim { color: #bbb; }
.grow { flex: 1; min-width: 0; }
.right { text-align: right; }

button {
  font: inherit; font-size: 15px; color: var(--text); background: transparent;
  border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; cursor: pointer;
}
button:disabled { opacity: .4; }
button.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 600; }
button.tonal { background: #2d4a45; border-color: #2d4a45; }
button.ghost { border-color: transparent; padding-left: 8px; padding-right: 8px; }
button.light { color: #fff; }
input[type=text], input[type=url] {
  width: 100%; font: inherit; font-size: 16px; color: var(--text); background: #0c1010;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 4px 0 8px;
}

.screen { min-height: 100%; }
.setup-inner { max-width: 560px; margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin: 12px 0; }
.radio { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 15px; }
.radio input { width: 18px; height: 18px; accent-color: var(--primary); }
.dir-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin: 4px 0 4px 26px; }
#recent { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
#recent button { text-align: left; border-radius: 10px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 一覧 */
.grid-head { position: sticky; top: 0; z-index: 2; background: var(--bg);
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid var(--border); }
.row { display: flex; align-items: center; gap: 4px; }
.row.gap { gap: 8px; margin-top: 6px; }
.title { font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 2px; padding: 2px 2px calc(2px + env(safe-area-inset-bottom)); }
.thumb { position: relative; aspect-ratio: 1; background: #1e2424; overflow: hidden; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.current { outline: 3px solid var(--primary); outline-offset: -3px; }
.badge { position: absolute; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,.75);
  border-radius: 4px; padding: 1px 4px; }
.badge.raw { left: 4px; bottom: 4px; }
.badge.copied { right: 4px; top: 4px; background: var(--copy); }
.empty { padding: 40px; text-align: center; color: var(--muted); grid-column: 1 / -1; }

/* 振り分け */
#viewer { position: fixed; inset: 0; background: #000; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.track { position: absolute; inset: 0; will-change: transform; }
.slide { position: absolute; top: 0; width: 100%; height: 100%; will-change: transform, opacity; }
.zoom { width: 100%; height: 100%; transform-origin: 50% 50%; will-change: transform; }
.zoom img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; }
.slide.loading .zoom { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23fff' stroke-opacity='.25' stroke-width='4'/%3E%3Cpath d='M20 4a16 16 0 0 1 16 16' fill='none' stroke='%23fff' stroke-width='4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='0.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center no-repeat; }
.slide .noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #888; font-size: 14px; }
.done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.done .big { font-size: 22px; font-weight: 700; }
.done .cnt { font-size: 18px; color: var(--copy); }
.vbar { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.6); color: #fff; z-index: 3; }
.vbar.top { top: 0; padding: calc(4px + env(safe-area-inset-top)) 12px 4px 4px; }
.vbar.bottom { bottom: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
#fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { display: inline-block; font-size: 10px; font-weight: 700; background: var(--copy); color: #fff; border-radius: 4px; padding: 1px 4px; margin-right: 4px; vertical-align: 1px; }

.manual-link { font-size: 14px; text-decoration: none; }
.banner { position: fixed; left: 12px; right: 12px; top: calc(56px + env(safe-area-inset-top)); z-index: 10;
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  background: #3a2a10; border: 1px solid #6b4e1c; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.toast { position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 11;
  background: rgba(30,36,36,.95); color: #fff; border-radius: 10px; padding: 10px 14px; font-size: 14px; max-width: calc(100% - 32px); text-align: center; }