:root{
--md-primary:#6750a4;--md-on-primary:#fff;--md-primary-container:#eaddff;--md-on-primary-container:#21005d;
--md-secondary-container:#e8def8;--md-on-secondary-container:#1d192b;
--md-error:#b3261e;--md-on-error:#fff;
--md-surface:#fef7ff;--md-on-surface:#1d1b20;--md-on-surface-variant:#49454f;
--md-surface-c-lowest:#fff;--md-surface-c-low:#f7f2fa;--md-surface-c:#f3edf7;--md-surface-c-high:#ece6f0;--md-surface-c-highest:#e6e0e9;
--md-outline:#79747e;--md-outline-variant:#cac4d0;
--md-state:29 27 32;--md-state-primary:103 80 164;
--md-elev-1:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
--md-elev-2:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);
--md-elev-3:0 1px 3px rgba(0,0,0,.3),0 4px 8px 3px rgba(0,0,0,.15);
--md-font:Roboto,"Google Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
--md-ease:cubic-bezier(.2,0,0,1);
}
.dark{
--md-primary:#d0bcff;--md-on-primary:#381e72;--md-primary-container:#4f378b;--md-on-primary-container:#eaddff;
--md-secondary-container:#4a4458;--md-on-secondary-container:#e8def8;
--md-error:#f2b8b5;--md-on-error:#601410;
--md-surface:#141218;--md-on-surface:#e6e0e9;--md-on-surface-variant:#cac4d0;
--md-surface-c-lowest:#0f0d13;--md-surface-c-low:#1d1b20;--md-surface-c:#211f26;--md-surface-c-high:#2b2930;--md-surface-c-highest:#36343b;
--md-outline:#938f99;--md-outline-variant:#49454f;
--md-state:230 224 233;--md-state-primary:208 188 255;
--md-elev-1:0 1px 3px 1px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.3);
--md-elev-2:0 2px 6px 2px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.3);
--md-elev-3:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);
}
html,body{font-family:var(--md-font)}
body{background-color:var(--md-surface);color:var(--md-on-surface)}
::selection{background-color:rgb(var(--md-state-primary)/.24)}

/* ---- Buttons: pill shape, flat fills, state layers ---- */
.btn{border-radius:9999px;font-weight:500;letter-spacing:.00625em;min-height:40px;padding-left:1.5rem;padding-right:1.5rem;
 transition:box-shadow .2s var(--md-ease),background-color .2s var(--md-ease),color .2s var(--md-ease),border-color .2s var(--md-ease)}
.btn:active{transform:none}
.btn:focus-visible{--tw-ring-color:var(--md-primary);--tw-ring-offset-width:2px}
.btn-sm{border-radius:9999px;min-height:32px;padding-left:1rem;padding-right:1rem}
.btn-md{border-radius:9999px}
.btn-lg{border-radius:9999px;min-height:48px;padding-left:2rem;padding-right:2rem}
.btn-icon{border-radius:9999px;min-height:0;padding:.625rem}
.btn-primary,.btn-danger,.btn-success,.btn-warning{background-image:none;box-shadow:none;border:0}
.btn-primary{background-color:var(--md-primary);color:var(--md-on-primary)}
.btn-danger{background-color:var(--md-error);color:var(--md-on-error)}
.btn-success{background-color:#146c2e;color:#fff}
.btn-warning{background-color:#7d5700;color:#fff}
.dark .btn-success{background-color:#7fda8f;color:#00391a}
.dark .btn-warning{background-color:#f8bd49;color:#422c00}
.btn-primary:hover,.btn-danger:hover,.btn-success:hover,.btn-warning:hover{background-image:linear-gradient(rgb(255 255 255/.08),rgb(255 255 255/.08));box-shadow:var(--md-elev-1)}
.dark .btn-primary:hover,.dark .btn-danger:hover,.dark .btn-success:hover,.dark .btn-warning:hover{background-image:linear-gradient(rgb(0 0 0/.08),rgb(0 0 0/.08))}
.btn-primary:active,.btn-danger:active,.btn-success:active,.btn-warning:active{box-shadow:none;background-image:linear-gradient(rgb(255 255 255/.12),rgb(255 255 255/.12))}
.btn-secondary{background-color:transparent;color:var(--md-primary);border:1px solid var(--md-outline);box-shadow:none}
.btn-secondary:hover{background-color:rgb(var(--md-state-primary)/.08);border-color:var(--md-outline)}
.btn-secondary:active{background-color:rgb(var(--md-state-primary)/.12)}
.btn-ghost{color:var(--md-primary)}
.btn-ghost:hover{background-color:rgb(var(--md-state-primary)/.08)}
.btn-stripe,.btn-airwallex,.btn-alipay,.btn-wxpay{box-shadow:none}

/* ---- Text fields: outlined ---- */
.input{border-radius:8px;background-color:transparent;border:1px solid var(--md-outline);color:var(--md-on-surface);min-height:44px;
 transition:border-color .15s var(--md-ease),box-shadow .15s var(--md-ease)}
.input:hover:not(:disabled):not(:focus){border-color:var(--md-on-surface)}
.input:focus{border-color:var(--md-primary);--tw-ring-shadow:0 0 #0000;box-shadow:inset 0 0 0 1px var(--md-primary)}
.input:disabled{background-color:transparent;border-color:rgb(var(--md-state)/.12);color:rgb(var(--md-state)/.38)}
.input-error,.input-error:focus{border-color:var(--md-error);box-shadow:inset 0 0 0 1px var(--md-error)}
.input-label{color:var(--md-on-surface-variant);font-weight:500;letter-spacing:.00625em}
.input-hint{color:var(--md-on-surface-variant)}
.input-error-text{color:var(--md-error)}
select.input{background-color:transparent}
.dark select.input option{background-color:var(--md-surface-c)}

/* ---- Cards & surfaces ---- */
.card{background-color:var(--md-surface-c-low);border:0;border-radius:16px;box-shadow:var(--md-elev-1)}
.dark .card{background-color:var(--md-surface-c-low);border:0}
.card-hover:hover{transform:none;box-shadow:var(--md-elev-2)}
.card-header,.card-footer{border-color:var(--md-outline-variant)}
.glass,.glass-card,.card-glass{background-color:var(--md-surface-c-low);-webkit-backdrop-filter:none;backdrop-filter:none}
.glass-card,.card-glass{border:0;border-radius:16px;box-shadow:var(--md-elev-1)}
.dark .glass,.dark .glass-card,.dark .card-glass{background-color:var(--md-surface-c-low)}
.stat-icon{border-radius:12px;background-color:var(--md-primary-container);color:var(--md-on-primary-container)}
.stat-value{font-weight:500;color:var(--md-on-surface)}
.stat-label{color:var(--md-on-surface-variant)}

/* ---- Tables ---- */
.table-container{border-radius:16px;border-color:var(--md-outline-variant)}
.table th{background-color:var(--md-surface-c);color:var(--md-on-surface-variant);font-weight:500;border-color:var(--md-outline-variant)}
.dark .table th{background-color:var(--md-surface-c)}
.table td{color:var(--md-on-surface);border-color:var(--md-outline-variant)}
.table tbody tr:hover,.dark .table tbody tr:hover{background-color:rgb(var(--md-state)/.08)}

/* ---- Chips / badges ---- */
.badge{border-radius:8px;font-weight:500;letter-spacing:.03em}
.badge-primary,.dark .badge-primary{background-color:var(--md-secondary-container);color:var(--md-on-secondary-container)}

/* ---- Menus ---- */
.dropdown{border:0;border-radius:12px;background-color:var(--md-surface-c);box-shadow:var(--md-elev-2);padding-top:.5rem;padding-bottom:.5rem}
.dark .dropdown{background-color:var(--md-surface-c)}
.dropdown-item{color:var(--md-on-surface);min-height:48px;padding-left:.75rem;padding-right:.75rem}
.dropdown-item:hover,.dark .dropdown-item:hover{background-color:rgb(var(--md-state)/.08)}

/* ---- Dialogs ---- */
.modal-overlay{background-color:rgb(0 0 0/.32);-webkit-backdrop-filter:none;backdrop-filter:none}
.dialog-overlay,.dark .dialog-overlay{background-color:rgb(0 0 0/.32)}
.modal-content,.dialog-container{border:0;border-radius:28px;background-color:var(--md-surface-c-high);box-shadow:var(--md-elev-3)}
.dark .modal-content,.dark .dialog-container{background-color:var(--md-surface-c-high)}
.modal-header,.modal-footer,.dialog-header,.dialog-footer{border-color:transparent;padding-left:1.5rem;padding-right:1.5rem}
.dialog-footer,.dark .dialog-footer{background-color:transparent}
.modal-title{font-size:1.5rem;line-height:2rem;font-weight:400;color:var(--md-on-surface)}

/* ---- Snackbar-like toast ---- */
.toast{border-radius:12px;background-color:var(--md-surface-c-high);box-shadow:var(--md-elev-3)}
.dark .toast{background-color:var(--md-surface-c-high)}

/* ---- Navigation drawer ---- */
.sidebar,.dark .sidebar{background-color:var(--md-surface-c-low);border-right:0}
.sidebar-header,.dark .sidebar-header{border-color:transparent}
.sidebar-link{border-radius:9999px;min-height:48px;color:var(--md-on-surface-variant);font-weight:500;letter-spacing:.00625em}
.sidebar-link:hover,.dark .sidebar-link:hover{background-color:rgb(var(--md-state)/.08);color:var(--md-on-surface)}
.sidebar-link-active,.dark .sidebar-link-active,.sidebar-link-active:hover,.dark .sidebar-link-active:hover{background-color:var(--md-secondary-container);color:var(--md-on-secondary-container);font-weight:600}
.sidebar-section-title{color:var(--md-on-surface-variant);text-transform:none;letter-spacing:.00625em;font-weight:500;font-size:.875rem}

/* ---- Typography ---- */
.page-title{font-size:1.75rem;line-height:2.25rem;font-weight:400;color:var(--md-on-surface)}
.page-description,.empty-state-description{color:var(--md-on-surface-variant)}
.empty-state-title{font-weight:400;font-size:1.375rem;color:var(--md-on-surface)}

/* ---- Tabs (segmented) ---- */
.tabs{border-radius:9999px;background-color:transparent;border:1px solid var(--md-outline);padding:0;gap:0;overflow:hidden}
.dark .tabs{background-color:transparent}
.tab{border-radius:0;color:var(--md-on-surface);min-height:40px}
.tab+.tab{border-left:1px solid var(--md-outline)}
.tab:hover{background-color:rgb(var(--md-state)/.08)}
.tab-active,.dark .tab-active{background-color:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:none}

/* ---- Progress & switch ---- */
.progress{height:4px;background-color:var(--md-primary-container)}
.progress-bar{background-image:none;background-color:var(--md-primary)}
.switch{background-color:var(--md-surface-c-highest);box-shadow:inset 0 0 0 2px var(--md-outline)}
.dark .switch{background-color:var(--md-surface-c-highest)}
.switch .switch-thumb{background-color:var(--md-outline);box-shadow:none}
.switch-active,.dark .switch-active{background-color:var(--md-primary);box-shadow:none}
.switch-active .switch-thumb{background-color:var(--md-on-primary)}

/* ---- Misc ---- */
.code{border-radius:4px;background-color:var(--md-surface-c-high);color:var(--md-primary)}
.code-block{border-radius:12px}

/* ---- Combobox (Select.vue: scoped + portal styles load after this file, hence :root:root) ---- */
:root:root .select-trigger.select-trigger{border-radius:8px;background-color:transparent;border:1px solid var(--md-outline);color:var(--md-on-surface);min-height:44px;box-shadow:none;
 transition:border-color .15s var(--md-ease),box-shadow .15s var(--md-ease)}
:root:root .select-trigger.select-trigger:hover{border-color:var(--md-on-surface)}
:root:root .select-trigger.select-trigger:focus,:root:root .select-trigger-open.select-trigger-open{border-color:var(--md-primary);box-shadow:inset 0 0 0 1px var(--md-primary)}
:root:root .select-trigger-error.select-trigger-error{border-color:var(--md-error);box-shadow:inset 0 0 0 1px var(--md-error)}
:root:root .select-trigger-disabled.select-trigger-disabled{background-color:transparent;border-color:rgb(var(--md-state)/.12);opacity:.38}
:root:root .select-icon.select-icon,:root:root .select-clear.select-clear{color:var(--md-on-surface-variant)}
:root:root .select-dropdown-portal{border:0;border-radius:12px;background-color:var(--md-surface-c);box-shadow:var(--md-elev-2)}
:root:root .select-dropdown-portal .select-search{border-color:var(--md-outline-variant)}
:root:root .select-dropdown-portal .select-search-input{color:var(--md-on-surface)}
:root:root .select-dropdown-portal .select-option{color:var(--md-on-surface);min-height:44px}
:root:root .select-dropdown-portal .select-option:hover,:root:root .select-dropdown-portal .select-option-focused{background-color:rgb(var(--md-state)/.08)}
:root:root .select-dropdown-portal .select-option-selected{background-color:var(--md-secondary-container);color:var(--md-on-secondary-container);font-weight:500}
:root:root .select-dropdown-portal .select-option-group,:root:root .select-dropdown-portal .select-option-group:hover{background-color:transparent;color:var(--md-primary);text-transform:none;letter-spacing:.00625em;font-size:.75rem;font-weight:500}
:root:root .select-dropdown-portal .select-empty{color:var(--md-on-surface-variant)}

/* ---- Data table (DataTable.vue scoped styles hardcode gray/white) ---- */
:root:root .table-wrapper .table-header.table-header,:root:root .sticky-header-cell.sticky-header-cell{background-color:var(--md-surface-c)}
:root:root .table-header th,:root:root .table-header th .uppercase{color:var(--md-on-surface-variant);text-transform:none;letter-spacing:.00625em;font-size:.8125rem;font-weight:500}
:root:root .table-body.table-body,:root:root tbody .sticky-col.sticky-col{background-color:var(--md-surface-c-low)}
:root:root .table-body.table-body>tr:hover,:root:root tbody tr:hover .sticky-col.sticky-col{background-color:var(--md-surface-c-high)}
:root:root .table-body.table-body,:root:root .table-wrapper .divide-y>*{border-color:var(--md-outline-variant)}
:root:root .table-wrapper input[type=checkbox]{border-radius:4px;border-color:var(--md-outline);color:var(--md-primary)}

/* ---- Model plaza pricing table (accent comes from an inline platform color) ---- */
:root:root .plaza-pricing-table{--plaza-accent:var(--md-primary)!important}
:root:root .plaza-pricing-table thead th{color:var(--md-on-surface-variant);font-weight:500}
:root:root .plaza-pricing-table .uppercase{text-transform:none;letter-spacing:.00625em}
:root:root .plaza-pricing-table :is(table,thead,tbody,tr,th,td,div){border-color:var(--md-outline-variant)}
:root:root .plaza-pricing-table tbody tr{transition:background-color .15s var(--md-ease)}
:root:root .plaza-pricing-table tbody tr:hover{background-color:rgb(var(--md-state)/.08)}

/* ---- Buttons without .btn: compact ones become pills; rows, tiles and large blocks keep the shape scale ---- */
button:is(.rounded,.rounded-md,.rounded-lg,.rounded-xl):not(.w-full,.text-left,.flex-col,.tab,[role=tab],[role=option],[role=menuitem],[class~=p-3],[class~=p-4],[class~=p-5],[class~=p-6],[class~=py-3],[class~=py-4],[class~=h-auto]){border-radius:9999px}
a:is(.rounded-md,.rounded-lg,.rounded-xl):is([class*=" bg-"],[class^="bg-"],.border):is([class*=" px-"],[class^="px-"]):is([class~=py-1],[class~=py-1\.5],[class~=py-2],[class~=py-2\.5]):not(.w-full,.text-left,.flex-col,.block){border-radius:9999px}
.divider{background-color:var(--md-outline-variant)}
.skeleton{background-color:var(--md-surface-c-highest)}
.text-gradient{background-image:none;-webkit-text-fill-color:currentColor;color:var(--md-primary)}

/* MD3 coverage: components which do not use the shared .btn/.input classes. */
:root:root :is(.input-ring,.date-picker-trigger,.date-picker-input){
  border:1px solid var(--md-outline);border-radius:8px;background:transparent;
  color:var(--md-on-surface);min-height:44px;box-shadow:none;
}
:root:root :is(.input-ring,.date-picker-trigger,.date-picker-input):hover:not(:disabled){border-color:var(--md-on-surface)}
:root:root :is(.input-ring,.date-picker-trigger,.date-picker-input):focus,
:root:root .date-picker-trigger-open{border-color:var(--md-primary);box-shadow:inset 0 0 0 1px var(--md-primary);outline:none}
:root:root :is(.date-picker-label,.date-picker-icon,.date-picker-chevron){color:var(--md-on-surface-variant)}
:root:root :is(.date-picker-dropdown,.select-dropdown){
  background:var(--md-surface-c);color:var(--md-on-surface);border:0;border-radius:12px;box-shadow:var(--md-elev-2);
}
:root:root :is(.select-dropdown .select-header,.select-dropdown .select-search,.date-picker-divider){border-color:var(--md-outline-variant)}
:root:root .select-dropdown .select-search-input{background:transparent;color:var(--md-on-surface)}
:root:root :is(.select-dropdown .select-option,.date-picker-preset){color:var(--md-on-surface);min-height:40px;border-radius:8px}
:root:root :is(.select-dropdown .select-option,.date-picker-preset):hover{background:rgb(var(--md-state)/.08)}
:root:root :is(.select-dropdown .select-option-selected,.date-picker-preset-active){background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
:root:root :is(.date-picker-apply,button.bg-primary-500,button.bg-primary-600){
  background:var(--md-primary);color:var(--md-on-primary);border-radius:9999px;box-shadow:none;
}
:root:root button[class*="from-primary-500"][class*="to-primary-600"]{
  background:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:none;
}
:root:root button:is(.chip-tinted,.chip-tinted-active){border-radius:8px;box-shadow:none;font-weight:500}
:root:root button.chip-tinted-active{background:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:inset 0 0 0 1px var(--md-outline)}
:root:root button.font-mono[class*="ring-inset"]{background:var(--md-surface-c-low);color:var(--md-on-surface-variant);--tw-ring-color:var(--md-outline-variant)}

/* Toggle.vue uses role=switch and aria-checked, rather than .switch. */
:root:root button[role="switch"]{background:var(--md-surface-c-highest);border-color:var(--md-outline);box-shadow:none}
:root:root button[role="switch"]>span{background:var(--md-outline);box-shadow:none}
:root:root button[role="switch"][aria-checked="true"]{background:var(--md-primary);border-color:var(--md-primary)}
:root:root button[role="switch"][aria-checked="true"]>span{background:var(--md-on-primary)}
:root:root input:is([type="checkbox"],[type="radio"]){accent-color:var(--md-primary);color:var(--md-primary);--tw-ring-color:var(--md-primary)}
:root:root input[type="checkbox"]{border-radius:3px}

/* Pagination keeps its existing connected shape and accessible labels. */
:root:root nav[aria-label="Pagination"]{box-shadow:none;border-radius:20px;gap:2px}
:root:root nav[aria-label="Pagination"] button{border-radius:20px;border-color:transparent;background:transparent;color:var(--md-on-surface);margin-left:0}
:root:root nav[aria-label="Pagination"] button:not(:disabled):hover{background:rgb(var(--md-state)/.08)}
:root:root nav[aria-label="Pagination"] button.z-10{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}

/* Teleported notification/tooltip nodes do not carry .toast/.dropdown. */
:root:root [aria-live="polite"]>.pointer-events-auto{
  background:var(--md-surface-c-high);color:var(--md-on-surface);border-radius:12px;box-shadow:var(--md-elev-3);
  max-width:min(28rem,calc(100vw - 2rem));min-width:min(320px,calc(100vw - 2rem));
}
:root:root [role="tooltip"]{background:var(--md-on-surface-variant);color:var(--md-surface);border-radius:8px;box-shadow:var(--md-elev-1);--tw-ring-shadow:0 0 #0000}
:root:root [role="tooltip"]>.rotate-45{background:var(--md-on-surface-variant)}
:root:root .relative:has(>button[title])>.absolute.right-0:has(>button.w-full){
  background:var(--md-surface-c);border:0;border-radius:12px;box-shadow:var(--md-elev-2);padding-block:8px;
}
:root:root .relative:has(>button[title])>.absolute.right-0>button.w-full{color:var(--md-on-surface);min-height:40px}
:root:root .relative:has(>button[title])>.absolute.right-0>button.w-full:hover{background:rgb(var(--md-state)/.08)}
:root:root .relative:has(>button[title])>.absolute.right-0>button.w-full.bg-primary-50{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
:root:root :is(button,[role="button"],a.btn,a.sidebar-link):focus-visible{outline:2px solid var(--md-primary);outline-offset:3px}
:root:root .md-ripple-box{transition:none;animation:none;contain:layout style;isolation:isolate}
@media(prefers-reduced-motion:reduce){
  :root:root :is(.date-picker-trigger,.date-picker-preset,.date-picker-apply,.input-ring,button[role="switch"],button[role="switch"]>span){transition:none}
}

/* Page content entrance, without moving the navigation. */
@media (prefers-reduced-motion: no-preference) {
  #app main.p-4.md\:p-6.lg\:p-8,
  #app > .relative.flex.min-h-screen > .relative.z-10.w-full.max-w-md,
  #app > [data-testid="compact-home"] {
    animation: kx-page-enter 220ms ease-out;
  }

  @keyframes kx-page-enter {
    from { opacity: 0; translate: 0 6px; }
    to { opacity: 1; translate: 0 0; }
  }
}


/* MD3 Common Buttons demo: button states and ripple. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.btn-sm,.btn-lg,.btn-icon) {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; min-height: 40px; padding: 0 24px; border-radius: 20px;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .1px;
  -webkit-user-select: none; user-select: none;
  transition: box-shadow .28s cubic-bezier(.2,0,0,1);
}

/* Touch screens: remove the system gray tap highlight from every ripple target and skip double-tap-zoom detection so taps respond faster.
   :where() adds no specificity, so it won't override existing styles. */
:where(.btn,a.sidebar-link,.dropdown-item,.tab,button,[role="button"],[role="menuitem"],[role="tab"],[role="option"],.select-option) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* State layer */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: currentColor; opacity: 0; transition: opacity .15s linear;
  pointer-events: none;
}
/* Hover only on devices that can really hover, so the tint doesn't stick after a tap on touch screens */
@media (hover: hover) {
  .btn:hover::before { opacity: .08; }
  .btn-primary:hover { box-shadow: var(--md-elev-1); }
}
.btn:focus-visible::before { opacity: .10; }
/* Press feedback comes from the ripple; :active is only a fallback for elements with the ripple turned off
   (otherwise it stacks with the ripple too dark, and flashes while scrolling on mobile) */
.btn:is([data-no-ripple], [data-no-ripple] *):active::before { opacity: .10; }
.btn:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }

.btn:is(.btn-primary,.btn-secondary,.btn-ghost):hover,
.btn:is(.btn-primary,.btn-secondary,.btn-ghost):active,
.dark .btn:is(.btn-primary,.btn-secondary,.btn-ghost):hover,
.dark .btn:is(.btn-primary,.btn-secondary,.btn-ghost):active { background-image: none; }
.btn-secondary:hover,.btn-secondary:active,.btn-ghost:hover,.btn-ghost:active { background-color: transparent; }
.btn-secondary:focus-visible { border-color: var(--md-primary); }
.btn-ghost:not(.btn-icon) { padding-left: 12px; padding-right: 12px; }
.btn:disabled { box-shadow: none; pointer-events: none; cursor: default;
  color: color-mix(in srgb,var(--md-on-surface) 38%,transparent);
  background: color-mix(in srgb,var(--md-on-surface) 12%,transparent); }
.btn-secondary:disabled,.btn-ghost:disabled { background: transparent; }
.btn-secondary:disabled { border-color: color-mix(in srgb,var(--md-on-surface) 12%,transparent); }

/* ---- MD3 ripple ---- */
.md-ripple-host{isolation:isolate}
.md-ripple-position{position:relative}
.md-ripple-box{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;border-radius:inherit}
.md-ripple{position:absolute;border-radius:50%;background-color:currentColor;opacity:.12;transform:scale(0);pointer-events:none;animation:md-ripple-in 450ms cubic-bezier(.2,0,0,1) forwards}
.md-ripple-out{transform:scale(1);animation:md-ripple-fade 300ms linear forwards}
@keyframes md-ripple-in{to{transform:scale(1)}}
@keyframes md-ripple-fade{from{opacity:.12}to{opacity:0}}

.sidebar .sidebar-link,.sidebar .sidebar-link * { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .btn,.btn::before { transition: none; }
}