:root{
  --bg:#071025; --panel:#071a2b; --card:#0b2236; --muted:#9fb6d8; --accent:#4f46e5; --accent-2:#06b6d4; --glass: rgba(255,255,255,0.03);
  --text: #e6eef8; --modal-bg: linear-gradient(180deg,#062033,#062b44); --modal-fg: #e6eef8;
  --card-light: #123248; /* slightly lighter than --card for dropdowns/options */
  --radius:12px; --gap:16px; --shadow: 0 6px 18px rgba(2,6,23,0.6);
  --maxWidth:1200px;
  --viewer-height:450px; /* unified height for preview, editor, and palette */
  /* Palette specific colors (high-contrast) */
  --palette-bg: rgba(6,8,14,0.6);
  --palette-border: rgba(255,255,255,0.04);
  --palette-key: #a78bfa; /* lavender */
  --palette-value: #fde68a; /* warm-yellow */
  --palette-array: #06b6d4; /* cyan/teal */
  --palette-object: #fb923c; /* coral/orange */
  --palette-sample: #94a3b8; /* muted sample text */
  --palette-hover: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Montserrat', Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, -apple-system;
  background: linear-gradient(180deg,#051025 0%, #07122a 60%); color:var(--text); -webkit-font-smoothing:antialiased;
}
.app-shell{display:flex;min-height:100vh;max-width:1400px;margin:24px auto;padding:12px;gap:16px}
.sidebar{width:260px;background:linear-gradient(180deg,var(--panel),rgba(8,14,22,0.6));border-radius:14px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.brand{display:flex;gap:12px;align-items:center}
.brand .title{font-weight:700;font-size:1.05rem}
.brand .subtitle{font-size:0.78rem;color:var(--muted)}
.sidebar-section{margin-top:18px}
.section-title{font-size:0.78rem;color:var(--muted);margin-bottom:8px}
.site-list{list-style:none;padding:0;margin:0;max-height:58vh;overflow:auto}
.site-list li{padding:8px 10px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;cursor:pointer}
.site-list li:hover{background:rgba(255,255,255,0.03)}
.site-list li.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}
.site-list .pages{list-style:none;padding-left:12px;margin-top:6px}
.site-list .pages li{padding:6px;border-radius:6px;margin-bottom:4px;background:transparent;color:var(--muted);cursor:pointer}
.site-list .pages li:hover{background:rgba(255,255,255,0.02);color:#e6eef8}
.sidebar .btn{width:100%;margin-top:10px}
.sidebar-footer{margin-top:auto}

.main{flex:1;display:flex;flex-direction:column;gap:12px}
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;background:transparent;padding:6px 12px}
.topbar .search input{padding:10px 12px;border-radius:10px;border:0;background:var(--glass);color:var(--text);min-width:240px}
.btn{background:var(--accent);color:white;padding:8px 12px;border-radius:10px;border:0;font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;border:1px dashed rgba(255,255,255,0.06);color:var(--muted)}
.btn.small{padding:6px 8px;font-size:0.9rem}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

/* Success (green) and danger (red) button variants */
.btn.success{background:linear-gradient(90deg,#bbf7d0,#4ade80);color:#053713}
.btn.success:hover{filter:brightness(.95)}
.btn.danger{background:linear-gradient(90deg,#fecaca,#f87171);color:#3b0b0b}
.btn.danger:hover{filter:brightness(.95)}

.content{padding:8px}
.panel{max-width:var(--maxWidth);margin:0 auto}
.panel-row{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.card{flex:1;min-width:300px;background:linear-gradient(180deg,var(--card),rgba(12,18,26,0.7));padding:14px;border-radius:12px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px 0}
.muted{color:var(--muted);margin-bottom:8px}
.small{font-size:0.85rem}
.form-row{display:flex;gap:8px;margin-top:12px}
input,textarea{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);color:var(--text);padding:10px;border-radius:10px;font-family:inherit}

select{appearance:auto; -webkit-appearance:auto; -moz-appearance:auto; padding-right:32px; color: var(--text); background: var(--card-light)}
select option{color: var(--text); background: var(--card-light)}

/* Specific dropdown / select styling for layout (use site text color for visibility) */
select, .form-select, .loop-field-select, .two-col select, .data-tree select { 
  font-family: inherit; 
  color: var(--text); 
  background: var(--card-light); 
  border: 1px solid rgba(255,255,255,0.04); 
  padding: 8px 10px; 
  border-radius: 8px; 
}

/* Option styling */
select option, .form-select option { color: var(--text); background: var(--card-light) }

/* Best-effort hover/highlight for options (may be browser-limited) */
select option:hover, .form-select option:hover { background: rgba(255,255,255,0.04); }

/* Improve dropdown focus/active state for accessibility */
select:focus, .form-select:focus, .loop-field-select:focus { outline: 2px solid rgba(79,70,229,0.18); box-shadow: 0 4px 14px rgba(79,70,229,0.06); }
.two-col{display:flex;gap:8px}
.divider{height:1px;background:rgba(255,255,255,0.03);margin:12px 0;border-radius:2px}
.list{display:flex;flex-direction:column;gap:8px}
.list .item{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;background:rgba(255,255,255,0.02)}
.list .item .meta{color:var(--muted);font-size:0.9rem}

/* Improved API list item layout */
.api-item{display:flex;justify-content:space-between;align-items:flex-start;padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);gap:12px}
.api-left{flex:1;min-width:0}
.api-title-row{display:flex;align-items:center;gap:8px}
.api-title{font-size:1rem;margin:0;color:var(--text);display:inline-block}
.api-url-meta{color:var(--muted);font-size:0.9rem;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60ch}
.api-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:200px}
.api-right .btn{padding:6px 10px;border-radius:8px;font-size:0.9rem}
.api-right .btn.small{padding:6px 10px}
.api-right .btn + .btn{margin-left:8px}
.api-pages{width:100%;text-align:right}
.api-usedin{color:var(--muted);font-size:0.85rem;display:inline-block;max-width:22ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Make sure method badge and status dot don't wrap awkwardly */
.api-title-row .api-method-badge{margin-left:6px}
.api-status-dot{margin-right:8px}

@media (max-width:900px){
  .api-item{flex-direction:column;align-items:flex-start}
  .api-right{width:100%;flex-direction:row;align-items:center;justify-content:space-between}
  .api-pages{width:auto;text-align:left}
  .api-url-meta{max-width:100%}
}
.preview-wrap{height:var(--viewer-height);border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);margin-top:8px}
.preview-wrap iframe{width:100%;height:100%;border:0;background:white}
/* Ensure readable text when editing or previewing content on light/white backgrounds.
  Use the .light-bg helper class on elements that contain white/light backgrounds.
  This keeps the dark chrome while forcing dark text only inside these light areas. */
.light-bg, .light-bg * { color: #0f1724 !important; }
/* Ensure form controls inside light backgrounds are clearly readable (override inline styles) */
.light-bg input, .light-bg textarea, .light-bg select { color: #0f1724 !important; }
.preview-wrap iframe{ background: white !important }

/* Editor and palette share the same visual height */
#pageEditor{height:var(--viewer-height);min-height:220px}

/* Modal card used for create site and similar dialogs */
.modal-card{background:var(--modal-bg);color:var(--modal-fg);border-radius:12px;box-shadow:0 12px 40px rgba(2,6,23,0.35);}
.modal-card .muted{color:rgba(230,238,248,0.78)}
.modal-input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);margin-bottom:12px;background:transparent;color:var(--modal-fg)}

/* Improve overall typography contrast */
h1,h2,h3,h4,h5{color:var(--text)}
label, .muted, .small{color:var(--muted)}


.palette-item{padding:10px;border-radius:8px;background:rgba(255,255,255,0.02);margin-bottom:6px;cursor:grab}
.palette-item:active{cursor:grabbing}

/* Data tree styles for variable palette */
.data-tree{font-size:0.95rem}
.tree-root{margin-bottom:10px;padding:8px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--palette-border)}
.tree-node{padding:6px;display:flex;flex-direction:column}
.node-label{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;transition:all .12s ease;cursor:grab;background:transparent}
.node-label:hover{background:var(--palette-hover);transform:translateY(-1px)}
.node-toggle{width:20px;display:inline-block;text-align:center;color:var(--palette-sample);font-weight:700}
.node-text{color:var(--palette-key);font-weight:700}
.node-sample{color:var(--palette-sample);margin-left:8px;font-size:0.9rem}

/* Distinguish types visually using a strong left accent, vivid tint, and icon */
.node-label.type-array{box-shadow:inset 6px 0 0 var(--palette-array);background:linear-gradient(90deg, rgba(6,182,212,0.16), rgba(6,182,212,0.02));border:1px solid rgba(6,182,212,0.12);color:#e8ffff}
.node-label.type-array::before{content:"[]";display:inline-flex;align-items:center;justify-content:center;margin-right:8px;font-size:0.78rem;padding:4px;border-radius:6px;background:rgba(6,182,212,0.14);color:#00343a;font-weight:800}
.node-label.type-array:hover{transform:translateY(-2px);box-shadow:inset 6px 0 0 var(--palette-array), 0 6px 18px rgba(6,182,212,0.06)}

.node-label.type-object{box-shadow:inset 6px 0 0 var(--palette-object);background:linear-gradient(90deg, rgba(251,146,60,0.16), rgba(251,146,60,0.02));border:1px solid rgba(251,146,60,0.12);color:#fff6ef}
.node-label.type-object::before{content:"{}";display:inline-flex;align-items:center;justify-content:center;margin-right:8px;font-size:0.78rem;padding:4px;border-radius:6px;background:rgba(251,146,60,0.14);color:#4a1f00;font-weight:800}
.node-label.type-object:hover{transform:translateY(-2px);box-shadow:inset 6px 0 0 var(--palette-object), 0 6px 18px rgba(251,146,60,0.06)}

.node-label.type-value{box-shadow:inset 6px 0 0 rgba(255,255,255,0.02);background:transparent}
.node-label.type-value::before{content:"•";display:inline-block;margin-right:8px;color:var(--palette-value);font-size:1.1rem}

/* value badges */
.node-value-badge{margin-left:auto;padding:6px 10px;border-radius:999px;font-weight:800;font-size:0.86rem;background:linear-gradient(90deg,#fff7cc,#fff1b8);color:#5a3b00;border:1px solid rgba(255,255,255,0.06)}

/* Method badge for APIs in palette */
.node-method-badge{margin-left:auto;padding:6px 8px;border-radius:999px;font-weight:700;font-size:0.78rem;color:#071022;border:1px solid rgba(0,0,0,0.06)}
.node-method-badge.method-create{background:linear-gradient(90deg,#fecaca,#f87171);color:#3b0b0b;border:1px solid rgba(139,31,31,0.12)}
.node-method-badge.method-fetch{background:linear-gradient(90deg,#bbf7d0,#86efac);color:#04260f;border:1px solid rgba(6,95,70,0.08)}

/* Status indicators (used in API lists and palette) */
.api-status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;box-shadow:0 0 0 2px rgba(0,0,0,0.18);border:1px solid rgba(255,255,255,0.04)}
.api-status-dot.status-success{background:linear-gradient(90deg,#bbf7d0,#4ade80);box-shadow:0 0 0 4px rgba(34,197,94,0.06)}
.api-status-dot.status-fail{background:linear-gradient(90deg,#fecaca,#f87171);box-shadow:0 0 0 4px rgba(239,68,68,0.06)}

/* Badge variants to show success / failure state */
.node-value-badge.status-success{background:linear-gradient(90deg,#bbf7d0,#86efac);color:#04260f;border:1px solid rgba(6,95,70,0.08)}
.node-value-badge.status-fail{background:linear-gradient(90deg,#fecaca,#f87171);color:#3b0b0b;border:1px solid rgba(139,31,31,0.12)}

/* Provide a subtle left border on list items for failing APIs to draw attention */
.list .item.api-fail{box-shadow: inset 4px 0 0 rgba(239,68,68,0.12)}
.list .item.api-ok{box-shadow: inset 4px 0 0 rgba(34,197,94,0.08)}

/* inline method label next to API key in palette */
.method-inline{font-size:0.8rem;display:inline-block}

/* API info button in palette */
.btn-icon-mini{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:2px 6px;border-radius:6px;cursor:pointer;font-size:0.9rem;margin-left:8px}
.btn-icon-mini:hover{background:rgba(255,255,255,0.04);color:var(--text)}

/* Blue connect handle used for click-to-connect and drag-to-connect */
.api-handle{display:inline-block;width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-left:8px;cursor:grab;background:linear-gradient(180deg,#60a5fa,#3b82f6);box-shadow:0 4px 10px rgba(59,130,246,0.18);border:2px solid rgba(255,255,255,0.06)}
.api-handle:active{cursor:grabbing}

/* API details panel */
.api-details-panel{max-height:70vh;overflow:auto}
.detail-section{margin-bottom:20px;padding:12px;background:rgba(255,255,255,0.02);border-radius:8px}
.detail-section h4{margin:0 0 10px 0;font-size:1rem;color:var(--accent-2)}
.detail-row{margin-bottom:8px;line-height:1.6}
.detail-row strong{color:var(--text);margin-right:8px}
.detail-table{width:100%;border-collapse:collapse;margin-top:8px}
.detail-table th,.detail-table td{text-align:left;padding:8px;border-bottom:1px solid rgba(255,255,255,0.04)}
.detail-table th{background:rgba(255,255,255,0.02);font-weight:600;color:var(--accent-2)}
.detail-table code{background:rgba(255,255,255,0.04);padding:2px 6px;border-radius:4px;font-size:0.9rem}
.hint-list{list-style:none;padding-left:0;margin:8px 0}
.hint-list li{padding:6px 0;border-left:3px solid var(--accent);padding-left:10px;margin-bottom:6px;background:rgba(79,70,229,0.04);border-radius:4px}
.hint-list strong{color:var(--accent-2)}

/* API list method badge */
.api-method-badge{margin-left:8px;padding:4px 8px;border-radius:8px;font-weight:700;font-size:0.78rem;vertical-align:middle}
.api-method-badge.method-create{background:linear-gradient(90deg,#fee2e2,#fecaca);color:#4a0b0b;border:1px solid rgba(139,31,31,0.08)}
.api-method-badge.method-fetch{background:linear-gradient(90deg,#dcfce7,#bbf7d0);color:#07340f;border:1px solid rgba(6,95,70,0.06)}

.node-children{margin-left:18px;border-left:1px dashed rgba(255,255,255,0.02);padding-left:10px;margin-top:6px}
.loop-item{padding:8px;border-radius:8px;border:1px dashed rgba(255,255,255,0.04);background:rgba(255,255,255,0.015);margin:6px 0}

/* Site File Tree (Site Files panel) */
#siteFileTree{font-size:0.95rem}
.sf-node{padding:6px;border-radius:8px}
.sf-node:hover{background:rgba(255,255,255,0.02)}
.sf-node.selected{background:linear-gradient(90deg, rgba(79,70,229,0.14), rgba(6,182,212,0.04));outline:1px solid rgba(79,70,229,0.18)}
.sf-dir-label{cursor:pointer}
.sf-caret{color:var(--muted);font-weight:700}
.file-icon{width:22px;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.file-icon-folder{color:#fbbf24}
.file-icon-image{color:#06b6d4}
.file-icon-html{color:#7c3aed}
.file-icon-generic{color:#94a3b8}
.sf-node .file-icon{margin-right:6px}

/* Small badge showing file type on hover */
.sf-node .file-type-badge{display:none;font-size:0.8rem;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,0.03);margin-left:auto}
.sf-node:hover .file-type-badge{display:inline-block}

/* small responsive tweak for long sample text */
.node-sample{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36ch}

/* Notifications */
.ab-notify-wrap{ display:flex;gap:8px;align-items:center }
.ab-notify{ color:#e6eef8; }
.ab-notify-success{ background: linear-gradient(90deg,var(--accent),var(--accent-2)); }
.ab-notify-error{ background: linear-gradient(90deg,#d14343,#8b1f1f); }
.ab-notify-info{ background: linear-gradient(90deg,#0ea5a4,#2563eb); }
.ab-notify .btn.ghost{ background: transparent; border: 0; color: rgba(255,255,255,0.85); font-weight:600 }

/* Ensure Montserrat is used for admin notifications and modals */
.ab-notify, .ab-notify * , .ab-modal, .ab-modal * {
  font-family: 'Montserrat', Inter, "Segoe UI", Roboto, Arial, system-ui !important;
}

/* Modal top-right close button */
.ab-modal-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 35px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, #f87171, #ef4444);
  color: #fff;
  border: 0;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.ab-modal-close:hover{ filter: brightness(.95); }

/* Make the variable palette scrollable when content grows and match viewer height */
#dataPalette{max-height:var(--viewer-height);overflow:auto;padding-right:6px}

/* Loop Builder UI */
.loop-builder{margin-top:12px;padding:10px;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03)}
.loop-builder .loop-preview{color:var(--muted);margin-top:6px}
.loop-builder select.loop-field-select{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text);padding:8px;border-radius:6px}

code{background:rgba(255,255,255,0.03);padding:4px 8px;border-radius:6px}

/* API response preformatted block (visible on dark backgrounds) */
.api-body-pre{white-space:pre-wrap;color:var(--text);background:rgba(255,255,255,0.02);padding:10px;border-radius:8px;}

@media (max-width:900px){
  .app-shell{flex-direction:column;padding:12px}
  .sidebar{width:100%;flex-direction:row;align-items:center;padding:10px}
  .site-list{display:flex;gap:8px;overflow:auto}
  .site-list li{min-width:120px}
  .panel-row{flex-direction:column}
}

small.muted{color:var(--muted);font-size:0.85rem}

/* Guided tour (Intro.js) removed — related styles deleted to avoid loading unused css. */

/*
  GrapesJS editor should use its own theme and default styling. The admin theme
  applied broad overrides that may force light text on white backgrounds inside
  the editor. Reset/avoid admin chrome inside `#gjs` so GrapesJS can render its
  normal theme (visible dark text on white backgrounds).
*/
/* Reset common properties inside the GrapesJS root container */
#gjs, #gjs * {
  color: initial !important;
  background: initial !important;
  border-color: initial !important;
}

/* Ensure form controls inside GrapesJS panels use normal colors (tools/panels) */
#gjs input, #gjs textarea, #gjs select { color: initial !important; background: initial !important }

/* Live validation error styling */
.validation-error {
  color: #ef4444;
  font-size: 0.85rem;
  margin-top: 4px;
  display: block;
  font-weight: 600;
}

/* Field mapper panel */
.field-mapper-panel .mapper-section {
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.04);
}

.field-mapper-panel .mapper-item {
  transition: transform 0.2s ease;
}

.field-mapper-panel .mapper-item:hover {
  transform: translateX(4px);
}

/* Component library patterns */
.crud-table-component table {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.crud-table-component .btn-edit {
  background: #3b82f6;
  color: white;
  border: 0;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}

.crud-table-component .btn-delete {
  background: #ef4444;
  color: white;
  border: 0;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  margin-left: 4px;
}

.search-form input:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

.filter-panel select {
  cursor: pointer;
}

.filter-panel select:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination button:hover:not(:disabled) {
  background: var(--accent);
  color: white;
}

/* Enhanced GrapesJS block categories */
.gjs-block-category {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.gjs-block {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gjs-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* --- Redesigned APIs card (modern fresh dark theme) --- */
.api-card {
  background: linear-gradient(180deg, #071025 0%, #071022 100%);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.02);
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
}

.api-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.api-header h3 { font-size: 1.05rem; font-weight:700; margin:0 }

.api-list { display:flex; flex-direction:column; gap:10px; }
/* Constrain the APIs list so it remains scrollable and doesn't expand indefinitely */
.api-card .api-list { max-height:60vh; overflow:auto; padding-right:8px; }
.api-card .api-list::-webkit-scrollbar{ width:10px }
.api-card .api-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.05); border-radius:8px }

/* list item uses a subtle glass card with soft elevation */
.api-item{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.008));
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform .15s ease, box-shadow .15s ease, background .12s ease;
}
.api-item:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(2,6,23,0.55); background: rgba(255,255,255,0.02); }

.api-left{min-width:0;display:flex;flex-direction:column}
.api-title-row{display:flex;align-items:center;gap:10px}
.api-title{font-size:1rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.api-method-badge{font-size:0.72rem;padding:5px 9px;border-radius:999px;font-weight:800;border:1px solid rgba(255,255,255,0.04)}
.api-url-meta{margin-top:6px;font-size:0.88rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.api-right{display:flex;flex-direction:column;gap:8px;align-items:flex-end;justify-content:center;min-width:180px}
.api-right .btn{min-width:96px;height:36px;padding:6px 12px;border-radius:10px;font-size:0.88rem}
.api-right .btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}
.api-right .btn.success{background:linear-gradient(90deg,#bbf7d0,#4ade80);color:#052912}
.api-right .btn.danger{background:linear-gradient(90deg,#fecaca,#f87171);color:#3b0b0b}
.api-right .btn.secondary{background:rgba(148,163,184,0.08);color:var(--muted)}
.api-right .btn + .btn{margin-left:0}

.api-usedin{background:rgba(255,255,255,0.02);padding:6px 8px;border-radius:8px;color:var(--muted);font-size:0.82rem;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* status dot placement when server provides metadata */
.api-status-dot{margin-right:8px;vertical-align:middle}

@media (max-width:900px){
  .api-item{grid-template-columns:1fr;align-items:flex-start}
  .api-right{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .api-right .btn{min-width:72px;height:36px}
  .api-title{max-width:100%}
  .api-url-meta{-webkit-line-clamp:3}
}

/* small helper for consistent button variants inside api list */
.btn.small{padding:6px 10px;font-size:0.86rem;border-radius:10px}

/* End redesigned APIs card */