/* Rec Frost Web — Calc Frost / Rec Frost と同じすりガラス調のデザイン */
:root {
  --accent: #00E5FF; --accent-92: rgba(0,229,255,.92); --accent-60: rgba(0,229,255,.6); --accent-38: rgba(0,229,255,.38);
  --on-accent: #06101A; --tr-color: #aaf7ff; --panel: rgba(10,15,30,.6); --bg-opacity: .75;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #060A16; color: #fff; font-family: var(--font); overflow: hidden; }
body { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-user-select: none; user-select: none; }
input, textarea, select { font: inherit; }

/* ---------------------------------------------------------------- 背景 */
#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#bg > div { position: absolute; inset: 0; }
.bg-base { background: linear-gradient(152deg, #060A16 0%, #130F2B 50%, #07182A 100%); }
.bg-glow-a { background: radial-gradient(circle 100vw at 10% 10%, var(--accent-38), rgba(0,0,0,0) 100%); }
.bg-glow-b { background: radial-gradient(circle 100vw at 95% 88%, rgba(124,77,255,.4), rgba(124,77,255,0) 100%); }
.bg-img { background-size: cover; background-position: center; opacity: var(--bg-opacity); }
.bg-scrim { display: none; background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,.063) 45%, rgba(0,0,0,.44) 100%); }
#bg.has-img .bg-scrim { display: block; }

/* ---------------------------------------------------------------- 画面 */
.screen { position: fixed; inset: 0; z-index: 1; display: none; flex-direction: column;
  padding: var(--sat) calc(14px + var(--sar)) calc(8px + var(--sab)) calc(14px + var(--sal)); }
.screen.show { display: flex; }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; margin: 0 -14px; padding: 0 14px 16px; }

/* ---------------------------------------------------------------- 丸いアイコンボタン */
.icon-btn { position: relative; border-radius: 50%; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  display: inline-flex; align-items: center; justify-content: center; flex: none; transition: filter .1s; }
.icon-btn svg { display: block; }
.icon-btn:active::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.22); }
.labeled { display: flex; flex-direction: column; align-items: center; margin: 0 5px; }
.btn-label { font-size: 10px; color: rgba(255,255,255,.8); white-space: nowrap; margin-top: 1px; line-height: 1.3; }

/* ---------------------------------------------------------------- チップ */
.chip { height: 100%; padding: 0 12px; border-radius: 16px; font-size: 14px; white-space: nowrap;
  background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
.chip.on { background: var(--accent-92); color: var(--on-accent); box-shadow: none; }
.chip:active { filter: brightness(1.3); }
.chip-group { display: flex; align-items: center; padding: 4px; border-radius: 20px; background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px var(--accent-60); height: 100%; }
.chip-group.off { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }

/* ---------------------------------------------------------------- メイン画面 */
.main-head { display: flex; align-items: center; padding: 6px 0 4px; }
.app-title { flex: 1; font-size: 22px; font-weight: 300; padding-left: 4px; white-space: nowrap; letter-spacing: .01em; }
.timer { font-size: 15px; padding-right: 6px; font-variant-numeric: tabular-nums; }
.timer.run { color: #FF8A80; }
.status { background: var(--panel); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  padding: 10px 14px; margin-bottom: 8px; cursor: pointer; }
.sum { font-size: 13px; color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
.sum.dim { opacity: .45; }
.sens-row { display: flex; align-items: center; height: 34px; margin-top: 6px; gap: 6px; }
.sens-label { font-size: 13px; min-width: 76px; }
.sens-row input[type=range] { flex: 1; min-width: 0; }
.boost { height: 30px; font-size: 12px; }
.level { position: relative; height: 6px; margin-top: 2px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.level .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--accent); }
.level .pk { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: rgba(255,255,255,.8); display: none; }
.level .pk.limit { background: #FF5252; }
.notice { font-size: 12px; color: #FFD180; padding-top: 6px; white-space: pre-line; display: none; }
.caption { font-size: 11px; color: rgba(255,255,255,.6); padding: 0 0 3px 4px; }
.parts { display: flex; align-items: center; height: 44px; margin-bottom: 8px; }
.parts .arrow { font-size: 14px; color: rgba(255,255,255,.6); padding: 0 4px; }
.parts .tr-chip { font-size: 13px; }
.parts .rec-chip { height: 36px; margin-left: 10px; }
.viewsw { display: flex; height: 40px; margin-bottom: 6px; }
.viewsw .chip { font-size: 12px; padding: 0 10px; }
.viewsw .chip + .chip { margin-left: 3px; }
.listbox { position: relative; flex: 1; min-height: 0; }
.list { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); padding: 6px 0; }
.empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 24px; font-size: 15px; color: rgba(255,255,255,.6); white-space: pre-line; line-height: 1.6; pointer-events: none; }
.seg { background: var(--panel); border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); padding: 8px 12px 10px;
  margin-bottom: 8px; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.seg.speaking { box-shadow: inset 0 0 0 2px var(--accent); }
.seg:active { filter: brightness(1.15); }
.seg-top { display: flex; align-items: center; }
.seg-meta { flex: 1; font-size: 11px; color: rgba(255,255,255,.5); }
.seg-spk { font-size: 11px; color: var(--accent); }
.seg-src { font-size: 17px; padding-top: 2px; line-height: 1.45; word-break: break-word; }
.seg-tr { font-size: 16px; padding-top: 4px; line-height: 1.45; color: var(--tr-color); word-break: break-word; }
.seg-tr.pending { color: rgba(255,255,255,.5); }
.seg-tr.err { color: #FF8A80; }
.partial { font-size: 15px; font-weight: 300; font-style: italic; color: rgba(255,255,255,.7); padding: 6px 8px 2px;
  display: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.partial.hide { display: none; }
.bottom { display: flex; align-items: center; justify-content: center; padding-top: 6px; }

/* ---------------------------------------------------------------- 設定などのカード */
.header { display: flex; align-items: center; height: 64px; flex: none; }
.header .title { flex: 1; font-size: 24px; font-weight: 300; padding-left: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card { background: var(--panel); border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); padding: 16px; margin-bottom: 14px; }
.card-title { font-size: 13px; font-weight: 500; color: var(--accent); letter-spacing: .06em; padding-bottom: 10px; }
.sub-title { font-size: 13px; color: var(--accent); padding: 12px 0 2px 4px; }
.row { display: flex; align-items: center; min-height: 50px; padding: 6px 4px; border-radius: 12px; cursor: pointer; width: 100%; text-align: left; }
.row:active { background: rgba(255,255,255,.2); }
.row .label { flex: 1; font-size: 16px; }
.row .value { font-size: 14px; color: rgba(255,255,255,.7); max-width: 190px; text-align: right; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; }
.row .arrow { font-size: 20px; color: rgba(255,255,255,.5); padding-left: 8px; }
.hint { font-size: 12px; color: rgba(255,255,255,.6); padding: 0 4px 4px; line-height: 1.55; white-space: pre-line; }
.hint.warn { color: #FFD180; }
.toggle { display: flex; align-items: center; min-height: 48px; padding-left: 4px; cursor: pointer; }
.toggle .label { flex: 1; font-size: 16px; padding-right: 10px; }
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 16px; background: rgba(255,255,255,.22); transition: background .15s; }
.switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); }
.slider-head { display: flex; margin-top: 10px; font-size: 16px; }
.slider-head .label { flex: 1; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 2px 0 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent) 0, var(--accent) var(--p, 50%), rgba(255,255,255,.25) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); margin-top: -9px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); }
input[type=range]::-moz-range-progress { height: 4px; background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--accent); }
.gbtn { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 8px; padding: 0 14px;
  border-radius: 14px; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbtn:active { background: rgba(255,255,255,.4); }
.btn-row { display: flex; gap: 6px; height: 48px; }
.btn-row .gbtn { margin-top: 0; height: 100%; padding: 0 4px; flex: 1; }
.swatches { display: flex; align-items: center; height: 52px; }
.swatch { flex: 1; height: 44px; margin: 0 3px; border-radius: 50%; max-width: 44px; margin: 0 auto; }
.swatch.sel { box-shadow: 0 0 0 3px #fff inset; }
.version { text-align: center; font-size: 12px; color: rgba(255,255,255,.5); padding: 8px 0; white-space: pre-line; }
.test-result { font-size: 14px; padding: 8px 4px 0; white-space: pre-line; color: var(--tr-color); }

/* ---------------------------------------------------------------- 閲覧・再生 */
.tabs { display: flex; height: 40px; margin-bottom: 10px; flex: none; }
.tabs .chip-group { width: 100%; }
.tabs .chip { flex: 1; }
.tabs .chip + .chip { margin-left: 3px; }
.file { display: block; width: 100%; text-align: left; background: var(--panel); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  padding: 12px 14px; margin-bottom: 8px; -webkit-touch-callout: none; }
.file:active { background: rgba(255,255,255,.2); }
.file.playing { box-shadow: inset 0 0 0 2px var(--accent); }
.file-name { font-size: 15px; word-break: break-all; }
.file-meta { font-size: 12px; color: rgba(255,255,255,.55); padding-top: 3px; }
.player { flex: none; display: none; align-items: center; gap: 10px; background: var(--panel); border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); padding: 10px 12px; margin-top: 6px; }
.player.show { display: flex; }
.player .mid { flex: 1; min-width: 0; }
.player .pname { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .ptime { font-size: 12px; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.viewer-text { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--panel); border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); padding: 16px; font-size: 16px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  -webkit-user-select: text; user-select: text; margin-bottom: 4px; }
.head-btns { display: flex; }

/* ---------------------------------------------------------------- 背景の位置調整 */
#crop { padding: 0; background: #000; }
#crop canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.crop-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px;
  padding: calc(12px + var(--sat)) calc(12px + var(--sar)) 0 calc(12px + var(--sal)); pointer-events: none; }
.crop-top > * { pointer-events: auto; }
.crop-hint { flex: 1; font-size: 12px; line-height: 1.5; background: rgba(0,0,0,.5); border-radius: 12px; padding: 8px 10px; }
.crop-panel { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--sab)); background: var(--panel);
  border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); padding: 10px 16px 14px; }
.crop-panel .btn-row { height: 44px; margin-top: 8px; }
.chip.small { height: 34px; font-size: 13px; }

/* ---------------------------------------------------------------- ダイアログ・トースト */
.dlg-ov { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
  padding: calc(20px + var(--sat)) 20px calc(20px + var(--sab)); opacity: 0; transition: opacity .15s; }
.dlg-ov.show { opacity: 1; }
.dlg { width: 100%; max-width: 420px; max-height: 100%; display: flex; flex-direction: column; background: rgba(22,27,44,.97);
  border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); overflow: hidden; }
.dlg-title { font-size: 18px; padding: 18px 20px 6px; color: var(--accent); }
.dlg-msg { font-size: 15px; padding: 14px 20px 6px; line-height: 1.6; white-space: pre-line; overflow-y: auto; }
.dlg-title + .dlg-msg { padding-top: 6px; }
.dlg-list { overflow-y: auto; padding: 6px 0; -webkit-overflow-scrolling: touch; }
.dlg-item { display: flex; align-items: center; width: 100%; text-align: left; min-height: 48px; padding: 10px 20px; font-size: 16px; line-height: 1.4; }
.dlg-item:active { background: rgba(255,255,255,.12); }
.dlg-radio { width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); margin-right: 16px; position: relative; }
.dlg-item.checked .dlg-radio { box-shadow: inset 0 0 0 2px var(--accent); }
.dlg-item.checked .dlg-radio::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--accent); }
.dlg-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding: 6px 12px 12px; }
.dlg-btn { padding: 10px 14px; border-radius: 12px; font-size: 15px; color: var(--accent); }
.dlg-btn:active { background: rgba(255,255,255,.12); }
.dlg-btn.primary { font-weight: 600; }
.dlg-input-box { padding: 10px 20px 4px; }
.dlg-input { width: 100%; height: 44px; border-radius: 12px; border: 0; padding: 0 12px; background: rgba(255,255,255,.12); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); font-size: 16px; outline: none; }
.dlg-input:focus { box-shadow: inset 0 0 0 2px var(--accent); }
#toast { position: fixed; left: 50%; bottom: calc(96px + var(--sab)); transform: translate(-50%, 20px); z-index: 60; max-width: calc(100% - 40px);
  background: rgba(40,44,60,.96); color: #fff; font-size: 14px; line-height: 1.5; padding: 10px 16px; border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: pre-line; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }