/* QuickBooks Online add-on: Settings > QuickBooks Integration pages (.qb) and the account panel (.qpanel).
   Adapted from the approved mockups (qbo-mockups/assets/qbo.css); everything is scoped so nothing leaks elsewhere. */
.menu-badge { font-size:.68rem; font-weight:700; letter-spacing:.03em; color:#1d3557; background:#e0e7ef; border-radius:4px; padding:.02rem .35rem; margin-left:.25rem; white-space:nowrap; vertical-align:middle; }
.qb-logo { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#2CA01C; color:#fff; font:700 .72rem/1 system-ui, sans-serif; letter-spacing:-.02em; flex:none; }
.qb-logo.lg { width:34px; height:34px; font-size:1rem; }
.qb .btn-intuit, .qpanel .btn-intuit { display:inline-flex; align-items:center; gap:.55rem; background:#2CA01C; color:#fff; border:0; border-radius:4px; padding:.55rem 1.1rem; font-weight:600; font-size:.95rem; text-decoration:none; cursor:pointer; box-shadow:0 1px 0 #1d7a12; }
.qb .btn-intuit .qb-logo { background:#fff; color:#2CA01C; }
.qb .btn-intuit:hover { background:#108000; }
.qb .page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:.6rem; flex-wrap:wrap; }
.qb .page-head h1 { display:flex; align-items:center; gap:.5rem; margin:.2rem 0; }
.qb .page-head .sub2 { color:var(--muted); font-size:.9rem; }
.qb .page-head .actions { display:flex; gap:.45rem; align-items:center; }
.qb .addon-tag { font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#1d3557; background:#e0e7ef; border-radius:4px; padding:.05rem .4rem; vertical-align:middle; }
.qb .addon-tag.st-ok { background:#dcfce7; color:#14532d; } .qb .addon-tag.st-off { background:#f1f5f9; color:#475569; }
.qb .addon-tag.st-warn { background:#fef3c7; color:#92400e; } .qb .addon-tag.st-err { background:#fee2e2; color:#991b1b; }
.qb .qcard, .qcard.qpanel { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1rem 1.1rem; margin-bottom:1rem; position:relative; }
.qb .qcard h2, .qpanel h2 { margin:0; font-size:1.08rem; display:flex; align-items:center; gap:.5rem; }
.qb .qcard .hrow, .qpanel .hrow { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.5rem; flex-wrap:wrap; }
.qb .qcard p { margin:.35rem 0; font-size:.9rem; }
.qb ul.ticks { margin:.4rem 0 .6rem; padding-left:1.1rem; font-size:.88rem; } .qb ul.ticks li { margin:.1rem 0; }
.qb .kv2, .qpanel .kv2 { display:grid; grid-template-columns:9.5rem 1fr; gap:.25rem .9rem; font-size:.9rem; margin:.4rem 0 .7rem; }
.qb .kv2 dt, .qpanel .kv2 dt { color:var(--muted); } .qb .kv2 dd, .qpanel .kv2 dd { margin:0; }
.qb .mono { font-family:ui-monospace, monospace; font-size:.85em; }
.qb .btnrow { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-top:.6rem; }
.qb .btnrow form { display:inline; margin:0; }
.qb .tabs { display:flex; gap:.2rem; border-bottom:2px solid var(--line); margin:.4rem 0 1rem; }
.qb .tabs a { padding:.4rem .8rem; text-decoration:none; color:#374151; border-bottom:2px solid transparent; margin-bottom:-2px; font-size:.92rem; }
.qb .tabs a.on { border-bottom-color:var(--brand); color:var(--brand); font-weight:600; }
.qb .tabs .count { background:#fee2e2; color:#991b1b; border-radius:999px; padding:0 .4rem; font-size:.75rem; margin-left:.25rem; }
.qb .seg { display:inline-flex; border:1px solid #cbd2da; border-radius:5px; overflow:hidden; background:#fff; vertical-align:middle; }
.qb .seg a, .qb .seg span, .qb .seg label { padding:.3rem .65rem; font-size:.84rem; text-decoration:none; color:#374151; border-right:1px solid #e5e7eb; white-space:nowrap; cursor:pointer; margin:0; }
.qb .seg > :last-child { border-right:0; }
.qb .seg .on, .qb .seg label:has(input:checked) { background:var(--brand); color:#fff; font-weight:600; }
.qb .seg input[type=radio] { position:absolute; opacity:0; width:1px; height:1px; }
.qb .seg label:has(input:focus-visible) { outline:2px solid #2563eb; outline-offset:-2px; }
.qb .seg label:has(input:disabled) { cursor:default; }
.qb .seg.sm a, .qb .seg.sm span, .qb .seg.sm label { padding:.2rem .5rem; font-size:.8rem; }
.qb .seg .count { margin-left:.25rem; opacity:.8; }
.qb table.sync { width:100%; background:#fff; border-collapse:collapse; font-size:.9rem; table-layout:fixed; }
.qb table.sync th, .qb table.log th, .qb table.match th { text-align:left; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:2px solid var(--line); padding:.45rem .55rem; }
.qb table.sync td { border-bottom:1px solid var(--line); padding:.55rem .55rem; vertical-align:top; overflow-wrap:anywhere; }
.qb table.sync tr.soon td { color:#64748b; background:#fafbfc; }
.qb .objname { font-weight:600; } .qb .objname small { display:block; font-weight:400; color:var(--muted); font-size:.8rem; }
.qb .soon-tag { font-size:.7rem; font-weight:700; color:#5b21b6; background:#ede9fe; border-radius:4px; padding:.02rem .35rem; margin-left:.3rem; white-space:nowrap; }
.qb .map { font-size:.88rem; } .qb .map .arrow { color:var(--muted); margin:0 .3rem; }
.qb .radio { display:flex; gap:.45rem; align-items:flex-start; font-size:.9rem; margin:.35rem 0; cursor:pointer; }
.qb .radio input { margin-top:.2rem; } .qb .radio small { display:block; color:var(--muted); font-size:.8rem; }
.qb .cols2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; align-items:start; }
.qb .cols3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; align-items:start; }
@media (max-width: 900px) { .qb .cols2, .qb .cols3, .qb .health { grid-template-columns:1fr; } }
.qb .wiz-entry { display:flex; align-items:center; gap:1rem; justify-content:space-between; background:#f0f7ff; border:1px solid #bfd3ea; border-radius:8px; padding:.8rem 1rem; margin-bottom:1rem; flex-wrap:wrap; }
.qb .wiz-entry.done { background:#f0fdf4; border-color:#b7dfb0; }
.qb .wiz-entry .nums { display:flex; gap:1.2rem; } .qb .wiz-entry .nums b { display:block; font-size:1.25rem; color:var(--brand); } .qb .wiz-entry .nums span { font-size:.78rem; color:var(--muted); }
.qb .steps { display:flex; gap:.4rem; margin:.3rem 0 .8rem; flex-wrap:wrap; }
.qb .steps a, .qb .steps span { font-size:.85rem; padding:.25rem .65rem; border-radius:999px; background:#f1f5f9; color:#475569; text-decoration:none; }
.qb .steps .on { background:var(--brand); color:#fff; font-weight:600; }
.qb table.match { width:100%; border-collapse:collapse; background:#fff; font-size:.88rem; table-layout:fixed; }
.qb table.match td { border-bottom:1px solid var(--line); padding:.45rem .55rem; vertical-align:middle; }
.qb table.match tr.skip td { color:#94a3b8; } .qb table.match tr.newrow td { background:#f0fdf4; }
.qb table.match select { width:100%; max-width:100%; font-size:.86rem; }
.qb .conf { font-size:.78rem; font-weight:600; border-radius:999px; padding:.05rem .45rem; white-space:nowrap; }
.qb .conf.hi { background:#dcfce7; color:#14532d; } .qb .conf.md { background:#fef3c7; color:#92400e; } .qb .conf.lo { background:#f1f5f9; color:#64748b; }
.qb .why { display:block; font-size:.76rem; color:var(--muted); margin-top:.1rem; }
.qb .wiz-foot { display:flex; justify-content:space-between; align-items:center; gap:1rem; background:#fff; border:1px solid var(--line); border-radius:6px; padding:.6rem .8rem; margin-top:.8rem; font-size:.9rem; flex-wrap:wrap; }
.qb table.log { width:100%; border-collapse:collapse; background:#fff; font-size:.86rem; }
.qb table.log td { padding:.45rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
.qb table.log tr.err td { background:#fef7f7; } .qb table.log tr.err td:first-child { box-shadow:inset 4px 0 0 #dc2626; }
.qb table.log tr.held td:first-child { box-shadow:inset 4px 0 0 #f59e0b; }
.qb .dirb { font-size:.74rem; font-weight:700; border-radius:4px; padding:.02rem .35rem; white-space:nowrap; }
.qb .dirb.push { background:#e0e7ef; color:#1d3557; } .qb .dirb.pull { background:#dcfce7; color:#14532d; } .qb .dirb.system { background:#f1f5f9; color:#475569; }
.qb .st { font-size:.74rem; font-weight:600; border-radius:999px; padding:.03rem .45rem; white-space:nowrap; background:#e0f2fe; color:#075985; }
.qb .st.st-err { background:#fee2e2; color:#991b1b; } .qb .st.st-held { background:#fef3c7; color:#92400e; } .qb .st.st-ok { background:#dcfce7; color:#14532d; }
.qb .tech { display:block; font-family:ui-monospace, monospace; font-size:.72rem; color:#94a3b8; margin-top:.15rem; }
.qb .health { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; margin-bottom:1rem; }
.qb .health > div { background:#fff; border:1px solid var(--line); border-radius:6px; padding:.5rem .7rem; }
.qb .health .k { font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } .qb .health .v { font-size:1.05rem; font-weight:700; }
.qb .health .v.ok { color:#15803d; } .qb .health .v.bad { color:#b91c1c; }
.qb .toolbar2 { display:flex; gap:.5rem; align-items:center; margin:.4rem 0 .6rem; flex-wrap:wrap; } .qb .toolbar2 .grow { flex:1; }
.qb .toolbar2 form { display:inline; margin:0; }
.qb .lockrow { font-size:.82rem; color:var(--muted); }
.qb .nowrap { white-space:nowrap; } .qb .r { text-align:right; }
.qb .unlinked { list-style:none; padding:0; margin:.4rem 0; font-size:.88rem; }
.qb .unlinked li { display:flex; gap:.4rem; align-items:center; padding:.15rem 0; } .qb .unlinked li .amt { margin-left:auto; color:#374151; }
/* Account record panel */
.qcard.qpanel { border:1px solid #b7dfb0; border-top:4px solid #2CA01C; max-width:46rem; margin-top:1rem; }
.qpanel .bal { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.5rem; margin:.5rem 0 .7rem; }
.qpanel .bal > div { background:#f8fafc; border:1px solid var(--line); border-radius:6px; padding:.4rem .55rem; }
.qpanel .bal .k { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); } .qpanel .bal .v { font-size:1.15rem; font-weight:700; }
.qpanel .bal .v.soon { font-size:.85rem; font-weight:600; color:#64748b; }
.qpanel .actions { display:flex; gap:.45rem; margin-top:.7rem; flex-wrap:wrap; align-items:center; } .qpanel .actions form { display:inline; margin:0; }
.qpanel .syncline { font-size:.78rem; color:var(--muted); display:flex; justify-content:space-between; gap:.5rem; margin-top:.5rem; align-items:center; }
.qpanel .syncline form { display:inline; margin:0; }
.qpanel .soon-box { background:#faf5ff; border:1px dashed #c4b5fd; color:#5b21b6; border-radius:6px; padding:.45rem .6rem; font-size:.84rem; margin:.4rem 0; }
.qpanel .note { font-size:.78rem; color:var(--muted); margin-top:.5rem; }