body.toolbox-page, body.toolbox-page *{ box-sizing:border-box; }
body.toolbox-page{ background:#fff; }

:root{
  --tb-bg: radial-gradient(1200px 700px at 20% 0%, rgba(0, 156, 255, .10), transparent 60%),
           radial-gradient(900px 500px at 80% 10%, rgba(255, 140, 0, .10), transparent 60%),
           linear-gradient(#fbfbfd, #f7f7fb);
  --tb-card: #fff;
  --tb-border: rgba(0,0,0,.08);
  --tb-shadow: 0 12px 30px rgba(0,0,0,.08);
  --tb-shadow2: 0 18px 50px rgba(0,0,0,.10);
  --tb-radius: 16px;
}

.toolbox-wrap{
  position: relative;
  z-index: 1;
  background: var(--tb-bg);
  padding: calc(var(--tb-header-offset, 140px) + 18px) 0 calc(40px + var(--tb-bottom-offset, 110px));
}

.toolbox-main{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

.toolbox-hero{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow);
  padding: 16px;
  display:flex;
  gap: 14px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom: 14px;
}
.toolbox-hero h1{ font-size: 20px; margin: 0 0 6px 0; }
.toolbox-hero p{ margin: 0; color: rgba(0,0,0,.65); font-size: 14px; }
.toolbox-hero .tb-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.tb-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid var(--tb-border);
  background: #fff;
  cursor:pointer;
  text-decoration:none;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tb-btn:hover{ transform: translateY(-1px); box-shadow: var(--tb-shadow2); }
.tb-btn.primary{ background:#111; color:#fff; border-color: rgba(0,0,0,.2); }
.tb-btn.ghost{ background: rgba(255,255,255,.7); }

.toolbox-steps{ display:flex; gap: 8px; flex-wrap:wrap; margin: 10px 0 0; }
.toolbox-step{
  font-size: 12px;
  border: 1px dashed rgba(0,0,0,.18);
  background: rgba(0,0,0,.03);
  border-radius: 999px;
  padding: 6px 10px;
}

.toolbox-filter{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  padding: 12px;
  margin-bottom: 14px;
}
.tb-filter-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.toolbox-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.tb-card{
  background: var(--tb-card);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 14px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tb-card:hover{ transform: translateY(-2px); box-shadow: var(--tb-shadow2); }
.tb-card h3{ margin:0 0 8px 0; font-size:16px; }
.tb-meta{ display:flex; gap:6px; flex-wrap:wrap; margin-top: 10px; }
.tb-pill{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
}

.toolbox-tool{
  background: rgba(255,255,255,.95);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow);
  padding: 14px;
}

.tb-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px){ .tb-row{ grid-template-columns: 1fr; } }

.tb-field label{ display:block; font-size: 13px; margin: 10px 0 6px; color: rgba(0,0,0,.75); }
.tb-field input, .tb-field select, .tb-field textarea{
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
  color:#111;
}
.tb-actions-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top: 12px; }
.tb-note{ color: rgba(0,0,0,.6); font-size: 12px; margin-top: 10px; line-height: 1.6; }
.tb-output{
  width: 100%;
  min-height: 260px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #fbfbfb;
  color:#111;
}

/* Repeat / collapsible */
.tb-repeat{ margin-top: 8px; border:1px solid rgba(0,0,0,.10); border-radius: 14px; background: rgba(255,255,255,.9); overflow:hidden; }
.tb-repeat-head{ display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; background: rgba(0,0,0,.03); }
.tb-repeat-head .title{ font-weight: 700; font-size: 13px; }
.tb-repeat-head .actions{ display:flex; gap:8px; flex-wrap:wrap; }
.tb-repeat-body{ padding: 10px 12px; }
.tb-item{ border:1px solid rgba(0,0,0,.10); border-radius: 14px; margin-bottom: 10px; background:#fff; }
.tb-item details{ padding: 10px 12px; }
.tb-item summary{ cursor:pointer; font-weight:700; font-size: 13px; list-style:none; }
.tb-item summary::-webkit-details-marker{ display:none; }
.tb-item summary:before{ content:"▸"; display:inline-block; margin-right:8px; transform: translateY(-1px); }
.tb-item details[open] summary:before{ content:"▾"; }
.tb-item-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.tb-mini{ padding:8px 10px; border-radius: 999px; border:1px solid rgba(0,0,0,.10); background:#fff; cursor:pointer; }
.tb-mini:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.08); transform: translateY(-1px); }


/* v19 badges */
.tb-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;}
.tb-badge.ok{background:#e7f7ec;color:#1f7a3a;border:1px solid #b9e7c6;}
.tb-badge.ng{background:#fdecec;color:#9a1f1f;border:1px solid #f3b6b6;}


.tb-app{display:flex;flex-direction:column;gap:14px;}
.tb-tool-hero{align-items:stretch;}
.tb-tool-hero-main{display:flex;flex-direction:column;gap:6px;min-width:280px;flex:1;}
.tb-back-row{display:flex;gap:8px;flex-wrap:wrap;}
.tb-help{min-width:260px;max-width:420px;background:rgba(255,255,255,.92);border:1px solid var(--tb-border);border-radius:14px;padding:10px 12px;}
.tb-help summary{cursor:pointer;font-weight:700;list-style:none;}
.tb-help summary::-webkit-details-marker{display:none;}
.tb-help h2{font-size:15px;margin:10px 0 6px;}
.tb-help-body{font-size:14px;line-height:1.8;color:rgba(0,0,0,.8);}
.tb-stack{display:flex;flex-direction:column;gap:10px;}
.tb-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.tb-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.tb-toolbar > *{flex:0 0 auto;}
.tb-toolbar .grow{flex:1 1 220px;min-width:180px;}
.tb-toolbar .grow-wide{flex:2 1 320px;min-width:220px;}
.tb-alert{border-radius:12px;padding:12px 14px;border:1px solid rgba(0,0,0,.1);background:#f7f7fb;}
.tb-alert.success{background:#ecfdf3;border-color:#b7e3c6;color:#166534;}
.tb-alert.error{background:#fef2f2;border-color:#efc1c1;color:#991b1b;}
.tb-small{font-size:12px;color:rgba(0,0,0,.65);word-break:break-all;}
.tb-note2{font-size:13px;line-height:1.8;color:rgba(0,0,0,.72);}
.tb-card h2{margin-top:0;}
.tb-table{width:100%;border-collapse:collapse;display:block;overflow:auto;}
.tb-table th,.tb-table td{border:1px solid rgba(0,0,0,.08);padding:8px 10px;text-align:left;vertical-align:top;background:#fff;}
.tb-table th{position:sticky;top:0;background:#f7f7fb;cursor:pointer;}
textarea.tb-input{min-height:120px;resize:vertical;}
@media (max-width:760px){
  .toolbox-main{padding:0 12px;}
  .tb-help{max-width:none;min-width:0;width:100%;}
}

.tb-floating-tools{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 24px));}
.tb-floating-help{box-shadow:var(--tb-shadow2);background:#fff;}
.tb-userbar a{text-decoration:underline;}
.tb-toolbar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;align-items:center;}
.tb-toolbar > *{min-width:0;grid-column:span 3;}
.tb-toolbar .grow{grid-column:span 4;}
.tb-toolbar .grow-wide{grid-column:span 6;}
.tb-toolbar button{width:100%;}
@media (max-width:760px){
 .tb-toolbar{grid-template-columns:1fr;}
 .tb-toolbar > *, .tb-toolbar .grow, .tb-toolbar .grow-wide{grid-column:auto; width:100%;}
 .tb-floating-tools{left:12px;right:12px;bottom:12px;max-width:none;}
}


/* Shared form controls for public tools */
.tb-input, .tb-select, .tb-textarea,
.toolbox-main input[type="text"], .toolbox-main input[type="email"], .toolbox-main input[type="number"], .toolbox-main input[type="password"],
.toolbox-main input[type="search"], .toolbox-main select, .toolbox-main textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #cfd6df;
  border-radius:14px;
  background:#fff;
  color:#17212b;
  font-size:15px;
  line-height:1.45;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.02);
}
.toolbox-main textarea{min-height:120px; resize:vertical;}
.toolbox-main label{display:block; margin:0 0 6px; font-size:13px; font-weight:700; color:#304154;}
.tb-btn2{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:11px 16px; border-radius:14px; border:1px solid #cfd6df;
  background:#fff; color:#17212b; cursor:pointer; text-decoration:none; font-weight:700;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.tb-btn2.primary{ background:#1b2634; color:#fff; border-color:#1b2634; }
.tb-btn2.ghost{ background:#fff; }
.tb-btn2:hover, .tb-btn:hover{ filter:brightness(.98); }
.tb-grid.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.tb-grid.three{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.tb-section{ display:flex; flex-direction:column; gap:12px; }
.tb-fieldset{ display:flex; flex-direction:column; gap:10px; }
.tb-card, .toolbox-tool, .toolbox-filter{ overflow:visible; }
.tb-card > * + *, .toolbox-tool > * + *{ margin-top:12px; }
.tb-actions-bar .tb-btn, .tb-actions-bar .tb-btn2{ min-width:140px; }
.tb-note, .tb-note2{ max-width:80ch; }
.tb-userbar{position:sticky; top:0; z-index:40; background:#0f172a; color:#fff;}
.tb-userbar-inner{max-width:1180px; margin:0 auto; padding:10px 18px; display:flex; gap:14px; justify-content:space-between; align-items:center; flex-wrap:wrap;}
.tb-userbar-copy{font-size:13px; color:rgba(255,255,255,.85);}
.tb-userbar-links{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.tb-userbar-links a{color:#fff; text-decoration:underline; font-weight:700;}
.tb-userbar-mail{font-size:13px; color:rgba(255,255,255,.85);}
.tb-modal{position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; padding:20px; z-index:120;}
.tb-modal.open{display:flex;}
.tb-modal-card{width:min(720px, 100%); max-height:min(80vh, 900px); overflow:auto; background:#fff; border-radius:20px; border:1px solid rgba(0,0,0,.08); box-shadow:0 30px 90px rgba(0,0,0,.25); padding:18px;}
.tb-modal-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px;}
.tb-floating-tools{align-items:flex-end;}
.tb-floating-tools .tb-btn{min-width:170px; justify-content:center;}
.tb-toolbar{margin-bottom:14px;}
.tb-toolbar .tb-input, .tb-toolbar .tb-select{height:48px; min-height:48px;}
.tb-table-search{max-width:360px;}
@media (max-width:760px){
  .tb-grid.two, .tb-grid.three{ grid-template-columns:1fr; }
  .tb-actions-bar .tb-btn, .tb-actions-bar .tb-btn2{ width:100%; min-width:0; }
  .tb-userbar-inner{padding:10px 12px;}
  .tb-modal{padding:12px;}
  .tb-modal-card{padding:14px; border-radius:16px;}
}