.portal-v4 { --portal-accent:#c9092f; --portal-ink:#20242b; --portal-muted:#6b7280; }
.portal-v4 .portal-v4-head { align-items:center; }
.portal-v4 .portal-v4-head-actions { display:flex; gap:8px; }
.portal-v4 .portal-v4-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.portal-v4 .portal-v4-stat { min-height:72px; padding:14px 16px; border:1px solid var(--line); border-radius:6px; background:#fff; box-shadow:var(--shadow); }
.portal-v4 .portal-v4-stat span { display:block; color:var(--portal-muted); font-size:11px; }
.portal-v4 .portal-v4-stat strong { display:block; margin-top:7px; color:var(--portal-ink); font-size:18px; }
.portal-v4 .portal-v4-stat small { display:block; margin-top:4px; color:var(--portal-muted); }
.portal-v4 .portal-v4-tabs { margin-bottom:12px; }
.portal-v4 .portal-v4-panel { display:none; }
.portal-v4 .portal-v4-panel.active { display:block; }
.portal-v4 .portal-v4-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); gap:12px; align-items:start; }
.portal-v4 .portal-v4-card { border:1px solid var(--line); border-radius:6px; background:#fff; box-shadow:var(--shadow); }
.portal-v4 .portal-v4-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:15px 16px 12px; border-bottom:1px solid var(--line); }
.portal-v4 .portal-v4-card-head h2 { margin:0 0 3px; font-size:14px; }
.portal-v4 .portal-v4-card-head p { margin:0; color:var(--portal-muted); font-size:11px; }
.portal-v4 .portal-v4-module-list { padding:4px 16px 12px; }
.portal-v4 .portal-v4-module { display:grid; grid-template-columns:34px minmax(140px,1fr) 88px 78px 70px; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid #eef0f2; }
.portal-v4 .portal-v4-module:last-child { border-bottom:0; }
.portal-v4 .portal-v4-order { width:28px; height:28px; display:grid; place-items:center; border-radius:5px; background:#f3f4f6; color:#4b5563; font-weight:700; }
.portal-v4 .portal-v4-field label { display:block; margin-bottom:4px; color:var(--portal-muted); font-size:10px; }
.portal-v4 .portal-v4-field input,.portal-v4 .portal-v4-field select { width:100%; height:32px; border:1px solid var(--line); border-radius:4px; background:#fff; padding:0 8px; }
.portal-v4 .portal-v4-switch { display:inline-flex; align-items:center; gap:6px; color:#4b5563; font-size:11px; }
.portal-v4 .portal-v4-preview { position:sticky; top:74px; overflow:hidden; }
.portal-v4 .portal-v4-preview-screen { padding:12px; background:#f5f6f7; min-height:390px; }
.portal-v4 .portal-v4-preview-banner { min-height:92px; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; border-radius:5px; color:#fff; background:linear-gradient(120deg,#1b2027,#545d69); }
.portal-v4 .portal-v4-preview-banner small { color:#ff6b82; }
.portal-v4 .portal-v4-preview-banner strong { margin-top:5px; font-size:15px; }
.portal-v4 .portal-v4-preview-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:7px; }
.portal-v4 .portal-v4-preview-metrics span,.portal-v4 .portal-v4-preview-block { min-height:45px; padding:8px; border:1px solid #e2e5e9; border-radius:4px; background:#fff; color:#454b54; font-size:10px; }
.portal-v4 .portal-v4-preview-columns { display:grid; grid-template-columns:1.3fr .7fr; gap:7px; margin-top:7px; }
.portal-v4 .portal-v4-preview-stack { display:grid; gap:7px; }
.portal-v4 .portal-v4-table-wrap { overflow:auto; }
.portal-v4 .portal-v4-table { width:100%; min-width:850px; border-collapse:collapse; }
.portal-v4 .portal-v4-table th,.portal-v4 .portal-v4-table td { padding:11px 12px; border-bottom:1px solid #eaedf0; text-align:left; vertical-align:middle; }
.portal-v4 .portal-v4-table th { background:#fafafa; color:#667085; font-size:10px; font-weight:650; }
.portal-v4 .portal-v4-table td { font-size:11px; }
.portal-v4 .portal-v4-table td strong { display:block; color:#22262d; font-size:12px; }
.portal-v4 .portal-v4-table td small { display:block; margin-top:3px; color:#7b8491; }
.portal-v4 .portal-v4-actions { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.portal-v4 .portal-v4-empty { padding:42px 20px; text-align:center; color:var(--portal-muted); }
.portal-v4 .portal-v4-integration { display:grid; grid-template-columns:280px minmax(0,1fr); gap:12px; }
.portal-v4 .portal-v4-provider { padding:18px; }
.portal-v4 .portal-v4-provider-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:8px; background:#3370ff; color:#fff; font-size:20px; font-weight:800; }
.portal-v4 .portal-v4-provider h2 { margin:14px 0 5px; }
.portal-v4 .portal-v4-provider p { color:var(--portal-muted); line-height:1.6; }
.portal-v4 .portal-v4-provider dl { margin:18px 0; }
.portal-v4 .portal-v4-provider dl div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid #edf0f2; }
.portal-v4 .portal-v4-provider dt { color:var(--portal-muted); }
.portal-v4 .portal-v4-provider dd { margin:0; text-align:right; }
.portal-v4 .portal-v4-capability-list { padding:5px 16px 12px; }
.portal-v4 .portal-v4-capability { display:grid; grid-template-columns:minmax(150px,1fr) minmax(220px,1.2fr) 90px 90px; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid #edf0f2; }
.portal-v4 .portal-v4-capability:last-child { border-bottom:0; }
.portal-v4 .portal-v4-capability strong { display:block; }
.portal-v4 .portal-v4-capability small { color:var(--portal-muted); }
.portal-v4 .portal-v4-safety { margin-top:12px; padding:12px 14px; border-left:3px solid #d69a16; background:#fffbeb; color:#7a5310; line-height:1.6; }
.portal-v4 .portal-v4-release-flow { display:grid; grid-template-columns:repeat(7,1fr); gap:0; margin-bottom:12px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.portal-v4 .portal-v4-release-flow span { position:relative; padding:13px 7px; text-align:center; color:#667085; font-size:10px; }
.portal-v4 .portal-v4-release-flow span:not(:last-child)::after { content:"›"; position:absolute; right:-3px; color:#a2a8b1; }
.portal-v4 .portal-v4-release-flow span.active { color:var(--portal-accent); font-weight:700; }
.portal-v4 .portal-v4-loading,.portal-v4 .portal-v4-error { padding:56px 20px; border:1px solid var(--line); border-radius:6px; background:#fff; text-align:center; color:var(--portal-muted); }
.portal-v4 .portal-v4-error { color:#a5001e; }
.portal-v4-dialog { width:min(720px,calc(100vw - 48px)); max-height:86vh; padding:0; border:0; border-radius:8px; box-shadow:0 24px 70px rgba(20,25,33,.25); }
.portal-v4-dialog::backdrop { background:rgba(24,29,36,.46); }
.portal-v4-dialog header { display:flex; justify-content:space-between; align-items:center; padding:17px 20px; border-bottom:1px solid #e4e7eb; }
.portal-v4-dialog header h2 { margin:0; font-size:16px; }
.portal-v4-dialog header button { border:0; background:transparent; font-size:20px; }
.portal-v4-dialog form { margin:0; }
.portal-v4-dialog .portal-v4-dialog-body { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:18px 20px; overflow:auto; }
.portal-v4-dialog .portal-v4-dialog-body label { display:grid; gap:5px; color:#596170; font-size:11px; }
.portal-v4-dialog .portal-v4-dialog-body label.wide { grid-column:1/-1; }
.portal-v4-dialog input,.portal-v4-dialog select,.portal-v4-dialog textarea { width:100%; border:1px solid #dfe3e8; border-radius:4px; padding:9px 10px; background:#fff; }
.portal-v4-dialog textarea { min-height:76px; resize:vertical; }
.portal-v4-dialog footer { display:flex; justify-content:flex-end; gap:8px; padding:13px 20px; border-top:1px solid #e4e7eb; }
@media (max-width:1280px) {
  .portal-v4 .portal-v4-grid,.portal-v4 .portal-v4-integration { grid-template-columns:1fr; }
  .portal-v4 .portal-v4-preview { position:static; }
}