.btn {
    background: var(--color-raised);
    color: var(--color-text);
    border: 1px solid transparent;
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-s);
    cursor: pointer;
    box-shadow: var(--shadow-raised);
    transition: background 0.2s, box-shadow 0.2s;
    /* A stray click/drag/double-tap on a button's own emoji/icon label
       otherwise selects it as text (blue highlight) instead of just
       triggering the button - breaks the flow, especially on mobile where
       a slightly-off tap easily turns into a select. */
    user-select: none;
    -webkit-user-select: none;
}

.btn:hover {
    box-shadow: var(--shadow-raised-hover);
}

/* Pressed feel: the raised shadow flips to a shallow inset one, as if the
   button dipped in - buttons with their own solid/active `!important`
   background elsewhere (place-order, confirm/cancel dialogs, etc.) still
   pick this up since box-shadow isn't part of those overrides. */
.btn:active {
    box-shadow: var(--shadow-inset);
}

.panel {
    background: var(--color-panel);
    padding: var(--space-m);
    border-radius: var(--radius-m);
}