.xs-card{--xs-radius:12px;--xs-bg:var(--surface,#fff);--xs-muted:var(--surface-muted,#f8f9fa);--xs-border:var(--border,#e9ecef);--xs-focus:var(--primary,#276ad0);--xs-text:var(--text-main,#212529);--xs-muted-text:var(--text-muted,#6c757d);background:var(--xs-bg);border:1px solid var(--xs-border);border-radius:var(--xs-radius);overflow:hidden;margin-bottom:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.xs-bar{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;background:var(--xs-muted);border-bottom:1px solid var(--xs-border);}
.xs-format-wrap{display:flex;flex-direction:column;gap:0.35rem;min-width:0;flex:1 1 200px;}
.xs-label{font-size:0.8125rem;font-weight:600;color:var(--xs-text);}
.xs-select{width:100%;max-width:220px;padding:0.5rem 2rem 0.5rem 0.75rem;font-size:0.9375rem;border:1px solid var(--xs-border);border-radius:8px;background:var(--xs-bg);color:var(--xs-text);appearance:auto;cursor:pointer;}
.xs-select:focus{outline:0;border-color:var(--xs-focus);box-shadow:0 0 0 2px rgba(39,106,208,0.2);}
.xs-options-details{border-radius:8px;background:var(--xs-bg);border:1px solid var(--xs-border);}
.xs-options-summary{padding:0.5rem 0.75rem;font-size:0.9375rem;font-weight:500;color:var(--xs-text);cursor:pointer;list-style:none;user-select:none;}
.xs-options-summary::-webkit-details-marker{display:none;}
.xs-options-inner{display:flex;flex-wrap:wrap;gap:0.75rem 1.25rem;padding:0.75rem 1rem;border-top:1px solid var(--xs-border);}
.xs-check{display:inline-flex;align-items:center;gap:0.5rem;cursor:pointer;font-size:0.875rem;color:var(--xs-text);}
.xs-check-input{width:1.125rem;height:1.125rem;accent-color:var(--xs-focus);cursor:pointer;}
.xs-var-wrap{display:none;flex-basis:100%;margin-top:0.25rem;}
.xs-var-wrap[style*="block"]{display:block;}
.xs-input{max-width:200px;padding:0.5rem 0.75rem;font-size:0.9375rem;border:1px solid var(--xs-border);border-radius:8px;background:var(--xs-bg);color:var(--xs-text);}
.xs-input:focus{outline:0;border-color:var(--xs-focus);}
.xs-flow{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.25rem;}
@media (min-width:900px){.xs-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:1.25rem;align-items:stretch;}}
.xs-panel{display:flex;flex-direction:column;min-height:280px;}
.xs-panel-head{padding:0.5rem 0;margin-bottom:0.25rem;}
.xs-panel-title{font-size:0.875rem;font-weight:600;color:var(--xs-muted-text);}
.xs-textarea{flex:1;min-height:240px;width:100%;padding:0.75rem 1rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:0.875rem;line-height:1.5;border:1px solid var(--xs-border);border-radius:8px;background:var(--xs-muted);color:var(--xs-text);resize:vertical;transition:border-color 0.15s ease,box-shadow 0.15s ease;}
.xs-textarea::placeholder{color:var(--xs-muted-text);}
.xs-textarea:focus{outline:0;border-color:var(--xs-focus);box-shadow:0 0 0 2px rgba(39,106,208,0.15);background:var(--xs-bg);}
.xs-textarea.error{border-color:#dc3545;background:#fff5f5;}
.xs-stats{padding:0.5rem 0;font-size:0.75rem;color:var(--xs-muted-text);}
.xs-actions{display:flex;flex-direction:column;gap:0.75rem;justify-content:center;padding:0.5rem 0;}
@media (min-width:900px){.xs-actions{flex-direction:column;min-width:120px;padding:0 0.25rem;}}
.xs-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.65rem 1.25rem;font-size:0.9375rem;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:transform 0.15s ease,background-color 0.15s ease,box-shadow 0.15s ease;}
.xs-btn:disabled{opacity:0.65;cursor:not-allowed;transform:none;}
.xs-btn-primary{background:var(--xs-focus);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.12);}
.xs-btn-primary:hover:not(:disabled){background:#1e5bb8;transform:translateY(-1px);box-shadow:0 4px 10px rgba(39,106,208,0.3);}
.xs-btn-primary.success{background:#28a745;}
.xs-btn-secondary{background:var(--xs-muted);color:var(--xs-text);border:1px solid var(--xs-border);}
.xs-btn-secondary:hover:not(:disabled){border-color:var(--xs-focus);color:var(--xs-focus);transform:translateY(-1px);}
.xs-btn-secondary.success{background:#d4edda;border-color:#28a745;color:#155724;}
.xs-spinner{display:none;width:22px;height:22px;border:2px solid var(--xs-muted);border-top-color:var(--xs-focus);border-radius:50%;animation:xs-spin 0.7s linear infinite;}
.xs-spinner[style*="block"]{display:inline-block;}
@keyframes xs-spin{to{transform:rotate(360deg);}}
.xs-foot{display:flex;flex-wrap:wrap;gap:0.75rem;padding:1rem 1.25rem;background:var(--xs-muted);border-top:1px solid var(--xs-border);}
.xs-foot-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;font-size:0.875rem;font-weight:500;color:var(--xs-text);background:var(--xs-bg);border:1px solid var(--xs-border);border-radius:8px;cursor:pointer;transition:border-color 0.15s ease,color 0.15s ease;}
.xs-foot-btn:hover{border-color:var(--xs-focus);color:var(--xs-focus);}
.xs-foot-btn.success{border-color:#28a745;color:#28a745;}
.xs-related{margin-bottom:2rem;font-size:0.9375rem;color:var(--xs-muted-text);}
.xs-related a{color:var(--xs-focus);text-decoration:underline;}
.xs-related a:hover{text-decoration:none;}
