/* tools-standalone.css
   Reskins the exact same tool-popup markup/classes/IDs used inside the
   editor's tool popups (editor/index.html + editor/tools/*.js) for the
   standalone /tools/<name>/ pages, in the Tooplate 2095 "Level" template's
   visual language (Open Sans, flat/sharp corners, #ee5057 red primary,
   #1f3646 dark blue secondary, white/#F4F4F4 surfaces).

   Nothing here renames or removes a class/id the JS depends on — it only
   restyles them and turns the popup from a fixed fullscreen modal into a
   normal static block, so every tool's existing JS (upload, drag, format
   pickers, crop rect, progress, download) keeps working unmodified.

   This page also loads editor.css BEFORE this file — that's not a mistake.
   All the functional structure for .tp-*/.trim-*/.crop-*/.fmt-* (the
   display:none-until-.visible toggles, flex layouts, absolute-positioned
   handles, etc.) lives there and nowhere else; rewriting it a second time
   here would just drift out of sync with the real popups over time. This
   file only overrides color/type/shape on top of that structure. The one
   thing editor.css does that must NOT leak onto this page is its global
   dark-theme html/body rule (and *-selector), neutralized right below. */

html, body {
  background: #fff !important;
  color: var(--tt-ink-2) !important;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
  display: block !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
}
/* editor.css's *,*::before,*::after resets margin/padding/box-sizing —
   harmless (Bootstrap does the same for box-sizing), left alone. */

:root {
  --tt-primary: #ee5057;
  --tt-primary-dark: #d53239;
  --tt-navy: #1f3646;
  --tt-ink: #333333;
  --tt-ink-2: #898989;
  --tt-line: #e6e6e6;
  --tt-bg-gray: #F4F4F4;
}

.tool-page-main { font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: var(--tt-ink-2); }

/* ─────────────────────────────────────────────────────────────
   PAGE SHELL — hero / tool card / about / more-tools / footer
   The Tooplate template ships Bootstrap 4 but its own markup uses
   Bootstrap 3 column classes (col-xs-*), which don't exist in BS4 —
   inside a flex .row they collapse to shrink-to-fit, which is what made
   the first pass render as a cramped card floating in dead space. The
   shell below uses plain containers instead of fighting that grid.
   ───────────────────────────────────────────────────────────── */

/* Header. The template ships a 119px-tall bar with 50px/35px padding on every
   nav link and 1px dividers boxing each one — built for a full-screen travel
   splash, far too heavy above a utility tool. Slimmed to a 64px bar with
   tighter, divider-free links. Bar is position:fixed and .tm-top-bar-bg is its
   spacer, so both heights must stay in sync. */
.tm-top-bar, .tm-top-bar-bg { height: 64px; }
.tm-top-bar { box-shadow: 0 1px 3px rgba(31,54,70,.07); }
.tm-top-bar .navbar { padding: 0; }
.tm-top-bar .navbar-expand-lg .navbar-nav .nav-link {
  padding: 0 15px;
  line-height: 64px;
  letter-spacing: .05em;
}
.navbar-brand { font-size: 1.18rem; line-height: 64px; padding: 0; }
.nav-item { border-left: none; font-size: .74rem; font-weight: 400; }
.nav-item:last-child { border-right: none; }

/* Nav links sit next to the brand (as on the homepage), so the brand must not
   push the collapse right and the link list takes the free space instead. */
.navbar-brand { margin-right: 30px; }
.tm-top-bar .navbar-expand-lg .navbar-nav .nav-link { padding: 0 14px; }
@media (min-width: 992px) {
  /* Optically align the first link with the brand. Desktop only: in the
     collapsed menu the links are stacked, and zeroing this padding would
     leave the first item indented differently from the rest. */
  .tm-top-bar .navbar-nav .nav-item:first-child .nav-link { padding-left: 0; }
}

/* Auth control in the navbar (filled in by js/tp-nav-auth.js). It sits outside
   the <ul> so the links can left-align without dragging it along; the list's
   mr-auto pushes it to the right edge. Ships empty and stays zero-width until
   /api/me answers, so the nav does not jump; in the collapsed mobile menu it
   drops onto its own row. */
.tp-auth-item {
  display: flex; align-items: center; gap: 8px;
  margin-left: 10px; line-height: normal; flex-shrink: 0;
}
.tp-auth-item:empty { margin-left: 0; }

.tp-auth-btn {
  display: inline-flex; align-items: center;
  border: 1px solid #ddd; background: #fff; color: #6f6f6f;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px; transition: all .15s; white-space: nowrap;
}
.tp-auth-btn:hover { background: #f4f4f4; color: var(--tt-ink); text-decoration: none; }
.tp-auth-btn.primary { background: var(--tt-primary); border-color: var(--tt-primary); color: #fff; }
.tp-auth-btn.primary:hover { background: var(--tt-primary-dark); color: #fff; }

.tp-auth-user { position: relative; }
.tp-auth-chip {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid #ddd; cursor: pointer;
  padding: 6px 12px 6px 7px; transition: all .15s;
}
.tp-auth-chip:hover { background: #f4f4f4; }
.tp-auth-avatar {
  width: 24px; height: 24px; flex-shrink: 0;
  background: var(--tt-primary); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 24px; text-align: center;
}
.tp-auth-name {
  font-size: 12px; font-weight: 600; color: var(--tt-ink);
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-auth-caret { font-size: 10px; color: #b0b0b0; }

.tp-auth-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 210px; background: #fff; border: 1px solid #e4e4e4;
  box-shadow: 0 12px 32px rgba(31,54,70,.16); z-index: 1200;
}
.tp-auth-user.open .tp-auth-menu { display: block; }
/* The template uppercases everything inside .nav-item, which turns an email
   address into shouting and "My Projects" into "MY PROJECTS" next to a
   sentence-case "Sign out". Menu text opts out of that entirely. */
.tp-auth-menu, .tp-auth-email, .tp-auth-mi {
  text-transform: none; letter-spacing: normal;
}
.tp-auth-email {
  padding: 12px 15px; border-bottom: 1px solid var(--tt-line);
  font-size: 11.5px; color: #a8a8a8;
  /* One clean line: break-all split the address mid-word ("...GMAIL.C OM"). */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-auth-mi {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 11px 15px; font-size: 12.5px; line-height: 1.4; color: var(--tt-ink-2);
}
.tp-auth-mi:hover { background: #fafafa; color: var(--tt-primary); text-decoration: none; }
.tp-auth-out { color: var(--tt-primary-dark); border-top: 1px solid var(--tt-line); }

@media (max-width: 991px) {
  /* Collapsed menu: the bar is fixed at 64px, so the dropdown would be clipped
     by the panel — show the items inline instead of in a floating menu. */
  .tp-auth-item { margin: 8px 0 14px; padding: 0 15px; flex-wrap: wrap; }
  .tp-auth-user { position: static; width: 100%; }
  .tp-auth-chip { width: 100%; }
  .tp-auth-menu { display: block; position: static; box-shadow: none; margin-top: 8px; }
}

.tp-hero {
  background: var(--tt-primary);
  padding: 62px 0 122px;
  text-align: center;
  position: relative;
}
.tp-crumb {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 22px;
}
.tp-crumb a { color: rgba(255,255,255,.7); }
.tp-crumb a:hover { color: #fff; }
.tp-crumb span { padding: 0 8px; color: rgba(255,255,255,.45); }
.tp-crumb em { font-style: normal; color: #fff; }
.tp-hero-icon { font-size: 30px; color: rgba(255,255,255,.92); margin-bottom: 16px; line-height: 1; }
.tp-hero h1 {
  color: #fff;
  font-size: 2.65rem;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 14px;
  line-height: 1.15;
}
.tp-hero p {
  color: rgba(255,255,255,.9);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto;
}

/* Tool card lifted up over the hero's lower edge — kills the dead band
   the first pass had between the banner and the widget. */
.tp-tool-section { background: var(--tt-bg-gray); padding-bottom: 72px; }
.tp-card-wrap { margin-top: -86px; position: relative; z-index: 2; }
.tp-card-note {
  max-width: 1000px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 12.5px;
  color: #9a9a9a;
  line-height: 1.6;
}
.tp-card-note .fa { color: var(--tt-primary); margin-right: 6px; }

/* About */
.tp-about { background: #fff; padding: 76px 0; }
.tp-about-inner { max-width: 780px; margin: 0 auto; }
.tp-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tt-primary);
  margin-bottom: 12px;
}
.tp-about h2 {
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--tt-ink);
  margin: 0 0 18px;
  letter-spacing: -.01em;
}
.tp-about p { font-size: 15px; line-height: 1.9; color: var(--tt-ink-2); margin: 0; }

.tp-steps {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--tt-line);
}
.tp-step { display: flex; gap: 13px; flex: 1; align-items: flex-start; }
.tp-step-num {
  flex-shrink: 0;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: rgba(238,80,87,.1);
  color: var(--tt-primary);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tp-step strong { display: block; color: var(--tt-ink); font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.tp-step p { font-size: 13px; line-height: 1.6; color: var(--tt-ink-2); margin: 0; }

/* More tools */
.tp-more { background: var(--tt-bg-gray); padding: 58px 0 66px; border-top: 1px solid var(--tt-line); }
.tp-more-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.tp-more-head h2 { font-size: 1.35rem; font-weight: 600; color: var(--tt-ink); margin: 0; }
.tp-more-all { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tt-primary); }
.tp-more-all:hover { color: var(--tt-primary-dark); }
.tp-more-all .fa { margin-left: 5px; }
.tp-more-grid { display: flex; gap: 30px; flex-wrap: wrap; }
.tp-more-col { flex: 1; min-width: 190px; }
.tp-more-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tt-ink);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tt-line);
}
.tp-more-col h4 .fa { color: var(--tt-primary); margin-right: 7px; }
.tp-more-col ul { list-style: none; margin: 0; padding: 0; }
.tp-more-col li { margin-bottom: 2px; }
.tp-more-col a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  font-size: 13.5px;
  color: #6f6f6f;
  border-radius: 0;
  transition: background .15s, color .15s;
}
.tp-more-col a .fa { width: 15px; text-align: center; color: #bdbdbd; transition: color .15s; }
.tp-more-col a:hover { background: #fff; color: var(--tt-ink); }
.tp-more-col a:hover .fa { color: var(--tt-primary); }
.tp-more-col a.is-current { background: var(--tt-primary); color: #fff; font-weight: 600; }
.tp-more-col a.is-current .fa { color: #fff; }

/* Footer */
.tp-footer { background: var(--tt-navy); padding: 34px 0 30px; }
.tp-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.tp-footer-brand { color: #fff; font-size: 17px; font-weight: 700; }
.tp-footer-brand:hover { color: #fff; opacity: .85; }
.tp-footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.tp-footer-links a { color: rgba(255,255,255,.62); font-size: 13px; }
.tp-footer-links a:hover { color: #fff; }
.tp-footer-copy { margin: 18px 0 0; font-size: 12.5px; color: rgba(255,255,255,.42); text-align: center; }

@media (max-width: 768px) {
  .tp-hero { padding: 46px 0 104px; }
  .tp-hero h1 { font-size: 1.95rem; }
  .tp-hero p { font-size: .96rem; }
  .tp-steps { flex-direction: column; gap: 20px; }
  .tp-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ── un-modal the popup: static block instead of fixed fullscreen ── */
.tool-popup-overlay {
  position: static !important;
  display: block !important;
  inset: auto;
  background: transparent;
  backdrop-filter: none;
  z-index: auto;
  padding: 0;
}
.tool-popup {
  width: 100%;
  height: auto;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 0;
  box-shadow: 0 14px 40px rgba(31,54,70,.13);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The hero right above already names the tool in 2.6rem type, so the
   popup's own header row is pure duplication here — and its inline emoji
   renders as a tofu box in Open Sans. Dropped entirely. */
.tp-header { display: none; }

.tp-body { flex-direction: row; overflow: visible; align-items: stretch; }
.tp-main { padding: 26px; gap: 16px; overflow: visible; min-height: 340px; }
.tp-sidebar {
  width: 316px;
  border-left: 1px solid var(--tt-line);
  background: #fafafa;
  padding: 26px 24px;
  overflow: visible;
  gap: 9px;
}
@media (max-width: 860px) {
  .tp-body { flex-direction: column; }
  .tp-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--tt-line); }
  .tp-main { min-height: 0; }
}

/* ── upload zone ── */
.tp-upload-zone {
  border: 2px dashed #f0b4b7;
  border-radius: 0;
  background: #fcfcfc;
  min-height: 330px;
  padding: 30px 24px;
  gap: 14px;
  text-align: center;
  transition: background .18s, border-color .18s;
}
.tp-upload-zone:hover, .tp-upload-zone.dropover {
  background: #fdf3f3;
  border-color: var(--tt-primary);
}
.tp-upload-icon { font-size: 46px; line-height: 1; }
.tp-upload-text {
  font-family: 'Open Sans', sans-serif;
  color: #8d8d8d;
  font-size: 14.5px;
  line-height: 1.75;
  max-width: 100%;
}
.tp-upload-text span { color: var(--tt-primary); font-weight: 600; }

/* ── sidebar form controls ── */
.tp-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tt-ink);
}
.tp-input, .tp-select {
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  color: var(--tt-ink);
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  padding: 0.6rem 0.75rem;
  height: auto;
}
.tp-input:focus, .tp-select:focus {
  border-color: var(--tt-primary);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(238,80,87,.25);
}

.tp-action-btn {
  background: var(--tt-primary);
  border: 1px solid var(--tt-primary);
  border-radius: 0;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 13px 20px;
}
.tp-action-btn:hover:not(:disabled) { background: var(--tt-primary-dark); border-color: var(--tt-primary-dark); box-shadow: none; }
.tp-action-btn:disabled { opacity: .45; }

.tp-progress { background: #e2e2e2; border-radius: 0; }
.tp-progress-fill { background: var(--tt-primary); border-radius: 0; }

.tp-dl-link {
  border-radius: 0;
  background: var(--tt-navy);
  border: 1px solid var(--tt-navy);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 12px;
}
.tp-dl-link:hover { background: #16262f; }
.tp-import-btn {
  border-radius: 0;
  background: #fff;
  border: 1px solid var(--tt-navy);
  color: var(--tt-navy);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.tp-import-btn:hover { background: var(--tt-navy); color: #fff; }
.tp-status { color: var(--tt-ink-2); font-family: 'Open Sans', sans-serif; }
.tp-error { color: var(--tt-primary-dark); font-family: 'Open Sans', sans-serif; }
.tp-divider { background: var(--tt-line); }
.tp-file-info { background: #fff; border: 1px solid var(--tt-line); border-radius: 0; }
.tp-file-name { color: var(--tt-ink); font-family: 'Open Sans', sans-serif; }
.tp-file-meta { color: var(--tt-ink-2); font-family: 'Open Sans', sans-serif; }
.tp-change-file { color: var(--tt-primary); font-family: 'Open Sans', sans-serif; }
.tp-change-file:hover { color: var(--tt-primary-dark); }

.props-slider { accent-color: var(--tt-primary); }
.props-slider-val { color: var(--tt-ink-2); font-family: 'Open Sans', sans-serif; }

/* ── trim / audio-trim bar ── */
.trim-video-wrap { background: #000; border-radius: 0; }
.trim-ctrl-btn { background: #fff; border: 1px solid #ccc; border-radius: 0; color: var(--tt-ink-2); }
.trim-ctrl-btn:hover { background: var(--tt-bg-gray); color: var(--tt-ink); }
.trim-ctrl-play { background: var(--tt-primary); border-color: var(--tt-primary); color: #fff; }
.trim-ctrl-play:hover { background: var(--tt-primary-dark); }
.trim-bar-track { background: var(--tt-bg-gray); border: 1px solid var(--tt-line); border-radius: 0; }
.trim-bar-range { background: rgba(238,80,87,.18); border-left: 3px solid var(--tt-primary); border-right: 3px solid var(--tt-primary); }
.trim-handle::after { background: var(--tt-primary); }
.trim-playhead { background: rgba(0,0,0,.7); }
.trim-times { color: var(--tt-ink-2); font-family: 'Open Sans', sans-serif; }

/* ── format grid (convert / extract / img-convert) ── */
.fmt-group-label { color: var(--tt-ink-2); font-family: 'Open Sans', sans-serif; font-size: 11px; letter-spacing: .06em; }
.fmt-btn { background: #fff; border: 1px solid #ccc; border-radius: 0; color: var(--tt-ink-2); font-family: 'Open Sans', sans-serif; }
.fmt-btn:hover { background: var(--tt-bg-gray); color: var(--tt-ink); }
.fmt-btn.active { background: var(--tt-primary); border-color: var(--tt-primary); color: #fff; }

/* ── crop tool ── */
.crop-canvas-wrap { background: #000; border-radius: 0; }
.crop-handle { background: #fff; border: 1px solid var(--tt-primary); border-radius: 0; }
.crop-ar-btn { background: #fff; border: 1px solid #ccc; border-radius: 0; color: var(--tt-ink-2); font-family: 'Open Sans', sans-serif; }
.crop-ar-btn:hover { background: var(--tt-bg-gray); color: var(--tt-ink); }
.crop-ar-btn.active { background: var(--tt-primary); border-color: var(--tt-primary); color: #fff; }
.crop-num-label { color: var(--tt-ink-2); font-family: 'Open Sans', sans-serif; }
.crop-num-input { background: #fff; border: 1px solid #ccc; border-radius: 0; color: var(--tt-ink); font-family: 'Open Sans', sans-serif; }
.crop-num-input:focus { border-color: var(--tt-primary); }
.crop-reset-link { color: var(--tt-primary); font-family: 'Open Sans', sans-serif; }
.crop-play-btn { background: rgba(0,0,0,.6); }

/* ── compress file-info ── */
.compress-file-info { background: #fff; border: 1px solid var(--tt-line); border-radius: 0; }
.compress-file-name { color: var(--tt-ink); font-family: 'Open Sans', sans-serif; }
.compress-file-meta { color: var(--tt-ink-2); font-family: 'Open Sans', sans-serif; }
.compress-qual-labels { color: var(--tt-ink-2); font-family: 'Open Sans', sans-serif; }

/* ─────────────────────────────────────────────────────────────
   HUB PAGES (/tools/ and /ai/) — search, category filter, card
   grid and FAQ. Defined here rather than per-hub so both share
   one definition.
   ───────────────────────────────────────────────────────────── */

/* On a tool page .tp-card-wrap lifts a single card over the hero's lower edge.
   A hub lifts a whole grid, so the toolbar is what lands in the red band —
   make it the floating panel and let the groups start cleanly below it,
   otherwise the first category heading collides with the colour boundary. */
.hub-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #e9e9e9;
  box-shadow: 0 14px 40px rgba(31,54,70,.13);
  padding: 20px 22px;
  margin-bottom: 40px;
}
.hub-search-wrap { position: relative; flex: 1 1 280px; max-width: 420px; }
.hub-search-wrap .fa {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #bdbdbd; font-size: 14px; pointer-events: none;
}
.hub-search {
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13.5px;
  color: var(--tt-ink);
  padding: 12px 14px 12px 38px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.hub-search:focus { border-color: var(--tt-primary); box-shadow: 0 0 0 .2rem rgba(238,80,87,.18); }

.hub-cats { display: flex; gap: 0; flex-wrap: wrap; }
.hub-cat {
  background: #fff;
  border: 1px solid #ddd;
  border-left-width: 0;
  color: #7d7d7d;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 11px 18px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.hub-cat:first-child { border-left-width: 1px; }
.hub-cat:hover { background: #f4f4f4; color: var(--tt-ink); }
.hub-cat.is-on { background: var(--tt-primary); border-color: var(--tt-primary); color: #fff; }

.hub-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 34px 0 18px;
}
.hub-group:first-child { margin-top: 0; }
.hub-group h3 {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tt-ink); margin: 0; white-space: nowrap;
}
.hub-group .fa { color: var(--tt-primary); }
.hub-group-rule { flex: 1; height: 1px; background: var(--tt-line); }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 20px;
}
.hub-card {
  background: #fff;
  border: 1px solid #e9e9e9;
  box-shadow: 0 8px 26px rgba(31,54,70,.07);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.hub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(31,54,70,.15);
  border-color: #ddd;
}
.hub-ico {
  width: 46px; height: 46px;
  background: rgba(238,80,87,.1);
  color: var(--tt-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
}
.hub-card h3 { font-size: 1rem; font-weight: 600; color: var(--tt-ink); margin: 3px 0 0; }
.hub-card p { font-size: 13px; line-height: 1.7; color: var(--tt-ink-2); margin: 0; flex: 1; }
.hub-go {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tt-primary); margin-top: 4px;
}
.hub-card:hover .hub-go { color: var(--tt-primary-dark); }
.hub-card.is-off { background: #fbfbfb; box-shadow: 0 8px 26px rgba(31,54,70,.04); cursor: default; }
.hub-card.is-off:hover { transform: none; box-shadow: 0 8px 26px rgba(31,54,70,.04); }
.hub-card.is-off .hub-ico { background: #efefef; color: #b6b6b6; }
.hub-card.is-off h3 { color: #9a9a9a; }
.hub-card.is-off p { color: #aaa; }
.hub-card.is-off .hub-go { color: #b6b6b6; }
.hub-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 9px; background: #f0f0f0; color: #999;
  align-self: flex-start;
}
.hub-empty {
  display: none; padding: 44px 0; text-align: center;
  font-size: 14px; color: #a2a2a2;
}
.hub-empty.on { display: block; }

/* FAQ — light theme accordion */
.tp-faq { background: #fff; padding: 72px 0; border-top: 1px solid var(--tt-line); }
.tp-faq-inner { max-width: 780px; margin: 0 auto; }
.tp-faq-list { border: 1px solid var(--tt-line); }
.tp-faq-item { border-bottom: 1px solid var(--tt-line); }
.tp-faq-item:last-child { border-bottom: none; }
.tp-faq-q {
  width: 100%; background: none; border: none; text-align: left;
  padding: 18px 22px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; cursor: pointer;
  font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--tt-ink);
}
.tp-faq-q:hover { background: #fafafa; }
.tp-faq-q .fa { color: var(--tt-primary); font-size: 13px; transition: transform .25s; flex-shrink: 0; }
.tp-faq-item.open .tp-faq-q .fa { transform: rotate(180deg); }
.tp-faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.tp-faq-item.open .tp-faq-a { max-height: 420px; }
.tp-faq-a-inner { padding: 0 22px 20px; font-size: 13.5px; line-height: 1.85; color: var(--tt-ink-2); }
.tp-faq-a-inner a { color: var(--tt-primary); }

/* ─────────────────────────────────────────────────────────────
   USER-AUTHORED TOOLS + ADMIN
   ───────────────────────────────────────────────────────────── */
.hub-actions { display: flex; gap: 0; flex-wrap: wrap; }
.hub-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #ddd; border-left-width: 0;
  color: #6f6f6f; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 11px 16px; cursor: pointer; transition: all .15s;
}
.hub-btn:first-child { border-left-width: 1px; }
.hub-btn:hover { background: #f4f4f4; color: var(--tt-ink); }
.hub-btn .fa { color: var(--tt-primary); }
.hub-btn.primary { background: var(--tt-primary); border-color: var(--tt-primary); color: #fff; }
.hub-btn.primary:hover { background: var(--tt-primary-dark); color: #fff; }
.hub-btn.primary .fa { color: #fff; }

.ut-panel {
  background: #fff; border: 1px solid #e9e9e9;
  box-shadow: 0 8px 26px rgba(31,54,70,.07); padding: 26px 24px; margin-bottom: 20px;
}
.ut-panel h3 { font-size: 1.05rem; font-weight: 600; color: var(--tt-ink); margin: 0 0 6px; }
.ut-panel .ut-by { font-size: 12px; color: #a8a8a8; margin-bottom: 10px; }
.ut-panel p { font-size: 13.5px; line-height: 1.7; color: var(--tt-ink-2); margin: 0 0 14px; }
.ut-cmd {
  background: #fafafa; border: 1px solid var(--tt-line);
  padding: 11px 13px; font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px; color: #555; word-break: break-all; line-height: 1.7; margin-bottom: 14px;
}
.ut-run-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.ut-field { flex: 1 1 220px; min-width: 0; }
.ut-field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tt-ink); margin-bottom: 6px; }
.ut-status { font-size: 12.5px; color: #8d8d8d; margin-top: 10px; }
.ut-err { font-size: 12.5px; color: var(--tt-primary-dark); margin-top: 10px; }

.ut-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 9px; }
.ut-badge.pending  { background: #fff4e0; color: #b57d12; }
.ut-badge.approved { background: #e6f6ec; color: #1f8a4c; }
.ut-badge.rejected { background: #fdeaea; color: var(--tt-primary-dark); }

.ut-inputs-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
/* Each row is [label field][accept field][remove]. The fields carry their own
   caption above the control, so the row aligns on the bottom edge rather than
   the centre — otherwise the remove button floats up beside the captions. */
.ut-input-row { display: flex; gap: 10px; align-items: flex-end; }
.ut-input-row > .ut-field { flex: 1 1 160px; }
.ut-input-row > .ut-field:last-of-type { flex: 0 1 160px; }
.ut-remove {
  background: none; border: 1px solid #ddd; color: #b0b0b0;
  width: 38px; height: 38px; line-height: 1; font-size: 18px;
  cursor: pointer; flex-shrink: 0;
}
.ut-remove:hover { border-color: var(--tt-primary); color: var(--tt-primary); }

.ut-help { background: #fafafa; border-left: 3px solid var(--tt-primary);
  padding: 14px 16px; font-size: 12.5px; line-height: 1.8; color: #6f6f6f; margin-bottom: 18px; }
.ut-help code { background: #fff; border: 1px solid var(--tt-line); padding: 1px 6px;
  font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11.5px; color: var(--tt-primary); }

/* admin */
.ad-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 32px; }
.ad-stat { background: #fff; border: 1px solid #e9e9e9; padding: 18px 20px; }
.ad-stat .n { font-size: 1.8rem; font-weight: 600; color: var(--tt-ink); line-height: 1.1; }
.ad-stat .l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #a8a8a8; margin-top: 6px; }
.ad-stat.alert .n { color: var(--tt-primary); }
.ad-empty { padding: 40px 0; text-align: center; color: #a8a8a8; font-size: 14px; }

/* Private / public chooser on /tools/publish/, and the matching badge. */
.ut-vis { display: flex; flex-direction: column; gap: 10px; }
.ut-vis-opt {
  display: flex; align-items: flex-start; gap: 11px; margin: 0;
  border: 1px solid #ddd; background: #fff; padding: 13px 15px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ut-vis-opt:hover { background: #fafafa; }
.ut-vis-opt input { accent-color: var(--tt-primary); margin-top: 2px; flex-shrink: 0; }
/* These options are <label>s inside a .ut-field, and that rule uppercases its
   labels for the little field captions. Prose must opt out. */
.ut-vis-opt, .ut-vis-opt span, .ut-vis-opt b {
  text-transform: none; letter-spacing: normal;
}
.ut-vis-opt span { font-size: 12.5px; line-height: 1.65; color: #7d7d7d; }
.ut-vis-opt b {
  display: block; font-size: 13px; font-weight: 600; color: var(--tt-ink);
  margin-bottom: 2px;
}
/* :has() styles the label from its own checked radio; browsers without it
   simply show the plain border, which is still perfectly usable. */
.ut-vis-opt:has(input:checked) { border-color: var(--tt-primary); background: #fdf5f5; }

.ut-badge.private { background: #eef2f7; color: #46617a; }
.ut-tool-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }