/* Free tools: widget styles. Page chrome comes from page.css. */
.tool-head { padding-bottom: 18px; }
.tool { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--card-shadow); }
.tool .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tool .chip { border: 1px solid var(--line2); background: var(--bg); color: var(--dim); border-radius: 999px; padding: 6px 12px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.tool .chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tool .chip small { opacity: .7; font-weight: 500; margin-left: 2px; }
.tool-body { padding-top: 10px; }
.tool-body section { padding: 30px 0 0; }
.tool-body h2 { margin-bottom: 10px; }
.tool-body p, .tool-body li { color: var(--dim); font-size: 16.5px; margin: 10px 0; }
.tool-body ol, .tool-body ul { padding-left: 22px; }
.tool-body .table-wrap table.cmp { min-width: 520px; }

/* Safe zone checker */
.sz { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.sz-stage canvas { width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; display: block; touch-action: none; cursor: crosshair; background: #1b1b1b; }
.sz-step { border-bottom: 1px solid var(--line); padding: 4px 0 16px; margin-bottom: 14px; }
.sz-step:last-child { border-bottom: none; }
.sz-step > b { display: block; margin-bottom: 8px; }
.sz-file { cursor: pointer; }
.sz-hint { font-size: 13.5px; color: var(--faint); margin: 8px 0 0; }
.sz-opt { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--dim); margin-top: 8px; }
.sz-scrub { margin-top: 10px; font-size: 14px; }
.sz-scrub input { width: 100%; }
#sz-report table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 10px; }
#sz-report th, #sz-report td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
#sz-report tr.ok td { color: #1f7a3a; font-weight: 600; }
#sz-report tr.bad td { color: #b42318; font-weight: 600; }
.sz .row { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) { .sz { grid-template-columns: 1fr; } .sz-stage { max-width: 320px; margin: 0 auto; } }

/* Speech to time */
.st { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.st textarea { width: 100%; font: inherit; font-size: 15px; border: 1px solid var(--line2); border-radius: 12px; padding: 12px; margin-top: 8px; background: var(--bg); color: var(--ink); }
.st-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 14.5px; color: var(--dim); }
.st-row input[type=number], .st-backl input { width: 110px; font: inherit; border: 1px solid var(--line2); border-radius: 10px; padding: 7px 10px; margin-left: 6px; background: var(--bg); color: var(--ink); }
.st-pace { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.st-res { background: var(--panel2); border-radius: 16px; padding: 18px; }
#st-out b { display: block; font-size: 40px; letter-spacing: -.02em; line-height: 1.1; }
#st-out span { color: var(--dim); font-size: 14.5px; }
.st-backl { display: block; margin-top: 18px; font-size: 14.5px; color: var(--dim); }
#st-back { font-weight: 600; margin-top: 8px; }
@media (max-width: 760px) { .st { grid-template-columns: 1fr; } }

/* Hub */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tool-card { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; text-decoration: none; box-shadow: var(--card-shadow); }
.tool-card span { color: var(--dim); font-size: 14.5px; }
.tool-card:hover { border-color: var(--accent); }