/* AI creation and operation tool directory: a compact, high-contrast control surface. */
.fh-workbench {
  --workbench-line:#ffffff14;
  grid-column:1/5;
  grid-row:1/3;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:23px 21px 13px;
  border:1px solid #69758422;
  border-radius:18px;
  color:#f7f8fa;
  background:
    radial-gradient(circle at 100% 0,#46586b2b,transparent 35%),
    radial-gradient(circle at 0 44%,#25394b28,transparent 36%),
    linear-gradient(145deg,#1c2229,#222a32 58%,#1c232a);
  box-shadow:inset 0 1px 0 #ffffff10,inset 0 -1px 0 #00000032,0 18px 38px -29px #07111bb8;
}
.fh-workbench::before {
  position:absolute;
  z-index:-1;
  inset:0;
  content:"";
  opacity:.2;
  pointer-events:none;
  background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
}
.fh-workbench::after {
  position:absolute;
  z-index:-1;
  right:-84px;
  top:-96px;
  width:250px;
  height:250px;
  border-radius:50%;
  content:"";
  pointer-events:none;
  background:radial-gradient(circle,#6e8aa834,transparent 69%);
}
.fh-workbench .fh-heading { align-items:flex-start; gap:12px; }
.fh-workbench .fh-heading h2 { color:#f7f8fa; font-size:clamp(23px,1.55vw,29px); font-weight:650; letter-spacing:-.035em; }
.fh-workbench .fh-heading p { margin-top:8px; color:#9da5af; font-size:clamp(11px,.76vw,13px); }
.fh-workbench-mark {
  display:grid;
  place-items:center;
  flex:0 0 42px;
  height:42px;
  padding:0;
  border:1px solid #ffffff17;
  border-radius:12px;
  color:#c3c9d0;
  background:linear-gradient(145deg,#ffffff09,#ffffff02);
  box-shadow:inset 0 1px 0 #ffffff0d,0 8px 18px -14px #000;
}
.fh-workbench-mark svg { width:22px; height:22px; }
.fh-workbench-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 1px 11px; color:#a3aab3; font-size:clamp(10px,.71vw,12px); }
.fh-workbench-summary>span { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.fh-workbench-summary i { width:6px; height:6px; border-radius:50%; background:#4daaf2; box-shadow:0 0 0 4px #4daaf215,0 0 11px #4daaf26b; }
.fh-workbench-summary svg { width:14px; height:14px; }
.fh-workbench-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(50px,1fr); gap:7px; flex:1; align-content:start; }
.fh-workbench-tool {
  --tool-tone:#6da8f2;
  position:relative;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 12px;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:6px 8px;
  border:1px solid #ffffff10;
  border-radius:10px;
  color:#f5f7f9;
  background:linear-gradient(135deg,#ffffff08,#ffffff0255);
  box-shadow:inset 0 1px 0 #ffffff08,0 5px 15px -14px #000;
}
.fh-workbench-tool[data-tone="gold"] { --tool-tone:#f2bc58; }
.fh-workbench-tool[data-tone="coral"] { --tool-tone:#f27f76; }
.fh-workbench-tool[data-tone="teal"] { --tool-tone:#43d0b0; }
.fh-workbench-tool[data-tone="violet"] { --tool-tone:#bd80e5; }
.fh-workbench-icon {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  color:color-mix(in srgb,var(--tool-tone) 92%,white);
  border:1px solid color-mix(in srgb,var(--tool-tone) 30%,#ffffff12);
  border-radius:9px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--tool-tone) 36%,#26303a),color-mix(in srgb,var(--tool-tone) 15%,#20272f));
  box-shadow:inset 0 1px 0 #ffffff22,0 6px 13px -10px var(--tool-tone);
}
.fh-workbench-icon svg { width:20px; height:20px; stroke-width:1.75; }
.fh-workbench-copy { display:flex; min-width:0; flex-direction:column; gap:2px; }
.fh-workbench-copy strong { overflow:hidden; color:#f1f3f6; font-size:clamp(11.5px,.91vw,14px); font-weight:600; line-height:1.38; text-overflow:ellipsis; white-space:nowrap; }
.fh-workbench-copy small { overflow:hidden; color:#98a0ab; font-size:clamp(9px,.66vw,11px); line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.fh-workbench-tool::after { color:#8f98a4; content:"›"; font-size:21px; line-height:1; transition:color .18s ease,transform .18s ease; }
.fh-workbench-tool:hover,.fh-workbench-tool:focus-visible { border-color:color-mix(in srgb,var(--tool-tone) 30%,#ffffff1f); background:linear-gradient(135deg,#ffffff0f,color-mix(in srgb,var(--tool-tone) 6%,transparent)); box-shadow:inset 0 1px 0 #ffffff12,0 8px 18px -14px #000; transform:translateY(-1px); }
.fh-workbench-tool:hover strong { color:#fff; }
.fh-workbench-tool:hover .fh-workbench-icon { background:linear-gradient(145deg,color-mix(in srgb,var(--tool-tone) 48%,#26303a),color-mix(in srgb,var(--tool-tone) 22%,#20272f)); }
.fh-workbench-tool:hover::after { color:var(--tool-tone); transform:translateX(2px); }
.fh-workbench-tool:focus-visible { outline:2px solid color-mix(in srgb,var(--tool-tone) 70%,white); outline-offset:2px; }
.fh-workbench footer { min-height:43px; margin-top:12px; padding-top:5px; border-top:1px solid var(--workbench-line); }
.fh-workbench footer a { width:100%; justify-content:space-between; color:#4facf1; font-size:clamp(11px,.75vw,13px); }
.fh-workbench footer a:hover { color:#8bcaff; }
@media(prefers-reduced-motion:reduce){.fh-workbench *{transition:none!important}}