.xurl-card{width:100%;background:var(--bs-body-bg,#fff);border:1px solid var(--bs-border-color,#dee2e6);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.06);overflow:hidden;margin-bottom:2rem;}
.xurl-card-body{padding:1.25rem;}
.xurl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-bottom:1.25rem;}
.xurl-mode{display:flex;gap:0;background:var(--bs-light,#f1f3f5);border-radius:999px;padding:4px;}
.xurl-mode-btn{flex:1;padding:0.625rem 1.25rem;border:0;border-radius:999px;font-size:0.9375rem;font-weight:500;cursor:pointer;background:transparent;color:var(--text-muted);transition:color 0.2s,background 0.2s;}
.xurl-mode-btn:hover{color:var(--bs-body-color);}
.xurl-mode-btn.is-active{background:var(--bs-body-bg,#fff);color:var(--bs-primary);box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.xurl-opts{display:flex;flex-wrap:wrap;gap:0.75rem 1.25rem;}
.xurl-opt{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--bs-body-color);cursor:pointer;user-select:none;}
.xurl-opt input{width:1.125rem;height:1.125rem;accent-color:var(--bs-primary);}
.xurl-panes{display:grid;grid-template-columns:1fr 1fr;gap:1rem;min-height:280px;}
.xurl-pane{display:flex;flex-direction:column;gap:0.375rem;min-width:0;}
.xurl-label{font-size:0.8125rem;font-weight:600;color:var(--text-muted);letter-spacing:0.02em;}
.xurl-editor{width:100%;min-height:200px;padding:0.875rem 1rem;border:1px solid var(--bs-border-color,#dee2e6);border-radius:10px;font-family:ui-monospace,monospace;font-size:0.875rem;line-height:1.5;resize:vertical;background:var(--bs-body-bg);transition:border-color 0.2s,box-shadow 0.2s;}
.xurl-editor:focus{outline:0;border-color:var(--bs-primary);box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb),0.15);}
.xurl-editor::placeholder{color:var(--text-muted);opacity:0.8;}
.xurl-result{background:var(--bs-light,#f8f9fa);}
.xurl-editor.is-error{border-color:var(--bs-danger);background:rgba(var(--bs-danger-rgb),0.04);}
.xurl-err{font-size:0.8125rem;color:var(--bs-danger);margin:0;}
.xurl-err[hidden]{display:none;}
.xurl-actions{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1.25rem;}
.xurl-btn{min-height:44px;padding:0 1.25rem;border-radius:10px;font-size:0.9375rem;font-weight:500;cursor:pointer;border:0;transition:background 0.2s,transform 0.15s;}
.xurl-btn:active{transform:scale(0.98);}
.xurl-btn-primary{background:var(--bs-primary);color:var(--bs-primary-color,#fff);}
.xurl-btn-primary:hover{filter:brightness(1.05);}
.xurl-btn-primary:disabled{opacity:0.6;cursor:not-allowed;}
.xurl-btn-ghost{background:transparent;color:var(--bs-primary);}
.xurl-btn-ghost:hover{background:rgba(var(--bs-primary-rgb),0.1);}
.xurl-toolbar{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bs-border-color-translucent);}
.xurl-tb-btn{min-height:40px;padding:0 1rem;border:1px solid var(--bs-border-color);border-radius:8px;font-size:0.875rem;background:var(--bs-body-bg);color:var(--bs-body-color);cursor:pointer;transition:border-color 0.2s,background 0.2s;}
.xurl-tb-btn:hover{border-color:var(--bs-primary);color:var(--bs-primary);}
@media (max-width:767px){.xurl-panes{grid-template-columns:1fr;min-height:0;}.xurl-editor{min-height:160px;}}
@media (min-width:768px){.xurl-card-body{padding:1.5rem;}.xurl-editor{min-height:260px;}}
@media (min-width:992px){.xurl-editor{min-height:320px;}}