:root{
  --svv-bg:#f6f7f7;
  --svv-card:#fff;
  --svv-border:#e2e4e7;
  --svv-accent:#1e4fd1;
  --svv-muted:#6c7781;
  --svv-success:#46b450;
  --svv-radius:14px;
  --svv-shadow-1:0 1px 2px rgba(0,0,0,.04);
  --svv-shadow-2:0 6px 18px rgba(0,0,0,.06);
  --svv-code-bg:#0f172a;
  --svv-code-fg:#e5e7eb;
  --svv-badge-bg:#eef2ff;
  --svv-badge-fg:#1e40af;
  --svv-text: #1d2327;
}

@media (prefers-color-scheme: dark) {
  :root {
    --svv-bg: #101113;
    --svv-card: #1e1e1e;
    --svv-border: #3c434a;
    --svv-accent: #72aee6;
    --svv-muted: #a7aaad;
    --svv-text: #f0f0f1;
    --svv-shadow-1: 0 1px 2px rgba(0,0,0,.2);
    --svv-shadow-2: 0 6px 18px rgba(0,0,0,.3);
    --svv-badge-bg: #2c3338;
    --svv-badge-fg: #72aee6;
  }
}

.svv-admin-wrap{ max-width:1180px; color: var(--svv-text); }
.svv-page-title{ margin:0 0 6px; letter-spacing:.2px; color: var(--svv-text); }
.svv-subheader{ margin:0 0 18px; color:var(--svv-muted); }

/* Toolbar */
.svv-toolbar{ display:flex; gap:10px; align-items:center; position:sticky; top:32px; z-index:10; padding:8px 0 14px; }
.svv-toolbar .button, .svv-card .button{ border-radius:999px; }
.svv-import-form{ flex-wrap:wrap; }
.svv-file-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border:1px solid var(--svv-border);
  border-radius:999px;
  background:var(--svv-card);
  color:var(--svv-text);
  cursor:pointer;
  box-shadow:var(--svv-shadow-1);
  transition:box-shadow .18s ease, border-color .18s ease;
}
.svv-file-btn:hover{ box-shadow:var(--svv-shadow-2); border-color:var(--svv-accent); }
.svv-file-btn .dashicons{ color:var(--svv-accent); }
.svv-file-input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.svv-file-name{
  min-width:140px;
  font-size:13px;
  color:var(--svv-muted);
  padding-left:2px;
}

/* Grid & cards */
.svv-grid{ display:grid; grid-template-columns:minmax(320px, 360px) minmax(0, 1fr); gap:16px; align-items:start; }
.svv-grid--settings{ grid-template-columns:minmax(620px, 1fr) minmax(280px, 360px); }
.svv-grid--shortcodes{ grid-template-columns:minmax(280px, 340px) minmax(0, 1fr); }
.svv-grid--performance{ grid-template-columns:minmax(280px, 360px) minmax(0, 1fr); }
@media (max-width:1200px){ .svv-grid, .svv-grid--settings, .svv-grid--shortcodes, .svv-grid--performance{ grid-template-columns:1fr; } }
.svv-col{ display:flex; flex-direction:column; gap:16px; }
.svv-card{ background:var(--svv-card); border:1px solid var(--svv-border); border-radius:var(--svv-radius); padding:16px; box-shadow:var(--svv-shadow-1); transition:box-shadow .18s ease; color: var(--svv-text); }
.svv-card:hover{ box-shadow:var(--svv-shadow-2); }
.svv-card-title{ margin:0 0 12px; font-size:1.05rem; display:flex; align-items:center; gap:8px; color: var(--svv-text); }
.svv-card-title .dashicons{ color:var(--svv-accent); }
.svv-tag{ margin-left:auto; font-size:11px; font-weight:normal; background:var(--svv-bg); padding:2px 8px; border-radius:6px; color:var(--svv-muted); border:1px solid var(--svv-border); }

/* Settings form */
.svv-form .form-table{ width:100%; table-layout:fixed; }
.svv-form .form-table th{ width:170px; padding-left:0; padding-right:16px; }
.svv-form .form-table td{ padding-right:0; min-width:0; }
.svv-form input.regular-text{ width:min(100%, 360px); max-width:100%; }
.svv-form select{ max-width:100%; }
.svv-form label{ overflow-wrap:anywhere; }
.svv-form .description{ max-width:46rem; }

@media (max-width:782px){
  .svv-form .form-table{ table-layout:auto; }
  .svv-form .form-table th,
  .svv-form .form-table td{ display:block; width:100%; padding-right:0; }
}

/* Search */
.svv-search{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:var(--svv-card); border:1px solid var(--svv-border); border-radius:999px; }
.svv-search input{ border:none; outline:none; background:transparent; width:260px; color: var(--svv-text); }
@media (max-width:640px){ .svv-search input{ width:160px; } }

/* Code grid */
.svv-codegrid{ display:grid; grid-template-columns:1fr; gap:12px; }

/* Code block (LIGHT, matchar Settings) */
.svv-codeblock{ border:1px solid var(--svv-border); border-radius:12px; overflow:hidden; box-shadow:var(--svv-shadow-1); background:var(--svv-card); }
.svv-codeblock-head{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--svv-bg); border-bottom:1px solid var(--svv-border); padding:10px 12px; color:var(--svv-text);
}
.svv-pre{ margin:0; padding:12px 14px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:14px; line-height:1.7; overflow:auto; white-space:pre-wrap; word-break:break-word; background:var(--svv-card); color:var(--svv-text); }

/* Copy feedback */
button.svv-copy-btn.is-copied, .svv-preview-copy.is-copied{ border-color:var(--svv-success); box-shadow:0 0 0 1px rgba(70,180,80,.25); }

/* Badges & chips */
.svv-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; background:var(--svv-badge-bg); color:var(--svv-badge-fg); border:1px solid var(--svv-border); border-radius:999px; font-size:12px; }

/* Tip footer (compact actions + badges) */
.svv-tip-footer{ display:flex; gap:10px; align-items:center; margin-top:12px; border-top:1px solid var(--svv-border); padding-top:10px; }
.svv-tip-footer{ display:flex; flex-direction:column; align-items:center; }
.svv-tip-actions{ display:flex; gap:8px; justify-content:center; }
.svv-tip-actions .button{ display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; font-size:13px; min-height:34px; line-height:1; border-radius:999px; }
.svv-tip-actions .button.button-secondary{ background:transparent; border:1px solid var(--svv-border); color:var(--svv-accent); }
.svv-tip-actions .button.button-secondary:hover{ background:var(--svv-bg); }
.svv-tip-badges{ display:flex; gap:10px; justify-content:center; align-items:center; margin-top:8px; }
.svv-tip-badges .svv-badge{ display:inline-flex; align-items:center; gap:8px; padding:0; font-size:13px; background:transparent; border:0; color:var(--svv-muted); border-radius:0; }
.svv-tip-badges .svv-badge .dashicons{ color:var(--svv-accent); font-size:16px; margin-right:4px; }

/* Buttons in the tip footer should be compact */
.svv-tip-footer .button{ border-radius:999px; padding:4px 8px; font-size:12px; line-height:1; }
.svv-tip-footer .button.button-secondary{ background:transparent; border:1px solid var(--svv-border); color:var(--svv-accent); }
.svv-tip-footer .button.button-secondary:hover{ background:var(--svv-bg); }
.svv-tip-footer .button:focus{ box-shadow:0 0 0 3px rgba(30,79,209,0.08); }

/* Builder */
.svv-builder-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px 18px; margin-bottom:10px; }
.svv-builder-group { min-width:0; }
.svv-builder-group--wide { grid-column: span 2; }
.svv-builder-group--full { grid-column: 1 / -1; }
.svv-builder-options,
.svv-builder-providers { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:6px; }
.svv-sc-builder label { display:inline-flex; align-items:center; gap:4px; cursor:pointer; margin-right:0; font-size:13px; white-space:nowrap; }
.svv-sc-builder select { min-width:120px; border-radius: 6px; border: 1px solid var(--svv-border); background: var(--svv-card); color: var(--svv-text); padding: 2px 8px; }
.svv-sc-builder strong { font-size: 12px; color: var(--svv-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.svv-sc-builder .button { margin-top: 10px; }
.svv-builder-providers label { margin-right:0; white-space:nowrap; font-size:12px; }
.svv-builder-options label { font-size:12px; }
.svv-badge.is-active { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.svv-badge.is-inactive { background: var(--svv-bg); color: var(--svv-muted); border-color: var(--svv-border); }

@media (max-width: 960px) {
  .svv-builder-group--wide { grid-column: span 1; }
}

@media (prefers-color-scheme: dark) {
  .svv-badge.is-active { background: #064e3b; color: #a7f3d0; border-color: #065f46; }
}

.svv-attr-legend{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.svv-chiprow{ display:flex; gap:8px; align-items:center; }
.svv-chip{ display:inline-block; padding:2px 8px; border-radius:999px; background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; font-size:11px; text-transform:uppercase; letter-spacing:.2px; }
.svv-chip-muted{ background:var(--svv-bg); color:var(--svv-muted); border-color:var(--svv-border); }

/* Attribution box (admin) */
.svv-attr-box{ display:block; }
.svv-attr-textarea{ width:100%; min-height:56px; max-height:240px; padding:10px; border-radius:8px; border:1px solid var(--svv-border); background:var(--svv-card); color:var(--svv-text); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; resize:vertical; }
.svv-attr-textarea[readonly]{ opacity:1; }
.svv-copy-btn{ border-radius:8px; padding:6px 10px; font-size:13px; }
.svv-attr-legend .svv-chip{ text-transform:none; font-size:12px; }

/* Preview styling */
.svv-attr-preview{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; background: linear-gradient(180deg, rgba(245,247,250,1), var(--svv-card)); border:1px solid var(--svv-border); }
.svv-attr-preview-inner a{ color:var(--svv-accent); text-decoration:none; font-weight:600; }
.svv-attr-preview-inner a:hover{ text-decoration:underline; }
.svv-attr-actions{ display:flex; gap:8px; align-items:center; }
.svv-attr-toggle{ background:transparent; border:1px solid var(--svv-border); color:var(--svv-text); }
.svv-hidden{ display:none !important; }

.svv-attr-check-status .dashicons { vertical-align:middle; }
.spin{ animation: svv-spin 1s linear infinite; display:inline-block; }
@keyframes svv-spin{ from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Performance dashboard */
.svv-kv-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.svv-kv-list li{ display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border:1px solid var(--svv-border); border-radius:10px; background:var(--svv-card); }
.svv-kv-list span{ color:var(--svv-muted); }
.svv-kv-list strong{ font-size:16px; color: var(--svv-text); }
.svv-recent{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.svv-recent li{ border:1px solid var(--svv-border); border-radius:10px; padding:10px 12px; background:var(--svv-card); display:grid; gap:2px; }
.svv-recent small{ color:var(--svv-muted); }
.svv-recent span{ color:var(--svv-text); font-weight:600; }

/* Tables */
.svv-table-wrap{ overflow-x:auto; }
.svv-table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:10px; border:1px solid var(--svv-border); }
.svv-table thead th{ background:var(--svv-bg); text-align:left; padding:10px 12px; font-weight:600; border-bottom:1px solid var(--svv-border); color: var(--svv-text); }
.svv-table td{ padding:10px 12px; border-bottom:1px solid var(--svv-border); color: var(--svv-text); }
.svv-table tr:last-child td{ border-bottom:0; }

/* Preview (ljus) */
.svv-preview-actions{ display:flex; gap:8px; margin-bottom:8px; }
.svv-sc-preview{
  width:100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:15px; line-height:1.8; padding:14px 16px; border-radius:12px;
  border:1px solid var(--svv-border); background:var(--svv-card); color:var(--svv-text);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03); resize: vertical; min-height: 140px;
  white-space: pre-wrap; word-break: break-word;
}
.svv-sc-preview.is-expanded{ min-height:340px; box-shadow:var(--svv-shadow-2); }

/* Focus */
.svv-pre code:focus, .svv-sc-preview:focus{ outline:2px solid var(--svv-accent); border-radius:8px; }

.svv-live-preview{ margin-top:10px; border:1px solid var(--svv-border); border-radius:12px; overflow:hidden; background:var(--svv-card); box-shadow:var(--svv-shadow-1);}
.svv-live-bar{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--svv-bg); border-bottom:1px solid var(--svv-border); }
.svv-live-bar .dashicons{ color:var(--svv-accent); }
.svv-live-status{ margin-left:auto; color:var(--svv-muted); font-style:normal; }
.svv-live-frame{ display:block; width:100%; height:260px; border:0; }
.svv-chip-warn{ background:#FEF3C7; color:#92400E; border-color:#FCD34D; }

/* Alerts Page */
.svv-alert-empty { text-align: center; padding: 40px 20px; color: var(--svv-muted); }
.svv-alert-empty .dashicons { font-size: 48px; width: 48px; height: 48px; margin-bottom: 10px; opacity: 0.5; }

.svv-alerts-list { display: flex; flex-direction: column; gap: 12px; }
.svv-alert-item { display: flex; gap: 16px; padding: 16px; border-radius: 12px; border: 1px solid var(--svv-border); background: var(--svv-card); }
.svv-alert-icon { flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--svv-bg); }
.svv-alert-icon .dashicons { font-size: 24px; width: 24px; height: 24px; }
.svv-alert-content h3 { margin: 0 0 4px; font-size: 16px; }
.svv-alert-content p { margin: 0; color: var(--svv-muted); line-height: 1.5; }

.svv-alert-item.is-danger { border-color: #fecaca; background: #fef2f2; }
.svv-alert-item.is-danger .svv-alert-icon { background: #fee2e2; color: #991b1b; }
.svv-alert-item.is-danger h3 { color: #991b1b; }

.svv-alert-item.is-warning { border-color: #fde68a; background: #fffbeb; }
.svv-alert-item.is-warning .svv-alert-icon { background: #fef3c7; color: #92400e; }
.svv-alert-item.is-warning h3 { color: #92400e; }

.svv-alert-item.is-info { border-color: #bfdbfe; background: #eff6ff; }
.svv-alert-item.is-info .svv-alert-icon { background: #dbeafe; color: #1e40af; }
.svv-alert-item.is-info h3 { color: #1e40af; }

@media (prefers-color-scheme: dark) {
  .svv-alert-item.is-danger { border-color: #7f1d1d; background: #450a0a; }
  .svv-alert-item.is-danger .svv-alert-icon { background: #7f1d1d; color: #fecaca; }
  .svv-alert-item.is-danger h3 { color: #fecaca; }
  .svv-alert-item.is-danger .svv-alert-content p { color: #fca5a5; }

  .svv-alert-item.is-warning { border-color: #78350f; background: #451a03; }
  .svv-alert-item.is-warning .svv-alert-icon { background: #78350f; color: #fde68a; }
  .svv-alert-item.is-warning h3 { color: #fde68a; }
  .svv-alert-item.is-warning .svv-alert-content p { color: #fcd34d; }

  .svv-alert-item.is-info { border-color: #1e3a8a; background: #172554; }
  .svv-alert-item.is-info .svv-alert-icon { background: #1e3a8a; color: #bfdbfe; }
  .svv-alert-item.is-info h3 { color: #bfdbfe; }
  .svv-alert-item.is-info .svv-alert-content p { color: #93c5fd; }
}

/* Settings Form in Alerts */
.svv-settings-group h3 { margin: 0 0 12px; font-size: 14px; border-bottom: 1px solid var(--svv-border); padding-bottom: 6px; }
.svv-field-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.svv-field-row label { font-size: 13px; color: var(--svv-muted); }
.svv-field-row input[type="number"] { width: 80px; border-radius: 6px; border: 1px solid var(--svv-border); background: var(--svv-bg); color: var(--svv-text); }