/* Mobile-first, clean look */
.gskq-wrap {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, "Noto Sans", sans-serif;
  color: #0f172a;
  --gskq-radius: 14px;
  --gskq-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.gskq-toolbar { display:flex; gap:10px; margin-bottom:10px; }
.gskq-toolbar button {
  font-size:16px; padding:10px 14px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; box-shadow: var(--gskq-shadow);
}
.gskq-toolbar .gskq-danger { background:#fee2e2; border-color:#fecaca; }

.gskq-modal {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5);
  z-index:9999; align-items:center; justify-content:center; padding:14px;
}
.gskq-modal-content {
  width:100%; max-width:420px; background:#fff; border-radius:var(--gskq-radius);
  padding:18px; box-shadow: var(--gskq-shadow);
}
.gskq-modal-content h3 { margin:0 0 10px 0; font-size:20px; }
.gskq-modal-content label { display:flex; flex-direction:column; gap:6px; margin:8px 0; font-size:16px; }
.gskq-modal-content input {
  padding:12px; font-size:16px; border:1px solid #e5e7eb; border-radius:10px; outline:none;
}
.gskq-actions { display:flex; gap:10px; margin-top:8px; }
.gskq-actions button {
  font-size:16px; padding:10px 14px; border-radius:12px; border:1px solid #e5e7eb; background:#f8fafc;
}
.gskq-hint { font-size:12px; color:#64748b; margin-top:10px; }

.gskq-table-wrap { width:100%; overflow-x:auto; }
#gskq-table { width:100%; border-collapse:collapse; font-size:14px; background:#fff; border-radius:12px; overflow:hidden; }
#gskq-table thead th {
  position:sticky; top:0; background:#f1f5f9; font-weight:600; text-align:left; padding:10px;
  border-bottom:1px solid #e2e8f0;
}
#gskq-table td { padding:10px; border-bottom:1px solid #f1f5f9; vertical-align:top; word-break:break-word; }
#gskq-table tr:hover td { background:#fafafa; }
.gskq-col-actions { width:88px; }

.gskq-cell { border-radius:10px; }
.gskq-active { outline:3px solid #22c55e; outline-offset:2px; border-radius:10px; }

.gskq-actions button {
  font-size:14px; padding:6px 10px; border-radius:10px; border:1px solid #e5e7eb; background:#fff;
}
.gskq-muted { color:#94a3b8; }

.gskq-legend { margin-top:8px; font-size:12px; color:#64748b; }

/* Mobile optimizations */
@media (max-width: 640px) {
  #gskq-table { font-size:12px; }
  #gskq-table td, #gskq-table th { padding:8px; }
  .gskq-toolbar button { font-size:15px; padding:9px 12px; }
  .gskq-modal-content input { font-size:16px; padding:12px; }
}


/* === Mobile Scroll & Smaller Fonts — override === */
.gskq-modal { display:flex; align-items:center; justify-content:center; padding:12px; }
.gskq-modal-content {
  width: min(680px, 100% - 24px);
  max-height: 90vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* iOS Safari dynamic viewport fallback */
@supports (height: 100dvh) {
  .gskq-modal-content { max-height: calc(100dvh - 24px); }
}

/* Make page behind modal non-scrollable when modal is open */
.gskq-modal[style*="display: block"] ~ * { touch-action: none; }

/* Slightly smaller type across the form */
.gskq-wrap { font-size: 0.95rem; }
.gskq-toolbar button { font-size: 15px; padding: 9px 12px; }
.gskq-modal-content h3 { font-size: 18px; }
.gskq-field label { font-size: 13px; }
.gskq-modal-content input { font-size: 15px; padding: 11px; }
.gskq-actions button { font-size: 13px; padding: 8px 12px; }

/* YT search UI slightly smaller */
.gskq-yt-query { font-size: 14px; padding: 9px 10px; }
.gskq-yt-title { font-size: 13px; }
.gskq-yt-channel { font-size: 11px; }


/* === Strong modal scroll fix for iOS/Chrome mobile === */
.gskq-modal {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: none; /* keep original toggle via JS */
}
.gskq-modal[style*="display: block"] {
  display: block;
}

.gskq-modal-content {
  max-height: calc(100dvh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Support older engines without dvh */
@supports not (height: 100dvh) {
  .gskq-modal { height: 100vh; }
  .gskq-modal-content { max-height: calc(100vh - 24px); }
}

/* Lock page scroll when modal open */
body.gskq-lock {
  position: fixed;
  width: 100%;
  overflow: hidden;
  touch-action: none;
}

/* Slightly smaller fonts inside modal only */
.gskq-modal-content { font-size: 0.92rem; }
.gskq-modal-content h3 { font-size: 17px; }
.gskq-modal-content .gskq-field label { font-size: 12.5px; }
.gskq-modal-content input { font-size: 14px; padding: 10px; }
.gskq-modal-content .gskq-actions button { font-size: 13px; padding: 10px 12px; }

/* Ensure footer button stays visible */
.gskq-actions { position: sticky; bottom: 0; background: #fff; padding-top: 8px; }