/* CSS variables controlled by settings */
.qtxs-box{--qtxs-frame:#d33;--qtxs-title:#d11;--qtxs-btn-bg:#d33;--qtxs-btn-text:#fff;--qtxs-digit:#374151;--qtxs-db:#d11;--qtxs-filter-active-bg:#d33;--qtxs-filter-active-text:#fff}

.qtxs-box{border:2px solid var(--qtxs-frame);background:#fff;border-radius:14px;padding:16px;box-shadow:0 6px 24px rgba(221,51,51,.08);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.qtxs-header{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.qtxs-field{display:flex;flex-direction:column;gap:6px}
.qtxs-field label{font-weight:600}
.qtxs-header select,.qtxs-btn-spin{padding:10px 12px;border:1px solid #ddd;border-radius:10px;font-weight:600;line-height:1.2}
.qtxs-btn-spin{background:var(--qtxs-btn-bg);color:var(--qtxs-btn-text);border-color:var(--qtxs-btn-bg);cursor:pointer}
.qtxs-title{font-size:20px;font-weight:800;color:var(--qtxs-title);letter-spacing:.5px;text-align:center}
.qtxs-subtitle{font-size:12px;color:#555;text-align:center;margin:4px 0 10px 0}

.qtxs-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;border:1px solid #e6e6e6;border-radius:12px;overflow:hidden}
.qtxs-table thead th{background:#fafafa;border-bottom:1px solid #e6e6e6;font-weight:700;text-transform:uppercase;font-size:12px;color:#666;padding:10px}
.qtxs-table th.col-label{width:140px;text-align:left}
.qtxs-table td,.qtxs-table th{padding:10px 12px;border-bottom:1px solid #eee;vertical-align:middle}
.qtxs-table tbody tr:last-child td{border-bottom:none}
.qtxs-label{font-weight:600;color:#222;white-space:nowrap}
.qtxs-label.red{color:var(--qtxs-db)}

.qtxs-grid{display:grid;gap:10px;grid-template-columns:repeat(var(--cols),minmax(0,1fr));align-items:center;width:100%}
.qtxs-cell{display:flex;justify-content:center;align-items:center;min-height:44px;padding:6px 10px;border:1px solid #eee;border-radius:10px;background:#fafafa;width:100%}

/* Spinner placeholder */
.qtxs-spinner{width:18px;height:18px;border:3px dotted #22c55e;border-radius:999px;animation:qtxs-spin 1.1s linear infinite,qtxs-hue 6s linear infinite}
@keyframes qtxs-spin{to{transform:rotate(360deg)}}
@keyframes qtxs-hue{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}

/* Digits lighter */
.qtxs-digits{display:flex;gap:6px;justify-content:center;align-items:center;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;letter-spacing:1px;color:var(--qtxs-digit)}
.qtxs-digit{font-weight:700;font-size:22px;line-height:1;min-width:0.6em;text-align:center}
.qtxs-db .qtxs-digit{color:var(--qtxs-db)}

/* Filter buttons */
.qtxs-filter{display:flex;gap:12px;justify-content:space-around;margin:14px 4px 2px}
.qtxs-filter-btn{flex:1;max-width:220px;padding:10px 12px;border:1px solid var(--qtxs-frame);border-radius:10px;background:#fff;font-weight:700;color:var(--qtxs-frame);cursor:pointer}
.qtxs-filter-btn.active{background:var(--qtxs-filter-active-bg);color:var(--qtxs-filter-active-text)}

@media (max-width:600px){
  .qtxs-table th.col-label{width:96px}
  .qtxs-grid{gap:8px}
  .qtxs-cell{min-height:40px;padding:6px}
  .qtxs-digits{gap:4px}
  .qtxs-digit{font-size:20px}
  .qtxs-filter{gap:8px}
  .qtxs-filter-btn{padding:8px}
}
@media (max-width:400px){
  .qtxs-table th.col-label{width:84px}
  .qtxs-digit{font-size:18px}
}


/* v4.1 mobile tighten spacing */
@media (max-width:600px){
  .qtxs-digits{gap:2px;letter-spacing:0}
  .qtxs-digit{font-size:19px;min-width:0.54em}
  .qtxs-cell{padding:4px 6px}
}
@media (max-width:400px){
  .qtxs-digits{gap:1px}
  .qtxs-digit{font-size:18px;min-width:0.52em}
  .qtxs-cell{padding:4px 5px}
}


/* v4.2 desktop tighten + adaptive */
.qtxs-digits{gap:4px;letter-spacing:0.2px}
.qtxs-digit{min-width:0.56em}
/* adaptive based on length */
.qtxs-digits.is-6{gap:3px}
.qtxs-digits.is-7,.qtxs-digits.is-8{gap:2px;letter-spacing:0}
.qtxs-digits.is-9,.qtxs-digits.is-10{gap:1px;letter-spacing:0}