/* ==========================================================================
   TOOLZ — shared design system
   Workbench / pegboard concept: dark charcoal surfaces, amber work-lamp
   accent, teal indicator-light accent, mono "drawer tag" labels.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg: #0f1115;
  --bg-soft: #14171d;
  --surface: #1a1d24;
  --surface-2: #20242c;
  --border: #2b303a;
  --border-soft: #22262f;

  --text: #edeff3;
  --text-muted: #9299a8;
  --text-faint: #5c6373;

  --accent: #f2a93b;       /* work-lamp amber */
  --accent-dim: #c98a2c;
  --accent-ink: #241a08;   /* text-on-accent */
  --accent-2: #33c6b0;     /* indicator teal */
  --accent-2-dim: #24988a;

  --danger: #e2604f;
  --success: #4cc985;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -12px rgba(0,0,0,.55);
  --shadow-pop: 0 20px 45px -18px rgba(0,0,0,.65);

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1100px;
}

*{ box-sizing: border-box; }

html{ background: var(--bg); }

body.hub-body,
body.tool-body{
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,.05) 1.2px, transparent 0) 0 0/22px 22px,
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

/* ---------- top bar ---------- */
.hub-topbar{
  position: sticky; top:0; z-index: 40;
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px;
  padding: 16px clamp(20px, 4vw, 48px);
  background: rgba(15,17,21,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.hub-brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:18px; letter-spacing:.01em; }
.hub-brand-mark{
  width:30px; height:30px; border-radius: 8px;
  background: linear-gradient(155deg, var(--accent), var(--accent-dim));
  display:flex; align-items:center; justify-content:center;
  color: var(--accent-ink); font-family: var(--font-mono); font-weight:700; font-size:13px;
  box-shadow: var(--shadow-card);
}
.hub-brand-sub{ color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; font-weight:500; }

.hub-search{
  flex: 1; max-width: 360px;
  display:flex; align-items:center; gap:8px;
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-md); padding: 9px 14px;
  color: var(--text-muted); font-family: var(--font-mono); font-size: 13px;
}
.hub-search input{
  all: unset; flex:1; color: var(--text); font-family: var(--font-mono); font-size: 13px;
}
.hub-search input::placeholder{ color: var(--text-faint); }

/* ---------- hero ---------- */
.hub-hero{
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px,7vw,84px) clamp(20px,4vw,48px) 20px;
}
.hub-eyebrow{
  font-family: var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent-2); display:flex; align-items:center; gap:8px; margin-bottom:18px;
}
.hub-eyebrow::before{ content:''; width:16px; height:1px; background: var(--accent-2); display:inline-block; }
.hub-hero h1{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 5.2vw, 58px); line-height: 1.04; letter-spacing: -.01em;
  margin: 0 0 18px;
  max-width: 16ch;
}
.hub-hero h1 em{ font-style: normal; color: var(--accent); }
.hub-hero p{ color: var(--text-muted); font-size: 17px; line-height:1.6; max-width: 54ch; margin: 0 0 28px; }

.hub-stats{ display:flex; gap: 28px; flex-wrap: wrap; margin-bottom: 8px; }
.hub-stat b{ display:block; font-family: var(--font-display); font-size: 26px; color: var(--text); }
.hub-stat span{ display:block; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing:.06em; text-transform:uppercase; margin-top:2px; }

/* ---------- category chips ---------- */
.hub-chips{ display:flex; flex-wrap:wrap; gap:8px; max-width: var(--maxw); margin: 8px auto 0; padding: 0 clamp(20px,4vw,48px); }
.hub-chip{
  font-family: var(--font-mono); font-size:12px; padding: 7px 13px;
  border:1px solid var(--border); border-radius: 999px; color: var(--text-muted);
  background: var(--surface); cursor:pointer; transition: all .15s ease;
}
.hub-chip:hover{ border-color: var(--accent-2); color: var(--text); }
.hub-chip.active{ background: var(--accent-2); border-color: var(--accent-2); color:#052623; font-weight:600; }

/* ---------- category sections + grid ---------- */
.hub-main{ max-width: var(--maxw); margin: 0 auto; padding: 20px clamp(20px,4vw,48px) 100px; }
.hub-section{ margin-top: 46px; }
.hub-section-head{ display:flex; align-items:baseline; gap:12px; margin-bottom: 16px; }
.hub-section-tag{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.1em;
  color: var(--accent); background: rgba(242,169,59,.1); border:1px solid rgba(242,169,59,.35);
  padding: 3px 9px; border-radius: 5px; font-weight:600;
}
.hub-section-head h2{ font-family: var(--font-display); font-size: 20px; margin:0; font-weight:600; }
.hub-section-head .hub-count{ font-family: var(--font-mono); font-size:12px; color: var(--text-faint); }

.hub-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}

.tool-card{
  display:flex; flex-direction:column; justify-content:space-between; gap: 22px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; min-height: 132px;
  box-shadow: var(--shadow-card);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
  position: relative; overflow:hidden;
}
.tool-card::after{
  content:''; position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(140deg, rgba(242,169,59,0), rgba(242,169,59,0));
  transition: background .2s ease;
  pointer-events:none;
}
.tool-card:hover{ transform: translateY(-3px); border-color: rgba(242,169,59,.5); background: var(--surface-2); }
.tool-card:hover .tool-card-arrow{ transform: translate(3px,-3px); color: var(--accent); }

.tool-card-tag{ font-family: var(--font-mono); font-size:11px; color: var(--text-faint); letter-spacing:.06em; }
.tool-card-name{ font-family: var(--font-display); font-weight:600; font-size:16px; margin-top:4px; }
.tool-card-desc{ font-family: var(--font-body); font-size:13px; color: var(--text-muted); line-height:1.5; margin-top:6px; }
.tool-card-foot{ display:flex; align-items:center; justify-content:space-between; }
.tool-card-cat{ font-family: var(--font-mono); font-size:10px; color: var(--accent-2); text-transform:uppercase; letter-spacing:.08em; }
.tool-card-arrow{ color: var(--text-faint); font-size: 16px; transition: all .16s ease; }

.hub-footer{
  border-top:1px solid var(--border-soft); padding: 28px clamp(20px,4vw,48px);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color: var(--text-faint); font-family: var(--font-mono); font-size:12px;
  max-width: var(--maxw); margin: 0 auto;
}

/* ==========================================================================
   TOOL PAGE CHROME
   ========================================================================== */
.tool-topbar{
  position: sticky; top:0; z-index: 40;
  display:flex; align-items:center; gap:14px;
  padding: 14px clamp(20px,4vw,48px);
  background: rgba(15,17,21,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono); font-size: 13px;
}
.tool-back{ display:flex; align-items:center; gap:8px; color: var(--text-muted); }
.tool-back:hover{ color: var(--accent); }
.tool-crumb{ color: var(--text-faint); }
.tool-crumb b{ color: var(--text-muted); font-weight:500; }

.tool-hero{ max-width: 760px; margin: 0 auto; padding: 44px clamp(20px,4vw,48px) 8px; text-align:center; }
.tool-hero .tool-card-tag{ display:inline-block; margin-bottom: 14px; }
.tool-hero h1{ font-family: var(--font-display); font-size: clamp(28px,4vw,38px); margin:0 0 10px; font-weight:700; }
.tool-hero p{ color: var(--text-muted); font-size:15px; max-width: 56ch; margin: 0 auto; line-height:1.6; }

.tool-stage{
  width:min(1240px, 100%); max-width:none; margin:30px auto 90px; padding:0 clamp(20px,4vw,48px);
}
.tool-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(22px,4vw,40px);
  box-shadow: var(--shadow-pop);
}

/* Image, PDF and batch tools need room for their controls and result previews. */
.tool-hero{ max-width:1100px; }
.tool-flow{ width:100%; max-width:none !important; }
.tool-panel .results-panel,
.tool-panel #previewContainer,
.tool-panel #outputContainer,
.tool-panel #imagePreviews{
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important;
}
.tool-panel .thumb-card,
.tool-panel .imageContainer{ min-width:0; }
.tool-panel .thumb-card>img,
.tool-panel .imageContainer img,
.tool-panel #previewContainer img,
.tool-panel #outputContainer img{
  width:100% !important; height:170px !important; object-fit:cover; cursor:zoom-in;
}
.tool-image-preview{ width:100%; margin-top:8px; }
.tool-preview-modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:24px; background:rgba(4,7,10,.86); backdrop-filter:blur(8px); }
.tool-preview-modal[hidden]{ display:none; }
.tool-preview-dialog{ position:relative; width:min(1200px,100%); max-height:calc(100vh - 48px); display:grid; place-items:center; }
.tool-preview-dialog img{ max-width:100%; max-height:calc(100vh - 92px); object-fit:contain; background:#fff; border-radius:10px; }
.tool-preview-close{ position:absolute; top:12px; right:12px; z-index:1; width:40px; height:40px; padding:0!important; border-radius:50%!important; }

.tool-footer{
  border-top:1px solid var(--border-soft); padding: 26px clamp(20px,4vw,48px) 40px;
  text-align:center; color: var(--text-faint); font-family: var(--font-mono); font-size:12px;
}
.tool-footer a{ color: var(--accent-2); }

/* ==========================================================================
   OVERRIDE LAYER — re-skins each tool's original markup to the shared
   palette regardless of its original inline CSS. Loaded last, !important.

   NOTE: every selector below excludes .tox-tinymce (TinyMCE's own UI, used
   by the Text Editor tool). TinyMCE ships a clean, professional skin of
   its own — we must not force our button/color rules onto its toolbar,
   menus, or dialogs, or it turns into an unreadable mess of accent colors.
   ========================================================================== */
.tool-panel:not(.tox-tinymce, .tox-tinymce *, .jodit, .jodit *),
.tool-panel *:not(.tox-tinymce, .tox-tinymce *, .jodit, .jodit *){
  font-family: var(--font-body) !important;
}
.tool-panel h1:not(.tox-tinymce *, .jodit *), .tool-panel h2:not(.tox-tinymce *, .jodit *),
.tool-panel h3:not(.tox-tinymce *, .jodit *), .tool-panel h4:not(.tox-tinymce *, .jodit *){
  font-family: var(--font-display) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}
.tool-panel p:not(.tox-tinymce *, .jodit *), .tool-panel label:not(.tox-tinymce *, .jodit *),
.tool-panel span:not(.tox-tinymce *, .jodit *), .tool-panel li:not(.tox-tinymce *, .jodit *),
.tool-panel td:not(.tox-tinymce *, .jodit *), .tool-panel th:not(.tox-tinymce *, .jodit *){
  color: var(--text-muted) !important;
}
.tool-panel a:not(.tox-tinymce *, .jodit *){ color: var(--accent-2) !important; }

.tool-panel:not(.tox-tinymce *, .jodit *), .tool-panel div:not(.tox-tinymce, .tox-tinymce *, .jodit, .jodit *),
.tool-panel section:not(.tox-tinymce *, .jodit *), .tool-panel main:not(.tox-tinymce *, .jodit *){
  background-image: none !important;
}
.tool-panel > *:not(.tox-tinymce), .tool-panel .container:not(.tox-tinymce *, .jodit *),
.tool-panel .row > div:not(.tox-tinymce *, .jodit *), .tool-panel .card:not(.tox-tinymce *, .jodit *),
.tool-panel .box:not(.tox-tinymce *, .jodit *), .tool-panel .wrapper:not(.tox-tinymce *, .jodit *),
.tool-panel .app:not(.tox-tinymce *, .jodit *), .tool-panel .panel:not(.tox-tinymce *, .jodit *){
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: var(--border) !important;
}

.tool-panel input:not(.tox-tinymce *, .jodit *), .tool-panel textarea:not(.tox-tinymce *, .jodit *), .tool-panel select:not(.tox-tinymce *, .jodit *){
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  outline: none !important;
  box-shadow: none !important;
  width: auto;
  transition: border-color .15s ease;
}
.tool-panel input:not(.tox-tinymce *, .jodit *):focus, .tool-panel textarea:not(.tox-tinymce *, .jodit *):focus, .tool-panel select:not(.tox-tinymce *, .jodit *):focus{
  border-color: var(--accent-2) !important;
}
.tool-panel input:not(.tox-tinymce *, .jodit *)::placeholder, .tool-panel textarea:not(.tox-tinymce *, .jodit *)::placeholder{ color: var(--text-faint) !important; }
.tool-panel input[type="checkbox"]:not(.tox-tinymce *, .jodit *), .tool-panel input[type="radio"]:not(.tox-tinymce *, .jodit *){ width:auto !important; accent-color: var(--accent); }
.tool-panel input[type="range"]:not(.tox-tinymce *, .jodit *){ accent-color: var(--accent); background: none !important; border:none !important; padding:0 !important; }
.tool-panel input[type="color"]:not(.tox-tinymce *, .jodit *){ padding:2px !important; height:40px; }

.tool-panel button:not(.tox-tinymce *, .jodit *),
.tool-panel .btn:not(.tox-tinymce *, .jodit *),
.tool-panel .button:not(.tox-tinymce *, .jodit *),
.tool-panel input[type="button"]:not(.tox-tinymce *, .jodit *),
.tool-panel input[type="submit"]:not(.tox-tinymce *, .jodit *),
.tool-panel a.button:not(.tox-tinymce *, .jodit *){
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 18px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform .12s ease, background .15s ease !important;
  text-shadow: none !important;
}
.tool-panel button:not(.tox-tinymce *, .jodit *):hover,
.tool-panel .btn:not(.tox-tinymce *, .jodit *):hover,
.tool-panel .button:not(.tox-tinymce *, .jodit *):hover,
.tool-panel input[type="button"]:not(.tox-tinymce *, .jodit *):hover,
.tool-panel input[type="submit"]:not(.tox-tinymce *, .jodit *):hover,
.tool-panel a.button:not(.tox-tinymce *, .jodit *):hover{
  background: var(--accent-dim) !important;
  transform: translateY(-1px);
}
.tool-panel button:not(.tox-tinymce *, .jodit *):disabled{ opacity:.5 !important; cursor:not-allowed !important; }

/* Deliberate secondary accent — add class="btn-teal" to a button when a page
   genuinely has two equally-weighted actions (e.g. Encode / Decode) that
   benefit from a visual distinction. Never applied automatically. */
.tool-panel button.btn-teal:not(.tox-tinymce *, .jodit *){
  background: var(--accent-2) !important; color:#052623 !important;
}
.tool-panel button.btn-teal:not(.tox-tinymce *, .jodit *):hover{ background: var(--accent-2-dim) !important; }

.tool-panel table:not(.tox-tinymce *, .jodit *){ border-collapse: collapse; width:100%; }
.tool-panel table:not(.tox-tinymce *, .jodit *), .tool-panel th:not(.tox-tinymce *, .jodit *), .tool-panel td:not(.tox-tinymce *, .jodit *){ border: 1px solid var(--border) !important; }
.tool-panel th:not(.tox-tinymce *, .jodit *), .tool-panel td:not(.tox-tinymce *, .jodit *){ padding: 8px 10px !important; }

.tool-panel hr{ border-color: var(--border) !important; }
.tool-panel code, .tool-panel pre{
  background: var(--bg-soft) !important; color: var(--accent-2) !important;
  font-family: var(--font-mono) !important; border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
}
.tool-panel ::-webkit-scrollbar{ height:8px; width:8px; }
.tool-panel ::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 8px; }

/* ---------- toast notification (replaces blocking alert() popups) ---------- */
.tool-toast{
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 200;
}
.tool-toast.visible{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* results / output emphasis text often uses inline color styles set via JS
   (e.g. element.style.color = 'green'); neutralize the common ones */
.tool-panel [style*="color: green"], .tool-panel [style*="color:green"]{ color: var(--success) !important; }
.tool-panel [style*="color: red"], .tool-panel [style*="color:red"]{ color: var(--danger) !important; }
.tool-panel [style*="color: purple"], .tool-panel [style*="color:Purple"], .tool-panel [style*="color:purple"]{ color: var(--accent-2) !important; }
.tool-panel [style*="background-color: white"], .tool-panel [style*="background-color:#fff"], .tool-panel [style*="background-color: #fff"]{
  background-color: var(--bg-soft) !important;
}

/* per-tool wrapper classes/ids that ship their own light background —
   force them onto the shared surface color regardless of source order */
.tool-panel .age-calculator,
.tool-panel #converter,
.tool-panel .main-container,
.tool-panel .hash-generator-container,
.tool-panel .url-shortener,
.tool-panel #screenRecorderContainer,
.tool-panel .editor,
.tool-panel .BG,
.tool-panel .hex-popup{
  background: var(--bg-soft) !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.tool-panel .age-calculator *{ color: var(--text) !important; }

/* per-tool "button" elements that aren't <button>/.btn (labels, anchors) */
.tool-panel .uploadButton,
.tool-panel .downloadButton,
.tool-panel .downloadButtonSingle,
.tool-panel .convertButton,
.tool-panel .download-all-btn,
.tool-panel .downloadAllButton,
.tool-panel label.uploadButton{
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  align-items: center;
  gap: 6px;
}
/* only set the flex layout when the element isn't hidden by the tool's own
   inline style (initial state before conversion finishes) — must NOT be
   !important or it would force these visible before results are ready */
.tool-panel .uploadButton, .tool-panel .downloadButton, .tool-panel .downloadButtonSingle,
.tool-panel .convertButton, .tool-panel .download-all-btn, .tool-panel .downloadAllButton{
  display: inline-flex;
}
.tool-panel .uploadButton:hover,
.tool-panel .downloadButton:hover,
.tool-panel .downloadButtonSingle:hover,
.tool-panel .convertButton:hover,
.tool-panel .download-all-btn:hover,
.tool-panel .downloadAllButton:hover{
  background: var(--accent-dim) !important;
}

/* image preview thumbnails keep a light backing so transparency is visible,
   but get a border so they don't look like a layout bug on the dark theme.
   Scoped to <img class="thumbnail"> specifically (how the PDF tools use it)
   so it can't collide with an unrelated element that happens to share the
   class name "thumbnail" for something else entirely. */
.tool-panel img.thumbnail{
  border: 1px solid var(--border) !important;
  background: #fff !important;
}

@media (max-width: 640px){
  .hub-search{ display:none; }
  .hub-stats{ gap:18px; }
}

/* ==========================================================================
   TOOL LAYOUT COMPONENTS — real structural pieces used to rebuild each
   tool's markup (not just recoloring). Generic + reused across tool types.
   ========================================================================== */

.tool-flow{ display:flex; flex-direction:column; gap:22px; }
.tool-note{ color: var(--text-muted); font-size:14px; line-height:1.6; margin:-6px 0 2px; }

/* ---- dropzone (file pickers) ---- */
label.dropzone, .dropzone{
  position: relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  text-align:center;
  padding: 34px 20px;
  border: 1.5px dashed var(--border) !important;
  border-radius: var(--radius-md);
  background: var(--bg-soft) !important;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
label.dropzone:hover, .dropzone:hover{ border-color: var(--accent-2) !important; background: rgba(51,198,176,.06) !important; }
label.dropzone.drag, .dropzone.drag{ border-color: var(--accent) !important; background: rgba(242,169,59,.08) !important; }
.dropzone-icon{ font-size:22px; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--surface-2); color: var(--accent); margin-bottom: 4px; }
.dropzone-text{ font-weight:600 !important; color: var(--text) !important; font-size:14.5px !important; }
.dropzone-hint{ font-family: var(--font-mono) !important; font-size:11.5px !important; color: var(--text-faint) !important; letter-spacing:.02em; }
.dropzone input[type="file"], label.dropzone input[type="file"]{
  position:absolute !important; inset:0; width:100% !important; height:100%; opacity:0 !important;
  cursor:pointer; padding:0 !important; border:none !important;
}

/* ---- toolbar (primary action controls) ---- */
.toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.toolbar .field-inline{ display:flex; flex-direction:column; gap:5px; font-size:12px; }
.toolbar .field-inline label{ font-family: var(--font-mono) !important; font-size:11px !important; color: var(--text-faint) !important; text-transform:uppercase; letter-spacing:.05em; }

/* ---- results / preview panel ---- */
.results-panel{
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-md);
  background: var(--bg-soft) !important;
  min-height: 64px;
  padding: 16px !important;
  display:flex; flex-wrap:wrap; gap:12px; align-content:flex-start;
}
.results-panel:empty{ display:flex; align-items:center; justify-content:center; padding: 30px !important; }
.results-panel:empty::before{
  content: attr(data-empty);
  font-family: var(--font-mono); font-size:12px; color: var(--text-faint);
}
.results-panel img, .results-panel canvas{
  max-width: 100%;
  border-radius: var(--radius-sm) !important;
}

/* ---- action bar (download / secondary actions after results) ---- */
.action-bar{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  padding-top: 4px;
}
.action-bar:empty{ display:none; }

/* ---- split panel (generator tools: input | live output) ---- */
.split-panel{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items:start; }
.split-panel-col{ display:flex; flex-direction:column; gap:14px; }
.split-panel-label{
  font-family: var(--font-mono) !important; font-size:11px !important; letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent-2) !important; margin: 0 0 -4px;
}
@media (max-width: 680px){ .split-panel{ grid-template-columns: 1fr; } }

/* ---- data / report panel (checkers & analyzers) ---- */
.data-panel{
  border: 1px solid var(--border-soft) !important;
  background: var(--bg-soft) !important;
  border-radius: var(--radius-md);
  padding: 18px !important;
  min-height: 40px;
}
.data-panel:empty{ display:none; }

.field-group{ display:flex; flex-direction:column; gap:6px; }
.field-group label{
  font-family: var(--font-mono) !important; font-size:11px !important; color: var(--text-faint) !important;
  text-transform:uppercase; letter-spacing:.05em;
}
.field-group input, .field-group select, .field-group textarea{ width:100% !important; }

.tool-panel form{ display:flex; flex-direction:column; gap:16px; }

/* toolbar rows that hold radio/checkbox groups (screen recorder audio source, etc.) */
.toolbar label:has(input[type="radio"]), .toolbar label:has(input[type="checkbox"]){
  display:flex !important; align-items:center; gap:6px;
  font-family: var(--font-body) !important; font-size:13px !important; color: var(--text-muted) !important;
  text-transform:none; letter-spacing:normal; background:none;
}

/* video previews inside results panels (screen recorder) */
.results-panel video{
  max-width: 100%; border-radius: var(--radius-sm); background:#000;
}

/* case-button / icon-button grids (text case converter) */
.toolbar.case-buttons, .action-bar.icon-buttons{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}