/* Shared surface for the 2026-10-26 file tools: SRT checker, merge subtitles,
 * audio file inspector, and the subtitle-to-text converter on /srt-to-txt and
 * /vtt-to-txt. Reads the page's own palette (--v-*, --ink-* from
 * tools-online/_styles.css or the page) and falls back to the same values, so
 * it never redefines a token the page already set. Mobile first. */
.wt-card { background: #fff; border: 1px solid var(--ink-200, #e2e8f0); border-radius: 14px; padding: 20px; max-width: 780px; margin: 0 auto; text-align: left; box-shadow: 0 14px 38px -24px rgba(15, 23, 42, .22); }
@media (max-width: 560px) { .wt-card { padding: 14px; border-radius: 12px; } }
.wt-drop { border: 1.5px dashed var(--v-300, #d9f99d); background: var(--v-50, #f7fee7); border-radius: 12px; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; transition: background .14s, border-color .14s; }
.wt-drop:hover, .wt-drop:focus-within, .wt-drop.is-drag { background: var(--v-100, #ecfccb); border-color: var(--v-700, #6da00f); }
.wt-drop strong { font-size: 15px; color: var(--ink-900, #0f172a); }
.wt-drop .wt-hint { font-size: 13px; color: var(--ink-500, #64748b); }
.wt-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wt-drop .wt-pick { margin-top: 6px; background: var(--v-800, #4d7508); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font: 600 14px/1.2 inherit; cursor: pointer; }
.wt-or { text-align: center; font-size: 12px; color: var(--ink-500, #64748b); margin: 10px 0 6px; text-transform: uppercase; letter-spacing: .08em; }
.wt-card label, .wt-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-700, #334155); margin: 0 0 4px; }
textarea.wt-text { width: 100%; min-height: 150px; padding: 10px 12px; border: 1px solid var(--ink-300, #cbd5e1); border-radius: 8px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-900, #0f172a); background: #fff; resize: vertical; }
textarea.wt-text:focus, .wt-card input:focus, .wt-card select:focus { outline: 2px solid var(--v-500, #a3dc2d); outline-offset: 1px; border-color: var(--v-500, #a3dc2d); }
.wt-opts { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
@media (min-width: 600px) { .wt-opts { grid-template-columns: repeat(3, 1fr); } }
.wt-card input[type=number], .wt-card input[type=text], .wt-card select { width: 100%; padding: 9px 10px; border: 1px solid var(--ink-300, #cbd5e1); border-radius: 8px; font-size: 14px; background: #fff; color: var(--ink-900, #0f172a); }
.wt-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-700, #334155); font-weight: 500; }
.wt-check input { margin-top: 3px; }
.wt-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.wt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border-radius: 10px; font: 700 15px/1.2 inherit; cursor: pointer; text-decoration: none; border: 0; background: var(--v-800, #4d7508); color: #fff; }
.wt-btn:hover { background: var(--v-900, #365314); }
.wt-btn:disabled { background: var(--ink-300, #cbd5e1); cursor: not-allowed; }
.wt-btn.ghost { background: #fff; color: var(--ink-700, #334155); border: 1px solid var(--ink-200, #e2e8f0); font-weight: 600; }
.wt-btn.ghost:hover { border-color: var(--v-300, #d9f99d); color: var(--v-800, #4d7508); }
.wt-status { margin-top: 12px; font-size: 13.5px; color: var(--ink-500, #64748b); min-height: 1em; }
.wt-status.err { color: var(--err-700, #b91c1c); }
.wt-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
@media (min-width: 600px) { .wt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wt-stat { background: var(--ink-50, #f8fafc); border: 1px solid var(--ink-200, #e2e8f0); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.wt-stat b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500, #64748b); margin-bottom: 2px; }
.wt-stat span { font-size: 15px; font-weight: 700; color: var(--ink-900, #0f172a); overflow-wrap: anywhere; }
.wt-verdict { margin-top: 16px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--ink-200, #e2e8f0); border-left: 4px solid var(--v-700, #6da00f); background: var(--ink-50, #f8fafc); font-size: 14.5px; line-height: 1.55; color: var(--ink-700, #334155); }
.wt-verdict b.big { display: block; font-size: 18px; color: var(--ink-900, #0f172a); margin-bottom: 2px; }
.wt-verdict.warn { border-left-color: #d97706; }
.wt-verdict.bad { border-left-color: var(--err-700, #b91c1c); }
.wt-issues { list-style: none; margin: 14px 0 0; padding: 0; max-height: 460px; overflow: auto; border: 1px solid var(--ink-200, #e2e8f0); border-radius: 10px; }
.wt-issues li { padding: 10px 12px; border-top: 1px solid var(--ink-100, #f1f5f9); font-size: 14px; line-height: 1.5; color: var(--ink-700, #334155); display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; }
.wt-issues li:first-child { border-top: 0; }
.wt-sev { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.wt-sev.error { background: var(--err-100, #fee2e2); color: var(--err-700, #b91c1c); }
.wt-sev.warn { background: #fef3c7; color: #92400e; }
.wt-sev.info { background: var(--ink-100, #f1f5f9); color: var(--ink-700, #334155); }
.wt-where { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-500, #64748b); }
.wt-changes { margin: 12px 0 0; padding-left: 20px; font-size: 14px; color: var(--ink-700, #334155); }
.wt-changes li { margin: 3px 0; }
.wt-parts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.wt-part { border: 1px solid var(--ink-200, #e2e8f0); border-radius: 10px; padding: 12px; display: grid; grid-template-columns: 1fr; gap: 8px; background: #fff; }
@media (min-width: 640px) { .wt-part { grid-template-columns: 1fr 170px auto; align-items: end; } }
.wt-part .wt-name { font-weight: 700; color: var(--ink-900, #0f172a); overflow-wrap: anywhere; }
.wt-part .wt-meta { font-size: 12.5px; color: var(--ink-500, #64748b); }
.wt-part .wt-move { display: flex; gap: 6px; }
.wt-part .wt-move button { min-width: 44px; min-height: 40px; border: 1px solid var(--ink-200, #e2e8f0); background: #fff; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--ink-700, #334155); }
.wt-rows { list-style: none; margin: 12px 0 0; padding: 0; }
.wt-rows li { padding: 9px 0; border-top: 1px solid var(--ink-200, #e2e8f0); font-size: 14.5px; line-height: 1.55; color: var(--ink-700, #334155); overflow-wrap: anywhere; }
.wt-rows li .k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500, #64748b); font-weight: 700; margin-bottom: 1px; }
.wt-handoff { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: var(--v-50, #f7fee7); border: 1px solid var(--v-300, #d9f99d); font-size: 14.5px; color: var(--ink-700, #334155); line-height: 1.55; }
.wt-handoff a { color: var(--v-800, #4d7508); font-weight: 700; }
.wt-file + .wt-file { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--ink-200, #e2e8f0); }
.wt-file h3 { margin: 0 0 2px; font-size: 16px; overflow-wrap: anywhere; color: var(--ink-900, #0f172a); }
.wt-copy { max-width: 760px; margin: 0 auto; padding: 8px 16px 0; color: var(--ink-700, #334155); line-height: 1.65; font-size: 15.5px; }
.wt-copy h2 { font-size: clamp(20px, 3vw, 24px); font-weight: 800; letter-spacing: -.015em; margin: 34px 0 10px; color: var(--ink-900, #0f172a); }
.wt-copy a { color: var(--v-800, #4d7508); }
.wt-copy code { font-size: 13px; background: var(--ink-100, #f1f5f9); padding: 1px 5px; border-radius: 5px; }
.wt-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wt-tbl { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 14px; }
.wt-tbl th, .wt-tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ink-200, #e2e8f0); vertical-align: top; }
.wt-tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500, #64748b); }
.wt-head { text-align: center; padding: 24px 16px 8px; }
.wt-head h1 { font-size: clamp(26px, 4.4vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 8px; color: var(--ink-900, #0f172a); }
.wt-head p { color: var(--ink-700, #334155); max-width: 640px; margin: 0 auto 16px; font-size: 16px; line-height: 1.55; }
.wt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wt-card [hidden], .wt-card[hidden] { display: none !important; }