.btn{
    --_bg:#f3f4f6; --_fg:#111827; --_bd:#e5e7eb;
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px; padding:10px 14px; border:1px solid var(--_bd);
    background:var(--_bg); color:var(--_fg); text-decoration:none;
    border-radius:12px; font-weight:600; line-height:1;
    cursor:pointer; transition:transform .02s ease, background .15s, border-color .15s, color .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid rgba(31,75,241,.25); outline-offset:2px}

.btn--primary{--_bg:var(--tg-red); --_fg:#fff; --_bd:var(--tg-red)}
.btn--primary:hover{--_bg:var(--tg-red-600); --_bd:var(--tg-red-600)}
.btn--ghost{--_bg:transparent; --_bd:#d1d5db}

/* NEW: Outline, Link, Icon, Disabled, Group */
.btn--outline{ --_bg:#fff; --_fg:var(--tg-red); --_bd:var(--tg-red); }
.btn--link{ --_bg:transparent; --_fg:var(--tg-red); --_bd:transparent; padding:0; }
.btn--icon{ width:36px; height:36px; padding:0; display:inline-grid; place-items:center; }

.btn[disabled], .btn.is-disabled{
    opacity:.55; cursor:not-allowed; filter:grayscale(15%); transform:none;
}

.btn-group{ display:inline-flex; gap:6px; }

/* Neutral button tone (used on Tools/Export pages) */
.btn--neutral{ --_bg:#ffffff; --_fg:#111827; --_bd:#d9dae2; }
.btn--neutral:hover{ --_bg:#f9fafb; --_bd:#cfd3d8; }