:root {
  --bg: #ffffff;
  --surface: #f4f6f9;
  --text: #1b1f24;
  --muted: #667085;
  --line: #e4e7ec;
  --accent: #1f6feb;
  --press: rgba(31, 111, 235, 0.10);
  --viewer-bg: #111317;
  --viewer-bar: rgba(17, 19, 23, 0.92);
  --k-folder: #e8a317;
  --k-pdf: #e5484d;
  --k-video: #8e4ec6;
  --k-image: #30a46c;
  --k-audio: #f76b15;
  --k-text: #0090ff;
  --k-archive: #8d6e63;
  --k-file: #8b95a1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111317;
    --surface: #1b1e24;
    --text: #e6e8eb;
    --muted: #9ba3af;
    --line: #2a2e35;
    --accent: #4c8dff;
    --press: rgba(76, 141, 255, 0.16);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
svg { display: block; }

.icon-btn {
  flex: none; width: 44px; height: 44px; border-radius: 22px;
  display: grid; place-items: center; color: inherit; text-decoration: none;
}
.icon-btn:active { background: var(--press); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:disabled { opacity: .3; }

/* ---- ヘッダ ---- */
.top {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; }
.crumbs {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.crumbs::-webkit-scrollbar { display: none; }
.crumb { padding: 8px 6px; border-radius: 8px; color: var(--muted); flex: none; }
.crumb:last-child { color: var(--text); font-weight: 600; }
.crumb:active { background: var(--press); }
.crumb-sep { color: var(--muted); flex: none; opacity: .6; }
.searchbar { padding: 0 12px 10px; }
.searchbar input {
  width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); padding: 0 12px; font: inherit; font-size: 16px;
}
.searchbar input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---- 一覧 (サムネイルのグリッド) ---- */
.list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 14px 8px; align-content: start;
  padding: 10px 10px calc(24px + env(safe-area-inset-bottom));
}
.list > .loading, .list > .error, .list > .empty, .list > .note { grid-column: 1 / -1; }
.list > .note { padding: 0 2px; }
.tile { min-width: 0; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.thumb {
  position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: var(--surface); display: grid; place-items: center;
  --kc: var(--k-file);
}
.tile:active .thumb { opacity: .75; }
.thumb.folder { --kc: var(--k-folder); }
.thumb.pdf { --kc: var(--k-pdf); }
.thumb.video { --kc: var(--k-video); }
.thumb.image { --kc: var(--k-image); }
.thumb.audio { --kc: var(--k-audio); }
.thumb.text { --kc: var(--k-text); }
.thumb.archive { --kc: var(--k-archive); }
.thumb .ph { width: 46%; height: 46%; color: var(--kc); }
.thumb .ph svg { width: 100%; height: 100%; stroke-width: 1.6; }
.thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .2s;
}
.thumb.loaded img { opacity: 1; }
.thumb.loaded .ph { visibility: hidden; }
.thumb.pdf img { object-position: top; background: #fff; }
.thumb .anim {
  position: absolute; inset: 0; background-repeat: no-repeat;
  background-size: 600% 100%; background-position: 0% 0;
}
.thumb .badge, .thumb .dl { z-index: 1; }
.thumb .badge {
  position: absolute; left: 6px; bottom: 6px; height: 22px; min-width: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 11px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.thumb .badge.play { padding: 0; }
.thumb .badge svg { width: 12px; height: 12px; }
.thumb .dl {
  position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px; border-radius: 17px;
  display: grid; place-items: center; background: rgba(0,0,0,.5); color: #fff;
}
.thumb .dl svg { width: 18px; height: 18px; }
.thumb .dl:active { background: var(--accent); }
.tname {
  margin-top: 6px; padding: 0 2px; font-size: 12.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-all;
}
.tsub { padding: 0 2px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 600px) {
  .list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 12px; padding: 16px 16px 32px; }
}
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 6px 8px 14px; min-height: 60px;
  border-bottom: 1px solid var(--line); cursor: pointer; user-select: none;
}
.row:active { background: var(--press); }
.kind {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; color: #fff; background: var(--k-file);
}
.kind svg { width: 22px; height: 22px; }
.kind.folder { background: var(--k-folder); }
.kind.pdf { background: var(--k-pdf); }
.kind.video { background: var(--k-video); }
.kind.image { background: var(--k-image); }
.kind.audio { background: var(--k-audio); }
.kind.text { background: var(--k-text); }
.kind.archive { background: var(--k-archive); }
.meta { flex: 1; min-width: 0; }
.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .chev { color: var(--muted); width: 44px; display: grid; place-items: center; }
.row .chev svg { width: 18px; height: 18px; }
.row .icon-btn { color: var(--accent); }

.empty, .loading, .error {
  padding: 48px 24px; text-align: center; color: var(--muted);
}
.error .btn { margin-top: 16px; }
.note { padding: 10px 14px; color: var(--muted); font-size: 13px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 22px;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 600;
}
.btn.secondary { background: rgba(255,255,255,.12); color: #fff; }
.btn svg { width: 20px; height: 20px; }
.spinner {
  width: 28px; height: 28px; margin: 0 auto 12px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- メニュー ---- */
.menu {
  position: fixed; z-index: 20; right: 8px; top: calc(52px + env(safe-area-inset-top));
  min-width: 200px; padding: 6px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.menu-title { padding: 8px 12px 4px; font-size: 12px; color: var(--muted); }
.menu-item {
  display: flex; width: 100%; padding: 11px 12px; border-radius: 10px; text-align: left;
}
.menu-item:active { background: var(--press); }
.menu-item.on { color: var(--accent); font-weight: 600; }
.menu-item.on::after { content: "✓"; margin-left: auto; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* ---- ビューア ---- */
.viewer {
  position: fixed; inset: 0; z-index: 30;
  background: var(--viewer-bg); color: #fff;
  display: flex; flex-direction: column;
}
.vbar {
  display: flex; align-items: center; gap: 2px; padding: 4px 6px;
  padding-top: calc(4px + env(safe-area-inset-top));
  background: var(--viewer-bar); flex: none;
}
.vbar .icon-btn:active { background: rgba(255,255,255,.12); }
.vtitle { flex: 1; min-width: 0; padding: 0 6px; }
.vname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vinfo { font-size: 12px; color: #a6adb8; }
.vbody {
  flex: 1; min-height: 0; position: relative; overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.vbody.center { display: grid; place-items: center; overflow: hidden; }
.vbody img, .vbody video {
  max-width: 100%; max-height: 100%; display: block; margin: auto;
}
.vbody video { width: 100%; height: 100%; background: #000; }
.vbody audio { width: min(520px, calc(100% - 32px)); }
.vbody pre {
  margin: 0; padding: 14px 14px calc(24px + env(safe-area-inset-bottom));
  white-space: pre-wrap; word-break: break-word; font: 13px/1.55 ui-monospace, Menlo, Consolas, monospace;
  color: #e6e8eb;
}
.vbody .loading, .vbody .error, .vbody .empty { color: #a6adb8; }
.vbody .spinner { border-color: #333; border-top-color: #fff; }
.vnav {
  position: absolute; top: 50%; width: 44px; height: 64px; margin-top: -32px;
  display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.35); z-index: 2;
}
.vnav svg { width: 26px; height: 26px; }
.vnav.prev { left: 0; border-radius: 0 12px 12px 0; }
.vnav.next { right: 0; border-radius: 12px 0 0 12px; }
.viewer.nonav .vnav, .vnav:disabled { display: none; }

.nopreview { text-align: center; padding: 24px; }
.nopreview .kind { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 16px; }
.nopreview .kind svg { width: 38px; height: 38px; }
.nopreview p { color: #a6adb8; margin: 8px 0 20px; }
.nopreview .actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* PDF */
.pdf-pages { margin: 0 auto; padding: 8px 0 calc(72px + env(safe-area-inset-bottom)); }
.pdf-page {
  position: relative; margin: 0 auto 8px; background: #fff; width: calc(100% - 16px);
}
.pdf-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* PDF 横めくり (1ページずつスワイプ) */
.vbody.paged { overflow: hidden; }
.pdf-slides {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.pdf-slides::-webkit-scrollbar { display: none; }
.pdf-slide {
  flex: 0 0 100%; height: 100%; display: flex; overflow: auto; padding: 8px;
  scroll-snap-align: start; scroll-snap-stop: always;
}

/* PDF 表示中: バーはページの上に重ねて表示し、タップで出し入れする */
.viewer.pdf-mode .vbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  transition: opacity .2s, transform .2s;
}
.viewer.pdf-mode .vbody { padding-top: env(safe-area-inset-top); }
.viewer.pdf-mode .pdf-pages { padding-top: 8px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.viewer.pdf-mode .pdf-tools { transition: opacity .2s; }
.viewer.ui-hidden .vbar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.viewer.ui-hidden .pdf-tools { opacity: 0; pointer-events: none; }
.pdf-slide .pdf-page { margin: auto; flex: none; }
.pdf-tools {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 3;
  display: flex; align-items: center; gap: 2px; padding: 2px 6px;
  background: rgba(30,32,38,.92); border-radius: 24px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.pdf-tools .icon-btn:active { background: rgba(255,255,255,.12); }
.pdf-tools .pnum { min-width: 72px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---- ログイン ---- */
.login {
  position: fixed; inset: 0; z-index: 40; background: var(--bg);
  display: grid; place-items: center; padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top));
}
.login-card { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; }
.login-icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 16px; }
.login h1 { margin: 0 0 8px; text-align: center; font-size: 22px; }
.login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.login input {
  height: 48px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); padding: 0 14px; font: inherit; font-size: 17px;
}
.login input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#loginCode { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.login-error { min-height: 1.4em; color: #e5484d; font-size: 14px; text-align: center; }
.login .btn { height: 48px; border-radius: 12px; }
.login .btn:disabled { opacity: .6; }

/* ---- トースト ---- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 50;
  bottom: calc(24px + env(safe-area-inset-bottom));
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px;
  background: #23262d; color: #fff; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

/* ビューア表示中は動画の操作バーに重ならないよう上にずらす */
.viewer:not([hidden]) ~ .toast, .viewer .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
.viewer:fullscreen { width: 100%; height: 100%; }
#vRotate.on, #vAudio.on, #vOffline.on { color: #7fb0ff; }

/* オフライン保存中はボタンの周りに進み具合の輪を出す */
#vOffline { position: relative; }
#vOffline.busy::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: conic-gradient(#7fb0ff var(--p, 0%), rgba(255,255,255,.16) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.thumb .obadge {
  position: absolute; left: 6px; top: 6px; z-index: 1; width: 24px; height: 24px; border-radius: 12px;
  display: grid; place-items: center; background: rgba(0,0,0,.55); color: #7fb0ff;
}
.thumb .obadge svg { width: 15px; height: 15px; }
.note .note-btn { margin-left: 12px; color: var(--accent); font-weight: 600; }

/* ビューアの「その他」メニュー */
.viewer .menu { color: var(--text); top: calc(54px + env(safe-area-inset-top)); z-index: 6; }
.vmenu .menu-item { text-decoration: none; color: inherit; }

/* ログイン画面の「オフライン保存を見る」 */
.login-alt { padding: 10px; color: var(--accent); font-weight: 600; }

/* 下から出る画面 (共有リンク) */
.sheet {
  position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-card {
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
  background: var(--bg); color: var(--text); border-radius: 18px 18px 0 0;
  padding: 4px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0,0,0,.25);
}
@media (min-width: 720px) {
  .sheet { align-items: center; }
  .sheet-card { border-radius: 18px; }
}
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 6px 0 4px; }
.sheet-head h2 { flex: 1; margin: 0; font-size: 17px; }
.sheet .btn { width: 100%; }
.btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn:disabled { opacity: .6; }
.sh-file { margin: 2px 0 16px; font-weight: 600; word-break: break-all; }
.sh-label { margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.seg button {
  height: 42px; border-radius: 10px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
}
.seg button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.seg button:disabled:not(.on) { opacity: .4; }
.sh-note { margin: 12px 0 16px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.sh-url {
  width: 100%; height: 46px; margin-bottom: 10px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 14px/1 ui-monospace, Menlo, Consolas, monospace;
}
.sh-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-exp { margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.sh-list { display: flex; flex-direction: column; margin-bottom: 16px; }
.sh-row { display: flex; align-items: center; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sh-info { flex: 1; min-width: 0; }
.sh-name, .sh-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-name { font-weight: 600; }
.sh-sub { font-size: 12px; color: var(--muted); }
.icon-btn.danger { color: #e5484d; }
.sh-empty { padding: 24px 8px; color: var(--muted); text-align: center; line-height: 1.7; }

/* 音声 (と「音声だけ再生」の動画) の表示 */
.audio-box {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: 100%; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
.audio-box .cover {
  width: min(72vw, 46vh, 320px); aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  display: grid; place-items: center; background: #1c1f26; color: #7fb0ff;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.audio-box .cover.video { color: #c89bff; }
.audio-box .cover svg { width: 38%; height: 38%; }
.audio-box .cover img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.audio-box .cover-name {
  max-width: 520px; color: #e6e8eb; font-size: 15px; font-weight: 600; text-align: center;
  word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

@media (min-width: 720px) {
  .list { max-width: 960px; margin: 0 auto; }
  .pdf-pages { max-width: 1000px; }
}