.topbar-row, .toolbar-row, .field-row, .card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-row { justify-content: space-between; align-items: center; gap: 12px; height: 100%; flex-wrap: wrap; }
.topbar-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.topbar-group:last-child { justify-content: flex-end; }
.wrap-row { flex-wrap: wrap; }
.compact-select { min-width: 210px; width: auto; flex: 0 0 240px; }
.button-fixed { flex: 0 0 auto; white-space: nowrap; }
.clear-client-btn { min-width: 144px; }
.admin-btn { min-width: 240px; }
.stock-btn { min-width: 144px; }
.monthly-btn { min-width: 252px; }
.select, .input, .textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
}
.button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 8px 12px;
  cursor: pointer;
}
.button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.mode-switch { display: flex; gap: 8px; }
.mode-switch .active { background: var(--accent); color: #fff; border-color: var(--accent); }
.filter-group { display: grid; gap: 8px; margin-bottom: 14px; }
.filter-label, .panel-title, .card-title { font-weight: 700; }
.panel-title-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.muted { color: var(--muted); font-size: 12.3px; }
.status-pill { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); }
.status-pill.ok { color: #166534; background: #ecfdf5; border-color: #bbf7d0; }
.status-pill.bad { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.result-list { display: grid; gap: 10px; }
.result-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.result-card:hover { border-color: #93c5fd; box-shadow: 0 0 0 1px #bfdbfe inset; }
.result-card.selected { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6 inset; }
.result-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11.3px; margin-bottom: 6px; }
.result-summary { margin: 0; color: #374151; font-size: 12.3px; line-height: 1.5; }
.headline-sm { font-size: 14.3px; line-height: 1.4; }
.detail-title { font-size: 17.3px; margin-bottom: 8px; }
.preview-box { white-space: pre-wrap; font-size: 12.3px; line-height: 1.65; color: #1f2937; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #f9fafb; margin-top: 8px; }
.detail-block { margin-top: 14px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { font-size: 11px; padding: 4px 8px; border-radius: 999px; background: #f3f4f6; color: #374151; }
.error-box { padding: 10px 12px; border-radius: 10px; background: #fef2f2; color: #991b1b; font-size: 12.3px; }
.empty-state { padding: 16px 4px; color: var(--muted); }
#modalRoot { display: none; }
#modalRoot.is-open { display: block; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.36);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-window {
  width: min(980px, 100%); max-height: 90vh; overflow: hidden;
  background: #fff; border-radius: 16px; border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.modal-header { display:flex; justify-content: space-between; align-items:center; gap:12px; padding: 14px 16px; border-bottom:1px solid var(--line); }
.modal-body { padding: 16px; overflow: auto; }
.iframe-wrap { width: 100%; height: 100%; min-height: 420px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.iframe-wrap iframe { width: 100%; height: 100%; border: 0; }

.button:focus, .status-pill:focus { outline: 2px solid #cbd5e1; outline-offset: 1px; }
.admin-grid { display:grid; grid-template-columns: 1fr 1fr 1.2fr; gap:20px; }
.admin-card { border:1px solid var(--line); border-radius:18px; padding:18px; background:#fff; }
.admin-card h3 { margin:0 0 16px; font-size:17.3px; }
.admin-input-row { display:flex; gap:10px; margin-bottom:14px; }
.admin-list { display:grid; gap:12px; }
.admin-item { border:1.5px solid #dbe3f0; border-radius:16px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px; background:#fff; }
.admin-item.selected { border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,.15); }
.admin-folder { border:1px solid #e5e7eb; border-radius:14px; padding:12px; background:#fafafa; margin-top:10px; transition:border-color .16s ease, box-shadow .16s ease; }
.admin-folder.selected { border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,.15); background:#fff; }
.admin-folder-header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }
.admin-folder-title { font-weight:700; }
.admin-keyword-list { display:grid; gap:10px; }
.admin-keyword-item { display:flex; justify-content:space-between; align-items:center; gap:8px; border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; background:#fff; }
.admin-help { color:var(--muted); font-size:12.3px; margin-top:10px; }
@media (max-width: 1080px) { .admin-grid { grid-template-columns:1fr; } }
.button:active { transform: none; }
.modal-overlay { z-index: 1000; }

@media (max-width: 1180px) {
  .topbar-row { align-items: stretch; }
  .topbar-group { width: 100%; }
  .topbar-group:last-child { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .compact-select { flex: 1 1 140px; min-width: 0; }
  .clear-client-btn, .admin-btn, .stock-btn, .monthly-btn { min-width: 0; }
}

.panel-shell { font-size: 15.33px; }
.panel-header, .panel-body { font-size: inherit; }
.panel-title, .filter-label, .card-title { font-size: 15.3px; }
.topbar-group { gap: 10px; }
.topbar-group:first-child { flex: 1 1 54%; }
.topbar-group:last-child { flex: 1 1 36%; }
.input-stock { max-width: 160px; }
.admin-stock-row { margin-bottom: 14px; }