.hidden{display:none !important}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.actions.empty{visibility:hidden}
.btn:disabled{cursor:wait;filter:none;opacity:.58}
.compat-link{align-self:center;padding:7px 2px;border:0;border-radius:4px;background:transparent;color:var(--muted);font:inherit;font-size:14px;line-height:1.45;text-decoration:underline;text-decoration-color:var(--border2);text-underline-offset:3px;cursor:pointer}
.compat-link:hover{color:var(--ink);text-decoration-color:currentColor}
.compat-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.compat-link:disabled{cursor:wait;opacity:.58}

.notice{margin-top:22px;display:flex;align-items:flex-start;gap:10px;min-height:52px;padding:12px 16px;border-radius:11px;border:1px solid var(--border);background:var(--card);font-size:15px;line-height:1.55;color:var(--ink)}
.notice:empty{display:none}
.notice::before{content:"";display:block;flex:0 0 20px;width:20px;height:20px;margin-top:2px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='8' r='1.2' fill='black'/%3E%3Cpath d='M11 11h2v7h-2z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='8' r='1.2' fill='black'/%3E%3Cpath d='M11 11h2v7h-2z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}
.notice[data-type="ok"]::before{background:var(--ok);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m7.5 12 3 3 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m7.5 12 3 3 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.notice[data-type="error"]::before{background:#c43d43;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M11 6h2v8h-2zM11 16h2v2h-2z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M11 6h2v8h-2zM11 16h2v2h-2z' fill='black'/%3E%3C/svg%3E")}
.notice[data-type="ok"]{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 9%,var(--card))}
.notice[data-type="error"]{border-color:color-mix(in srgb,#d3494e 50%,transparent);background:color-mix(in srgb,#d3494e 8%,var(--card))}
.notice[data-type="info"]{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:var(--accent-soft)}

.config-preview{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:26px 28px;min-height:300px}
.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}
.preview-heading h3{min-width:0;margin:0;font-size:17.5px;font-weight:620;letter-spacing:-.01em;overflow-wrap:anywhere}
.empty-state{min-height:220px;display:grid;align-items:center}
.empty-state p{margin:0;font-size:15px;color:var(--muted);line-height:1.65}
.empty-state code,.mini-steps code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:var(--inset);border:1px solid var(--border);border-radius:5px;padding:1px 6px}

.summary-badges{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.summary-chip{display:inline-flex;align-items:center;min-height:27px;padding:3px 10px;border-radius:999px;background:var(--inset);color:var(--muted);font-size:12.5px;white-space:nowrap}
.summary-chip.headers{background:color-mix(in srgb,#3b82f6 11%,var(--card));color:color-mix(in srgb,#3b82f6 82%,var(--ink))}
.summary-chip.accent{background:var(--accent-soft);color:var(--accent)}

.validation-notice{margin:16px 0 0;padding:10px 12px;border:1px solid color-mix(in srgb,#d3494e 48%,transparent);border-radius:9px;background:color-mix(in srgb,#d3494e 8%,var(--card));color:var(--ink);font-size:13.5px;line-height:1.5}
.preview-section{margin-top:20px;padding:0}
.preview-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}
.preview-section h4{font-size:13px;font-weight:650;color:var(--muted)}
.legacy-experience .preview-section{margin-top:0}
.legacy-experience .preview-section-head{display:none}

.preview-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.preview-row{min-width:0;padding:11px 0;border-bottom:1px dashed var(--border2);font-size:13.5px}
.preview-row.invalid{background:color-mix(in srgb,#d3494e 4%,transparent)}
.header-row{display:grid;grid-template-columns:minmax(100px,.85fr) minmax(130px,1.15fr);gap:16px;align-items:center}
.preview-key,.preview-value,.filter-expression{font-family:ui-monospace,"SF Mono",Menlo,monospace;overflow-wrap:anywhere}
.preview-key{color:var(--ink)}
.preview-value{color:var(--muted);white-space:pre-wrap}
.preview-value-wrap{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;text-align:right}
.sensitive-value-toggle{position:relative;min-width:0;padding:0;border:0;border-bottom:1px dotted var(--border2);background:transparent;font:inherit;font-family:ui-monospace,"SF Mono",Menlo,monospace;line-height:inherit;cursor:pointer}
.sensitive-value-toggle::after{content:attr(data-action);position:absolute;right:0;bottom:calc(100% + 6px);z-index:2;padding:3px 7px;border:1px solid var(--border2);border-radius:6px;background:var(--card);box-shadow:0 4px 14px rgba(23,32,45,.12);color:var(--muted);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:10.5px;font-weight:600;line-height:1.3;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(2px);transition:opacity .12s,transform .12s}
.sensitive-value-toggle:hover::after,.sensitive-value-toggle:focus-visible::after{opacity:1;transform:translateY(0)}
.sensitive-value-toggle:hover{color:var(--ink);border-bottom-color:var(--accent)}
.sensitive-value-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sensitive-value-toggle.revealed{color:var(--ink)}
.filter-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.filter-expression{min-width:0;color:var(--ink)}
.filter-badges{display:flex;gap:6px;flex:none}
.preview-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:10.5px;font-weight:620;white-space:nowrap}
.preview-badge.enabled{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.preview-badge.disabled{background:var(--inset);color:var(--faint)}
.preview-badge.invalid{background:color-mix(in srgb,#d3494e 12%,transparent);color:#b7353b}

.preview-assurance{margin:16px 0 0;color:var(--faint);font-size:12.5px;line-height:1.5}

.mini-steps{margin:0;padding-left:1.3em;color:var(--muted);font-size:15.5px;line-height:2}


@media (min-width:821px){
  .share-hero.has-params .wrap{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:52px;align-items:start;padding-top:97px}
  .share-hero.has-params .hero-copy{position:relative}
  .share-hero.has-params #sharePill{position:absolute;left:0;bottom:calc(100% + 22px);margin:0}
}

@media (max-width:820px){
  .actions .btn{flex:1;min-width:150px}
}

@media (max-width:520px){
  .config-preview{padding:22px 18px}
  .preview-heading{align-items:flex-start;flex-direction:column;gap:10px}
  .summary-badges{justify-content:flex-start}
  .header-row{grid-template-columns:1fr;gap:4px}
  .preview-value-wrap{justify-content:flex-start;text-align:left}
  .filter-row{align-items:flex-start;flex-direction:column;gap:7px}
}