* {box-sizing: border-box; cursor: inherit; font-family: var(--fn-fm); margin: 0; padding: 0; scrollbar-width: thin; scrollbar-color: var(--pr-br) transparent;}
::-webkit-scrollbar {height: 6px; width: 6px;}
::-webkit-scrollbar-track {background-color: transparent;}
::-webkit-scrollbar-thumb {background-color: var(--pr-br); border-radius: var(--br-rs);}
::-webkit-scrollbar-thumb:hover {background-color: var(--sc-tx);}
::-webkit-scrollbar-thumb:active {background-color: var(--pr-tx);}
::placeholder {color: var(--sc-tx); font-size: var(--fn-xs);}
body {background-color: var(--pr-bg); overflow: hidden; -webkit-font-smoothing: antialiased;}
body.detail {background-color: var(--sc-sr);}
body.detail:has(.panels.flw) {overflow: auto;}
svg {color: var(--sc-tx); fill: currentColor; height: var(--ic-df); stroke: currentColor; width: var(--ic-df);}
svg>.icon-path {fill: currentColor; stroke: currentColor;}
svg.favorite[data-value='0'] {color: var(--sc-tx);}
svg.favorite[data-value='1'] {color: var(--fv-cl);}
a {color: inherit; text-decoration: none;}
b {color: var(--pr-tx);}
img {display: block; height: auto; max-width: 100%;}
img.logo {background-color: var(--pr-sf); border: none; border-radius: var(--br-rl); height: var(--lg-sz); object-fit: contain; width: var(--lg-sz);}
div.mist {backdrop-filter: blur(8px); background-color: rgba(15, 23, 42, 0.4); display: none; inset: 0; position: fixed; opacity: 0; transition: opacity 0.3s ease-in-out; -webkit-backdrop-filter: blur(8px);}
div.mist.show {display: block; opacity: 1; pointer-events: auto;}
button {
background-color: transparent;
border-radius: var(--br-rn);
border: var(--br-sn) solid transparent;
color: var(--sc-tx);
cursor: pointer;
direction: ltr;
display: grid;
font-family: inherit;
font-size: var(--fn-sm);
font-weight: 500;
gap: var(--sp-xs);
grid-auto-flow: column;
padding: var(--sp-sm) var(--sp-md);
place-items: center;
place-content: center;
position: relative;
transition: all 0.2s ease-in-out;
outline: none;
}
button>.icon>svg{display: grid; grid-auto-flow: column; height: var(--ic-sm); transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1); width: var(--ic-sm);}
button>.text {place-self: center left; white-space: nowrap;}
button:active {transform: scale(0.94);}
button:focus-visible {outline: var(--br-db) solid var(--pr-cl); outline-offset: var(--br-db);}
button:hover {background-color: var(--pr-hv); color: var(--pr-tx); filter: brightness(1.15);}
button:hover>.icon>svg {transform: scale(1.15);}
button:has(>.icon) {grid-template-columns: min-content; padding: var(--sp-sm);}
button:has(>.text) {grid-template-columns: auto;}
button:has(>.icon+.text) {grid-template-columns: min-content auto;}
button:has(>.icon+.dropdown) {grid-template-columns: min-content min-content;}
button:has(>.text+.dropdown) {grid-template-columns: auto min-content;}
button:has(>.icon+.text+.dropdown) {grid-template-columns: min-content auto min-content;}
button.op-bt {display: grid; grid-template-columns: min-content auto min-content; place-content: center stretch;}
button.primary {background-color: var(--pr-cl);color: var(--pr-oc);}
button.primary:hover {background-color: var(--pr-cn);color: var(--pr-on);}
button.secondary {background-color: var(--pr-sr);border-color: var(--pr-br);color: var(--pr-tx);}
button.secondary:hover {background-color: var(--pr-hv);}
button.success {background-color: var(--sc-cl);color: var(--sc-on);}
button.success:hover {background-color: var(--sc-cn);color: var(--sc-oc);}
button.warning {background-color: var(--wr-cl);color: var(--wr-on);}
button.warning:hover {
  background-color: var(--wr-cn);
  color: var(--wr-oc);
}
button.critical {
  background-color: var(--er-cl);
  color: var(--er-on);
}
button.critical:hover {
  background-color: var(--er-cn);
  color: var(--er-oc);
}
button.dashed {
  border: var(--br-sn) dashed var(--sc-tx);
}
button.dashed:hover {
  background-color: var(--pr-hv);
  color: var(--pr-tx);
}
button.dsbl {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.dropdown {padding-left: var(--sp-xs);}
.dropdown>svg {height: var(--ic-sm); width: var(--ic-sm);}
iframe {display: none;}
iframe.active {background-color: transparent; border: 0; display: block; height: 100%; width: 100%;}
iframe.dialog {border: 1px solid var(--pr-br); border-radius: var(--br-rn); background-color: var(--pr-sr); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; display: initial; inset: 0; margin: auto; opacity: 0; position: fixed; pointer-events: none; visibility: hidden;}
iframe.dialog.show {opacity: 1; pointer-events: auto; visibility: visible;}

input.control, select.control, textarea.control {
  background-color: var(--pr-bg);
  border: var(--br-sn) solid var(--pr-br);
  border-radius: var(--br-rn);
  color: var(--pr-tx);
  font-size: var(--fn-sm);
  outline: none;
  padding: var(--sp-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
  width: 100%;
}
input:-webkit-autofill:focus {border-color: var(--pr-cl);}
input:focus, select:focus, textarea:focus {background-color: transparent; border-color: var(--pr-cl);}
textarea.control {resize: none;}
select option {background-color: var(--pr-bg);color: var(--pr-tx);}
.control:-webkit-autofill,
.control:-webkit-autofill:hover,
.control:-webkit-autofill:focus,
.control:-webkit-autofill:active {
border-color: var(--pr-br);
caret-color: var(--pr-tx);
-webkit-box-shadow: 0 0 0 30px var(--pr-bg) inset !important;
-webkit-text-fill-color: var(--pr-tx) !important;
}
div.control {display: grid; gap: var(--sp-xs); place-items: center stretch; width: 100%;}
div.control>.label {place-items: center start;}
div.control>.label>label {font-size: var(--fn-xs); text-transform: capitalize; color: var(--pr-os);}
div.control.required >.label>label::after {content: " *"; color: var(--er-cl);}
div.control>.body {display: grid; gap: var(--sp-sm);}
div.control>.body.tlbr {grid-template-columns: auto max-content;}
div.control>.body>.toolbar {padding: 0; place-items: center; place-self: center;}
div.control>.body>.toolbar>.group {padding: 0; place-items: center;}
div.control>.info {color: var(--sc-tx); font-size: 12px;}
div.control>.info:empty {display: none}
div.control.hrzt {grid-auto-flow: column; grid-template-columns: max-content auto;}
div.control.hrzt>.label {max-width: var(--lbl-hz-wd); white-space: nowrap;}
div.control.hrzt>.info {grid-column: 1/span 2; grid-row: 2;}
div.control.vrtc {grid-auto-flow: row;}

div.control.checkbox {grid-template-columns: auto max-content; width: max-content;}
div.control.checkbox>.label {max-width: none; white-space: nowrap;}
div.control.checkbox>.label>label {pointer-events: none; text-transform: none;}
div.control.checkbox>.body>svg {color: var(--pr-cl);}
div.control.checkbox.first>.label {grid-column: 2;}
div.control.checkbox.first>.body {grid-column: 1;}

div.error>.label>label,
div.error>.info {color: var(--er-cl);}
div.error>.body>svg.icon {color: var(--er-cl);}
div.error>.body>input.control,
div.error>.body>select.control,
div.error>.body>textarea.control {border-color: var(--er-cl);}
div.error>.body>input.control:focus,
div.error>.body>select.control:focus,
div.error>.body>textarea.control:focus {box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);}

div.control.multiple {padding-bottom: 8px;}
div.control.multiple>.label {border-bottom: var(--br-sn) solid var(--pr-br); display: grid; grid-template-columns: auto max-content; height: 48px; max-height: 48px; padding: var(--sp-sm) var(--sp-lg);}
div.control.multiple>.label>label {font-size: 20px; font-weight: 600;}
div.control.multiple>.label>.toolbar {padding: 0;}
div.control.multiple>.label>.toolbar>.group {padding: 0;}
div.control.multiple>.label>.toolbar>.group>button>svg {height: 14px; width: 14px;}
div.control.multiple>.body {padding: var(--sp-md) 0 0 0;}
div.control.multiple>.body>.items {display: grid; gap: var(--sp-md); grid-auto-flow: row;}
div.control.multiple>.body>.items>.layout {border-top: var(--br-sn) solid var(--pr-br); padding-top: var(--sp-md);}
div.control.multiple>.body>.items>.layout:first-child {border-top: none; padding-top: 0;}

.app-page {background-color: var(--sc-sr); display: grid; grid-template-rows: max-content 1fr max-content; height: 100vh; overflow: hidden; width: 100%;}
.app-page>.app-body.pg-default {padding: var(--sp-lg);}
.app-page>.app-body.pg-immersive {padding: 0; overflow: hidden;}
.app-page>.app-body>.panels {padding: 0;}
.app-page>.app-body>.panels>.panel {padding: 0;}
.app-page>.app-header {
display: grid;
grid-template-columns: max-content max-content 1fr;
grid-template-rows: auto auto;
align-items: center;
column-gap: var(--sp-md);
padding: var(--sp-sm) var(--sp-md);
background: linear-gradient(180deg, var(--pr-sr) 0%, var(--pr-bg) 100%);
margin: 0;
border: none;
border-bottom: var(--br-sn) solid var(--pr-br);
border-bottom-left-radius: var(--br-rl);
border-bottom-right-radius: var(--br-rl);
justify-self: stretch;
padding-top: 0;
}
.app-page>.app-header>.icon {
grid-row: 1/span 2;
display: grid;
place-content: center;
width: var(--ic-hg);
height: var(--ic-hg);
background-color: var(--pr-al);
color: var(--pr-cl);
border-radius: var(--br-rl);
overflow: hidden;
}
.app-page>.app-header>.icon>svg {height: var(--ic-bg); width: var(--ic-bg);}
.app-page>.app-header>.title {
grid-row: 1 / 2;
padding: 0;
min-height: auto;
font-size: var(--fn-lg);
font-weight: 700;
color: var(--pr-tx);
align-self: end;
line-height: 1.2;
}
.app-page>.app-header>.subtitle {
grid-row: 2 / 3;
font-size: var(--fn-sm);
color: var(--sc-tx);
align-self: start;
}
.app-page>.app-header>.toolbar {
grid-row: 1 / span 2;
grid-column: 3 / 4;
padding: 0;
}
.app-page>.app-header>.toolbar>.group:not(:last-child) {
border-right: none;
padding-right: 0;
}
.app-page>section.app-body {
backdrop-filter: blur(var(--sp-md));
background-color: var(--sc-sr);
border: none;
border-radius: 0;
box-shadow: none; /*0 25px 50px -12px rgba(0, 0, 0, 0.5)*/
height: 100%;
margin: 0;
max-width: none;
overflow-y: auto;
width: 100%;
-webkit-backdrop-filter: blur(var(--sp-md));
}

.toolbar {display: grid; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); height: max-content; place-items: center; width: 100%;}
.toolbar>.group {display: grid; gap: var(--sp-sm); grid-auto-flow: column; height: max-content; place-items: center; width: 100%;}
.toolbar>.group>button {width: 100%;}
.toolbar>.group>button>.icon {}
.toolbar>.group>button>.icon>svg {}

.config {display: grid; grid-template-rows: max-content auto; height: 100%; width: 100%; gap: var(--sp-md); overflow: hidden; padding: var(--sp-lg);}
.config>.header{height: max-content; position: relative; z-index: 10; transition: box-shadow 0.3s ease;}
.config>.body {height: 100%; overflow-y: auto; padding-bottom: var(--sp-lg); width: 100%;}

.config-item {background-color: var(--pr-sr); border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rl); display: grid; gap: var(--sp-xs) var(--sp-md); grid-template-columns: 48px 1fr max-content; grid-template-rows: max-content max-content 1fr; grid-template-areas: "icon title status" "icon desc desc" "tools tools tools"; padding: var(--sp-xl); transition: box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;}
.config-item:hover {box-shadow: 0 4px 16px rgba(0,0,0,0.15); border-color: var(--pr-cl);}
.config-item:not(.enabled) {background-color: var(--sc-sr); opacity: 0.7;}
.config-item:not(.enabled):hover {opacity: 1;}
.config-item>.icon {align-items: center; background-color: var(--pr-sr); border-radius: var(--br-rl); border: var(--br-sn) solid var(--pr-br);  color: var(--pr-cl); grid-area: icon; display: flex; justify-content: center; height: var(--ic-xl); width: var(--ic-xl);}
.config-item:not(.enabled)>.icon {background-color: var(--pr-sr);}
.config-item>.icon>svg {color: var(--sc-tx); height: var(--sp-xl); width: var(--sp-xl);}
.config-item>.text {grid-area: title; font-size: 16px; font-weight: 600; color: var(--pr-tx); align-self: center;}
.config-item>.status {align-items: center; align-self: center; background-color: var(--pr-br); color: var(--sc-tx); border-radius: 999px; display: flex; font-size: var(--fn-xs); font-weight: 600; gap: var(--sp-xs); grid-area: status; height: max-content; letter-spacing: 0.5px; padding: var(--sp-xs) var(--sp-sm); text-transform: uppercase;}
.config-item>.status>.icon {display: flex; align-items: center;}
.config-item>.status>.icon>svg {height: var(--ic-sm); width: var(--ic-sm);}
.config-item.enabled>.icon {background-color: var(--en-cn); border-color: transparent;}
.config-item.enabled>.icon>svg {color: var(--en-cl);}
.config-item.enabled>.status {background-color: var(--en-cn);}
.config-item.enabled>.status>.icon {background-color: transparent; border-color: transparent;}
.config-item.enabled>.status>.icon>svg {color: var(--en-cl);}
.config-item.enabled>.status>.text {color: var(--en-cl);}
.config-item>.description {grid-area: desc; font-size: var(--fn-sm); line-height: 1.55; color: var(--sc-tx); margin-top: var(--sp-xs); align-self: start; text-align: justify;}
.config-item>.description>b {color: var(--pr-tx);}
.config-item>.toolbar {grid-area: tools; margin-top: var(--sp-md); padding: 0; place-self: end stretch;}
.config-item>.toolbar>.group {padding: 0;}

.scrolled>.header {box-shadow: 0 32px 32px -16px rgba(0, 0, 0, 0.4);}

.ui-container {background-color: var(--pr-sr); display: grid; grid-auto-flow: row; grid-template-rows: max-content auto; overflow: hidden; width: 100%;}
.ui-container:has(>.header+.body+.footer) {grid-template-rows: max-content auto max-content;}
.ui-container>.header {background-color: transparent; border-bottom: var(--br-sn) solid var(--pr-br);}
.ui-container>.header>.title {padding: var(--sp-sm) var(--sp-lg);}
.ui-container>.header>.title>.toolbar {padding: 0;}
.ui-container>.header>.title>.toolbar>.group {padding: 0;}
.ui-container>.header>.title>.toolbar>.group>button {}
.ui-container>.header>.title>.toolbar>.group>button>.icon {}
.ui-container>.header>.title>.toolbar>.group>button>.icon>svg {height: var(--ic-sm); width: var(--ic-sm);}
.ui-container>.body {color: var(--pr-os); display: grid; grid-auto-flow: row; height: 100%; padding: var(--sp-lg); place-items: start stretch; width: 100%;}
.ui-container>.footer {background-color: transparent; border-top: var(--br-sn) solid var(--pr-br);}
.ui-container>.footer>.toolbar {padding: var(--sp-sm) var(--sp-lg); min-height: auto;}
.ui-container.cn-brls {border: none; border-radius: 0;}
.ui-container.cn-data {border: none; margin-bottom: 0;}
.ui-container.cn-data>.header>.title {height: 48px; max-height: 48px;}
.ui-container.cn-data>.body {padding: var(--sp-md) 0;}
.ui-container.cn-dlg {border: none; border-radius: 0; box-shadow: none; height: 100%; margin: 0;}
.ui-container.cn-dlg>.body {overflow: auto; padding: 0;}
.ui-container.cn-dlg>.body .panels {padding: 0;} 
.ui-container.cn-dlg>.body .panel {padding: var(--sp-sm) var(--sp-lg);}
.ui-container.cn-dlg>.footer>.toolbar {gap: 0; padding: 0;}
.ui-container.cn-dlg>.footer>.toolbar>.group {gap: 0; padding: 0;}
.ui-container.cn-dlg>.footer>.toolbar>.group>button {border-radius: 0;}
.ui-container.cn-frame {background-color: var(--pr-sr); border-radius: var(--br-rn); border: var(--br-sn) solid var(--pr-br); box-shadow: var(--sh-s1);}
.ui-container.cn-frame>.header {border-bottom: var(--br-sn) solid var(--pr-br);}
.ui-container.cn-frame>.header>.title {padding: var(--sp-sm) var(--sp-lg);}
.ui-container.cn-frame>.body {color: var(--pr-sr); padding: var(--sp-lg);}
.ui-container.cn-frame>.footer {background-color: transparent; border-top: var(--br-sn) solid var(--pr-br);}
.ui-container.cn-frame>.footer>.toolbar {padding: var(--sp-sm) var(--sp-lg); min-height: auto;}
.ui-container.cn-menu {display: none;}
.ui-container.cn-menu.show {}
.ui-container.cn-msbx {box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; height: max-content; inset: 0; margin: auto; max-width: 600px; position: fixed;animation: ms-bx-popup 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;}
.ui-container.cn-msbx.error>.header {background-color: var(--er-cl); }
.ui-container.cn-msbx.success>.header {background-color: var(--sc-cl);}
.ui-container.cn-msbx.warning>.header {background-color: var(--wr-cl);}
.ui-container.cn-msbx.info>.header {background-color: var(--pr-cl);}
.ui-container>.config {display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); place-items: stretch;}


.layout {display: grid; grid-auto-flow: row; row-gap: var(--sp-sm); place-content: start stretch; width: 100%;}
.layout-row {column-gap: var(--sp-sm); display: grid; grid-auto-flow: column; width: 100%;}
.layout-col {display: grid; grid-auto-flow: row; padding: 0; place-items: center start; min-width: 0;}
.ui-tabs {display: grid;}
.ui-tabs>.tabs {display: grid; gap: 0; grid-auto-flow: column; overflow: hidden; place-content: stretch start;}
.ui-tabs>.tabs>.tab {background-color: var(--pr-sr); border-right: var(--br-sn) solid var(--pr-br); cursor: pointer; display: grid; gap: var(--sp-ty); grid-template-columns: max-content auto; height: 100%; max-width: var(--tab-mx-wd); place-items: center; transition: all 0.25s ease-out; user-select: none; padding: var(--sp-ty) var(--sp-md); width: max-content;}
.ui-tabs>.tabs>.tab:has(>.close) {grid-template-columns: max-content auto max-content; padding: var(--sp-ty) var(--sp-xs) var(--sp-ty) var(--sp-md);}
.ui-tabs>.tabs>.tab>.icon {}
.ui-tabs>.tabs>.tab>.icon>svg {color: var(--pr-os);}
.ui-tabs>.tabs>.tab>.text {color: var(--pr-os); cursor: inherit; font-size: var(--fn-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; min-width: 0;}
.ui-tabs>.tabs>.tab>.close {place-content: start;}
.ui-tabs>.tabs>.tab>.close>button {padding: var(--sp-xs);}
.ui-tabs>.tabs>.tab>.close>button>.icon>svg {height: var(--ic-sm); width: var(--ic-xs);}
.ui-tabs>.actions {}
.ui-tabs>.actions>.toolbar {padding: 0;}
.ui-tabs>.actions>.toolbar>.group {gap: 0; padding: 0;}
.ui-tabs>.actions>.toolbar>.group>button {border-radius: 0;}
.ui-tabs>.actions>.toolbar>.group>button:first-child {border-bottom-left-radius: var(--br-rn); border-top-left-radius: var(--br-rn);}
.ui-tabs>.actions>.toolbar>.group>button:last-child {border-bottom-right-radius: var(--br-rn); border-top-right-radius: var(--br-rn);}
.ui-tabs.bottom {}
.ui-tabs.left {}
.ui-tabs.right {}
.ui-tabs.top {grid-template-columns: auto max-content; height: max-content; overflow: hidden; width: 100%;}
.nav-strip {gap: var(--sp-sm);}
.nav-strip>.tabs {border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rn);}
.nav-strip>.actions {border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rn);}
.nav-strip>.tabs>.tab.active {border-bottom: var(--br-sn) solid var(--gl-cl); box-shadow: var(--gl-sh);}
.nav-strip>.tabs>.tab.active>.text {text-shadow: var(--sh-tx);}

.context-trigger {position: relative;}
.context-menu {display: none;}
.context-menu:popover-open {background-color: var(--pr-sr); border-radius: var(--br-rn); border: var(--br-sn) solid var(--pr-br); display: grid; grid-auto-flow: row; left: auto; bottom: auto; margin: 0; overflow: hidden; position: absolute; right: anchor(right); top: anchor(bottom);}
.context-menu>.cn-sctn {border-bottom: var(--br-sn) solid var(--pr-br); display: grid; grid-auto-flow: row; width: 100%;}
.context-menu>.cn-sctn:last-child {border-bottom: none;}
.context-menu>.cn-sctn>.header {background-color: var(--sc-sr); border-bottom: var(--br-sn) solid var(--pr-br);}
.context-menu>.cn-sctn>.header>.title {min-height: auto; padding: var(--sp-sm) var(--sp-md);}
.context-menu>.cn-sctn>.header>.title>.text {color: var(--pr-cl); font-size: var(--fn-xs); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;}
.context-menu>.cn-sctn>.body {display: grid; grid-auto-flow: row; max-height: var(--mnu-mx-hg); overflow-y: auto; overflow-x: hidden; padding: 0; width: 100%;}
.context-menu>.cn-sctn>.body>.item {border-radius: 0; color: var(--pr-tx); cursor: pointer; display: grid; gap: var(--sp-md); grid-template-columns: min-content minmax(0, 1fr) min-content; margin: 0; place-items: center start; padding: var(--sp-sm) var(--sp-md); transition: all 0.15s ease;}
.context-menu>.cn-sctn>.body>.item:hover {background-color: var(--pr-hv);}
.context-menu>.cn-sctn>.body>.item:active {background-color: var(--sys-color-focus); transform: none;}
.context-menu>.cn-sctn>.body>.item>svg {display: block; height: var(--ic-md); transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); width: var(--ic-md);}
.context-menu>.cn-sctn>.body>.item:hover> svg {color: var(--pr-cl); transform: scale(1.15);}
.context-menu>.cn-sctn>.body>.item>div.text {font-size: var(--fn-sm); font-weight: 500; width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.title {background-color: var(--pr-sr); color: var(--pr-os); display: grid; gap: var(--sp-xs); height: max-content; place-items: center start; width: 100%;}
.title>.swap {place-self: center;}
.title>.swap:hover {color: var(--pr-cl);}
.title>.swap>svg {height: var(--ic-md); width: var(--ic-md);}
.title>.icon {height: var(--ic-df); width: var(--ic-df);}
.title>.text {cursor: inherit; font-size: var(--fn-bg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; min-width: 0;}
.title:has(>.text) {grid-template-columns: minmax(0, 1fr);}
.title:has(>.text+.toolbar) {grid-template-columns: minmax(0, 1fr) max-content;}
.title:has(>.icon+.text) {grid-template-columns: max-content minmax(0, 1fr);}
.title:has(>.icon+.text+.toolbar) {grid-template-columns: max-content minmax(0, 1fr) max-content;}
.title:has(>.swap+.text) {grid-template-columns: min-content minmax(0, 1fr);}
.title:has(>.swap+.text+.toolbar) {grid-template-columns: min-content minmax(0, 1fr) max-content;}
.title:has(>.swap+.icon+.text) {grid-template-columns: min-content max-content minmax(0, 1fr);}
.title:has(>.swap+.icon+.text+.toolbar) {grid-template-columns: min-content max-content minmax(0, 1fr) max-content;}
.title>div.toolbar {padding: 0;}

.toastbar {display: none; flex-direction: column; gap: var(--sp-sm); max-width: 380px; pointer-events: none; position: fixed; right: var(--sp-lg); top: var(--sp-lg); width: calc(100vw - 48px); z-index: 10000;}
.toastbar {display: flex;}
.toastbar:empty {display: none;}
.toastbar>.toast {background-color: var(--pr-sr); border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rn); box-shadow: var(--sh-s2); column-gap: var(--sp-md); display: grid; grid-template-columns: max-content 1fr max-content; row-gap: var(--sp-xs); padding: 12px 16px; pointer-events: auto; animation: toastSlideIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;}
.toastbar>.toast>button>.icon>svg {height: var(--ic-sm); width: var(--ic-sm);}
.toastbar>.toast.success {background-image: linear-gradient(rgba(76, 175, 80, 0.12), rgba(76, 175, 80, 0.12)); border-color: var(--sc-cl);}
.toastbar>.toast.success>button>.icon>svg {color: var(--sc-cl);}
.toastbar>.toast.error {background-image: linear-gradient(rgba(244, 63, 94, 0.12), rgba(244, 63, 94, 0.12)); border-color: var(--er-cl);}
.toastbar>.toast.error>button>.icon>svg {color: var(--er-cl);}
.toastbar>.toast.info {border-color: var(--in-cl);}
.toastbar>.toast.info>button>.icon>svg {color: var(--in-cl);}
.toastbar>.toast.warning {background-image: linear-gradient(rgba(242, 183, 47, 0.12), rgba(242, 183, 47, 0.12)); border-color: var(--wr-cl);}
.toastbar>.toast.warning>button>.icon>svg {color: var(--wr-cl);}
.toastbar>.toast.shake {animation: toastReincidenceShake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;}
.toastbar>.toast>.icon {grid-column: 1; grid-row: 1 / span 2; margin-top: 2px;}
.toastbar>.toast>.icon>svg {height: var(--ic-df); width: var(--ic-df);}
.toastbar>.toast>.title {background-color: transparent; color: var(--pr-tx); display: block; font-size: 14px; font-weight: 600; grid-column: 2; grid-row: 1; padding: 0; margin: 0; min-height: max-content;}
.toastbar>.toast>.text {color: var(--sc-tx); display: block; font-size: 13px; grid-column: 2; grid-row: 2; line-height: 1.4; margin: 0; text-align: justify;}
.toastbar>.toast>button {grid-column: 3; grid-row: 1/span 2;}
.toastbar>.toast>button {background-color: transparent; color: var(--sc-tx); border: none; cursor: pointer; padding: 4px; border-radius: 4px; height: max-content; min-width: 0; width: max-content;}
.toastbar>.toast>button:hover {background-color: var(--pr-hv); color: var(--pr-tx);}

.kanban {display: grid; gap: var(--sp-md); grid-template-rows: auto; height: 100%; width: 100%;}
.kanban.header {grid-template-rows: max-content auto;}
.kanban-header>.toolbar {padding: 0;}
.kanban-header>.toolbar>.group {padding: 0; place-items: end start;}
.kanban-container {display: grid; gap: var(--sp-md); grid-template-columns: 100%; height: 100%; width: 100%;}
.kanban-container.back {grid-template-columns: var(--kbn-cl-wd) auto;}
.kanban-container.finish {grid-template-columns: auto var(--kbn-cl-wd);}
.kanban-container.back.finish {grid-template-columns: var(--kbn-cl-wd) auto var(--kbn-cl-wd);}
.kanban-container>.ui-container.kanban>.body.items {overflow-y: auto;}
.kanban-aside {border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rn); background-color: var(--pr-sr); display: grid; gap: 0; grid-template-rows: 1fr 1fr; height: 100%; overflow: hidden;}
.kanban-aside>.ui-container:first-child {border-bottom: var(--br-sn) solid var(--pr-br);}
.kanban-stages {border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rn); background-color: var(--pr-sr); display: grid; gap: var(--sp-sm); grid-template-rows: max-content auto max-content auto; overflow-x: auto; padding: var(--sp-md);}
.kanban-stages>.title {color: var(--sc-tx); font-size: var(--fn-xs); font-weight: 700; letter-spacing: 1.2px; padding-left: var(--sp-sm); text-transform: uppercase;}
.kanban-stages>.stages {display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--sp-md); flex: 1 1 auto; padding-bottom: var(--sp-sm);}
.kanban-stages>.stages>.ui-container {flex: 0 0 var(--kbn-cl-wd); height: 100%; width: var(--kbn-cl-wd);}

.loading-container {
  align-items: center; background-color: var(--pr-sr); backdrop-filter: blur(12px); border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rn); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); display: none;
  flex-direction: column; gap: 16px; justify-content: center; left: 50%; opacity: 0; position: fixed; top: 50%; transform: translate(-50%, -50%); padding: var(--sp-xl) var(--sp-hg); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); -webkit-backdrop-filter: blur(12px);
}
.loading-container.show {display: flex; opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);}
.loading-container>.animation {color: var(--pr-cl); height: 80px; width: 80px;}
.loading-container>.text {color: var(--sc-tx); font-size: 14px; font-weight: 500; letter-spacing: 0.5px; text-align: center;}

.messages {color: var(--pr-os); display: grid; gap: var(--sp-md); grid-auto-flow: row; line-height: 1.6;}
.messages>h1,
.messages>h2,
.messages>h3,
.messages>h4,
.messages>h5,
.messages>h6{color: var(--pr-tx); font-weight: 600; line-height: 1.3; margin: 0;}
.messages h1 {font-size: 24px; margin-top: var(--sp-sm); margin-bottom: var(--sp-xs);}
.messages h2 {font-size: 20px;}
.messages h3 {font-size: 18px;}
.messages>p.text {color: var(--sc-tx); font-size: 14px; margin: 0; text-align: justify;}
.messages.title>p.text {color: var(--sc-tx); font-size: 20px; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.messages>p.note {background-color: var(--pr-hv); border-left: 4px solid var(--pr-cl); border-radius: 0 var(--br-rn) var(--br-rn) 0; color: var(--pr-tx); font-size: 14px; margin: 0; padding: var(--sp-md);}
.messages>a {color: var(--pr-cl); text-decoration: none; font-weight: 500; transition: opacity 0.2s ease; width: max-content;}
.messages a:hover {text-decoration: underline; opacity: 0.8;}
.messages>p.note {color: var(--sc-text); font-size: var(--fn-xs); margin: var(--sp-sm) 0; line-height: 1.4;}
.messages>p.note.small,
.messages>p.small,
.messages>div.small {font-size: var(--fn-ty); color: #888;}

.panels {display: grid; gap: var(--sp-md); min-height: 0; padding: var(--sp-lg); width: 100%;}
.panels.cols {grid-auto-flow: column;}
.panels.rows {grid-auto-flow: row;}
.panels>.panel {display: grid; gap: var(--sp-md); grid-auto-flow: row; padding: var(--sp-lg); place-content: stretch;}
.panels.flw {}
.panels.fxd {height: 100%; overflow-x: hidden; overflow-y: auto;}
.panels.fxd>.panel {overflow: hidden;}
form>.panels {gap: var(--sp-sm);}
body.detail>form>.panels>.panel {border: 0;}
body.detail>.panels {padding: 0;}
body.detail>.panels>.panel {padding: 0;}

.process-tracker {align-items: center; background-color: transparent; display: grid; grid-template-columns: 1fr max-content; gap: var(--sp-xs) var(--sp-md); height: max-content; padding: var(--sp-lg); place-self: center; width: 100%;}
.process-tracker.box {background-color: var(--pr-sr); border: var(--br-sn) solid var(--pr-cl); border-radius: var(--br-rn);}
.process-tracker>.main {display: grid; gap: var(--sp-md); grid-column: 1/span 2; grid-auto-flow: row; place-items: center; padding-bottom: var(--sp-md);}
.process-tracker>.main>p {color: var(--pr-tx); font-size: var(--fn-nm); font-weight: 500; margin: 0; text-align: center;}
.process-tracker>.main>svg {animation: spin 2s linear infinite; fill: var(--pr-cl); height: var(--ic-xl); width: var(--ic-xl);}
.process-tracker>.stage {color: var(--sc-tx); font-size: var(--fn-sm); grid-column: 1; overflow: hidden; padding-top: var(--sp-sm); text-align: left; text-overflow: ellipsis; white-space: nowrap;}
.process-tracker>.percentage {color: var(--sc-tx); font-size: var(--fn-sm); font-weight: 600; font-variant-numeric: tabular-nums; grid-column: 2; min-width: 40px; text-align: right; padding-top: var(--sp-sm);}
.process-tracker>progress {appearance: none; background-color: var(--pr-br); border-radius: 4px; border: none; grid-column: 1 / span 2; height: var(--prg-hg); margin-bottom: var(--sp-sm); overflow: hidden; width: 100%; -webkit-appearance: none;}
.process-tracker>progress::-webkit-progress-bar {background-color: var(--pr-br); border-radius: 4px;}
.process-tracker>progress::-webkit-progress-value {background-color: var(--pr-cl); border-radius: 4px; transition: width 0.3s ease;}
.process-tracker>.details {display: none;}
.process-tracker>.details.show {background-color: var(--sc-sr); border: var(--br-sn) solid var(--pr-br); box-shadow: inset 0 var(--sp-ty) var(--sp-sm) rgba(0, 0, 0, 0.15); border-radius: var(--br-rn); display: block; grid-column: 1 / -1; margin-top: var(--sp-md); height: var(--prc-dt-hg); overflow-y: auto; padding: var(--sp-md);}
.process-tracker>.details>.items {display: grid; grid-auto-flow: row; gap: var(--sp-xs);}
.process-tracker>.details>.items>.message {align-items: center; display: grid; grid-template-columns: max-content auto max-content; gap: var(--sp-sm); padding: var(--sp-xs) var(--sp-sm); border-bottom: var(--br-sn) solid var(--pr-br);}
.process-tracker>.details>.items>.message:last-child {border-bottom: none;}
.process-tracker>.details>.items>.message>.text {font-size: var(--fn-sm); color: var(--sc-tx);}
.process-tracker>.details>.items>.message.title {background-color: rgba(0, 0, 0, 0.1); padding-top: var(--sp-sm); padding-bottom: var(--sp-sm);}
.process-tracker>.details>.items>.message.title>.text {color: var(--pr-cl); font-weight: 600; text-transform: uppercase; font-size: var(--fn-xs); letter-spacing: 0.5px;}
.process-tracker>.details>.items>.message.title .icon>svg {fill: var(--pr-cl);}
.process-tracker>.details>.items>.message>.icon>svg,
.process-tracker>.details>.items>.message>.status>svg {fill: var(--sc-tx); height: var(--ic-sm); width: var(--ic-sm);}
.process-tracker>.details>.items>.message.secondary>.status>svg {color: var(--pr-tx);}
.process-tracker>.details>.items>.message.success>.status>svg {color: var(--sc-cl);}
.process-tracker>.details>.items>.message.warning>.status>svg {color: var(--wr-cl);}
.process-tracker>.details>.items>.message.error>.status>svg {color: var(--er-cl);}
.process-tracker>.label {color: var(--pr-cl); cursor: pointer; font-size: var(--fn-sm); grid-column: 1 / -1; margin-top: var(--sp-md); text-align: center; transition: opacity 0.2s; user-select: none;}
.process-tracker>.label:hover {opacity: 0.8;text-decoration: underline;}

.steps {display: grid; gap: var(--sp-lg); height: 100%; width: 100%;}
.steps>.items {border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rn); display: grid; padding: var(--sp-lg); grid-auto-flow: column; width: 100%;}
.steps>.items>.step {display: grid; grid-auto-flow: row; grid-template-columns: auto; grid-template-rows: max-content max-content; place-items: center; position: relative; z-index: 2;}
.steps>.items>.step:after {background-color: var(--pr-br); content: ''; height: var(--br-db); left: calc(50% + var(--stp-ic-hf)); position: absolute; top: var(--stp-ic-hf); width: calc(50% - var(--stp-ic-hf)); z-index: 1;}
.steps>.items>.step:before {background-color: var(--pr-br); content: ''; height: var(--br-db); left: 0px; position: absolute; top: var(--stp-ic-hf); width: calc(50% - var(--stp-ic-hf)); z-index: 1;}
.steps>.items>.step:first-child:before {display: none;}
.steps>.items>.step:last-child:after {display: none;}
.steps>.items>.step>.icon {background-color: var(--pr-br); border-radius: 50%; display: grid; height: var(--ic-hg); place-content: center;width: var(--ic-hg);}
.steps>.items>.step>.icon>svg {height: var(--ic-lg); width: var(--ic-lg);}
.steps>.items>.step>.text {color: var(--sc-tx); font-size: var(--fn-nm);}
.steps>.items>.step.active { background-color: transparent; }
.steps>.items>.step.active:after { background-color: var(--pr-cl); }
.steps>.items>.step.active:before { background-color: var(--pr-cl); }
.steps>.items>.step.active>.icon { background-color: var(--pr-cl); }
.steps>.items>.step.active>.icon>svg {color: var(--pr-oc);}
.steps>.items>.step.active>.text {color: var(--pr-cl); }
.steps>.items>.step.error {background-color: transparent; }
.steps>.items>.step.error:after {background-color: var(--er-cl); }
.steps>.items>.step.error:before {background-color: var(--er-cl); }
.steps>.items>.step.error>.icon {background-color: var(--er-cl);}
.steps>.items>.step.error>.icon>svg {color: var(--er-on);}
.steps>.items>.step.error>.text { color: var(--er-cl);}
.steps>.items>.step.success { background-color: transparent; }
.steps>.items>.step.success:after { background-color: var(--sc-cl); }
.steps>.items>.step.success:before {background-color: var(--sc-cl); }
.steps>.items>.step.success>.icon {background-color: var(--sc-cl); color: var(--sc-on);}
.steps>.items>.step.success>.icon>svg {color: var(--sc-on);}
.steps>.items>.step.success>.text { color: var(--sc-cl); }
.steps.hrzt {grid-auto-flow: row; grid-template-columns: auto; grid-template-rows: max-content auto max-content;}
.steps.hrzt>.items {display: grid; grid-auto-flow: column; place-items: center stretch;}
.steps.hrzt.smry {grid-template-columns: var(--stp-sm-wd) auto; grid-template-rows: max-content auto max-content;}
.steps.hrzt.smry>.items { grid-column: 1/span 2; grid-row: 1; }
.steps.hrzt.smry>.body { grid-column: 2; grid-row: 2; }
.steps.hrzt.smry>.summary { grid-column: 1; grid-row: 2; }
.steps.hrzt.smry>.footer { grid-column: 1/span 2; grid-row: 3; }
.steps.vrtc {grid-auto-flow: column; grid-template-columns: max-content auto;}
.steps.vrtc.summary {grid-template-columns: max-content auto var(--stp-vr-wd);}
.steps>.body {border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rn); overflow: hidden;}
.steps>.summary {border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rn); display: grid; gap: var(--sp-sm); grid-template-rows: max-content max-content auto; padding: var(--sp-md);}
.steps>.summary>.text {color: var(--pr-tx); font-size: var(--fn-nm); font-weight: 600; padding: var(--sp-xs);}
.steps>.summary>.subtext {color: var(--sc-tx); font-size: var(--fn-sm); padding: var(--sp-sm); text-align: right; }
.steps>.summary>.content {line-height: 1.5; padding: var(--sp-sm); text-align: left; overflow: auto; text-align: justify;}
.steps>.footer>.toolbar {padding: 0px;} 
.steps>.footer>.toolbar>.group {}

.ai-st {align-items: start;}
.ai-cn {align-items: center;}
.ai-en {align-items: end;}
.ai-sh {align-items: stretch;}

.ac-st {align-content: start;}
.ac-cn {align-content: center;}
.ac-en {align-content: end;}
.ac-sh {align-content: stretch;}

.as-st {align-self: start;}
.as-cn {align-self: center;}
.as-en {align-self: end;}
.as-sh {align-self: stretch;}

.ji-st {justify-items: start;}
.ji-cn {justify-items: center;}
.ji-en {justify-items: end;}
.ji-sh {justify-items: stretch;}

.jc-st {justify-content: start;}
.jc-cn {justify-content: center;}
.jc-en {justify-content: end;}
.jc-sh {justify-content: stretch;}

.js-st {justify-self: start;}
.js-cn {justify-self: center;}
.js-en {justify-self: end;}
.js-sh {justify-self: stretch;}

.al-cn {text-align: center;}
.al-js {text-align: justify;}
.al-lf {text-align: left;}
.al-rf {text-align: right;}

.hide {display: none !important;}

@keyframes ms-bx-popup {0% {opacity: 0; transform: scale(0.95);}100% {opacity: 1; transform: scale(1);}}
@keyframes spin {100%{transform: rotate(360deg);}}
@keyframes toastSlideIn {0%{opacity: 0; transform: translateX(50px) scale(0.9);} 100% {opacity: 1; transform: translateX(0) scale(1);}}
@keyframes toastReincidenceShake {0%, 100% {transform: translateX(0);} 20%, 60% {transform: translateX(-6px);} 40%, 80% {transform: translateX(6px);}}

.grid,
.scheduler {
display: grid;
gap: var(--sp-md);
grid-template-rows: max-content auto max-content;
height: 100%;
overflow: hidden;
width: 100%;
}

.grid-body {background-color: var(--pr-sr); border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rl); display: grid; grid-template-columns: 60px auto; grid-template-rows: 40px auto; height: 100%; overflow: hidden; width: 100%;}
.grid-body.no-rows {grid-template-columns: auto;}
.grid-body>.corner {background-color: var(--pr-br); border-bottom: var(--br-sn) solid var(--pr-br); border-right: var(--br-sn) solid var(--pr-br); grid-column: 1; grid-row: 1; left: 0; position: sticky; top: 0; z-index: 20;}
.grid-body>.cols-container {background-color: var(--pr-br); border-bottom: var(--br-sn) solid var(--pr-br); display: grid; grid-column: 2; grid-row: 1; overflow: hidden; position: relative; z-index: 18;}
.grid-body.no-rows>.cols-container {grid-column: 1;}
.grid-body>.cols-container>.cols {display: grid; grid-auto-flow: column; left: 0; position: sticky; top: 0; }
.grid-body>.cols-container>.cols>.column {align-self: center; border-right: var(--br-sn) solid var(--pr-br); color: var(--pr-tx); font-size: var(--fn-sm); font-weight: 600; padding: var(--sp-sm) var(--sp-md); text-align: center; text-transform: capitalize;}
.grid-body>.rows-container {background-color: var(--pr-sr); border-right: var(--br-sn) solid var(--pr-br); display: grid; grid-column: 1; grid-row: 2; grid-auto-flow: row; grid-auto-rows: 40px; overflow: hidden; position: relative; z-index: 16;}
.grid-body>.rows-container>.rows {left: 0; position: absolute; top: 0; width: 100%;}
.grid-body>.rows-container>.rows>.row {border-bottom: var(--br-sn) solid var(--pr-br); color: var(--sc-tx); font-size: var(--fn-xs); height: 40px; line-height: 40px; text-align: center;}
.grid-body>.data-container {grid-column: 2; grid-row: 2; height: 100%; overflow: auto; position: relative; width: 100%; z-index: 10;}
.grid-body.no-rows>.data-container {grid-column: 1;}
.grid-body>.data-container>.data {display: grid; grid-auto-flow: row; left: 0; position: absolute; right: 0; top: 0; width: auto;}
.grid-body>.data-container>.data>.row {border-bottom: var(--br-sn) solid var(--pr-br); display: grid; height: 40px;}
.grid-body>.data-container>.data>.row>.cell {background-color: var(--pr-sr); border-right: var(--br-sn) solid var(--pr-br); color: var(--pr-tx); font-size: var(--fn-sm); height: 100%; overflow: hidden; padding: 0 var(--sp-md); text-overflow: ellipsis; white-space: nowrap;}
.grid-body>.data-container>.data>.row.interactive {cursor: pointer; transition: background-color 0.2s ease;}
.grid-body>.data-container>.data>.row.interactive:hover>.cell {background-color: var(--pr-br);}
.grid-body.scrolled>.corner {box-shadow: 0 32px 32px -16px rgba(0, 0, 0, 0.4);}
.grid-body.scrolled>.cols-container {box-shadow: 0 32px 32px -16px rgba(0, 0, 0, 0.4);}

.scheduler>.scheduler-body>.monthly>.data-container>.data {grid-template-rows: repeat(6, 1fr); height: 100%;}
.scheduler>.scheduler-body>.yearly>.data-container>.data {height: 100%;}
.scheduler>.scheduler-body>.monthly>.data-container>.data>.row,
.scheduler>.scheduler-body>.yearly>.data-container>.data>.row {height: auto;}
/*.scheduler>.scheduler-body>.daily>.data-container>.data>.row:last-child,
.scheduler>.scheduler-body>.weekly>.data-container>.data>.row:last-child,*/
.scheduler>.scheduler-body>.agenda>.data-container>.data>.row:last-child,
.scheduler>.scheduler-body>.monthly>.data-container>.data>.row:last-child,
.scheduler>.scheduler-body>.yearly>.data-container>.data>.row:last-child {border-bottom: none;}
.scheduler>.scheduler-body>.monthly>.data-container>.data>.row>.cell {height: auto;}
.scheduler>.scheduler-body>.agenda>.data-container>.data>.row>.cell:last-child,
.scheduler>.scheduler-body>.monthly>.data-container>.data>.row>.cell:last-child,
.scheduler>.scheduler-body>.yearly>.data-container>.data>.row>.cell:last-child {border-right: none;}

.selector {align-items: center; display: grid; gap: var(--sp-ty); grid-template-rows: max-content max-content; width: max-content;}
.selector>.title {color: var(--pr-os); font-size: var(--fn-sm); font-weight: 600; text-transform: capitalize; white-space: nowrap;}
.selector>.title:empty {display: none;}
.selector>.body {background-color: var(--pr-bg); border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rl); display: flex; gap: 4px; height: 40px; padding: 4px; place-content: stretch;}
.selector>.body>.chip {
background-color: transparent;
border: none;
border-right: none;
border-radius: var(--br-rn);
color: var(--sc-tx);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-xs);
height: 100%;
padding: 0 var(--sp-lg);
transition: all 0.2s ease-in-out;
}
.selector>.body>.chip:hover {
background-color: var(--pr-hv);
color: var(--pr-tx);
}
.selector>.body>.chip.active {
background-color: var(--pr-cl);
color: var(--pr-oc);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.selector>.body>.chip>.icon>svg {
height: var(--ic-md);
width: var(--ic-md);
}
.selector>.body>.chip.active>.icon>svg {
color: var(--pr-oc);
}
.selector>.body>.chip.active>.text {
color: var(--pr-oc);
}

.calendar {align-self: start; background-color: var(--pr-sr); border: var(--br-sn) solid var(--pr-br); border-radius: var(--br-rn); display: grid; gap: 0; grid-template-rows: max-content auto; height: 260px; max-height: 260px; max-width: 300px; overflow: hidden; padding: 0; width: 300px;}
.calendar>.header {border-bottom: var(--br-sn) solid var(--pr-br); display: grid; padding: var(--sp-sm); place-items: center;}
.calendar>.header>.toolbar {background-color: transparent; border: none; padding: 0; gap: var(--sp-xs); height: max-content; }
.calendar>.header>.toolbar>.group {}
.calendar>.header>.toolbar>.group>button {}
.calendar>.header>.toolbar>.group>button>.text {font-size: var(--fn-xs);}
.calendar>.header>.toolbar>.group>button:has(>.text) {padding: var(--sp-sm);}
.calendar>.days {display: grid; grid-template-rows: max-content auto; gap: var(--sp-xs); padding: var(--sp-sm);}
.calendar>.days>.week {display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;}
.calendar>.days>.week>.day-name {color: var(--sc-tx); font-size: var(--fn-xs); font-weight: 600; padding-bottom: var(--sp-xs);}
.calendar>.days>.days-container {display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); gap: var(--sp-xs);}
.days-container>.day-cell {align-items: center; border-radius: var(--br-rn); color: var(--sc-tx); cursor: pointer; display: flex; font-size: var(--fn-xs); justify-content: center; padding: var(--sp-xs); transition: all 0.2s ease-in-out; width: 36px;}
.days-container>.day-cell:hover {background-color: var(--pr-hv); color: var(--pr-tx);}
.days-container>.day-cell.pad-day {color: var(--sc-tx); opacity: 0.35;}
.days-container>.day-cell.today {border: var(--br-sn) solid var(--pr-cl); color: var(--pr-cl); font-weight: 700;}
.days-container>.day-cell.active {background-color: var(--pr-cl); color: var(--pr-oc); font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);}
.calendar>.months {display: none; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 0; height: 100%;}
.calendar>.years {display: none; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 0; height: 100%; overflow: auto;}
.calendar .month-cell,
.calendar .year-cell {
align-items: center; border-radius: 0; color: var(--sc-tx); cursor: pointer; display: flex; font-size: var(--fn-xs); justify-content: center; transition: all 0.2s ease-in-out;}
.calendar .month-cell:hover,
.calendar .year-cell:hover {
background-color: var(--pr-hv);
color: var(--pr-tx);
}
.calendar .month-cell.active,
.calendar .year-cell.active {
background-color: var(--pr-cl);
color: var(--pr-oc);
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.scheduler {gap: var(--sp-lg); grid-template-columns: 1fr 300px; grid-template-rows: 1fr;}
.scheduler-body {
display: grid;
gap: var(--sp-md);
grid-template-rows: max-content 1fr;
height: 100%;
overflow: hidden;
width: 100%;
}
.scheduler-calendar {
display: grid;
grid-template-rows: max-content 1fr;
gap: var(--sp-md);
width: 300px;
}
.scheduler-preview {
background-color: var(--pr-sr);
border: var(--br-sn) solid var(--pr-br);
border-radius: var(--br-rn);
height: 100%;
}
.scheduler-body>.toolbar {
background-color: transparent;
border-bottom: var(--br-sn) solid var(--pr-br);
padding: var(--sp-sm) 0;
height: max-content;
gap: var(--sp-xs);
}
.scheduler-body>.toolbar .title {
background-color: transparent;
color: var(--pr-os);
font-size: var(--fn-md);
font-weight: 700;
text-align: center;
align-self: center;
display: block;
width: 100%;
border: none;
padding: 0;
margin: 0;
}