*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f4f3ef;--surface:#ffffff;--surface2:#eceae4;--surface3:#e3e1da;
  --border:rgba(0,0,0,.07);--border-strong:rgba(0,0,0,.14);
  --text:#181816;--text-2:#63635d;--text-3:#98988f;
  --accent:#18a574;--accent-light:#d9f2e8;--accent-dark:#0d6b4c;
  --danger:#df3f3f;--danger-light:#fce8e8;
  --amber:#b06b0f;--amber-light:#f8e9d4;
  --blue:#1455a0;--blue-light:#e2ecfa;
  --shadow-sm:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 14px rgba(0,0,0,.09),0 1px 4px rgba(0,0,0,.05);
  --shadow-lg:0 8px 24px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.06);
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;
  --font:'DM Sans',sans-serif;--mono:'DM Mono',monospace;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --tab-h:68px;
}

/* ── Keyframes ──────────────────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(24,165,116,.4)}60%{opacity:.8;box-shadow:0 0 0 5px rgba(24,165,116,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}

/* ── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:10px}

/* ── Base ───────────────────────────────────────────────────────────────────── */
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:20px 16px 0;overflow-x:clip}
.app{width:100%;max-width:420px;padding-bottom:calc(var(--tab-h) + 28px)}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.header{display:flex;align-items:center;gap:11px;margin-bottom:20px;padding:0 2px 18px;border-bottom:1px solid var(--border)}
.logo-mark{width:38px;height:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark svg{width:18px;height:18px}
.header-text h1{font-size:18px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.header-text p{font-size:12px;color:var(--text-3);margin-top:1px}

/* ── Nav ────────────────────────────────────────────────────────────────────── */
.nav-wrap{background:var(--surface2);border-radius:var(--radius-md);padding:4px;margin-bottom:20px}
.nav-row{display:flex;gap:3px;margin-bottom:3px}
.nav-row:last-child{margin-bottom:0}
.tab{flex:1;padding:8px 6px;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:12px;font-weight:400;cursor:pointer;background:transparent;color:var(--text-2);transition:all .2s var(--ease);white-space:nowrap;letter-spacing:-.1px}
.tab:hover{color:var(--text);background:rgba(0,0,0,.04)}
.tab:active{transform:scale(.95)}
.tab.active{background:var(--surface);color:var(--text);font-weight:500;box-shadow:var(--shadow-sm)}

/* ── Tab content animation ───────────────────────────────────────────────────── */
.tab-in{animation:fadeUp .24s var(--ease) both}

/* ── Card ───────────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:12px;box-shadow:var(--shadow-sm)}

/* ── Fields ─────────────────────────────────────────────────────────────────── */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.label{display:block;font-size:11px;font-weight:500;color:var(--text-3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:7px}
select,input[type="number"],input[type="text"],input[type="date"],input[type="password"],textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s;appearance:none;-webkit-appearance:none
}
textarea{resize:vertical;min-height:72px;line-height:1.55}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a94' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
select:focus,input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(24,165,116,.13);background:var(--surface)}

/* ── Layout helpers ─────────────────────────────────────────────────────────── */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── Toggle buttons ─────────────────────────────────────────────────────────── */
.toggle-group{display:flex;gap:5px;flex-wrap:wrap}
.toggle-btn{flex:1;padding:9px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;font-weight:400;cursor:pointer;background:var(--bg);color:var(--text-2);transition:all .18s var(--ease);text-align:center;white-space:nowrap}
.toggle-btn:hover{border-color:var(--border-strong);color:var(--text);background:var(--surface2);transform:translateY(-1px)}
.toggle-btn:active{transform:scale(.96)}
.toggle-btn.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent-dark);font-weight:500}
.toggle-btn.active-danger{background:var(--danger-light);border-color:var(--danger);color:var(--danger);font-weight:500}
.toggle-btn.active-amber{background:var(--amber-light);border-color:var(--amber);color:var(--amber);font-weight:500}

/* ── Channel buttons ────────────────────────────────────────────────────────── */
.channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.channel-btn{padding:9px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;cursor:pointer;background:var(--bg);color:var(--text-2);text-align:center;transition:all .18s var(--ease)}
.channel-btn:hover{border-color:var(--border-strong);color:var(--text);transform:translateY(-1px)}
.channel-btn:active{transform:scale(.97)}
.channel-btn.active{background:var(--surface2);border-color:var(--border-strong);color:var(--text);font-weight:500}

/* ── Divider ────────────────────────────────────────────────────────────────── */
.divider{height:1px;background:var(--border);margin:16px 0}

/* ── Auto-order toggle ──────────────────────────────────────────────────────── */
.auto-order-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:10px;box-shadow:var(--shadow-sm);transition:border-color .2s}
.auto-order-row:has(.auto-order-toggle.active){border-color:var(--accent)}
.auto-order-left{display:flex;flex-direction:column;gap:2px}
.auto-order-label{font-size:13px;font-weight:500;color:var(--text)}
.auto-order-sub{font-size:11px;color:var(--text-3)}
.auto-order-toggle{width:40px;height:24px;border-radius:12px;border:none;background:var(--surface3);cursor:pointer;position:relative;flex-shrink:0;transition:background .22s var(--ease)}
.auto-order-toggle::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .22s var(--spring),box-shadow .2s;box-shadow:0 1px 4px rgba(0,0,0,.22)}
.auto-order-toggle.active{background:var(--accent)}
.auto-order-toggle.active::after{transform:translateX(16px)}

/* ── Submit button ──────────────────────────────────────────────────────────── */
.submit-btn{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font);font-size:15px;font-weight:500;cursor:pointer;letter-spacing:-.2px;transition:opacity .18s,transform .18s var(--spring),box-shadow .18s;box-shadow:0 2px 12px rgba(24,165,116,.32),0 1px 3px rgba(0,0,0,.08)}
.submit-btn:hover{opacity:.9;box-shadow:0 4px 20px rgba(24,165,116,.42);transform:translateY(-1px)}
.submit-btn:active{transform:scale(.98) translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.submit-btn:disabled{opacity:.32;cursor:not-allowed;box-shadow:none;transform:none}

/* ── Status message ─────────────────────────────────────────────────────────── */
.status-msg{font-size:13px;text-align:center;margin-top:10px;min-height:18px}
.status-msg.ok{color:var(--accent);animation:popIn .25s var(--spring)}
.status-msg.err{color:var(--danger);animation:popIn .25s var(--spring)}
.status-msg.loading{color:var(--text-3)}

/* ── User bar ───────────────────────────────────────────────────────────────── */
.user-bar{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 14px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.user-info{display:flex;align-items:center;gap:8px}
.user-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:pulse 2.8s ease-in-out infinite}
.user-email{font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}
.signout-btn{font-size:12px;color:var(--text-3);background:none;border:none;cursor:pointer;font-family:var(--font);padding:0;flex-shrink:0;transition:color .15s}
.signout-btn:hover{color:var(--danger)}

/* ── Sign-in card ───────────────────────────────────────────────────────────── */
.sign-in-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 24px;text-align:center;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.sign-in-icon{width:48px;height:48px;background:var(--surface2);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.sign-in-card h2{font-size:15px;font-weight:500;margin-bottom:6px}
.sign-in-card p{font-size:13px;color:var(--text-2);margin-bottom:20px;line-height:1.65}
.google-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 18px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;background:var(--surface);color:var(--text);transition:all .18s var(--ease)}
.google-btn:hover{background:var(--surface2);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.google-btn:active{transform:scale(.98)}

/* ── Misc ───────────────────────────────────────────────────────────────────── */
.section-label{font-size:11px;font-weight:500;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.saved-pill{display:inline-flex;align-items:center;background:var(--accent-light);color:var(--accent-dark);font-size:11px;font-weight:500;padding:2px 8px;border-radius:20px;margin-left:6px;animation:popIn .2s var(--spring)}
.mono-input{font-family:var(--mono)!important;font-size:12px!important}
.setup-sub{font-size:11px;font-weight:500;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;margin:20px 0 8px}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge{display:inline-block;font-size:11px;padding:3px 8px;border-radius:20px;font-weight:500}
.badge-gray{background:var(--surface2);color:var(--text-2)}
.badge-amber{background:var(--amber-light);color:var(--amber)}
.badge-green{background:var(--accent-light);color:var(--accent-dark)}
.badge-danger{background:var(--danger-light);color:var(--danger)}
.badge-blue{background:var(--blue-light);color:var(--blue)}

/* ── Record rows ────────────────────────────────────────────────────────────── */
.rec-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:7px;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s,transform .18s var(--ease);animation:fadeUp .22s var(--ease) both}
.rec-row:hover{border-color:rgba(0,0,0,.12);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.rec-row-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}
.rec-title{font-size:14px;font-weight:500;color:var(--text);line-height:1.3;flex:1}
.rec-amount-green{font-size:14px;font-weight:500;color:var(--accent);white-space:nowrap}
.rec-amount-red{font-size:14px;font-weight:500;color:var(--danger);white-space:nowrap}
.rec-meta{font-size:12px;color:var(--text-3);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rec-notes{font-size:12px;color:var(--text-2);margin-top:6px;padding-top:6px;border-top:1px solid var(--border);font-style:italic}
.rec-empty{text-align:center;padding:32px 16px;color:var(--text-3);font-size:13px;line-height:1.6}

/* ── Loading spinner ────────────────────────────────────────────────────────── */
.rec-loading{text-align:center;padding:32px 16px;color:var(--text-3);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:14px}
.rec-loading::before{content:'';width:24px;height:24px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .65s linear infinite}

/* ── Summary ────────────────────────────────────────────────────────────────── */
.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.summary-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:13px 15px;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .18s var(--ease)}
.summary-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.summary-lbl{font-size:11px;color:var(--text-3);font-weight:500;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.summary-val{font-size:22px;font-weight:600;letter-spacing:-.6px}

/* ── Filters ────────────────────────────────────────────────────────────────── */
.filters-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:13px 15px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.filter-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.filter-field{flex:1;min-width:100px}
.filter-field .label{margin-bottom:5px}
.filter-btn{padding:10px 14px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .18s var(--ease);flex-shrink:0}
.filter-btn:hover{opacity:.85;transform:translateY(-1px)}
.filter-btn:active{transform:scale(.97)}

/* ── Chips ──────────────────────────────────────────────────────────────────── */
.filter-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:4px 10px;border-radius:20px;background:var(--surface2);color:var(--text-2);cursor:pointer;border:1px solid var(--border);transition:all .18s var(--ease)}
.chip:hover{border-color:var(--border-strong);color:var(--text);transform:scale(1.04)}
.chip:active{transform:scale(.96)}
.chip.active{background:var(--accent-light);color:var(--accent-dark);border-color:var(--accent)}

/* ── List editors ───────────────────────────────────────────────────────────── */
.le-accordion{margin-bottom:7px}
.le-header{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;user-select:none;transition:background .15s,box-shadow .15s}
.le-header:hover{background:var(--surface2);box-shadow:var(--shadow-sm)}
.le-header.open{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
.le-title{font-size:13px;font-weight:500}
.le-meta{font-size:12px;color:var(--text-3)}
.le-chevron{color:var(--text-3);font-size:12px;transition:transform .25s var(--ease)}
.le-chevron.open{transform:rotate(180deg)}
.le-body{display:none;border:1px solid var(--border);border-top:none;border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);background:var(--surface);padding:10px}
.le-body.open{display:block;animation:fadeUp .18s var(--ease)}
.li-row{display:flex;align-items:center;gap:5px;margin-bottom:5px}
.li-input{flex:1;padding:7px 9px;border:1px solid var(--border);border-radius:5px;font-family:var(--font);font-size:13px;color:var(--text);background:var(--bg);outline:none;transition:border-color .15s}
.li-input:focus{border-color:var(--accent)}
.icon-btn{width:28px;height:28px;border:1px solid var(--border);border-radius:5px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-3);font-size:14px;font-family:var(--font);transition:all .15s}
.icon-btn.del:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-light);transform:scale(1.08)}
.icon-btn.del:active{transform:scale(.92)}
.add-row{display:flex;gap:5px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.add-inp{flex:1;padding:7px 9px;border:1px solid var(--border);border-radius:5px;font-family:var(--font);font-size:13px;color:var(--text);background:var(--bg);outline:none;transition:border-color .15s}
.add-inp:focus{border-color:var(--accent)}
.add-btn{padding:7px 12px;background:var(--accent);color:#fff;border:none;border-radius:5px;font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s}
.add-btn:hover{opacity:.85;transform:translateY(-1px)}
.add-btn:active{transform:scale(.97)}
.gh-row{display:flex;align-items:center;padding:3px 2px 6px}
.gh-lbl{font-size:11px;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}

/* ── Account cards ──────────────────────────────────────────────────────────── */
.acc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 15px;margin-bottom:8px;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s,transform .18s var(--ease);animation:fadeUp .22s var(--ease) both}
.acc-card:hover{border-color:rgba(0,0,0,.11);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.acc-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:10px}
.acc-card-title{font-size:14px;font-weight:500;color:var(--text);word-break:break-all}
.acc-card-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.acc-fill-bar{height:5px;border-radius:3px;background:var(--surface2);overflow:hidden;margin-bottom:11px}
.acc-fill-inner{height:100%;border-radius:3px;background:var(--accent);transition:width .4s var(--ease)}
.acc-fill-inner.warn{background:var(--amber)}
.acc-fill-inner.full{background:var(--danger)}
.acc-user-row{display:flex;align-items:center;gap:8px}
.acc-user-count{font-size:15px;font-weight:500;letter-spacing:-.3px;flex:1}
.acc-user-label{font-size:12px;color:var(--text-3);margin-left:2px;font-weight:400}
.acc-stepper{display:flex;gap:5px}
.acc-step-btn{width:30px;height:30px;border:1px solid var(--border);border-radius:6px;background:transparent;cursor:pointer;font-size:16px;font-family:var(--font);color:var(--text-2);display:flex;align-items:center;justify-content:center;transition:all .18s var(--ease)}
.acc-step-btn:hover{border-color:var(--border-strong);color:var(--text);transform:scale(1.1)}
.acc-step-btn:active{transform:scale(.9)}
.acc-step-btn.plus:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.acc-step-btn.minus:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-light)}
.acc-step-btn:disabled{opacity:.28;cursor:not-allowed;transform:none}
.acc-pw-wrap{position:relative;display:flex;align-items:center}
.acc-pw-wrap input{flex:1}
.acc-pw-toggle{position:absolute;right:10px;background:none;border:none;cursor:pointer;font-size:11px;font-family:var(--font);color:var(--text-3);padding:0;letter-spacing:.03em;text-transform:uppercase;transition:color .15s}
.acc-pw-toggle:hover{color:var(--text)}
.acc-del-btn{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:transparent;cursor:pointer;font-size:15px;color:var(--text-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s var(--ease)}
.acc-del-btn:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-light);transform:scale(1.08)}
.acc-del-btn:active{transform:scale(.9)}
.acc-cred-row{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.acc-cred-label{font-size:11px;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;width:68px;flex-shrink:0}
.acc-cred-val{font-size:12px;font-family:var(--mono);color:var(--text-2);word-break:break-all;flex:1}
.acc-copy-btn{background:none;border:1px solid var(--border);border-radius:5px;cursor:pointer;font-size:11px;font-family:var(--font);color:var(--text-3);padding:3px 8px;white-space:nowrap;transition:all .15s;flex-shrink:0}
.acc-copy-btn:hover{border-color:var(--border-strong);color:var(--text);background:var(--surface2);transform:scale(1.05)}
.acc-copy-btn:active{transform:scale(.95)}
.acc-empty{text-align:center;padding:36px 16px;color:var(--text-3);font-size:13px;line-height:1.6}
.acc-summary-row{display:flex;gap:8px;margin-bottom:12px}
.acc-summary-pill{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:11px 13px;text-align:center;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .18s var(--ease)}
.acc-summary-pill:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.acc-summary-pill .summary-lbl{font-size:11px;color:var(--text-3);font-weight:500;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.acc-summary-pill .summary-val{font-size:19px;font-weight:500;letter-spacing:-.4px}

/* ── Dark mode ──────────────────────────────────────────────────────────────── */
[data-theme="dark"]{
  --bg:#0f0f0e;--surface:#1b1b18;--surface2:#232320;--surface3:#2c2c28;
  --border:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.16);
  --text:#ede9e0;--text-2:#9a9990;--text-3:#68685f;
  /* Tint colours — replace solid pastels with transparent tints on dark surfaces */
  --accent-light:rgba(24,165,116,.18);--accent-dark:#3ecf96;
  --danger-light:rgba(223,63,63,.15);
  --amber:#d4840f;--amber-light:rgba(212,132,15,.18);
  --blue:#5b9bd5;--blue-light:rgba(91,155,213,.15);
  --shadow-sm:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
  --shadow-md:0 4px 14px rgba(0,0,0,.4),0 1px 4px rgba(0,0,0,.24);
  --shadow-lg:0 8px 28px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.24);
}
[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2368685f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
/* Primary action buttons use var(--text) as bg — cream in dark mode — so flip text dark */
[data-theme="dark"] .submit-btn,[data-theme="dark"] .filter-btn,[data-theme="dark"] .add-btn{color:#fff}
/* Bulk bar: swap the cream var(--text) bg for a proper dark surface */
[data-theme="dark"] .bulk-bar{background:var(--surface3);color:var(--text)}
[data-theme="dark"] .bulk-count{color:var(--text)}
[data-theme="dark"] .bulk-btn-clear{background:rgba(255,255,255,.08);color:var(--text)}

/* ── Theme toggle ───────────────────────────────────────────────────────────── */
.header{position:relative}
.theme-toggle{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;transition:background .2s var(--ease),transform .3s var(--spring);line-height:1}
.theme-toggle:hover{background:var(--surface2);transform:rotate(20deg) scale(1.1)}
.theme-toggle:active{transform:scale(.9)}

/* ── Offline badge ──────────────────────────────────────────────────────────── */
.offline-badge{display:none;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--amber);background:var(--amber-light);border:1px solid var(--amber);border-radius:20px;padding:3px 10px;cursor:pointer;flex-shrink:0;animation:popIn .25s var(--spring);transition:opacity .15s}
.offline-badge:hover{opacity:.8}

/* ── Dashboard ──────────────────────────────────────────────────────────────── */
.dash-section-label{font-size:11px;font-weight:500;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px;margin-top:2px}
.dash-partner-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border)}
.dash-partner-row:last-child{border-bottom:none}
.dash-partner-name{font-size:13px;font-weight:500;display:flex;flex-direction:column;gap:1px}
.dash-partner-count{font-size:11px;color:var(--text-3);font-weight:400}
.dash-partner-val{font-size:13px;color:var(--accent);font-weight:500;text-align:right}
.dash-bar-row{margin-bottom:10px}
.dash-bar-row:last-child{margin-bottom:0}
.dash-bar-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-2);margin-bottom:5px}
.dash-bar-count{font-size:12px;color:var(--text-3);font-weight:500;background:var(--surface2);border-radius:10px;padding:1px 7px}
.dash-bar-track{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
.dash-bar-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .6s var(--ease)}

/* ── Modal ──────────────────────────────────────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;z-index:200;padding:24px;animation:fadeIn .18s var(--ease)}
.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;width:100%;max-width:380px;box-shadow:var(--shadow-lg);animation:popIn .25s var(--spring)}
.modal-title{font-size:15px;font-weight:500;margin-bottom:16px}
.modal-actions{display:flex;gap:8px;margin-top:14px}
.modal-actions .submit-btn{font-size:14px;padding:11px}
.modal-actions .toggle-btn{flex:0;padding:11px 16px;white-space:nowrap}

/* ── Bulk action bar ────────────────────────────────────────────────────────── */
.bulk-bar{position:fixed;bottom:var(--tab-h);left:50%;transform:translateX(-50%);width:100%;max-width:420px;background:var(--text);color:#fff;padding:11px 16px;display:none;align-items:center;gap:8px;z-index:100;box-shadow:0 -4px 24px rgba(0,0,0,.18);transition:transform .25s var(--ease)}
.bulk-bar.visible{display:flex}
.bulk-count{font-size:13px;font-weight:500;flex:1}
.bulk-btn{padding:7px 12px;border-radius:var(--radius-sm);border:none;font-family:var(--font);font-size:12px;font-weight:500;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.bulk-btn:hover{opacity:.85}
.bulk-btn:disabled{opacity:.4;cursor:not-allowed}
.bulk-btn-complete{background:var(--accent);color:#fff}
.bulk-btn-pending{background:var(--amber);color:#fff}
.bulk-btn-clear{background:rgba(255,255,255,.18);color:#fff}

/* ── Row checkbox ───────────────────────────────────────────────────────────── */
.row-cb{width:15px;height:15px;border-radius:3px;cursor:pointer;accent-color:var(--accent);flex-shrink:0;margin-top:2px}

/* ── Sale confirmation card ─────────────────────────────────────────────────── */
.sale-confirm-card{background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--radius-lg);padding:18px;margin-bottom:10px;box-shadow:0 0 0 3px rgba(24,165,116,.1);animation:fadeUp .22s var(--ease)}
.sale-confirm-title{font-size:11px;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.sale-confirm-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:13px}
.sale-confirm-row:last-of-type{border-bottom:none}
.sale-confirm-key{color:var(--text-3)}
.sale-confirm-val{font-weight:500;text-align:right;max-width:65%}
.sale-confirm-actions{display:flex;gap:8px;margin-top:14px}
.sale-confirm-actions .submit-btn{font-size:14px;padding:11px}
.sale-confirm-actions .toggle-btn{flex:0;padding:11px 16px;white-space:nowrap}

/* ── Recent entries ─────────────────────────────────────────────────────────── */
.recent-section{margin-top:12px}
.recent-label{font-size:11px;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.recent-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 12px;margin-bottom:6px;box-shadow:var(--shadow-sm);animation:fadeUp .22s var(--ease) both}
.recent-row-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.recent-row-product{font-size:13px;font-weight:500}
.recent-row-amount{font-size:13px;font-weight:500;color:var(--accent)}
.recent-row-meta{font-size:11px;color:var(--text-3)}

/* ── Account expiry badges ──────────────────────────────────────────────────── */
.badge-expiry-ok{background:var(--accent-light);color:var(--accent-dark)}
.badge-expiry-warn{background:var(--amber-light);color:var(--amber)}
.badge-expiry-danger{background:var(--danger-light);color:var(--danger)}

/* ── Search input for orders/issues ────────────────────────────────────────── */
.search-wrap{position:relative;margin-bottom:8px}
.search-wrap input{padding-left:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398988f' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:11px center}

/* ── Dashboard period picker custom row ─────────────────────────────────────── */
#dash-custom-row{display:none;gap:8px;align-items:flex-end;margin-top:10px;flex-wrap:wrap}

/* ════════════════════════════════════════════════════════════
   BOTTOM TAB BAR
════════════════════════════════════════════════════════════ */
#v1-tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:420px;
  height:var(--tab-h);
  background:var(--surface);
  border-top:1px solid var(--border);
  display:flex;align-items:stretch;
  z-index:90;
  box-shadow:0 -2px 14px rgba(0,0,0,.06);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#v1-tabbar::-webkit-scrollbar{display:none}

.v1-tab-item{
  flex:1;min-width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:0 4px;
  border:none;background:transparent;
  cursor:pointer;color:var(--text-3);
  font-family:var(--font);font-size:10px;font-weight:500;
  letter-spacing:.02em;
  transition:color .15s;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.v1-tab-item::before{
  content:'';
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:2.5px;
  background:var(--accent);
  border-radius:0 0 3px 3px;
  opacity:0;
  transition:opacity .18s,width .2s var(--spring);
}
.v1-tab-item:hover{color:var(--text-2)}
.v1-tab-item.active{color:var(--accent);font-weight:600}
.v1-tab-item.active::before{opacity:1;width:28px}
.v1-tab-item svg{flex-shrink:0;transition:transform .2s var(--spring)}
.v1-tab-item.active svg{transform:translateY(-1px)}
.v1-tab-item:active svg{transform:scale(.88)}

/* ════════════════════════════════════════════════════════════
   MORE SLIDE-UP OVERLAY
════════════════════════════════════════════════════════════ */
#v1-more-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.36);
  z-index:95;
  opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
#v1-more-backdrop.open{opacity:1;pointer-events:auto}

#v1-more-sheet{
  position:fixed;bottom:var(--tab-h);left:50%;
  transform:translateX(-50%) translateY(calc(100% + var(--tab-h)));
  width:100%;max-width:420px;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  z-index:96;padding:8px 0 16px;
  transition:transform .28s var(--spring);
  box-shadow:0 -6px 24px rgba(0,0,0,.1);
}
#v1-more-sheet.open{transform:translateX(-50%) translateY(0)}

.v1-sheet-handle{
  width:36px;height:4px;border-radius:2px;
  background:var(--surface3);margin:0 auto 14px;
}

.v1-more-item{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:13px 22px;
  border:none;background:transparent;
  color:var(--text);font-family:var(--font);
  font-size:15px;font-weight:500;
  cursor:pointer;text-align:left;
  transition:background .12s;
  -webkit-tap-highlight-color:transparent;
}
.v1-more-item:hover{background:var(--surface2)}
.v1-more-item:active{background:var(--surface3)}

.v1-more-icon{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.v1-more-icon--amber {background:var(--amber-light);color:var(--amber)}
.v1-more-icon--danger{background:var(--danger-light);color:var(--danger)}
.v1-more-icon--gray  {background:var(--surface2);color:var(--text-2)}

.v1-more-item-text{display:flex;flex-direction:column;gap:1px;flex:1}
.v1-more-item-text strong{font-size:15px;font-weight:600;color:var(--text)}
.v1-more-item-text span{font-size:12px;color:var(--text-2)}
.v1-more-chevron{color:var(--text-3);flex-shrink:0}

/* ── Dark mode: frosted glass tab bar ─────────────────────────────────────── */
[data-theme="dark"] #v1-tabbar{
  background:rgba(27,27,24,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top-color:rgba(255,255,255,.06);
}
[data-theme="dark"] #v1-more-sheet{background:var(--surface2)}

/* ── GPT Accounts table ───────────────────────────────────────────────────── */
.v1-more-icon--green{background:var(--accent-light);color:var(--accent-dark)}
.v1-more-icon--blue{background:var(--blue-light);color:var(--blue)}

.gpt-table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.gpt-table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:12px}

.gpt-th{
  padding:8px 10px;background:var(--surface2);color:var(--text-3);
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  border-bottom:2px solid var(--border);border-right:1px solid var(--border);
  white-space:nowrap;position:sticky;top:0;z-index:2;text-align:left;
}
.gpt-th:last-child{border-right:none}
.gpt-th-sticky{position:sticky;left:0;z-index:3;background:var(--surface2)}

.gpt-tr:last-child .gpt-td{border-bottom:none}
.gpt-tr:hover .gpt-td{background:rgba(0,0,0,.025)}
.gpt-tr:hover .gpt-td-sticky{background:var(--surface2)}

.gpt-td{
  padding:7px 10px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);
  vertical-align:middle;white-space:nowrap;background:var(--surface);transition:background .12s;
}
.gpt-td:last-child{border-right:none}

/* Sticky email column */
.gpt-td-sticky{
  position:sticky;left:0;z-index:1;background:var(--surface);
  min-width:160px;max-width:200px;font-size:11.5px;font-weight:500;
  box-shadow:2px 0 5px -2px rgba(0,0,0,.09);cursor:pointer;
}
.gpt-email-txt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gpt-td-sticky:hover{background:var(--surface2) !important}
.gpt-copied{background:var(--accent-light) !important}
.gpt-empty{color:var(--text-3)}

/* Password cells */
.gpt-pw-td{min-width:100px;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none}
.gpt-pw-td:hover{background:var(--surface2) !important}
.gpt-pw-dots{font-family:var(--mono);font-size:10px;color:var(--text-3);letter-spacing:1.5px}
.gpt-pw-val{font-family:var(--mono);font-size:11px;color:var(--text);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.gpt-pw-greyed{background:var(--surface2) !important;cursor:default !important;opacity:.5}
.gpt-pw-greyed:hover{background:var(--surface2) !important}

/* Select cells */
.gpt-sel-td{min-width:100px;padding:0}
.gpt-td-sel{
  width:100%;height:100%;border:none;background:transparent;
  font-size:12px;font-family:var(--font);color:var(--text);
  cursor:pointer;outline:none;padding:7px 20px 7px 10px;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%239a9a94' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 5px center;
}
.gpt-td-sel:focus{box-shadow:inset 0 0 0 2px var(--accent)}

[data-theme="dark"] .gpt-td{background:var(--surface)}
[data-theme="dark"] .gpt-td-sticky{background:var(--surface)}
[data-theme="dark"] .gpt-tr:hover .gpt-td-sticky{background:var(--surface2)}

.gpt-det-td{min-width:70px;text-align:center}
.gpt-det-btn{
  background:none;border:1px solid var(--border);border-radius:4px;
  padding:3px 10px;font-size:11px;font-family:var(--font);font-weight:500;
  color:var(--text-3);cursor:pointer;white-space:nowrap;transition:all .15s;
}
.gpt-det-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.gpt-det-btn--ok{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}

.row-action-btn{padding:3px 8px;border:1px solid var(--border);border-radius:5px;font-family:var(--font);font-size:11px;cursor:pointer;background:transparent;color:var(--text-2);transition:all .12s;white-space:nowrap;line-height:1.6}
.row-action-btn:hover{border-color:var(--border-strong);color:var(--text)}
.row-action-btn--danger:hover{border-color:var(--danger);background:var(--danger-light);color:var(--danger)}
.gpt-act-td{padding:4px 6px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--border)}

.gpt-c-green {background:rgba(24,165,116,.14)}
.gpt-c-red   {background:rgba(223,63,63,.12)}
.gpt-c-amber {background:rgba(176,107,15,.12)}
.gpt-c-blue  {background:rgba(20,85,160,.1)}
.gpt-c-purple{background:rgba(120,60,180,.1)}
.gpt-c-teal  {background:rgba(0,140,130,.1)}
.gpt-c-orange{background:rgba(220,120,0,.1)}
.gpt-c-gray  {background:var(--surface2)}

[data-theme="dark"] .gpt-td,.gpt-td-sticky{background:var(--surface)}
[data-theme="dark"] .gpt-tr:hover .gpt-td-sticky{background:var(--surface2)}

@media(min-width:600px){
  #tab-gpt{position:relative;left:calc(50% - 50vw);width:100vw;padding:0 24px;box-sizing:border-box}
  #gpt-content>.card,
  #gpt-content>.filters-card,
  #gpt-content>#gpt-summary{max-width:680px;margin-left:auto;margin-right:auto}
  .gpt-table-wrap{overflow-x:visible}
}

/* ── GPT mobile cards ─────────────────────────────────────────────────────── */
.gpt-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.gpt-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.gpt-card-email{font-size:13px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gpt-card-creds{margin-bottom:0}
.gpt-card-pw-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);cursor:pointer;-webkit-tap-highlight-color:transparent}
.gpt-card-pw-row:last-child{border-bottom:none}
.gpt-card-pw-lbl{font-size:11px;color:var(--text-3);min-width:82px}
.gpt-card-pw-greyed{opacity:.4;pointer-events:none;cursor:default}
.gpt-card-det-row{padding:8px 0;border-bottom:1px solid var(--border)}
.gpt-card-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:10px;border-top:1px solid var(--border);margin-top:2px}
.gpt-card-field{display:flex;flex-direction:column;gap:3px;border-radius:6px;padding:4px 6px}
.gpt-card-field-lbl{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.gpt-card-sel{border:1px solid var(--border);border-radius:6px;padding:5px 6px;font-family:var(--font);font-size:12px;background:var(--surface2);color:var(--text);width:100%;outline:none;-webkit-appearance:none;cursor:pointer}

/* ── CDK section ──────────────────────────────────────────────────────────── */

.cdk-row{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:12px 14px;margin-bottom:8px;
  transition:border-color .15s,opacity .15s;
}
.cdk-row--used{opacity:.55}
.cdk-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.cdk-key{
  font-family:var(--mono);font-size:11.5px;color:var(--text);
  flex:1;min-width:0;word-break:break-all;
  letter-spacing:.02em;
}
.cdk-badge-avail{background:var(--accent-light);color:var(--accent-dark);flex-shrink:0}
.cdk-badge-used{background:var(--surface2);color:var(--text-3);flex-shrink:0}

.cdk-row-bottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cdk-website{font-size:11px;flex-shrink:0}
.cdk-website-link{
  display:inline-block;font-size:11px;padding:3px 8px;border-radius:20px;font-weight:500;
  background:var(--blue-light);color:var(--blue);text-decoration:none;flex-shrink:0;
  transition:opacity .15s;
}
.cdk-website-link:hover{opacity:.75}
.cdk-actions{display:flex;gap:6px;margin-left:auto;flex-shrink:0}

.cdk-toggle-btn{
  padding:4px 10px;font-size:11px;font-family:var(--font);font-weight:500;
  border:1px solid var(--accent);border-radius:6px;
  background:var(--accent-light);color:var(--accent-dark);
  cursor:pointer;white-space:nowrap;transition:all .15s;
}
.cdk-toggle-btn:hover{background:var(--accent);color:#fff}
.cdk-toggle-btn--used{
  border-color:var(--border-strong);background:var(--surface2);color:var(--text-2);
}
.cdk-toggle-btn--used:hover{border-color:var(--accent);background:var(--accent-light);color:var(--accent-dark)}

/* Responsive */
@media(min-width:600px){
  #v1-tabbar{max-width:700px}
  .app{max-width:600px}
}

/* ── Account Formatter ─────────────────────────────────────────────────────── */
.acctfmt-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:18px 20px;margin-bottom:14px;transition:opacity .2s;
}
.acctfmt-card--used{}
.acctfmt-card-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:13px;gap:10px;
}
.acctfmt-card-num{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);
}
.acctfmt-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.acctfmt-used-label{
  display:flex;align-items:center;font-size:12px;color:var(--text-2);cursor:pointer;
  user-select:none;white-space:nowrap;
}
.acctfmt-used-badge{
  background:var(--danger);color:#fff;font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:99px;white-space:nowrap;
}
.acctfmt-fields{margin-bottom:14px;}
.acctfmt-field-row{
  display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);
  align-items:baseline;
}
.acctfmt-field-row:last-child{border-bottom:none;}
.acctfmt-field-label{
  flex:0 0 130px;font-size:12px;color:var(--text-3);font-weight:500;
  letter-spacing:.01em;
}
.acctfmt-field-value{
  font-family:var(--mono);font-size:12px;color:var(--text);word-break:break-all;
}
.acctfmt-card-footer{display:flex;justify-content:flex-end;padding-top:4px;}
.acctfmt-copy-btn{
  padding:6px 14px;font-family:var(--font);font-size:12px;font-weight:500;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:transparent;color:var(--text-2);cursor:pointer;
  transition:all .15s;
}
.acctfmt-copy-btn:hover{border-color:var(--border-strong);background:var(--surface2);}
#acctfmt-raw{
  width:100%;min-height:140px;font-family:var(--font);font-size:13px;
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;
  background:var(--surface2);color:var(--text);resize:vertical;box-sizing:border-box;
  outline:none;transition:border-color .15s;
}
#acctfmt-raw:focus{border-color:var(--accent);}