.qb-wrap{max-width:900px;margin:28px auto;padding:12px;font:400 14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.qb-title{font:700 22px/1.2 system-ui;margin:6px 0 12px;text-align:center}
.qb-card{position:relative;background:transparent;border:1px solid #0b89a4;border-radius:8px;padding:12px;color:inherit}
.qb-row{display:flex;gap:10px;margin:6px 0;align-items:center}
.qb-col{flex:1}
.qb-label{display:block;margin:4px 0 6px;padding-left:8px;font-weight:400;font-size:12px;color:inherit}
.qb-input{width:100%;padding:8px 10px;border:1px solid #0b89a4;border-radius:8px;background:transparent;color:inherit;font-weight:400;height:38px;outline:none;caret-color:currentColor}
.qb-input::placeholder{opacity:.3;color:inherit}
.qb-input:focus{border-color:#e67306}
.qb-combo{position:relative}
.qb-combo-input{cursor:pointer}
.qb-combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:Canvas;border:1px solid #0b89a4;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06);max-height:288px;overflow:auto;z-index:2147483647;display:none;color:inherit}
.qb-combo.show .qb-combo-list{display:block !important;border-color:#e67306}
.qb-combo-item{padding:8px 10px;cursor:pointer}
.qb-combo-item:hover{background:color-mix(in srgb, currentColor 8%, transparent)}
.qb-topic-row{align-items:flex-end;gap:6px}
.qb-col-topic{flex:1 1 auto}
.qb-col-emoji{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-start}
.qb-col-topic .qb-input, .qb-col-topic .qb-combo-input{width:100%}
.qb-switch{display:inline-flex;align-items:center;gap:8px;height:28px}
.qb-switch input{display:none}
.qb-switch-text{font-size:12px;font-weight:400;margin:0}
.qb-slider{position:relative;width:44px;height:24px;border-radius:24px;background:#e8e8e8;cursor:pointer;transition:background .2s}
.qb-slider::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#e67306;transition:left .2s, background .2s}
.qb-switch input:checked + .qb-slider{background:#fff}
.qb-switch input:checked + .qb-slider::after{left:23px;background:#0b89a4}
.qb-actions{display:flex;justify-content:center;gap:8px;margin:10px 0 4px}
.qb-btn{width:100px;height:38px;border-radius:8px;cursor:pointer;font-weight:400;border:1px solid #0b89a4;background:ButtonFace;color:ButtonText;display:inline-flex;align-items:center;justify-content:center;user-select:none;transition:background .15s, color .15s, border-color .15s}
.qb-btn:active{transform:translateY(1px)}
.qb-primary{border-color:#e67306 !important;background:rgba(230,114,7,0.08) !important;color:#e67306 !important;font-weight:700 !important}
.qb-primary:hover{border-color:#0b89a4 !important;background:rgba(11,135,163,0.09) !important;color:#0b89a4 !important}
.qb-outline{background:transparent;color:inherit}
.qb-xbtn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;opacity:.6;display:none;padding:0;line-height:1;font-size:16px}
.qb-results{margin-top:10px}
.qb-list{margin:0;padding-left:0;list-style:none}
.qb-list li{margin:10px 0}

/* Dark theme input surfaces */
html[data-theme="dark"] .qb-card .qb-input,
html[data-theme="dark"] .qb-card input.qb-combo-input,
html[data-theme="dark"] .qb-card .qb-combo-input {
  background:#0f171a !important;
  color:#e5f3f7 !important;
  border-color:#1e2c31 !important;
  caret-color:#e5f3f7 !important;
}
html[data-theme="dark"] .qb-card .qb-input::placeholder {
  color:rgba(229,243,247,.7) !important;
  opacity:.7 !important;
}
html[data-theme="dark"] .qb-card .qb-combo-list{
  background:#0f171a !important;
  color:#e5f3f7 !important;
  border-color:#1e2c31 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
html[data-theme="dark"] .qb-card .qb-combo-item:hover{
  background:rgba(229,243,247,.06) !important;
}
html[data-theme="dark"] .qb-card input.qb-input:-webkit-autofill,
html[data-theme="dark"] .qb-card input.qb-input:-webkit-autofill:hover,
html[data-theme="dark"] .qb-card input.qb-input:-webkit-autofill:focus {
  -webkit-text-fill-color:#e5f3f7 !important;
  caret-color:#e5f3f7 !important;
  box-shadow:0 0 0 1000px #0f171a inset !important;
  -webkit-box-shadow:0 0 0 1000px #0f171a inset !important;
  border-color:#1e2c31 !important;
}

/* Brand border overrides in dark */
html[data-theme="dark"] .qb-card .qb-input,
html[data-theme="dark"] .qb-card .qb-combo-input,
html[data-theme="dark"] .qb-card input.qb-input,
html[data-theme="dark"] .qb-card input.qb-combo-input {
  border-color: #0b89a4 !important;
}
html[data-theme="dark"] .qb-card .qb-input:hover,
html[data-theme="dark"] .qb-card .qb-combo-input:hover,
html[data-theme="dark"] .qb-card .qb-input:focus,
html[data-theme="dark"] .qb-card .qb-combo-input:focus,
html[data-theme="dark"] .qb-card input.qb-input:hover,
html[data-theme="dark"] .qb-card input.qb-input:focus,
html[data-theme="dark"] .qb-card input.qb-combo-input:hover,
html[data-theme="dark"] .qb-card input.qb-combo-input:focus {
  border-color: #e67306 !important;
}

/* Mobile */
@media (max-width:640px){
  .qb-row{flex-direction:column;gap:6px}
  .qb-topic-row{align-items:stretch}
  .qb-col-topic .qb-input, .qb-col-topic .qb-combo-input{width:100%}
}