.ai-tools-section,.ai-tools-page{padding:1.5rem}
.ai-tools-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1rem}
.label{text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;color:var(--gotem-muted)}
.sub{font-size:.75rem;color:var(--gotem-muted)}
.btn-outline{
  border:1px solid var(--gotem-accent);color:var(--gotem-accent);
  background:none;padding:.45rem .85rem;border-radius:.55rem;text-decoration:none
}
.btn-outline:hover{background:rgba(59,130,246,.15)}

.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
#tools-search{
  background:var(--gotem-card);border:1px solid var(--gotem-border);border-radius:.6rem;
  padding:.55rem .75rem;color:var(--gotem-text);width:260px
}
.filters{display:flex;gap:.45rem;flex-wrap:wrap}
.chip{
  background:#111827;border:1px solid var(--gotem-border);color:var(--gotem-muted);
  padding:.42rem .7rem;border-radius:.55rem;font-size:.75rem;cursor:pointer
}
.chip.is-active,.chip:hover{background:#1e3a8a;border-color:#3b82f6;color:#e6edf3}

.tool-grid{display:grid;gap:.9rem}
.tool-grid-4{grid-template-columns:repeat(4,1fr)}
.tool-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.tool-grid-4,.tool-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tool-grid-4,.tool-grid-3{grid-template-columns:1fr}}

.tool-card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid var(--gotem-border);border-radius:14px;padding:1rem;
  box-shadow:var(--gotem-shadow);transition:transform .2s ease
}
.tool-card:hover{transform:translateY(-2px)}
.tool-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(600px circle at var(--x,50%) var(--y,50%), rgba(56,189,248,.15), transparent 40%)
}
.tool-card:hover::before{opacity:1}

.tool-top{display:flex;justify-content:space-between;align-items:start;margin-bottom:.6rem}
.tool-title{font-weight:600;font-size:15px;letter-spacing:.01em}
.tool-sub{color:var(--gotem-muted);font-size:13px;line-height:1.4;margin:.35rem 0 .7rem}
.tool-cat{margin-top:.3rem;font-size:11px;letter-spacing:.08em;color:var(--gotem-muted)}
.icon-btn{
  padding:.36rem;border:1px solid var(--gotem-border);border-radius:8px;background:transparent;cursor:pointer
}
.icon-btn:hover{background:rgba(255,255,255,.05)}
.icon{width:16px;height:16px;stroke:#94a3b8;stroke-width:1.6}
.pin.is-pinned{background:#172554;border-color:#1e3a8a}

.btn-cta{
  border:1px solid rgba(29,155,240,.35);background:rgba(29,155,240,.10);
  color:var(--gotem-blue);padding:.5rem .9rem;border-radius:.7rem;font-size:.85rem;font-weight:500;cursor:pointer
}
.btn-cta:hover{background:rgba(29,155,240,.20);border-color:rgba(29,155,240,.6)}
.hidden{display:none!important}

/* ===== Fixed overlay modal (mobile-safe) ===== */
:root{ --modal-max-w: 760px; }

.modal-overlay[hidden]{ display: none !important; }

.modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* prevent background scroll on some Androids when keyboard opens */
  touch-action: none;
}

/* dynamic viewport unit for iOS */
@supports (height: 100dvh){
  .modal-overlay{ min-height: 100dvh; }
}
@supports not (height: 100dvh){
  .modal-overlay{ min-height: calc(var(--vh, 1vh) * 100); }
}

.modal-panel{
  width: min(var(--modal-max-w), 94vw);
  max-height: min(92dvh, 92vh);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #0b0e12;               /* your dark panel bg */
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;                   /* clip sticky areas */
}

/* Header sticks */
.modal-header{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(9,11,14,.95);
  backdrop-filter: saturate(115%) blur(4px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Scroll goes here */
.modal-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px;
  flex: 1 1 auto;
}

.modal-footer{
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(9,11,14,.95);
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Inputs: avoid iOS zoom-on-focus and overflow */
.modal-panel input, .modal-panel select, .modal-panel textarea{
  width: 100%;
  min-width: 0;
  font-size: 16px; /* >=16px prevents iOS zoom */
  word-break: break-word;
}

/* Two columns -> one column on phones */
.modal-panel .row{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 640px){
  .modal-panel{ width: 96vw; }
  .modal-panel .row{ grid-template-columns: 1fr; }
  .modal-footer .btn{ flex: 1 1 auto; }
}

/* Lock page scroll when a modal is open */
body.modal-open{
  overflow: hidden;
  height: 100dvh;
}