@khipu/design-system 0.1.0-alpha.23 → 0.1.0-alpha.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/beercss/khipu-beercss.css +2557 -0
  2. package/dist/beercss/khipu-beercss.js +1601 -0
  3. package/dist/beercss/khipu-beercss.min.css +1 -0
  4. package/dist/beercss/khipu-beercss.min.js +1 -0
  5. package/dist/beercss/metadata.json +23 -0
  6. package/dist/index.d.mts +12 -12
  7. package/dist/index.d.ts +12 -12
  8. package/dist/index.js +7 -7
  9. package/dist/index.mjs +7 -7
  10. package/package.json +19 -3
package/dist/beercss/khipu-beercss.css ADDED
@@ -0,0 +1,2557 @@
1
+ /* Khipu BeerCSS Bundle - Combined CSS */
2
+
3
+ /* BeerCSS v4.0.1 */
4
+ :root{--size: 1rem;--font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Noto Sans", Arial, sans-serif;--font-icon: "Material Symbols Outlined";--speed1: .1s;--speed2: .2s;--speed3: .3s;--speed4: .4s;--active: rgb(128 128 128 / .192);--overlay: rgb(0 0 0 / .5);--elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .32);--elevate2: 0 .25rem .5rem 0 rgb(0 0 0 / .4);--elevate3: 0 .375rem .75rem 0 rgb(0 0 0 / .48);--top: env(safe-area-inset-top);--bottom: env(safe-area-inset-bottom);--left: env(safe-area-inset-left);--right: env(safe-area-inset-right);--image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWJiYGAQBgAAAP//ZyYa+wAAAAZJREFUAwAAIgAWeX9MsQAAAABJRU5ErkJggg==)}body.dark{--image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWL6//+/FAAAAP//qSv5QwAAAAZJREFUAwAJIAMaJWjIvQAAAABJRU5ErkJggg==)}html{font-size:var(--size)}body{color:var(--on-surface);background-color:var(--surface);overflow-x:hidden;font-family:var(--font);font-size:.875rem;line-height:1.5rem;letter-spacing:.0313rem}@media(pointer:fine){body ::-webkit-scrollbar,body ::-webkit-scrollbar-thumb,body ::-webkit-scrollbar-button{background:none;inline-size:.4rem;block-size:.4rem}body :is(:focus,:hover)::-webkit-scrollbar-thumb,body :has(:focus,:hover)::-webkit-scrollbar-thumb{background:var(--outline);border-radius:1rem}}@media(pointer:coarse){body:has(dialog[open],dialog.active),body:has(input[type=range]:focus){overflow:hidden}}@keyframes to-page{0%{opacity:0;transform:var(--_transform)}to{opacity:1;transform:translate(0)}}@keyframes to-linear-progress{0%{margin:0 0 0 -100%}50%{margin:0}to{margin:0 0 0 100%}}@keyframes to-indeterminate-progress{0%{padding:0 100% 0 0}50%{padding:0}to{padding:0 0 0 100%}}@keyframes to-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes to-ripple{to{transform:scale(4);opacity:0}}:root,body.light{--primary: #6750a4;--on-primary: #ffffff;--primary-container: #e9ddff;--on-primary-container: #22005d;--secondary: #625b71;--on-secondary: #ffffff;--secondary-container: #e8def8;--on-secondary-container: #1e192b;--tertiary: #7e5260;--on-tertiary: #ffffff;--tertiary-container: #ffd9e3;--on-tertiary-container: #31101d;--error: #ba1a1a;--on-error: #ffffff;--error-container: #ffdad6;--on-error-container: #410002;--background: #fffbff;--on-background: #1c1b1e;--surface: #fdf8fd;--on-surface: #1c1b1e;--surface-variant: #e7e0eb;--on-surface-variant: #49454e;--outline: #7a757f;--outline-variant: #cac4cf;--shadow: #000000;--scrim: #000000;--inverse-surface: #313033;--inverse-on-surface: #f4eff4;--inverse-primary: #cfbcff;--surface-dim: #ddd8dd;--surface-bright: #fdf8fd;--surface-container-lowest: #ffffff;--surface-container-low: #f7f2f7;--surface-container: #f2ecf1;--surface-container-high: #ece7eb;--surface-container-highest: #e6e1e6}body.dark{--primary: #cfbcff;--on-primary: #381e72;--primary-container: #4f378a;--on-primary-container: #e9ddff;--secondary: #cbc2db;--on-secondary: #332d41;--secondary-container: #4a4458;--on-secondary-container: #e8def8;--tertiary: #efb8c8;--on-tertiary: #4a2532;--tertiary-container: #633b48;--on-tertiary-container: #ffd9e3;--error: #ffb4ab;--on-error: #690005;--error-container: #93000a;--on-error-container: #ffb4ab;--background: #1c1b1e;--on-background: #e6e1e6;--surface: #141316;--on-surface: #e6e1e6;--surface-variant: #49454e;--on-surface-variant: #cac4cf;--outline: #948f99;--outline-variant: #49454e;--shadow: #000000;--scrim: #000000;--inverse-surface: #e6e1e6;--inverse-on-surface: #313033;--inverse-primary: #6750a4;--surface-dim: #141316;--surface-bright: #3a383c;--surface-container-lowest: #0f0e11;--surface-container-low: #1c1b1e;--surface-container: #201f22;--surface-container-high: #2b292d;--surface-container-highest: #363438}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-outlined.woff2) format("woff2"),url(https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/material-symbols-outlined.woff2) format("woff2")}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-rounded.woff2) format("woff2"),url(https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/material-symbols-rounded.woff2) format("woff2")}@font-face{font-family:Material Symbols Sharp;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-sharp.woff2) format("woff2"),url(https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/material-symbols-sharp.woff2) format("woff2")}@font-face{font-family:Material Symbols Subset;font-style:normal;font-weight:400;font-display:swap;src:url(material-symbols-subset.woff2) format("woff2"),url(https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/material-symbols-subset.woff2) format("woff2")}*{-webkit-tap-highlight-color:transparent;position:relative;vertical-align:middle;color:inherit;margin:0;padding:0;border-radius:inherit;box-sizing:border-box}*:after,*:before{all:unset}label{font-size:.75rem;vertical-align:baseline}a,b,i,span,strong,em,code{vertical-align:baseline}a,button,.button{cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;border:none;font-family:inherit;outline:inherit;justify-content:center}:is(nav,.tabs,.field)>a,button,.button,.chip,i,label{-webkit-user-select:none;user-select:none}:not(.grid,nav,.row)>:not(progress.max)+:is(address,article,blockquote,code,.field,fieldset,form,.grid,h1,h2,h3,h4,h5,h6,nav,ol,p,pre,.row,section,aside,table,.tabs,ul):not([class*=margin],.right,.left,.top,.bottom){margin-block-start:1rem}:has(>[class*=margin]){padding:.1px}:is(a,button,.button,.chip,summary):focus-visible{outline:.125rem solid var(--primary);outline-offset:.25rem}:is(nav,.row,li).group>:focus-visible{z-index:1}:is(button,.button,.chip)>:is(span,i,img,svg){pointer-events:none}div:is(:not([class]),[class=active]):has(>:not(.responsive)~:is(menu,.tooltip,input)){display:inline-flex}.middle-align{display:flex;align-items:center!important}.bottom-align{display:flex;align-items:flex-end!important}.top-align{display:flex;align-items:flex-start!important}.left-align{text-align:start;justify-content:flex-start!important}.right-align{text-align:end;justify-content:flex-end!important}.center-align{text-align:center;justify-content:center!important}[class*=blur],[class*=blur].light{--_blur: 1rem;-webkit-backdrop-filter:blur(var(--_blur));backdrop-filter:blur(var(--_blur));color:var(--on-surface);background-color:#ffffff80!important}.dark [class*=blur],[class*=blur].dark{background-color:#00000080!important}.small-blur{--_blur: .5rem}.large-blur{--_blur: 1.5rem}.horizontal{display:inline-flex;flex-direction:row!important;gap:1rem;inline-size:auto!important;max-inline-size:none!important}.horizontal>*{margin-block:0!important}.vertical{display:flex;flex-direction:column!important}:is(a,button,.button,.chip).vertical{display:inline-flex;gap:.25rem;block-size:auto!important;max-block-size:none!important;padding-block:.5rem}.vertical>*{margin-inline:0!important}.no-elevate{box-shadow:none!important}.small-elevate,.elevate{box-shadow:var(--elevate1)!important}.medium-elevate{box-shadow:var(--elevate2)!important}.large-elevate{box-shadow:var(--elevate3)!important}.round,[class*=-round]{--_round: 2rem;border-radius:var(--_round)!important}.small-round{--_round: .5rem}.large-round{--_round: 3.5rem}.no-round,.square,.top-round,.bottom-round,.left-round,.right-round{border-radius:.5rem!important}.top-round{border-start-start-radius:var(--_round)!important;border-start-end-radius:var(--_round)!important}.bottom-round{border-end-end-radius:var(--_round)!important;border-end-start-radius:var(--_round)!important}.left-round{border-start-start-radius:var(--_round)!important;border-end-start-radius:var(--_round)!important}.right-round{border-start-end-radius:var(--_round)!important;border-end-end-radius:var(--_round)!important}.circle:not(.extend){border-radius:50%}:is(.circle,.square):is(button,.button,.chip){padding:0;block-size:var(--_size);inline-size:var(--_size)}:is(.circle,.square)>span:not([class]){display:none}:is(.circle,.square).round{border-radius:1rem!important}.border:not(table,.field,.list,menu,article){box-sizing:border-box;border:.0625rem solid var(--outline);background-color:transparent;box-shadow:none}.no-border{border-color:transparent!important}.margin,[class*=-margin]:not(.left-margin,.right-margin,.top-margin,.bottom-margin,.horizontal-margin,.vertical-margin){margin:var(--_margin)!important}.margin,[class*=-margin]{--_margin: 1rem}.no-margin{--_margin: 0}.auto-margin{--_margin: auto}.tiny-margin{--_margin: .25rem}.small-margin{--_margin: .5rem}.large-margin{--_margin: 1.5rem}.left-margin,.horizontal-margin{margin-inline-start:var(--_margin)!important}.right-margin,.horizontal-margin{margin-inline-end:var(--_margin)!important}.top-margin,.vertical-margin{margin-block-start:var(--_margin)!important}.bottom-margin,.vertical-margin{margin-block-end:var(--_margin)!important}.no-opacity{opacity:0!important}.small-opacity{opacity:.25!important}.medium-opacity{opacity:.5!important}.large-opacity{opacity:.75!important}.opacity{opacity:1!important}.padding,[class*=-padding]:not(.left-padding,.right-padding,.top-padding,.bottom-padding,.horizontal-padding,.vertical-padding){padding:var(--_padding)!important}.padding,[class*=-padding]{--_padding: 1rem}.no-padding{--_padding: 0 !important}.tiny-padding{--_padding: .25rem !important}.small-padding{--_padding: .5rem !important}.large-padding{--_padding: 1.5rem !important}.left-padding,.horizontal-padding{padding-inline-start:var(--_padding)!important}.right-padding,.horizontal-padding{padding-inline-end:var(--_padding)!important}.top-padding,.vertical-padding{padding-block-start:var(--_padding)!important}.bottom-padding,.vertical-padding{padding-block-end:var(--_padding)!important}.front{z-index:10!important}.back{z-index:-10!important}.left{inset-inline-start:0}.right{inset-inline-end:0}.top{inset-block-start:0}.bottom{inset-block-end:0}.center{inset-inline-start:50%;transform:translate(-50%)}[dir=rtl] .center{transform:translate(50%)}.middle{inset-block-start:50%;transform:translateY(-50%)}.middle.center{transform:translate(-50%,-50%)}[dir=rtl] .middle.center{transform:translate(50%,-50%)}[class*=ripple]:is(:hover,:focus-visible):after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:currentColor;opacity:.1;border-radius:inherit}.ripple{--_duration: .6s}.fast-ripple{--_duration: .2s}.slow-ripple{--_duration: 1.8s}.ripple-js{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.ripple-js>div{position:absolute;border-radius:50%;background:currentColor;opacity:.3;transform:scale(0);animation:to-ripple var(--_duration) linear}.scroll{overflow:auto}.no-scroll{overflow:hidden}.shadow{background-color:#00000050}:is(.left-shadow,.right-shadow,.top-shadow,.bottom-shadow){background-color:transparent!important}.left-shadow{background-image:linear-gradient(to right,black,transparent)!important}.right-shadow{background-image:linear-gradient(to left,black,transparent)!important}.bottom-shadow{background-image:linear-gradient(to top,black,transparent)!important}.top-shadow{background-image:linear-gradient(to bottom,black,transparent)!important}[class*=-width]{max-inline-size:100%}.auto-width{inline-size:auto}.small-width{inline-size:12rem!important}.medium-width{inline-size:24rem!important}.large-width{inline-size:36rem!important}.auto-height{block-size:auto}.small-height{block-size:12rem!important}.medium-height{block-size:24rem!important}.large-height{block-size:36rem!important}.wrap{display:block;white-space:normal}.no-wrap:not(menu){display:flex;white-space:nowrap}.tiny-space:not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:.5rem}:is(.space,.small-space):not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:1rem}.medium-space:not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:2rem}.large-space:not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:3rem}.extra-space:not(nav,.row,.grid,table,.tooltip,.list,menu,.shape){block-size:4rem}.responsive{inline-size:-webkit-fill-available;inline-size:-moz-available}@media only screen and (max-width:600px){:is(.m,.l):not(.s){display:none!important}}@media only screen and (min-width:601px)and (max-width:992px){:is(.s,.l):not(.m){display:none!important}}@media only screen and (min-width:993px){:is(.m,.s):not(.l){display:none!important}}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:400;display:block;align-items:center;line-height:normal}h1,.h1{font-size:3.5625rem}h2,.h2{font-size:2.8125rem}h3,.h3{font-size:2.25rem}h4,.h4{font-size:2rem}h5,.h5{font-size:1.75rem}h6,.h6{font-size:1.5rem}:is(h1,.h1).small{font-size:3.0625rem}:is(h2,.h2).small{font-size:2.3125rem}:is(h3,.h3).small{font-size:1.75rem}:is(h4,.h4).small{font-size:1.5rem}:is(h5,.h5).small{font-size:1.25rem}:is(h6,.h6).small{font-size:1rem}:is(h1,.h1).large{font-size:4.0625rem}:is(h2,.h2).large{font-size:3.3125rem}:is(h3,.h3).large{font-size:2.75rem}:is(h4,.h4).large{font-size:2.5rem}:is(h5,.h5).large{font-size:2.25rem}:is(h6,.h6).large{font-size:2rem}.link{color:var(--primary)!important}.inverse-link{color:var(--inverse-primary)!important}.truncate{overflow:hidden;white-space:nowrap!important;text-overflow:ellipsis;flex:inherit}.truncate>*{white-space:nowrap!important}.small-text{font-size:.75rem}.medium-text{font-size:.875rem}.large-text{font-size:1rem}.upper{text-transform:uppercase}.lower{text-transform:lowercase}.capitalize{text-transform:capitalize}.bold{font-weight:700}.overline{text-decoration:line-through}.underline{text-decoration:underline}.italic{font-style:italic}p{margin:.5rem 0}.no-line{line-height:normal}.tiny-line{line-height:1.25rem}.small-line{line-height:1.5rem}.medium-line{line-height:1.75rem}.large-line{line-height:2rem}.extra-line{line-height:2.25rem}pre{border-radius:0;background-color:var(--surface-container);white-space:pre-wrap;padding:1rem;border-inline-start:.25rem solid var(--primary);font-family:inherit}blockquote{border-radius:0;padding:1rem;border-inline-start:.25rem solid var(--primary);font-family:inherit}code{border-radius:0;background-color:var(--surface-container);white-space:pre-wrap;padding:.25rem}pre>code,blockquote>code{padding:0}.scroll>code{white-space:pre}pre:has(>code){direction:ltr;text-align:start}sub{vertical-align:sub}sup{vertical-align:super}:is(.wave,.chip,.button,button,nav.tabbed>a,.tabs>a,nav.toolbar>a):not([class*=ripple]):after,nav:is(.left,.right,.bottom,.top).max>a:after,nav:is(.left,.right,.bottom,.top).max>:is(ol,ul)>li>a:after,nav:is(.left,.right,.bottom,.top):not(.max)>a>i:after,nav:is(.left,.right,.bottom,.top):not(.max)>:is(ol,ul)>li>a>i:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit;inline-size:100%;block-size:100%;background-position:center;background-image:radial-gradient(circle,currentColor 1%,transparent 1%);opacity:0;transition:none;pointer-events:none}:is(.wave,.chip,.button,button,nav.tabbed>a,.tabs>a,nav.toolbar>a):not([class*=ripple]):is(:focus-visible,:hover):after,nav:is(.left,.right,.bottom,.top).max>a:not(.button,.chip):is(:focus-visible,:hover):after,nav:is(.left,.right,.bottom,.top).max>:is(ol,ul)>li>a:not(.button,.chip):is(:focus-visible,:hover):after,nav:is(.left,.right,.bottom,.top):not(.max)>a:not(.button,.chip):is(:focus-visible,:hover)>i:after,nav:is(.left,.right,.bottom,.top):not(.max)>:is(ol,ul)>li>a:not(.button,.chip):is(:focus-visible,:hover)>i:after{background-size:22500%;opacity:.1;transition:background-size var(--speed2) linear}:is(.wave,.chip,.button,button,nav.tabbed>a,.tabs>a,nav.toolbar>a,nav.max>a):not([class*=ripple]):active:after,nav:is(.left,.right,.bottom,.top).max>a:active:after,nav:is(.left,.right,.bottom,.top).max>:is(ol,ul)>li>a:active:after,nav:is(.left,.right,.bottom,.top):not(.max)>a:active>i:after,nav:is(.left,.right,.bottom,.top):not(.max)>:is(ol,ul)>li>a:active>i:after{background-size:0%;opacity:0;transition:none}.no-wave:after,.no-wave:is(:hover,:active):after{display:none}.zoom,.tiny-zoom{zoom:2}.small-zoom{zoom:3}.medium-zoom{zoom:4}.large-zoom{zoom:5}.extra-zoom{zoom:6}.badge{--_x: 0;--_y: -100%;display:inline-flex;align-items:center;justify-content:center;position:absolute;font-size:.6875rem;z-index:2;padding:0 .25rem;min-block-size:1rem;min-inline-size:1rem;background-color:var(--error);color:var(--on-error);line-height:normal;border-radius:1rem;inset:50% auto auto 50%;transform:translate(var(--_x, 50%),var(--_y, -50%));font-family:var(--font)}.badge.top{--_y: -100%}.badge.bottom{--_y: 0}.badge.left{--_x: -100%}.badge.right{--_x: 0}.badge.border{border-color:var(--error);color:var(--error);background-color:var(--surface)}.badge:is(.circle,.square){text-align:center;inline-size:auto;block-size:auto;padding:0 .25rem;border-radius:1rem}.badge.square{border-radius:0}.badge.min>*{display:none}.badge.min{clip-path:circle(18.75% at 50% 50%)}nav:is(.left,.right,.top,.bottom)>a>.badge,nav:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a>.badge{inset:1rem auto auto 50%}.badge.none{inset:auto!important;transform:none;position:relative;margin:0 .125rem}header,footer{display:grid;align-content:center;border-radius:0;padding:0 1rem}:is(dialog,article)>:is(header,footer){padding-inline:0;top:0;right:0;bottom:0;left:0}header{min-block-size:4rem}footer{min-block-size:5rem}:is(header,footer,menu>*).fixed{position:sticky;top:0;right:0;bottom:0;left:0;z-index:11;background-color:inherit}header.fixed{inset:calc(-1 * var(--_padding, 0)) 0 0 0;margin-block-start:calc(-1 * var(--_padding, 0))}footer.fixed{inset:0 0 calc(-1 * var(--_padding, 0)) 0;margin-block-end:calc(-1 * var(--_padding, 0))}:is(header,footer).fixed.min{margin-inline:auto}dialog>:is(header,footer){background:none}dialog>:is(header,footer).fixed{background-color:inherit}:is(main,header,footer,section).responsive{max-inline-size:min(100vw,75rem);margin:0 auto}:is(main,header,footer,section).responsive.max{max-inline-size:none}:has(>main)>:is(header,footer).fixed{transform:none;box-sizing:content-box;position:sticky;top:0;right:0;bottom:0;left:0;z-index:12}:has(>main)>header{padding-block-start:var(--top, 0)}:has(>main)>footer{padding-block-end:var(--bottom, 0)}nav.top~header,nav.bottom~footer{padding-block:0}nav.top~header.fixed{inset-block:calc(var(--top, 0) + 4.5rem) 0}nav.bottom~footer.fixed{inset-block:0 calc(var(--bottom, 0) + 4.5rem)}:is(nav,.row)>header{background-color:inherit}.button,button{--_padding: 1rem;--_size: 2.5rem;--_round: calc(var(--_size) / 2) !important;box-sizing:content-box;display:inline-flex;align-items:center;justify-content:center;block-size:var(--_size);font-size:.875rem;font-weight:500;color:var(--on-primary);padding:0 var(--_padding);background-color:var(--primary);border-radius:1.25rem;transition:transform var(--speed3),border-radius var(--speed2),padding var(--speed3);-webkit-user-select:none;user-select:none;gap:.5rem;line-height:normal}:is(button,.button).small{--_size: 2rem;--_padding: .75rem}:is(button,.button).large{--_size: 3rem;--_padding: 1.25rem}:is(.button,button):is(.extra,.extend){--_size: 3.5rem;font-size:1rem;--_padding: 1.5rem}:is(button,.button):is(.square,.circle){--_padding: 0}:is(button,.button).border{border-color:var(--outline-variant);color:var(--primary)}.extend>span:not([class]){display:none}.extend:is(:hover,.active){inline-size:auto;--_padding: 1.5rem;padding:0 var(--_padding)}.extend:is(:hover,.active)>i+span{display:inherit;margin-inline-start:var(--_padding)}.extend:is(:hover,.active)>:is(img,svg)+span{display:inherit;margin-inline-start:calc(1rem + var(--_padding, 0))}:is(.button,button)[disabled]{opacity:.5;cursor:not-allowed}.button[disabled]{pointer-events:none}:is(.button,button)[disabled]:before,:is(.button,button)[disabled]:after{display:none}:is(.button,button):not(.chip,.extend).fill{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}:is(.button,button):not(.chip,.extend).active{background-color:var(--primary-container);color:var(--on-primary-container)}:is(.button,button):not(.chip,.extend).fill.active{background-color:var(--secondary)!important;color:var(--on-secondary)!important}:is(.button,button):not(.chip,.extend).border.active{background-color:var(--inverse-surface)!important;color:var(--inverse-on-surface)!important;border-color:var(--inverse-surface)!important}:is(.button,button):not(.chip):active,:is(.button,button):not(.chip).active{border-radius:.5rem!important}article{--_padding: 1rem;box-shadow:var(--elevate1);background-color:var(--surface-container-low);color:var(--on-surface);padding:var(--_padding);border-radius:.75rem;display:block;transition:transform var(--speed3),border-radius var(--speed3),padding var(--speed3)}article.small{block-size:12rem}article.medium{block-size:20rem}article.large{block-size:32rem}article.border{box-shadow:none;border:.0625rem solid var(--outline-variant)}.chip{--_padding: .75rem;--_size: 2rem;--_round: calc(var(--_size) / 2) !important;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;block-size:var(--_size);min-inline-size:var(--_size);font-size:.875rem;font-weight:500;background-color:transparent;border:.0625rem solid var(--outline-variant);color:var(--on-surface-variant);padding:0 var(--_padding);border-radius:.5rem;transition:transform var(--speed3),border-radius var(--speed3),padding var(--speed3);-webkit-user-select:none;user-select:none;gap:.5rem;line-height:normal;letter-spacing:normal}.chip.medium{--_size: 2.5rem;--_padding: 1rem}.chip.large{--_padding: 1.25rem;--_size: 3rem}.chip.fill{border:none}dialog{--_padding: 1.5rem;--_top: calc(var(--_padding, 0) + var(--top, 0));--_bottom: calc(var(--_padding, 0) + var(--bottom, 0));display:block;visibility:hidden;border:none;opacity:0;position:fixed;box-shadow:var(--elevate2);color:var(--on-surface);background-color:var(--surface-container-high);padding:var(--_padding);z-index:100;inset:10% auto auto 50%;min-inline-size:20rem;max-inline-size:100%;max-block-size:80%;overflow-x:hidden;overflow-y:auto;transition:all var(--speed3),0s background-color;border-radius:1.75rem;transform:translate(-50%,-4rem);outline:none}dialog.small{inline-size:25%;block-size:25%}dialog.medium{inline-size:50%;block-size:50%}dialog.large{inline-size:75%;block-size:75%}dialog:is(.active,[open]){visibility:visible;opacity:1;transform:translate(-50%)}dialog:popover-open{visibility:visible;opacity:1;transform:translate(-50%)}dialog:is(.top,.right,.bottom,.left,.max){--_padding: 1rem}dialog:is(.top,.bottom){opacity:1;block-size:auto;inline-size:100%;min-inline-size:auto;max-block-size:100%}dialog.top{inset:0 auto auto 0;transform:translateY(-100%);border-radius:0 0 1rem 1rem;padding-block-start:var(--_top)}dialog.bottom{inset:auto auto 0 0;transform:translateY(100%);border-radius:1rem 1rem 0 0;padding-block-end:var(--_bottom)}dialog:is(.left,.right){opacity:1;inset:0 auto auto 0;inline-size:auto;block-size:100%;max-block-size:100%;background-color:var(--surface);padding-block:var(--_top) var(--_bottom)}[dir=rtl] dialog.right,dialog.left{inset:0 auto auto 0;border-radius:0 1rem 1rem 0;transform:translate(-100%)}[dir=rtl] dialog.left,dialog.right{inset:0 0 auto auto;border-radius:1rem 0 0 1rem;transform:translate(100%)}dialog.max{inset:0 auto auto 0;inline-size:100%;block-size:100%;max-inline-size:100%;max-block-size:100%;transform:translateY(4rem);background-color:var(--surface);border-radius:0;padding-block:var(--_top) var(--_bottom)}dialog:is(.active,[open]):is(.left,.right,.top,.bottom,.max){transform:translate(0)}dialog:popover-open:is(.left,.right,.top,.bottom,.max){transform:translate(0)}dialog.small:is(.left,.right){inline-size:20rem}dialog.medium:is(.left,.right){inline-size:32rem}dialog.large:is(.left,.right){inline-size:44rem}dialog.small:is(.top,.bottom){block-size:16rem}dialog.medium:is(.top,.bottom){block-size:24rem}dialog.large:is(.top,.bottom){block-size:32rem}hr,[class*=divider]{all:unset;inline-size:-webkit-fill-available;min-block-size:auto;block-size:.0625rem;background-color:var(--outline-variant);display:block}hr+*,[class*=divider]+*{margin:0!important}hr.medium,.medium-divider{margin:1rem 0!important}hr.large,.large-divider{margin:1.5rem 0!important}hr.small,.small-divider{margin:.5rem 0!important}li:has(>:is(hr,.divider)){padding:0!important;align-self:normal!important;min-inline-size:auto!important;min-block-size:auto!important;inline-size:-webkit-fill-available;background:none!important}:is(hr,.divider).vertical,li:has(>:is(hr,.divider).vertical){padding:0!important;align-self:center!important;min-inline-size:auto;min-block-size:1.5rem;inline-size:.0625rem}summary{list-style-type:none;cursor:pointer}summary::-webkit-details-marker{display:none}summary>*{pointer-events:none;margin:0}li>details>summary+.list{margin:0!important}.field{--_input: 3rem;--_start: 1.2rem;--_middle: calc(var(--_input, 0) / 2);border-radius:.25rem .25rem 0 0;min-block-size:var(--_input);display:flex;flex-direction:column}.field.fill{--_background: var(--surface-variant);background-color:unset!important;color:unset!important}.field.fill>:is(input,select,textarea){background-color:var(--_background);z-index:0}.field.small{--_input: 2.5rem;--_start: 1rem}.field.large{--_input: 3.5rem;--_start: 1.4rem}.field.extra{--_input: 4rem;--_start: 1.6rem}.field.border{border-radius:.25rem}.field[class*=round].small{border-radius:1.25rem}.field[class*=round]{border-radius:1.5rem}.field[class*=round].large{border-radius:1.75rem}.field[class*=round].extra{border-radius:2rem}.field>:is(i,img,svg,progress.circle,a){position:absolute;inset:calc((var(--_input, 0) / 2) - .75rem) auto auto auto;cursor:pointer;z-index:10;inline-size:1.5rem;block-size:1.5rem;margin:auto 0;pointer-events:none}.field>:is(a,.front){pointer-events:all!important}.field>a>:is(i,img,svg,progress.circle,a){inline-size:1.5rem;block-size:1.5rem}.field>:is(i,img,svg,progress.circle,a),[dir=rtl] .field>:is(i,img,svg,progress.circle,a):first-child{inset:calc(var(--_middle, 0) - .75rem) 1rem auto auto}.field>:is(i,img,svg,progress.circle,a):first-child,[dir=rtl] .field>:is(i,img,svg,progress.circle,a){inset:calc(var(--_middle, 0) - .75rem) auto auto 1rem}.field.invalid>i{color:var(--error)}.field>progress.circle{border-width:.1875rem}.field>:is(input,textarea,select){all:unset;position:relative;display:flex;align-items:center;box-sizing:border-box;border-radius:inherit;border:.0625rem solid transparent;padding:0 .9375rem;font-family:inherit;font-size:1rem;min-block-size:var(--_input);outline:none;z-index:1;background:none;resize:none;text-align:start;cursor:text}input::-webkit-date-and-time-value{text-align:start}:is(input,select,textarea):is(:-webkit-autofill,:autofill){-webkit-background-clip:text;-webkit-text-fill-color:var(--on-surface)}.field>:is(input,textarea,select):focus{border:.125rem solid transparent;padding-inline:.875rem}.field>textarea:not([rows]){field-sizing:content;max-block-size:12rem}input[type=file],input[type=color],:not(.field)>input:is([type^=date],[type^=time],[type=month],[type=week]),input::-webkit-calendar-picker-indicator{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;outline:0;z-index:2!important}@media(pointer:fine){.field>input::-webkit-calendar-picker-indicator{z-index:-1!important}}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration,input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{display:none}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.field.border>:is(input,textarea,select){border-color:var(--outline)}.field.border>:is(input,textarea,select):focus{border-color:var(--primary)}.field[class*=round]>:is(input,textarea,select){padding-inline:1.4376rem}.field[class*=round]>:is(input,textarea,select):focus{padding-inline:1.375rem}.field.prefix>:is(input,textarea,select){padding-inline-start:2.9375rem}.field.prefix>.slider{margin-inline-start:3.5rem}.field.prefix>:is(input,textarea,select):focus{padding-inline-start:2.875rem}.field.suffix>:is(input,textarea,select){padding-inline-end:2.9375rem}.field.suffix>.slider{margin-inline-end:3.5rem}.field.suffix>:is(input,textarea,select):focus{padding-inline-end:2.875rem}.field:not(.border,[class*=round])>:is(input,textarea,select){border-block-end-color:var(--outline)}.field:not(.border,[class*=round])>:is(input,textarea,select):focus{border-block-end-color:var(--primary)}.field[class*=round]:not(.border,.fill)>:is(input,textarea,select),.field[class*=round]:not(.border)>:is(input,textarea,select):focus{box-shadow:var(--elevate1)}.field[class*=round]:not(.border,.fill)>:is(input,textarea,select):focus{box-shadow:var(--elevate2)}.field.invalid:not(.border,[class*=round])>:is(input,textarea,select),.field.invalid:not(.border,[class*=round])>:is(input,textarea,select):focus{border-block-end-color:var(--error)}.field.invalid.border>:is(input,textarea,select),.field.invalid.border>:is(input,textarea,select):focus{border-color:var(--error)}.field:has(>:disabled){opacity:.5;cursor:not-allowed}.field>:disabled{cursor:not-allowed}.field>select{-webkit-user-select:none;user-select:none}@-moz-document url-prefix(){.field>select:focus{background-color:var(--surface)}.field.fill>select:focus{background-color:var(--surface-variant)}.field>select:focus+label{z-index:1}}.field>select>option{background-color:var(--surface)}.field>:is(input,select){padding-block-start:1rem}.field:not(.label)>:is(input,select),.field.border:not(.fill)>:is(input,select){padding-block-start:0}.field>textarea{padding-block-start:var(--_start)!important}.field>textarea:focus{padding-block-start:calc(var(--_start, 0) - .01rem)!important}.field:not(.label)>textarea,.field.border:not(.fill)>textarea{padding-block-start:calc(var(--_start, 0) - .5rem)!important}.field:not(.label)>textarea:focus,.field.border:not(.fill)>textarea:focus{padding-block-start:calc(var(--_start, 0) - .51rem)!important}.field.label>label{--_start: 1rem;position:absolute;inset:-.5rem .9375rem 0 var(--_start);display:flex;block-size:calc(var(--_input, 0) + 1rem);line-height:calc(var(--_input, 0) + 1rem);font-size:1rem;transition:all .2s;gap:.25rem;white-space:nowrap;pointer-events:none}[dir=rtl] .field.label>label{inset:-.5rem calc(var(--_start) - .0625rem) 0 .9375rem}.field.label[class*=round]>label{inset:-.5rem 1.9375rem 0 var(--_start)}[dir=rtl] .field.label[class*=round]>label{inset:-.5rem var(--_start) 0 1.9375rem}.field.label.border.prefix:not(.fill)>:is(label.active,:focus+label,[placeholder]:not(:placeholder-shown)+label,select+label){--_start: 1rem}.field.label[class*=round]>label,.field.label.border.prefix[class*=round]:not(.fill)>:is(label.active,:focus+label,[placeholder]:not(:placeholder-shown)+label,select+label){--_start: 1.5rem}.field.label.prefix>label{--_start: 3rem}.field.label>:is(label.active,:focus+label,[placeholder]:not(:placeholder-shown)+label,select+label){block-size:2.5rem;line-height:2.5rem;font-size:.75rem}.field.label.border:not(.fill)>:is(label.active,:focus+label,[placeholder]:not(:placeholder-shown)+label,select+label){block-size:1rem;line-height:1rem}.field.label.border:not(.fill)>label:after{content:"";display:block;margin:.5rem 0 0;border-block-start:.0625rem solid var(--outline);block-size:1rem;transition:none;flex:auto}.field.label.border:not(.fill)>:focus+label:after{border-block-start:.125rem solid var(--primary)}.field.label.border:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),.field.label.border:not(.fill)>select{clip-path:polygon(-2% -2%,.75rem -2%,.75rem .5rem,calc(100% - 1rem) .5rem,calc(100% - 1rem) -2%,102% -2%,102% 102%,-2% 102%)}[dir=rtl] .field.label.border:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),[dir=rtl] .field.label.border:not(.fill)>select{clip-path:polygon(-2% -2%,1rem -2%,1rem .5rem,calc(100% - .75rem) .5rem,calc(100% - .75rem) -2%,102% -2%,102% 102%,-2% 102%)}.field.label.border[class*=round]:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),.field.label.border[class*=round]:not(.fill)>select{clip-path:polygon(-2% -2%,1.25rem -2%,1.25rem .5rem,calc(100% - 2rem) .5rem,calc(100% - 2rem) -2%,102% -2%,102% 102%,-2% 102%)}[dir=rtl] .field.label.border[class*=round]:not(.fill)>:is(input,textarea):is(:focus,[placeholder]:not(:placeholder-shown),.active),[dir=rtl] .field.label.border[class*=round]:not(.fill)>select{clip-path:polygon(-2% -2%,2rem -2%,2rem .5rem,calc(100% - 1.25rem) .5rem,calc(100% - 1.25rem) -2%,102% -2%,102% 102%,-2% 102%)}.field.label>:focus+label{color:var(--primary)}.field.label.invalid>label,.field.label.invalid>label:after{color:var(--error)!important;border-color:var(--error)!important}.field.label>label>a{block-size:inherit;line-height:inherit;inline-size:1rem}.field.label>label>a>:is(i,img,svg){block-size:1rem;line-height:1rem;inline-size:1rem;font-size:1rem}.field>output{display:inline-block;font-size:.75rem;background:none!important;padding:.25rem 1rem;line-height:1.25rem;align-self:start}.field>output.invalid{color:var(--error)!important}.field[class*=round]>output{padding:.25rem 1.5rem}.field.invalid>output:not(.invalid),.field:not(.invalid)>output.invalid{display:none}.field.invalid>output.invalid~menu,.field:not(.invalid)>output:not(.invalid)~menu{inset:auto auto 1.75rem 0}table td>.field{margin:0}fieldset{border-radius:.25rem;padding:1rem;border:.0625rem solid var(--outline-variant)}fieldset>legend{margin:0 -.25rem;padding:0 .25rem}fieldset>legend+*{margin-block-start:0!important}.grid{--_gap: 1rem;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--_gap);block-size:auto}.grid.no-space{--_gap: 0rem}.grid.medium-space{--_gap: 1.5rem}.grid.large-space{--_gap: 2rem}.grid>*{margin:0}.s1{grid-area:auto/span 1}.s2{grid-area:auto/span 2}.s3{grid-area:auto/span 3}.s4{grid-area:auto/span 4}.s5{grid-area:auto/span 5}.s6{grid-area:auto/span 6}.s7{grid-area:auto/span 7}.s8{grid-area:auto/span 8}.s9{grid-area:auto/span 9}.s10{grid-area:auto/span 10}.s11{grid-area:auto/span 11}.s12{grid-area:auto/span 12}@media only screen and (min-width:601px){.m1{grid-area:auto/span 1}.m2{grid-area:auto/span 2}.m3{grid-area:auto/span 3}.m4{grid-area:auto/span 4}.m5{grid-area:auto/span 5}.m6{grid-area:auto/span 6}.m7{grid-area:auto/span 7}.m8{grid-area:auto/span 8}.m9{grid-area:auto/span 9}.m10{grid-area:auto/span 10}.m11{grid-area:auto/span 11}.m12{grid-area:auto/span 12}}@media only screen and (min-width:993px){.l1{grid-area:auto/span 1}.l2{grid-area:auto/span 2}.l3{grid-area:auto/span 3}.l4{grid-area:auto/span 4}.l5{grid-area:auto/span 5}.l6{grid-area:auto/span 6}.l7{grid-area:auto/span 7}.l8{grid-area:auto/span 8}.l9{grid-area:auto/span 9}.l10{grid-area:auto/span 10}.l11{grid-area:auto/span 11}.l12{grid-area:auto/span 12}}i,:is(.checkbox,.radio,.switch)>span:before,:is(.checkbox,.radio,.switch)>span>i{--_size: 1.5rem;font-family:var(--font-icon);font-weight:400;font-style:normal;font-size:var(--_size);letter-spacing:normal;text-transform:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle;text-align:center;overflow:hidden;inline-size:var(--_size);min-inline-size:var(--_size);block-size:var(--_size);min-block-size:var(--_size);box-sizing:content-box;line-height:normal;border-radius:0}i:has(.badge){overflow:unset}i.tiny{--_size: 1rem}.chip>i,i.small{--_size: 1.25rem}i.medium{--_size: 1.5rem}i.large{--_size: 1.75rem}i.extra{--_size: 2rem}i.fill,a.active>i,button.active>i{font-variation-settings:"FILL" 1}i>:is(img,svg){inline-size:100%;block-size:100%;background-size:100%;border-radius:inherit;position:absolute;inset:0 auto auto 0;padding:inherit}i[class*=fa-]{font-size:calc(var(--_size, 0) * .85);line-height:normal;block-size:auto;min-block-size:auto}.absolute{position:absolute}.fixed{position:fixed}:is(.absolute,.fixed).left.right{inline-size:auto}:is(.absolute,.fixed).left.right.small{block-size:20rem}:is(.absolute,.fixed).left.right.medium{block-size:28rem}:is(.absolute,.fixed).left.right.large{block-size:44rem}:is(.absolute,.fixed).top.bottom.small{inline-size:20rem}:is(.absolute,.fixed).top.bottom.medium{inline-size:28rem}:is(.absolute,.fixed).top.bottom.large{inline-size:44rem}.list{display:flex;flex-direction:column;padding:0;margin:0;flex:1}.list>li,.list>li>details>summary,.list>li>a:only-child{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;align-self:normal;text-align:start;justify-content:flex-start;white-space:nowrap;gap:1rem;min-block-size:3.5rem;padding:.5rem 1rem;cursor:pointer;flex:1}.list>li:has(ul,ol,details[open],a:only-child){padding:0}.list>li>.list{padding:0 0 0 1rem}.list>li>*,.list>li>a:only-child>*{margin:0}.list>li>:is(details,.max),.list>li>a:only-child>.max,.list>li>details>summary>.max{flex:1}.list.border>li:not(:last-child):before,.list.border>li>details[open]>summary:before{content:"";position:absolute;background-color:var(--outline-variant);inset:auto 0 0 0;block-size:.0625rem;inline-size:auto}.list.no-space>li,.list.no-space>li>details>summary{min-block-size:2.5rem}.list.medium-space>li,.list.medium-space>li>details>summary{min-block-size:4.5rem}.list.large-space>li,.list.large-space>li>details>summary{min-block-size:5.5rem}.list>li:focus-visible,.list>li>a:only-child:focus-visible{outline:.125rem solid var(--primary);outline-offset:-.25rem}:has(>main){display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:"left top right" "left header right" "left main right" "left footer right" "left bottom right";min-block-size:100dvh;box-sizing:border-box;background-color:var(--surface)}nav.left{grid-area:left}nav.right{grid-area:right}nav.top{grid-area:top}nav.bottom{grid-area:bottom}header{grid-area:header}footer{grid-area:footer}main{--_padding: .5rem;grid-area:main;padding:var(--_padding);overflow:clip}aside{z-index:1}aside:not(.fixed,.absolute).right{float:right}aside:not(.fixed,.absolute).left{float:left}svg{fill:currentcolor}:is(img,svg,video):is(.small,.medium,.large,.tiny,.extra,.round,.circle,.square,.responsive){--_size: 3rem;object-fit:cover;object-position:center;transition:transform var(--speed3),border-radius var(--speed3),padding var(--speed3);block-size:var(--_size);inline-size:var(--_size)}:is(img,svg,video).round{--_round: .5rem}:is(img,svg,video).tiny{--_size: 2rem}:is(img,svg,video).small{--_size: 2.5rem}:is(img,svg,video).large{--_size: 3.5rem}:is(img,svg,video).extra{--_size: 4rem}:is(img,svg,video).responsive{--_size: 100%;margin:0 auto}:is(img,svg,video).responsive.tiny{inline-size:100%;block-size:4rem}:is(img,svg,video).responsive.small{inline-size:100%;block-size:8rem}:is(img,svg,video).responsive.medium{inline-size:100%;block-size:12rem}:is(img,svg,video).responsive.large{inline-size:100%;block-size:16rem}:is(img,svg,video).responsive.extra{inline-size:100%;block-size:20rem}:is(img,svg,video).responsive.round{--_round: 2rem}:is(img,svg,video).empty-state{max-inline-size:100%;inline-size:24rem}:is(button,.button,.chip):not(.transparent)>.responsive{border:.25rem solid transparent}:is(button,.button,.chip,.field)>:is(img,svg):not(.responsive),.tabs :is(img,svg):not(.responsive){min-inline-size:1.5rem;max-inline-size:1.5rem;min-block-size:1.5rem;max-block-size:1.5rem}:is(button,.button,.chip):not(.extend)>.responsive:first-child{margin-inline-start:calc(-1 * var(--_padding, 0))}:is(button,.button,.chip):not(.extend)>.responsive:not(:first-child){margin-inline-end:calc(-1 * var(--_padding, 0))}:is(button,.button,.chip,.circle,.square,.extend)>.responsive{--_size: inherit;margin:0 auto}.extend>:is(.responsive,i){margin:0;position:absolute;inset-inline:1rem;z-index:1}.extend>.responsive{inset-inline:0;inline-size:3.5rem}.extend.border>.responsive{inline-size:3.375rem}menu{opacity:0;visibility:hidden;position:absolute;box-shadow:var(--elevate2);background-color:var(--surface-container);z-index:13;inset:auto auto 0 0;inline-size:100%;max-block-size:50vh;max-inline-size:none!important;overflow-x:hidden;overflow-y:auto;font-size:.875rem;font-weight:400;text-transform:none;color:var(--on-surface);line-height:normal;text-align:start;border-radius:1rem;transform:scale(.8) translateY(120%);transition:all var(--speed2) var(--speed2);justify-content:flex-start;padding:.25rem;display:flex;flex-direction:column;gap:.125rem}menu.no-space{gap:0}menu.small-space{gap:.25rem}menu.medium-space{gap:.375rem}menu.large-space{gap:.5rem}menu.extra-space{gap:.625rem}[dir=rtl] menu{inset:auto 0 0 auto}menu.no-wrap{inline-size:max-content!important;white-space:nowrap!important}menu.active,:not([data-ui]):focus-within>menu,menu>li:hover>menu,menu>li>menu:hover{opacity:1;visibility:visible;transform:scale(1) translateY(100%);transition:all var(--speed2),background-color 0s}menu.top.active,:not([data-ui]):focus-within>menu.top,menu>li:hover>menu.top,menu>li>menu.top:hover{transform:scale(1) translateY(-100%)}menu:is(.min,.max).active,:not([data-ui]):focus-within>menu:is(.min,.max){transform:scale(1)}menu *{white-space:inherit!important}menu>li,menu>li>a:only-child{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;align-self:normal;text-align:start;justify-content:inherit;white-space:nowrap;gap:1rem;padding:.5rem 1rem;min-block-size:2.75rem;flex:1;margin:0!important;cursor:pointer;border-radius:.25rem;transition:border-radius var(--speed2)}menu>li:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}menu>li:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}menu>li:hover{background-color:color-mix(in srgb,currentColor 10%,transparent)}menu>li.active{background-color:var(--tertiary-container);color:var(--on-tertiary-container)}menu>li:is(.active,:active){border-radius:.75rem}menu>li>:is(.max,.field),menu>li>a:only-child>.max,menu>li:has(.field,a:only-child){flex:1;padding:0;margin:0}menu.min{inset:0 0 auto 0;transform:scale(.8)}[dir=rtl] menu.min.right,menu.min.left,menu.top.left{inset:0 0 auto auto}[dir=rtl] menu.min.left,menu.min.right,menu.top,menu.top.right{inset:0 auto auto 0}menu.max{position:fixed;top:0;right:0;bottom:0;left:0;block-size:100%;max-block-size:none;min-block-size:auto;z-index:100;transform:scale(.8);border-radius:0}menu.max>li{flex:none!important}menu.no-wrap:is(.min,.max){min-inline-size:16rem}[dir=rtl] menu.right,[dir=rtl] menu.top.min.right,menu.left,menu.top.min.left{inset:auto 0 0 auto}[dir=rtl] menu.left,[dir=rtl] menu.top.min.left,menu.right,menu.top.min{inset:auto auto 0 0}menu.top{transform:scale(.8) translateY(-120%)}menu:has(menu){--_child: 1;--_type: 0;overflow:unset;white-space:nowrap;inline-size:auto;min-inline-size:12rem;max-block-size:none}menu>li>:is(menu,menu.right),[dir=rtl] menu>li>menu.left{inset:auto auto calc(3rem * (var(--_child, 0) - var(--_type, 0))) 100%}[dir=rtl] menu>li>:is(menu,menu.right),menu>li>menu.left{inset:auto 100% calc(3rem * (var(--_child, 0) - var(--_type, 0))) auto}menu>li>:is(menu.top,menu.top.right),[dir=rtl] menu>li>menu.top.left{inset:calc(3rem * (var(--_child, 0) - var(--_type, 0))) auto auto 100%}[dir=rtl] menu>li>:is(menu.top,menu.top.right),menu>li>menu.top.left{inset:calc(3rem * (var(--_child, 0) - var(--_type, 0))) 100% auto auto}menu.group{padding:.5rem 0;inline-size:100%;min-inline-size:auto;max-block-size:none;overflow:unset;background:none;box-shadow:none}menu.group>li{box-shadow:none;padding:0;min-block-size:auto}menu.group>li:hover{background:none}menu.group>li>menu,menu.group>li>menu:hover{opacity:1;visibility:visible;position:relative;top:0;right:0;bottom:0;left:0;max-block-size:none;transform:none;transition:none;border-radius:1rem 1rem .5rem .5rem;z-index:auto;flex:1}menu.group>li:last-child>menu{border-radius:.5rem .5rem 1rem 1rem}menu>li:nth-last-child(2){--_child: 2}menu>li:nth-last-child(3){--_child: 3}menu>li:nth-last-child(4){--_child: 4}menu>li:nth-last-child(5){--_child: 5}menu>li:nth-last-child(6){--_child: 6}menu>li:nth-last-child(7){--_child: 7}menu>li:nth-last-child(8){--_child: 8}menu>li:nth-last-child(9){--_child: 9}menu>li:nth-last-child(10){--_child: 10}menu>li:nth-last-child(11){--_child: 11}menu>li:nth-last-of-type(2){--_type: 1}menu>li:nth-last-of-type(3){--_type: 2}menu>li:nth-last-of-type(4){--_type: 3}menu>li:nth-last-of-type(5){--_type: 4}menu>li:nth-last-of-type(6){--_type: 5}menu>li:nth-last-of-type(7){--_type: 6}menu>li:nth-last-of-type(8){--_type: 7}menu>li:nth-last-of-type(9){--_type: 8}menu>li:nth-last-of-type(10){--_type: 9}menu>li:nth-last-of-type(11){--_type: 10}@media(pointer:coarse){:not(menu,[data-ui]):hover>menu{opacity:1;visibility:visible;transform:scale(1) translateY(100%)}:not(menu,[data-ui]):hover>menu.top{transform:scale(1) translateY(-100%)}}nav>:is(ol,ul),nav>:is(ol,ul)>li{all:unset}nav,.row,a.row{display:flex;align-items:center;align-self:normal;text-align:start;justify-content:flex-start;white-space:nowrap;gap:1rem;border-radius:0}a.row,nav.row{min-block-size:3rem;margin:0}:is(nav,.row,.max)>:only-child,:is(nav,.row,.max)>span>*,nav>:is(ol,ul)>li>:only-child,nav>:is(ol,ul)>li>span>*{margin:0}:is(nav,.row)>:not(ul,ol,header,footer){margin:0;white-space:normal;flex:none}:is(nav,.row).min{display:inline-flex}:is(nav,.row,li).no-space{gap:0}:is(nav,.row,li).tiny-space{gap:.5rem}:is(nav,.row,li).medium-space{gap:1.5rem}:is(nav,.row,li).large-space{gap:2rem}:is(nav,.row)>.max,:is(nav,.row)>:is(ol,ul)>.max{flex:1}:is(nav,.row).wrap{display:flex;flex-wrap:wrap}:is(header,footer)>:is(nav,.row){min-block-size:inherit}nav:is(.left,.right,.top,.bottom){--_padding: .5rem;--_top: calc(var(--_padding, 0) + var(--top, 0));--_bottom: calc(var(--_padding, 0) + var(--bottom, 0));position:sticky;top:0;right:0;bottom:0;left:0;border:0;color:var(--on-surface);transform:none;z-index:100;text-align:center;padding:var(--_padding);margin:0}nav:is(.left,.right){justify-content:flex-start;flex-direction:column;background-color:var(--surface);block-size:100dvh;min-inline-size:6rem;padding-block:var(--_top) var(--_bottom)}nav:is(.top,.bottom){position:sticky;top:0;right:0;bottom:0;left:0;padding:.5rem;justify-content:center;flex-direction:row;background-color:var(--surface-container);block-size:auto;min-block-size:4.5rem}nav.top{block-size:calc(var(--top, 0) + 4.5rem);padding-block-start:var(--_top)}nav.bottom{block-size:calc(var(--bottom, 0) + 4.5rem);padding-block-end:var(--_bottom)}nav>header{min-block-size:auto;padding:0;margin:0 0 1rem;align-items:flex-start;gap:1rem;background:none!important}nav:is(.top,.bottom)>header{flex-direction:row;align-items:center;margin:0 1rem 0 0}nav>header>*{margin:0;transition:none}nav.max>header>*{transition:all var(--speed1)}nav>header>.extend:hover{--_padding: 0;inline-size:var(--_size)}nav>header>.extend:hover>span:not([class]){display:none}nav>:is(ol,ul){all:inherit;min-inline-size:auto;margin:0;padding:0;flex:auto}nav.max:is(.left,.right,.top,.bottom){gap:0;inline-size:auto;align-items:flex-start;min-inline-size:12.75rem;padding:var(--_top) 1.25rem var(--_bottom) 1.25rem}nav.max>:is(ol,ul){padding:0}nav.max>header{margin:0 0 1.25rem}nav.max:is(.top,.bottom)>header{margin:0 1.25rem 0 0}nav.max>header>.extend{--_padding: 1.5rem;inline-size:auto;padding:0 var(--_padding)}nav.max>header>.extend>span:not([class]){display:block;margin-inline-start:var(--_padding)}nav.max>header>.extend>:is(img,svg)+span{margin-inline-start:calc(1rem + var(--_padding, 0))}nav.max:is(.top,.bottom){padding:0 .5rem;align-items:center;min-inline-size:auto;max-inline-size:none}nav:is(.left,.right,.top,.bottom)>a:not(.button,.chip),nav:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a:not(.button,.chip){display:flex;flex-direction:column;gap:.25rem;line-height:normal;inline-size:3.5rem;font-size:.8rem}nav:not(.max):is(.left,.right,.top,.bottom)>a:not(.button,.chip)>i,nav:not(.max):is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a:not(.button,.chip)>i{padding:.25rem 1rem;border-radius:2rem;margin:0 auto}nav.max:is(.left,.right,.top,.bottom)>a:not(.button,.chip),nav.max:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a:not(.button,.chip){flex-direction:row;gap:.5rem;inline-size:auto;block-size:3.5rem;padding:0 1rem;border-radius:2rem;font-size:inherit}nav:is(.left,.right,.top,.bottom)>a.active:not(.button,.chip),nav:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a.active:not(.button,.chip){transition:padding var(--speed1) linear}nav.max:is(.top,.bottom)>a:not(.button,.chip),nav.max:is(.top,.bottom)>:is(ol,ul)>li>a:not(.button,.chip){gap:.25rem;block-size:2.5rem;font-size:.8rem}nav.max:is(.left,.right,.top,.bottom)>a.active:not(.button,.chip),nav.max:is(.left,.right,.top,.bottom)>:is(ol,ul)>li>a.active:not(.button,.chip),nav:is(.left,.right,.top,.bottom):not(.max)>a.active:not(.button,.chip)>i,nav:is(.left,.right,.top,.bottom):not(.max)>:is(ol,ul)>li>a.active:not(.button,.chip)>i{background-color:var(--secondary-container);color:var(--on-secondary-container)}nav.vertical>:is(ol,ul){align-items:normal}:is(nav,.row):is(.left-align,.top-align,.vertical){justify-content:flex-start}:is(nav,.row):is(.right-align,.bottom-align){justify-content:flex-end}:is(nav,.row):is(.center-align,.middle-align){justify-content:center}:is(nav,.row):is(.left-align,.top-align,.vertical).vertical{align-items:flex-start}:is(nav,.row):is(.right-align,.bottom-align).vertical{align-items:flex-end}:is(nav,.row):is(.center-align,.middle-align).vertical{align-items:center}nav:not(.left,.right)>.space{inline-size:.5rem}nav:not(.left,.right)>.medium-space{inline-size:1rem}nav:not(.left,.right)>.large-space{inline-size:1.5rem}nav.tabbed{background-color:var(--surface-container);border-radius:4rem!important;gap:0rem;block-size:4rem}nav.tabbed.small{block-size:3rem}nav.tabbed.large{block-size:5rem}nav.tabbed>a{border-radius:inherit;block-size:inherit;display:inline-flex;align-items:center;padding-inline:1rem;gap:.5rem;font-size:1rem;flex:1}nav.tabbed>a.active{background-color:var(--primary-container)}nav.toolbar{display:inline-flex;justify-content:space-around;border-radius:2rem;background-color:var(--surface-container);color:var(--on-surface);padding:0 1rem;gap:.5rem;min-block-size:4rem;min-inline-size:4rem}nav.toolbar>a{display:inline-flex;gap:.5rem;min-inline-size:2.5rem;min-block-size:2.5rem;border-radius:1.75rem}nav.toolbar>a:has(>:not(i)){padding:0 1rem}nav.toolbar>a.active{background-color:var(--secondary-container);color:var(--on-secondary-container)}nav.toolbar.fill{background-color:var(--primary-container)!important;color:var(--on-primary-container)!important}nav.toolbar.fill>a.active{background-color:var(--surface-container)!important;color:var(--on-surface)!important}nav.toolbar.vertical{flex-direction:column!important;min-inline-size:4rem;padding:1rem 0;align-self:center;align-items:center!important}nav.toolbar.vertical>a{inline-size:2.5rem;block-size:2.5rem}nav.toolbar.vertical>a>:is(div,span):not(.badge,.tooltip){display:none}nav.toolbar.max{border-radius:0;display:flex}nav.group{background:none!important}nav.group:is(.connected,.split){gap:.125rem}nav.group:not(.split)>:is(.button,button):not(.border){background-color:var(--surface-container);color:var(--on-surface-container)}nav.group:not(.split)>:is(.button,button).active{background-color:var(--primary);color:var(--on-primary)}nav.group.connected>:is(.button,button):not(.border){background-color:var(--surface-container);color:var(--on-surface-container)}nav.group.connected>:is(.button,button).active{background-color:var(--secondary-container);color:var(--on-secondary-container)}nav.group:is(.connected,.split)>:is(.button,button).active,nav.split>:is(.button,button):active{border-radius:2rem!important}:not(nav)>:is(ul,ol){all:revert}:is(.scroll,.no-scroll,.no-space,.tabs,.tabbed)>:focus-visible{outline:.125rem solid var(--primary);outline-offset:-.125rem}nav.split>:is(.button,button):not(.chip,.fill,.border){background-color:var(--primary);color:var(--on-primary)}@media only screen and (max-width:600px){nav.top,nav.bottom{justify-content:space-around}}.overlay,dialog::backdrop{display:block!important;opacity:0;visibility:hidden;position:fixed;top:0;right:0;bottom:0;left:0;color:var(--on-surface);background-color:var(--overlay);z-index:100;transition:all var(--speed3),0s background-color;border-radius:0}.overlay.active{opacity:1;visibility:visible}dialog:popover-open::backdrop{opacity:1;visibility:visible}.overlay+dialog::backdrop,.snackbar::backdrop{display:none}[popover]{border:0}.page{--_transform: translate(0, 0);opacity:0;position:absolute;display:none}.page.active{opacity:1;position:relative;display:block;animation:var(--speed4) to-page ease}.page.active.top{--_transform: translate(0, -4rem)}.page.active.bottom{--_transform: translate(0, 4rem)}.page.active.left{--_transform: translate(-4rem, 0)}.page.active.right{--_transform: translate(4rem, 0)}progress{--_size: .25rem;position:relative;inline-size:100%;block-size:var(--_size);color:var(--primary);background:var(--image);border-radius:1rem;flex:none;border:none;overflow:hidden;writing-mode:horizontal-tb;direction:ltr;-webkit-appearance:none;-moz-appearance:none;appearance:none}progress.small{--_size: .25rem}progress.medium{--_size: .35rem}progress.large{--_size: .45rem}progress.indeterminate{--_value: 100;animation:3.2s to-indeterminate-progress ease infinite}progress:not(.circle,[value]):after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inline-size:100%;block-size:100%;clip-path:none;background:currentcolor;animation:3.2s to-linear-progress ease infinite}progress:not(.circle,[value])::-moz-progress-bar{animation:3.2s to-linear-progress ease infinite}progress:not(.circle,[value])::-webkit-progress-value{animation:3.2s to-linear-progress ease infinite}progress::-webkit-progress-bar{background:none}progress::-webkit-progress-value{background:currentColor}progress::-moz-progress-bar{background:currentColor}progress.wavy{block-size:calc(var(--_size, 0) * 2);background:none;background-image:var(--image);background-repeat:repeat-x;background-position:0 50%;background-size:auto calc(var(--_size, 0) / 2)}progress.wavy::-webkit-progress-value,progress.wavy:not(.circle,[value]):after{-webkit-mask-image:url(wavy.svg);mask-image:url(wavy.svg);-webkit-mask-position:0 50%;mask-position:0 50%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:auto 100%;mask-size:auto 100%}progress.wavy::-moz-progress-bar{-webkit-mask-image:url(wavy.svg);mask-image:url(wavy.svg);-webkit-mask-position:0 50%;mask-position:0 50%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:auto 100%;mask-size:auto 100%}progress.circle{--_value: attr(value type(<number>), 50);inline-size:2.5rem;block-size:2.5rem;background:conic-gradient(currentColor calc(var(--_value, 0) * 1%),var(--active) 0%);border-radius:50%;-webkit-mask-image:radial-gradient(circle at center,transparent 57%,currentColor 60%);mask-image:radial-gradient(circle at center,transparent 57%,currentColor 60%)}progress.circle::-webkit-progress-value{background:none}progress.circle::-moz-progress-bar{background:none}progress.circle.wavy{background:conic-gradient(currentColor calc(var(--_value, 0) * 1%),var(--active) 0);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url(wavy-circle.svg);mask-image:url(wavy-circle.svg)}progress.circle.small{inline-size:1.5rem;block-size:1.5rem}progress.circle.large{inline-size:3.5rem;block-size:3.5rem}progress.circle:not([value]),progress.circle.indeterminate{--_value: 50;animation:to-rotate 1s infinite linear}:is(nav,.row,.field)>progress:not(.circle,.small,.medium,.large){flex:auto}progress.max{display:unset;position:absolute;inline-size:100%!important;block-size:100%!important;color:currentColor;background:none;top:0;right:0;bottom:0;left:0;border-radius:inherit;animation:none;writing-mode:horizontal-tb;opacity:.33}progress.max[class*=-text]{opacity:1}progress.max+*{margin-block-start:0}:is(.button,button,.chip)>progress.circle{color:inherit}.shape{display:flex;align-items:center;justify-content:center;color:var(--on-primary);background-color:var(--primary);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;border-radius:0;block-size:3.5rem;inline-size:3.5rem;margin:0!important;padding:0!important;border:0!important}.transparent>.shape>i{filter:invert(1)}.shape.tiny-space{-webkit-mask-size:90%;mask-size:90%}.shape.space,.shape.small-space{-webkit-mask-size:80%;mask-size:80%}.shape.medium-space{-webkit-mask-size:70%;mask-size:70%}.shape.large-space{-webkit-mask-size:60%;mask-size:60%}.shape.extra-space{-webkit-mask-size:50%;mask-size:50%}.shape.tiny{block-size:2.5rem;inline-size:2.5rem}.shape.medium{block-size:4.5rem;inline-size:4.5rem}.shape.large{block-size:5.5rem;inline-size:5.5rem}.shape.extra{block-size:6.5rem;inline-size:6.5rem}.shape.max,.shape>.responsive,.shape>.responsive>.responsive{position:absolute;top:0;right:0;bottom:0;left:0;block-size:100%;inline-size:100%;margin:0!important;padding:0!important;border:0!important}.shape>.responsive{background:inherit;color:inherit}.shape.rotate{animation:linear to-rotate infinite 12s}.shape.rotate>*{animation:linear to-rotate infinite 12s reverse}.shape.fast-rotate{animation:linear to-rotate infinite 6s}.shape.fast-rotate>*{animation:linear to-rotate infinite 6s reverse}.shape.slow-rotate{animation:linear to-rotate infinite 24s}.shape.slow-rotate>*{animation:linear to-rotate infinite 24s reverse}:is(button,.button,.chip):has(>.shape)>.responsive{border:none}.shape.arch{-webkit-mask-image:url(arch.svg);mask-image:url(arch.svg)}.shape.arrow{-webkit-mask-image:url(arrow.svg);mask-image:url(arrow.svg)}.shape.boom{-webkit-mask-image:url(boom.svg);mask-image:url(boom.svg)}.shape.bun{-webkit-mask-image:url(bun.svg);mask-image:url(bun.svg)}.shape.burst{-webkit-mask-image:url(burst.svg);mask-image:url(burst.svg)}.shape.circle{-webkit-mask-image:url(circle.svg);mask-image:url(circle.svg)}.shape.clamshell{-webkit-mask-image:url(clamshell.svg);mask-image:url(clamshell.svg)}.shape.diamond{-webkit-mask-image:url(diamond.svg);mask-image:url(diamond.svg)}.shape.fan{-webkit-mask-image:url(fan.svg);mask-image:url(fan.svg)}.shape.flower{-webkit-mask-image:url(flower.svg);mask-image:url(flower.svg)}.shape.gem{-webkit-mask-image:url(gem.svg);mask-image:url(gem.svg)}.shape.ghost-ish{-webkit-mask-image:url(ghost-ish.svg);mask-image:url(ghost-ish.svg)}.shape.heart{-webkit-mask-image:url(heart.svg);mask-image:url(heart.svg)}.shape.leaf-clover4{-webkit-mask-image:url(leaf-clover4.svg);mask-image:url(leaf-clover4.svg)}.shape.leaft-clover8{-webkit-mask-image:url(leaf-clover8.svg);mask-image:url(leaf-clover8.svg)}.shape.loading-indicator{-webkit-mask-image:url(loading-indicator.svg);mask-image:url(loading-indicator.svg)}.shape.oval{-webkit-mask-image:url(oval.svg);mask-image:url(oval.svg)}.shape.pentagon{-webkit-mask-image:url(pentagon.svg);mask-image:url(pentagon.svg)}.shape.pill{-webkit-mask-image:url(pill.svg);mask-image:url(pill.svg)}.shape.pixel-circle{-webkit-mask-image:url(pixel-circle.svg);mask-image:url(pixel-circle.svg)}.shape.pixel-triangle{-webkit-mask-image:url(pixel-triangle.svg);mask-image:url(pixel-triangle.svg)}.shape.puffy{-webkit-mask-image:url(puffy.svg);mask-image:url(puffy.svg)}.shape.puffy-diamond{-webkit-mask-image:url(puffy-diamond.svg);mask-image:url(puffy-diamond.svg)}.shape.semicircle{-webkit-mask-image:url(semicircle.svg);mask-image:url(semicircle.svg)}.shape.sided-cookie4{-webkit-mask-image:url(sided-cookie4.svg);mask-image:url(sided-cookie4.svg)}.shape.sided-cookie6{-webkit-mask-image:url(sided-cookie6.svg);mask-image:url(sided-cookie6.svg)}.shape.sided-cookie7{-webkit-mask-image:url(sided-cookie7.svg);mask-image:url(sided-cookie7.svg)}.shape.sided-cookie9{-webkit-mask-image:url(sided-cookie9.svg);mask-image:url(sided-cookie9.svg)}.shape.sided-cookie12{-webkit-mask-image:url(sided-cookie12.svg);mask-image:url(sided-cookie12.svg)}.shape.slanted{-webkit-mask-image:url(slanted.svg);mask-image:url(slanted.svg)}.shape.soft-boom{-webkit-mask-image:url(soft-boom.svg);mask-image:url(soft-boom.svg)}.shape.soft-burst{-webkit-mask-image:url(soft-burst.svg);mask-image:url(soft-burst.svg)}.shape.square{-webkit-mask-image:url(square.svg);mask-image:url(square.svg)}.shape.sunny{-webkit-mask-image:url(sunny.svg);mask-image:url(sunny.svg)}.shape.triangle{-webkit-mask-image:url(triangle.svg);mask-image:url(triangle.svg)}.shape.very-sunny{-webkit-mask-image:url(very-sunny.svg);mask-image:url(very-sunny.svg)}.checkbox,.radio,.switch{--_size: 1.5rem;inline-size:auto;block-size:auto;line-height:normal;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center}.switch{direction:ltr}:is(.checkbox,.radio,.switch).small{--_size: 1rem}:is(.checkbox,.radio,.switch).large{--_size: 2rem}:is(.checkbox,.radio,.switch).extra{--_size: 2.5rem}:is(.checkbox,.radio)>input{inline-size:var(--_size);block-size:var(--_size);opacity:0}.switch>input{inline-size:3.25rem;block-size:2rem;opacity:0}:is(.checkbox,.radio,.switch)>span{display:inline-flex;align-items:center;color:var(--on-surface);font-size:.875rem}:is(.checkbox,.radio)>span:not(:empty){padding-inline-start:.25rem}:is(.checkbox,.radio,.switch)>span:before,:is(.checkbox,.radio,.switch)>span>i,:is(.checkbox,.radio)>span:after{--_size: inherit;content:"";inline-size:var(--_size);block-size:var(--_size);box-sizing:border-box;margin:0 auto;outline:none;color:var(--primary);position:absolute;inset:auto auto auto calc(var(--_size, 0) * -1);border-radius:50%;-webkit-user-select:none;user-select:none;z-index:1}[dir=rtl] :is(.checkbox,.radio)>span:before,[dir=rtl] :is(.checkbox,.radio)>span>i,[dir=rtl] :is(.checkbox,.radio)>span:after{--_size: inherit;inset:auto calc(var(--_size, 0) * -1) auto auto}.switch>span:before,.switch.icon>span>i{position:absolute;inset:50% auto auto 0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:all var(--speed2);font-size:calc(var(--_size, 0) - .5rem);-webkit-user-select:none;user-select:none;min-inline-size:var(--_size);min-block-size:var(--_size);content:"";color:var(--surface-variant);background-color:var(--outline)}.switch>span:before,.switch.icon>span>i{transform:translate(-3rem,-50%) scale(.6)}.switch.icon>span>i{transform:translate(-3rem,-50%) scale(1)}.checkbox>span:before{content:"check_box_outline_blank"}.checkbox>input:checked+span:before{content:"check_box";font-variation-settings:"FILL" 1}.checkbox>input:indeterminate+span:before{content:"indeterminate_check_box"}.radio>span:before{content:"radio_button_unchecked"}.radio>input:checked+span:before{content:"radio_button_checked"}:is(.radio,.checkbox,.switch).icon>span:before{content:""!important;font-variation-settings:unset!important}:is(.checkbox,.radio)>span:after{transition:all var(--speed1);background-color:currentColor;box-shadow:0 0 0 0 currentColor;opacity:0}:is(.checkbox,.radio):is(:hover)>input:not(:disabled)+span:after,:is(.checkbox,.radio)>input:not(:disabled):is(:focus)+span:after{box-shadow:0 0 0 .5rem currentColor;opacity:.1}.switch>input:not(:disabled):is(:focus,:hover)+span:before,.switch.icon>input:not(:disabled):is(:focus,:hover)+span>i{box-shadow:0 0 0 .5rem var(--active)}:is(.checkbox,.radio)>input:checked+span:before,:is(.checkbox,.radio).icon>input:checked+span>i{color:var(--primary)}.icon>input:checked+span>i:first-child,.icon>span>i:last-child{opacity:0}.icon>input:checked+span>i:last-child,.icon>span>i:first-child{opacity:1}.switch>input:checked+span:after{border:none;background-color:var(--primary)}.switch>input:checked+span:before,.switch.icon>input:checked+span>i{content:"check";color:var(--primary);background-color:var(--on-primary);transform:translate(-1.75rem,-50%) scale(1)}.switch>input:active:not(:disabled)+span:before,.switch.icon>input:active:not(:disabled)+span>i{transform:translate(-3rem,-50%) scale(1.2)}[dir=rtl] .switch>input:active:not(:disabled)+span:before,[dir=rtl] .switch.icon>input:active:not(:disabled)+span>i{transform:translate(-3rem,-50%) scale(-1.2)}.switch>input:active:checked:not(:disabled)+span:before,.switch.icon>input:active:checked:not(:disabled)+span>i{transform:translate(-1.75rem,-50%) scale(1.2)}[dir=rtl] .switch>input:active:checked:not(:disabled)+span:before,[dir=rtl] .switch.icon>input:active:checked:not(:disabled)+span>i{transform:translate(-1.75rem,-50%) scale(-1.2)}:is(.checkbox,.radio,.switch)>input:disabled+span{opacity:.5;cursor:not-allowed}.switch>span:after{content:"";position:absolute;inset:50% auto auto 0;background-color:var(--active);border:.125rem solid var(--outline);box-sizing:border-box;inline-size:3.25rem;block-size:2rem;border-radius:2rem;transform:translate(-3.25rem,-50%)}.field>:is(nav,.row){flex-grow:1;padding:0 1rem}.field.round>:is(nav,.row){flex-grow:1;padding:0 1.5rem}[dir=rtl] .switch{transform:scale(-1)}[dir=rtl] .switch>span:before,[dir=rtl] .switch.icon>span>i{transform:translate(-3rem,-50%) scale(-.6)}[dir=rtl] .switch.icon>span>i{transform:translate(-3rem,-50%) scale(-1)}[dir=rtl] .switch>input:checked+span:before,[dir=rtl] .switch.icon>input:checked+span>i{transform:translate(-1.75rem,-50%) scale(-1)}.switch>:focus-visible+span:after{outline:.125rem solid var(--primary);outline-offset:.25rem}:is(.checkbox,.radio)>:focus-visible+span:before{outline:.125rem solid var(--primary);outline-offset:.375rem}.slider{--_start: 0%;--_end: 0%;--_value1: "";--_value2: "";--_track: 1rem;--_thumb: max(2.5rem, calc(var(--_track, 0) + .5rem));display:flex;align-items:center!important;inline-size:auto;block-size:var(--_thumb);flex:none;direction:ltr;margin:0 1.25rem;color:var(--primary)}[dir=rtl] .slider{transform:scaleX(-1)}.slider.vertical{flex-direction:row!important;margin:.5rem auto!important;padding:50% 0;transform:rotate(-90deg);inline-size:100%}.slider.tiny{--_track: 1rem}.slider.small{--_track: 1.5rem}.slider.medium{--_track: 2.5rem}.slider.large{--_track: 3.5rem}.slider.extra{--_track: 6rem}.slider>input{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;outline:none;pointer-events:none;inline-size:100%;block-size:var(--_track);background:none;z-index:1;padding:0;margin:0;transform:rotate(0);touch-action:none}.slider>input:only-of-type{pointer-events:all}.slider>input~input{position:absolute}.slider>input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;outline:none;pointer-events:all;block-size:var(--_thumb);inline-size:.25rem;border-radius:.25rem;background:currentColor;cursor:grab;margin:0;z-index:1}.slider>input::-webkit-slider-thumb:active{cursor:grabbing}.slider>input::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;outline:none;pointer-events:all;block-size:2.75rem;inline-size:.25rem;border-radius:.25rem;background:var(--primary);cursor:grab;margin:0}.slider>input::-moz-range-thumb:active{cursor:grabbing}.slider>input:not(:disabled):is(:focus)::-webkit-slider-thumb{transform:scaleX(.6)}.slider>input:not(:disabled):is(:focus)::-moz-range-thumb{transform:scaleX(.6)}.slider>input:disabled{cursor:not-allowed;opacity:1}.slider>input:disabled::-webkit-slider-thumb{background:var(--outline);cursor:not-allowed}.slider>input:disabled::-moz-range-thumb{background:var(--outline);cursor:not-allowed}.slider>input:disabled~span:not([class]){background:var(--outline)}.slider>span:not([class]){position:absolute;block-size:var(--_track);border-radius:1rem 0 0 1rem;background:currentColor;color:currentColor;z-index:0;inset:calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + .5rem) auto var(--_start)}.slider>input[type=range]+input[type=range]~span:not([class]){border-radius:0;inset:calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + .5rem) auto calc(var(--_start) + .5rem)}.field>.slider{inline-size:100%}.slider:before{content:"";position:absolute;inline-size:100%;block-size:var(--_track);border-radius:1rem;background:var(--active);clip-path:polygon(calc(var(--_start, 0) - .5rem) 0,0 0,0 100%,calc(var(--_start, 0) - .5rem) 100%,calc(var(--_start, 0) - .5rem) 0,calc(100% - var(--_end, 0) + .5rem) 0,100% 0,100% 100%,calc(100% - var(--_end, 0) + .5rem) 100%,calc(100% - var(--_end, 0) + .5rem) 0)}.slider:has(>[disabled]):before{background:var(--active)}.slider:has([disabled]){opacity:.62}.slider>span>i{position:absolute;block-size:auto;inset:0 auto 0 .5rem;color:var(--inverse-primary);z-index:1}.slider:not(.medium,.large,.extra)>span>i{display:none}.slider.vertical>i{transform:rotate(90deg)}.slider>.tooltip{visibility:hidden!important;opacity:0!important;inset:0 auto auto calc(100% - var(--_end, 0));border-radius:2rem;transition:top var(--speed2) ease,opacity var(--speed2) ease;transform:translate(-50%,-25%)!important;padding:.75rem 1rem}.slider>.tooltip.bottom{inset:auto auto 0 calc(100% - var(--_end, 0));transition:bottom var(--speed2) ease,opacity var(--speed2) ease;transform:translate(-50%,25%)!important}[dir=rtl] .slider>.tooltip{transform:translate(-50%,-25%) scaleX(-1)!important}[dir=rtl] .slider>.tooltip.bottom{transform:translate(-50%,25%) scaleX(-1)!important}.slider>.tooltip+.tooltip{inset:.25rem calc(100% - var(--_start, 0)) auto auto;transform:translate(50%,-25%)!important}.slider>.tooltip+.tooltip.bottom{inset:auto calc(100% - var(--_start, 0)) -.25rem auto;transform:translate(50%,25%)!important}[dir=rtl] .slider>.tooltip+.tooltip{transform:translate(50%,-25%) scaleX(-1)!important}[dir=rtl] .slider>.tooltip+.tooltip.bottom{transform:translate(50%,25%) scaleX(-1)!important}.slider>.tooltip:before{content:var(--_value1)}.slider>.tooltip+.tooltip:before{content:var(--_value2)}.slider>:focus~.tooltip{inset-block:-1rem auto;opacity:1!important;visibility:visible!important}.slider>:focus~.tooltip.bottom{inset-block:auto -1rem}.slider.vertical>.tooltip{inset-block:auto;block-size:2.5rem;inline-size:2.5rem;margin-block:calc(-1 * var(--_thumb, 0)) 0!important;transform:rotate(90deg) translate(-75%,50%)!important}.slider.vertical>.tooltip.bottom{inset-block:auto;margin-block:0 calc(-1 * var(--_thumb, 0))!important;transform:rotate(90deg) translate(75%,50%)!important}.slider.vertical>.tooltip+.tooltip{transform:rotate(90deg) translate(-75%,-50%)!important}.slider.vertical>.tooltip+.tooltip.bottom{transform:rotate(90deg) translate(75%,-50%)!important}:is(nav,.row,.field)>.slider:not(.circle,.small,.medium,.large){flex:auto}.slider.max,.slider.max.vertical,.slider.max>input,.slider.max.vertical>input{all:unset;margin:0!important;position:absolute;color:var(--primary);top:0;right:0;bottom:0;left:0;border-radius:inherit;overflow:hidden;z-index:2;cursor:grab;inline-size:100%;block-size:100%}.slider.max:before{display:none}.slider.max.vertical>input{writing-mode:vertical-lr;transform:rotate(-180deg)}.slider.max>input::-webkit-slider-thumb{opacity:0;inline-size:1rem;block-size:100vh;transform:none!important}.slider.max>input::-moz-range-thumb{opacity:0;inline-size:1rem;block-size:100vh;transform:none!important}.slider.max>span:not([class]){block-size:auto!important;inset:0 var(--_end) 0 var(--_start);background:currentcolor;color:inherit;border-radius:0}.slider.max.vertical>span:not([class]){inset:var(--_end) 0 var(--_start) 0}.slider>input:focus-visible::-webkit-slider-thumb{outline:.1875rem solid var(--primary);outline-offset:.25rem}.slider>input:focus-visible::-moz-range-thumb{outline:.1875rem solid var(--primary);outline-offset:.25rem}.slider.max>input:focus-visible{outline:.1875rem solid var(--primary);outline-offset:-.125rem}@media(pointer:coarse){.slider>:hover~.tooltip{inset-block:-1rem auto!important;opacity:1!important;visibility:visible!important}.slider>:hover~.tooltip.bottom{inset-block:auto -1rem!important}}.snackbar{position:fixed;inset:auto auto 6rem 50%;inline-size:80%;block-size:auto;z-index:200;visibility:hidden;display:flex;box-shadow:var(--elevate2);color:var(--inverse-on-surface);background-color:var(--inverse-surface);padding:1rem;cursor:pointer;text-align:start;align-items:center;border-radius:.25rem;gap:.5rem;transition:all var(--speed2);transform:translate(-50%,1rem);opacity:0}.snackbar.top{inset:6rem auto auto 50%}.snackbar:is(.active){visibility:visible;transform:translate(-50%);opacity:1}.snackbar:popover-open{visibility:visible;transform:translate(-50%);opacity:1}.snackbar>.max{flex:auto}@media only screen and (min-width:993px){.snackbar{inline-size:40%}}table{inline-size:100%;border-spacing:0;font-size:.875rem;text-align:start}.scroll>table,table :is(thead,tbody,tfoot,tr,th,td){background-color:inherit;color:inherit}:is(th,td){inline-size:auto;text-align:inherit;padding:.5rem;border-radius:0}:is(th,td)>*{vertical-align:middle}table.border>tbody>tr:not(:last-child)>td,thead>tr>th{border-block-end:.0625rem solid var(--outline)}tfoot>tr>th{border-block-start:.0625rem solid var(--outline)}table.stripes>tbody>tr:nth-child(odd){background-color:var(--active)}table.no-space :is(th,td){padding:0}table.medium-space :is(th,td){padding:.75rem}table.large-space :is(th,td){padding:1rem}table>.fixed,th.fixed{position:sticky;z-index:1;inset-block-start:0}tfoot.fixed,tfoot th.fixed{inset-block-end:0}:is(td,th).min{inline-size:.1%;white-space:nowrap}.tabs{display:flex;white-space:nowrap;border-block-end:.0625rem solid var(--surface-variant);border-radius:0}.tabs:not(.left-align,.right-align,.center-align){justify-content:space-around}.tabs>a{display:flex;font-size:.875rem;font-weight:500;color:var(--on-surface-variant);padding:.5rem 1rem;text-align:center;min-block-size:3rem;inline-size:100%;gap:.25rem}.tabs.small>a{min-block-size:2rem}.tabs.large>a{min-block-size:4rem}.tabs>a.active,.tabs>a.active>i{color:var(--primary)}.tabs>a.active:before{content:"";position:absolute;inset:auto 0 0 0;block-size:.125rem;background-color:var(--primary)}.tabs.min>a.active:before{margin:0 auto;max-inline-size:min(100%,4rem)}.tabs:is(.left-align,.center-align,.right-align)>a{inline-size:auto}.tooltip{--_space: -.5rem;visibility:hidden;display:flex;align-items:center;justify-content:center;gap:.5rem;background-color:var(--inverse-surface);color:var(--inverse-on-surface);font-size:.75rem;text-align:center;border-radius:.25rem;padding:.5rem;position:absolute;z-index:200;inset:0 auto auto 50%;inline-size:auto;white-space:nowrap;font-weight:500;opacity:0;transition:all var(--speed2);line-height:normal;transform:translate(-50%,-100%) scale(.9)}.tooltip:not(.max):hover{visibility:hidden;opacity:0}.tooltip.left{inset:50% auto auto 0;transform:translate(-100%,-50%) scale(.9)}.tooltip.right{inset:50% 0 auto auto;transform:translate(100%,-50%) scale(.9)}.tooltip.bottom{inset:auto auto 0 50%;transform:translate(-50%,100%) scale(.9)}.tooltip.small{inline-size:8rem;white-space:normal}.tooltip.medium{inline-size:12rem;white-space:normal}.tooltip.large{inline-size:16rem;white-space:normal}:hover>.tooltip{visibility:visible;opacity:1;transform:translate(-50%,-100%) scale(1)}:hover>.tooltip.left{transform:translate(-100%,-50%) scale(1)}:hover>.tooltip.right{transform:translate(100%,-50%) scale(1)}:hover>.tooltip.bottom{transform:translate(-50%,100%) scale(1)}.tooltip.no-space{--_space: 0}.tooltip.medium-space{--_space: -1rem}.tooltip.large-space{--_space: -1.5rem}.tooltip:not(.left,.right,.bottom){margin-block-start:var(--_space)!important}.tooltip.left,.tooltip.right{margin-inline:var(--_space)!important}.tooltip.bottom{margin-block-end:var(--_space)!important}menu:active~.tooltip,:is(button,.button):focus>menu~.tooltip,.field>:focus~menu~.tooltip{visibility:hidden}.slider>.tooltip{--_space: -1.25rem}.slider.vertical>.tooltip{--_space: -.75rem}.slider.vertical>.tooltip:is(.left,.right){--_space: -.5rem}.tooltip.max{display:block;font-size:inherit;white-space:normal;text-align:start;inline-size:20rem;border-radius:.5rem;padding:1rem;box-shadow:var(--elevate2)}.transparent{background-color:transparent!important;box-shadow:none!important;color:inherit!important}.primary{background-color:var(--primary)!important;color:var(--on-primary)!important}.primary-text{color:var(--primary)!important}.primary-border{border-color:var(--primary)!important}.primary-container{background-color:var(--primary-container)!important;color:var(--on-primary-container)!important}.secondary{background-color:var(--secondary)!important;color:var(--on-secondary)!important}.secondary-text{color:var(--secondary)!important}.secondary-border{border-color:var(--secondary)!important}.secondary-container{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}.tertiary{background-color:var(--tertiary)!important;color:var(--on-tertiary)!important}.tertiary-text{color:var(--tertiary)!important}.tertiary-border{border-color:var(--tertiary)!important}.tertiary-container{background-color:var(--tertiary-container)!important;color:var(--on-tertiary-container)!important}.error{background-color:var(--error)!important;color:var(--on-error)!important}.error-text{color:var(--error)!important}.error-border{border-color:var(--error)!important}.error-container{background-color:var(--error-container)!important;color:var(--on-error-container)!important}.background{background-color:var(--background)!important;color:var(--on-background)!important}.surface,.surface-dim,.surface-bright,.surface-container-lowest,.surface-container-low,.surface-container,.surface-container-high,.surface-container-highest{background-color:var(--surface)!important;color:var(--on-surface)!important}.surface-variant{background-color:var(--surface-variant)!important;color:var(--on-surface-variant)!important}.inverse-surface{background-color:var(--inverse-surface);color:var(--inverse-on-surface)}.inverse-primary{background-color:var(--inverse-primary);color:var(--primary)}.inverse-primary-text{color:var(--inverse-primary)!important}.inverse-primary-border{border-color:var(--inverse-primary)!important}.surface-dim{background-color:var(--surface-dim)!important}.surface-bright{background-color:var(--surface-bright)!important}.surface-container-lowest{background-color:var(--surface-container-lowest)!important}.surface-container{background-color:var(--surface-container)!important}.surface-container-high{background-color:var(--surface-container-high)!important}.surface-container-highest{background-color:var(--surface-container-highest)!important}.surface-container-low{background-color:var(--surface-container-low)!important}.black{background-color:#000!important}.black-border{border-color:#000!important}.black-text{color:#000!important}.white{background-color:#fff!important}.white-border{border-color:#fff!important}.white-text{color:#fff!important}.transparent-border{border-color:transparent!important}.transparent-text{color:transparent!important}.fill:not(i){background-color:var(--surface-variant)!important;color:var(--on-surface-variant)!important}nav.primary-container>button,:is(nav,menu).primary>:is(button,a,li).active{background-color:var(--primary-container)!important;color:var(--on-primary-container)!important}nav.primary>button,:is(nav,menu).primary-container>:is(button,a,li).active{background-color:var(--primary)!important;color:var(--on-primary)!important}nav.secondary-container>button,:is(nav,menu).secondary>:is(button,a,li).active{background-color:var(--secondary-container)!important;color:var(--on-secondary-container)!important}nav.secondary>button,:is(nav,menu).secondary-container>:is(button,a,li).active{background-color:var(--secondary)!important;color:var(--on-secondary)!important}nav.tertiary-container>button,:is(nav,menu).tertiary>:is(button,a,li).active{background-color:var(--tertiary-container)!important;color:var(--on-tertiary-container)!important}nav.tertiary>button,:is(nav,menu).tertiary-container>:is(button,a,li).active{background-color:var(--tertiary)!important;color:var(--on-tertiary)!important}.red,.red6{background-color:#f44336!important}.red-border{border-color:#f44336!important}.red-text{color:#f44336!important}.red1{background-color:#ffebee!important}.red2{background-color:#ffcdd2!important}.red3{background-color:#ef9a9a!important}.red4{background-color:#e57373!important}.red5{background-color:#ef5350!important}.red7{background-color:#e53935!important}.red8{background-color:#d32f2f!important}.red9{background-color:#c62828!important}.red10{background-color:#b71c1c!important}.pink,.pink6{background-color:#e91e63!important}.pink-border{border-color:#e91e63!important}.pink-text{color:#e91e63!important}.pink1{background-color:#fce4ec!important}.pink2{background-color:#f8bbd0!important}.pink3{background-color:#f48fb1!important}.pink4{background-color:#f06292!important}.pink5{background-color:#ec407a!important}.pink7{background-color:#d81b60!important}.pink8{background-color:#c2185b!important}.pink9{background-color:#ad1457!important}.pink10{background-color:#880e4f!important}.purple,.purple6{background-color:#9c27b0!important}.purple-border{border-color:#9c27b0!important}.purple-text{color:#9c27b0!important}.purple1{background-color:#f3e5f5!important}.purple2{background-color:#e1bee7!important}.purple3{background-color:#ce93d8!important}.purple4{background-color:#ba68c8!important}.purple5{background-color:#ab47bc!important}.purple7{background-color:#8e24aa!important}.purple8{background-color:#7b1fa2!important}.purple9{background-color:#6a1b9a!important}.purple10{background-color:#4a148c!important}.deep-purple,.deep-purple6{background-color:#673ab7!important}.deep-purple-border{border-color:#673ab7!important}.deep-purple-text{color:#673ab7!important}.deep-purple1{background-color:#ede7f6!important}.deep-purple2{background-color:#d1c4e9!important}.deep-purple3{background-color:#b39ddb!important}.deep-purple4{background-color:#9575cd!important}.deep-purple5{background-color:#7e57c2!important}.deep-purple7{background-color:#5e35b1!important}.deep-purple8{background-color:#512da8!important}.deep-purple9{background-color:#4527a0!important}.deep-purple10{background-color:#311b92!important}.indigo,.indigo6{background-color:#3f51b5!important}.indigo-border{border-color:#3f51b5!important}.indigo-text{color:#3f51b5!important}.indigo1{background-color:#e8eaf6!important}.indigo2{background-color:#c5cae9!important}.indigo3{background-color:#9fa8da!important}.indigo4{background-color:#7986cb!important}.indigo5{background-color:#5c6bc0!important}.indigo7{background-color:#3949ab!important}.indigo8{background-color:#303f9f!important}.indigo9{background-color:#283593!important}.indigo10{background-color:#1a237e!important}.blue,.blue6{background-color:#2196f3!important}.blue-border{border-color:#2196f3!important}.blue-text{color:#2196f3!important}.blue1{background-color:#e3f2fd!important}.blue2{background-color:#bbdefb!important}.blue3{background-color:#90caf9!important}.blue4{background-color:#64b5f6!important}.blue5{background-color:#42a5f5!important}.blue7{background-color:#1e88e5!important}.blue8{background-color:#1976d2!important}.blue9{background-color:#1565c0!important}.blue10{background-color:#0d47a1!important}.light-blue,.light-blue6{background-color:#03a9f4!important}.light-blue-border{border-color:#03a9f4!important}.light-blue-text{color:#03a9f4!important}.light-blue1{background-color:#e1f5fe!important}.light-blue2{background-color:#b3e5fc!important}.light-blue3{background-color:#81d4fa!important}.light-blue4{background-color:#4fc3f7!important}.light-blue5{background-color:#29b6f6!important}.light-blue7{background-color:#039be5!important}.light-blue8{background-color:#0288d1!important}.light-blue9{background-color:#0277bd!important}.light-blue10{background-color:#01579b!important}.cyan,.cyan6{background-color:#00bcd4!important}.cyan-border{border-color:#00bcd4!important}.cyan-text{color:#00bcd4!important}.cyan1{background-color:#e0f7fa!important}.cyan2{background-color:#b2ebf2!important}.cyan3{background-color:#80deea!important}.cyan4{background-color:#4dd0e1!important}.cyan5{background-color:#26c6da!important}.cyan7{background-color:#00acc1!important}.cyan8{background-color:#0097a7!important}.cyan9{background-color:#00838f!important}.cyan10{background-color:#006064!important}.teal,.teal6{background-color:#009688!important}.teal-border{border-color:#009688!important}.teal-text{color:#009688!important}.teal1{background-color:#e0f2f1!important}.teal2{background-color:#b2dfdb!important}.teal3{background-color:#80cbc4!important}.teal4{background-color:#4db6ac!important}.teal5{background-color:#26a69a!important}.teal7{background-color:#00897b!important}.teal8{background-color:#00796b!important}.teal9{background-color:#00695c!important}.teal10{background-color:#004d40!important}.green,.green6{background-color:#4caf50!important}.green-border{border-color:#4caf50!important}.green-text{color:#4caf50!important}.green1{background-color:#e8f5e9!important}.green2{background-color:#c8e6c9!important}.green3{background-color:#a5d6a7!important}.green4{background-color:#81c784!important}.green5{background-color:#66bb6a!important}.green7{background-color:#43a047!important}.green8{background-color:#388e3c!important}.green9{background-color:#2e7d32!important}.green10{background-color:#1b5e20!important}.light-green,.light-green6{background-color:#8bc34a!important}.light-green-border{border-color:#8bc34a!important}.light-green-text{color:#8bc34a!important}.light-green1{background-color:#f1f8e9!important}.light-green2{background-color:#dcedc8!important}.light-green3{background-color:#c5e1a5!important}.light-green4{background-color:#aed581!important}.light-green5{background-color:#9ccc65!important}.light-green7{background-color:#7cb342!important}.light-green8{background-color:#689f38!important}.light-green9{background-color:#558b2f!important}.light-green10{background-color:#33691e!important}.lime,.lime6{background-color:#cddc39!important}.lime-border{border-color:#cddc39!important}.lime-text{color:#cddc39!important}.lime1{background-color:#f9fbe7!important}.lime2{background-color:#f0f4c3!important}.lime3{background-color:#e6ee9c!important}.lime4{background-color:#dce775!important}.lime5{background-color:#d4e157!important}.lime7{background-color:#c0ca33!important}.lime8{background-color:#afb42b!important}.lime9{background-color:#9e9d24!important}.lime10{background-color:#827717!important}.yellow,.yellow6{background-color:#ffeb3b!important}.yellow-border{border-color:#ffeb3b!important}.yellow-text{color:#ffeb3b!important}.yellow1{background-color:#fffde7!important}.yellow2{background-color:#fff9c4!important}.yellow3{background-color:#fff59d!important}.yellow4{background-color:#fff176!important}.yellow5{background-color:#ffee58!important}.yellow7{background-color:#fdd835!important}.yellow8{background-color:#fbc02d!important}.yellow9{background-color:#f9a825!important}.yellow10{background-color:#f57f17!important}.amber,.amber6{background-color:#ffc107!important}.amber-border{border-color:#ffc107!important}.amber-text{color:#ffc107!important}.amber1{background-color:#fff8e1!important}.amber2{background-color:#ffecb3!important}.amber3{background-color:#ffe082!important}.amber4{background-color:#ffd54f!important}.amber5{background-color:#ffca28!important}.amber7{background-color:#ffb300!important}.amber8{background-color:#ffa000!important}.amber9{background-color:#ff8f00!important}.amber10{background-color:#ff6f00!important}.orange,.orange6{background-color:#ff9800!important}.orange-border{border-color:#ff9800!important}.orange-text{color:#ff9800!important}.orange1{background-color:#fff3e0!important}.orange2{background-color:#ffe0b2!important}.orange3{background-color:#ffcc80!important}.orange4{background-color:#ffb74d!important}.orange5{background-color:#ffa726!important}.orange7{background-color:#fb8c00!important}.orange8{background-color:#f57c00!important}.orange9{background-color:#ef6c00!important}.orange10{background-color:#e65100!important}.deep-orange,.deep-orange6{background-color:#ff5722!important}.deep-orange-border{border-color:#ff5722!important}.deep-orange-text{color:#ff5722!important}.deep-orange1{background-color:#fbe9e7!important}.deep-orange2{background-color:#ffccbc!important}.deep-orange3{background-color:#ffab91!important}.deep-orange4{background-color:#ff8a65!important}.deep-orange5{background-color:#ff7043!important}.deep-orange7{background-color:#f4511e!important}.deep-orange8{background-color:#e64a19!important}.deep-orange9{background-color:#d84315!important}.deep-orange10{background-color:#bf360c!important}.brown,.brown6{background-color:#795548!important}.brown-border{border-color:#795548!important}.brown-text{color:#795548!important}.brown1{background-color:#efebe9!important}.brown2{background-color:#d7ccc8!important}.brown3{background-color:#bcaaa4!important}.brown4{background-color:#a1887f!important}.brown5{background-color:#8d6e63!important}.brown7{background-color:#6d4c41!important}.brown8{background-color:#5d4037!important}.brown9{background-color:#4e342e!important}.brown10{background-color:#3e2723!important}.blue-grey,.blue-grey6{background-color:#607d8b!important}.blue-grey-border{border-color:#607d8b!important}.blue-grey-text{color:#607d8b!important}.blue-grey1{background-color:#eceff1!important}.blue-grey2{background-color:#cfd8dc!important}.blue-grey3{background-color:#b0bec5!important}.blue-grey4{background-color:#90a4ae!important}.blue-grey5{background-color:#78909c!important}.blue-grey7{background-color:#546e7a!important}.blue-grey8{background-color:#455a64!important}.blue-grey9{background-color:#37474f!important}.blue-grey10{background-color:#263238!important}.grey,.grey6{background-color:#9e9e9e!important}.grey-border{border-color:#9e9e9e!important}.grey-text{color:#9e9e9e!important}.grey1{background-color:#fafafa!important}.grey2{background-color:#f5f5f5!important}.grey3{background-color:#eee!important}.grey4{background-color:#e0e0e0!important}.grey5{background-color:#bdbdbd!important}.grey7{background-color:#757575!important}.grey8{background-color:#616161!important}.grey9{background-color:#424242!important}.grey10{background-color:#212121!important}
5
+
6
+
7
+ /* Khipu Design System Tokens & BeerCSS Variable Mappings */
8
+ /* Khipu Material Design 3 Brand Tokens
9
+ * Design system tokens extracted from Figma Make prototype
10
+ * Implements OKLch color system, Material Design 3 typography, and spacing system
11
+ */
12
+
13
+ /* ========================================
14
+ OKLch Color System (from Figma Make)
15
+ ======================================== */
16
+
17
+ :root {
18
+ /* === Primary Scale (Purple) === */
19
+ --kds-color-primary-50: oklch(96% 0.02 295);
20
+ --kds-color-primary-100: oklch(92% 0.04 295);
21
+ --kds-color-primary-200: oklch(84% 0.08 295);
22
+ --kds-color-primary-300: oklch(76% 0.12 295);
23
+ --kds-color-primary-400: oklch(68% 0.16 295);
24
+ --kds-color-primary-500: oklch(60% 0.20 295);
25
+ --kds-color-primary-600: oklch(52% 0.18 295);
26
+ --kds-color-primary-700: oklch(44% 0.16 295);
27
+ --kds-color-primary-800: oklch(36% 0.14 295);
28
+ --kds-color-primary-900: oklch(28% 0.12 295);
29
+
30
+ /* === Secondary Scale (Blue from Figma Make) === */
31
+ --kds-color-secondary-50: oklch(96% 0.02 240);
32
+ --kds-color-secondary-100: oklch(92% 0.04 240);
33
+ --kds-color-secondary-500: #3B82F6; /* Figma Make Blue */
34
+ --kds-color-secondary-900: oklch(32% 0.12 240);
35
+
36
+ /* === Semantic Colors === */
37
+ --kds-color-success: #10B981; /* Green (only for success/completed states) */
38
+ --kds-color-error: oklch(48% 0.20 28); /* Red #D32F2F */
39
+ --kds-color-warning: oklch(72% 0.18 90); /* Amber #ED6C02 */
40
+ --kds-color-info: oklch(60% 0.18 240); /* Blue #0288D1 */
41
+
42
+ /* === Alert/Validation Backgrounds === */
43
+ --kds-alert-info-bg: #EFF6FF; /* Light blue */
44
+ --kds-alert-warning-bg: #FFFBEB; /* Light amber */
45
+ --kds-alert-success-bg: #ECFDF5; /* Light green */
46
+ --kds-alert-error-bg: #FEF2F2; /* Light red */
47
+
48
+ /* === Surface Colors === */
49
+ --kds-surface-base: #FFFFFF;
50
+ --kds-surface-paper: #FFFFFF;
51
+ --kds-surface-elevated: oklch(98% 0.01 295);
52
+ --kds-surface-background: #F5F6FA; /* Main background from Figma Make */
53
+
54
+ /* === Border Colors === */
55
+ --kds-border-light: #DDD;
56
+ --kds-border-medium: #999;
57
+ --kds-border-dark: #666;
58
+
59
+ /* === Typography Scale (Material Design 3) === */
60
+ --kds-font-family-primary: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
61
+
62
+ --kds-font-size-xs: 0.75rem; /* 12px */
63
+ --kds-font-size-sm: 0.875rem; /* 14px */
64
+ --kds-font-size-base: 1rem; /* 16px */
65
+ --kds-font-size-lg: 1.125rem; /* 18px */
66
+ --kds-font-size-xl: 1.25rem; /* 20px */
67
+ --kds-font-size-2xl: 1.5rem; /* 24px */
68
+ --kds-font-size-3xl: 2rem; /* 32px */
69
+ --kds-font-size-4xl: 3rem; /* 48px */
70
+
71
+ --kds-font-weight-regular: 400;
72
+ --kds-font-weight-medium: 500;
73
+ --kds-font-weight-semibold: 600;
74
+ --kds-font-weight-bold: 700;
75
+
76
+ /* === Spacing System (4px base grid) === */
77
+ --kds-spacing-1: 4px;
78
+ --kds-spacing-2: 8px;
79
+ --kds-spacing-3: 12px;
80
+ --kds-spacing-4: 16px;
81
+ --kds-spacing-5: 20px;
82
+ --kds-spacing-6: 24px;
83
+ --kds-spacing-8: 32px;
84
+ --kds-spacing-10: 40px;
85
+ --kds-spacing-12: 48px;
86
+ --kds-spacing-16: 64px;
87
+ --kds-spacing-20: 80px;
88
+
89
+ /* === Shadows (Material Design 3 Elevation) === */
90
+ --kds-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
91
+ --kds-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
92
+ --kds-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
93
+ --kds-shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
94
+ --kds-shadow-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
95
+ --kds-shadow-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
96
+ --kds-shadow-elevation-3: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
97
+ --kds-shadow-elevation-4: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
98
+
99
+ /* === Border Radius === */
100
+ --kds-radius-none: 0;
101
+ --kds-radius-sm: 4px;
102
+ --kds-radius-md: 8px;
103
+ --kds-radius-lg: 12px;
104
+ --kds-radius-xl: 16px;
105
+ --kds-radius-2xl: 20px;
106
+ --kds-radius-full: 9999px;
107
+
108
+ /* ========================================
109
+ Map KDS Tokens to BeerCSS Variables
110
+ ======================================== */
111
+
112
+ /* Keep Khipu Purple as primary brand color */
113
+ --primary: var(--kds-color-primary-500); /* Purple - Khipu brand */
114
+ --on-primary: #FFFFFF;
115
+ --primary-container: var(--kds-color-primary-100);
116
+ --on-primary-container: var(--kds-color-primary-900);
117
+
118
+ /* Use Figma Make Blue as secondary (call-to-action color) */
119
+ --secondary: var(--kds-color-secondary-500); /* Blue #3B82F6 - CTA buttons */
120
+ --on-secondary: #FFFFFF;
121
+ --secondary-container: var(--kds-color-secondary-100);
122
+ --on-secondary-container: var(--kds-color-secondary-900);
123
+
124
+ /* Map semantic colors */
125
+ --success: var(--kds-color-success);
126
+ --error: var(--kds-color-error);
127
+ --warning: var(--kds-color-warning);
128
+ --info: var(--kds-color-info);
129
+
130
+ /* Background and surface colors */
131
+ --surface: var(--kds-surface-paper);
132
+ --on-surface: oklch(20% 0 0);
133
+ --surface-variant: var(--kds-surface-elevated);
134
+ --surface-container: var(--kds-surface-base);
135
+
136
+ /* Legacy Khipu color aliases (for backward compatibility) */
137
+ --khipu-primary: var(--kds-color-primary-500);
138
+ --khipu-primary-dark: var(--kds-color-primary-700);
139
+ --khipu-primary-light: var(--kds-color-primary-300);
140
+ --khipu-secondary: var(--kds-color-secondary-500);
141
+ --khipu-accent: #FF5722;
142
+
143
+ /* ========================================
144
+ ONBOARDING COMPONENTS TOKENS
145
+ ======================================== */
146
+
147
+ /* File Upload States */
148
+ --kds-upload-zone-bg: #F9FAFB; /* gray-50 */
149
+ --kds-upload-zone-border: #D1D5DB; /* gray-300 */
150
+ --kds-upload-zone-border-hover: #3B82F6; /* blue-500 */
151
+ --kds-upload-zone-border-drag: #8347AD; /* primary-500 (purple) */
152
+ --kds-upload-zone-border-error: var(--kds-color-error);
153
+ --kds-upload-zone-border-success: var(--kds-color-success);
154
+ --kds-upload-item-bg: #FFFFFF;
155
+ --kds-upload-item-border: #E5E7EB; /* gray-200 */
156
+
157
+ /* OTP Input */
158
+ --kds-otp-digit-size: 56px;
159
+ --kds-otp-digit-height: 64px;
160
+ --kds-otp-digit-border: #D1D5DB;
161
+ --kds-otp-digit-border-focus: #3B82F6;
162
+ --kds-otp-digit-bg: #FFFFFF;
163
+ --kds-otp-digit-bg-filled: #F9FAFB;
164
+
165
+ /* KYC Blocking Modal */
166
+ --kds-kyc-block-bg: oklch(96% 0.02 60); /* Amber-50 */
167
+ --kds-kyc-block-border: oklch(88% 0.08 60); /* Amber-200 */
168
+ --kds-kyc-block-text: oklch(40% 0.12 60); /* Amber-800 */
169
+ --kds-kyc-block-icon: oklch(60% 0.15 60); /* Amber-600 */
170
+
171
+ /* Welcome Gradient */
172
+ --kds-welcome-gradient-start: #3B82F6; /* blue-500 */
173
+ --kds-welcome-gradient-end: #1D4ED8; /* blue-700 */
174
+
175
+ /* Bank Selector */
176
+ --kds-bank-item-border: #E5E7EB;
177
+ --kds-bank-item-border-hover: #D1D5DB;
178
+ --kds-bank-item-border-selected: #3B82F6;
179
+ --kds-bank-item-bg-selected: #EFF6FF; /* blue-50 */
180
+ --kds-bank-item-bg-hover: #F9FAFB;
181
+
182
+ /* Signature Pad */
183
+ --kds-signature-border: #D1D5DB;
184
+ --kds-signature-bg: #FFFFFF;
185
+ --kds-signature-line-color: #000000;
186
+
187
+ /* Contract Accordion */
188
+ --kds-accordion-border: #E5E7EB;
189
+ --kds-accordion-bg: #F9FAFB;
190
+ --kds-accordion-bg-open: #FFFFFF;
191
+ --kds-accordion-header-bg: #F3F4F6;
192
+
193
+ /* Onboarding Container */
194
+ --kds-onboarding-max-width: 800px;
195
+ --kds-onboarding-padding: var(--kds-spacing-6);
196
+ --kds-onboarding-gap: var(--kds-spacing-6);
197
+ }
198
+
199
+ /* ========================================
200
+ Body Layout (Sticky Footer) - Figma Make Style
201
+ ======================================== */
202
+ html, body {
203
+ display: flex;
204
+ flex-direction: column;
205
+ min-height: 100vh;
206
+ margin: 0;
207
+ background: var(--kds-surface-background); /* Light gray background */
208
+ }
209
+
210
+ main {
211
+ flex: 1 0 auto;
212
+ padding: 0; /* Remove default padding for Figma Make style */
213
+ }
214
+
215
+ footer {
216
+ flex-shrink: 0;
217
+ margin-top: auto;
218
+ }
219
+
220
+
221
+ /* Khipu Custom Components */
222
+ /* Khipu Custom Components for BeerCSS
223
+ * Custom Material Design 3 components extracted from Figma Make prototype
224
+ * Implements: Cards, Stepper, Alerts, Forms, Typography utilities
225
+ */
226
+
227
+ /* ========================================
228
+ Button Overrides (Figma Make Style)
229
+ ======================================== */
230
+
231
+ /* ========================================
232
+ KHIPU BUTTON SYSTEM
233
+ Custom button components - don't modify BeerCSS classes
234
+ ======================================== */
235
+
236
+ /* Base button - use element selector for higher specificity */
237
+ button.kds-btn,
238
+ a.kds-btn {
239
+ display: inline-flex;
240
+ align-items: center;
241
+ justify-content: center;
242
+ gap: 8px;
243
+ padding: 12px 24px;
244
+ font-size: 16px;
245
+ font-weight: 600;
246
+ line-height: 1;
247
+ border-radius: 8px;
248
+ cursor: pointer;
249
+ transition: all 0.2s ease;
250
+ box-sizing: border-box;
251
+ min-height: 48px;
252
+ height: 48px;
253
+ vertical-align: middle;
254
+ }
255
+
256
+ button.kds-btn:disabled,
257
+ a.kds-btn:disabled {
258
+ opacity: 0.5;
259
+ cursor: not-allowed;
260
+ pointer-events: none;
261
+ }
262
+
263
+ /* Primary button - Khipu purple (Figma Make) */
264
+ button.kds-btn-primary,
265
+ a.kds-btn-primary {
266
+ background: var(--primary);
267
+ color: white;
268
+ border: none;
269
+ }
270
+
271
+ button.kds-btn-primary:hover:not(:disabled),
272
+ a.kds-btn-primary:hover:not(:disabled) {
273
+ opacity: 0.9;
274
+ }
275
+
276
+ /* Secondary button - Blue CTA (Figma Make) */
277
+ button.kds-btn-secondary,
278
+ a.kds-btn-secondary {
279
+ background: #3B82F6;
280
+ color: white;
281
+ border: none;
282
+ }
283
+
284
+ button.kds-btn-secondary:hover:not(:disabled),
285
+ a.kds-btn-secondary:hover:not(:disabled) {
286
+ background: #2563EB;
287
+ box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
288
+ }
289
+
290
+ /* Outlined button (Figma Make) */
291
+ button.kds-btn-outlined,
292
+ a.kds-btn-outlined {
293
+ background: transparent;
294
+ color: var(--primary);
295
+ border-color: var(--kds-border-medium);
296
+ }
297
+
298
+ button.kds-btn-outlined:hover:not(:disabled),
299
+ a.kds-btn-outlined:hover:not(:disabled) {
300
+ background: #F3F4F6;
301
+ border-color: var(--primary);
302
+ }
303
+
304
+ /* Outlined white - for dark backgrounds (Figma Make hero) */
305
+ button.kds-btn-outlined-white,
306
+ a.kds-btn-outlined-white {
307
+ background: white;
308
+ color: var(--primary);
309
+ border-color: white;
310
+ }
311
+
312
+ button.kds-btn-outlined-white:hover:not(:disabled),
313
+ a.kds-btn-outlined-white:hover:not(:disabled) {
314
+ opacity: 0.9;
315
+ }
316
+
317
+ /* Text button (Figma Make) */
318
+ button.kds-btn-text,
319
+ a.kds-btn-text {
320
+ background: transparent;
321
+ color: var(--primary);
322
+ border: none;
323
+ padding: 8px 16px;
324
+ min-height: auto;
325
+ height: auto;
326
+ }
327
+
328
+ button.kds-btn-text:hover:not(:disabled),
329
+ a.kds-btn-text:hover:not(:disabled) {
330
+ background: #EFF6FF;
331
+ }
332
+
333
+ /* Icon wrapper - control size via span container */
334
+ button.kds-btn > .kds-icon,
335
+ a.kds-btn > .kds-icon {
336
+ width: 20px;
337
+ height: 20px;
338
+ padding-top: 2px;
339
+ line-height: 1;
340
+ overflow: hidden;
341
+ flex-shrink: 0;
342
+ }
343
+
344
+ button.kds-btn > .kds-icon > i,
345
+ a.kds-btn > .kds-icon > i {
346
+ font-size: 17px;
347
+ line-height: 1;
348
+ }
349
+
350
+ /* ========================================
351
+ Card Components (from Figma Make)
352
+ ======================================== */
353
+
354
+ /* Base elevated card - EXACT from Figma Make */
355
+ .kds-card-elevated,
356
+ .khipu-card-elevated {
357
+ background: #FFFFFF;
358
+ border-radius: 16px;
359
+ padding: 32px;
360
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
361
+ transition: box-shadow 0.3s ease;
362
+ }
363
+
364
+ .kds-card-elevated:hover,
365
+ .khipu-card-elevated:hover {
366
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
367
+ }
368
+
369
+ /* Main content card (centered, max-width) */
370
+ .kds-card-main {
371
+ background: #FFFFFF;
372
+ border-radius: 16px;
373
+ padding: 32px;
374
+ max-width: 800px;
375
+ margin: 24px auto;
376
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
377
+ }
378
+
379
+ @media (max-width: 768px) {
380
+ .kds-card-elevated,
381
+ .khipu-card-elevated,
382
+ .kds-card-main {
383
+ padding: 24px;
384
+ border-radius: 12px;
385
+ }
386
+ }
387
+
388
+ @media (max-width: 480px) {
389
+ .kds-card-elevated,
390
+ .khipu-card-elevated,
391
+ .kds-card-main {
392
+ padding: 20px;
393
+ margin: 16px;
394
+ }
395
+ }
396
+
397
+ /* Selection card - EXACT from Figma Make StageSelector */
398
+ .kds-card-selector {
399
+ padding: 24px;
400
+ border-radius: 12px;
401
+ border: 2px solid #E5E7EB; /* gray-200 */
402
+ background: #FFFFFF;
403
+ transition: all 0.3s ease;
404
+ text-align: left;
405
+ cursor: pointer;
406
+ display: flex;
407
+ flex-direction: column;
408
+ }
409
+
410
+ .kds-card-selector:hover {
411
+ border-color: #D1D5DB; /* gray-300 */
412
+ }
413
+
414
+ .kds-card-selector.selected {
415
+ border-color: #3B82F6; /* blue-600 */
416
+ background: #EFF6FF; /* blue-50 */
417
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
418
+ }
419
+
420
+ /* Icon container */
421
+ .kds-card-selector-icon {
422
+ width: 48px;
423
+ height: 48px;
424
+ background: #DBEAFE; /* blue-100 */
425
+ border-radius: 8px;
426
+ display: flex;
427
+ align-items: center;
428
+ justify-content: center;
429
+ margin-bottom: 16px;
430
+ }
431
+
432
+ .kds-card-selector-icon i,
433
+ .kds-card-selector-icon svg {
434
+ width: 24px;
435
+ height: 24px;
436
+ color: #3B82F6; /* blue-600 */
437
+ }
438
+
439
+ /* Title */
440
+ .kds-card-selector-title {
441
+ font-weight: 600;
442
+ color: #111827; /* gray-900 */
443
+ margin-bottom: 8px;
444
+ font-size: 16px;
445
+ }
446
+
447
+ /* Description */
448
+ .kds-card-selector-description {
449
+ font-size: 14px;
450
+ color: #4B5563; /* gray-600 */
451
+ line-height: 1.5;
452
+ }
453
+
454
+ /* Selected state - visual feedback via border only */
455
+
456
+ /* Pricing/Plan card (from Figma Make StagePricingPlan) */
457
+ .kds-card-plan {
458
+ display: flex;
459
+ flex-direction: column;
460
+ gap: var(--kds-spacing-5);
461
+ padding: var(--kds-spacing-8);
462
+ border-radius: var(--kds-radius-lg);
463
+ border: 1px solid var(--kds-border-medium);
464
+ max-width: 365px;
465
+ background: var(--kds-surface-base);
466
+ transition: border-color 0.3s ease, background 0.3s ease;
467
+ }
468
+
469
+ .kds-card-plan.recommended {
470
+ border-color: var(--primary);
471
+ background: var(--primary-container);
472
+ }
473
+
474
+ .kds-card-plan .plan-price {
475
+ font-size: var(--kds-font-size-3xl);
476
+ font-weight: var(--kds-font-weight-bold);
477
+ color: var(--primary);
478
+ }
479
+
480
+ .kds-card-plan .plan-features {
481
+ list-style: none;
482
+ padding: 0;
483
+ margin: 0;
484
+ }
485
+
486
+ .kds-card-plan .plan-features li {
487
+ padding: var(--kds-spacing-2) 0;
488
+ display: flex;
489
+ align-items: center;
490
+ gap: var(--kds-spacing-2);
491
+ }
492
+
493
+ .kds-card-plan .plan-features li::before {
494
+ content: "✓";
495
+ color: var(--success);
496
+ font-weight: var(--kds-font-weight-bold);
497
+ }
498
+
499
+ /* Verification/Status card (from onboarding patterns) */
500
+ .kds-card-status {
501
+ display: flex;
502
+ align-items: center;
503
+ justify-content: space-between;
504
+ padding: 10px 20px;
505
+ min-height: 80px;
506
+ border-radius: 6px;
507
+ border: 1px solid var(--kds-border-light);
508
+ gap: var(--kds-spacing-4);
509
+ background: var(--kds-surface-base);
510
+ transition: background 0.2s ease;
511
+ }
512
+
513
+ .kds-card-status.muted {
514
+ border-color: transparent;
515
+ background: var(--kds-surface-elevated);
516
+ }
517
+
518
+ .kds-card-status .status-icon {
519
+ flex-shrink: 0;
520
+ font-size: 24px;
521
+ }
522
+
523
+ .kds-card-status .status-content {
524
+ flex: 1;
525
+ }
526
+
527
+ /* Card sections (header, body, footer) */
528
+ .kds-card-header {
529
+ padding-bottom: var(--kds-spacing-3);
530
+ border-bottom: 1px solid var(--kds-border-light);
531
+ margin-bottom: var(--kds-spacing-3);
532
+ }
533
+
534
+ .kds-card-header h2,
535
+ .kds-card-header h3 {
536
+ margin: 0;
537
+ font-weight: var(--kds-font-weight-bold);
538
+ }
539
+
540
+ .kds-card-body {
541
+ padding: 0;
542
+ margin-bottom: var(--kds-spacing-3);
543
+ }
544
+
545
+ .kds-card-footer {
546
+ padding-top: var(--kds-spacing-3);
547
+ border-top: 1px solid var(--kds-border-light);
548
+ margin-top: 0;
549
+ display: flex;
550
+ flex-direction: column;
551
+ gap: var(--kds-spacing-2);
552
+ }
553
+
554
+ .kds-card-footer button,
555
+ .kds-card-footer .button {
556
+ width: 100% !important;
557
+ }
558
+
559
+ /* Horizontal layout for desktop */
560
+ @media (min-width: 768px) {
561
+ .kds-card-footer {
562
+ flex-direction: row;
563
+ justify-content: flex-end;
564
+ }
565
+
566
+ .kds-card-footer button,
567
+ .kds-card-footer .button {
568
+ width: auto !important;
569
+ min-width: 120px;
570
+ }
571
+ }
572
+
573
+ /* Hero Section with gradient */
574
+ .khipu-hero {
575
+ background: linear-gradient(135deg, var(--khipu-primary) 0%, var(--khipu-primary-dark) 100%);
576
+ color: white;
577
+ padding: 64px 24px;
578
+ text-align: center;
579
+ border-radius: 0 0 24px 24px;
580
+ margin-bottom: 32px;
581
+ }
582
+
583
+ .khipu-hero h1 {
584
+ font-size: 3rem;
585
+ font-weight: 700;
586
+ margin-bottom: 16px;
587
+ }
588
+
589
+ .khipu-hero p {
590
+ font-size: 1.25rem;
591
+ opacity: 0.9;
592
+ }
593
+
594
+ /* ========================================
595
+ Layout & Spacing Utilities
596
+ ======================================== */
597
+
598
+ /* Grid patterns */
599
+ .kds-grid-2col {
600
+ display: grid;
601
+ grid-template-columns: 1fr;
602
+ gap: var(--kds-spacing-4);
603
+ }
604
+
605
+ @media (min-width: 768px) {
606
+ .kds-grid-2col {
607
+ grid-template-columns: 1fr 1fr;
608
+ }
609
+ }
610
+
611
+ .kds-grid-3col {
612
+ display: grid;
613
+ grid-template-columns: 1fr;
614
+ gap: var(--kds-spacing-4);
615
+ }
616
+
617
+ @media (min-width: 768px) {
618
+ .kds-grid-3col {
619
+ grid-template-columns: repeat(2, 1fr);
620
+ }
621
+ }
622
+
623
+ @media (min-width: 1024px) {
624
+ .kds-grid-3col {
625
+ grid-template-columns: repeat(3, 1fr);
626
+ }
627
+ }
628
+
629
+ .kds-grid-4col {
630
+ display: grid;
631
+ grid-template-columns: 1fr;
632
+ gap: var(--kds-spacing-4);
633
+ }
634
+
635
+ @media (min-width: 768px) {
636
+ .kds-grid-4col {
637
+ grid-template-columns: repeat(2, 1fr);
638
+ }
639
+ }
640
+
641
+ @media (min-width: 1024px) {
642
+ .kds-grid-4col {
643
+ grid-template-columns: repeat(4, 1fr);
644
+ }
645
+ }
646
+
647
+ /* Flex utilities */
648
+ .kds-flex {
649
+ display: flex;
650
+ }
651
+
652
+ .kds-flex-col {
653
+ flex-direction: column;
654
+ }
655
+
656
+ .kds-flex-row {
657
+ flex-direction: row;
658
+ }
659
+
660
+ .kds-justify-start {
661
+ justify-content: flex-start;
662
+ }
663
+
664
+ .kds-justify-center {
665
+ justify-content: center;
666
+ }
667
+
668
+ .kds-justify-end {
669
+ justify-content: flex-end;
670
+ }
671
+
672
+ .kds-justify-between {
673
+ justify-content: space-between;
674
+ }
675
+
676
+ .kds-items-start {
677
+ align-items: flex-start;
678
+ }
679
+
680
+ .kds-items-center {
681
+ align-items: center;
682
+ }
683
+
684
+ .kds-items-end {
685
+ align-items: flex-end;
686
+ }
687
+
688
+ /* Gap utilities */
689
+ .kds-gap-1 { gap: var(--kds-spacing-1); }
690
+ .kds-gap-2 { gap: var(--kds-spacing-2); }
691
+ .kds-gap-3 { gap: var(--kds-spacing-3); }
692
+ .kds-gap-4 { gap: var(--kds-spacing-4); }
693
+ .kds-gap-5 { gap: var(--kds-spacing-5); }
694
+ .kds-gap-6 { gap: var(--kds-spacing-6); }
695
+ .kds-gap-8 { gap: var(--kds-spacing-8); }
696
+
697
+ /* Spacing utilities - Margin */
698
+ .kds-m-0 { margin: 0; }
699
+ .kds-m-2 { margin: var(--kds-spacing-2); }
700
+ .kds-m-4 { margin: var(--kds-spacing-4); }
701
+ .kds-m-6 { margin: var(--kds-spacing-6); }
702
+ .kds-m-8 { margin: var(--kds-spacing-8); }
703
+
704
+ .kds-mt-0 { margin-top: 0; }
705
+ .kds-mt-2 { margin-top: var(--kds-spacing-2); }
706
+ .kds-mt-4 { margin-top: var(--kds-spacing-4); }
707
+ .kds-mt-6 { margin-top: var(--kds-spacing-6); }
708
+ .kds-mt-8 { margin-top: var(--kds-spacing-8); }
709
+
710
+ .kds-mb-0 { margin-bottom: 0; }
711
+ .kds-mb-2 { margin-bottom: var(--kds-spacing-2); }
712
+ .kds-mb-4 { margin-bottom: var(--kds-spacing-4); }
713
+ .kds-mb-6 { margin-bottom: var(--kds-spacing-6); }
714
+ .kds-mb-8 { margin-bottom: var(--kds-spacing-8); }
715
+
716
+ .kds-ml-0 { margin-left: 0; }
717
+ .kds-ml-2 { margin-left: var(--kds-spacing-2); }
718
+ .kds-ml-4 { margin-left: var(--kds-spacing-4); }
719
+
720
+ .kds-mr-0 { margin-right: 0; }
721
+ .kds-mr-2 { margin-right: var(--kds-spacing-2); }
722
+ .kds-mr-4 { margin-right: var(--kds-spacing-4); }
723
+
724
+ .kds-my-0 { margin-top: 0; margin-bottom: 0; }
725
+ .kds-my-2 { margin-top: var(--kds-spacing-2); margin-bottom: var(--kds-spacing-2); }
726
+ .kds-my-4 { margin-top: var(--kds-spacing-4); margin-bottom: var(--kds-spacing-4); }
727
+ .kds-my-6 { margin-top: var(--kds-spacing-6); margin-bottom: var(--kds-spacing-6); }
728
+ .kds-my-8 { margin-top: var(--kds-spacing-8); margin-bottom: var(--kds-spacing-8); }
729
+
730
+ .kds-mx-auto { margin-left: auto; margin-right: auto; }
731
+
732
+ /* Spacing utilities - Padding */
733
+ .kds-p-0 { padding: 0; }
734
+ .kds-p-2 { padding: var(--kds-spacing-2); }
735
+ .kds-p-4 { padding: var(--kds-spacing-4); }
736
+ .kds-p-6 { padding: var(--kds-spacing-6); }
737
+ .kds-p-8 { padding: var(--kds-spacing-8); }
738
+
739
+ .kds-pt-4 { padding-top: var(--kds-spacing-4); }
740
+ .kds-pt-6 { padding-top: var(--kds-spacing-6); }
741
+ .kds-pt-8 { padding-top: var(--kds-spacing-8); }
742
+
743
+ .kds-pb-4 { padding-bottom: var(--kds-spacing-4); }
744
+ .kds-pb-6 { padding-bottom: var(--kds-spacing-6); }
745
+ .kds-pb-8 { padding-bottom: var(--kds-spacing-8); }
746
+
747
+ .kds-px-4 { padding-left: var(--kds-spacing-4); padding-right: var(--kds-spacing-4); }
748
+ .kds-px-6 { padding-left: var(--kds-spacing-6); padding-right: var(--kds-spacing-6); }
749
+ .kds-px-8 { padding-left: var(--kds-spacing-8); padding-right: var(--kds-spacing-8); }
750
+
751
+ .kds-py-4 { padding-top: var(--kds-spacing-4); padding-bottom: var(--kds-spacing-4); }
752
+ .kds-py-6 { padding-top: var(--kds-spacing-6); padding-bottom: var(--kds-spacing-6); }
753
+ .kds-py-8 { padding-top: var(--kds-spacing-8); padding-bottom: var(--kds-spacing-8); }
754
+
755
+ /* Legacy spacing utilities (backward compatibility) */
756
+ .khipu-spacing-top {
757
+ margin-top: var(--kds-spacing-8);
758
+ }
759
+
760
+ .khipu-spacing-bottom {
761
+ margin-bottom: var(--kds-spacing-8);
762
+ }
763
+
764
+ .khipu-spacing-large {
765
+ margin: var(--kds-spacing-12) 0;
766
+ }
767
+
768
+ /* ========================================
769
+ Stepper Component (Multi-stage Progress Indicator)
770
+ EXACT match from Figma Make onboarding
771
+ ======================================== */
772
+
773
+ .kds-stepper {
774
+ display: flex;
775
+ justify-content: space-between;
776
+ align-items: flex-start;
777
+ gap: 0;
778
+ position: relative;
779
+ padding: 24px 0;
780
+ background: #FFFFFF;
781
+ border-bottom: 1px solid #E5E7EB;
782
+ }
783
+
784
+ /* Progress line connecting steps */
785
+ .kds-stepper::before {
786
+ content: "";
787
+ position: absolute;
788
+ left: 10%;
789
+ right: 10%;
790
+ top: 44px;
791
+ height: 2px;
792
+ background: #E5E7EB;
793
+ z-index: 0;
794
+ }
795
+
796
+ /* Individual step */
797
+ .kds-step {
798
+ flex: 1 1 0;
799
+ min-width: 0;
800
+ text-align: center;
801
+ position: relative;
802
+ display: flex;
803
+ flex-direction: column;
804
+ align-items: center;
805
+ }
806
+
807
+ /* Step indicator (circle) */
808
+ .kds-step-indicator {
809
+ width: 40px;
810
+ height: 40px;
811
+ border-radius: 50%;
812
+ margin: 0 auto;
813
+ background: #E5E7EB; /* Pending state - light gray */
814
+ position: relative;
815
+ z-index: 2;
816
+ transition: all 0.3s ease;
817
+ display: flex;
818
+ align-items: center;
819
+ justify-content: center;
820
+ color: #6B7280;
821
+ font-size: 0; /* Hide number by default */
822
+ font-weight: 600;
823
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
824
+ }
825
+
826
+ /* Step label */
827
+ .kds-step-label {
828
+ margin-top: 12px;
829
+ font-weight: 400;
830
+ color: #6B7280;
831
+ line-height: 1.25;
832
+ font-size: 14px;
833
+ transition: color 0.3s ease;
834
+ }
835
+
836
+ /* Step States */
837
+
838
+ /* Current step - Blue/Primary */
839
+ .kds-step.current .kds-step-indicator {
840
+ background: #3B82F6; /* Blue from Figma Make */
841
+ box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
842
+ }
843
+
844
+ .kds-step.current .kds-step-label {
845
+ color: #111827;
846
+ font-weight: 500;
847
+ }
848
+
849
+ /* Completed step - Green with checkmark */
850
+ .kds-step.completed .kds-step-indicator {
851
+ background: #10B981; /* Green from Figma Make */
852
+ box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
853
+ }
854
+
855
+ .kds-step.completed .kds-step-label {
856
+ color: #111827;
857
+ }
858
+
859
+ /* Checkmark for completed steps - Material Symbols icon */
860
+ .kds-step.completed .kds-step-indicator::after {
861
+ content: "check";
862
+ font-family: 'Material Symbols Outlined';
863
+ position: absolute;
864
+ color: white;
865
+ font-size: 24px;
866
+ font-weight: 400;
867
+ left: 50%;
868
+ top: 50%;
869
+ transform: translate(-50%, -50%);
870
+ line-height: 1;
871
+ }
872
+
873
+ /* Pending step */
874
+ .kds-step .kds-step-indicator {
875
+ background: #E5E7EB;
876
+ }
877
+
878
+ /* Responsive - Tablet */
879
+ @media (max-width: 768px) {
880
+ .kds-stepper {
881
+ padding: 24px 0;
882
+ }
883
+
884
+ .kds-step-indicator {
885
+ width: 44px;
886
+ height: 44px;
887
+ }
888
+
889
+ .kds-stepper::before {
890
+ top: 46px;
891
+ }
892
+
893
+ .kds-step-label {
894
+ font-size: 13px;
895
+ margin-top: 12px;
896
+ }
897
+
898
+ .kds-step.completed .kds-step-indicator::after {
899
+ font-size: 22px;
900
+ }
901
+ }
902
+
903
+ /* Responsive - Mobile */
904
+ @media (max-width: 480px) {
905
+ .kds-stepper {
906
+ padding: 16px 0;
907
+ }
908
+
909
+ .kds-step-indicator {
910
+ width: 36px;
911
+ height: 36px;
912
+ }
913
+
914
+ .kds-stepper::before {
915
+ top: 38px;
916
+ left: 15%;
917
+ right: 15%;
918
+ }
919
+
920
+ .kds-step-label {
921
+ font-size: 11px;
922
+ margin-top: 8px;
923
+ }
924
+
925
+ .kds-step.completed .kds-step-indicator::after {
926
+ font-size: 16px;
927
+ }
928
+ }
929
+
930
+ /* ========================================
931
+ Snackbar Positioning
932
+ ======================================== */
933
+
934
+ .snackbar {
935
+ position: fixed;
936
+ bottom: 24px;
937
+ left: 50%;
938
+ transform: translateX(-50%);
939
+ z-index: 9999;
940
+ min-width: 344px;
941
+ max-width: 672px;
942
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
943
+ }
944
+
945
+ /* ========================================
946
+ Navbar Customization
947
+ ======================================== */
948
+
949
+ nav.primary {
950
+ background: var(--khipu-primary);
951
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
952
+ position: relative;
953
+ z-index: 1000;
954
+ }
955
+
956
+ nav.primary a,
957
+ nav.primary button {
958
+ color: white;
959
+ }
960
+
961
+ /* ========================================
962
+ Drawer/Sidenav (Mobile Navigation)
963
+ ======================================== */
964
+
965
+ /* Left drawer hidden by default */
966
+ nav.drawer.left {
967
+ position: fixed;
968
+ top: 0;
969
+ left: 0;
970
+ bottom: 0;
971
+ width: 280px;
972
+ max-width: 80vw;
973
+ background: var(--surface-container, #FFFFFF);
974
+ box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
975
+ transform: translateX(-100%);
976
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
977
+ z-index: 1100;
978
+ overflow-y: auto;
979
+ display: flex;
980
+ flex-direction: column;
981
+ }
982
+
983
+ /* Show drawer when active */
984
+ nav.drawer.left.active {
985
+ transform: translateX(0);
986
+ }
987
+
988
+ /* Drawer overlay */
989
+ nav.drawer.left::before {
990
+ content: '';
991
+ position: fixed;
992
+ top: 0;
993
+ left: 0;
994
+ right: 0;
995
+ bottom: 0;
996
+ background: rgba(0, 0, 0, 0.5);
997
+ opacity: 0;
998
+ visibility: hidden;
999
+ transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
1000
+ visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1001
+ z-index: -1;
1002
+ pointer-events: none;
1003
+ }
1004
+
1005
+ /* Show overlay when drawer is active */
1006
+ nav.drawer.left.active::before {
1007
+ opacity: 1;
1008
+ visibility: visible;
1009
+ pointer-events: auto;
1010
+ }
1011
+
1012
+ /* Drawer header styling */
1013
+ nav.drawer header {
1014
+ padding: 16px;
1015
+ background: var(--primary-container, rgba(131, 71, 173, 0.1));
1016
+ border-bottom: 1px solid var(--outline-variant, rgba(0, 0, 0, 0.12));
1017
+ }
1018
+
1019
+ /* Drawer links */
1020
+ nav.drawer a {
1021
+ display: flex;
1022
+ align-items: center;
1023
+ padding: 12px 16px;
1024
+ color: var(--on-surface, rgba(0, 0, 0, 0.87));
1025
+ text-decoration: none;
1026
+ transition: background 0.2s ease;
1027
+ gap: 16px;
1028
+ }
1029
+
1030
+ nav.drawer a:hover {
1031
+ background: var(--surface-variant, rgba(0, 0, 0, 0.04));
1032
+ }
1033
+
1034
+ nav.drawer a i {
1035
+ font-size: 24px;
1036
+ color: var(--on-surface-variant, rgba(0, 0, 0, 0.60));
1037
+ }
1038
+
1039
+ nav.drawer .divider {
1040
+ height: 1px;
1041
+ background: var(--outline-variant, rgba(0, 0, 0, 0.12));
1042
+ margin: 8px 0;
1043
+ }
1044
+
1045
+ /* Hide menu toggle button on desktop */
1046
+ @media (min-width: 769px) {
1047
+ #menu-toggle {
1048
+ display: none;
1049
+ }
1050
+
1051
+ nav.drawer.left {
1052
+ display: none;
1053
+ }
1054
+ }
1055
+
1056
+ /* ========================================
1057
+ Footer Customization
1058
+ ======================================== */
1059
+
1060
+ footer.primary {
1061
+ background: var(--surface-container-high, #F5F5F5);
1062
+ padding: 32px 24px;
1063
+ margin-top: 48px;
1064
+ }
1065
+
1066
+ footer.primary h6 {
1067
+ color: var(--khipu-primary);
1068
+ font-weight: 600;
1069
+ margin-bottom: 16px;
1070
+ }
1071
+
1072
+ footer.primary a {
1073
+ color: var(--on-surface);
1074
+ text-decoration: none;
1075
+ display: block;
1076
+ padding: 4px 0;
1077
+ transition: color 0.2s ease;
1078
+ }
1079
+
1080
+ footer.primary a:hover {
1081
+ color: var(--khipu-primary);
1082
+ }
1083
+
1084
+ /* ========================================
1085
+ Form Inputs - EXACT from Figma Make
1086
+ ======================================== */
1087
+
1088
+ /* Form labels from Figma Make */
1089
+ .field label,
1090
+ .kds-form-label {
1091
+ font-size: 14px;
1092
+ font-weight: 500;
1093
+ color: #111827;
1094
+ margin-bottom: 8px;
1095
+ display: block;
1096
+ }
1097
+
1098
+ /* Input styling from Figma Make */
1099
+ .field input,
1100
+ .field textarea,
1101
+ .field select,
1102
+ input[type="text"],
1103
+ input[type="email"],
1104
+ input[type="password"],
1105
+ input[type="number"],
1106
+ input[type="tel"],
1107
+ input[type="url"],
1108
+ input[type="search"],
1109
+ textarea,
1110
+ select {
1111
+ border-radius: 8px !important;
1112
+ border: 1px solid #D1D5DB !important;
1113
+ padding: 12px 16px !important;
1114
+ font-size: 15px !important;
1115
+ color: #111827 !important;
1116
+ background: #FFFFFF !important;
1117
+ transition: all 0.2s ease !important;
1118
+ }
1119
+
1120
+ /* Placeholder styling */
1121
+ .field input::placeholder,
1122
+ .field textarea::placeholder,
1123
+ input::placeholder,
1124
+ textarea::placeholder {
1125
+ color: #9CA3AF !important;
1126
+ opacity: 1 !important;
1127
+ }
1128
+
1129
+ /* Focus state */
1130
+ .field input:focus,
1131
+ .field textarea:focus,
1132
+ .field select:focus,
1133
+ input:focus,
1134
+ textarea:focus,
1135
+ select:focus {
1136
+ outline: none !important;
1137
+ border-color: #3B82F6 !important;
1138
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
1139
+ }
1140
+
1141
+ /* Outlined inputs (default) */
1142
+ .field.border input,
1143
+ .field.border textarea,
1144
+ .field.border select {
1145
+ border-radius: 8px !important;
1146
+ }
1147
+
1148
+ /* Filled inputs */
1149
+ .field.fill input,
1150
+ .field.fill textarea,
1151
+ .field.fill select {
1152
+ border-radius: 8px !important;
1153
+ background: #F9FAFB !important;
1154
+ }
1155
+
1156
+ /* Round variant (only when explicitly requested) */
1157
+ .field.round input,
1158
+ .field.round textarea,
1159
+ .field.round select {
1160
+ border-radius: 28px !important;
1161
+ }
1162
+
1163
+ /* ========================================
1164
+ Form Validation States (from Figma Make patterns)
1165
+ Enhanced with Info, Warning, Success, Error states
1166
+ ======================================== */
1167
+
1168
+ /* Info state (blue) */
1169
+ .field.info input,
1170
+ .field.info textarea,
1171
+ .field.info select {
1172
+ border-color: var(--kds-color-info) !important;
1173
+ }
1174
+
1175
+ .field.info label {
1176
+ color: var(--kds-color-info) !important;
1177
+ }
1178
+
1179
+ .field .info-message {
1180
+ display: block;
1181
+ color: var(--kds-color-info);
1182
+ font-size: 0.75rem;
1183
+ margin-top: 4px;
1184
+ padding: 8px 12px;
1185
+ background: var(--kds-alert-info-bg);
1186
+ border-radius: var(--kds-radius-sm);
1187
+ border-left: 3px solid var(--kds-color-info);
1188
+ line-height: 1.4;
1189
+ }
1190
+
1191
+ /* Warning state (amber) */
1192
+ .field.warning input,
1193
+ .field.warning textarea,
1194
+ .field.warning select {
1195
+ border-color: var(--kds-color-warning) !important;
1196
+ }
1197
+
1198
+ .field.warning label {
1199
+ color: var(--kds-color-warning) !important;
1200
+ }
1201
+
1202
+ .field .warning-message {
1203
+ display: block;
1204
+ color: var(--kds-color-warning);
1205
+ font-size: 0.75rem;
1206
+ margin-top: 4px;
1207
+ padding: 8px 12px;
1208
+ background: var(--kds-alert-warning-bg);
1209
+ border-radius: var(--kds-radius-sm);
1210
+ border-left: 3px solid var(--kds-color-warning);
1211
+ line-height: 1.4;
1212
+ }
1213
+
1214
+ /* Valid/Success state (enhanced) */
1215
+ .field.valid input,
1216
+ .field.valid textarea,
1217
+ .field.valid select {
1218
+ border-color: var(--kds-color-success) !important;
1219
+ }
1220
+
1221
+ /* Success label color - more specific to override BeerCSS :focus + label primary color */
1222
+ .field.label.valid > label,
1223
+ .field.label.valid > input:focus + label,
1224
+ .field.label.valid > textarea:focus + label,
1225
+ .field.label.valid > select:focus + label,
1226
+ .field.label.valid > input:not(:focus) + label,
1227
+ .field.label.valid > textarea:not(:focus) + label,
1228
+ .field.label.valid > select:not(:focus) + label {
1229
+ color: var(--kds-color-success) !important;
1230
+ }
1231
+
1232
+ .field .success-message {
1233
+ display: block;
1234
+ color: var(--kds-color-success);
1235
+ font-size: 0.75rem;
1236
+ margin-top: 4px;
1237
+ padding: 8px 12px;
1238
+ background: var(--kds-alert-success-bg);
1239
+ border-radius: var(--kds-radius-sm);
1240
+ border-left: 3px solid var(--kds-color-success);
1241
+ line-height: 1.4;
1242
+ }
1243
+
1244
+ /* Invalid/Error state (enhanced) */
1245
+ .field.invalid input,
1246
+ .field.invalid textarea,
1247
+ .field.invalid select {
1248
+ border-color: var(--kds-color-error) !important;
1249
+ color: var(--on-surface, rgba(0, 0, 0, 0.87)) !important;
1250
+ }
1251
+
1252
+ .field.invalid input:focus,
1253
+ .field.invalid textarea:focus,
1254
+ .field.invalid select:focus {
1255
+ border-color: var(--kds-color-error) !important;
1256
+ outline-color: var(--kds-color-error) !important;
1257
+ }
1258
+
1259
+ /* Invalid label */
1260
+ .field.invalid label {
1261
+ color: var(--kds-color-error) !important;
1262
+ }
1263
+
1264
+ /* Error message styling (enhanced) */
1265
+ .field .error,
1266
+ .field span.error {
1267
+ display: block;
1268
+ color: var(--kds-color-error);
1269
+ font-size: 0.75rem;
1270
+ margin-top: 4px;
1271
+ padding: 8px 12px;
1272
+ background: var(--kds-alert-error-bg);
1273
+ border-radius: var(--kds-radius-sm);
1274
+ border-left: 3px solid var(--kds-color-error);
1275
+ font-weight: 400;
1276
+ line-height: 1.4;
1277
+ }
1278
+
1279
+ /* Helper text (neutral) */
1280
+ .field .helper,
1281
+ .field span.helper {
1282
+ display: block;
1283
+ color: var(--on-surface-variant, rgba(0, 0, 0, 0.60));
1284
+ font-size: 0.75rem;
1285
+ margin-top: 4px;
1286
+ padding: 4px 12px;
1287
+ line-height: 1.4;
1288
+ }
1289
+
1290
+ /* ========================================
1291
+ Alert/Banner Components
1292
+ From Figma Make: KYC blocking patterns, info messages
1293
+ ======================================== */
1294
+
1295
+ .kds-alert {
1296
+ display: flex;
1297
+ gap: var(--kds-spacing-3);
1298
+ padding: var(--kds-spacing-4);
1299
+ border-radius: var(--kds-radius-md);
1300
+ border: 1px solid;
1301
+ margin: var(--kds-spacing-4) 0;
1302
+ align-items: flex-start;
1303
+ }
1304
+
1305
+ .kds-alert-icon {
1306
+ flex-shrink: 0;
1307
+ font-size: 20px;
1308
+ margin-top: 2px;
1309
+ }
1310
+
1311
+ .kds-alert-content {
1312
+ flex: 1;
1313
+ }
1314
+
1315
+ .kds-alert-title {
1316
+ font-weight: var(--kds-font-weight-semibold);
1317
+ margin-bottom: var(--kds-spacing-2);
1318
+ font-size: var(--kds-font-size-base);
1319
+ }
1320
+
1321
+ .kds-alert-description {
1322
+ font-size: var(--kds-font-size-sm);
1323
+ line-height: 1.5;
1324
+ }
1325
+
1326
+ /* Alert Variants */
1327
+ .kds-alert.info {
1328
+ background: var(--kds-alert-info-bg);
1329
+ border-color: var(--kds-color-info);
1330
+ color: var(--kds-color-info);
1331
+ }
1332
+
1333
+ .kds-alert.info .kds-alert-icon {
1334
+ color: var(--kds-color-info);
1335
+ }
1336
+
1337
+ .kds-alert.warning {
1338
+ background: var(--kds-alert-warning-bg);
1339
+ border-color: var(--kds-color-warning);
1340
+ color: var(--kds-color-warning);
1341
+ }
1342
+
1343
+ .kds-alert.warning .kds-alert-icon {
1344
+ color: var(--kds-color-warning);
1345
+ }
1346
+
1347
+ .kds-alert.success {
1348
+ background: var(--kds-alert-success-bg);
1349
+ border-color: var(--kds-color-success);
1350
+ color: var(--kds-color-success);
1351
+ }
1352
+
1353
+ .kds-alert.success .kds-alert-icon {
1354
+ color: var(--kds-color-success);
1355
+ }
1356
+
1357
+ .kds-alert.error {
1358
+ background: var(--kds-alert-error-bg);
1359
+ border-color: var(--kds-color-error);
1360
+ color: var(--kds-color-error);
1361
+ }
1362
+
1363
+ .kds-alert.error .kds-alert-icon {
1364
+ color: var(--kds-color-error);
1365
+ }
1366
+
1367
+ /* Alert with action button */
1368
+ .kds-alert-actions {
1369
+ margin-top: var(--kds-spacing-3);
1370
+ display: flex;
1371
+ gap: var(--kds-spacing-2);
1372
+ }
1373
+
1374
+ /* Compact alert variant (no icon) */
1375
+ .kds-alert.compact {
1376
+ padding: var(--kds-spacing-3);
1377
+ }
1378
+
1379
+ .kds-alert.compact .kds-alert-icon {
1380
+ display: none;
1381
+ }
1382
+
1383
+ /* ========================================
1384
+ Material Symbols Icon Sizing
1385
+ ======================================== */
1386
+
1387
+ .material-symbols-outlined {
1388
+ font-variation-settings:
1389
+ 'FILL' 0,
1390
+ 'wght' 400,
1391
+ 'GRAD' 0,
1392
+ 'opsz' 24;
1393
+ }
1394
+
1395
+ /* Filled icons for specific contexts */
1396
+ .icon-filled {
1397
+ font-variation-settings:
1398
+ 'FILL' 1,
1399
+ 'wght' 400,
1400
+ 'GRAD' 0,
1401
+ 'opsz' 24;
1402
+ }
1403
+
1404
+ /* ========================================
1405
+ Typography Scale - EXACT from Figma Make
1406
+ ======================================== */
1407
+
1408
+ /* Stage title (e.g., "Etapa 2: Datos personales") */
1409
+ .kds-stage-title {
1410
+ font-size: 32px;
1411
+ font-weight: 700;
1412
+ line-height: 1.3;
1413
+ color: #111827;
1414
+ margin: 0 0 12px 0;
1415
+ text-align: center;
1416
+ }
1417
+
1418
+ /* Stage subtitle (e.g., "Completa tu información personal") */
1419
+ .kds-stage-subtitle {
1420
+ font-size: 16px;
1421
+ font-weight: 400;
1422
+ line-height: 1.5;
1423
+ color: #6B7280;
1424
+ margin: 0 0 32px 0;
1425
+ text-align: center;
1426
+ }
1427
+
1428
+ /* Section title (e.g., "Datos personales") */
1429
+ .kds-section-title {
1430
+ font-size: 20px;
1431
+ font-weight: 600;
1432
+ line-height: 1.4;
1433
+ color: #111827;
1434
+ margin: 0 0 24px 0;
1435
+ }
1436
+
1437
+ /* Display styles (largest) */
1438
+ .kds-display-large {
1439
+ font-size: var(--kds-font-size-4xl);
1440
+ font-weight: var(--kds-font-weight-bold);
1441
+ line-height: 1.2;
1442
+ margin: 0;
1443
+ letter-spacing: -0.02em;
1444
+ color: #111827;
1445
+ }
1446
+
1447
+ .kds-display-medium {
1448
+ font-size: var(--kds-font-size-3xl);
1449
+ font-weight: var(--kds-font-weight-bold);
1450
+ line-height: 1.2;
1451
+ margin: 0;
1452
+ letter-spacing: -0.01em;
1453
+ color: #111827;
1454
+ }
1455
+
1456
+ /* Headline styles */
1457
+ .kds-headline-large {
1458
+ font-size: var(--kds-font-size-2xl);
1459
+ font-weight: var(--kds-font-weight-bold);
1460
+ line-height: 1.3;
1461
+ margin: 0;
1462
+ }
1463
+
1464
+ .kds-headline-medium {
1465
+ font-size: var(--kds-font-size-xl);
1466
+ font-weight: var(--kds-font-weight-bold);
1467
+ line-height: 1.3;
1468
+ margin: 0;
1469
+ }
1470
+
1471
+ .kds-headline-small {
1472
+ font-size: var(--kds-font-size-lg);
1473
+ font-weight: var(--kds-font-weight-bold);
1474
+ line-height: 1.4;
1475
+ margin: 0;
1476
+ }
1477
+
1478
+ /* Title styles */
1479
+ .kds-title-large {
1480
+ font-size: var(--kds-font-size-xl);
1481
+ font-weight: var(--kds-font-weight-semibold);
1482
+ line-height: 1.5;
1483
+ margin: 0;
1484
+ }
1485
+
1486
+ .kds-title-medium {
1487
+ font-size: var(--kds-font-size-base);
1488
+ font-weight: var(--kds-font-weight-semibold);
1489
+ line-height: 1.5;
1490
+ margin: 0;
1491
+ }
1492
+
1493
+ .kds-title-small {
1494
+ font-size: var(--kds-font-size-sm);
1495
+ font-weight: var(--kds-font-weight-semibold);
1496
+ line-height: 1.5;
1497
+ margin: 0;
1498
+ }
1499
+
1500
+ /* Body text styles */
1501
+ .kds-body-large {
1502
+ font-size: var(--kds-font-size-lg);
1503
+ font-weight: var(--kds-font-weight-regular);
1504
+ line-height: 1.5;
1505
+ }
1506
+
1507
+ .kds-body-medium {
1508
+ font-size: var(--kds-font-size-base);
1509
+ font-weight: var(--kds-font-weight-regular);
1510
+ line-height: 1.5;
1511
+ }
1512
+
1513
+ .kds-body-small {
1514
+ font-size: var(--kds-font-size-sm);
1515
+ font-weight: var(--kds-font-weight-regular);
1516
+ line-height: 1.5;
1517
+ }
1518
+
1519
+ /* Label styles */
1520
+ .kds-label-large {
1521
+ font-size: var(--kds-font-size-base);
1522
+ font-weight: var(--kds-font-weight-semibold);
1523
+ line-height: 1.5;
1524
+ letter-spacing: 0.01em;
1525
+ }
1526
+
1527
+ .kds-label-medium {
1528
+ font-size: var(--kds-font-size-sm);
1529
+ font-weight: var(--kds-font-weight-semibold);
1530
+ line-height: 1.5;
1531
+ letter-spacing: 0.01em;
1532
+ }
1533
+
1534
+ .kds-label-small {
1535
+ font-size: var(--kds-font-size-xs);
1536
+ font-weight: var(--kds-font-weight-semibold);
1537
+ line-height: 1.5;
1538
+ letter-spacing: 0.02em;
1539
+ }
1540
+
1541
+ /* Text utilities */
1542
+ .kds-text-center {
1543
+ text-align: center;
1544
+ }
1545
+
1546
+ .kds-text-left {
1547
+ text-align: left;
1548
+ }
1549
+
1550
+ .kds-text-right {
1551
+ text-align: right;
1552
+ }
1553
+
1554
+ .kds-text-muted {
1555
+ color: var(--on-surface-variant, rgba(0, 0, 0, 0.60));
1556
+ }
1557
+
1558
+ .kds-text-primary {
1559
+ color: var(--primary);
1560
+ }
1561
+
1562
+ .kds-text-success {
1563
+ color: var(--kds-color-success);
1564
+ }
1565
+
1566
+ .kds-text-error {
1567
+ color: var(--kds-color-error);
1568
+ }
1569
+
1570
+ .kds-text-warning {
1571
+ color: var(--kds-color-warning);
1572
+ }
1573
+
1574
+ /* Font weight utilities */
1575
+ .kds-font-regular {
1576
+ font-weight: var(--kds-font-weight-regular);
1577
+ }
1578
+
1579
+ .kds-font-medium {
1580
+ font-weight: var(--kds-font-weight-medium);
1581
+ }
1582
+
1583
+ .kds-font-semibold {
1584
+ font-weight: var(--kds-font-weight-semibold);
1585
+ }
1586
+
1587
+ .kds-font-bold {
1588
+ font-weight: var(--kds-font-weight-bold);
1589
+ }
1590
+
1591
+ /* ========================================
1592
+ Width & Display Utilities
1593
+ ======================================== */
1594
+
1595
+ .kds-w-full {
1596
+ width: 100%;
1597
+ }
1598
+
1599
+ .kds-max-w-sm {
1600
+ max-width: 400px;
1601
+ }
1602
+
1603
+ .kds-max-w-md {
1604
+ max-width: 600px;
1605
+ }
1606
+
1607
+ .kds-max-w-lg {
1608
+ max-width: 800px;
1609
+ }
1610
+
1611
+ /* Status card content styling */
1612
+ .kds-card-status .status-content strong {
1613
+ display: block;
1614
+ font-weight: var(--kds-font-weight-semibold);
1615
+ margin-bottom: var(--kds-spacing-1);
1616
+ }
1617
+
1618
+ .kds-card-status .status-content p {
1619
+ margin: 0;
1620
+ font-size: var(--kds-font-size-sm);
1621
+ color: var(--on-surface-variant, rgba(0, 0, 0, 0.60));
1622
+ }
1623
+
1624
+ /* Status icon colors */
1625
+ .kds-card-status .status-icon.success {
1626
+ color: var(--kds-color-success);
1627
+ }
1628
+
1629
+ .kds-card-status .status-icon.warning {
1630
+ color: var(--kds-color-warning);
1631
+ }
1632
+
1633
+ .kds-card-status .status-icon.error {
1634
+ color: var(--kds-color-error);
1635
+ }
1636
+
1637
+ .kds-card-status .status-icon.info {
1638
+ color: var(--kds-color-info);
1639
+ }
1640
+
1641
+ /* Card action buttons full width */
1642
+ .kds-card-flow button,
1643
+ .kds-card-plan button {
1644
+ width: 100%;
1645
+ }
1646
+
1647
+ /* Flow card content spacing */
1648
+ .kds-card-flow h3 {
1649
+ margin-top: 0;
1650
+ }
1651
+
1652
+ .kds-card-flow ul {
1653
+ margin: var(--kds-spacing-4) 0;
1654
+ padding-left: var(--kds-spacing-5);
1655
+ }
1656
+
1657
+ /* Plan card title */
1658
+ .kds-card-plan h3 {
1659
+ margin: 0;
1660
+ }
1661
+
1662
+ /* ========================================
1663
+ ONBOARDING COMPONENTS
1664
+ Multi-stage onboarding flow with form validation
1665
+ ======================================== */
1666
+
1667
+ /* Onboarding Container - Main wrapper for all stages */
1668
+ .kds-onboarding-container {
1669
+ display: flex;
1670
+ flex-direction: column;
1671
+ min-height: 100vh;
1672
+ background: var(--kds-surface-background);
1673
+ }
1674
+
1675
+ /* Onboarding Header - Contains stepper and progress */
1676
+ .kds-onboarding-header {
1677
+ background: #FFFFFF;
1678
+ border-bottom: 1px solid #E5E7EB;
1679
+ position: sticky;
1680
+ top: 0;
1681
+ z-index: 100;
1682
+ }
1683
+
1684
+ /* Onboarding Main - Content area */
1685
+ .kds-onboarding-main {
1686
+ flex: 1 0 auto;
1687
+ display: flex;
1688
+ flex-direction: column;
1689
+ padding: var(--kds-onboarding-padding);
1690
+ }
1691
+
1692
+ /* Onboarding Footer - Action buttons */
1693
+ .kds-onboarding-footer {
1694
+ flex-shrink: 0;
1695
+ background: #FFFFFF;
1696
+ border-top: 1px solid #E5E7EB;
1697
+ padding: var(--kds-spacing-4) var(--kds-spacing-6);
1698
+ display: flex;
1699
+ justify-content: space-between;
1700
+ align-items: center;
1701
+ gap: var(--kds-spacing-3);
1702
+ position: sticky;
1703
+ bottom: 0;
1704
+ z-index: 100;
1705
+ }
1706
+
1707
+ .kds-onboarding-footer .button-group {
1708
+ display: flex;
1709
+ gap: var(--kds-spacing-3);
1710
+ align-items: center;
1711
+ }
1712
+
1713
+ @media (max-width: 768px) {
1714
+ .kds-onboarding-footer {
1715
+ flex-direction: column;
1716
+ align-items: stretch;
1717
+ }
1718
+
1719
+ .kds-onboarding-footer .button-group {
1720
+ width: 100%;
1721
+ flex-direction: column;
1722
+ }
1723
+
1724
+ .kds-onboarding-footer button {
1725
+ width: 100% !important;
1726
+ }
1727
+ }
1728
+
1729
+ /* Stage Layout - Individual stage wrapper */
1730
+ .kds-stage {
1731
+ max-width: var(--kds-onboarding-max-width);
1732
+ margin: 0 auto;
1733
+ width: 100%;
1734
+ }
1735
+
1736
+ /* Stage Header - Title and subtitle */
1737
+ .kds-stage-header {
1738
+ text-align: center;
1739
+ margin-bottom: var(--kds-spacing-8);
1740
+ }
1741
+
1742
+ /* Stage Content - Main form/content area */
1743
+ .kds-stage-content {
1744
+ display: flex;
1745
+ flex-direction: column;
1746
+ gap: var(--kds-onboarding-gap);
1747
+ }
1748
+
1749
+ /* Stage Actions - Bottom button area (if not using sticky footer) */
1750
+ .kds-stage-actions {
1751
+ display: flex;
1752
+ justify-content: space-between;
1753
+ gap: var(--kds-spacing-3);
1754
+ margin-top: var(--kds-spacing-8);
1755
+ }
1756
+
1757
+ @media (max-width: 768px) {
1758
+ .kds-stage-actions {
1759
+ flex-direction: column;
1760
+ }
1761
+
1762
+ .kds-stage-actions button {
1763
+ width: 100% !important;
1764
+ }
1765
+ }
1766
+
1767
+ /* Stage Section - Grouping related fields */
1768
+ .kds-stage-section {
1769
+ background: #FFFFFF;
1770
+ border-radius: var(--kds-radius-lg);
1771
+ padding: var(--kds-spacing-6);
1772
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
1773
+ }
1774
+
1775
+ .kds-stage-section + .kds-stage-section {
1776
+ margin-top: var(--kds-spacing-6);
1777
+ }
1778
+
1779
+ .kds-stage-section-title {
1780
+ font-size: var(--kds-font-size-lg);
1781
+ font-weight: var(--kds-font-weight-semibold);
1782
+ color: #111827;
1783
+ margin-bottom: var(--kds-spacing-4);
1784
+ }
1785
+
1786
+ .kds-stage-section-description {
1787
+ font-size: var(--kds-font-size-sm);
1788
+ color: #6B7280;
1789
+ margin-bottom: var(--kds-spacing-4);
1790
+ line-height: 1.5;
1791
+ }
1792
+
1793
+ /* ========================================
1794
+ FILE UPLOAD COMPONENT
1795
+ Drag-and-drop file upload with preview
1796
+ ======================================== */
1797
+
1798
+ .kds-file-upload {
1799
+ width: 100%;
1800
+ }
1801
+
1802
+ /* Upload Zone - Drag and drop area */
1803
+ .kds-file-upload-zone {
1804
+ border: 2px dashed var(--kds-upload-zone-border);
1805
+ border-radius: var(--kds-radius-lg);
1806
+ background: var(--kds-upload-zone-bg);
1807
+ padding: var(--kds-spacing-8);
1808
+ text-align: center;
1809
+ cursor: pointer;
1810
+ transition: all 0.3s ease;
1811
+ position: relative;
1812
+ }
1813
+
1814
+ .kds-file-upload-zone:hover {
1815
+ border-color: var(--kds-upload-zone-border-hover);
1816
+ background: #F3F4F6;
1817
+ }
1818
+
1819
+ .kds-file-upload-zone.dragover {
1820
+ border-color: var(--kds-upload-zone-border-drag);
1821
+ background: var(--kds-color-primary-50);
1822
+ box-shadow: 0 0 0 4px rgba(131, 71, 173, 0.1);
1823
+ }
1824
+
1825
+ .kds-file-upload-zone.error {
1826
+ border-color: var(--kds-upload-zone-border-error);
1827
+ background: var(--kds-alert-error-bg);
1828
+ }
1829
+
1830
+ .kds-file-upload-zone.success {
1831
+ border-color: var(--kds-upload-zone-border-success);
1832
+ background: var(--kds-alert-success-bg);
1833
+ }
1834
+
1835
+ /* Upload zone content */
1836
+ .kds-file-upload-icon {
1837
+ font-size: 48px;
1838
+ color: #9CA3AF;
1839
+ margin-bottom: var(--kds-spacing-3);
1840
+ }
1841
+
1842
+ .kds-file-upload-zone.dragover .kds-file-upload-icon {
1843
+ color: var(--kds-color-primary-500);
1844
+ }
1845
+
1846
+ .kds-file-upload-text {
1847
+ font-size: var(--kds-font-size-base);
1848
+ font-weight: var(--kds-font-weight-medium);
1849
+ color: #111827;
1850
+ margin-bottom: var(--kds-spacing-2);
1851
+ }
1852
+
1853
+ .kds-file-upload-hint {
1854
+ font-size: var(--kds-font-size-sm);
1855
+ color: #6B7280;
1856
+ }
1857
+
1858
+ /* Hidden file input */
1859
+ .kds-file-upload input[type="file"] {
1860
+ display: none;
1861
+ }
1862
+
1863
+ /* File Preview Area */
1864
+ .kds-file-upload-preview {
1865
+ margin-top: var(--kds-spacing-4);
1866
+ display: flex;
1867
+ flex-direction: column;
1868
+ gap: var(--kds-spacing-3);
1869
+ }
1870
+
1871
+ /* Individual File Item */
1872
+ .kds-file-upload-item {
1873
+ display: flex;
1874
+ align-items: center;
1875
+ gap: var(--kds-spacing-3);
1876
+ padding: var(--kds-spacing-3);
1877
+ background: var(--kds-upload-item-bg);
1878
+ border: 1px solid var(--kds-upload-item-border);
1879
+ border-radius: var(--kds-radius-md);
1880
+ transition: all 0.2s ease;
1881
+ }
1882
+
1883
+ .kds-file-upload-item:hover {
1884
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1885
+ }
1886
+
1887
+ /* File icon */
1888
+ .kds-file-upload-item-icon {
1889
+ flex-shrink: 0;
1890
+ width: 40px;
1891
+ height: 40px;
1892
+ display: flex;
1893
+ align-items: center;
1894
+ justify-content: center;
1895
+ background: var(--kds-color-primary-50);
1896
+ border-radius: var(--kds-radius-md);
1897
+ color: var(--kds-color-primary-500);
1898
+ font-size: 20px;
1899
+ }
1900
+
1901
+ /* File info */
1902
+ .kds-file-upload-item-info {
1903
+ flex: 1;
1904
+ min-width: 0;
1905
+ }
1906
+
1907
+ .kds-file-upload-item-name {
1908
+ font-size: var(--kds-font-size-sm);
1909
+ font-weight: var(--kds-font-weight-medium);
1910
+ color: #111827;
1911
+ white-space: nowrap;
1912
+ overflow: hidden;
1913
+ text-overflow: ellipsis;
1914
+ }
1915
+
1916
+ .kds-file-upload-item-meta {
1917
+ font-size: var(--kds-font-size-xs);
1918
+ color: #6B7280;
1919
+ margin-top: 2px;
1920
+ }
1921
+
1922
+ /* File status */
1923
+ .kds-file-upload-item-status {
1924
+ flex-shrink: 0;
1925
+ font-size: 20px;
1926
+ }
1927
+
1928
+ .kds-file-upload-item-status.success {
1929
+ color: var(--kds-color-success);
1930
+ }
1931
+
1932
+ .kds-file-upload-item-status.error {
1933
+ color: var(--kds-color-error);
1934
+ }
1935
+
1936
+ .kds-file-upload-item-status.uploading {
1937
+ color: var(--kds-color-info);
1938
+ }
1939
+
1940
+ /* Remove button */
1941
+ .kds-file-upload-item-remove {
1942
+ flex-shrink: 0;
1943
+ background: transparent;
1944
+ border: none;
1945
+ color: #9CA3AF;
1946
+ cursor: pointer;
1947
+ padding: var(--kds-spacing-1);
1948
+ border-radius: var(--kds-radius-sm);
1949
+ transition: all 0.2s ease;
1950
+ font-size: 20px;
1951
+ display: flex;
1952
+ align-items: center;
1953
+ justify-content: center;
1954
+ }
1955
+
1956
+ .kds-file-upload-item-remove:hover {
1957
+ background: var(--kds-alert-error-bg);
1958
+ color: var(--kds-color-error);
1959
+ }
1960
+
1961
+ /* Progress bar (for async uploads) */
1962
+ .kds-file-upload-progress {
1963
+ height: 4px;
1964
+ background: #E5E7EB;
1965
+ border-radius: 2px;
1966
+ overflow: hidden;
1967
+ margin-top: var(--kds-spacing-2);
1968
+ }
1969
+
1970
+ .kds-file-upload-progress-bar {
1971
+ height: 100%;
1972
+ background: var(--kds-color-primary-500);
1973
+ transition: width 0.3s ease;
1974
+ }
1975
+
1976
+ /* ========================================
1977
+ OTP INPUT COMPONENT
1978
+ 6-digit one-time password input
1979
+ ======================================== */
1980
+
1981
+ .kds-otp-input {
1982
+ display: flex;
1983
+ justify-content: center;
1984
+ gap: var(--kds-spacing-3);
1985
+ margin: var(--kds-spacing-6) 0;
1986
+ }
1987
+
1988
+ .kds-otp-digit {
1989
+ width: var(--kds-otp-digit-size);
1990
+ height: var(--kds-otp-digit-height);
1991
+ font-size: var(--kds-font-size-2xl);
1992
+ font-weight: var(--kds-font-weight-bold);
1993
+ text-align: center;
1994
+ border: 2px solid var(--kds-otp-digit-border);
1995
+ border-radius: var(--kds-radius-md);
1996
+ background: var(--kds-otp-digit-bg);
1997
+ transition: all 0.2s ease;
1998
+ outline: none;
1999
+ color: #111827;
2000
+ }
2001
+
2002
+ .kds-otp-digit:focus {
2003
+ border-color: var(--kds-otp-digit-border-focus);
2004
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
2005
+ }
2006
+
2007
+ .kds-otp-digit:not(:placeholder-shown) {
2008
+ background: var(--kds-otp-digit-bg-filled);
2009
+ border-color: var(--kds-color-success);
2010
+ }
2011
+
2012
+ .kds-otp-digit.error {
2013
+ border-color: var(--kds-color-error);
2014
+ background: var(--kds-alert-error-bg);
2015
+ }
2016
+
2017
+ /* Mobile responsive */
2018
+ @media (max-width: 480px) {
2019
+ .kds-otp-input {
2020
+ gap: var(--kds-spacing-2);
2021
+ }
2022
+
2023
+ .kds-otp-digit {
2024
+ width: 48px;
2025
+ height: 56px;
2026
+ font-size: var(--kds-font-size-xl);
2027
+ }
2028
+ }
2029
+
2030
+ /* ========================================
2031
+ BANK SELECTOR GRID
2032
+ Grid of selectable bank cards
2033
+ ======================================== */
2034
+
2035
+ .kds-bank-grid {
2036
+ display: grid;
2037
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
2038
+ gap: var(--kds-spacing-4);
2039
+ margin: var(--kds-spacing-4) 0;
2040
+ }
2041
+
2042
+ @media (max-width: 768px) {
2043
+ .kds-bank-grid {
2044
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
2045
+ gap: var(--kds-spacing-3);
2046
+ }
2047
+ }
2048
+
2049
+ @media (max-width: 480px) {
2050
+ .kds-bank-grid {
2051
+ grid-template-columns: repeat(3, 1fr);
2052
+ gap: var(--kds-spacing-2);
2053
+ }
2054
+ }
2055
+
2056
+ /* Individual Bank Item */
2057
+ .kds-bank-item {
2058
+ aspect-ratio: 1;
2059
+ display: flex;
2060
+ flex-direction: column;
2061
+ align-items: center;
2062
+ justify-content: center;
2063
+ padding: var(--kds-spacing-3);
2064
+ border: 2px solid var(--kds-bank-item-border);
2065
+ border-radius: var(--kds-radius-lg);
2066
+ background: #FFFFFF;
2067
+ cursor: pointer;
2068
+ transition: all 0.3s ease;
2069
+ position: relative;
2070
+ }
2071
+
2072
+ .kds-bank-item:hover {
2073
+ border-color: var(--kds-bank-item-border-hover);
2074
+ background: var(--kds-bank-item-bg-hover);
2075
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
2076
+ }
2077
+
2078
+ .kds-bank-item.selected {
2079
+ border-color: var(--kds-bank-item-border-selected);
2080
+ background: var(--kds-bank-item-bg-selected);
2081
+ box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
2082
+ }
2083
+
2084
+ /* Bank logo */
2085
+ .kds-bank-item-logo {
2086
+ width: 100%;
2087
+ height: auto;
2088
+ max-width: 80px;
2089
+ margin-bottom: var(--kds-spacing-2);
2090
+ object-fit: contain;
2091
+ }
2092
+
2093
+ /* Bank name */
2094
+ .kds-bank-item-name {
2095
+ font-size: var(--kds-font-size-xs);
2096
+ font-weight: var(--kds-font-weight-medium);
2097
+ color: #111827;
2098
+ text-align: center;
2099
+ line-height: 1.3;
2100
+ }
2101
+
2102
+ /* Selected checkmark */
2103
+ .kds-bank-item-check {
2104
+ position: absolute;
2105
+ top: 8px;
2106
+ right: 8px;
2107
+ width: 24px;
2108
+ height: 24px;
2109
+ background: var(--kds-color-primary-500);
2110
+ border-radius: 50%;
2111
+ display: none;
2112
+ align-items: center;
2113
+ justify-content: center;
2114
+ color: white;
2115
+ font-size: 14px;
2116
+ }
2117
+
2118
+ .kds-bank-item.selected .kds-bank-item-check {
2119
+ display: flex;
2120
+ }
2121
+
2122
+ .kds-bank-item-check::after {
2123
+ content: "✓";
2124
+ font-weight: 700;
2125
+ }
2126
+
2127
+ /* Mobile adjustments */
2128
+ @media (max-width: 480px) {
2129
+ .kds-bank-item {
2130
+ padding: var(--kds-spacing-2);
2131
+ }
2132
+
2133
+ .kds-bank-item-logo {
2134
+ max-width: 60px;
2135
+ }
2136
+
2137
+ .kds-bank-item-name {
2138
+ font-size: 10px;
2139
+ }
2140
+
2141
+ .kds-bank-item-check {
2142
+ width: 20px;
2143
+ height: 20px;
2144
+ font-size: 12px;
2145
+ top: 4px;
2146
+ right: 4px;
2147
+ }
2148
+ }
2149
+
2150
+ /* ========================================
2151
+ KYC BLOCKING MODAL
2152
+ Warning modal for high-risk sectors
2153
+ ======================================== */
2154
+
2155
+ .kds-kyc-modal {
2156
+ background: var(--kds-kyc-block-bg);
2157
+ border: 2px solid var(--kds-kyc-block-border);
2158
+ border-radius: var(--kds-radius-lg);
2159
+ padding: var(--kds-spacing-8);
2160
+ max-width: 600px;
2161
+ margin: 0 auto;
2162
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
2163
+ }
2164
+
2165
+ .kds-kyc-modal-icon {
2166
+ text-align: center;
2167
+ margin-bottom: var(--kds-spacing-4);
2168
+ }
2169
+
2170
+ .kds-kyc-modal-icon i {
2171
+ font-size: 64px;
2172
+ color: var(--kds-kyc-block-icon);
2173
+ }
2174
+
2175
+ .kds-kyc-modal-title {
2176
+ font-size: var(--kds-font-size-2xl);
2177
+ font-weight: var(--kds-font-weight-bold);
2178
+ color: var(--kds-kyc-block-text);
2179
+ text-align: center;
2180
+ margin-bottom: var(--kds-spacing-4);
2181
+ }
2182
+
2183
+ .kds-kyc-modal-message {
2184
+ font-size: var(--kds-font-size-base);
2185
+ color: var(--kds-kyc-block-text);
2186
+ line-height: 1.6;
2187
+ margin-bottom: var(--kds-spacing-6);
2188
+ text-align: center;
2189
+ }
2190
+
2191
+ .kds-kyc-modal-contact {
2192
+ background: #FFFFFF;
2193
+ border-radius: var(--kds-radius-md);
2194
+ padding: var(--kds-spacing-4);
2195
+ margin-bottom: var(--kds-spacing-6);
2196
+ border-left: 4px solid var(--kds-kyc-block-icon);
2197
+ }
2198
+
2199
+ .kds-kyc-modal-contact strong {
2200
+ display: block;
2201
+ font-weight: var(--kds-font-weight-semibold);
2202
+ color: var(--kds-kyc-block-text);
2203
+ margin-bottom: var(--kds-spacing-2);
2204
+ }
2205
+
2206
+ .kds-kyc-modal-contact a {
2207
+ color: var(--kds-color-primary-500);
2208
+ text-decoration: none;
2209
+ font-weight: var(--kds-font-weight-medium);
2210
+ }
2211
+
2212
+ .kds-kyc-modal-contact a:hover {
2213
+ text-decoration: underline;
2214
+ }
2215
+
2216
+ .kds-kyc-modal-actions {
2217
+ display: flex;
2218
+ gap: var(--kds-spacing-3);
2219
+ justify-content: center;
2220
+ }
2221
+
2222
+ @media (max-width: 480px) {
2223
+ .kds-kyc-modal {
2224
+ padding: var(--kds-spacing-6);
2225
+ }
2226
+
2227
+ .kds-kyc-modal-icon i {
2228
+ font-size: 48px;
2229
+ }
2230
+
2231
+ .kds-kyc-modal-actions {
2232
+ flex-direction: column;
2233
+ }
2234
+
2235
+ .kds-kyc-modal-actions button {
2236
+ width: 100% !important;
2237
+ }
2238
+ }
2239
+
2240
+ /* ========================================
2241
+ WELCOME HERO SECTION
2242
+ Full-width gradient hero with CTA
2243
+ ======================================== */
2244
+
2245
+ .kds-welcome-hero {
2246
+ background: linear-gradient(135deg, var(--kds-welcome-gradient-start) 0%, var(--kds-welcome-gradient-end) 100%);
2247
+ color: white;
2248
+ padding: var(--kds-spacing-20) var(--kds-spacing-6);
2249
+ text-align: center;
2250
+ border-radius: 0;
2251
+ margin: 0;
2252
+ position: relative;
2253
+ overflow: hidden;
2254
+ }
2255
+
2256
+ /* Decorative circles */
2257
+ .kds-welcome-hero::before,
2258
+ .kds-welcome-hero::after {
2259
+ content: "";
2260
+ position: absolute;
2261
+ border-radius: 50%;
2262
+ background: rgba(255, 255, 255, 0.1);
2263
+ }
2264
+
2265
+ .kds-welcome-hero::before {
2266
+ width: 400px;
2267
+ height: 400px;
2268
+ top: -200px;
2269
+ right: -100px;
2270
+ }
2271
+
2272
+ .kds-welcome-hero::after {
2273
+ width: 300px;
2274
+ height: 300px;
2275
+ bottom: -150px;
2276
+ left: -50px;
2277
+ }
2278
+
2279
+ .kds-welcome-hero-content {
2280
+ position: relative;
2281
+ z-index: 1;
2282
+ max-width: 800px;
2283
+ margin: 0 auto;
2284
+ }
2285
+
2286
+ .kds-welcome-hero-icon {
2287
+ font-size: 80px;
2288
+ margin-bottom: var(--kds-spacing-4);
2289
+ opacity: 0.9;
2290
+ }
2291
+
2292
+ .kds-welcome-hero-icon i {
2293
+ width: auto !important;
2294
+ height: auto !important;
2295
+ font-size: 80px !important;
2296
+ }
2297
+
2298
+ /* Fix for benefit card icons - BeerCSS forces 24px, override for large icons */
2299
+ .kds-card-elevated i.icon-filled {
2300
+ width: auto !important;
2301
+ height: auto !important;
2302
+ }
2303
+
2304
+ .kds-welcome-hero-title {
2305
+ font-size: var(--kds-font-size-4xl);
2306
+ font-weight: var(--kds-font-weight-bold);
2307
+ margin-bottom: var(--kds-spacing-4);
2308
+ line-height: 1.2;
2309
+ }
2310
+
2311
+ .kds-welcome-hero-subtitle {
2312
+ font-size: var(--kds-font-size-xl);
2313
+ opacity: 0.95;
2314
+ margin-bottom: var(--kds-spacing-8);
2315
+ line-height: 1.5;
2316
+ }
2317
+
2318
+ .kds-welcome-hero-actions {
2319
+ display: flex;
2320
+ gap: var(--kds-spacing-4);
2321
+ justify-content: center;
2322
+ }
2323
+
2324
+
2325
+ @media (max-width: 768px) {
2326
+ .kds-welcome-hero {
2327
+ padding: var(--kds-spacing-12) var(--kds-spacing-4);
2328
+ }
2329
+
2330
+ .kds-welcome-hero-icon {
2331
+ font-size: 60px;
2332
+ }
2333
+
2334
+ .kds-welcome-hero-title {
2335
+ font-size: var(--kds-font-size-3xl);
2336
+ }
2337
+
2338
+ .kds-welcome-hero-subtitle {
2339
+ font-size: var(--kds-font-size-lg);
2340
+ }
2341
+
2342
+ .kds-welcome-hero-actions {
2343
+ flex-direction: column;
2344
+ align-items: stretch;
2345
+ }
2346
+
2347
+ .kds-welcome-hero-actions button {
2348
+ width: 100% !important;
2349
+ }
2350
+ }
2351
+
2352
+ /* ========================================
2353
+ CONTRACT ACCORDION
2354
+ Expandable terms and conditions
2355
+ ======================================== */
2356
+
2357
+ .kds-contract-accordion {
2358
+ border: 1px solid var(--kds-accordion-border);
2359
+ border-radius: var(--kds-radius-md);
2360
+ overflow: hidden;
2361
+ }
2362
+
2363
+ .kds-contract-accordion details {
2364
+ border-bottom: 1px solid var(--kds-accordion-border);
2365
+ }
2366
+
2367
+ .kds-contract-accordion details:last-child {
2368
+ border-bottom: none;
2369
+ }
2370
+
2371
+ .kds-contract-accordion summary {
2372
+ padding: var(--kds-spacing-4);
2373
+ background: var(--kds-accordion-header-bg);
2374
+ cursor: pointer;
2375
+ font-weight: var(--kds-font-weight-semibold);
2376
+ color: #111827;
2377
+ list-style: none;
2378
+ display: flex;
2379
+ justify-content: space-between;
2380
+ align-items: center;
2381
+ transition: background 0.2s ease;
2382
+ }
2383
+
2384
+ .kds-contract-accordion summary::-webkit-details-marker {
2385
+ display: none;
2386
+ }
2387
+
2388
+ .kds-contract-accordion summary:hover {
2389
+ background: #E5E7EB;
2390
+ }
2391
+
2392
+ .kds-contract-accordion summary::after {
2393
+ content: "expand_more";
2394
+ font-family: 'Material Symbols Outlined';
2395
+ font-size: 24px;
2396
+ transition: transform 0.3s ease;
2397
+ }
2398
+
2399
+ .kds-contract-accordion details[open] summary::after {
2400
+ transform: rotate(180deg);
2401
+ }
2402
+
2403
+ .kds-contract-accordion details[open] summary {
2404
+ background: var(--kds-accordion-bg-open);
2405
+ border-bottom: 1px solid var(--kds-accordion-border);
2406
+ }
2407
+
2408
+ .kds-contract-accordion-content {
2409
+ padding: var(--kds-spacing-4);
2410
+ background: var(--kds-accordion-bg-open);
2411
+ font-size: var(--kds-font-size-sm);
2412
+ line-height: 1.6;
2413
+ color: #374151;
2414
+ }
2415
+
2416
+ .kds-contract-accordion-content h4 {
2417
+ font-size: var(--kds-font-size-base);
2418
+ font-weight: var(--kds-font-weight-semibold);
2419
+ margin-top: var(--kds-spacing-4);
2420
+ margin-bottom: var(--kds-spacing-2);
2421
+ }
2422
+
2423
+ .kds-contract-accordion-content p {
2424
+ margin-bottom: var(--kds-spacing-3);
2425
+ }
2426
+
2427
+ .kds-contract-accordion-content ul,
2428
+ .kds-contract-accordion-content ol {
2429
+ margin-bottom: var(--kds-spacing-3);
2430
+ padding-left: var(--kds-spacing-5);
2431
+ }
2432
+
2433
+ /* ========================================
2434
+ SIGNATURE PAD
2435
+ Canvas-based signature capture
2436
+ ======================================== */
2437
+
2438
+ .kds-signature-pad {
2439
+ width: 100%;
2440
+ }
2441
+
2442
+ .kds-signature-canvas-wrapper {
2443
+ border: 2px solid var(--kds-signature-border);
2444
+ border-radius: var(--kds-radius-md);
2445
+ background: var(--kds-signature-bg);
2446
+ padding: var(--kds-spacing-2);
2447
+ margin-bottom: var(--kds-spacing-3);
2448
+ }
2449
+
2450
+ .kds-signature-canvas {
2451
+ display: block;
2452
+ width: 100%;
2453
+ height: 200px;
2454
+ border-radius: var(--kds-radius-sm);
2455
+ cursor: crosshair;
2456
+ touch-action: none;
2457
+ }
2458
+
2459
+ .kds-signature-actions {
2460
+ display: flex;
2461
+ gap: var(--kds-spacing-2);
2462
+ justify-content: flex-end;
2463
+ }
2464
+
2465
+ .kds-signature-clear {
2466
+ background: transparent !important;
2467
+ color: #6B7280 !important;
2468
+ border: 1px solid #D1D5DB !important;
2469
+ }
2470
+
2471
+ .kds-signature-clear:hover {
2472
+ background: #F3F4F6 !important;
2473
+ border-color: #9CA3AF !important;
2474
+ }
2475
+
2476
+ /* Form Grid - 2-column responsive layout for forms */
2477
+ .kds-form-grid {
2478
+ display: grid;
2479
+ grid-template-columns: 1fr;
2480
+ gap: var(--kds-spacing-4);
2481
+ }
2482
+
2483
+ @media (min-width: 768px) {
2484
+ .kds-form-grid {
2485
+ grid-template-columns: 1fr 1fr;
2486
+ }
2487
+
2488
+ .kds-form-grid .field.full-width {
2489
+ grid-column: 1 / -1;
2490
+ }
2491
+ }
2492
+
2493
+ /* Demo-specific helpers */
2494
+ .demo-color-box {
2495
+ padding: var(--kds-spacing-8);
2496
+ border-radius: var(--kds-radius-md);
2497
+ text-align: center;
2498
+ color: white;
2499
+ }
2500
+
2501
+ .demo-color-box.primary-bg {
2502
+ background: var(--primary);
2503
+ }
2504
+
2505
+ .demo-color-box.secondary-bg {
2506
+ background: var(--secondary);
2507
+ }
2508
+
2509
+ .demo-color-box.accent-bg {
2510
+ background: var(--khipu-accent);
2511
+ }
2512
+
2513
+ .demo-grid-item {
2514
+ padding: var(--kds-spacing-4);
2515
+ border-radius: var(--kds-radius-md);
2516
+ text-align: center;
2517
+ }
2518
+
2519
+ .demo-grid-item.primary-container-bg {
2520
+ background: var(--primary-container);
2521
+ }
2522
+
2523
+ .demo-grid-item.secondary-container-bg {
2524
+ background: var(--secondary-container);
2525
+ }
2526
+
2527
+ .demo-surface-box {
2528
+ background: var(--surface-variant);
2529
+ padding: var(--kds-spacing-4);
2530
+ border-radius: var(--kds-radius-md);
2531
+ }
2532
+
2533
+ /* ========================================
2534
+ Responsive Utilities
2535
+ ======================================== */
2536
+
2537
+ @media (max-width: 768px) {
2538
+ .khipu-hero h1 {
2539
+ font-size: 2rem;
2540
+ }
2541
+
2542
+ .khipu-hero p {
2543
+ font-size: 1rem;
2544
+ }
2545
+
2546
+ .khipu-card-elevated {
2547
+ padding: 16px;
2548
+ }
2549
+
2550
+ .snackbar {
2551
+ min-width: calc(100% - 32px);
2552
+ left: 16px;
2553
+ right: 16px;
2554
+ transform: none;
2555
+ }
2556
+ }
2557
+