/* Unified ToolStack navigation and category workbench geometry */
.ts-app .content{width:100%;min-width:0}
.ts-app .content>.crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 auto 14px!important;max-width:1200px;width:100%;padding:0!important}
.ts-app .ts-back-link{display:inline-flex!important;align-items:center;min-height:38px;padding:8px 13px!important;background:#172431!important;border:1px solid #385165!important;border-radius:9px!important;text-decoration:none!important;color:#9cebd0!important;font-size:13px!important;font-weight:650!important;line-height:1.2!important;margin:0!important}
.ts-app .ts-back-link:hover,.ts-app .ts-back-link:focus-visible{background:#234436!important;border-color:#63dfaa!important;color:#fff!important}
.ts-app .legacy-tool-content:has(.dw-app){width:100%;max-width:1200px!important;margin:0 auto!important;padding:0!important}
.ts-app .dw-app{width:100%;max-width:1200px!important;margin:0 auto!important}
.ts-app .dw-intro{margin:0 0 16px!important;padding:0!important;max-width:none!important}
.ts-app .dw-intro h1{font-size:clamp(2rem,4vw,2.7rem);font-weight:750;line-height:1.15;margin:7px 0 9px}
.ts-app .dw-intro p{margin:0;color:#a8bdd0;max-width:850px}
.ts-app .dw-ad{height:76px;margin:0 0 16px;border:1px dashed #395165;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#92a9bd;background:#0d151e;font-size:11px;letter-spacing:.12em}
.ts-app .dw-surface{width:100%;background:#151f2b;border:1px solid #354656;border-radius:14px;overflow:hidden}
.ts-app .dw-surface .dw-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:15px;background:#151f2b;border-bottom:1px solid #354656}
.ts-app .dw-surface .dw-editors{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)}
.ts-app .dw-surface .dw-bottom{border-top:1px solid #354656;padding:12px 16px}
.ts-app .dw-surface .wb-shell{margin:0!important;border:0!important;border-radius:0!important;width:100%;max-width:none!important}

.ts-app .dw-surface .wb-grid{margin:0!important}
.ts-app .dw-surface .ts-text-surface{border:0!important;max-width:none!important;width:100%;margin:0!important}
.ts-app .dw-surface .ts-text-guide{display:none}
@media(max-width:800px){.ts-app .dw-surface .dw-editors{grid-template-columns:minmax(0,1fr)}.ts-app .content>.crumb{padding:0 4px!important}}
/* Normalize older Text and Workbench variants without changing their JS hooks */
.ts-app .dw-app.ts-text-workbench{max-width:1200px!important;width:100%!important;margin:0 auto!important}
.ts-app .dw-app .ts-text-intro{margin:0!important}
.ts-app .dw-app .ts-text-surface{padding:0!important;border-radius:0!important;box-shadow:none!important}
.ts-app .dw-app .ts-text-surface .ts-text-editors{width:100%}

.ts-app .dw-app .wb-shell textarea{min-height:240px}
.ts-app .legacy-tool-content:has(.dw-app)>.dw-app{margin-top:0!important}
.ts-app .legacy-tool-content:has(.dw-app) .ts-tool-title{margin-top:0}

/* Unified DOM hierarchy: main.content > crumb + legacy-tool-content > dw-app > intro/ad/surface */
.ts-app .legacy-tool-content > .dw-app { width:100%; max-width:1200px; margin:0 auto; }
.ts-app .dw-app > .dw-intro { width:100%; margin:0 0 16px!important; }
.ts-app .dw-app > .dw-ad { width:100%; flex-shrink:0; }
.ts-app .dw-app > .dw-surface { width:100%; min-width:0; }
/* Existing converters have their own panel UI. Avoid forcing a second framed box around it. */
.ts-app .dw-app > .dw-surface:has(> .converter),
.ts-app .dw-app > .dw-surface:has(> .tool-panel),
.ts-app .dw-app > .dw-surface:has(> .conversion-grid),
.ts-app .dw-app > .dw-surface:has(> .encryption-grid),
.ts-app .dw-app > .dw-surface:has(> .tool-grid) { overflow:visible; }
.ts-app .dw-app > .dw-surface > .converter { margin-top:0!important; }
.ts-app .dw-app > .dw-surface > .wb-shell { margin-top:0!important; }
.ts-app .dw-app > .dw-surface > .ts-top-ad { display:none; }

/* Homepage maintains its card grid within the same shared wrapper. */
.ts-app .dw-surface:has(> #tool-categories),
.ts-app .dw-surface:has(> section#tool-categories) {overflow:visible;}
.ts-app main.content > .crumb:empty {display:none;}
.ts-app main.content .dw-intro > section {margin-top:0;}
.ts-app .dw-ad:has(> .ad-placeholder) {height:auto;min-height:76px;}
.ts-app .dw-ad > .ad-placeholder {width:100%;margin:0!important;}

/* Consistent inset for every tool surface. Workbench child panels retain their own spacing. */

.ts-app .dw-app > .dw-surface:has(> .wb-shell),
.ts-app .dw-app > .dw-surface:has(> .ts-text-surface) { padding: 16px !important; }
.ts-app .dw-app > .dw-surface > :first-child { margin-top:0 !important; }


/* All tool surfaces keep one visible, consistent outline.
   Placed last to override legacy category/workbench border resets. */
.ts-app .legacy-tool-content .dw-app > .dw-surface,
.ts-app .dw-app > .dw-surface {
  background: #151f2b !important;
  border: 1px solid #43566b !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  box-sizing: border-box;
}

/* Single shared operation tab design, including former wb-toolbar/wb-mode. */
.ts-app .dw-app .dw-surface .dw-tabs {background:#151f2b !important;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:15px;margin:0;border-bottom:1px solid #354656;}
.ts-app .dw-app .dw-surface .dw-tabs .dw-tab {appearance:none;cursor:pointer;background:#202f3e;color:#e2edf6;border:1px solid #405366;border-radius:8px;padding:9px 13px;font-size:.85rem;font-weight:650;line-height:1.3;}
.ts-app .dw-app .dw-surface .dw-tabs .dw-tab:is(.active,[aria-pressed="true"]) {background:#24684e;color:#fff;border-color:#62daa9;}
.ts-app .dw-app .dw-surface .dw-tabs .dw-tab:hover {border-color:#62daa9;color:#fff;}
.ts-app .dw-app .dw-surface .dw-tabs .dw-tab:focus-visible {outline:2px solid #62daa9;outline-offset:2px;}
@media(max-width:767px){.ts-app .dw-app .dw-surface .dw-tabs{padding:12px;gap:6px}.ts-app .dw-app .dw-surface .dw-tabs .dw-tab{padding:8px 10px}}

/* Unified ToolStack surface / category card system. */
.ts-app .dw-app > .dw-surface { padding:16px !important; }
.ts-app .dw-surface .ts-tool-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:14px; margin:0; padding:0; align-items:stretch;
}
.ts-app .dw-surface .ts-tool-card {
  display:flex; align-items:center; gap:14px; min-width:0; width:100%;
  height:100%; padding:18px; border:1px solid #354656; border-radius:12px;
  background:#172330; color:#e9f2f8; text-decoration:none;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.ts-app .dw-surface .ts-tool-card:hover,
.ts-app .dw-surface .ts-tool-card:focus-visible {
  background:#1d2d3a; border-color:#58d9a8; color:#fff; transform:translateY(-1px);
}
.ts-app .dw-surface .ts-tool-card h2,
.ts-app .dw-surface .ts-tool-card h3 {margin:0 0 5px;font-size:1rem;line-height:1.35;color:#f1f7fa;}
.ts-app .dw-surface .ts-tool-card p {margin:0;font-size:.86rem;line-height:1.5;color:#9bb3c7;}
@media(max-width:620px){.ts-app .dw-surface .ts-tool-grid{grid-template-columns:1fr;}}

/* Shared category cards: used by the eight category landing pages. */
.ts-app .dw-app .dw-surface > .ts-tool-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}
.ts-app .dw-app .dw-surface > .ts-tool-grid > .ts-tool-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px !important;
  min-width: 0;
  min-height: 100px;
  background: #172330 !important;
  border: 1px solid #354656 !important;
  border-radius: 12px !important;
  color: #e9f2f8 !important;
  text-decoration: none !important;
}
.ts-app .dw-surface .ts-tool-icon {
  flex: 0 0 46px; width: 46px; height: 46px;
  display: flex; justify-content: center; align-items: center;
  border-radius: 12px; background: #214137; color: #80e4b1;
  font-size: 1.25rem; font-weight: 700;
}
.ts-app .dw-surface .ts-tool-card-body {min-width: 0;}
.ts-app .dw-surface .ts-tool-card-body h2 {margin: 0 0 5px; font-size: 1rem; color: #f1f7fa;}
.ts-app .dw-surface .ts-tool-card-body p {margin: 0; font-size: .86rem; line-height: 1.5; color: #9bb3c7;}
@media (max-width: 950px) {
  .ts-app .dw-app .dw-surface > .ts-tool-grid {grid-template-columns: repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width: 620px) {
  .ts-app .dw-app .dw-surface > .ts-tool-grid {grid-template-columns: 1fr !important;}
}

/* Unified top navigation and editor buttons */
.ts-app .ts-brand{height:78px;min-height:78px;padding:0 23px;box-sizing:border-box;}
.ts-app .topbar .search-holder{max-width:none !important;flex:1 1 auto;min-width:0;}
.ts-app .topbar .search-field{width:100%;}
.ts-app .swap-btn{background:#203040 !important;color:#e3f2fa !important;border-color:#405466 !important;}
.ts-app .ts-hex-field{position:relative;display:block;width:100%;}
.ts-app .ts-hex-field #hexInput{padding-right:48px !important;width:100%;}
.ts-app .ts-hex-field #copyHex{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;padding:7px;min-width:32px;height:32px;}
.ts-app #copySampleHex{display:grid;place-items:center;min-width:38px;height:38px;}
@media(max-width:991px){.ts-app .topbar{height:70px;}}