/* Layered on top of Nebius's actual CSS. Provides our content-area styling. */

/* Page header */
.paix .page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom: 24px; gap:24px; }
.paix .page-title { font-size: 28px; font-weight: 600; letter-spacing: -0.4px; line-height: 36px; display:flex; align-items:center; gap:12px; color: rgb(17, 28, 48); }
.paix .page-subtitle { color: rgb(85, 100, 131); margin-top: 6px; font-size: 13px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.paix .tag-new { background: rgba(93, 82, 246, 0.12); color: rgb(93, 82, 246); font-size: 11px; padding: 2px 8px; border-radius: 8px; font-weight: 500; }
.paix .powered-by { display:inline-flex; align-items:center; gap:6px; color: rgb(135, 148, 173); font-size: 12px; }
.paix .powered-by strong { color: rgb(17, 28, 48); font-weight: 600; }
.paix .dot { width: 3px; height: 3px; background: rgb(135, 148, 173); border-radius: 50%; display:inline-block; }

.paix .section-title { font-size: 14px; font-weight: 600; margin-bottom: 14px; letter-spacing: -0.1px; color: rgb(17, 28, 48); }
.paix .section-title.lg { font-size: 16px; }

/* Buttons (use Gravity classes when possible, but provide fallback) */
.paix .btn { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px; border-radius:18px; font-size:13px; font-weight:400; cursor:pointer; border:1px solid transparent; text-decoration:none; font-family:inherit; white-space:nowrap; color: rgb(17, 28, 48); background:transparent; }
.paix .btn-primary { background: rgb(93, 82, 246); color:#fff; border-color: rgb(93, 82, 246); }
.paix .btn-primary:hover { background: rgb(80, 68, 235); border-color: rgb(80, 68, 235); }
.paix .btn-outline { border-color: rgba(27, 45, 79, 0.25); }
.paix .btn-outline:hover { background: rgba(27, 45, 79, 0.04); }
.paix .btn-ghost { padding: 0 12px; }
.paix .btn-ghost:hover { background: rgba(27, 45, 79, 0.04); }
.paix .btn-danger { color: rgb(229, 52, 65); border-color: rgba(229, 52, 65, 0.3); }
.paix .btn-danger:hover { background: rgba(255, 45, 80, 0.12); }
.paix .btn-sm { height: 28px; padding: 0 12px; font-size: 12px; }

/* Card */
.paix .card { background:#fff; border:1px solid rgba(27, 45, 79, 0.15); border-radius: 12px; padding: 20px; }
.paix .card-flush { padding: 0; overflow:hidden; }
.paix .card-h { padding: 14px 20px; border-bottom: 1px solid rgba(27, 45, 79, 0.15); display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:14px; }

/* Feature card */
.paix .feature-card { background:#fff; border:1px solid rgba(27, 45, 79, 0.15); border-radius: 12px; padding: 20px; display:flex; flex-direction:column; gap:16px; cursor:pointer; text-decoration:none; color:inherit; transition: border-color 0.15s; }
.paix .feature:hover { border-color: rgba(27, 45, 79, 0.35); }
.paix .feature-card .icon-wrap { width:44px; height:44px; border-radius:10px; background: linear-gradient(135deg, rgb(176, 236, 161) 0%, rgb(116, 218, 209) 60%, rgb(140, 179, 228) 100%); display:flex; align-items:center; justify-content:center; }
.paix .feature.purple .icon-wrap { background: linear-gradient(135deg, #C7B7F2, #A595E5); }
.paix .feature.blue .icon-wrap { background: linear-gradient(135deg, #B7D4F2, #95B4E5); }
.paix .feature-card .title { font-weight:600; font-size: 15px; line-height: 22px; }
.paix .feature-card .desc { color: rgb(85, 100, 131); font-size: 13px; line-height: 18px; }

/* Grid */
.paix .grid { display:grid; gap: 16px; }
.paix .grid-2 { grid-template-columns: 1fr 1fr; }
.paix .grid-3 { grid-template-columns: repeat(3, 1fr); }
.paix .grid-4 { grid-template-columns: repeat(4, 1fr); }
.paix .row-2col { display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }

/* Badge */
.paix .badge { display:inline-flex; align-items:center; gap:6px; padding: 2px 10px; height: 22px; border-radius: 11px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.paix .badge-success { background: rgba(101, 222, 0, 0.18); color: rgb(75, 145, 30); }
.paix .badge-error { background: rgba(255, 45, 80, 0.12); color: rgb(229, 52, 65); }
.paix .badge-error::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.paix .badge-running { background: rgba(93, 82, 246, 0.12); color: rgb(93, 82, 246); }
.paix .badge-running::before { content:''; width:6px; height:6px; background:currentColor; border-radius:50%; animation: paix-pulse 1.4s infinite; }
@keyframes paix-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.85); } }

/* Tabs */
.paix .tabs { display:flex; gap: 24px; border-bottom: 1px solid rgba(27, 45, 79, 0.15); margin-bottom: 24px; }
.paix .tab { padding: 11px 0; font-size: 13px; font-weight: 500; color: rgb(85, 100, 131); cursor:pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.paix .tab:hover { color: rgb(17, 28, 48); }
.paix .tab.active { color: rgb(17, 28, 48); border-bottom-color: rgb(93, 82, 246); }

/* Stepper */
.paix .stepper { display:flex; gap: 0; margin-bottom: 28px; }
.paix .step { display:flex; align-items:center; gap: 10px; font-size: 13px; color: rgb(135, 148, 173); }
.paix .step + .step { margin-left: 12px; padding-left: 24px; position:relative; }
.paix .step + .step::before { content:''; position:absolute; left:0; top:50%; width:12px; height:1px; background: rgba(27, 45, 79, 0.25); }
.paix .step .dot { width:22px; height:22px; border-radius:50%; background:#fff; border:1.5px solid rgba(27, 45, 79, 0.25); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color: rgb(135, 148, 173); }
.paix .step.done { color: rgb(17, 28, 48); }
.paix .step.done .dot { background: rgb(101, 222, 0); border-color: rgb(101, 222, 0); color: rgb(17, 28, 48); }
.paix .step.active { color: rgb(17, 28, 48); font-weight: 500; }
.paix .step.active .dot { background: rgb(93, 82, 246); border-color: rgb(93, 82, 246); color: #fff; }

/* Table */
.paix .table { width:100%; border-collapse:collapse; }
.paix .table th { text-align:left; font-weight:500; font-size:12px; color: rgb(85, 100, 131); padding: 12px 20px; border-bottom: 1px solid rgba(27, 45, 79, 0.15); background: rgba(27, 45, 79, 0.02); }
.paix .table td { padding: 14px 20px; border-bottom: 1px solid rgba(27, 45, 79, 0.15); font-size: 13px; color: rgb(17, 28, 48); vertical-align:middle; }
.paix .table tr:last-child td { border-bottom: none; }
.paix .table tr:hover td { background: rgba(27, 45, 79, 0.04); }
.paix .row-name { font-weight: 500; display:flex; align-items:center; gap: 12px; }
.paix .row-icon { width:32px; height:32px; border-radius:8px; background: linear-gradient(135deg, rgb(176, 236, 161) 0%, rgb(116, 218, 209) 60%, rgb(140, 179, 228) 100%); flex-shrink:0; }
.paix .row-id { font-size: 12px; color: rgb(135, 148, 173); font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; }

/* Code */
.paix .mono, .paix .code, .paix .pre { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 12.5px; }
.paix .pre { background: rgba(27, 45, 79, 0.05); padding: 16px 18px; border-radius: 8px; border:1px solid rgba(27, 45, 79, 0.15); line-height: 1.7; overflow-x: auto; }
.paix .kw { color: rgb(93, 82, 246); }
.paix .str { color: rgb(34, 134, 58); }
.paix .cmt { color: rgb(135, 148, 173); font-style: italic; }

/* Forms */
.paix .field { margin-bottom: 18px; }
.paix .field-row { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.paix .label { display:block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: rgb(17, 28, 48); }
.paix .req { color: rgb(229, 52, 65); margin-left: 2px; }
.paix .input, .paix .select { width: 100%; padding: 8px 12px; height: 36px; border: 1px solid rgba(27, 45, 79, 0.25); border-radius: 8px; font-size: 13px; background: #fff; color: rgb(17, 28, 48); font-family: inherit; }
.paix .input:focus, .paix .select:focus { outline: none; border-color: rgb(93, 82, 246); box-shadow: 0 0 0 3px rgba(93, 82, 246, 0.12); }
.paix .select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23556483' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position: right 12px center; padding-right: 36px; }
.paix .help { font-size: 12px; color: rgb(85, 100, 131); margin-top: 6px; }

/* Side panel */
.paix .side { background:#fff; border:1px solid rgba(27, 45, 79, 0.15); border-radius: 12px; padding: 20px; }
.paix .side h4 { font-size:13px; font-weight:600; margin-bottom: 6px; color: rgb(17, 28, 48); }
.paix .side p { font-size:13px; color: rgb(85, 100, 131); line-height: 19px; }

/* Stat */
.paix .stat { padding: 14px 16px; border:1px solid rgba(27, 45, 79, 0.15); border-radius: 12px; background:#fff; }
.paix .stat .lbl { font-size: 12px; color: rgb(85, 100, 131); }
.paix .stat .val { font-size: 22px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; color: rgb(17, 28, 48); }
.paix .stat .sub { font-size: 12px; color: rgb(135, 148, 173); margin-top: 2px; }

/* Progress */
.paix .progress { height: 8px; background: rgba(27, 45, 79, 0.05); border-radius: 4px; overflow:hidden; }
.paix .progress-bar { height:100%; background: rgb(93, 82, 246); border-radius: 4px; }

/* Misc */
.paix .divider { height: 1px; background: rgba(27, 45, 79, 0.15); margin: 16px 0; border:none; }
.paix .flex { display:flex; }
.paix .flex-between { display:flex; justify-content:space-between; align-items:center; }
.paix .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.paix .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }

.paix .model-logo { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; color:#fff; flex-shrink:0; letter-spacing: -0.5px; }
.paix .logo-pi { background: linear-gradient(135deg, #FF6B6B, #C44569); }
.paix .logo-gr { background: linear-gradient(135deg, #76B900, #5C9000); }
.paix .logo-sm { background: linear-gradient(135deg, #FFD93D, #E8A33D); color: #1A1A1A; }
.paix .logo-act { background: linear-gradient(135deg, #6CC5F8, #4A90E2); }
.paix .logo-dz { background: linear-gradient(135deg, #76B900, #1A1A1A); }
.paix .logo-byo { background: rgba(27, 45, 79, 0.05); color: rgb(85, 100, 131); border: 1.5px dashed rgba(27, 45, 79, 0.25); }

/* Live log */
.paix .log { background: rgb(28, 30, 36); color: #E0E0E0; font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 16px 20px; height: 240px; overflow:hidden; line-height: 1.7; }
.paix .log .lt { color: #6B6B6B; }
.paix .log .lk { color: rgb(101, 222, 0); }
.paix .log .lw { color: #FFD93D; }
.paix .log .li { color: #6CC5F8; }

/* Model card layout — fix icon/text spacing */
.paix .model-card { display:flex; flex-direction:column; gap:14px; }
.paix .model-head { display:flex; align-items:flex-start; gap:18px; }
.paix .model-meta { flex:1; min-width:0; padding-top:2px; }
.paix .model-name { font-weight:600; font-size:15px; line-height:20px; color:rgb(17, 28, 48); }
.paix .model-org { color:rgb(85, 100, 131); font-size:12px; margin-top:3px; }
.paix .model-desc { color:rgb(85, 100, 131); font-size:13px; line-height:19px; margin:0; }
.paix .model-foot { display:flex; gap:8px; flex-wrap:wrap; font-size:12px; color:rgb(85, 100, 131); padding-top:14px; border-top:1px solid rgba(27, 45, 79, 0.10); }
.paix .model-card .model-logo { width:42px; height:42px; }

/* Ensure body/root scroll properly inside Nebius shell */
.paix a { color: rgb(93, 82, 246); text-decoration: none; }
.paix a:hover { text-decoration: none; }

/* Gap utilities (gap-X = X px) */
.paix .gap-4 { gap: 4px; }
.paix .gap-8 { gap: 8px; }
.paix .gap-10 { gap: 10px; }
.paix .gap-12 { gap: 12px; }
.paix .gap-14 { gap: 14px; }
.paix .gap-16 { gap: 16px; }
.paix .gap-20 { gap: 20px; }
.paix .gap-24 { gap: 24px; }
.paix .gap-32 { gap: 32px; }

/* Slider + number combo */
.paix .slider-row { display:flex; align-items:center; gap:14px; }
.paix .slider-num { width:120px; text-align:right; font-variant-numeric: tabular-nums; }
.paix .slider { flex:1; -webkit-appearance: none; appearance: none; height: 4px; background: rgba(27, 45, 79, 0.15); border-radius: 2px; outline: none; }
.paix .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width:18px; height:18px; border-radius:50%; background: rgb(93, 82, 246); cursor:pointer; box-shadow: 0 1px 4px rgba(93,82,246,0.4); }
.paix .slider::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background: rgb(93, 82, 246); cursor:pointer; border:none; }

/* Suffix input ("Checkpoint every [____] steps") */
.paix .suffix-input { display:flex; align-items:center; gap:10px; }
.paix .suffix-input .input { flex:1; }
.paix .suffix-input .suffix { color: rgb(85, 100, 131); font-size: 13px; }

/* Icon-only button (square, fits 36px height) */
.paix .btn.icon-only { width: 36px; padding: 0; justify-content: center; }

/* Row icons — three variants with white SVG glyph on lime→teal→blue gradient */
.paix .row-icon { position: relative; }
.paix .row-icon::before {
  content: '';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background-position: center; background-repeat: no-repeat; background-size: 18px 18px;
}
.paix .row-icon-run::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v4M12 18v4M5 5l3 3M16 16l3 3M2 12h4M18 12h4M5 19l3-3M16 8l3-3'/><circle cx='12' cy='12' r='2.5' fill='white'/></svg>");
}
.paix .row-icon-endpoint::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='2.5'/><circle cx='6' cy='18' r='2.5'/><circle cx='18' cy='12' r='2.5'/><path d='M8.5 6h4M8.5 18h4M14 8.5l2 2M14 15.5l2-2'/></svg>");
}
.paix .row-icon-dataset::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='6' rx='8' ry='2.5'/><path d='M4 6v5c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5V6'/><path d='M4 11v5c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5v-5'/></svg>");
}

/* Make linked dataset names look clickable but not underlined */
.paix .row-link { color: rgb(17, 28, 48); text-decoration: none; }
.paix .row-link:hover { color: rgb(93, 82, 246); }

/* Public-catalog markers */
.paix .public-tag {
  display:inline-block;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(101, 222, 0, 0.18);
  color: rgb(75, 145, 30);
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-left: 6px;
  vertical-align: middle;
}
.paix .catalog-dot {
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background: rgb(101, 222, 0);
  margin-left: 6px;
  vertical-align: middle;
}