/* 公开的在线小工具页面。只用 tokens.css 里的变量，间距只用 4/8/12/16/24/32/48。 */
body { background: var(--surface-2); }
.tl-wrap { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--s-5); }
.tl-top { background: var(--paper); border-bottom: 1px solid var(--line); }
.tl-top-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: var(--topbar-h); }
.tl-brand { font-weight: var(--fw-bold); }
.tl-brand .faint { font-weight: var(--fw-regular); }
.tl-top-note { font-size: var(--fs-sm); }
.tl-main { display: grid; gap: var(--s-4); padding-top: var(--s-6); padding-bottom: var(--s-7); }

.tl-hero { display: grid; gap: var(--s-2); }
.tl-hero h1 { font-size: var(--fs-2xl); }
.tl-safe { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); color: var(--ok); }

.tl-drop { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5); border: 1px dashed var(--line-strong);
           border-radius: var(--r-l); background: var(--paper); cursor: pointer; transition: border-color var(--t-fast); }
.tl-drop:hover, .tl-drop.is-over { border-color: var(--ink-3); }
.tl-drop:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.tl-drop-ic { width: 32px; height: 32px; color: var(--ink-3); }
.tl-drop-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.tl-drop-text strong { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-drop.is-loaded { border-style: solid; border-color: var(--line); padding: var(--s-4); }

.tl-work { overflow: hidden; }
.tl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-5); padding: var(--s-5); }
.tl-form { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-4) var(--s-3); align-content: start; align-items: start; font-size: var(--fs-sm); }
.tl-lb { color: var(--ink-3); line-height: 28px; }
.tl-sub { margin-top: var(--s-2); }
.tl-opts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tl-opts span { display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 var(--s-2); border: 1px solid var(--line-strong);
                border-radius: var(--r-s); color: var(--ink-2); cursor: pointer; }
.tl-opts span:hover { color: var(--ink); }
.tl-opts input:checked + span { border-color: var(--run); background: var(--run-soft); color: var(--run); }
.tl-opts input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.tl-style, .tl-checks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--ink-2); }
.tl-style label, .tl-checks label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--h-sm); }
.tl-num { width: 76px; height: var(--h-sm); padding: 0 var(--s-2); }

.tl-side { display: grid; gap: var(--s-3); align-content: start; }
.tl-stage { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; margin: 0 auto; border-radius: var(--r-m); background: var(--stage); }
.tl-stage-tag { position: absolute; left: var(--s-2); top: var(--s-1); font-size: var(--fs-xs); color: var(--stage-ink); opacity: 0.6; }
.tl-cap { position: absolute; left: 50%; transform: translate(-50%, -50%); max-width: 92%; padding: 0.15em 0.5em; color: var(--stage-ink);
          font-family: "PingFang SC", var(--font); font-weight: var(--fw-bold); line-height: 1.3; text-align: center; white-space: pre;
          text-shadow: 0.04em 0.04em 0.04em rgba(0, 0, 0, 0.75); }
.tl-list { border: 1px solid var(--line); border-radius: var(--r-m); font-size: var(--fs-sm); max-height: 228px; overflow: auto; }
.tl-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-2); width: 100%; padding: 6px var(--s-2); border: 0;
          border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.tl-row:last-child { border-bottom: 0; }
.tl-row:hover { background: var(--surface-2); }
.tl-row.is-sel { background: var(--run-soft); }
.tl-row time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); line-height: 20px; }
.tl-row span { white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-more { padding: 6px var(--s-2); color: var(--ink-3); }
#warn { display: flex; align-items: center; gap: var(--s-1); color: var(--ink-2); }
#warn[hidden] { display: none; }
.tl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); }

.tl-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
.tl-help h2 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.tl-help ol { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s-2); color: var(--ink-2); }
.tl-help details { border-bottom: 1px solid var(--line); padding: var(--s-2) 0; }
.tl-help summary { cursor: pointer; font-weight: var(--fw-medium); }
.tl-help details p { margin-top: var(--s-2); color: var(--ink-2); }
.tl-footer { padding-top: var(--s-5); padding-bottom: var(--s-6); font-size: var(--fs-xs); border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .tl-wrap { padding: 0 var(--s-4); }
  .tl-top-note { display: none; }
  .tl-cols, .tl-help { grid-template-columns: minmax(0, 1fr); }
  .tl-cols { padding: var(--s-4); }
  .tl-foot { padding: var(--s-3) var(--s-4); }
  .tl-drop { padding: var(--s-4); }
}