/* One material, geometry and state system for actions, filters and navigation. */
:root {
  --action-wash: linear-gradient(145deg,#fcfcfff0,#e9e5faf0);
  --action-line: #ccc5e5;
  --action-ink: #393153;
  --action-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #b8aedb45, 0 3px 8px #3d2e7112;
  --action-art: url('../img/button-material-20260919.webp');
}
:root[data-theme="dark"] {
  --action-wash: linear-gradient(145deg,#414964e8,#282d47ed);
  --action-line: #68708c;
  --action-ink: #f2f1ff;
  --action-shadow: inset 0 1px 0 #ffffff30, inset 0 -1px 0 #11172c70, 0 3px 8px #0002;
}
:root[data-theme] :is(#wizbar .btn:not(.primary),#wizbar .btn,.btn,.actbtn,.mc-btn,.iconbtn,.activity-write,.round,.q,.caplink,.toolbar .tool,button.chip,.seg button,#saveBtn,#undoBtn,.sheet-foot button,.quick button,#fab,.filt .foot button,.stepper button,.kbtn,.emojigrid button) {
  box-sizing: border-box;
  border: 1px solid var(--action-line) !important;
  border-image: none !important;
  border-radius: 16px !important;
  background: var(--action-wash), var(--action-art) center / cover no-repeat !important;
  color: var(--action-ink) !important;
  box-shadow: var(--action-shadow) !important;
  text-shadow: none !important;
  font-weight: 650;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  touch-action: manipulation;
}
:root[data-theme] :is(#wizbar .btn,.btn,.actbtn,.mc-btn,#saveBtn,#undoBtn,.sheet-foot button,.filt .foot button) {
  min-height: 52px !important;
  height: auto !important;
  padding: 9px 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 14px !important;
  line-height: 1.3;
  white-space: normal !important;
  overflow-wrap: normal;
  word-break: normal;
  min-width: 0;
}
:root[data-theme] :is(.btn,.mc-btn,.actbtn) > span:not(.mc-ico) { min-width: 0; }
:root[data-theme] :is(#wizbar .btn.primary,.btn.primary,.mc-primary,.actbtn,#saveBtn,button.chip[aria-pressed="true"],button.chip.on,.seg button[aria-pressed="true"],.seg button.on,.toolbar .tool.on,#fab) {
  background: linear-gradient(135deg,#7860d52b,#5c35b24a),var(--action-art) center / cover no-repeat !important;
  border-color: #b29be9 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 #ffffff55, inset 0 -1px 0 #25164c50, 0 3px 9px #43208130 !important;
  text-shadow: 0 1px 2px #26144170 !important;
}
:root[data-theme] :is(#wizbar .btn.danger,.btn.danger,.btn.warn,.iconbtn.danger) {
  background: linear-gradient(145deg,#fff0f5ed,#f9dce8f2),var(--action-art) center / cover no-repeat !important;
  border-color: #d08aa6 !important;
  color: #97213f !important;
  text-shadow: none !important;
}
:root[data-theme="dark"] :is(#wizbar .btn.danger,.btn.danger,.btn.warn,.iconbtn.danger) {
  background: linear-gradient(145deg,#6b384bea,#3d2439ee),var(--action-art) center / cover no-repeat !important;
  border-color: #aa6d86 !important;
  color: #ffd6e2 !important;
}
:root[data-theme] :is(button.chip,.seg button,.toolbar .tool) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 48px; padding: 8px 12px; font-size: 14px; line-height: 1.25;
}
:root[data-theme] .seg { gap: 6px; padding: 4px; border-radius: 20px; }
:root[data-theme] .seg .thumb { display: none; }
:root[data-theme] .seg button { min-width: 0; white-space: normal; }
:root[data-theme] button.chip[aria-pressed="true"]::after { margin-left: 1px; font-size: 15px; }
:root[data-theme] :is(#wizbar .btn,.btn,.actbtn,.mc-btn,.iconbtn,.activity-write,button.chip,.seg button,.toolbar .tool) :is(svg.crystal-icon,img.official-platform-logo),
:root[data-theme] .mc-ico > :is(svg,img) {
  width: 32px !important; height: 32px !important; min-width: 32px; flex: 0 0 32px;
  object-fit: contain; border-radius: 0; vertical-align: middle;
}
:root[data-theme] .mc-ico { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; }
:root[data-theme] :is(.btn,.actbtn,.mc-btn) > svg:not(.crystal-icon) { width: 26px; height: 26px; flex: 0 0 26px; }
:root[data-theme] button.chip > img:not(.official-platform-logo) { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; }
/* Time slots keep their semantic free/post/carousel/past colors. */
:root[data-theme] .slotbtn { border-radius: 16px; box-shadow: var(--action-shadow); }
:root[data-theme] :is(.iconbtn,.activity-write,.round) {
  display: inline-grid; place-items: center; width: 44px; min-width: 44px;
  height: 44px; min-height: 44px; padding: 5px;
}
:root[data-theme] .q { border-radius: 11px !important; width: 32px; min-width: 32px; height: 32px; padding: 3px; font-size: 17px; }
:root[data-theme] .caplink { border-radius: 12px !important; min-height: 36px; padding: 5px 9px; }
:root[data-theme] .caplink svg.crystal-icon { width: 24px !important; height: 24px !important; flex: 0 0 24px; }
:root[data-theme] #head .round { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 4px; }
:root[data-theme] #head .round svg.crystal-icon { width: 32px !important; height: 32px !important; }
:root[data-theme] #head #profBtn { background: var(--action-wash),var(--action-art) center / cover no-repeat !important; border-color: var(--action-line) !important; box-shadow: var(--action-shadow) !important; border-radius: 16px !important; }
:root[data-theme] .quick button { border-radius: 20px !important; padding: 14px 12px !important; }
:root[data-theme] .quick .tile { width: 44px; height: 44px; flex: 0 0 44px; }
:root[data-theme] .quick .tile .crystal-icon { width: 42px !important; height: 42px !important; }
:root[data-theme] #fab { width: 56px !important; height: 56px !important; border-radius: 19px !important; }
:root[data-theme] #fab svg { width: 38px !important; height: 38px !important; }
:root[data-theme] .tabbar button { border-radius: 17px; }
:root[data-theme] .tabbar button[aria-current="true"] { background: linear-gradient(145deg,#ac91ff55,#715ac138); box-shadow: inset 0 1px 0 #ffffff55; }
:root[data-theme] .tabbar button svg.crystal-icon { width: 36px !important; height: 36px !important; }
:root[data-theme] .wizard-steps .wizard-number {
  min-height: 38px !important; height: 38px !important;
  border: 1px solid var(--action-line) !important; border-radius: 11px !important;
  background: var(--action-wash),var(--action-art) center / cover no-repeat !important;
  color: var(--action-ink) !important; box-shadow: var(--action-shadow) !important;
  opacity: 1; filter: none;
}
:root[data-theme] .wizard-steps .wizard-number .crystal-digit { display: none !important; }
:root[data-theme] .wizard-steps .wizard-number::before {
  content: attr(data-crystal-digit); display: grid !important; place-items: center;
  position: absolute; inset: 0; background: none; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1; text-shadow: none;
}
:root[data-theme] .wizard-steps .wizard-number.current {
  background: linear-gradient(135deg,#7860d52b,#5c35b24a),var(--action-art) center / cover no-repeat !important;
  border-color: #b29be9 !important; color: #fff !important;
}
:root[data-theme] .wizard-steps .wizard-number.current::after { display: none !important; }
:root[data-theme] button:focus-visible { outline: 3px solid #8ecaff !important; outline-offset: 3px; }
:root[data-theme] :is(#wizbar .btn,.btn,.actbtn,.mc-btn,.iconbtn,.round,button.chip,.seg button,.quick button):active:not(:disabled) {
  transform: translateY(1px); box-shadow: inset 0 2px 5px #1b123933 !important;
}
:root[data-theme] button:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
/* Three-way platform selectors retain readable labels at 320 px. */
@media (max-width: 420px) {
  :root[data-theme] .seg:has(.official-platform-logo):has(> button:nth-of-type(3)) > button { flex-direction: column; gap: 4px; padding: 8px 5px; }
  :root[data-theme] .seg:has(.official-platform-logo):has(> button:nth-of-type(3)) { align-items: stretch; }
}
@media (max-width: 360px) {
  :root[data-theme] .quick button { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
  :root[data-theme] :is(.acts.two:has(svg.crystal-icon),.crystal-paid-actions) > .btn {
    flex-direction: column;
    gap: 5px;
    padding: 9px 10px !important;
    min-height: 76px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] button { transition: none !important; }
  :root[data-theme] button:active { transform: none !important; }
}