/* Reusable components: card, bank card, account card, mechanism panels, modal, date/time
   fields, watch panel, schedule builder. */

.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px; margin-bottom:14px; }
.actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--line); }

/* ---- bank card */
.bank-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; margin-bottom:14px; }
.bank-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:6px; }
.bank-top { display:flex; justify-content:space-between; align-items:center; }
.bank-card h3 { font-size:16px; }

/* ---- account card */
.acct-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:16px; }
.acct { background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.acct.off { opacity:.7; }
.acct header { display:flex; align-items:center; gap:12px; padding:0; background:none; border:0; }
.avatar { width:42px; height:42px; border-radius:50%; background:var(--accent); color:#031018; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; flex:none; }
.avatar.tone-0 { background:#3b9eff; } .avatar.tone-1 { background:#2fd18b; } .avatar.tone-2 { background:#e0a526; }
.avatar.tone-3 { background:#c084fc; } .avatar.tone-4 { background:#fb7185; } .avatar.tone-5 { background:#22d3ee; }
.who { flex:1; min-width:0; }
.who h3 { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sub { color:var(--muted); font-size:12px; }
.flags { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.balances { display:flex; flex-wrap:wrap; gap:8px; }
.balances.empty { font-size:12px; }
.chip { display:flex; align-items:baseline; gap:6px; background:#0c121a; border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:12px; }
.chip b { font-size:14px; }
.chip-cur { color:var(--accent); font-weight:700; }
.chip-name { color:var(--muted); }
.chip.dest { border-color:var(--open); }
.chip.source { border-color:var(--accent); }

/* which accounts / amount this card buys with */
.purchase { background:#0c121a; border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.ps-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.ps-title { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.ps-line { display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.ps-edit { display:flex; flex-direction:column; gap:10px; }
.ps-edit[hidden], .ps-view[hidden] { display:none; }
.own { margin-left:6px; font-size:10px; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:8px; padding:0 5px; }
.pencil { font-size:16px; }

/* mechanisms */
.mechs { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:520px) { .mechs { grid-template-columns:1fr; } }
.mech { background:#0c121a; border:1px solid var(--line); border-left:4px solid var(--closed); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px; }
.mech.open { border-left-color:var(--open); background:linear-gradient(180deg,#0f2a21,#0c121a); }
.mech.closed { border-left-color:var(--bad); }
.mech.error { border-left-color:var(--amber); }
.mech.checking { border-left-color:var(--accent); }
.mech.stale { opacity:.75; }
.mech-top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.mech-name { font-weight:600; }
.mech-sub { color:var(--muted); font-size:11px; }
.mech-mid { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:12px; }
.state-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; background:#1b2735; color:var(--muted); white-space:nowrap; }
.state-pill .dot, .session .dot { width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block; }
.state-pill.open { background:#12392b; color:var(--open); }
.state-pill.open .dot { animation:pulse 1.4s infinite; }
.state-pill.closed { background:#3a1d1d; color:#ff8f88; }
.state-pill.error { background:#3a2e10; color:var(--amber); }
.state-pill.checking { background:#10304d; color:var(--accent); }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.check.done { color:var(--ok); font-weight:600; }
.check.uncertain { color:var(--warn); font-weight:600; }
.check.none { color:var(--muted); }
.why { font-size:11px; color:var(--muted); }

/* Comprar: colour follows the mechanism's state; disabled until the session is active */
.btn.buy { width:100%; padding:8px; font-weight:700; border-width:1px; }
.btn.buy.buy-open { background:var(--open); border-color:var(--open); color:#04140d; }
.btn.buy.buy-closed { background:#3a1d1d; border-color:var(--bad); color:#ffb4ae; }
.btn.buy.buy-error { background:#3a2e10; border-color:var(--amber); color:#f3d37a; }
.btn.buy.buy-unknown, .btn.buy.buy-checking { background:var(--line); color:var(--text); }
.btn.buy:disabled { background:#1b2430; border-color:var(--line); color:var(--muted); }

.session { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.session.ok { color:var(--ok); } .session.bad { color:var(--bad); } .session.checking { color:var(--accent); }
.more summary.btn { background:var(--line); border:1px solid var(--line); border-radius:6px; padding:3px 8px; font-size:12px; font-weight:400; color:var(--text); }
.more summary.btn:hover { border-color:var(--accent); }
.more { position:relative; }
.more summary { list-style:none; display:inline-block; cursor:pointer; }
.more summary::-webkit-details-marker { display:none; }
.more .menu { position:absolute; right:0; bottom:110%; z-index:5; background:var(--card2); border:1px solid var(--line); border-radius:8px; padding:6px; display:flex; flex-direction:column; gap:4px; min-width:170px; box-shadow:0 6px 18px rgba(0,0,0,.4); }
.more .menu .btn { text-align:left; margin:0; }

/* ---- modal */
.overlay { position:fixed; inset:0; background:rgba(5,9,14,.7); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.modal { background:var(--card2); border:1px solid var(--line); border-radius:14px; width:min(480px,100%); max-height:92vh; overflow:auto; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.modal.wide { width:min(720px,100%); }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); }
.modal-head h3 { font-size:16px; }
.modal-body { padding:16px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }

/* ---- date / time fields (Venezuelan format) */
.dt-field { min-width:150px; position:relative; display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.dt-row { display:flex; gap:6px; align-items:center; }
.dt-row input { width:7.5em; }
.dt-row select { padding:7px 6px; }
.quick { display:inline-flex; gap:4px; }
.time-field { width:max-content; max-width:100%; }
.time-row input[type=text] { width:6.3em; font-variant-numeric:tabular-nums; }
.time-clock { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--accent); border-radius:8px; background:#10304d; color:#cfe6ff; cursor:pointer; font-size:20px; line-height:1; }
.time-clock:hover, .time-clock:focus-visible { background:#17436b; color:#fff; outline:2px solid var(--accent); outline-offset:1px; }
.time-pop { position:absolute; z-index:20; left:0; top:66px; width:min(260px,calc(100vw - 40px)); padding:12px; border:1px solid var(--accent); border-radius:10px; background:var(--card2); box-shadow:0 12px 30px rgba(0,0,0,.5); display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; color:var(--text); }
.time-pop b, .time-pop small { grid-column:1 / -1; }
.time-pop input[type=time] { width:100%; min-height:40px; color-scheme:dark; font-size:16px; }

/* ---- watch panel */
.watch-panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; display:flex; flex-direction:column; gap:10px; }
.wp-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wp-head h3 { font-size:15px; }
.wp-grid { display:flex; gap:14px; flex-wrap:wrap; align-items:end; }
.days { display:flex; gap:6px; flex-wrap:wrap; }
.day { flex-direction:row; align-items:center; gap:4px; background:#0c121a; border:1px solid var(--line); border-radius:8px; padding:4px 10px; color:var(--text); cursor:pointer; }

/* ---- schedule builder */
.schedule-builder { display:flex; flex-direction:column; gap:10px; }
.schedule-builder input.amount { width:8em; }

/* ---- on/off switch */
.switch { display:inline-flex; flex-direction:row; align-items:center; gap:6px; cursor:pointer; color:var(--muted); font-size:12px; position:relative; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch .slider { width:30px; height:16px; background:#2a3646; border-radius:999px; position:relative; transition:background .15s; flex:none; }
.switch .slider::after { content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#9fb0c4; transition:transform .15s, background .15s; }
.switch input:checked + .slider { background:var(--accent); }
.switch input:checked + .slider::after { transform:translateX(14px); background:#fff; }
.switch input:focus-visible + .slider { outline:2px solid var(--accent); outline-offset:2px; }
.checks-group { display:flex; flex-direction:column; gap:8px; }

/* ---- segmented control */
.segmented { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.segmented .seg { background:transparent; border:0; color:var(--muted); padding:5px 12px; cursor:pointer; font:inherit; font-size:12px; }
.segmented .seg.on { background:var(--accent); color:#031018; font-weight:600; }

/* ---- a mechanism that is not being read */
.mech.off { border-left-color:#3a4658; opacity:.8; }
.state-pill.off { background:#1b2430; color:var(--muted); }
.btn.buy.buy-off { background:var(--line); color:var(--text); }

/* ---- Lite cards: same data, a fraction of the space */
.acct-grid.lite { grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:10px; }
.acct.lite { padding:10px 12px; gap:8px; border-radius:10px; }
.acct.lite header { gap:8px; }
.acct.lite .avatar { width:30px; height:30px; font-size:13px; }
.acct.lite .who h3 { font-size:14px; }
.acct.lite .flags { flex-direction:row; }
.acct.lite .balances { gap:6px; }
.acct.lite .chip { padding:3px 8px; }
.acct.lite .purchase { background:none; border:0; padding:6px 0 0; }
.mechs.rows { display:flex; flex-direction:column; gap:6px; }
.mech.mech-row { flex-direction:row; align-items:center; gap:8px; padding:6px 10px; }
.mech-row .mech-name { flex:1; min-width:0; font-size:13px; }
.mech-row .state-pill { font-size:11px; padding:2px 8px; }
.mech-row .btn.buy { width:auto; padding:4px 12px; font-size:12px; }
.acct.lite .session { font-size:11px; }
.acct.lite .actions .btn { margin:0; }

/* ---- session badge (the card's headline: is there an open session?) */
.sess-badge { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:4px 12px 4px 8px; border-radius:999px;
              font-size:12px; font-weight:700; border:1px solid var(--line); background:#1b2430; color:var(--muted); }
.sess-ico { width:14px; height:14px; border-radius:50%; border:2px solid currentColor; position:relative; flex:none; }
.sess-badge.on { background:#12392b; color:var(--open); border-color:#1d6b4f; }
.sess-badge.on .sess-ico { background:currentColor; box-shadow:0 0 0 3px rgba(47,209,139,.18); }
.sess-badge.on .sess-ico::after { content:""; position:absolute; left:3px; top:0px; width:3px; height:6px; border:solid #04140d; border-width:0 2px 2px 0; transform:rotate(45deg); }
.sess-badge.off { background:#241b1b; color:#d9a3a0; border-color:#4a2c2c; }
.sess-badge.off .sess-ico::after { content:""; position:absolute; left:2px; top:5px; width:6px; height:2px; background:currentColor; transform:rotate(-45deg); }
.sess-badge.checking { background:#10304d; color:var(--accent); border-color:#1b4f80; }
.acct.lite .sess-badge { padding:2px 10px 2px 6px; font-size:11px; }

/* ---- console button + console window */
.console-btn { font-family:ui-monospace,Consolas,monospace; font-size:13px; font-weight:700; border:1px solid var(--line); border-radius:6px; padding:3px 7px; color:var(--accent); }
.console-bar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.console { background:#05080c; border:1px solid var(--line); border-radius:8px; padding:10px; height:50vh; min-height:240px; overflow:auto;
           font:12px/1.5 ui-monospace,Consolas,monospace; color:#c9d6e3; }
.console .ln { display:flex; gap:10px; white-space:pre-wrap; word-break:break-word; }
.console .ts { color:#5f7388; flex:none; }
.console .lvl { flex:none; width:44px; font-weight:700; color:#7da7d9; }
.console .lv-warn .lvl, .console .lv-warn .msg-text { color:var(--amber); }
.console .lv-error .lvl, .console .lv-error .msg-text { color:#ff8f88; }
.console .lv-buy .lvl, .console .lv-buy .msg-text { color:var(--open); }
.console .lv-debug .lvl, .console .lv-debug .msg-text { color:#5f7388; }

/* ---- password field with the "eye" */
.pw-row { display:flex; gap:6px; align-items:stretch; }
.pw-row input { flex:1; min-width:0; }
.eye { background:#0c121a; border:1px solid var(--line); border-radius:6px; color:var(--muted); cursor:pointer; padding:0 10px; font-size:15px; line-height:1; }
.eye:hover { border-color:var(--accent); color:var(--text); }
.eye.on { background:var(--accent); border-color:var(--accent); color:#031018; }

/* ---- one user's group of accounts, with its session buttons */
.user-group { margin-bottom:26px; }
.user-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 10px;
            padding:10px 14px; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.ub-who { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.ub-who h3 { font-size:16px; }

/* ---- panic */
.btn.panic-btn { background:#5a1512; border:1px solid #e5534b; color:#ffd9d6; font-weight:800; letter-spacing:.03em; }
.btn.panic-btn:hover { background:#7a1c17; }
.panic.halted { display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; padding:10px 16px;
                background:#7a1c17; color:#fff; border-bottom:2px solid #e5534b; }
.panic.halted .btn.resume { background:#2fd18b; border-color:#2fd18b; color:#04140d; font-weight:700; }

/* ---- banks as one compact horizontal strip (several side by side, wrapping only when needed) */
.bank-strip { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.bank-strip .bank-card { flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px 14px; padding:8px 12px; border-radius:10px; flex:1 1 360px; max-width:640px; }
.bank-strip .bank-card.off { opacity:.8; }
.bank-strip .bank-top { gap:10px; justify-content:flex-start; }
.bank-strip .bank-card h3 { font-size:14px; }
.bank-strip .bank-sum { flex:1 1 160px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bank-strip .actions { margin-left:auto; }

/* ---- after a correct purchase: the card turns green (amber when the result is uncertain) */
.acct.bought { border-color:#1d6b4f; background:linear-gradient(180deg,#12392b22,transparent 40%),var(--card); box-shadow:0 0 0 1px #1d6b4f55; }
.acct.uncertain { border-color:#7a5a12; box-shadow:0 0 0 1px #7a5a1255; }
.bought-line { font-size:12px; font-weight:700; padding:5px 9px; border-radius:8px; margin-top:6px; line-height:1.35; }
.bought-line.done { background:#12392b; color:var(--open); border:1px solid #1d6b4f; }
.bought-line.uncertain { background:#3a2c0a; color:var(--amber); border:1px solid #7a5a12; }
.mech-wrap { display:flex; flex-direction:column; }
.mech-wrap .bought-line { margin:2px 0 4px; }

/* ---- card footer: refresh / close / last update time, then the orders and reports tools */
.acct .actions { align-items:center; flex-wrap:wrap; }
.acct .actions .spacer { flex:1; }
.upd { font-size:11px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.card-tools { display:flex; gap:6px; margin-top:8px; }
.btn.ghost { background:transparent; border-style:dashed; color:var(--muted); }
.btn.ghost:not(:disabled):hover { color:var(--text); }

/* ---- reports */
.report-bar { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.report-summary { display:flex; flex-wrap:wrap; gap:8px; }
.sum-chip { display:flex; flex-direction:column; gap:2px; padding:6px 12px; background:var(--card2); border:1px solid var(--line); border-radius:10px; min-width:96px; }
.sum-chip .sum-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.sum-chip.warn b { color:var(--amber); }
.sum-chip.bad b { color:#ff8f88; }
.modal table { font-variant-numeric:tabular-nums; }

/* ---- user portal: wallet, invoice, support, Telegram */
.pay-methods { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.ticket-msg { padding:8px 12px; border-radius:10px; background:var(--card2); border:1px solid var(--line); max-width:760px; }
.ticket-msg.admin { border-color:#1b4f80; background:#10304d55; margin-left:auto; }
.ticket-body { white-space:pre-wrap; word-break:break-word; margin-top:2px; }
.link-code { font-size:18px; letter-spacing:.06em; padding:6px 12px; background:#05080c; border:1px solid var(--line); border-radius:8px; user-select:all; }
textarea { width:100%; background:#0c121a; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:8px; font:inherit; resize:vertical; }
@media print { header, nav, .btn, .report-bar label, .toolbar { display:none !important; } body { background:#fff; color:#000; } }

/* ---- invitations / users admin */
.invite-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.invite-url { flex:1 1 320px; min-width:220px; font-family:ui-monospace,Consolas,monospace; font-size:12px; }
.invite-card { display:flex; flex-direction:column; gap:8px; }
.invite-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pending-banner { border-color:#7a5a12; background:#3a2c0a55; display:flex; flex-direction:column; gap:8px; }
.pending-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pending-card { max-width:720px; margin:40px auto; border-color:#7a5a12; }
.row-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

/* ---- somebody else's account (administrator view): read only */
.user-picker { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 12px; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; font:inherit; }
.chip:hover { border-color:var(--accent); color:var(--text); }
.chip.on { background:var(--accent); border-color:var(--accent); color:#031018; font-weight:700; }
.chip.on .count { background:#031018; color:var(--accent); border-color:#031018; }
.acct.ro { border-style:dashed; }
.private-note { font-size:12px; color:var(--muted); padding:8px 10px; border:1px dashed var(--line); border-radius:8px; }
.readonly-note { margin-bottom:8px; }

/* ---- the shared text editor */
.text-editor { display:flex; flex-direction:column; gap:6px; }
.te-label { font-size:12px; color:var(--muted); }
.te-area { width:100%; resize:vertical; min-height:4.5em; line-height:1.5; background:#0c121a; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font:inherit; }
.te-area:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 2px #3b9eff33; }
.te-area:disabled { opacity:.6; }
.te-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.te-meta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:12px; }
.te-count { color:var(--muted); font-variant-numeric:tabular-nums; }
.te-count.warn { color:var(--amber); }
.te-count.bad { color:#ff8f88; font-weight:700; }
.te-actions { display:flex; gap:8px; }
.te-chips { display:flex; gap:6px; flex-wrap:wrap; }
.te-error { margin:0; }

/* ---- support: list + live conversation */
.tk-top-bar { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.tk-layout { display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:16px; align-items:start; }
@media (max-width:860px) { .tk-layout { grid-template-columns:1fr; } }
.tk-side { display:flex; flex-direction:column; gap:10px; position:sticky; top:8px; }
.tk-search { width:100%; }
.tk-filters { display:flex; gap:4px; flex-wrap:wrap; }
.tk-filters .chip { padding:3px 10px; font-size:12px; }
.tk-list { display:flex; flex-direction:column; gap:6px; max-height:70vh; overflow:auto; }
.tk-item { text-align:left; display:flex; flex-direction:column; gap:3px; padding:9px 12px; background:var(--panel); border:1px solid var(--line); border-radius:10px; color:var(--text); cursor:pointer; font:inherit; }
.tk-item:hover { border-color:var(--accent); }
.tk-item.on { border-color:var(--accent); background:#10304d55; }
.tk-item.unread { border-left:4px solid var(--accent); }
.tk-top { display:flex; align-items:center; gap:8px; }
.tk-subject { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-meta, .tk-preview { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dot-unread { width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; box-shadow:0 0 0 3px #3b9eff33; }
.tk-detail { min-width:0; }
.thread { display:flex; flex-direction:column; gap:12px; margin:0; }
.thread-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.thread-head h3 { font-size:16px; }
.thread-actions { display:flex; gap:8px; align-items:center; }
.thread-msgs { display:flex; flex-direction:column; gap:10px; max-height:55vh; overflow:auto; padding-right:4px; }
.ticket-msg { max-width:min(680px,92%); padding:8px 12px; border-radius:12px; background:var(--card2); border:1px solid var(--line); align-self:flex-start; }
.ticket-msg.mine { align-self:flex-end; background:#10304d66; border-color:#1b4f80; }
.ticket-msg.admin:not(.mine) { border-color:#1d6b4f; background:#12392b55; }
.msg-meta { display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:2px; }
.thread-foot { border-top:1px solid var(--line); padding-top:10px; }
.tk-empty, .tk-hint { padding:18px; text-align:center; }

/* ---- prominent "edit amounts" pencil + Lite compact purchase line + keep-alive */
.btn.edit-prefs { background:#10304d; border-color:#1b4f80; color:#cfe6ff; font-weight:700; }
.btn.edit-prefs:hover { background:#17436b; border-color:var(--accent); color:#fff; }
.purchase.compact { padding:6px 0; }
.purchase.compact .ps-head { align-items:center; }
.ps-line-c { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; min-width:0; }
.ps-line-c b { font-size:14px; }
.keepalive-row { margin:6px 0 2px; }
.acct.lite .keepalive-row { margin:4px 0; }
.buy-many .pick-row .tag { margin-left:auto; }

/* ---- reusable in-page tabs: horizontal and scrollable on narrow screens */
.tabs-shell { min-width:0; }
.tabs { display:flex; gap:4px; padding:4px; margin:14px 0; width:max-content; max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:#0c121a; scrollbar-width:thin; }
.tab-btn { flex:none; border:0; border-radius:7px; padding:8px 14px; background:transparent; color:var(--muted); cursor:pointer; font:inherit; white-space:nowrap; }
.tab-btn:hover { color:var(--text); background:var(--card2); }
.tab-btn.on { background:var(--accent); color:#031018; font-weight:700; }
.tab-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.tab-panel { min-width:0; }

/* ---- exact-time selector responsive fit */
@media (max-width:520px) {
  .time-pair { flex-direction:column; gap:10px; }
  .time-field, .time-row { width:100%; }
  .time-row input[type=text] { flex:1; width:auto; min-width:0; }
  .time-pop { position:fixed; left:16px; right:16px; top:auto; bottom:16px; width:auto; z-index:60; }
}

/* ---- consolidated user activity */
.activity-help { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.console-account { flex:none; color:#8ec8ff; font-weight:700; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-scroll { width:100%; overflow-x:auto; }
.table-scroll table { min-width:780px; }
@media (max-width:620px) {
  .console .ln { display:grid; grid-template-columns:auto auto 1fr; gap:3px 8px; }
  .console .ln .msg-text { grid-column:1 / -1; }
  .console-account { max-width:none; }
}