.btn-base{border-radius:var(--rad-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;margin-top:8px;padding:12px 24px;font-family:inherit;font-size:1rem;font-weight:600;transition:all .3s;display:inline-flex}.btn-sm{margin-top:0;padding:8px 16px;font-size:.85rem}.btn-icon{aspect-ratio:1;width:36px;min-width:36px;height:36px;margin-top:0;padding:8px}.btn-base:active{transition:transform 50ms cubic-bezier(.4,0,.2,1);transform:scale(.95)}.btn-save{background:var(--ok);color:#fff}.btn-save:hover{box-shadow:0 4px 12px color-mix(in srgb, var(--ok) 30%, transparent);transform:translateY(-2px)}.btn-edit{background:var(--acc);color:#fff;box-shadow:0 4px 10px color-mix(in srgb, var(--acc2) 20%, transparent)}.btn-edit:hover{background:color-mix(in srgb, var(--acc) 80%, black);box-shadow:0 6px 15px color-mix(in srgb, var(--acc) 30%, transparent);transform:translateY(-2px)}.btn-cancel{background:var(--s2);color:var(--tx);border:1px solid var(--bd)}.btn-cancel:hover{background:var(--s3)}.btn-default{background-color:color-mix(in srgb, var(--s2) 40%, transparent);color:var(--tx);border:1px solid var(--bd);-webkit-backdrop-filter:blur(8px)}.btn-default:hover{background-color:var(--s3);box-shadow:0 4px 12px color-mix(in srgb, var(--s3) 30%, transparent);transform:translateY(-2px)}.btn-ipa{background:var(--acc);color:#fff}.btn-ipa:hover{filter:brightness(1.1);box-shadow:0 4px 12px color-mix(in srgb, var(--acc) 30%, transparent);transform:translateY(-2px)}.btn-error{background-color:var(--err);color:#fff}.btn-error:hover{filter:brightness(1.1);box-shadow:0 4px 12px color-mix(in srgb, var(--err) 30%, transparent);transform:translateY(-2px)}.btn-import{background:var(--acc2);color:#fff}.btn-import:hover{filter:brightness(1.1);box-shadow:0 4px 12px color-mix(in srgb, var(--acc2) 20%, transparent);transform:translateY(-2px)}.btn-listen{color:#fff;background:#0ea5e9;box-shadow:0 4px 10px #0ea5e933}.btn-listen:hover{background:#0284c7;transform:translateY(-2px);box-shadow:0 6px 15px #0ea5e94d}.btn-toggle{background:var(--s2);color:var(--tx2);border:1px solid var(--bd)}.btn-toggle:hover{background:var(--s3);color:var(--tx)}.btn-toggle-active{background:var(--acc);color:#fff;box-shadow:0 4px 10px color-mix(in srgb, var(--acc) 30%, transparent)}.btn-toggle-active:hover{filter:brightness(1.1);transform:translateY(-2px)}
