.x2cs-page{--x2cs-accent:var(--primary,#4f46e5);--x2cs-accent-soft:color-mix(in srgb,var(--x2cs-accent) 18%,transparent);--x2cs-ink:var(--text-main,#0f172a);--x2cs-r:14px;--x2cs-r-sm:10px;--x2cs-line:var(--border,1px solid rgba(15,23,42,.1));padding-bottom:2.5rem;}
.x2cs-meter{display:grid;grid-template-columns:1fr;gap:.75rem;margin:0 0 1.25rem;padding:0;list-style:none;}
@media (min-width:640px){
.x2cs-meter{grid-template-columns:repeat(3,1fr);gap:1rem;}
}
.x2cs-meter li{margin:0;padding:.85rem 1rem;border-radius:var(--x2cs-r-sm);border:var(--x2cs-line);background:var(--surface-muted,#f8fafc);font-size:.875rem;line-height:1.45;color:var(--text-muted);}
.x2cs-meter strong{display:block;font-size:1.35rem;font-weight:800;color:var(--x2cs-ink);letter-spacing:-.02em;}
.x2cs-shell{position:relative;background:var(--surface,#fff);border:var(--x2cs-line);border-radius:var(--x2cs-r);box-shadow:var(--shadow-soft,0 14px 42px rgba(15,23,42,.08));overflow:hidden;}
.x2cs-shell::after{content:'';position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,#1e293b,var(--x2cs-accent),#94a3b8);opacity:.85;pointer-events:none;}
.x2cs-dock{display:flex;flex-wrap:wrap;gap:.4rem;padding:.65rem .75rem;border-bottom:var(--x2cs-line);background:var(--surface-muted,#f1f5f9);justify-content:center;}
@media (min-width:900px){
.x2cs-dock{display:none;}
}
.x2cs-dock button{padding:.45rem .9rem;font-size:.75rem;font-weight:700;border-radius:999px;border:var(--x2cs-line);background:var(--surface,#fff);color:var(--x2cs-ink);cursor:pointer;}
.x2cs-dock button:focus-visible{outline:2px solid var(--x2cs-accent);outline-offset:2px;}
.x2cs-viewport{display:flex;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:0;border-bottom:var(--x2cs-line);}
@media (min-width:900px){
.x2cs-viewport{display:grid;grid-template-columns:1fr 1fr;overflow:visible;scroll-snap-type:none;}
}
.x2cs-panel{flex:0 0 100%;width:100%;scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;box-sizing:border-box;}
@media (min-width:900px){
.x2cs-panel{flex:none;width:auto;}
}
.x2cs-panel--xml{border-right:0;}
@media (min-width:900px){
.x2cs-panel--xml{border-right:var(--x2cs-line);}
}
.x2cs-panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem;padding:.75rem 1rem .4rem;}
.x2cs-tag{font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);}
.x2cs-hint{font-size:.72rem;color:var(--text-muted);font-weight:600;max-width:18rem;text-align:right;}
.x2cs-editor-wrap{padding:0 1rem .85rem;flex:1;display:flex;flex-direction:column;min-height:0;}
.x2cs-editor{width:100%;min-height:280px;padding:.85rem 1rem;border-radius:var(--x2cs-r-sm);border:var(--x2cs-line);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.55;background:var(--surface,#fafafa);color:var(--x2cs-ink);resize:vertical;transition:border-color .15s,box-shadow .15s;}
@media (min-width:900px){
.x2cs-editor{min-height:min(52vh,420px);}
}
.x2cs-editor:focus{outline:none;border-color:color-mix(in srgb,var(--x2cs-accent) 55%,#cbd5e1);box-shadow:0 0 0 3px var(--x2cs-accent-soft);}
.x2cs-editor--error{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.12)!important;}
.x2cs-alert{margin:.25rem 1rem .85rem;padding:.55rem .75rem;border-radius:var(--x2cs-r-sm);font-size:.8rem;background:#fef2f2;color:#991b1b;border:1px solid #fecaca;}
.x2cs-alert[hidden]{display:none!important;}
.x2cs-rail{padding:.85rem 1rem;display:flex;flex-direction:column;gap:.65rem;border-bottom:var(--x2cs-line);background:linear-gradient(180deg,var(--surface-muted,#f8fafc),var(--surface,#fff));}
@media (min-width:640px){
.x2cs-rail{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;}
}
.x2cs-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.x2cs-btn{appearance:none;border-radius:var(--x2cs-r-sm);font-size:.8rem;font-weight:700;padding:.6rem 1.1rem;cursor:pointer;border:var(--x2cs-line);background:var(--surface,#fff);color:var(--x2cs-ink);transition:transform .12s,box-shadow .12s,background .12s;}
.x2cs-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.x2cs-btn:focus-visible{outline:2px solid var(--x2cs-accent);outline-offset:2px;}
.x2cs-btn--main{background:var(--x2cs-accent);color:#fff;border-color:transparent;box-shadow:0 6px 20px var(--x2cs-accent-soft);}
.x2cs-btn--main:hover:not(:disabled){filter:brightness(1.05);}
.x2cs-btn--ghost{background:transparent;}
.x2cs-btn--outline{background:var(--surface,#fff);}
.x2cs-btn--flash{box-shadow:0 0 0 2px color-mix(in srgb,var(--x2cs-accent) 35%,transparent);}
.x2cs-spinner{display:inline-block;width:.85rem;height:.85rem;margin-right:.35rem;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:x2cs-spin .7s linear infinite;vertical-align:-.1em;}
.x2cs-spinner[hidden]{display:none!important;}
@keyframes x2cs-spin{to{transform:rotate(360deg);}}
.x2cs-details{margin:0;border-top:var(--x2cs-line);background:var(--surface,#fff);}
.x2cs-details>summary{cursor:pointer;list-style:none;padding:.85rem 1rem;font-size:.8rem;font-weight:800;color:var(--x2cs-ink);display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.x2cs-details>summary::-webkit-details-marker{display:none;}
.x2cs-details>summary::after{content:'+';font-weight:400;color:var(--text-muted);}
.x2cs-details[open]>summary::after{content:'−';}
.x2cs-fields{padding:0 1rem 1rem;display:grid;gap:.85rem;}
@media (min-width:640px){
.x2cs-fields{grid-template-columns:repeat(2,1fr);}
}
.x2cs-field label{display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;color:var(--x2cs-ink);cursor:pointer;}
.x2cs-field input[type="checkbox"]{width:1rem;height:1rem;accent-color:var(--x2cs-accent);}
.x2cs-field select,.x2cs-field input[type="text"]{width:100%;margin-top:.35rem;padding:.45rem .55rem;border-radius:var(--x2cs-r-sm);border:var(--x2cs-line);font-size:.8rem;background:var(--surface,#fff);color:var(--x2cs-ink);}
.x2cs-field--full{grid-column:1/-1;}
.x2cs-prose{margin-top:2.25rem;}
.x2cs-prose h2{font-size:clamp(1.2rem,2.5vw,1.45rem);font-weight:800;margin:2rem 0 .65rem;color:var(--x2cs-ink);letter-spacing:-.02em;}
.x2cs-prose h2:first-child{margin-top:0;}
.x2cs-prose p,.x2cs-prose li{font-size:.95rem;line-height:1.65;color:var(--text-main,#334155);}
.x2cs-prose p{margin:.65rem 0;}
.x2cs-prose ul{padding-left:1.2rem;}
.x2cs-prose li{margin:.35rem 0;}
.x2cs-prose code{font-size:.82em;padding:.1rem .3rem;border-radius:4px;background:var(--surface-muted,#f1f5f9);}
.x2cs-callout{margin:1.5rem 0;padding:1rem 1.1rem;border-left:4px solid var(--x2cs-accent);border-radius:0 var(--x2cs-r-sm) var(--x2cs-r-sm) 0;background:var(--surface-muted,#f8fafc);font-size:.9rem;line-height:1.6;}
.x2cs-table-wrap{overflow-x:auto;margin:1rem 0;border-radius:var(--x2cs-r-sm);border:var(--x2cs-line);}
.x2cs-table{width:100%;border-collapse:collapse;font-size:.82rem;}
.x2cs-table th,.x2cs-table td{padding:.65rem .75rem;text-align:left;border-bottom:var(--x2cs-line);vertical-align:top;}
.x2cs-table th{background:var(--surface-muted,#f1f5f9);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);}
.x2cs-table tr:last-child td{border-bottom:0;}
.x2cs-dl{margin:1rem 0;display:grid;gap:.85rem;}
@media (min-width:640px){
.x2cs-dl{grid-template-columns:1fr 1fr;}
}
.x2cs-dl>div{margin:0;padding:1rem;border-radius:var(--x2cs-r-sm);border:var(--x2cs-line);background:var(--surface,#fff);}
.x2cs-dl dt{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 .35rem;}
.x2cs-dl dd{margin:0;font-family:ui-monospace,monospace;font-size:.72rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.x2cs-trust{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;margin:2rem 0 0;padding:.75rem 0;border-top:var(--x2cs-line);font-size:.78rem;color:var(--text-muted);}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
