:root {
    --color-blue-10: #e3f3ff;
    --color-blue-100: #035877;
    --color-blue-110: #01526c;
    --color-blue-120: #013c50;
    --color-blue-20: #d3ecff;
    --color-blue-30: #aadeff;
    --color-blue-40: #6eceff;
    --color-blue-50: #04bcf4;
    --color-blue-60: #06adea;
    --color-blue-70: #2da0d3;
    --color-blue-80: #278eb4;
    --color-blue-90: #02708e;
    --color-dark-gray-100: #121212;
    --color-dark-gray-110: #050505;
    --color-dark-gray-120: #000000;
    --color-dark-gray-50: #525252;
    --color-dark-gray-60: #424242;
    --color-dark-gray-70: #303030;
    --color-dark-gray-80: #262626;
    --color-dark-gray-90: #1a1a1a;
    --color-gray-10: #f9f9f9;
    --color-gray-100: #545454;
    --color-gray-110: #454545;
    --color-gray-120: #202020;
    --color-gray-20: #ececec;
    --color-gray-30: #dbdbdb;
    --color-gray-40: #c6c6c6;
    --color-gray-50: #b0b0b0;
    --color-gray-60: #9a9a9a;
    --color-gray-70: #868686;
    --color-gray-80: #737373;
    --color-gray-90: #636363;
    --color-green-10: #e8f7f0;
    --color-green-100: #00664a;
    --color-green-110: #00513b;
    --color-green-120: #003929;
    --color-green-20: #d6f0e4;
    --color-green-30: #aae4cb;
    --color-green-40: #00c696;
    --color-green-50: #00b482;
    --color-green-60: #00a97a;
    --color-green-70: #009771;
    --color-green-80: #008762;
    --color-green-90: #007154;
    --color-light-green-10: #f7f9ea;
    --color-light-green-100: #4a592b;
    --color-light-green-110: #3e4a26;
    --color-light-green-120: #2c331d;
    --color-light-green-20: #eaf0c3;
    --color-light-green-30: #d6e37d;
    --color-light-green-40: #bfcf00;
    --color-light-green-50: #a2b926;
    --color-light-green-60: #87a42f;
    --color-light-green-70: #738f32;
    --color-light-green-80: #647b31;
    --color-light-green-90: #57692e;
    --color-medical-dialysis-arterial-pressure: #bf1318;
    --color-medical-dialysis-venous-pressure: #1389bf;
    --color-medical-frequency-devices-coag: #03309e;
    --color-medical-frequency-devices-cut: #fff200;
    --color-medical-syringe-pumps-bolus: #ff7c00;
    --color-orange-10: #f9f6ef;
    --color-orange-100: #824307;
    --color-orange-110: #6f3805;
    --color-orange-120: #4f2602;
    --color-orange-20: #f7ead0;
    --color-orange-30: #f7d59b;
    --color-orange-40: #f7b95a;
    --color-orange-50: #f29000;
    --color-orange-60: #e18123;
    --color-orange-70: #cb6c13;
    --color-orange-80: #b15d0e;
    --color-orange-90: #994f0a;
    --color-purple-10: #fbf4fc;
    --color-purple-100: #832b93;
    --color-purple-110: #711e82;
    --color-purple-120: #4a1e52;
    --color-purple-20: #f3e6f6;
    --color-purple-30: #ead1ef;
    --color-purple-40: #e1b6e9;
    --color-purple-50: #db95e7;
    --color-purple-60: #d76eeb;
    --color-purple-70: #bd32d9;
    --color-purple-80: #ae44c1;
    --color-purple-90: #9e2ab5;
    --color-red-10: #fbf5f5;
    --color-red-100: #9c243f;
    --color-red-110: #832036;
    --color-red-120: #5e1525;
    --color-red-20: #f6e8e8;
    --color-red-30: #f2d2d3;
    --color-red-40: #f0b6b9;
    --color-red-50: #f2949b;
    --color-red-60: #f66c7d;
    --color-red-70: #f7385f;
    --color-red-80: #e40147;
    --color-red-90: #ba2749;
    --color-sand-10: #faf9f5;
    --color-sand-100: #555451;
    --color-sand-110: #464643;
    --color-sand-120: #31312e;
    --color-sand-20: #f0ede6;
    --color-sand-30: #dfdbd3;
    --color-sand-40: #cac6bf;
    --color-sand-50: #b3b0a9;
    --color-sand-60: #9c9a94;
    --color-sand-70: #888681;
    --color-sand-80: #74746f;
    --color-sand-90: #64645f;
    --color-technical-blue-10: #ecf5f9;
    --color-technical-blue-100: #02435a;
    --color-technical-blue-110: #013546;
    --color-technical-blue-120: #011e28;
    --color-technical-blue-20: #d1e7f0;
    --color-technical-blue-30: #abd3e3;
    --color-technical-blue-40: #7acfe1;
    --color-technical-blue-50: #00c4f0;
    --color-technical-blue-60: #0aa0c1;
    --color-technical-blue-70: #118ba6;
    --color-technical-blue-80: #007a95;
    --color-technical-blue-90: #026b83;
    --color-technical-deepskyblue-60: #0094ff;
    --color-technical-green-10: #e7f9eb;
    --color-technical-green-100: #26542e;
    --color-technical-green-110: #2b412f;
    --color-technical-green-120: #022713;
    --color-technical-green-20: #d2efd7;
    --color-technical-green-30: #bfe3c6;
    --color-technical-green-40: #8fca99;
    --color-technical-green-50: #35d04f;
    --color-technical-green-60: #08c127;
    --color-technical-green-70: #10a429;
    --color-technical-green-80: #06891c;
    --color-technical-green-90: #046c16;
    --color-technical-red-10: #fdebeb;
    --color-technical-red-100: #58322d;
    --color-technical-red-110: #3f2a27;
    --color-technical-red-120: #350d0d;
    --color-technical-red-20: #fcd8d8;
    --color-technical-red-30: #fbc7c7;
    --color-technical-red-40: #ff8585;
    --color-technical-red-50: #f55656;
    --color-technical-red-60: #eb0000;
    --color-technical-red-70: #c73623;
    --color-technical-red-80: #983529;
    --color-technical-red-90: #782f26;
    --color-technical-yellow-10: #fffbeb;
    --color-technical-yellow-100: #615524;
    --color-technical-yellow-110: #514928;
    --color-technical-yellow-120: #332900;
    --color-technical-yellow-20: #fff7d9;
    --color-technical-yellow-30: #ffeda6;
    --color-technical-yellow-40: #fede5c;
    --color-technical-yellow-50: #fecc00;
    --color-technical-yellow-60: #ecbe04;
    --color-technical-yellow-70: #d5ad0a;
    --color-technical-yellow-80: #c09d0e;
    --color-technical-yellow-90: #856b00;
    --color-white-120: #ffffff;
    --font-family: "BBraun Type Digital", sans-serif;
    --font-weight-bold: 700;
    --font-weight-regular: 400;
    --layout-columns: .75rem;
    --font-size-14: 14px;
    --color-surfaces-elevation-0: var(--color-dark-gray-100);
    --color-surfaces-elevation-1: var(--color-green-70);
    --color-surfaces-primary: var(--color-green-70);
    --color-text-default: var(--color-gray-40);
    --color-text-onprimary: var(--color-white-120);
    --spacing-48: 3rem;
    --spacing-36: 2.25rem;
    --spacing-32: 2rem;
    --spacing-24: 1.5rem;
    --spacing-16: 1rem;
    --spacing-12: 0.75rem;
    --spacing-8: 0.5rem;
    --gap-actions: 1rem;
}

@font-face {
    font-family: "BBraun Type Digital";
    src: url(/assets/fonts/BBraunTypeDigitalWeb-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

html {
    font-family: var(--font-family);
    background-color: var(--color-surfaces-elevation-0);
    color: var(--color-text-default);
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    font-size: var(--font-size);
    margin: 0;
    background-color: var(--color-surfaces-elevation-0);

}

img {
    width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
p {
    margin: 0;

}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

p {
    line-height: 1.5;
}

header {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: var(--color-surfaces-primary);
    color: var(--color-text-onprimary);
}

label {
    display: block;
    font-size: var(--font-size-14);
    margin-bottom: var(--spacing-8);
}

input {
    display: flex;
    height: 48px;
    padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
    align-items: center;
    gap: var(--spacing-12, 12px);
    align-self: stretch;
    width: 100%;
    border: 1px solid var(--color-gray-50);
    border-radius: var(--spacing-12);
    box-sizing: border-box;
    background: var(--color-dark-gray-80);
    color: var(--color-white-120);
}

button {
    box-sizing: border-box;
    display: inline-flex;
    height: 48px;
    padding: var(--spacing-12, 12px) var(--spacing-16, 16px);
    gap: var(--spacing-12, 12px);
    align-self: stretch;
    border: none;
    border-radius: var(--spacing-24);
    background: var(--color-green-60);
    color: var(--color-white-120);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-special, BBraun Type Digital);
    font-size: var(--font-size-16, 1rem);
    font-style: normal;
    font-weight: 700;
    line-height: var(--font-line-height-24, 1.5rem);
    user-select: none;
    text-decoration: none;
    width: 100%;
}

.btn-rounded {
    border-radius: var(--spacing-24);
    width: 48px;
    padding: var(--spacing-8);
    display: flex;
    justify-content: center;
}

.btn-color-primary {
    background: var(--color-green-60);
    color: var(--color-white-120);
}

.btn-color-accent {
    background: var(--color-purple-80);
    color: var(--color-white-120);
}

.btn-color-secondary {
    background: var(--color-gray-10);
    color: var(--color-gray-100);
}

button svg {
    fill: var(--color-white-120);
}

.icon-color-onsecondary {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    color: var(--color-dark-gray-60);
    fill: var(--color-dark-gray-60);
}

.icon-color-onprimary {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    color: var(--color-text-onprimary);
    fill: var(--color-text-onprimary);
}

a {
    color: var(--color-white-120);
    text-decoration: none;
}

hr {
    border: none;
    border-top: 1px solid var(--color-gray-80);
    margin: var(--spacing-24) 0;
}

main {
   
    padding: var(--spacing-12);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.header-start {
    display: flex;
    height: var(--spacing-48);
    min-height: var(--spacing-36);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-24);
}

.header-headline {
    color: var(--color-text-core-default-onprimary) !important;
    font-size: var(--font-size-24, 1.5rem);
}

.header-center {
    display: flex;
    height: var(--spacing-48);
    min-height: var(--spacing-48);
    justify-content: center;
    align-items: center;
    gap: var(--gap-actions);
    align-self: stretch;
    flex: 1 0 0px;
    width: 100%;
}

.header-end {
    display: flex;
    height: var(--spacing-48);
    min-height: var(--spacing-36);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-16);
}

.container {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-12) var(--spacing-12);
    gap: var(--spacing-32);
    width: 100%;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: calc(var(--spacing-12) / -2);
    margin-right: calc(var(--spacing-12) / -2);
    width: 100%;
}

/* Gutter padding applied to all column types */
[class*="col-"],
.col,
.col-auto {
    padding-left: calc(var(--spacing-12) / 2);
    padding-right: calc(var(--spacing-12) / 2);
}

.col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    width: 100%;
}

.col-1  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 8.3333%; }
.col-2  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 16.6667%; }
.col-3  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 25%; }
.col-4  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 33.3333%; }
.col-5  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 41.6667%; }
.col-6  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 50%; }
.col-7  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 58.3333%; }
.col-8  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 66.6667%; }
.col-9  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 75%; }
.col-10 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 83.3333%; }
.col-11 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 91.6667%; }
.col-12 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 100%; }

.d-none {
    display: none;
}
.d-flex {
    display: flex;
}
.d-block {
    display: block;
}
/* ── Responsive columns (mobile-first, sm/md/lg/xl) ────────────────────── */

@media (min-width: 576px) {
    .col-sm-1  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 8.3333%; }
    .col-sm-2  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 16.6667%; }
    .col-sm-3  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 25%; }
    .col-sm-4  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 33.3333%; }
    .col-sm-5  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 41.6667%; }
    .col-sm-6  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 50%; }
    .col-sm-7  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 58.3333%; }
    .col-sm-8  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 66.6667%; }
    .col-sm-9  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 75%; }
    .col-sm-10 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 83.3333%; }
    .col-sm-11 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 91.6667%; }
    .col-sm-12 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
    .col-md-1  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 8.3333%; }
    .col-md-2  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 16.6667%; }
    .col-md-3  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 25%; }
    .col-md-4  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 33.3333%; }
    .col-md-5  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 41.6667%; }
    .col-md-6  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 50%; }
    .col-md-7  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 58.3333%; }
    .col-md-8  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 66.6667%; }
    .col-md-9  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 75%; }
    .col-md-10 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 83.3333%; }
    .col-md-11 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 91.6667%; }
    .col-md-12 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-1  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 8.3333%; }
    .col-lg-2  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 16.6667%; }
    .col-lg-3  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 25%; }
    .col-lg-4  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 33.3333%; }
    .col-lg-5  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 41.6667%; }
    .col-lg-6  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 50%; }
    .col-lg-7  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 58.3333%; }
    .col-lg-8  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 66.6667%; }
    .col-lg-9  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 75%; }
    .col-lg-10 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 83.3333%; }
    .col-lg-11 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 91.6667%; }
    .col-lg-12 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
    .col-xl-1  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 8.3333%; }
    .col-xl-2  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 16.6667%; }
    .col-xl-3  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 25%; }
    .col-xl-4  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 33.3333%; }
    .col-xl-5  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 41.6667%; }
    .col-xl-6  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 50%; }
    .col-xl-7  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 58.3333%; }
    .col-xl-8  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 66.6667%; }
    .col-xl-9  { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 75%; }
    .col-xl-10 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 83.3333%; }
    .col-xl-11 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 91.6667%; }
    .col-xl-12 { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: start; text-align: start; flex: 0 0 auto; width: 100%; }
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    justify-content: start;
}

.row-between {
    justify-content: space-between;
}

.d-flex { display: flex; }

.text-center {
    text-align: center;
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

.vh-100 {
    height: 100vh;
}

.vw-100 {
    width: 100vw;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.spacing-8 {
    margin-top: calc(var(--spacing-8) / 2);
    margin-bottom: calc(var(--spacing-8) / 2);
}

.spacing-12 {
    margin-top: calc(var(--spacing-12) / 2);
    margin-bottom: calc(var(--spacing-12) / 2);
}

.spacing-16 {
    margin-top: calc(var(--spacing-16) / 2);
    margin-bottom: calc(var(--spacing-16) / 2);
}

.spacing-24 {
    margin-top: calc(var(--spacing-24) / 2);
    margin-bottom: calc(var(--spacing-24) / 2);
}

.spacing-32 {
    margin-top: calc(var(--spacing-32) / 2);
    margin-bottom: calc(var(--spacing-32) / 2);
}

.spacing-36 {
    margin-top: calc(var(--spacing-36) / 2);
    margin-bottom: calc(var(--spacing-36) / 2);
}

.spacing-48 {
    margin-top: calc(var(--spacing-48) / 2);
    margin-bottom: calc(var(--spacing-48) / 2);
}

.card {
    margin-top: var(--spacing-24);
    transition: 0.3s;
    border-radius: var(--spacing-12);
    background: var(--color-dark-gray-80);
    color: var(--color-text-onprimary);
    padding: var(--spacing-12);
}

.login-wrapper {
    width: 380px;
}

/* enable layering */
button.ripple {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 200ms cubic-bezier(.4,0,.2,1), transform 200ms cubic-bezier(.4,0,.2,1);
}

/* hover "elevation" */
button.ripple:hover,
button.ripple:focus-visible {
  transform: translateY(-2px);                 /* slight lift */
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);     /* soft shadow */
  z-index: 0;                                  /* keep stacking stable */
}

/* pressed state keeps the press-down feel */
button.ripple:active {
  transform: translateY(0);                    /* back to surface */
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

/* subtle highlight overlay on hover (compatible with colored backgrounds) */
button.ripple::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)); /* light sheen */
  opacity: 0;
  transition: opacity 200ms cubic-bezier(.4,0,.2,1);
  mix-blend-mode: overlay;
}

/* show sheen on hover/focus */
button.ripple:hover::before,
button.ripple:focus-visible::before {
  opacity: 1;
}

/* existing ripple (from earlier) */
button.ripple::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 420ms cubic-bezier(.4,0,.2,1), opacity 420ms;
  pointer-events: none;
  opacity: 1;
  will-change: transform, opacity;
}

button.ripple:active::after {
  transform: translate(-50%, -50%) scale(80);
  opacity: 0;
  transition: transform 420ms cubic-bezier(.4,0,.2,1), opacity 420ms;
}

/* variant tweaks (ensure these come after your .btn-color-* rules) */
button.ripple.btn-color-primary::before,
button.ripple.btn-color-accent::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0));
}
button.ripple.btn-color-secondary::before {
  background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0));
}
button.ripple.btn-color-primary::after,
button.ripple.btn-color-accent::after {
  background: rgba(255,255,255,0.18);
}
button.ripple.btn-color-secondary::after {
  background: rgba(0,0,0,0.08);
}