/* == tb-color-tokens (generated by scripts/apply-color-tokens.mjs) == */
:root{--tbc-b-ffffff:#ffffff;--tbc-b-fbfefd:#fbfefd;--tbc-b-fbfdfc:#fbfdfc;--tbc-b-fbfdfd:#fbfdfd;--tbc-b-fafbfc:#fafbfc;--tbc-b-fafcfb:#fafcfb;--tbc-b-fbfffe:#fbfffe;--tbc-b-fbfafe:#fbfafe;--tbc-b-fbfcfb:#fbfcfb;--tbc-b-f8faf9:#f8faf9;--tbc-b-f7faf8:#f7faf8;--tbc-b-f7f9f8:#f7f9f8;--tbc-b-f6f8f7:#f6f8f7;--tbc-b-f8fbfa:#f8fbfa;--tbc-b-f7fbfa:#f7fbfa;--tbc-b-f6fbf9:#f6fbf9;--tbc-b-f6fbfa:#f6fbfa;--tbc-b-f7fcfa:#f7fcfa;--tbc-b-f6fcfa:#f6fcfa;--tbc-b-f4f7f6:#f4f7f6;--tbc-b-f2f5f4:#f2f5f4;--tbc-b-f2f7f5:#f2f7f5;--tbc-b-f4faf8:#f4faf8;--tbc-b-f4fbf8:#f4fbf8;--tbc-b-f3faf7:#f3faf7;--tbc-b-f2f8f6:#f2f8f6;--tbc-b-f2f6f4:#f2f6f4;--tbc-b-f1f5f4:#f1f5f4;--tbc-b-f5fbf9:#f5fbf9;--tbc-b-f2faf8:#f2faf8;--tbc-b-f1f8f6:#f1f8f6;--tbc-b-f3fbf8:#f3fbf8;--tbc-b-f1fbf8:#f1fbf8;--tbc-b-f9fcfb:#f9fcfb;--tbc-b-f3faf8:#f3faf8;--tbc-b-f8fcfb:#f8fcfb;--tbc-b-f2fbf8:#f2fbf8;--tbc-b-eef2f0:#eef2f0;--tbc-b-eef1f0:#eef1f0;--tbc-b-eef4f2:#eef4f2;--tbc-b-eef3f1:#eef3f1;--tbc-b-edf1ef:#edf1ef;--tbc-b-eff2f1:#eff2f1;--tbc-b-eaeeec:#eaeeec;--tbc-b-e7ecea:#e7ecea;--tbc-b-eaf0ef:#eaf0ef;--tbc-b-f0f3f2:#f0f3f2;--tbc-b-eef5f2:#eef5f2;--tbc-b-e7eae9:#e7eae9;--tbc-b-e7eeeb:#e7eeeb;--tbc-b-eaf8f5:#eaf8f5;--tbc-b-edf7f3:#edf7f3;--tbc-b-edf9f6:#edf9f6;--tbc-b-f0faf7:#f0faf7;--tbc-b-edf8f6:#edf8f6;--tbc-b-ecf7f4:#ecf7f4;--tbc-b-effaf8:#effaf8;--tbc-b-f0f8f6:#f0f8f6;--tbc-b-eefaf7:#eefaf7;--tbc-b-eef7f3:#eef7f3;--tbc-b-effaf7:#effaf7;--tbc-b-e8f8f4:#e8f8f4;--tbc-b-eef9f6:#eef9f6;--tbc-b-eaf7f3:#eaf7f3;--tbc-b-ddf5ef:#ddf5ef;--tbc-b-cfe9e3:#cfe9e3;--tbc-b-bce3db:#bce3db;--tbc-b-d9f2ed:#d9f2ed;--tbc-b-e3e8e6:#e3e8e6;--tbc-b-d8e0dd:#d8e0dd;--tbc-b-dde6e4:#dde6e4;--tbc-b-e4eae8:#e4eae8;--tbc-b-c2cac6:#c2cac6;--tbc-t-101815:#101815;--tbc-t-586660:#586660;--tbc-t-637069:#637069;--tbc-t-647067:#647067;--tbc-t-718078:#718078;--tbc-t-0c1512:#0c1512;--tbc-t-10201c:#10201c;--tbc-t-07110e:#07110e;--tbc-t-0b110f:#0b110f;--tbc-t-18211e:#18211e;--tbc-t-1c2722:#1c2722;--tbc-t-24302b:#24302b;--tbc-t-24312d:#24312d;--tbc-t-24342f:#24342f;--tbc-t-25302c:#25302c;--tbc-t-25312d:#25312d;--tbc-t-26332d:#26332d;--tbc-t-26322d:#26322d;--tbc-t-26332f:#26332f;--tbc-t-2f433d:#2f433d;--tbc-t-34423d:#34423d;--tbc-t-34443e:#34443e;--tbc-t-34413b:#34413b;--tbc-t-35443e:#35443e;--tbc-t-36433e:#36433e;--tbc-t-37443f:#37443f;--tbc-t-3f4a44:#3f4a44;--tbc-t-3a4540:#3a4540;--tbc-t-40504a:#40504a;--tbc-t-45534d:#45534d;--tbc-t-46554e:#46554e;--tbc-t-4a554f:#4a554f;--tbc-t-4b5a53:#4b5a53;--tbc-t-4b5a54:#4b5a54;--tbc-t-4a5651:#4a5651;--tbc-t-23423b:#23423b;--tbc-t-4f625b:#4f625b;--tbc-t-52615a:#52615a;--tbc-t-53615b:#53615b;--tbc-t-5e6a65:#5e6a65;--tbc-t-5f6b65:#5f6b65;--tbc-t-5a655f:#5a655f;--tbc-t-64716b:#64716b;--tbc-t-65726c:#65726c;--tbc-t-66736d:#66736d;--tbc-t-66756e:#66756e;--tbc-t-68756f:#68756f;--tbc-t-69756f:#69756f;--tbc-t-6b7670:#636e68;--tbc-t-6b746e:#6b746e;--tbc-t-6f7872:#67716b;--tbc-t-72807a:#72807a;--tbc-t-7a8580:#7a8580;--tbc-t-7a847f:#7a847f;--tbc-t-7e8b85:#7e8b85;--tbc-t-7e948f:#7e948f;--tbc-t-7f948b:#7f948b;--tbc-t-8a938e:#8a938e;--tbc-t-8a9691:#8a9691;--tbc-t-8a8a8a:#8a8a8a;--tbc-t-8b948f:#8b948f;--tbc-t-8fa09a:#8fa09a;--tbc-t-90a39e:#90a39e;--tbc-t-97a09a:#6b756f;--tbc-t-9aa3a0:#9aa3a0;--tbc-t-9aa39e:#9aa39e;--tbc-t-9aa7a2:#9aa7a2;--tbc-t-0e8c7e:#0b7a6d;--tbc-t-0b6f63:#0b6f63;--tbc-t-087568:#087568;--tbc-t-0b7f73:#0b7f73;--tbc-t-127d73:#127d73;--tbc-t-0f766e:#0f766e;--tbc-t-148b80:#148b80;--tbc-t-0d9488:#0d9488;--tbc-t-116e65:#116e65;--tbc-l-e3e8e6:#e3e8e6;--tbc-l-ebefec:#ebefec;--tbc-l-eef1f0:#eef1f0;--tbc-l-eaeeec:#eaeeec;--tbc-l-dde4e1:#dde4e1;--tbc-l-e6ebe9:#e6ebe9;--tbc-l-e1eae6:#e1eae6;--tbc-l-e7ecea:#e7ecea;--tbc-l-f0f3f2:#f0f3f2;--tbc-l-edf1ef:#edf1ef;--tbc-l-eff2f1:#eff2f1;--tbc-l-e5eeea:#e5eeea;--tbc-l-ebefed:#ebefed;--tbc-l-e8eeeb:#e8eeeb;--tbc-l-dce4e0:#dce4e0;--tbc-l-e2ece8:#e2ece8;--tbc-l-dfe8e4:#dfe8e4;--tbc-l-dde6e2:#dde6e2;--tbc-l-d9e4e0:#d9e4e0;--tbc-l-dbe5e1:#dbe5e1;--tbc-l-eef4f1:#eef4f1;--tbc-l-eef2f0:#eef2f0;--tbc-l-e8efec:#e8efec;--tbc-l-c9d3cf:#c9d3cf;--tbc-l-ddeae6:#ddeae6;--tbc-l-ddede8:#ddede8;--tbc-l-d9e9e5:#d9e9e5;--tbc-l-cbdad5:#cbdad5;--tbc-l-d4eee8:#d4eee8;--tbc-l-bfe7df:#bfe7df;--tbc-l-cfe9e3:#cfe9e3;--tbc-l-d8e3df:#d8e3df;--tbc-l-dde8e4:#dde8e4;--tbc-l-e3ece8:#e3ece8;--tbc-l-dce7e3:#dce7e3;--tbc-l-dbeae5:#dbeae5;--tbc-l-dbe7e2:#dbe7e2;--tbc-l-dce8e4:#dce8e4;--tbc-l-e3ede9:#e3ede9;--tbc-l-e2ebe7:#e2ebe7;--tbc-l-cfe0da:#cfe0da;--tbc-l-b9d8d2:#b9d8d2;--tbc-l-d5e7e2:#d5e7e2;--tbc-l-bce3db:#bce3db;--tbc-l-bbddd5:#bbddd5;--tbc-l-bfe6de:#bfe6de;--tbc-l-d9ece7:#d9ece7;--tbc-l-cfe8e1:#cfe8e1;--tbc-l-cdede7:#cdede7;--tbc-l-d9e3df:#d9e3df;--tbc-l-bdd8d1:#bdd8d1;--tbc-l-dfe9e5:#dfe9e5;--tbc-l-d8e7e2:#d8e7e2;--tbc-l-dce7e2:#dce7e2;--tbc-l-dcefeb:#dcefeb;--tbc-l-cfe7e1:#cfe7e1;--tbc-l-e2eae7:#e2eae7;--tbc-l-d9e7e2:#d9e7e2;--tbc-l-b7ded6:#b7ded6;--tbc-l-bfe5dc:#bfe5dc;--tbc-l-eaf8f5:#eaf8f5;--tbc-l-dde8e5:#dde8e5;--tbc-l-dde8e3:#dde8e3;--tbc-wrgb:255,255,255;--tb-brand-ink:#0b7a6d;}
html.tb-dark{--tbc-b-ffffff:#111a17;--tbc-b-fbfefd:#111a17;--tbc-b-fbfdfc:#111a17;--tbc-b-fbfdfd:#111a17;--tbc-b-fafbfc:#111a17;--tbc-b-fafcfb:#111a17;--tbc-b-fbfffe:#111a17;--tbc-b-fbfafe:#111a17;--tbc-b-fbfcfb:#111a17;--tbc-b-f8faf9:#16211d;--tbc-b-f7faf8:#16211d;--tbc-b-f7f9f8:#16211d;--tbc-b-f6f8f7:#16211d;--tbc-b-f8fbfa:#16211d;--tbc-b-f7fbfa:#16211d;--tbc-b-f6fbf9:#16211d;--tbc-b-f6fbfa:#16211d;--tbc-b-f7fcfa:#16211d;--tbc-b-f6fcfa:#16211d;--tbc-b-f4f7f6:#16211d;--tbc-b-f2f5f4:#16211d;--tbc-b-f2f7f5:#16211d;--tbc-b-f4faf8:#16211d;--tbc-b-f4fbf8:#16211d;--tbc-b-f3faf7:#16211d;--tbc-b-f2f8f6:#16211d;--tbc-b-f2f6f4:#16211d;--tbc-b-f1f5f4:#16211d;--tbc-b-f5fbf9:#16211d;--tbc-b-f2faf8:#16211d;--tbc-b-f1f8f6:#16211d;--tbc-b-f3fbf8:#16211d;--tbc-b-f1fbf8:#16211d;--tbc-b-f9fcfb:#16211d;--tbc-b-f3faf8:#16211d;--tbc-b-f8fcfb:#16211d;--tbc-b-f2fbf8:#16211d;--tbc-b-eef2f0:#1b2723;--tbc-b-eef1f0:#1b2723;--tbc-b-eef4f2:#1b2723;--tbc-b-eef3f1:#1b2723;--tbc-b-edf1ef:#1b2723;--tbc-b-eff2f1:#1b2723;--tbc-b-eaeeec:#1b2723;--tbc-b-e7ecea:#1b2723;--tbc-b-eaf0ef:#1b2723;--tbc-b-f0f3f2:#1b2723;--tbc-b-eef5f2:#1b2723;--tbc-b-e7eae9:#1b2723;--tbc-b-e7eeeb:#1b2723;--tbc-b-eaf8f5:#12342e;--tbc-b-edf7f3:#12342e;--tbc-b-edf9f6:#12342e;--tbc-b-f0faf7:#12342e;--tbc-b-edf8f6:#12342e;--tbc-b-ecf7f4:#12342e;--tbc-b-effaf8:#12342e;--tbc-b-f0f8f6:#12342e;--tbc-b-eefaf7:#12342e;--tbc-b-eef7f3:#12342e;--tbc-b-effaf7:#12342e;--tbc-b-e8f8f4:#12342e;--tbc-b-eef9f6:#12342e;--tbc-b-eaf7f3:#12342e;--tbc-b-ddf5ef:#17453d;--tbc-b-cfe9e3:#17453d;--tbc-b-bce3db:#17453d;--tbc-b-d9f2ed:#17453d;--tbc-b-e3e8e6:#202b26;--tbc-b-d8e0dd:#202b26;--tbc-b-dde6e4:#202b26;--tbc-b-e4eae8:#202b26;--tbc-b-c2cac6:#33413b;--tbc-t-101815:#edf7f3;--tbc-t-586660:#9fb2aa;--tbc-t-637069:#9fb2aa;--tbc-t-647067:#9fb2aa;--tbc-t-718078:#9fb2aa;--tbc-t-0c1512:#edf7f3;--tbc-t-10201c:#edf7f3;--tbc-t-07110e:#edf7f3;--tbc-t-0b110f:#edf7f3;--tbc-t-18211e:#edf7f3;--tbc-t-1c2722:#edf7f3;--tbc-t-24302b:#edf7f3;--tbc-t-24312d:#edf7f3;--tbc-t-24342f:#edf7f3;--tbc-t-25302c:#edf7f3;--tbc-t-25312d:#edf7f3;--tbc-t-26332d:#edf7f3;--tbc-t-26322d:#edf7f3;--tbc-t-26332f:#edf7f3;--tbc-t-2f433d:#edf7f3;--tbc-t-34423d:#c7d4ce;--tbc-t-34443e:#c7d4ce;--tbc-t-34413b:#c7d4ce;--tbc-t-35443e:#c7d4ce;--tbc-t-36433e:#c7d4ce;--tbc-t-37443f:#c7d4ce;--tbc-t-3f4a44:#c7d4ce;--tbc-t-3a4540:#c7d4ce;--tbc-t-40504a:#c7d4ce;--tbc-t-45534d:#c7d4ce;--tbc-t-46554e:#c7d4ce;--tbc-t-4a554f:#c7d4ce;--tbc-t-4b5a53:#c7d4ce;--tbc-t-4b5a54:#c7d4ce;--tbc-t-4a5651:#c7d4ce;--tbc-t-23423b:#c7d4ce;--tbc-t-4f625b:#9fb2aa;--tbc-t-52615a:#9fb2aa;--tbc-t-53615b:#9fb2aa;--tbc-t-5e6a65:#9fb2aa;--tbc-t-5f6b65:#9fb2aa;--tbc-t-5a655f:#9fb2aa;--tbc-t-64716b:#9fb2aa;--tbc-t-65726c:#9fb2aa;--tbc-t-66736d:#9fb2aa;--tbc-t-66756e:#9fb2aa;--tbc-t-68756f:#9fb2aa;--tbc-t-69756f:#9fb2aa;--tbc-t-6b7670:#9fb2aa;--tbc-t-6b746e:#9fb2aa;--tbc-t-6f7872:#9fb2aa;--tbc-t-72807a:#9fb2aa;--tbc-t-7a8580:#8fa39b;--tbc-t-7a847f:#8fa39b;--tbc-t-7e8b85:#8fa39b;--tbc-t-7e948f:#8fa39b;--tbc-t-7f948b:#8fa39b;--tbc-t-8a938e:#8fa39b;--tbc-t-8a9691:#8fa39b;--tbc-t-8a8a8a:#8fa39b;--tbc-t-8b948f:#8fa39b;--tbc-t-8fa09a:#8fa39b;--tbc-t-90a39e:#8fa39b;--tbc-t-97a09a:#8fa39b;--tbc-t-9aa3a0:#8fa39b;--tbc-t-9aa39e:#8fa39b;--tbc-t-9aa7a2:#8fa39b;--tbc-t-0e8c7e:#2dd4bf;--tbc-t-0b6f63:#4fd8c4;--tbc-t-087568:#4fd8c4;--tbc-t-0b7f73:#4fd8c4;--tbc-t-127d73:#4fd8c4;--tbc-t-0f766e:#4fd8c4;--tbc-t-148b80:#4fd8c4;--tbc-t-0d9488:#4fd8c4;--tbc-t-116e65:#4fd8c4;--tbc-l-e3e8e6:#273a33;--tbc-l-ebefec:#273a33;--tbc-l-eef1f0:#273a33;--tbc-l-eaeeec:#273a33;--tbc-l-dde4e1:#273a33;--tbc-l-e6ebe9:#273a33;--tbc-l-e1eae6:#273a33;--tbc-l-e7ecea:#273a33;--tbc-l-f0f3f2:#273a33;--tbc-l-edf1ef:#273a33;--tbc-l-eff2f1:#273a33;--tbc-l-e5eeea:#273a33;--tbc-l-ebefed:#273a33;--tbc-l-e8eeeb:#273a33;--tbc-l-dce4e0:#273a33;--tbc-l-e2ece8:#273a33;--tbc-l-dfe8e4:#273a33;--tbc-l-dde6e2:#273a33;--tbc-l-d9e4e0:#273a33;--tbc-l-dbe5e1:#273a33;--tbc-l-eef4f1:#273a33;--tbc-l-eef2f0:#273a33;--tbc-l-e8efec:#273a33;--tbc-l-c9d3cf:#273a33;--tbc-l-ddeae6:#2c453d;--tbc-l-ddede8:#2c453d;--tbc-l-d9e9e5:#2c453d;--tbc-l-cbdad5:#2c453d;--tbc-l-d4eee8:#2c453d;--tbc-l-bfe7df:#2c453d;--tbc-l-cfe9e3:#2c453d;--tbc-l-d8e3df:#2c453d;--tbc-l-dde8e4:#2c453d;--tbc-l-e3ece8:#2c453d;--tbc-l-dce7e3:#2c453d;--tbc-l-dbeae5:#2c453d;--tbc-l-dbe7e2:#2c453d;--tbc-l-dce8e4:#2c453d;--tbc-l-e3ede9:#2c453d;--tbc-l-e2ebe7:#2c453d;--tbc-l-cfe0da:#2c453d;--tbc-l-b9d8d2:#2c453d;--tbc-l-d5e7e2:#2c453d;--tbc-l-bce3db:#2c453d;--tbc-l-bbddd5:#2c453d;--tbc-l-bfe6de:#2c453d;--tbc-l-d9ece7:#2c453d;--tbc-l-cfe8e1:#2c453d;--tbc-l-cdede7:#2c453d;--tbc-l-d9e3df:#2c453d;--tbc-l-bdd8d1:#2c453d;--tbc-l-dfe9e5:#2c453d;--tbc-l-d8e7e2:#2c453d;--tbc-l-dce7e2:#2c453d;--tbc-l-dcefeb:#2c453d;--tbc-l-cfe7e1:#2c453d;--tbc-l-e2eae7:#2c453d;--tbc-l-d9e7e2:#2c453d;--tbc-l-b7ded6:#2c453d;--tbc-l-bfe5dc:#2c453d;--tbc-l-eaf8f5:#2c453d;--tbc-l-dde8e5:#2c453d;--tbc-l-dde8e3:#2c453d;--tbc-wrgb:17,26,23;--tb-brand-ink:#2dd4bf;}
/* == /tb-color-tokens == */
:root {
  --tb-bg: #ffffff;
  --tb-surface: #ffffff;
  --tb-soft: #f8faf9;
  --tb-soft-2: #f2f5f4;
  --tb-border: #e3e8e6;
  --tb-border-2: #eaeeec;
  --tb-text: #101815;
  --tb-muted: #5a655f;
  --tb-faint: #8a938e;
  --tb-brand: #0e8c7e;
  --tb-brand-2: #14b8a6;
  --tb-brand-soft: #eaf8f5;
  --tb-danger: #c2410c;
  --tb-shadow: 0 18px 44px rgba(16, 24, 21, .09);
  --tb-max: 1320px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--tb-bg); color: var(--tb-text); }
body {
  font-family: "Noto Sans KR", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--tb-brand); color: #fff; }
a { color: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 2px solid var(--tb-brand-2); outline-offset: 2px; border-radius: 8px; }
button, input, textarea, select { font: inherit; }
textarea, code, pre, .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; }
/* Handoff bundle alignment: responsive system, single teal ramp, production polish */
html, body { overflow-x: clip !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.tb-root { min-height: 100vh; transition: filter .3s ease; }
.tb-root img, .tb-root canvas, .tb-root video { max-width: 100%; }
.tb-root h1, .tb-root h2, .tb-root h3, .tb-root h4, .tb-root p, .tb-root li { word-break: keep-all; overflow-wrap: break-word; }
.tb-root p, .tb-root li { text-wrap: pretty; }
.tb-root nav a, .tb-root nav button, .tb-root [data-share], .tb-root [data-copy-text] { white-space: nowrap; }
[id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
.tb-page { min-height: 100vh; background: var(--tbc-b-ffffff); }
.tb-container { max-width: var(--tb-max); margin: 0 auto; padding: 0 24px; }

/* Navigation: handoff baseline */
.tb-nav { position: sticky; top: 0; z-index: 60; background: rgba(var(--tbc-wrgb),.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--tb-border-2); }
.tb-nav-inner { max-width: var(--tb-max); height: 66px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tb-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.tb-logo-mark, .tb-site-icon { display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(150deg, var(--tb-brand), var(--tb-brand-2)); box-shadow: 0 2px 10px rgba(14,140,126,.32); }
.tb-logo-mark { position: relative; overflow: hidden; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.74); border-radius: 12px; background: radial-gradient(circle at 30% 18%, rgba(255,255,255,.92), rgba(255,255,255,.16) 26%, rgba(255,255,255,0) 46%), linear-gradient(145deg, #16B8A8 0%, #0E8C7E 54%, #075E56 100%); box-shadow: 0 10px 24px -15px rgba(7,94,86,.88), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(5,60,55,.38); }
.tb-logo-mark::after { content: ""; position: absolute; inset: 1px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); pointer-events: none; }
.tb-logo svg { position: relative; z-index: 1; width: 21px; height: 21px; filter: drop-shadow(0 1px 1px rgba(2,42,38,.18)); }
.tb-logo-text { font-size: 19px; font-weight: 850; letter-spacing: 0; }
.tb-logo-text span { color:var(--tb-brand-ink); }
.tb-nav-links { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1 1 auto; }
.tb-nav-links a { padding: 8px 12px; border-radius: 8px; color: var(--tbc-t-3a4540); text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.tb-nav-links a:hover { background: var(--tb-soft); color:var(--tb-brand-ink); }
.tb-nav-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.tb-search-link { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--tb-border); border-radius: 10px; background: var(--tb-soft); color: var(--tb-faint); text-decoration: none; font-size: 13px; font-weight: 700; }
.tb-search-link:hover { border-color: var(--tb-brand-2); color:var(--tb-brand-ink); }
.tb-search-link svg { width: 15px; height: 15px; }
.tb-shortcut { font-family: "JetBrains Mono", monospace; font-size: 11px; padding: 2px 6px; border: 1px solid var(--tb-border); border-radius: 5px; color: var(--tbc-t-6b7670); background: var(--tbc-b-ffffff); }
.tb-lang { display: flex; gap: 2px; font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--tbc-t-9aa39e); }
.tb-lang a { padding: 4px 6px; border-radius: 7px; text-decoration: none; font-weight: 700; }
.tb-lang [aria-current="page"] { color: var(--tb-text); background: var(--tb-soft-2); }

/* Category switcher */
.tb-hub-switcher { position: sticky; top: 66px; z-index: 55; background: rgba(var(--tbc-wrgb),.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--tbc-l-eef1f0); }
.tb-hub-switcher-inner { max-width: var(--tb-max); margin: 0 auto; padding: 12px 24px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.tb-hub-switcher-inner::-webkit-scrollbar { display: none; }
.tb-hub-switcher a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 13px; border: 1px solid var(--tb-border); border-radius: 999px; background: var(--tbc-b-ffffff); color: var(--tbc-t-3a4540); text-decoration: none; font-size: 13px; font-weight: 750; }
.tb-hub-switcher a.is-active { background: var(--site-color); border-color: var(--site-color); color: #fff; }
.tb-hub-switcher .tb-site-icon { width: 22px; height: 22px; border-radius: 8px; background: var(--site-bg) !important; color: var(--site-color) !important; box-shadow: none; }
.tb-hub-switcher a.is-active .tb-site-icon { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.tb-hub-switcher svg { width: 14px; height: 14px; }

/* Hero */
.tb-hero { position: relative; overflow: hidden; text-align: center; background: var(--tbc-b-ffffff); }
.tb-hero::before { content: ""; position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 900px; height: 520px; background: radial-gradient(ellipse at center, rgba(20,184,166,.16), rgba(20,184,166,0) 68%); pointer-events: none; }
.tb-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--tbc-b-e4eae8) 1px, transparent 1px); background-size: 26px 26px; opacity: .5; mask-image: linear-gradient(#000, transparent 70%); -webkit-mask-image: linear-gradient(#000, transparent 70%); pointer-events: none; }
.tb-hero-inner { position: relative; z-index: 1; max-width: var(--tb-max); margin: 0 auto; padding: 38px 24px 32px; }
.tb-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--tbc-l-cdede7); background: var(--tb-brand-soft); color: var(--tbc-t-0b6f63); border-radius: 999px; font-size: 12px; font-weight: 750; }
.tb-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tb-brand-2); box-shadow: 0 0 0 3px rgba(20,184,166,.2); }
.tb-hero h1, .tb-page-title { margin: 18px 0 0; font-size: clamp(32px, 6vw, 48px); line-height: 1.1; font-weight: 800; letter-spacing: 0; text-wrap: balance; }
.tb-hero h1 span, .tb-page-title span { color:var(--tb-brand-ink); }
.tb-lead { max-width: 620px; margin: 16px auto 0; color: var(--tb-muted); font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.tb-hero-search { position: relative; max-width: 580px; margin: 24px auto 0; display: block; }
.tb-hero-search svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color:var(--tb-brand-ink); }
.tb-hero-search input { width: 100%; height: 54px; padding: 0 20px 0 50px; border: 1.5px solid var(--tbc-l-dde4e1); border-radius: 16px; background: var(--tbc-b-ffffff); color: var(--tb-text); font-size: 16px; box-shadow: 0 8px 30px rgba(16,24,21,.06); }
.tb-hero-search input:focus { border-color: var(--tb-brand-2); box-shadow: 0 8px 30px rgba(20,184,166,.18); }
.tb-chip-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tb-chip-row a, .tb-chip-row span:not(.tb-chip-label) { padding: 6px 12px; border: 1px solid var(--tbc-l-e7ecea); border-radius: 999px; background: var(--tb-soft-2); color: var(--tbc-t-3a4540); text-decoration: none; font-size: 13px; font-weight: 750; }
.tb-chip-label { color: var(--tb-faint); font-size: 13px; }
.tb-stats { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 26px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--tbc-l-ebefed); }
.tb-stat { min-width: 78px; text-align: center; }
.tb-stat strong { display: block; font-size: 26px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.tb-stat span { display: block; margin-top: 5px; color: var(--tb-faint); font-size: 13px; }

/* Sections and cards */
.tb-section { max-width: var(--tb-max); margin: 0 auto; padding: 42px 24px 18px; }
.tb-section + .tb-section { padding-top: 34px; }
.tb-section-head { display: flex; align-items: baseline; gap: 20px; padding-top: 20px; border-top: 1px solid var(--tbc-l-e7ecea); margin-bottom: 26px; }
.tb-section-no { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color:var(--tb-brand-ink); letter-spacing: .04em; line-height: 1; padding-top: 5px; }
.tb-section-head > div { flex: 1 1 auto; min-width: 0; }
.tb-section-head h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: 0; }
.tb-section-head p { margin: 8px 0 0; color: var(--tbc-t-7a847f); font-size: 14px; line-height: 1.6; max-width: 680px; }
.tb-section-head a { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: var(--tb-muted); text-decoration: none; font-size: 13px; font-weight: 750; }
.tb-section-head a:hover { color:var(--tb-brand-ink); }
.tb-hub-grid, .tb-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 16px; }
.tb-hub-card, .tb-tool-card { display: flex; flex-direction: column; gap: 11px; min-height: 210px; padding: 20px; border: 1px solid var(--tb-border-2); border-radius: 15px; background: var(--tbc-b-ffffff); color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tb-hub-card:hover, .tb-tool-card:hover { transform: translateY(-4px); box-shadow: var(--tb-shadow); border-color: var(--tbc-l-dcefeb); }
.tb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tb-hub-card .tb-site-icon, .tb-tool-card .tb-site-icon { width: 46px; height: 46px; border-radius: 13px; box-shadow: none; }
.tb-hub-card .tb-site-icon svg, .tb-tool-card .tb-site-icon svg { width: 22px; height: 22px; }
.tb-site-index, .tb-tool-no { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color: #c2cac6; }
.tb-hub-card strong, .tb-tool-card strong { display: block; font-size: 17px; line-height: 1.35; font-weight: 850; letter-spacing: 0; }
.tb-hub-card em, .tb-tool-card em { display: block; margin-top: 3px; color: var(--tbc-t-6b7670); font-size: 12px; font-style: normal; font-weight: 750; }
.tb-hub-card p, .tb-tool-card p { margin: 0; color: var(--tbc-t-6b7670); font-size: 13px; line-height: 1.58; }
.tb-count { margin-top: auto; padding-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 750; color: var(--tbc-t-3a4540); }

/* Category */
.tb-category-hero { max-width: var(--tb-max); margin: 0 auto; padding: 30px 24px 0; }
.tb-category-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 30px; border: 1px solid var(--tb-border-2); border-radius: 18px; background: linear-gradient(135deg, var(--tbc-b-ffffff), var(--tbc-b-f9fcfb)); }
.tb-category-card h1 { margin: 12px 0 0; font-size: clamp(30px, 4.6vw, 42px); line-height: 1.12; font-weight: 800; letter-spacing: 0; }
.tb-category-card p { max-width: 720px; color: var(--tb-muted); font-size: 15px; line-height: 1.65; }
.tb-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--tbc-l-dde4e1); border-radius: 10px; background: var(--tbc-b-ffffff); color: var(--tbc-t-26322d); text-decoration: none; font-size: 13px; font-weight: 800; cursor: pointer; }
.tb-btn:hover { border-color: var(--tb-brand-2); color:var(--tb-brand-ink); }
.tb-btn-primary { background: var(--tb-brand); border-color:var(--tb-brand-ink); color: #fff; }
.tb-btn-primary:hover { background: #0b6f63; color: #fff; }
.tb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tb-filter button, .tb-filter a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--tb-border); border-radius: 999px; background: var(--tbc-b-ffffff); color: var(--tbc-t-3a4540); text-decoration: none; font-size: 13px; font-weight: 750; cursor: pointer; }
.tb-filter .is-active, .tb-filter button:hover, .tb-filter a:hover { background: var(--tb-brand); border-color:var(--tb-brand-ink); color: #fff; }

/* Tool pages */
.tb-tool-layout { max-width: var(--tb-max); margin: 0 auto; padding: 24px 24px 60px; display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 36px; align-items: start; }
.tb-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--tbc-t-9aa39e); font-size: 13px; }
.tb-breadcrumb a { color: var(--tbc-t-9aa39e); text-decoration: none; }
.tb-breadcrumb strong { color: var(--tbc-t-3a4540); font-weight: 750; }
.tb-tool-title-row { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
.tb-tool-icon { flex: none; width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: "JetBrains Mono", monospace; font-size: 18px; font-weight: 800; }
.tb-run-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px; color: var(--tbc-t-0b6f63); background: var(--tb-brand-soft); border: 1px solid var(--tbc-l-cdede7); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 750; }
.tb-tool-title-row h1 { margin: 0; font-size: 32px; line-height: 1.16; font-weight: 800; letter-spacing: 0; }
.tb-tool-title-row p { margin: 8px 0 0; max-width: 650px; color: var(--tb-muted); font-size: 15px; line-height: 1.65; }
.tb-workspace { border: 1px solid var(--tbc-l-e6ebe9); border-radius: 18px; overflow: hidden; background: var(--tbc-b-ffffff); box-shadow: 0 10px 30px rgba(16,24,21,.05); }
.tb-workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--tb-border-2); background: var(--tb-soft); }
.tb-workspace-head strong { font-size: 15px; }
.tb-workspace-head span { color: var(--tb-faint); font-size: 12px; }
.inline-tool-shell, .tool-inline-runtime { padding: 16px; background: var(--tbc-b-ffffff); }
.tool-inline-runtime .tool-panel, .tool-inline-runtime .runtime-tool-panel { display: none; }
.tool-inline-runtime .tool-panel.active, .tool-inline-runtime .runtime-tool-panel.active { display: block; }
.tool-inline-runtime .runtime-panel-head { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--tb-border-2); background: var(--tbc-b-ffffff) !important; color: var(--tb-text) !important; }
.tool-inline-runtime .runtime-panel-head h2, .tool-inline-runtime .tool-panel > h2 { margin: 0; font-size: 20px; font-weight: 850; background: transparent !important; color: var(--tb-text) !important; padding: 0 !important; border: 0 !important; }
.tool-inline-runtime .runtime-panel-head p { margin: 6px 0 0; color: var(--tb-muted); font-size: 13px; }
.runtime-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.runtime-control-grid textarea, .tool-inline-runtime textarea, .tool-inline-runtime input, .tool-inline-runtime select { width: 100%; min-height: 42px; border: 1px solid var(--tbc-l-d9e3df); border-radius: 10px; padding: 10px 12px; background: var(--tbc-b-ffffff); color: var(--tb-text); }
.runtime-control-grid textarea, .tool-inline-runtime textarea { min-height: 170px; resize: vertical; grid-column: 1 / -1; line-height: 1.65; font-size: 13px; }
.tool-inline-runtime button, .tb-workspace button { min-height: 40px; padding: 0 15px; border: 1px solid var(--tbc-l-d9e3df); border-radius: 10px; background: var(--tbc-b-ffffff); color: var(--tbc-t-3a4540); cursor: pointer; font-weight: 800; text-transform: none; }
.tool-inline-runtime button.primary, .tool-inline-runtime .primary { background: var(--tb-brand); border-color:var(--tb-brand-ink); color: #fff; }
.tool-inline-runtime .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tool-inline-runtime, .tool-inline-runtime p, .tool-inline-runtime li, .tool-inline-runtime label, .tool-inline-runtime .status, .tool-inline-runtime .tool-output { font-size: 14px; line-height: 1.65; }
.file-drop { margin-bottom: 12px; padding: 22px; border: 1.5px dashed var(--tbc-l-bdd8d1); border-radius: 14px; background: var(--tbc-b-f5fbf9); color: var(--tbc-t-4f625b); text-align: center; font-weight: 750; }
.tool-output, .status { padding: 12px; border: 1px solid var(--tb-border); border-radius: 10px; background: var(--tbc-b-fbfdfc); color: var(--tb-muted); }
.extension-tool-form { grid-column: 1 / -1; display: grid; gap: 14px; }
.extension-kind-strip { display: grid; gap: 4px; padding: 13px 14px; border: 1px solid var(--tbc-l-dfe9e5); border-radius: 14px; background: linear-gradient(135deg, var(--tbc-b-f9fcfb), var(--tbc-b-f3faf8)); }
.extension-kind-strip span { color:var(--tb-brand-ink); font-size: 12px; font-weight: 850; }
.extension-kind-strip strong { font-size: 18px; line-height: 1.35; font-weight: 900; }
.extension-kind-strip small { color: var(--tb-muted); font-size: 12px; line-height: 1.55; }
.extension-tool-grid, .extension-number-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.runtime-field { display: grid; gap: 7px; min-width: 0; color: var(--tbc-t-26322d); font-weight: 800; }
.runtime-field span { font-size: 12px; color: var(--tbc-t-52615a); }
.runtime-field-wide { grid-column: span 1; }
.extension-number-grid .runtime-field input, .extension-number-grid .runtime-field select { min-height: 42px; }
.extension-actions { margin-top: 0 !important; padding-top: 2px; }
.extension-output { min-height: 150px !important; background: var(--tbc-b-fbfdfc) !important; }
.extension-preview { min-height: 44px; padding: 12px; border: 1px solid var(--tbc-l-dfe9e5); border-radius: 12px; background: var(--tbc-b-ffffff); color: var(--tb-muted); }
.extension-preview:empty { display: none; }
.extension-preview pre { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.6; }
.extension-result-card { display: grid; gap: 12px; }
.extension-result-header { display: grid; gap: 4px; }
.extension-result-header span { color:var(--tb-brand-ink); font-size: 12px; font-weight: 850; }
.extension-score-grid, .extension-result-grid { display: grid; gap: 10px; }
.extension-score-item, .extension-metric { padding: 10px; border: 1px solid var(--tb-border-2); border-radius: 12px; background: var(--tb-soft); }
.extension-score-item div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.extension-score-item i { display: block; height: 7px; margin-top: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--tb-brand) var(--score), var(--tbc-b-e7eeeb) var(--score)); }
.extension-stage-list { margin: 0; padding-left: 18px; }
.extension-image-workspace { display: grid; gap: 12px; }
.extension-image-drop { display: grid; gap: 6px; padding: 18px; border: 1.5px dashed var(--tbc-l-bdd8d1); border-radius: 14px; background: var(--tbc-b-f5fbf9); cursor: pointer; }
.extension-image-drop input { margin-top: 8px; }
.extension-image-preview { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px; border: 1px solid var(--tb-border); border-radius: 12px; background: var(--tbc-b-ffffff); }
.extension-image-preview img { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; }
.extension-image-note { padding: 12px; border-radius: 12px; background: #fff8f1; color: #7b4d22; }

/* Generic (prototype-less) tool panels — polish to match the handoff aesthetic */
.tool-inline-runtime input, .tool-inline-runtime select, .tool-inline-runtime textarea { font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.tool-inline-runtime input:focus, .tool-inline-runtime select:focus, .tool-inline-runtime textarea:focus { border-color:var(--tb-brand-ink); box-shadow: 0 0 0 3px rgba(14, 140, 126, 0.13); outline: none; }
.tool-inline-runtime select { cursor: pointer; }
.tool-inline-runtime button, .tb-workspace button { transition: border-color .15s ease, color .15s ease, background .15s ease; }
.tool-inline-runtime button:hover, .tb-workspace button:hover { border-color:var(--tb-brand-ink); color:var(--tb-brand-ink); }
.tool-inline-runtime button.primary:hover, .tool-inline-runtime .primary:hover { color: #fff; filter: brightness(1.04); }
/* First action button in a control grid reads as the primary action */
.runtime-control-grid > button:first-of-type, .extension-actions > button:first-of-type, .extension-tool-form > button:first-of-type { background: var(--tb-brand); border-color:var(--tb-brand-ink); color: #fff; }
.runtime-control-grid > button:first-of-type:hover, .extension-actions > button:first-of-type:hover { color: #fff; filter: brightness(1.05); border-color:var(--tb-brand-ink); }
.tool-output, .extension-output, .tool-inline-runtime [data-extension-output] { font-family: "JetBrains Mono", monospace; font-size: 13px; }
.tool-inline-runtime .tool-output:not(:empty), .tool-inline-runtime .status:not(:empty) { border-color: var(--tb-border-2); }
.runtime-control-grid { gap: 12px 14px; }
.runtime-panel-copy, .tool-panel-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border: 1px solid var(--tb-border-2); border-radius: 10px; background: var(--tbc-b-ffffff); color: var(--tbc-t-3a4540); font-weight: 700; font-size: 13px; cursor: pointer; }
.runtime-panel-copy:hover, .tool-panel-copy:hover { border-color:var(--tb-brand-ink); color:var(--tb-brand-ink); }

/* Info and sidebars */
.tb-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 28px; }
.tb-info-card, .tb-aside-card { padding: 18px; border: 1px solid var(--tb-border-2); border-radius: 14px; background: var(--tbc-b-ffffff); }
.tb-info-card h2, .tb-aside-card h2 { margin: 0 0 7px; font-size: 17px; font-weight: 850; }
.tb-info-card p, .tb-info-card li, .tb-aside-card p, .tb-aside-card li { color: var(--tbc-t-69756f); font-size: 13px; line-height: 1.65; }
.tb-info-card ul, .tb-aside-card ul { margin: 8px 0 0; padding-left: 18px; }
.tb-info-no { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 800; color:var(--tb-brand-ink); }
.tb-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.tb-policy-card, .tb-ad-safety-card { background: linear-gradient(180deg, var(--tbc-b-ffffff), var(--tbc-b-fbfefd)); }
.tb-faq-card { margin-top: 14px; }
.tb-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 14px; }
.tb-related-list { display: grid; gap: 4px; }
.tb-related-list a { display: flex; flex-direction: column; gap: 4px; padding: 11px; border-radius: 10px; text-decoration: none; background: var(--tbc-b-ffffff); }
.tb-related-list a:hover { background: var(--tb-soft); }
.tb-related-list strong { font-size: 13px; }
.tb-related-list span { color: var(--tb-faint); font-size: 12px; line-height: 1.45; }
.empty-state { grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--tb-border); border-radius: 14px; color: var(--tb-faint); text-align: center; background: var(--tb-soft); }

/* Footer */
.tb-footer { margin-top: 54px; border-top: 1px solid var(--tb-border-2); padding: 28px 24px; text-align: center; color: var(--tbc-t-7a847f); font-size: 13px; }
.tb-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.tb-footer a { color: var(--tbc-t-5a655f); text-decoration: none; font-weight: 750; }
.tb-footer a:hover { color:var(--tb-brand-ink); }


@media (max-width: 940px) {
  .tb-nav-links { display: none; }
  .tb-tool-layout { grid-template-columns: 1fr; gap: 26px; }
  .tb-aside { position: static; }
  .tb-category-card { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tb-nav-inner { height: auto; min-height: 62px; padding: 10px 16px; flex-wrap: wrap; }
  .tb-nav-actions { margin-left: auto; }
  .tb-search-link span:not(.tb-shortcut), .tb-shortcut { display: none; }
  .tb-lang { font-size: 11px; }
  .tb-hero-inner { padding: 30px 18px 26px; }
  .tb-hero h1 { font-size: 34px; }
  .tb-section, .tb-category-hero, .tb-tool-layout { padding-left: 16px; padding-right: 16px; }
  .tb-section { padding-top: 30px; }
  .tb-section-head { align-items: flex-start; gap: 12px; }
  .tb-section-head a { margin-left: 0; }
  .tb-stats { gap: 16px; }
  .runtime-control-grid, .extension-tool-grid, .extension-number-grid { grid-template-columns: 1fr; }
  .tb-tool-title-row { gap: 12px; }
  .tb-tool-icon { width: 48px; height: 48px; border-radius: 14px; }
  .tb-tool-title-row h1 { font-size: 26px; }
  .inline-tool-shell, .tool-inline-runtime { padding: 12px; }
  .tool-inline-runtime, .tool-inline-runtime p, .tool-inline-runtime li, .tool-inline-runtime label, .tool-inline-runtime .status, .tool-inline-runtime .tool-output { font-size: 13px; line-height: 1.58; }
  .tool-inline-runtime button, .tb-workspace button { min-height: 38px; padding: 0 12px; font-size: 13px; }
  .tb-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .tb-logo-text { font-size: 17px; }
  .tb-hub-grid, .tb-tool-grid { grid-template-columns: 1fr; }
  .tb-actions { width: 100%; }
  .tb-btn { flex: 1 1 auto; }
}
/* Final handoff override: keep every hub in the teal family and remove leftover rainbow accents. */
.tb-site-icon,
.tb-hub-card .tb-site-icon,
.tb-tool-card .tb-site-icon,
.tb-hub-switcher .tb-site-icon {
  background: linear-gradient(150deg, var(--tbc-b-eaf8f5), var(--tbc-b-d9f2ed)) !important;
  color:var(--tb-brand-ink) !important;
  box-shadow: none !important;
}
.tb-hub-switcher a.is-active,
.tb-btn-primary,
.tb-tool-icon {
  background: linear-gradient(150deg, var(--tb-brand), var(--tb-brand-2)) !important;
  border-color:var(--tb-brand-ink) !important;
  color: #fff !important;
}
.tb-category-card h1 span { color:var(--tb-brand-ink) !important; }
.tb-hub-card,
.tb-tool-card,
.tb-info-card,
.tb-aside-card,
.tb-workspace,
.tb-category-card {
  border-color: var(--tbc-l-dfe8e4);
}
.tb-hub-card:hover,
.tb-tool-card:hover {
  transform: translateY(-3px);
  border-color: var(--tbc-l-bfe5dc);
  box-shadow: var(--tb-shadow);
}
.tb-section-head p,
.tb-info-card p,
.tb-info-card li,
.tb-aside-card p,
.tb-aside-card li,
.tb-hub-card p,
.tb-tool-card p { color: var(--tbc-t-5f6b65); }
.tb-section { padding-top: 38px; }
.tb-section + .tb-section { padding-top: 30px; }
.tb-hero-inner { padding-top: 42px; padding-bottom: 34px; }
.tb-tool-layout { padding-top: 22px; }
.tb-info-grid { margin-top: 22px; }
.tb-hubstrip { overflow: hidden; }
.tb-hubstrip .tb-scroll { box-sizing: border-box; width: 100%; }
.tb-theme-toggle {
  width: 38px;
  height: 38px;
  border: 1px solid var(--tb-border);
  border-radius: 10px;
  background: var(--tbc-b-ffffff);
  color:var(--tb-brand-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tb-theme-toggle svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
html.tb-dark { background: #0b110f; color-scheme: dark; }
html.tb-dark body { background: #0b110f; color: #edf7f3; }
html.tb-dark .tb-root {
  background: #0b110f !important;
  color: #edf7f3 !important;
  transition: background .2s ease, color .2s ease;
}
html.tb-dark .tb-root nav,
html.tb-dark .tb-hubstrip {
  background: rgba(12, 21, 18, .94) !important;
  border-color: #24342f !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24) !important;
}
html.tb-dark .tb-root a { color: inherit; }
html.tb-dark .tb-root [style*="background:#fff"],
html.tb-dark .tb-root [style*="background: #fff"],
html.tb-dark .tb-root [style*="background:#ffffff"],
html.tb-dark .tb-root [style*="background: #ffffff"] { background: #111a17 !important; }
html.tb-dark .tb-root [style*="background:#F8FAF9"],
html.tb-dark .tb-root [style*="background: #F8FAF9"],
html.tb-dark .tb-root [style*="background:#F7FAF8"],
html.tb-dark .tb-root [style*="background: #F7FAF8"],
html.tb-dark .tb-root [style*="background:#F3F7F5"],
html.tb-dark .tb-root [style*="background: #F3F7F5"] { background: #16211d !important; }
html.tb-dark .tb-root [style*="color:#101815"],
html.tb-dark .tb-root [style*="color: #101815"],
html.tb-dark .tb-root [style*="color:#18211E"],
html.tb-dark .tb-root [style*="color: #18211E"] { color: #edf7f3 !important; }
html.tb-dark .tb-root [style*="color:#5A655F"],
html.tb-dark .tb-root [style*="color: #5A655F"],
html.tb-dark .tb-root [style*="color:#6F7872"],
html.tb-dark .tb-root [style*="color: #6F7872"],
html.tb-dark .tb-root [style*="color:#647067"],
html.tb-dark .tb-root [style*="color: #647067"] { color: #9fb2aa !important; }
html.tb-dark .tb-root [style*="border:1px solid #EBEFEC"],
html.tb-dark .tb-root [style*="border: 1px solid #EBEFEC"],
html.tb-dark .tb-root [style*="border:1px solid #E3E8E6"],
html.tb-dark .tb-root [style*="border: 1px solid #E3E8E6"],
html.tb-dark .tb-root [style*="border:1px solid #DDE4E1"],
html.tb-dark .tb-root [style*="border: 1px solid #DDE4E1"] { border-color: #273a33 !important; }
html.tb-dark .tool-inline-runtime,
html.tb-dark .inline-tool-shell { background: #111a17 !important; color: #edf7f3 !important; }
html.tb-dark .tb-root input,
html.tb-dark .tb-root textarea,
html.tb-dark .tb-root select {
  background: #0e1714 !important;
  color: #edf7f3 !important;
  border-color: #30443c !important;
}
html.tb-dark .tb-root input::placeholder,
html.tb-dark .tb-root textarea::placeholder { color: var(--tbc-t-7f948b) !important; }
html.tb-dark .tb-root button:not([style*="background:#0E8C7E"]):not([style*="background: #0E8C7E"]):not(.tb-themebtn):not(.tb-theme-toggle) {
  background: #14201c !important;
  color: #dfeee9 !important;
  border-color: #30443c !important;
}
html.tb-dark .tb-theme-toggle { background: #161b19; color: #2dd4bf; border-color: #2a322e; }
@media (max-width: 720px) {
  .tb-hubstrip .tb-scroll { max-width: 100vw !important; padding-left: 16px !important; padding-right: 16px !important; }
  .tool-inline-runtime [style*="grid-template-columns:1fr 1fr"],
  .tool-inline-runtime [style*="grid-template-columns:1fr 56px 1fr"],
  .tool-inline-runtime [style*="grid-template-columns:300px 1fr"],
  .inline-tool-shell [style*="grid-template-columns:1fr 1fr"],
  .inline-tool-shell [style*="grid-template-columns:1fr 56px 1fr"],
  .inline-tool-shell [style*="grid-template-columns:300px 1fr"] { grid-template-columns: 1fr !important; }
  .tool-inline-runtime svg[width="260"],
  .inline-tool-shell svg[width="260"] { width: 220px !important; height: 220px !important; }
}
@media (max-width: 600px) {
  .tb-root input,
  .tb-root textarea,
  .tb-root select { font-size: 16px !important; }
  .tb-section-head h2 { font-size: 24px; }
  .tb-hub-card,
  .tb-tool-card { min-height: auto; padding: 17px; }
}
/* 8 hub main pages: full handoff-style category experience */
.tb-hub-main { --hub-accent: var(--hub-accent, var(--tb-brand)); --hub-soft: var(--hub-soft, var(--tb-brand-soft)); background: linear-gradient(180deg, var(--tbc-b-fbfcfb) 0%, var(--tbc-b-ffffff) 34%); }
.tb-hub-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: stretch; padding-top: 22px; }
.tb-hub-hero-copy { position: relative; overflow: hidden; min-height: 268px; padding: 34px; border: 1px solid var(--tbc-l-dfe8e4); border-radius: 20px; background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.90) 55%, rgba(255,255,255,.64)), var(--hub-soft); box-shadow: 0 18px 48px rgba(16,24,21,.07); }
.tb-hub-hero-copy::after { content: ""; position: absolute; inset: 0; background-image: var(--hub-image); background-repeat: no-repeat; background-size: contain; background-position: right center; opacity: .28; pointer-events: none; }
.tb-hub-hero-copy > * { position: relative; z-index: 1; }
.tb-hub-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--tbc-t-52615a); font-size: 13px; font-weight: 850; }
.tb-hub-title-line .tb-site-icon { width: 34px; height: 34px; border-radius: 11px; }
.tb-hub-title-line em { font-style: normal; font-family: "JetBrains Mono", monospace; color: var(--hub-accent); background: rgba(var(--tbc-wrgb),.84); border: 1px solid var(--tbc-l-d8e7e2); border-radius: 999px; padding: 4px 10px; }
.tb-hub-hero h1 { margin: 22px 0 0; max-width: 720px; font-size: clamp(34px, 5vw, 54px); line-height: 1.05; letter-spacing: 0; font-weight: 950; }
.tb-hub-hero p { max-width: 680px; margin: 14px 0 0; color: var(--tbc-t-53615b); font-size: 15px; line-height: 1.7; }
.tb-hub-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tb-hub-badges span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border: 1px solid var(--tbc-l-d8e7e2); border-radius: 999px; background: rgba(var(--tbc-wrgb),.78); color: #314039; font-size: 12px; font-weight: 800; }
.tb-hub-hero-panel { display: flex; flex-direction: column; gap: 14px; min-height: 268px; padding: 24px; border: 1px solid var(--tbc-l-dfe8e4); border-radius: 20px; background: rgba(var(--tbc-wrgb),.92); box-shadow: 0 18px 48px rgba(16,24,21,.07); }
.tb-hub-panel-kicker, .tb-hub-side-kicker { color: var(--hub-accent); font-size: 12px; font-weight: 900; }
.tb-hub-hero-panel h2 { margin: 0; font-size: 24px; line-height: 1.24; font-weight: 900; letter-spacing: 0; }
.tb-hub-searchbox { display: grid; gap: 8px; margin-top: 2px; }
.tb-hub-searchbox label { color: var(--tbc-t-52615a); font-size: 12px; font-weight: 850; }
.tb-hub-searchbox div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.tb-hub-searchbox input { min-width: 0; height: 44px; border: 1px solid var(--tbc-l-dce7e2); border-radius: 12px; padding: 0 12px; background: var(--tbc-b-fbfdfc); color: var(--tb-text); font-size: 14px; }
.tb-hub-searchbox button { height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--hub-accent); color: #fff; font-weight: 850; cursor: pointer; }
.tb-hub-quick-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tb-hub-quick-tags a { text-decoration: none; color: #314039; border: 1px solid var(--tbc-l-dfe8e4); background: var(--tbc-b-ffffff); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 800; }
.tb-hub-panel-actions { display: flex; gap: 8px; margin-top: auto; }
.tb-hub-featured { max-width: var(--tb-max); margin: 0 auto; padding: 20px 24px 0; }
.tb-hub-block-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.tb-hub-block-head > span { flex: none; font-family: "JetBrains Mono", monospace; color: var(--hub-accent); font-weight: 900; font-size: 13px; padding-top: 6px; }
.tb-hub-block-head h2 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 950; letter-spacing: 0; }
.tb-hub-block-head p { margin: 6px 0 0; color: var(--tbc-t-68756f); font-size: 13px; line-height: 1.6; }
.tb-hub-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tb-hub-feature-card { position: relative; display: grid; gap: 8px; min-height: 148px; padding: 18px; border: 1px solid var(--tbc-l-dfe8e4); border-radius: 15px; background: var(--tbc-b-ffffff); color: inherit; text-decoration: none; box-shadow: 0 12px 28px rgba(16,24,21,.045); }
.tb-hub-feature-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 15px 0 0 15px; background: linear-gradient(180deg, var(--hub-accent), var(--tb-brand-2)); }
.tb-hub-feature-card:hover { border-color: var(--tbc-l-bfe5dc); transform: translateY(-2px); transition: transform .16s ease, border-color .16s ease; }
.tb-hub-feature-no { font-family: "JetBrains Mono", monospace; color: var(--hub-accent); font-size: 12px; font-weight: 900; }
.tb-hub-feature-card strong { font-size: 17px; line-height: 1.35; font-weight: 900; }
.tb-hub-feature-card p { margin: 0; color: var(--tbc-t-64716b); font-size: 13px; line-height: 1.58; }
.tb-hub-feature-card em { align-self: end; color: var(--hub-accent); font-style: normal; font-size: 12px; font-weight: 900; }
.tb-hub-body { max-width: var(--tb-max); margin: 0 auto; padding: 22px 24px 0; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; align-items: start; }
.tb-hub-sidebar { position: sticky; top: 124px; display: grid; gap: 12px; }
.tb-hub-side-panel { padding: 16px; border: 1px solid var(--tbc-l-dfe8e4); border-radius: 16px; background: var(--tbc-b-ffffff); box-shadow: 0 10px 28px rgba(16,24,21,.045); }
.tb-hub-side-panel h2 { margin: 5px 0 12px; font-size: 18px; line-height: 1.3; font-weight: 950; }
.tb-hub-side-panel nav { display: grid; gap: 7px; }
.tb-hub-side-panel nav a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 9px; border: 1px solid var(--tbc-l-edf1ef); border-radius: 11px; background: var(--tbc-b-fbfdfc); color: #314039; text-decoration: none; }
.tb-hub-side-panel nav a span { font-family: "JetBrains Mono", monospace; color: var(--hub-accent); font-size: 11px; font-weight: 900; }
.tb-hub-side-panel nav a strong { font-size: 13px; font-weight: 850; }
.tb-hub-side-panel nav a:hover { border-color: var(--tbc-l-cfe7e1); background: var(--hub-soft); }
.tb-hub-side-dark { background: linear-gradient(150deg, #0f2f2b, #0e8c7e); color: #fff; border: 0; }
.tb-hub-side-dark span { color: rgba(255,255,255,.78); font-size: 12px; font-weight: 900; }
.tb-hub-side-dark p { margin: 0; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.62; }
.tb-hub-side-dark a { display: inline-flex; margin-top: 14px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 900; }
.tb-hub-content { min-width: 0; padding: 18px; border: 1px solid var(--tbc-l-dfe8e4); border-radius: 18px; background: var(--tbc-b-ffffff); box-shadow: 0 12px 34px rgba(16,24,21,.05); }
.tb-hub-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--tbc-l-edf1ef); }
.tb-hub-toolbar div { display: grid; gap: 3px; }
.tb-hub-toolbar span { font-family: "JetBrains Mono", monospace; color: var(--hub-accent); font-size: 12px; font-weight: 900; }
.tb-hub-toolbar h2 { margin: 0; font-size: 24px; line-height: 1.26; font-weight: 950; }
.tb-hub-toolbar p { margin: 0; color: var(--tbc-t-72807a); font-size: 12px; font-weight: 800; }
.tb-hub-tool-list { display: grid; gap: 9px; }
.tb-hub-list-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 88px; padding: 14px; border: 1px solid var(--tbc-l-e2eae7); border-radius: 14px; background: linear-gradient(180deg, var(--tbc-b-ffffff), var(--tbc-b-fbfdfc)); color: inherit; text-decoration: none; }
.tb-hub-list-card:hover { border-color: var(--tbc-l-bfe5dc); box-shadow: 0 10px 26px rgba(16,24,21,.055); }
.tb-hub-list-no { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--hub-soft); color: var(--hub-accent); font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 900; }
.tb-hub-list-body { min-width: 0; display: grid; gap: 4px; }
.tb-hub-list-body strong { font-size: 16px; line-height: 1.35; font-weight: 900; }
.tb-hub-list-body p { margin: 0; color: var(--tbc-t-637069); font-size: 13px; line-height: 1.54; }
.tb-hub-list-action { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--tbc-l-d9e7e2); border-radius: 999px; color: var(--hub-accent); font-size: 12px; font-weight: 900; }
.tb-hub-more { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 12px; border: 1px solid var(--tbc-l-dce7e2); border-radius: 12px; color: var(--hub-accent); text-decoration: none; font-weight: 900; }
.tb-hub-related { padding-top: 28px; }
.tb-hub-grid-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tb-hub-grid-compact .tb-hub-card { min-height: 170px; padding: 17px; }
@media (max-width: 1060px) {
  .tb-hub-hero { grid-template-columns: 1fr; }
  .tb-hub-hero-panel { min-height: auto; }
  .tb-hub-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-hub-body { grid-template-columns: 1fr; }
  .tb-hub-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tb-hub-hero { gap: 12px; padding-top: 14px; }
  .tb-hub-hero-copy { min-height: 230px; padding: 24px; }
  .tb-hub-hero h1 { font-size: 34px; }
  .tb-hub-hero-copy::after { opacity: .18; background-size: 92%; background-position: right bottom; }
  .tb-hub-featured, .tb-hub-body { padding-left: 16px; padding-right: 16px; }
  .tb-hub-feature-grid, .tb-hub-sidebar { grid-template-columns: 1fr; }
  .tb-hub-list-card { grid-template-columns: 42px minmax(0, 1fr); }
  .tb-hub-list-no { width: 42px; height: 42px; border-radius: 12px; }
  .tb-hub-list-action { grid-column: 2; justify-self: start; }
  .tb-hub-toolbar { align-items: flex-start; flex-direction: column; }
  .tb-hub-panel-actions { flex-direction: column; }
}
@media (max-width: 480px) {
  .tb-hub-searchbox div { grid-template-columns: 1fr; }
  .tb-hub-searchbox button { width: 100%; }
  .tb-hub-hero-copy, .tb-hub-hero-panel, .tb-hub-content { border-radius: 16px; }
  .tb-hub-block-head h2, .tb-hub-toolbar h2 { font-size: 21px; }
}

/* ZIP segmented mode control */
.runtime-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
  padding: 3px;
  border: 1px solid var(--tbc-l-dde4e1);
  border-radius: 13px;
  background: var(--tbc-b-f7faf8);
}
.runtime-mode-row legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.runtime-mode-option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}
.runtime-mode-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.runtime-mode-option span {
  display: grid;
  gap: 2px;
  min-height: 50px;
  align-content: center;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--tbc-t-3a4540);
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.runtime-mode-option strong {
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 850;
}
.runtime-mode-option small {
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--tbc-t-6b7670);
}
.runtime-mode-option:has(input:checked) span {
  border-color: #0E8C7E;
  background: #0E8C7E;
  color: #fff;
  box-shadow: 0 8px 18px -12px rgba(14, 140, 126, .55);
}
.runtime-mode-option:has(input:checked) small {
  color: rgba(255, 255, 255, .82);
}
.runtime-mode-option:focus-within span {
  outline: 2px solid #99F6E4;
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .runtime-mode-row { grid-template-columns: 1fr; }
}

/* ZIP file workbench */
.runtime-control-grid > .zip-workbench {
  grid-column: 1 / -1;
}
.zip-workbench {
  display: grid;
  gap: 8px;
}
.zip-file-drop.file-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  margin: 0;
  padding: 12px 14px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  border-style: dashed;
  background: linear-gradient(135deg, var(--tbc-b-f8fcfb), var(--tbc-b-eef9f6));
}
.zip-file-drop.file-drop:hover {
  border-color: #0E8C7E;
  background: var(--tbc-b-f2fbf8);
}
.zip-drop-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tbc-b-ddf5ef);
  color: var(--tbc-t-0e8c7e);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 900;
}
.zip-drop-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.zip-drop-copy strong {
  color: var(--tbc-t-101815);
  font-size: 14px;
  line-height: 1.35;
}
.zip-drop-copy small {
  color: var(--tbc-t-647067);
  font-size: 12px;
  line-height: 1.45;
}
.zip-file-input {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  cursor: pointer;
}
.zip-options-row {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) 1fr;
  gap: 8px;
  align-items: stretch;
}
.zip-folder-toggle,
.zip-hint {
  min-height: 52px;
  border: 1px solid var(--tbc-l-dde4e1);
  border-radius: 12px;
  background: var(--tbc-b-ffffff);
}
.zip-folder-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  cursor: pointer;
}
.zip-folder-toggle input {
  flex: none;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0;
  padding: 0 !important;
  accent-color: #0E8C7E;
}
.zip-folder-toggle span {
  display: grid;
  gap: 2px;
}
.zip-folder-toggle strong {
  color: var(--tbc-t-101815);
  font-size: 13px;
  line-height: 1.25;
}
.zip-folder-toggle small {
  color: var(--tbc-t-6b7670);
  font-size: 11.5px;
  line-height: 1.35;
}
.zip-hint {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 9px 12px;
  color: var(--tbc-t-52615a);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
}
.zip-status,
.zip-results {
  margin: 0;
}
.zip-status:empty,
.zip-results:empty {
  display: none;
}
.zip-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.zip-actions button {
  min-height: 40px !important;
  border-radius: 10px !important;
}
.zip-actions .primary {
  background: #0E8C7E !important;
  border-color: #0E8C7E !important;
  color: #fff !important;
}
html.tb-dark .zip-file-drop.file-drop,
html.tb-dark .zip-folder-toggle,
html.tb-dark .zip-hint {
  background: #111A17 !important;
  border-color: #30443C !important;
}
html.tb-dark .zip-drop-icon {
  background: #12342E;
  color: #5EEAD4;
}
html.tb-dark .zip-drop-copy strong,
html.tb-dark .zip-folder-toggle strong {
  color: #EDF7F3;
}
html.tb-dark .zip-drop-copy small,
html.tb-dark .zip-folder-toggle small,
html.tb-dark .zip-hint {
  color: #9FB2AA;
}
@media (max-width: 720px) {
  .zip-options-row,
  .zip-actions {
    grid-template-columns: 1fr;
  }
  .zip-file-drop.file-drop {
    align-items: flex-start;
  }
}

/* Runtime fragment polish */
.inline-tool-shell,
.tool-inline-runtime {
  color: var(--tb-text, var(--tbc-t-101815));
}
.tb-toolarea {
  margin: 8px 0 10px !important;
  padding: 6px !important;
  border: 1px solid var(--tbc-l-d9e9e5) !important;
  border-radius: 14px !important;
  background: var(--tbc-b-fbfefd) !important;
  box-shadow: none !important;
}
.tb-toolarea-label {
  margin: 2px 4px 8px !important;
  gap: 8px !important;
}
.tb-toolarea .inline-tool-shell,
.tb-toolarea .tool-inline-runtime {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tb-toolarea .runtime-tool-panel.card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tb-toolarea .runtime-tool-panel > [style*="border:1px solid #E6EBE9"],
.tb-toolarea .runtime-tool-panel > [style*="border: 1px solid #E6EBE9"],
.tb-toolarea .runtime-tool-panel > [style*="border:1px solid #EBEFEC"],
.tb-toolarea .runtime-tool-panel > [style*="border: 1px solid #EBEFEC"] {
  border: 0 !important;
  box-shadow: none !important;
}
.tb-toolarea [style*="border-bottom:1px solid #EAEEEC"],
.tb-toolarea [style*="border-bottom: 1px solid #EAEEEC"],
.tb-toolarea [style*="border-bottom:1px solid #F0F3F2"],
.tb-toolarea [style*="border-bottom: 1px solid #F0F3F2"],
.tb-toolarea [style*="border-top:1px solid #F7D7D4"],
.tb-toolarea [style*="border-top: 1px solid #F7D7D4"] {
  border-color: var(--tbc-l-eef4f1) !important;
}
.tb-toolarea [style*="border-right:1px solid #EAEEEC"],
.tb-toolarea [style*="border-right: 1px solid #EAEEEC"] {
  border-color: var(--tbc-l-eef4f1) !important;
}
.inline-tool-shell .runtime-control-grid,
.tool-inline-runtime .runtime-control-grid {
  gap: 12px;
  padding: 2px;
  box-sizing: border-box;
}
.inline-tool-shell .runtime-field-wide,
.tool-inline-runtime .runtime-field-wide {
  grid-column: 1 / -1;
}
.inline-tool-shell .runtime-field,
.tool-inline-runtime .runtime-field,
.inline-tool-shell .tool-output,
.tool-inline-runtime .tool-output,
.inline-tool-shell .status,
.tool-inline-runtime .status,
.inline-tool-shell .extension-output,
.tool-inline-runtime .extension-output,
.inline-tool-shell .extension-preview,
.tool-inline-runtime .extension-preview {
  border-color: var(--tbc-l-dce8e4);
  border-radius: 14px;
}
.inline-tool-shell .runtime-metric,
.tool-inline-runtime .runtime-metric {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  box-sizing: border-box;
  font-weight: 800;
  background: var(--tbc-b-ffffff);
}
.inline-tool-shell .tool-dropzone,
.tool-inline-runtime .tool-dropzone,
.inline-tool-shell .file-drop,
.tool-inline-runtime .file-drop,
.inline-tool-shell .extension-image-drop,
.tool-inline-runtime .extension-image-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 18px;
  border: 1px dashed var(--tbc-l-b7ded6);
  border-radius: 14px;
  background: var(--tbc-b-f6fcfa);
  color: var(--tbc-t-26332f);
  font-weight: 750;
  text-align: center;
}
.inline-tool-shell [data-icomp-drop].tool-dropzone,
.tool-inline-runtime [data-icomp-drop].tool-dropzone {
  min-height: 148px;
  padding: 28px 18px !important;
}
.inline-tool-shell button.primary,
.tool-inline-runtime button.primary {
  background: #0E8C7E !important;
  border-color: #0E8C7E !important;
  color: #fff !important;
}
.inline-tool-shell button.secondary,
.tool-inline-runtime button.secondary {
  background: var(--tbc-b-ffffff) !important;
  border: 1px solid var(--tbc-l-dde6e2) !important;
  color: var(--tbc-t-26332f) !important;
}
.inline-tool-shell textarea,
.tool-inline-runtime textarea,
.inline-tool-shell input,
.tool-inline-runtime input,
.inline-tool-shell select,
.tool-inline-runtime select {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.inline-tool-shell input[type="checkbox"],
.tool-inline-runtime input[type="checkbox"],
.inline-tool-shell input[type="radio"],
.tool-inline-runtime input[type="radio"] {
  width: auto;
  min-width: 16px;
  max-width: none;
  min-height: 16px;
  padding: 0;
  flex: 0 0 auto;
}
/* Interaction, focus + a11y polish. All rules are pseudo-class / pseudo-element based, so
   they layer on top of the panels' inline styles without needing to override them. */
.inline-tool-shell input,
.tool-inline-runtime input,
.inline-tool-shell select,
.tool-inline-runtime select,
.inline-tool-shell textarea,
.tool-inline-runtime textarea {
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.inline-tool-shell input:focus-visible,
.tool-inline-runtime input:focus-visible,
.inline-tool-shell select:focus-visible,
.tool-inline-runtime select:focus-visible,
.inline-tool-shell textarea:focus-visible,
.tool-inline-runtime textarea:focus-visible {
  outline: none;
  border-color: #0E8C7E !important;
  box-shadow: 0 0 0 3px rgba(14, 140, 126, .16) !important;
}
.inline-tool-shell input::placeholder,
.tool-inline-runtime input::placeholder,
.inline-tool-shell textarea::placeholder,
.tool-inline-runtime textarea::placeholder {
  color: var(--tbc-t-9aa7a2);
}
.inline-tool-shell button,
.tool-inline-runtime button {
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.inline-tool-shell button:hover:not(:disabled),
.tool-inline-runtime button:hover:not(:disabled) {
  transform: translateY(-1px);
}
.inline-tool-shell button:active:not(:disabled),
.tool-inline-runtime button:active:not(:disabled) {
  transform: translateY(0) scale(.985);
}
.inline-tool-shell button:focus-visible,
.tool-inline-runtime button:focus-visible {
  outline: 3px solid rgba(14, 140, 126, .30);
  outline-offset: 2px;
}
.inline-tool-shell button:disabled,
.tool-inline-runtime button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.inline-tool-shell .tool-output,
.tool-inline-runtime .tool-output,
.inline-tool-shell pre,
.tool-inline-runtime pre {
  line-height: 1.6;
}
/* Reference/link-hub tools render anchor "cards" with an inline border but no hover state
   -- give them a clear hover affordance. */
.inline-tool-shell a[href][style*="border"]:hover,
.tool-inline-runtime a[href][style*="border"]:hover {
  border-color: #0E8C7E !important;
}
@media (prefers-reduced-motion: reduce) {
  .inline-tool-shell input, .tool-inline-runtime input,
  .inline-tool-shell select, .tool-inline-runtime select,
  .inline-tool-shell textarea, .tool-inline-runtime textarea,
  .inline-tool-shell button, .tool-inline-runtime button {
    transition: none !important;
  }
  .inline-tool-shell button:hover:not(:disabled), .tool-inline-runtime button:hover:not(:disabled),
  .inline-tool-shell button:active:not(:disabled), .tool-inline-runtime button:active:not(:disabled) {
    transform: none !important;
  }
}
html.tb-dark .inline-tool-shell,
html.tb-dark .tool-inline-runtime {
  background: transparent !important;
  color: #EDF7F3 !important;
}
html.tb-dark .tb-toolarea {
  background: #111A17 !important;
  border-color: #273A33 !important;
  box-shadow: none !important;
}
html.tb-dark .inline-tool-shell [style*="background:#fff"],
html.tb-dark .tool-inline-runtime [style*="background:#fff"],
html.tb-dark .inline-tool-shell [style*="background:#fff;"],
html.tb-dark .tool-inline-runtime [style*="background:#fff;"],
html.tb-dark .inline-tool-shell [style*="background:#FAFBFC"],
html.tb-dark .tool-inline-runtime [style*="background:#FAFBFC"],
html.tb-dark .inline-tool-shell [style*="background:#FBFDFC"],
html.tb-dark .tool-inline-runtime [style*="background:#FBFDFC"],
html.tb-dark .inline-tool-shell [style*="background:#F8FAF9"],
html.tb-dark .tool-inline-runtime [style*="background:#F8FAF9"] {
  background: #16221E !important;
}
html.tb-dark .inline-tool-shell .runtime-field,
html.tb-dark .tool-inline-runtime .runtime-field,
html.tb-dark .inline-tool-shell .tool-output,
html.tb-dark .tool-inline-runtime .tool-output,
html.tb-dark .inline-tool-shell .status,
html.tb-dark .tool-inline-runtime .status,
html.tb-dark .inline-tool-shell .extension-output,
html.tb-dark .tool-inline-runtime .extension-output,
html.tb-dark .inline-tool-shell .extension-preview,
html.tb-dark .tool-inline-runtime .extension-preview,
html.tb-dark .inline-tool-shell .tb-panes,
html.tb-dark .tool-inline-runtime .tb-panes {
  background: #16221E !important;
  border-color: #2B4038 !important;
  color: #EDF7F3 !important;
}
html.tb-dark .inline-tool-shell .tool-dropzone,
html.tb-dark .tool-inline-runtime .tool-dropzone,
html.tb-dark .inline-tool-shell .file-drop,
html.tb-dark .tool-inline-runtime .file-drop,
html.tb-dark .inline-tool-shell .extension-image-drop,
html.tb-dark .tool-inline-runtime .extension-image-drop {
  background: #12231F !important;
  border-color: #2D6B61 !important;
  color: #E5F6F2 !important;
}
html.tb-dark .inline-tool-shell textarea,
html.tb-dark .tool-inline-runtime textarea,
html.tb-dark .inline-tool-shell input,
html.tb-dark .tool-inline-runtime input,
html.tb-dark .inline-tool-shell select,
html.tb-dark .tool-inline-runtime select {
  background: #101815 !important;
  border-color: #2B4038 !important;
  color: #EDF7F3 !important;
}
html.tb-dark .inline-tool-shell button.secondary,
html.tb-dark .tool-inline-runtime button.secondary {
  background: #16221E !important;
  border-color: #2B4038 !important;
  color: #DDEBE7 !important;
}
html.tb-dark .tb-toolarea [style*="border-bottom:1px solid #EAEEEC"],
html.tb-dark .tb-toolarea [style*="border-bottom: 1px solid #EAEEEC"],
html.tb-dark .tb-toolarea [style*="border-bottom:1px solid #F0F3F2"],
html.tb-dark .tb-toolarea [style*="border-bottom: 1px solid #F0F3F2"],
html.tb-dark .tb-toolarea [style*="border-right:1px solid #EAEEEC"],
html.tb-dark .tb-toolarea [style*="border-right: 1px solid #EAEEEC"] {
  border-color: #23352F !important;
}
@media (max-width: 720px) {
  .tb-toolarea {
    margin: 6px 0 10px !important;
    padding: 5px !important;
    border: 1px solid var(--tbc-l-d9e9e5) !important;
    border-radius: 12px !important;
  }
  .tb-toolarea .inline-tool-shell,
  .tb-toolarea .tool-inline-runtime {
    padding: 0 !important;
  }
  .tb-toolarea-label {
    margin: 2px 3px 7px !important;
  }
  .inline-tool-shell .runtime-control-grid,
  .tool-inline-runtime .runtime-control-grid {
    gap: 10px;
  }
  .inline-tool-shell :is(.tb-qrwork, .tb-photolayout, .tb-resultgrid, .tb-mapwork),
  .tool-inline-runtime :is(.tb-qrwork, .tb-photolayout, .tb-resultgrid, .tb-mapwork) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .inline-tool-shell :is(.tb-qrwork, .tb-photolayout, .tb-resultgrid, .tb-mapwork) > *,
  .tool-inline-runtime :is(.tb-qrwork, .tb-photolayout, .tb-resultgrid, .tb-mapwork) > * {
    min-width: 0;
  }
  .inline-tool-shell :is(.tb-qrwork, .tb-photolayout) > [style*="border-right"],
  .tool-inline-runtime :is(.tb-qrwork, .tb-photolayout) > [style*="border-right"] {
    border-right: 0 !important;
    border-bottom: 1px solid var(--tbc-l-eaeeec) !important;
  }
  .inline-tool-shell .tb-mapcanvas,
  .tool-inline-runtime .tb-mapcanvas {
    min-height: 360px !important;
  }
  .inline-tool-shell [data-expenseform-list] > div,
  .tool-inline-runtime [data-expenseform-list] > div,
  .inline-tool-shell [data-quotecalc-list] > div,
  .tool-inline-runtime [data-quotecalc-list] > div,
  .inline-tool-shell [data-unitprice-list] > div,
  .tool-inline-runtime [data-unitprice-list] > div,
  .inline-tool-shell [data-cd-rows] > div,
  .tool-inline-runtime [data-cd-rows] > div {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .inline-tool-shell [data-expenseform-list] > div > :first-child,
  .tool-inline-runtime [data-expenseform-list] > div > :first-child,
  .inline-tool-shell [data-quotecalc-list] > div > :first-child,
  .tool-inline-runtime [data-quotecalc-list] > div > :first-child,
  .inline-tool-shell [data-unitprice-list] > div > :first-child,
  .tool-inline-runtime [data-unitprice-list] > div > :first-child,
  .inline-tool-shell [data-cd-rows] > div > :first-child,
  .tool-inline-runtime [data-cd-rows] > div > :first-child {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .inline-tool-shell [data-expenseform-list] > div > :not(:first-child):not(button),
  .tool-inline-runtime [data-expenseform-list] > div > :not(:first-child):not(button),
  .inline-tool-shell [data-quotecalc-list] > div > :not(:first-child):not(button),
  .tool-inline-runtime [data-quotecalc-list] > div > :not(:first-child):not(button),
  .inline-tool-shell [data-unitprice-list] > div > :not(:first-child):not(button),
  .tool-inline-runtime [data-unitprice-list] > div > :not(:first-child):not(button),
  .inline-tool-shell [data-cd-rows] > div > :not(:first-child):not(button),
  .tool-inline-runtime [data-cd-rows] > div > :not(:first-child):not(button) {
    flex: 1 1 112px !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .inline-tool-shell [data-expenseform-list] > div > button,
  .tool-inline-runtime [data-expenseform-list] > div > button,
  .inline-tool-shell [data-quotecalc-list] > div > button,
  .tool-inline-runtime [data-quotecalc-list] > div > button,
  .inline-tool-shell [data-unitprice-list] > div > button,
  .tool-inline-runtime [data-unitprice-list] > div > button,
  .inline-tool-shell [data-cd-rows] > div > button,
  .tool-inline-runtime [data-cd-rows] > div > button {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .inline-tool-shell :is([data-expenseform-root], [data-quotecalc-root], [data-unitprice-root], [data-cd-root]) div:has(+ :is([data-expenseform-list], [data-quotecalc-list], [data-unitprice-list], [data-cd-rows])),
  .tool-inline-runtime :is([data-expenseform-root], [data-quotecalc-root], [data-unitprice-root], [data-cd-root]) div:has(+ :is([data-expenseform-list], [data-quotecalc-list], [data-unitprice-list], [data-cd-rows])) {
    display: none !important;
  }
  .inline-tool-shell [data-gridg-root] [style*="grid-template-columns:repeat(3,1fr)"],
  .tool-inline-runtime [data-gridg-root] [style*="grid-template-columns:repeat(3,1fr)"],
  .inline-tool-shell [data-theme-root] [style*="grid-template-columns:260px 1fr"],
  .tool-inline-runtime [data-theme-root] [style*="grid-template-columns:260px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .inline-tool-shell [data-gridg-root] [data-k="preview"],
  .tool-inline-runtime [data-gridg-root] [data-k="preview"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .inline-tool-shell .tool-dropzone,
  .tool-inline-runtime .tool-dropzone,
  .inline-tool-shell .file-drop,
  .tool-inline-runtime .file-drop {
    min-height: 68px;
    padding: 14px;
  }
}
/* End runtime fragment polish */