/* jellyball.io game-UI skin — GENERATED by scripts/build-jui.js (edit that, then run it). Do not hand-edit.
   Assets: Cartoony UI Pack (cartoony/) and Vector Icon Pack Pro (icons/) — see CATALOG.md.
   Every class is opt-in (.jui-*); nothing here styles bare elements, so chideout.com is untouched.
   Docs + class list: docs/jelly-ui/SKIN-READY.md. Demo: /jellyball/ui/demo.html */

:root {
  --jui-ink: #1b2d38;          /* dark text on light surfaces (the pack's darkest outline) */
  --jui-outline: #324652;     /* the pack's neutral outline */
  --jui-shadow: 0 6px 0 rgba(27, 45, 56, 0.22);
  --jui-font: Inter, var(--font-sys, system-ui), -apple-system, 'Segoe UI', Roboto, sans-serif; /* a real stack: it's used inside font shorthands */
  --jui-ic-sm: 20px; --jui-ic-md: 32px; --jui-ic-lg: 48px; --jui-ic-xl: 72px;
}

/* ===== shared: every sized component scales with --jui-s ===== */
.jui-frame, .jui-container, .jui-btn, .jui-bar, .jui-kbd, .jui-badge, .jui-chip, .jui-toast, .jui-check, .jui-radio, .jui-toggle { --jui-s: 1; box-sizing: border-box; }
.jui-frame *, .jui-container *, .jui-btn *, .jui-bar *, .jui-toast * { box-sizing: border-box; }

/* ===== colour tokens (outline --jo, lip --jl, face --jf, text --jtx, text drop --jts) ===== */
:where(.jui-frame), :where(.jui-container), :where(.jui-btn), :where(.jui-bar), :where(.jui-badge), :where(.jui-chip), :where(.jui-toast), :where(.jui-title), :where(.jui-check), :where(.jui-radio), :where(.jui-toggle) { --jo:#5d7c8c;--jl:#d3dee3;--jf:#ffffff;--jtx:#1b2d38;--jts:transparent; }
:where(.jui-btn), :where(.jui-badge), :where(.jui-chip) { --jo:#b30039;--jl:#e62e49;--jf:#f5535c;--jtx:#fff;--jts:#b30039; }
:where(.jui-bar) { --jo:#006837;--jl:#4ea800;--jf:#8cc936;--jtx:#fff;--jts:#006837; }
.jui-frame--red, .jui-container--red, .jui-btn--red, .jui-bar--red, .jui-badge--red, .jui-chip--red, .jui-toast--red, .jui-title--red, .jui-check--red, .jui-radio--red, .jui-toggle--red { --jo:#b30039;--jl:#e62e49;--jf:#f5535c;--jtx:#fff;--jts:#b30039; }
.jui-frame--red.jui-frame--dark, .jui-container--red.jui-container--dark, .jui-btn--red.jui-btn--dark, .jui-bar--red.jui-bar--dark, .jui-badge--red.jui-badge--dark, .jui-chip--red.jui-chip--dark, .jui-toast--red.jui-toast--dark, .jui-title--red.jui-title--dark, .jui-check--red.jui-check--dark, .jui-radio--red.jui-radio--dark, .jui-toggle--red.jui-toggle--dark { --jo:#800046;--jl:#b30039;--jf:#e62e49;--jtx:#fff;--jts:#800046; }
.jui-frame--red.jui-frame--light, .jui-container--red.jui-container--light, .jui-btn--red.jui-btn--light, .jui-bar--red.jui-bar--light, .jui-badge--red.jui-badge--light, .jui-chip--red.jui-chip--light, .jui-toast--red.jui-toast--light, .jui-title--red.jui-title--light, .jui-check--red.jui-check--light, .jui-radio--red.jui-radio--light, .jui-toggle--red.jui-toggle--light { --jo:#c6263d;--jl:#f5535c;--jf:#ff7a6e;--jtx:#fff;--jts:#c6263d; }
.jui-frame--blue, .jui-container--blue, .jui-btn--blue, .jui-bar--blue, .jui-badge--blue, .jui-chip--blue, .jui-toast--blue, .jui-title--blue, .jui-check--blue, .jui-radio--blue, .jui-toggle--blue { --jo:#0049c7;--jl:#1778ff;--jf:#37b9ff;--jtx:#fff;--jts:#0049c7; }
.jui-frame--blue.jui-frame--dark, .jui-container--blue.jui-container--dark, .jui-btn--blue.jui-btn--dark, .jui-bar--blue.jui-bar--dark, .jui-badge--blue.jui-badge--dark, .jui-chip--blue.jui-chip--dark, .jui-toast--blue.jui-toast--dark, .jui-title--blue.jui-title--dark, .jui-check--blue.jui-check--dark, .jui-radio--blue.jui-radio--dark, .jui-toggle--blue.jui-toggle--dark { --jo:#0018ab;--jl:#0049c7;--jf:#1778ff;--jtx:#fff;--jts:#0018ab; }
.jui-frame--blue.jui-frame--light, .jui-container--blue.jui-container--light, .jui-btn--blue.jui-btn--light, .jui-bar--blue.jui-bar--light, .jui-badge--blue.jui-badge--light, .jui-chip--blue.jui-chip--light, .jui-toast--blue.jui-toast--light, .jui-title--blue.jui-title--light, .jui-check--blue.jui-check--light, .jui-radio--blue.jui-radio--light, .jui-toggle--blue.jui-toggle--light { --jo:#1778ff;--jl:#37b9ff;--jf:#96dbff;--jtx:#1b2d38;--jts:transparent; }
.jui-frame--white, .jui-container--white, .jui-btn--white, .jui-bar--white, .jui-badge--white, .jui-chip--white, .jui-toast--white, .jui-title--white, .jui-check--white, .jui-radio--white, .jui-toggle--white { --jo:#5d7c8c;--jl:#d3dee3;--jf:#ffffff;--jtx:#1b2d38;--jts:transparent; }
.jui-frame--grey, .jui-container--grey, .jui-btn--grey, .jui-bar--grey, .jui-badge--grey, .jui-chip--grey, .jui-toast--grey, .jui-title--grey, .jui-check--grey, .jui-radio--grey, .jui-toggle--grey { --jo:#324652;--jl:#476475;--jf:#7b97a6;--jtx:#fff;--jts:#324652; }
.jui-frame--grey.jui-frame--dark, .jui-container--grey.jui-container--dark, .jui-btn--grey.jui-btn--dark, .jui-bar--grey.jui-bar--dark, .jui-badge--grey.jui-badge--dark, .jui-chip--grey.jui-chip--dark, .jui-toast--grey.jui-toast--dark, .jui-title--grey.jui-title--dark, .jui-check--grey.jui-check--dark, .jui-radio--grey.jui-radio--dark, .jui-toggle--grey.jui-toggle--dark { --jo:#1b2d38;--jl:#324652;--jf:#476475;--jtx:#fff;--jts:#1b2d38; }
.jui-frame--grey.jui-frame--light, .jui-container--grey.jui-container--light, .jui-btn--grey.jui-btn--light, .jui-bar--grey.jui-bar--light, .jui-badge--grey.jui-badge--light, .jui-chip--grey.jui-chip--light, .jui-toast--grey.jui-toast--light, .jui-title--grey.jui-title--light, .jui-check--grey.jui-check--light, .jui-radio--grey.jui-radio--light, .jui-toggle--grey.jui-toggle--light { --jo:#476475;--jl:#7b97a6;--jf:#abc0c9;--jtx:#1b2d38;--jts:transparent; }
.jui-frame--yellow, .jui-container--yellow, .jui-btn--yellow, .jui-bar--yellow, .jui-badge--yellow, .jui-chip--yellow, .jui-toast--yellow, .jui-title--yellow, .jui-check--yellow, .jui-radio--yellow, .jui-toggle--yellow { --jo:#f15a24;--jl:#fc9504;--jf:#fdaf18;--jtx:#1b2d38;--jts:transparent; }
.jui-frame--yellow.jui-frame--dark, .jui-container--yellow.jui-container--dark, .jui-btn--yellow.jui-btn--dark, .jui-bar--yellow.jui-bar--dark, .jui-badge--yellow.jui-badge--dark, .jui-chip--yellow.jui-chip--dark, .jui-toast--yellow.jui-toast--dark, .jui-title--yellow.jui-title--dark, .jui-check--yellow.jui-check--dark, .jui-radio--yellow.jui-radio--dark, .jui-toggle--yellow.jui-toggle--dark { --jo:#c6263d;--jl:#f67714;--jf:#fc9504;--jtx:#1b2d38;--jts:transparent; }
.jui-frame--yellow.jui-frame--light, .jui-container--yellow.jui-container--light, .jui-btn--yellow.jui-btn--light, .jui-bar--yellow.jui-bar--light, .jui-badge--yellow.jui-badge--light, .jui-chip--yellow.jui-chip--light, .jui-toast--yellow.jui-toast--light, .jui-title--yellow.jui-title--light, .jui-check--yellow.jui-check--light, .jui-radio--yellow.jui-radio--light, .jui-toggle--yellow.jui-toggle--light { --jo:#f67714;--jl:#fdaf18;--jf:#fec92b;--jtx:#1b2d38;--jts:transparent; }
.jui-frame--green, .jui-container--green, .jui-btn--green, .jui-bar--green, .jui-badge--green, .jui-chip--green, .jui-toast--green, .jui-title--green, .jui-check--green, .jui-radio--green, .jui-toggle--green { --jo:#006837;--jl:#4ea800;--jf:#8cc936;--jtx:#fff;--jts:#006837; }
.jui-frame--green.jui-frame--dark, .jui-container--green.jui-container--dark, .jui-btn--green.jui-btn--dark, .jui-bar--green.jui-bar--dark, .jui-badge--green.jui-badge--dark, .jui-chip--green.jui-chip--dark, .jui-toast--green.jui-toast--dark, .jui-title--green.jui-title--dark, .jui-check--green.jui-check--dark, .jui-radio--green.jui-radio--dark, .jui-toggle--green.jui-toggle--dark { --jo:#006837;--jl:#008722;--jf:#4ea800;--jtx:#fff;--jts:#006837; }
.jui-frame--green.jui-frame--light, .jui-container--green.jui-container--light, .jui-btn--green.jui-btn--light, .jui-bar--green.jui-bar--light, .jui-badge--green.jui-badge--light, .jui-chip--green.jui-chip--light, .jui-toast--green.jui-toast--light, .jui-title--green.jui-title--light, .jui-check--green.jui-check--light, .jui-radio--green.jui-radio--light, .jui-toggle--green.jui-toggle--light { --jo:#008722;--jl:#8cc936;--jf:#acdc58;--jtx:#1b2d38;--jts:transparent; }
.jui-frame--purple, .jui-container--purple, .jui-btn--purple, .jui-bar--purple, .jui-badge--purple, .jui-chip--purple, .jui-toast--purple, .jui-title--purple, .jui-check--purple, .jui-radio--purple, .jui-toggle--purple { --jo:#7500d4;--jl:#aa00ff;--jf:#c442ff;--jtx:#fff;--jts:#7500d4; }
.jui-frame--purple.jui-frame--dark, .jui-container--purple.jui-container--dark, .jui-btn--purple.jui-btn--dark, .jui-bar--purple.jui-bar--dark, .jui-badge--purple.jui-badge--dark, .jui-chip--purple.jui-chip--dark, .jui-toast--purple.jui-toast--dark, .jui-title--purple.jui-title--dark, .jui-check--purple.jui-check--dark, .jui-radio--purple.jui-radio--dark, .jui-toggle--purple.jui-toggle--dark { --jo:#5414b3;--jl:#7500d4;--jf:#aa00ff;--jtx:#fff;--jts:#5414b3; }
.jui-frame--purple.jui-frame--light, .jui-container--purple.jui-container--light, .jui-btn--purple.jui-btn--light, .jui-bar--purple.jui-bar--light, .jui-badge--purple.jui-badge--light, .jui-chip--purple.jui-chip--light, .jui-toast--purple.jui-toast--light, .jui-title--purple.jui-title--light, .jui-check--purple.jui-check--light, .jui-radio--purple.jui-radio--light, .jui-toggle--purple.jui-toggle--light { --jo:#aa00ff;--jl:#c442ff;--jf:#d769ff;--jtx:#fff;--jts:#aa00ff; }

/* ===== .jui-frame — 9-sliced border from the pack; interior painted underneath the band ===== */
.jui-frame {
  display: block; position: relative; color: var(--jin-tx); font-family: var(--jui-font);
  border-style: solid; border-color: transparent; border-image-repeat: stretch;
  background-image: linear-gradient(var(--jin), var(--jin)); background-repeat: no-repeat;
  background-origin: border-box; background-clip: border-box;
  padding: calc(6px * var(--jui-s)) calc(10px * var(--jui-s));
}
.jui-frame > :first-child { margin-top: 0; } .jui-frame > :last-child { margin-bottom: 0; }
.jui-frame--sm { --jui-s: 0.7; } .jui-frame--lg { --jui-s: 1.3; }
.jui-frame--clear { background-image: none; }
.jui-frame { border-width: calc(27px * var(--jui-s)) calc(22px * var(--jui-s)) calc(32px * var(--jui-s)) calc(22px * var(--jui-s)); border-image-slice: 27 22 32 22; border-image-source: var(--jfr-basic); background-position: calc(20px * var(--jui-s)) calc(25px * var(--jui-s)); background-size: calc(100% - 40px * var(--jui-s)) calc(100% - 55px * var(--jui-s)); }
.jui-frame.jui-frame--inset { border-width: calc(38px * var(--jui-s)) calc(33px * var(--jui-s)) calc(43px * var(--jui-s)) calc(33px * var(--jui-s)); border-image-slice: 38 33 43 33; border-image-source: var(--jfr-inset); background-position: calc(20px * var(--jui-s)) calc(25px * var(--jui-s)); background-size: calc(100% - 40px * var(--jui-s)) calc(100% - 55px * var(--jui-s)); }
.jui-frame.jui-frame--nailed { border-width: calc(27px * var(--jui-s)) calc(22px * var(--jui-s)) calc(32px * var(--jui-s)) calc(22px * var(--jui-s)); border-image-slice: 27 22 32 22; border-image-source: var(--jfr-nailed); background-position: calc(20px * var(--jui-s)) calc(25px * var(--jui-s)); background-size: calc(100% - 40px * var(--jui-s)) calc(100% - 55px * var(--jui-s)); }
.jui-frame.jui-frame--thin { border-width: calc(22px * var(--jui-s)) calc(22px * var(--jui-s)) calc(22px * var(--jui-s)) calc(22px * var(--jui-s)); border-image-slice: 22 22 22 22; border-image-source: var(--jfr-thin); background-position: calc(20px * var(--jui-s)) calc(20px * var(--jui-s)); background-size: calc(100% - 40px * var(--jui-s)) calc(100% - 40px * var(--jui-s)); }
.jui-frame.jui-frame--pointed { border-width: calc(32px * var(--jui-s)) calc(32px * var(--jui-s)) calc(32px * var(--jui-s)) calc(32px * var(--jui-s)); border-image-slice: 32 32 32 32; border-image-source: var(--jfr-pointed); background-position: calc(30px * var(--jui-s)) calc(30px * var(--jui-s)); background-size: calc(100% - 60px * var(--jui-s)) calc(100% - 60px * var(--jui-s)); }
.jui-frame.jui-frame--square { border-width: calc(42px * var(--jui-s)) calc(32px * var(--jui-s)) calc(42px * var(--jui-s)) calc(32px * var(--jui-s)); border-image-slice: 42 32 42 32; border-image-source: var(--jfr-square); background-position: calc(25px * var(--jui-s)) calc(30px * var(--jui-s)); background-size: calc(100% - 50px * var(--jui-s)) calc(100% - 65px * var(--jui-s)); }
.jui-frame.jui-frame--ornate { border-width: calc(58px * var(--jui-s)) calc(59px * var(--jui-s)) calc(55px * var(--jui-s)) calc(59px * var(--jui-s)); border-image-slice: 58 59 55 59; border-image-source: var(--jfr-ornate); background-position: calc(38.5px * var(--jui-s)) calc(43.5px * var(--jui-s)); background-size: calc(100% - 77px * var(--jui-s)) calc(100% - 82px * var(--jui-s)); }
.jui-frame--basic { border-image-source: var(--jfr-basic); }
:where(.jui-frame) { --jfr-basic:url(skin/frames/basic/white/frame-basic-white.svg);--jfr-inset:url(skin/frames/inset/white/frame-inset-white.svg);--jfr-nailed:url(skin/frames/nailed/white/frame-nailed-white.svg);--jfr-thin:url(skin/frames/thin/white/frame-thin-white.svg);--jfr-pointed:url(skin/frames/pointed/white/frame-pointed-white.svg);--jfr-square:url(skin/frames/square-corners/white/frame-squarecorners-white.svg);--jfr-ornate:url(skin/frames/ornate/white/frame-ornate-white.svg);--jin:#ffffff;--jin-tx:#1b2d38; }
.jui-frame--red { --jfr-basic:url(skin/frames/basic/red/frame-basic-red-regular.svg);--jfr-inset:url(skin/frames/inset/red/frame-inset-red.svg);--jfr-nailed:url(skin/frames/nailed/red/frame-nailed-red.svg);--jfr-thin:url(skin/frames/thin/red/frame-thin-red.svg);--jfr-pointed:url(skin/frames/pointed/red/frame-pointed-red.svg);--jfr-square:url(skin/frames/square-corners/red/frame-squarecorners-red.svg);--jfr-ornate:url(skin/frames/ornate/red/frame-ornate-red.svg);--jin:#c6263d;--jin-tx:#fff; }
.jui-frame--red.jui-frame--dark { --jfr-basic:url(skin/frames/basic/red/frame-basic-red-dark.svg);--jfr-inset:url(skin/frames/inset/red/frame-inset-red-dark.svg);--jfr-nailed:url(skin/frames/nailed/red/frame-nailed-red-dark.svg);--jfr-thin:url(skin/frames/thin/red/frame-thin-red-dark.svg);--jfr-pointed:url(skin/frames/pointed/red/frame-pointed-red-dark.svg);--jfr-square:url(skin/frames/square-corners/red/frame-squarecorners-red-dark.svg);--jfr-ornate:url(skin/frames/ornate/red/frame-ornate-red-dark.svg);--jin:#c6263d;--jin-tx:#fff; }
.jui-frame--red.jui-frame--light { --jfr-basic:url(skin/frames/basic/red/frame-basic-red-light.svg);--jfr-inset:url(skin/frames/inset/red/frame-inset-red-light.svg);--jfr-nailed:url(skin/frames/nailed/red/frame-nailed-red-light.svg);--jfr-thin:url(skin/frames/thin/red/frame-thin-red-light.svg);--jfr-pointed:url(skin/frames/pointed/red/frame-pointed-red-light.svg);--jfr-square:url(skin/frames/square-corners/red/frame-squarecorners-red-light.svg);--jfr-ornate:url(skin/frames/ornate/red/frame-ornate-red-light.svg);--jin:#c6263d;--jin-tx:#fff; }
.jui-frame--blue { --jfr-basic:url(skin/frames/basic/blue/frame-basic-blue-regular.svg);--jfr-inset:url(skin/frames/inset/blue/frame-inset-blue.svg);--jfr-nailed:url(skin/frames/nailed/blue/frame-nailed-blue.svg);--jfr-thin:url(skin/frames/thin/blue/frame-thin-blue.svg);--jfr-pointed:url(skin/frames/pointed/blue/frame-pointed-blue.svg);--jfr-square:url(skin/frames/square-corners/blue/frame-squarecorners-blue.svg);--jfr-ornate:url(skin/frames/ornate/blue/frame-ornate-blue.svg);--jin:#0f63e0;--jin-tx:#fff; }
.jui-frame--blue.jui-frame--dark { --jfr-basic:url(skin/frames/basic/blue/frame-basic-blue-dark.svg);--jfr-inset:url(skin/frames/inset/blue/frame-inset-blue-dark.svg);--jfr-nailed:url(skin/frames/nailed/blue/frame-nailed-blue-dark.svg);--jfr-thin:url(skin/frames/thin/blue/frame-thin-blue-dark.svg);--jfr-pointed:url(skin/frames/pointed/blue/frame-pointed-blue-dark.svg);--jfr-square:url(skin/frames/square-corners/blue/frame-squarecorners-blue-dark.svg);--jfr-ornate:url(skin/frames/ornate/blue/frame-ornate-blue-dark.svg);--jin:#0f63e0;--jin-tx:#fff; }
.jui-frame--blue.jui-frame--light { --jfr-basic:url(skin/frames/basic/blue/frame-basic-blue-light.svg);--jfr-inset:url(skin/frames/inset/blue/frame-inset-blue-light.svg);--jfr-nailed:url(skin/frames/nailed/blue/frame-nailed-blue-light.svg);--jfr-thin:url(skin/frames/thin/blue/frame-thin-blue-light.svg);--jfr-pointed:url(skin/frames/pointed/blue/frame-pointed-blue-light.svg);--jfr-square:url(skin/frames/square-corners/blue/frame-squarecorners-blue-light.svg);--jfr-ornate:url(skin/frames/ornate/blue/frame-ornate-blue-light.svg);--jin:#0f63e0;--jin-tx:#fff; }
.jui-frame--white { --jfr-basic:url(skin/frames/basic/white/frame-basic-white.svg);--jfr-inset:url(skin/frames/inset/white/frame-inset-white.svg);--jfr-nailed:url(skin/frames/nailed/white/frame-nailed-white.svg);--jfr-thin:url(skin/frames/thin/white/frame-thin-white.svg);--jfr-pointed:url(skin/frames/pointed/white/frame-pointed-white.svg);--jfr-square:url(skin/frames/square-corners/white/frame-squarecorners-white.svg);--jfr-ornate:url(skin/frames/ornate/white/frame-ornate-white.svg);--jin:#ffffff;--jin-tx:#1b2d38; }
.jui-frame--grey { --jfr-basic:url(skin/frames/basic/grey/frame-basic-grey-regular.svg);--jfr-inset:url(skin/frames/inset/grey/frame-inset-grey.svg);--jfr-nailed:url(skin/frames/nailed/grey/frame-nailed-grey.svg);--jfr-thin:url(skin/frames/thin/grey/frame-thin-grey.svg);--jfr-pointed:url(skin/frames/pointed/grey/frame-pointed-grey.svg);--jfr-square:url(skin/frames/square-corners/grey/frame-squarecorners-grey.svg);--jfr-ornate:url(skin/frames/ornate/grey/frame-ornate-grey.svg);--jin:#eef3f5;--jin-tx:#1b2d38; }
.jui-frame--grey.jui-frame--dark { --jfr-basic:url(skin/frames/basic/grey/frame-basic-grey-dark.svg);--jfr-inset:url(skin/frames/inset/grey/frame-inset-grey-dark.svg);--jfr-nailed:url(skin/frames/nailed/grey/frame-nailed-grey-dark.svg);--jfr-thin:url(skin/frames/thin/grey/frame-thin-grey-dark.svg);--jfr-pointed:url(skin/frames/pointed/grey/frame-pointed-grey-dark.svg);--jfr-square:url(skin/frames/square-corners/grey/frame-squarecorners-grey-dark.svg);--jfr-ornate:url(skin/frames/ornate/grey/frame-ornate-grey-dark.svg);--jin:#eef3f5;--jin-tx:#1b2d38; }
.jui-frame--grey.jui-frame--light { --jfr-basic:url(skin/frames/basic/grey/frame-basic-grey-light.svg);--jfr-inset:url(skin/frames/inset/grey/frame-inset-grey-light.svg);--jfr-nailed:url(skin/frames/nailed/grey/frame-nailed-grey-light.svg);--jfr-thin:url(skin/frames/thin/grey/frame-thin-grey-light.svg);--jfr-pointed:url(skin/frames/pointed/grey/frame-pointed-grey-light.svg);--jfr-square:url(skin/frames/square-corners/grey/frame-squarecorners-grey-light.svg);--jfr-ornate:url(skin/frames/ornate/grey/frame-ornate-grey-light.svg);--jin:#eef3f5;--jin-tx:#1b2d38; }
.jui-frame--yellow { --jfr-basic:url(skin/frames/basic/yellow/frame-basic-yellow-regular.svg);--jfr-inset:url(skin/frames/inset/yellow/frame-inset-yellow.svg);--jfr-nailed:url(skin/frames/nailed/yellow/frame-nailed-yellow.svg);--jfr-thin:url(skin/frames/thin/yellow/frame-thin-yellow.svg);--jfr-pointed:url(skin/frames/pointed/yellow/frame-pointed-yellow.svg);--jfr-square:url(skin/frames/square-corners/yellow/frame-squarecorners-yellow.svg);--jfr-ornate:url(skin/frames/ornate/yellow/frame-ornate-yellow.svg);--jin:#fff6c2;--jin-tx:#1b2d38; }
.jui-frame--yellow.jui-frame--dark { --jfr-basic:url(skin/frames/basic/yellow/frame-basic-yellow-dark.svg);--jfr-inset:url(skin/frames/inset/yellow/frame-inset-yellow-dark.svg);--jfr-nailed:url(skin/frames/nailed/yellow/frame-nailed-yellow-dark.svg);--jfr-thin:url(skin/frames/thin/yellow/frame-thin-yellow-dark.svg);--jfr-pointed:url(skin/frames/pointed/yellow/frame-pointed-yellow-dark.svg);--jfr-square:url(skin/frames/square-corners/yellow/frame-squarecorners-yellow-dark.svg);--jfr-ornate:url(skin/frames/ornate/yellow/frame-ornate-yellow-dark.svg);--jin:#fff6c2;--jin-tx:#1b2d38; }
.jui-frame--yellow.jui-frame--light { --jfr-basic:url(skin/frames/basic/yellow/frame-basic-yellow-light.svg);--jfr-inset:url(skin/frames/inset/yellow/frame-inset-yellow-light.svg);--jfr-nailed:url(skin/frames/nailed/yellow/frame-nailed-yellow-light.svg);--jfr-thin:url(skin/frames/thin/yellow/frame-thin-yellow-light.svg);--jfr-pointed:url(skin/frames/pointed/yellow/frame-pointed-yellow-light.svg);--jfr-square:url(skin/frames/square-corners/yellow/frame-squarecorners-yellow-light.svg);--jfr-ornate:url(skin/frames/ornate/yellow/frame-ornate-yellow-light.svg);--jin:#fff6c2;--jin-tx:#1b2d38; }
.jui-frame--green { --jfr-basic:url(skin/frames/basic/green/frame-basic-green-regular.svg);--jfr-inset:url(skin/frames/inset/green/frame-inset-green.svg);--jfr-nailed:url(skin/frames/nailed/green/frame-nailed-green.svg);--jfr-thin:url(skin/frames/thin/green/frame-thin-green.svg);--jfr-pointed:url(skin/frames/pointed/green/frame-pointed-green.svg);--jfr-square:url(skin/frames/square-corners/green/frame-squarecorners-green.svg);--jfr-ornate:url(skin/frames/ornate/green/frame-ornate-green.svg);--jin:#008722;--jin-tx:#fff; }
.jui-frame--green.jui-frame--dark { --jfr-basic:url(skin/frames/basic/green/frame-basic-green-dark.svg);--jfr-inset:url(skin/frames/inset/green/frame-inset-green-dark.svg);--jfr-nailed:url(skin/frames/nailed/green/frame-nailed-green-dark.svg);--jfr-thin:url(skin/frames/thin/green/frame-thin-green-dark.svg);--jfr-pointed:url(skin/frames/pointed/green/frame-pointed-green-dark.svg);--jfr-square:url(skin/frames/square-corners/green/frame-squarecorners-green-dark.svg);--jfr-ornate:url(skin/frames/ornate/green/frame-ornate-green-dark.svg);--jin:#008722;--jin-tx:#fff; }
.jui-frame--green.jui-frame--light { --jfr-basic:url(skin/frames/basic/green/frame-basic-green-light.svg);--jfr-inset:url(skin/frames/inset/green/frame-inset-green-light.svg);--jfr-nailed:url(skin/frames/nailed/green/frame-nailed-green-light.svg);--jfr-thin:url(skin/frames/thin/green/frame-thin-green-light.svg);--jfr-pointed:url(skin/frames/pointed/green/frame-pointed-green-light.svg);--jfr-square:url(skin/frames/square-corners/green/frame-squarecorners-green-light.svg);--jfr-ornate:url(skin/frames/ornate/green/frame-ornate-green-light.svg);--jin:#008722;--jin-tx:#fff; }
.jui-frame--purple { --jfr-basic:url(skin/frames/basic/purple/frame-basic-purple-regular.svg);--jfr-inset:url(skin/frames/inset/purple/frame-inset-purple.svg);--jfr-nailed:url(skin/frames/nailed/purple/frame-nailed-purple.svg);--jfr-thin:url(skin/frames/thin/purple/frame-thin-purple.svg);--jfr-pointed:url(skin/frames/pointed/purple/frame-pointed-purple.svg);--jfr-square:url(skin/frames/square-corners/purple/frame-squarecorners-purple.svg);--jfr-ornate:url(skin/frames/ornate/purple/frame-ornate-purple.svg);--jin:#7500d4;--jin-tx:#fff; }
.jui-frame--purple.jui-frame--dark { --jfr-basic:url(skin/frames/basic/purple/frame-basic-purple-dark.svg);--jfr-inset:url(skin/frames/inset/purple/frame-inset-purple-dark.svg);--jfr-nailed:url(skin/frames/nailed/purple/frame-nailed-purple-dark.svg);--jfr-thin:url(skin/frames/thin/purple/frame-thin-purple-dark.svg);--jfr-pointed:url(skin/frames/pointed/purple/frame-pointed-purple-dark.svg);--jfr-square:url(skin/frames/square-corners/purple/frame-squarecorners-purple-dark.svg);--jfr-ornate:url(skin/frames/ornate/purple/frame-ornate-purple-dark.svg);--jin:#7500d4;--jin-tx:#fff; }
.jui-frame--purple.jui-frame--light { --jfr-basic:url(skin/frames/basic/purple/frame-basic-purple-light.svg);--jfr-inset:url(skin/frames/inset/purple/frame-inset-purple-light.svg);--jfr-nailed:url(skin/frames/nailed/purple/frame-nailed-purple-light.svg);--jfr-thin:url(skin/frames/thin/purple/frame-thin-purple-light.svg);--jfr-pointed:url(skin/frames/pointed/purple/frame-pointed-purple-light.svg);--jfr-square:url(skin/frames/square-corners/purple/frame-squarecorners-purple-light.svg);--jfr-ornate:url(skin/frames/ornate/purple/frame-ornate-purple-light.svg);--jin:#7500d4;--jin-tx:#fff; }
.jui-frame.jui-frame--paper { --jin: #ffffff; --jin-tx: #1b2d38; }
[data-theme="dark"] .jui-frame.jui-frame--paper, [data-theme="dark"] :where(.jui-frame--white) { --jin: #f4f8fa; }

/* ===== .jui-container — the pack's plain 3D (lipped) or flat containers: list rows, tabs, cards ===== */
.jui-container {
  display: block; position: relative; color: var(--jtx); font-family: var(--jui-font);
  border-style: solid; border-color: transparent; border-image-source: var(--jct-3d); border-image-repeat: stretch;
  border-width: calc(12px * var(--jui-s)) calc(12px * var(--jui-s)) calc(22px * var(--jui-s)) calc(12px * var(--jui-s)); border-image-slice: 12 12 22 12 fill;
  padding: calc(2px * var(--jui-s)) calc(4px * var(--jui-s));
}
.jui-container--flat { border-image-source: var(--jct-flat); border-width: calc(10px * var(--jui-s)) calc(10px * var(--jui-s)) calc(10px * var(--jui-s)) calc(10px * var(--jui-s)); border-image-slice: 10 fill; padding: calc(2px * var(--jui-s)) calc(6px * var(--jui-s)); }
.jui-container--sm { --jui-s: 0.75; } .jui-container--lg { --jui-s: 1.3; }
:where(.jui-container:not(.jui-container--white):not(.jui-container--yellow)) { text-shadow: 0 2px 0 var(--jts); }
:where(.jui-container) { text-shadow: none; }
:where(.jui-container), :where(.jui-toast) { --jct-3d:url(skin/containers/3d/white/container-3d-white.svg);--jct-flat:url(skin/containers/flat/white/container-flat-white.svg); }
.jui-container--red, .jui-toast--red { --jct-3d:url(skin/containers/3d/red/container-3d-red-regular.svg);--jct-flat:url(skin/containers/flat/red/container-flat-red-regular.svg); }
.jui-container--red.jui-container--dark, .jui-toast--red.jui-toast--dark { --jct-3d:url(skin/containers/3d/red/container-3d-red-dark.svg);--jct-flat:url(skin/containers/flat/red/container-flat-red-dark.svg); }
.jui-container--red.jui-container--light, .jui-toast--red.jui-toast--light { --jct-3d:url(skin/containers/3d/red/container-3d-red-light.svg);--jct-flat:url(skin/containers/flat/red/container-flat-red-light.svg); }
.jui-container--blue, .jui-toast--blue { --jct-3d:url(skin/containers/3d/blue/container-3d-blue-regular.svg);--jct-flat:url(skin/containers/flat/blue/container-flat-blue-regular.svg); }
.jui-container--blue.jui-container--dark, .jui-toast--blue.jui-toast--dark { --jct-3d:url(skin/containers/3d/blue/container-3d-blue-dark.svg);--jct-flat:url(skin/containers/flat/blue/container-flat-blue-dark.svg); }
.jui-container--blue.jui-container--light, .jui-toast--blue.jui-toast--light { --jct-3d:url(skin/containers/3d/blue/container-3d-blue-light.svg);--jct-flat:url(skin/containers/flat/blue/container-flat-blue-light.svg); }
.jui-container--white, .jui-toast--white { --jct-3d:url(skin/containers/3d/white/container-3d-white.svg);--jct-flat:url(skin/containers/flat/white/container-flat-white.svg); }
.jui-container--grey, .jui-toast--grey { --jct-3d:url(skin/containers/3d/grey/container-3d-grey-regular.svg);--jct-flat:url(skin/containers/flat/grey/container-flat-grey-regular.svg); }
.jui-container--grey.jui-container--dark, .jui-toast--grey.jui-toast--dark { --jct-3d:url(skin/containers/3d/grey/container-3d-grey-dark.svg);--jct-flat:url(skin/containers/flat/grey/container-flat-grey-dark.svg); }
.jui-container--grey.jui-container--light, .jui-toast--grey.jui-toast--light { --jct-3d:url(skin/containers/3d/grey/container-3d-grey-light.svg);--jct-flat:url(skin/containers/flat/grey/container-flat-grey-light.svg); }
.jui-container--yellow, .jui-toast--yellow { --jct-3d:url(skin/containers/3d/yellow/container-3d-yellow-regular.svg);--jct-flat:url(skin/containers/flat/yellow/container-flat-yellow-regular.svg); }
.jui-container--yellow.jui-container--dark, .jui-toast--yellow.jui-toast--dark { --jct-3d:url(skin/containers/3d/yellow/container-3d-yellow-dark.svg);--jct-flat:url(skin/containers/flat/yellow/container-flat-yellow-dark.svg); }
.jui-container--yellow.jui-container--light, .jui-toast--yellow.jui-toast--light { --jct-3d:url(skin/containers/3d/yellow/container-3d-yellow-light.svg);--jct-flat:url(skin/containers/flat/yellow/container-flat-yellow-light.svg); }
.jui-container--green, .jui-toast--green { --jct-3d:url(skin/containers/3d/green/container-3d-green-regular.svg);--jct-flat:url(skin/containers/flat/green/container-flat-green-regular.svg); }
.jui-container--green.jui-container--dark, .jui-toast--green.jui-toast--dark { --jct-3d:url(skin/containers/3d/green/container-3d-green-dark.svg);--jct-flat:url(skin/containers/flat/green/container-flat-green-dark.svg); }
.jui-container--green.jui-container--light, .jui-toast--green.jui-toast--light { --jct-3d:url(skin/containers/3d/green/container-3d-green-light.svg);--jct-flat:url(skin/containers/flat/green/container-flat-green-light.svg); }
.jui-container--purple, .jui-toast--purple { --jct-3d:url(skin/containers/3d/purple/container-3d-purple-regular.svg);--jct-flat:url(skin/containers/flat/purple/container-flat-purple-regular.svg); }
.jui-container--purple.jui-container--dark, .jui-toast--purple.jui-toast--dark { --jct-3d:url(skin/containers/3d/purple/container-3d-purple-dark.svg);--jct-flat:url(skin/containers/flat/purple/container-flat-purple-dark.svg); }
.jui-container--purple.jui-container--light, .jui-toast--purple.jui-toast--light { --jct-3d:url(skin/containers/3d/purple/container-3d-purple-light.svg);--jct-flat:url(skin/containers/flat/purple/container-flat-purple-light.svg); }

/* ===== .jui-btn — the pack's 3D button; every state is the pack's own art (standard / hover / pressed / focus) ===== */
.jui-btn {
  -webkit-appearance: none; appearance: none; margin: 0; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; vertical-align: middle; position: relative;
  min-height: calc(58px * var(--jui-s)); min-width: calc(58px * var(--jui-s)); padding: calc(4px * var(--jui-s)) calc(16px * var(--jui-s));
  font-family: var(--jui-font); font-size: calc(19px * var(--jui-s)); font-weight: 800; line-height: 1.1; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--jtx); text-shadow: 0 calc(2px * var(--jui-s)) 0 var(--jts);
  background: none; border-style: solid; border-color: transparent; border-image-repeat: stretch;
  border-width: calc(7px * var(--jui-s)) calc(7px * var(--jui-s)) calc(17px * var(--jui-s)) calc(7px * var(--jui-s)); border-image-slice: 7 7 17 7 fill; border-image-source: var(--jb0);
  outline: none;
}
.jui-btn:hover, .jui-btn:focus, .jui-btn:visited { color: var(--jtx); text-decoration: none; }
@media (hover: hover) { .jui-btn:hover { border-image-source: var(--jb1); } }
.jui-btn:focus-visible { border-image-source: var(--jb3); outline: 3px solid var(--jui-ink); outline-offset: 2px; }
[data-theme="dark"] .jui-btn:focus-visible { outline-color: #fff; }
.jui-btn:active, .jui-btn.is-active, .jui-btn[aria-pressed="true"] { border-image-source: var(--jb2); border-width: calc(13px * var(--jui-s)) calc(7px * var(--jui-s)) calc(11px * var(--jui-s)) calc(7px * var(--jui-s)); border-image-slice: 13 7 11 7 fill; }
.jui-btn--sm { --jui-s: 0.78; min-height: 44px; } .jui-btn--lg { --jui-s: 1.25; } .jui-btn--xl { --jui-s: 1.6; }
.jui-btn--block { display: flex; width: 100%; }
.jui-btn--icon { padding: 0; width: calc(58px * var(--jui-s)); }
.jui-btn--icon .jui-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jui-btn__label { display: inline-block; }
:where(.jui-btn) .jui-ic { width: 1.45em; height: 1.45em; filter: drop-shadow(0 calc(2px * var(--jui-s)) 0 rgba(0,0,0,0.18)); }
.jui-btn--icon .jui-ic { width: calc(34px * var(--jui-s)); height: calc(34px * var(--jui-s)); }
/* flat (tabs, segments): no lip, pressed/selected = lip-coloured face */
.jui-btn--flat { border-width: calc(7px * var(--jui-s)) calc(7px * var(--jui-s)) calc(7px * var(--jui-s)) calc(7px * var(--jui-s)); border-image-slice: 7 fill; min-height: calc(48px * var(--jui-s)); padding: calc(2px * var(--jui-s)) calc(14px * var(--jui-s)); }
.jui-btn--flat:active, .jui-btn--flat.is-active, .jui-btn--flat[aria-pressed="true"], .jui-btn--flat[aria-selected="true"] { border-width: calc(7px * var(--jui-s)) calc(7px * var(--jui-s)) calc(7px * var(--jui-s)) calc(7px * var(--jui-s)); border-image-slice: 7 fill; border-image-source: var(--jb2); }
/* round = pill (text) or circle (--icon) */
.jui-btn--round { height: calc(64px * var(--jui-s)); min-height: 0; border-width: calc(7px * var(--jui-s)) calc(22px * var(--jui-s)) calc(17px * var(--jui-s)) calc(22px * var(--jui-s)); border-image-width: calc(28px * var(--jui-s)) calc(22px * var(--jui-s)) calc(28px * var(--jui-s)) calc(22px * var(--jui-s)); border-image-slice: 28 22 28 22 fill; padding: 0 calc(6px * var(--jui-s)); }
.jui-btn--round:active, .jui-btn--round.is-active, .jui-btn--round[aria-pressed="true"] { border-width: calc(13px * var(--jui-s)) calc(22px * var(--jui-s)) calc(11px * var(--jui-s)) calc(22px * var(--jui-s)); border-image-width: calc(34px * var(--jui-s)) calc(22px * var(--jui-s)) calc(28px * var(--jui-s)) calc(22px * var(--jui-s)); border-image-slice: 34 22 28 22 fill; }
.jui-btn--round.jui-btn--flat, .jui-btn--round.jui-btn--flat:active, .jui-btn--round.jui-btn--flat.is-active, .jui-btn--round.jui-btn--flat[aria-pressed="true"], .jui-btn--round.jui-btn--flat[aria-selected="true"] { height: calc(56px * var(--jui-s)); border-width: calc(7px * var(--jui-s)) calc(22px * var(--jui-s)) calc(7px * var(--jui-s)) calc(22px * var(--jui-s)); border-image-width: calc(28px * var(--jui-s)) calc(28px * var(--jui-s)) calc(28px * var(--jui-s)) calc(28px * var(--jui-s)); border-image-slice: 28 fill; }
.jui-btn--round.jui-btn--icon, .jui-btn--round.jui-btn--icon:active, .jui-btn--round.jui-btn--icon.is-active, .jui-btn--round.jui-btn--icon[aria-pressed="true"] {
  border: 0; border-image: none; width: calc(64px * var(--jui-s)); height: calc(64px * var(--jui-s)); min-width: 0; padding: 0 0 calc(10px * var(--jui-s));
  background: var(--jb0) center / 100% 100% no-repeat;
}
@media (hover: hover) { .jui-btn--round.jui-btn--icon:hover { background-image: var(--jb1); } }
.jui-btn--round.jui-btn--icon:focus-visible { background-image: var(--jb3); border-radius: 50%; }
.jui-btn--round.jui-btn--icon:active, .jui-btn--round.jui-btn--icon.is-active, .jui-btn--round.jui-btn--icon[aria-pressed="true"] { background-image: var(--jb2); padding: calc(2px * var(--jui-s)) 0 0; }
.jui-btn--round.jui-btn--icon.jui-btn--flat { padding: 0; } .jui-btn--round.jui-btn--icon.jui-btn--flat:active { padding: 0; }
.jui-btn[disabled], .jui-btn.is-disabled, .jui-btn[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(0.85) brightness(1.05); opacity: 0.6; pointer-events: none; }
/* segmented control: a row of flat buttons */
.jui-seg { display: inline-flex; gap: calc(4px * var(--jui-s)); flex-wrap: wrap; }
.jui-seg > .jui-btn { flex: 1 1 auto; }
:where(.jui-btn) { --jb0:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-regular_standard.svg);--jb1:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-regular_hover.svg);--jb2:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-regular_pressed.svg);--jb3:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-regular_focus.svg); }
:where(.jui-btn.jui-btn--flat) { --jb0:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-regular_standard.svg);--jb1:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-regular_hover.svg);--jb2:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-regular_pressed.svg);--jb3:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-regular_focus.svg); }
:where(.jui-btn.jui-btn--round) { --jb0:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-regular_standard.svg);--jb1:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-regular_hover.svg);--jb2:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-regular_focus.svg); }
:where(.jui-btn.jui-btn--round.jui-btn--flat) { --jb0:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-regular_standard.svg);--jb1:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-regular_hover.svg);--jb2:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-regular_focus.svg); }
:where(.jui-btn.jui-btn--round.jui-btn--icon) { --jb0:url(skin/buttons/3d/round/red/button-round-3d-1-red-regular_standard.svg);--jb1:url(skin/buttons/3d/round/red/button-round-3d-1-red-regular_hover.svg);--jb2:url(skin/buttons/3d/round/red/button-round-3d-1-red-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/red/button-round-3d-1-red-regular_focus.svg); }
:where(.jui-btn.jui-btn--round.jui-btn--icon.jui-btn--flat) { --jb0:url(skin/buttons/flat/round/red/button-round-flat-1-red-regular_standard.svg);--jb1:url(skin/buttons/flat/round/red/button-round-flat-1-red-regular_hover.svg);--jb2:url(skin/buttons/flat/round/red/button-round-flat-1-red-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/red/button-round-flat-1-red-regular_focus.svg); }
.jui-btn--red { --jb0:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-regular_standard.svg);--jb1:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-regular_hover.svg);--jb2:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-regular_pressed.svg);--jb3:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-regular_focus.svg); }
.jui-btn--red.jui-btn--flat { --jb0:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-regular_standard.svg);--jb1:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-regular_hover.svg);--jb2:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-regular_pressed.svg);--jb3:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-regular_focus.svg); }
.jui-btn--red.jui-btn--round { --jb0:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-regular_standard.svg);--jb1:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-regular_hover.svg);--jb2:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-regular_focus.svg); }
.jui-btn--red.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-regular_standard.svg);--jb1:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-regular_hover.svg);--jb2:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-regular_focus.svg); }
.jui-btn--red.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/red/button-round-3d-1-red-regular_standard.svg);--jb1:url(skin/buttons/3d/round/red/button-round-3d-1-red-regular_hover.svg);--jb2:url(skin/buttons/3d/round/red/button-round-3d-1-red-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/red/button-round-3d-1-red-regular_focus.svg); }
.jui-btn--red.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/red/button-round-flat-1-red-regular_standard.svg);--jb1:url(skin/buttons/flat/round/red/button-round-flat-1-red-regular_hover.svg);--jb2:url(skin/buttons/flat/round/red/button-round-flat-1-red-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/red/button-round-flat-1-red-regular_focus.svg); }
.jui-btn--red.jui-btn--dark { --jb0:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-dark_standard.svg);--jb1:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-dark_hover.svg);--jb2:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-dark_pressed.svg);--jb3:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-dark_focus.svg); }
.jui-btn--red.jui-btn--dark.jui-btn--flat { --jb0:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-dark_standard.svg);--jb1:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-dark_hover.svg);--jb2:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-dark_pressed.svg);--jb3:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-dark_focus.svg); }
.jui-btn--red.jui-btn--dark.jui-btn--round { --jb0:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-dark_standard.svg);--jb1:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-dark_hover.svg);--jb2:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-dark_pressed.svg);--jb3:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-dark_focus.svg); }
.jui-btn--red.jui-btn--dark.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-dark_standard.svg);--jb1:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-dark_hover.svg);--jb2:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-dark_pressed.svg);--jb3:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-dark_focus.svg); }
.jui-btn--red.jui-btn--dark.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/red/button-round-3d-1-red-dark_standard.svg);--jb1:url(skin/buttons/3d/round/red/button-round-3d-1-red-dark_hover.svg);--jb2:url(skin/buttons/3d/round/red/button-round-3d-1-red-dark_pressed.svg);--jb3:url(skin/buttons/3d/round/red/button-round-3d-1-red-dark_focus.svg); }
.jui-btn--red.jui-btn--dark.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/red/button-round-flat-1-red-dark_standard.svg);--jb1:url(skin/buttons/flat/round/red/button-round-flat-1-red-dark_hover.svg);--jb2:url(skin/buttons/flat/round/red/button-round-flat-1-red-dark_pressed.svg);--jb3:url(skin/buttons/flat/round/red/button-round-flat-1-red-dark_focus.svg); }
.jui-btn--red.jui-btn--light { --jb0:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-light_standard.svg);--jb1:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-light_hover.svg);--jb2:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-light_pressed.svg);--jb3:url(skin/buttons/3d/square/red/button-square-3d-2.5-red-light_focus.svg); }
.jui-btn--red.jui-btn--light.jui-btn--flat { --jb0:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-light_standard.svg);--jb1:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-light_hover.svg);--jb2:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-light_pressed.svg);--jb3:url(skin/buttons/flat/square/red/button-square-flat-2.5-red-light_focus.svg); }
.jui-btn--red.jui-btn--light.jui-btn--round { --jb0:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-light_standard.svg);--jb1:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-light_hover.svg);--jb2:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-light_pressed.svg);--jb3:url(skin/buttons/3d/round/red/button-round-3d-2.5-red-light_focus.svg); }
.jui-btn--red.jui-btn--light.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-light_standard.svg);--jb1:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-light_hover.svg);--jb2:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-light_pressed.svg);--jb3:url(skin/buttons/flat/round/red/button-round-flat-2.5-red-light_focus.svg); }
.jui-btn--red.jui-btn--light.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/red/button-round-3d-1-red-light_standard.svg);--jb1:url(skin/buttons/3d/round/red/button-round-3d-1-red-light_hover.svg);--jb2:url(skin/buttons/3d/round/red/button-round-3d-1-red-light_pressed.svg);--jb3:url(skin/buttons/3d/round/red/button-round-3d-1-red-light_focus.svg); }
.jui-btn--red.jui-btn--light.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/red/button-round-flat-1-red-light_standard.svg);--jb1:url(skin/buttons/flat/round/red/button-round-flat-1-red-light_hover.svg);--jb2:url(skin/buttons/flat/round/red/button-round-flat-1-red-light_pressed.svg);--jb3:url(skin/buttons/flat/round/red/button-round-flat-1-red-light_focus.svg); }
.jui-btn--blue { --jb0:url(skin/buttons/3d/square/blue/button-square-3d-2.5-blue-regular_standard.svg);--jb1:url(skin/buttons/3d/square/blue/button-square-3d-2.5-blue-regular_hover.svg);--jb2:url(skin/buttons/3d/square/blue/button-square-3d-2.5-blue-regular_pressed.svg);--jb3:url(skin/buttons/3d/square/blue/button-square-3d-2.5-blue-regular_focus.svg); }
.jui-btn--blue.jui-btn--flat { --jb0:url(skin/buttons/flat/square/blue/button-square-flat-2.5-blue-regular_standard.svg);--jb1:url(skin/buttons/flat/square/blue/button-square-flat-2.5-blue-regular_hover.svg);--jb2:url(skin/buttons/flat/square/blue/button-square-flat-2.5-blue-regular_pressed.svg);--jb3:url(skin/buttons/flat/square/blue/button-square-flat-2.5-blue-regular_focus.svg); }
.jui-btn--blue.jui-btn--round { --jb0:url(skin/buttons/3d/round/blue/button-round-3d-2.5-blue-regular_standard.svg);--jb1:url(skin/buttons/3d/round/blue/button-round-3d-2.5-blue-regular_hover.svg);--jb2:url(skin/buttons/3d/round/blue/button-round-3d-2.5-blue-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/blue/button-round-3d-2.5-blue-regular_focus.svg); }
.jui-btn--blue.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/blue/button-round-flat-2.5-blue-regular_standard.svg);--jb1:url(skin/buttons/flat/round/blue/button-round-flat-2.5-blue-regular_hover.svg);--jb2:url(skin/buttons/flat/round/blue/button-round-flat-2.5-blue-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/blue/button-round-flat-2.5-blue-regular_focus.svg); }
.jui-btn--blue.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/blue/button-round-3d-1-blue-regular_standard.svg);--jb1:url(skin/buttons/3d/round/blue/button-round-3d-1-blue-regular_hover.svg);--jb2:url(skin/buttons/3d/round/blue/button-round-3d-1-blue-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/blue/button-round-3d-1-blue-regular_focus.svg); }
.jui-btn--blue.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/blue/button-round-flat-1-blue-regular_standard.svg);--jb1:url(skin/buttons/flat/round/blue/button-round-flat-1-blue-regular_hover.svg);--jb2:url(skin/buttons/flat/round/blue/button-round-flat-1-blue-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/blue/button-round-flat-1-blue-regular_focus.svg); }
.jui-btn--blue.jui-btn--dark { --jb0:url(skin/buttons/3d/square/blue/button-square-3d-2.5-blue-dark_standard.svg);--jb1:url(skin/buttons/3d/square/blue/button-square-3d-2.5-blue-dark_hover.svg);--jb2:url(skin/buttons/3d/square/blue/button-square-3d-2.5-blue-dark_pressed.svg);--jb3:url(skin/buttons/3d/square/blue/button-square-3d-2.5-blue-dark_focus.svg); }
.jui-btn--blue.jui-btn--dark.jui-btn--flat { --jb0:url(skin/buttons/flat/square/blue/button-square-flat-2.5-blue-dark_standard.svg);--jb1:url(skin/buttons/flat/square/blue/button-square-flat-2.5-blue-dark_hover.svg);--jb2:url(skin/buttons/flat/square/blue/button-square-flat-2.5-blue-dark_pressed.svg);--jb3:url(skin/buttons/flat/square/blue/button-square-flat-2.5-blue-dark_focus.svg); }
.jui-btn--blue.jui-btn--dark.jui-btn--round { --jb0:url(skin/buttons/3d/round/blue/button-round-3d-2.5-blue-dark_standard.svg);--jb1:url(skin/buttons/3d/round/blue/button-round-3d-2.5-blue-dark_hover.svg);--jb2:url(skin/buttons/3d/round/blue/button-round-3d-2.5-blue-dark_pressed.svg);--jb3:url(skin/buttons/3d/round/blue/button-round-3d-2.5-blue-dark_focus.svg); }
.jui-btn--blue.jui-btn--dark.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/blue/button-round-flat-2.5-blue-dark_standard.svg);--jb1:url(skin/buttons/flat/round/blue/button-round-flat-2.5-blue-dark_hover.svg);--jb2:url(skin/buttons/flat/round/blue/button-round-flat-2.5-blue-dark_pressed.svg);--jb3:url(skin/buttons/flat/round/blue/button-round-flat-2.5-blue-dark_focus.svg); }
.jui-btn--blue.jui-btn--dark.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/blue/button-round-3d-1-blue-dark_standard.svg);--jb1:url(skin/buttons/3d/round/blue/button-round-3d-1-blue-dark_hover.svg);--jb2:url(skin/buttons/3d/round/blue/button-round-3d-1-blue-dark_pressed.svg);--jb3:url(skin/buttons/3d/round/blue/button-round-3d-1-blue-dark_focus.svg); }
.jui-btn--blue.jui-btn--dark.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/blue/button-round-flat-1-blue-dark_standard.svg);--jb1:url(skin/buttons/flat/round/blue/button-round-flat-1-blue-dark_hover.svg);--jb2:url(skin/buttons/flat/round/blue/button-round-flat-1-blue-dark_pressed.svg);--jb3:url(skin/buttons/flat/round/blue/button-round-flat-1-blue-dark_focus.svg); }
.jui-btn--blue.jui-btn--light { --jb0:url(skin/buttons/3d/square/blue/button-square-3d-2.5-blue-light_standard.svg);--jb1:url(skin/buttons/3d/square/blue/button-square-3d-2.5-blue-light_hover.svg);--jb2:url(skin/buttons/3d/square/blue/button-square-3d-2.5-blue-light_pressed.svg);--jb3:url(skin/buttons/3d/square/blue/button-square-3d-2.5-blue-light_focus.svg); }
.jui-btn--blue.jui-btn--light.jui-btn--flat { --jb0:url(skin/buttons/flat/square/blue/button-square-flat-2.5-blue-light_standard.svg);--jb1:url(skin/buttons/flat/square/blue/button-square-flat-2.5-blue-light_hover.svg);--jb2:url(skin/buttons/flat/square/blue/button-square-flat-2.5-blue-light_pressed.svg);--jb3:url(skin/buttons/flat/square/blue/button-square-flat-2.5-blue-light_focus.svg); }
.jui-btn--blue.jui-btn--light.jui-btn--round { --jb0:url(skin/buttons/3d/round/blue/button-round-3d-2.5-blue-light_standard.svg);--jb1:url(skin/buttons/3d/round/blue/button-round-3d-2.5-blue-light_hover.svg);--jb2:url(skin/buttons/3d/round/blue/button-round-3d-2.5-blue-light_pressed.svg);--jb3:url(skin/buttons/3d/round/blue/button-round-3d-2.5-blue-light_focus.svg); }
.jui-btn--blue.jui-btn--light.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/blue/button-round-flat-2.5-blue-light_standard.svg);--jb1:url(skin/buttons/flat/round/blue/button-round-flat-2.5-blue-light_hover.svg);--jb2:url(skin/buttons/flat/round/blue/button-round-flat-2.5-blue-light_pressed.svg);--jb3:url(skin/buttons/flat/round/blue/button-round-flat-2.5-blue-light_focus.svg); }
.jui-btn--blue.jui-btn--light.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/blue/button-round-3d-1-blue-light_standard.svg);--jb1:url(skin/buttons/3d/round/blue/button-round-3d-1-blue-light_hover.svg);--jb2:url(skin/buttons/3d/round/blue/button-round-3d-1-blue-light_pressed.svg);--jb3:url(skin/buttons/3d/round/blue/button-round-3d-1-blue-light_focus.svg); }
.jui-btn--blue.jui-btn--light.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/blue/button-round-flat-1-blue-light_standard.svg);--jb1:url(skin/buttons/flat/round/blue/button-round-flat-1-blue-light_hover.svg);--jb2:url(skin/buttons/flat/round/blue/button-round-flat-1-blue-light_pressed.svg);--jb3:url(skin/buttons/flat/round/blue/button-round-flat-1-blue-light_focus.svg); }
.jui-btn--white { --jb0:url(skin/buttons/3d/square/white/button-square-3d-2.5-white_standard.svg);--jb1:url(skin/buttons/3d/square/white/button-square-3d-2.5-white_hover.svg);--jb2:url(skin/buttons/3d/square/white/button-square-3d-2.5-white_pressed.svg);--jb3:url(skin/buttons/3d/square/white/button-square-3d-2.5-white_focus.svg); }
.jui-btn--white.jui-btn--flat { --jb0:url(skin/buttons/flat/square/white/button-square-flat-2.5-white_standard.svg);--jb1:url(skin/buttons/flat/square/white/button-square-flat-2.5-white_hover.svg);--jb2:url(skin/buttons/flat/square/white/button-square-flat-2.5-white_pressed.svg);--jb3:url(skin/buttons/flat/square/white/button-square-flat-2.5-white_focus.svg); }
.jui-btn--white.jui-btn--round { --jb0:url(skin/buttons/3d/round/white/button-round-3d-2.5-white_standard.svg);--jb1:url(skin/buttons/3d/round/white/button-round-3d-2.5-white_hover.svg);--jb2:url(skin/buttons/3d/round/white/button-round-3d-2.5-white_pressed.svg);--jb3:url(skin/buttons/3d/round/white/button-round-3d-2.5-white_focus.svg); }
.jui-btn--white.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/white/button-round-flat-2.5-white_standard.svg);--jb1:url(skin/buttons/flat/round/white/button-round-flat-2.5-white_hover.svg);--jb2:url(skin/buttons/flat/round/white/button-round-flat-2.5-white_pressed.svg);--jb3:url(skin/buttons/flat/round/white/button-round-flat-2.5-white_focus.svg); }
.jui-btn--white.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/white/button-round-3d-1-white_standard.svg);--jb1:url(skin/buttons/3d/round/white/button-round-3d-1-white_hover.svg);--jb2:url(skin/buttons/3d/round/white/button-round-3d-1-white_pressed.svg);--jb3:url(skin/buttons/3d/round/white/button-round-3d-1-white_focus.svg); }
.jui-btn--white.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/white/button-round-flat-1-white_standard.svg);--jb1:url(skin/buttons/flat/round/white/button-round-flat-1-white_hover.svg);--jb2:url(skin/buttons/flat/round/white/button-round-flat-1-white_pressed.svg);--jb3:url(skin/buttons/flat/round/white/button-round-flat-1-white_focus.svg); }
.jui-btn--grey { --jb0:url(skin/buttons/3d/square/grey/button-square-3d-2.5-grey-regular_standard.svg);--jb1:url(skin/buttons/3d/square/grey/button-square-3d-2.5-grey-regular_hover.svg);--jb2:url(skin/buttons/3d/square/grey/button-square-3d-2.5-grey-regular_pressed.svg);--jb3:url(skin/buttons/3d/square/grey/button-square-3d-2.5-grey-regular_focus.svg); }
.jui-btn--grey.jui-btn--flat { --jb0:url(skin/buttons/flat/square/grey/button-square-flat-2.5-grey-regular_standard.svg);--jb1:url(skin/buttons/flat/square/grey/button-square-flat-2.5-grey-regular_hover.svg);--jb2:url(skin/buttons/flat/square/grey/button-square-flat-2.5-grey-regular_pressed.svg);--jb3:url(skin/buttons/flat/square/grey/button-square-flat-2.5-grey-regular_focus.svg); }
.jui-btn--grey.jui-btn--round { --jb0:url(skin/buttons/3d/round/grey/button-round-3d-2.5-grey-regular_standard.svg);--jb1:url(skin/buttons/3d/round/grey/button-round-3d-2.5-grey-regular_hover.svg);--jb2:url(skin/buttons/3d/round/grey/button-round-3d-2.5-grey-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/grey/button-round-3d-2.5-grey-regular_focus.svg); }
.jui-btn--grey.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/grey/button-round-flat-2.5-grey-regular_standard.svg);--jb1:url(skin/buttons/flat/round/grey/button-round-flat-2.5-grey-regular_hover.svg);--jb2:url(skin/buttons/flat/round/grey/button-round-flat-2.5-grey-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/grey/button-round-flat-2.5-grey-regular_focus.svg); }
.jui-btn--grey.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/grey/button-round-3d-1-grey-regular_standard.svg);--jb1:url(skin/buttons/3d/round/grey/button-round-3d-1-grey-regular_hover.svg);--jb2:url(skin/buttons/3d/round/grey/button-round-3d-1-grey-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/grey/button-round-3d-1-grey-regular_focus.svg); }
.jui-btn--grey.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/grey/button-round-flat-1-grey-regular_standard.svg);--jb1:url(skin/buttons/flat/round/grey/button-round-flat-1-grey-regular_hover.svg);--jb2:url(skin/buttons/flat/round/grey/button-round-flat-1-grey-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/grey/button-round-flat-1-grey-regular_focus.svg); }
.jui-btn--grey.jui-btn--dark { --jb0:url(skin/buttons/3d/square/grey/button-square-3d-2.5-grey-dark_standard.svg);--jb1:url(skin/buttons/3d/square/grey/button-square-3d-2.5-grey-dark_hover.svg);--jb2:url(skin/buttons/3d/square/grey/button-square-3d-2.5-grey-dark_pressed.svg);--jb3:url(skin/buttons/3d/square/grey/button-square-3d-2.5-grey-dark_focus.svg); }
.jui-btn--grey.jui-btn--dark.jui-btn--flat { --jb0:url(skin/buttons/flat/square/grey/button-square-flat-2.5-grey-dark_standard.svg);--jb1:url(skin/buttons/flat/square/grey/button-square-flat-2.5-grey-dark_hover.svg);--jb2:url(skin/buttons/flat/square/grey/button-square-flat-2.5-grey-dark_pressed.svg);--jb3:url(skin/buttons/flat/square/grey/button-square-flat-2.5-grey-dark_focus.svg); }
.jui-btn--grey.jui-btn--dark.jui-btn--round { --jb0:url(skin/buttons/3d/round/grey/button-round-3d-2.5-grey-dark_standard.svg);--jb1:url(skin/buttons/3d/round/grey/button-round-3d-2.5-grey-dark_hover.svg);--jb2:url(skin/buttons/3d/round/grey/button-round-3d-2.5-grey-dark_pressed.svg);--jb3:url(skin/buttons/3d/round/grey/button-round-3d-2.5-grey-dark_focus.svg); }
.jui-btn--grey.jui-btn--dark.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/grey/button-round-flat-2.5-grey-dark_standard.svg);--jb1:url(skin/buttons/flat/round/grey/button-round-flat-2.5-grey-dark_hover.svg);--jb2:url(skin/buttons/flat/round/grey/button-round-flat-2.5-grey-dark_pressed.svg);--jb3:url(skin/buttons/flat/round/grey/button-round-flat-2.5-grey-dark_focus.svg); }
.jui-btn--grey.jui-btn--dark.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/grey/button-round-3d-1-grey-dark_standard.svg);--jb1:url(skin/buttons/3d/round/grey/button-round-3d-1-grey-dark_hover.svg);--jb2:url(skin/buttons/3d/round/grey/button-round-3d-1-grey-dark_pressed.svg);--jb3:url(skin/buttons/3d/round/grey/button-round-3d-1-grey-dark_focus.svg); }
.jui-btn--grey.jui-btn--dark.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/grey/button-round-flat-1-grey-dark_standard.svg);--jb1:url(skin/buttons/flat/round/grey/button-round-flat-1-grey-dark_hover.svg);--jb2:url(skin/buttons/flat/round/grey/button-round-flat-1-grey-dark_pressed.svg);--jb3:url(skin/buttons/flat/round/grey/button-round-flat-1-grey-dark_focus.svg); }
.jui-btn--grey.jui-btn--light { --jb0:url(skin/buttons/3d/square/grey/button-square-3d-2.5-grey-light_standard.svg);--jb1:url(skin/buttons/3d/square/grey/button-square-3d-2.5-grey-light_hover.svg);--jb2:url(skin/buttons/3d/square/grey/button-square-3d-2.5-grey-light_pressed.svg);--jb3:url(skin/buttons/3d/square/grey/button-square-3d-2.5-grey-light_focus.svg); }
.jui-btn--grey.jui-btn--light.jui-btn--flat { --jb0:url(skin/buttons/flat/square/grey/button-square-flat-2.5-grey-light_standard.svg);--jb1:url(skin/buttons/flat/square/grey/button-square-flat-2.5-grey-light_hover.svg);--jb2:url(skin/buttons/flat/square/grey/button-square-flat-2.5-grey-light_pressed.svg);--jb3:url(skin/buttons/flat/square/grey/button-square-flat-2.5-grey-light_focus.svg); }
.jui-btn--grey.jui-btn--light.jui-btn--round { --jb0:url(skin/buttons/3d/round/grey/button-round-3d-2.5-grey-light_standard.svg);--jb1:url(skin/buttons/3d/round/grey/button-round-3d-2.5-grey-light_hover.svg);--jb2:url(skin/buttons/3d/round/grey/button-round-3d-2.5-grey-light_pressed.svg);--jb3:url(skin/buttons/3d/round/grey/button-round-3d-2.5-grey-light_focus.svg); }
.jui-btn--grey.jui-btn--light.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/grey/button-round-flat-2.5-grey-light_standard.svg);--jb1:url(skin/buttons/flat/round/grey/button-round-flat-2.5-grey-light_hover.svg);--jb2:url(skin/buttons/flat/round/grey/button-round-flat-2.5-grey-light_pressed.svg);--jb3:url(skin/buttons/flat/round/grey/button-round-flat-2.5-grey-light_focus.svg); }
.jui-btn--grey.jui-btn--light.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/grey/button-round-3d-1-grey-light_standard.svg);--jb1:url(skin/buttons/3d/round/grey/button-round-3d-1-grey-light_hover.svg);--jb2:url(skin/buttons/3d/round/grey/button-round-3d-1-grey-light_pressed.svg);--jb3:url(skin/buttons/3d/round/grey/button-round-3d-1-grey-light_focus.svg); }
.jui-btn--grey.jui-btn--light.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/grey/button-round-flat-1-grey-light_standard.svg);--jb1:url(skin/buttons/flat/round/grey/button-round-flat-1-grey-light_hover.svg);--jb2:url(skin/buttons/flat/round/grey/button-round-flat-1-grey-light_pressed.svg);--jb3:url(skin/buttons/flat/round/grey/button-round-flat-1-grey-light_focus.svg); }
.jui-btn--yellow { --jb0:url(skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-regular_standard.svg);--jb1:url(skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-regular_hover.svg);--jb2:url(skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-regular_pressed.svg);--jb3:url(skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-regular_focus.svg); }
.jui-btn--yellow.jui-btn--flat { --jb0:url(skin/buttons/flat/square/yellow/button-square-flat-2.5-yellow-regular_standard.svg);--jb1:url(skin/buttons/flat/square/yellow/button-square-flat-2.5-yellow-regular_hover.svg);--jb2:url(skin/buttons/flat/square/yellow/button-square-flat-2.5-yellow-regular_pressed.svg);--jb3:url(skin/buttons/flat/square/yellow/button-square-flat-2.5-yellow-regular_focus.svg); }
.jui-btn--yellow.jui-btn--round { --jb0:url(skin/buttons/3d/round/yellow/button-round-3d-2.5-yellow-regular_standard.svg);--jb1:url(skin/buttons/3d/round/yellow/button-round-3d-2.5-yellow-regular_hover.svg);--jb2:url(skin/buttons/3d/round/yellow/button-round-3d-2.5-yellow-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/yellow/button-round-3d-2.5-yellow-regular_focus.svg); }
.jui-btn--yellow.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/yellow/button-round-flat-2.5-yellow-regular_standard.svg);--jb1:url(skin/buttons/flat/round/yellow/button-round-flat-2.5-yellow-regular_hover.svg);--jb2:url(skin/buttons/flat/round/yellow/button-round-flat-2.5-yellow-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/yellow/button-round-flat-2.5-yellow-regular_focus.svg); }
.jui-btn--yellow.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/yellow/button-round-3d-1-yellow-regular_standard.svg);--jb1:url(skin/buttons/3d/round/yellow/button-round-3d-1-yellow-regular_hover.svg);--jb2:url(skin/buttons/3d/round/yellow/button-round-3d-1-yellow-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/yellow/button-round-3d-1-yellow-regular_focus.svg); }
.jui-btn--yellow.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/yellow/button-round-flat-1-yellow-regular_standard.svg);--jb1:url(skin/buttons/flat/round/yellow/button-round-flat-1-yellow-regular_hover.svg);--jb2:url(skin/buttons/flat/round/yellow/button-round-flat-1-yellow-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/yellow/button-round-flat-1-yellow-regular_focus.svg); }
.jui-btn--yellow.jui-btn--dark { --jb0:url(skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-dark_standard.svg);--jb1:url(skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-dark_hover.svg);--jb2:url(skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-dark_pressed.svg);--jb3:url(skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-dark_focus.svg); }
.jui-btn--yellow.jui-btn--dark.jui-btn--flat { --jb0:url(skin/buttons/flat/square/yellow/button-square-flat-2.5-yellow-dark_standard.svg);--jb1:url(skin/buttons/flat/square/yellow/button-square-flat-2.5-yellow-dark_hover.svg);--jb2:url(skin/buttons/flat/square/yellow/button-square-flat-2.5-yellow-dark_pressed.svg);--jb3:url(skin/buttons/flat/square/yellow/button-square-flat-2.5-yellow-dark_focus.svg); }
.jui-btn--yellow.jui-btn--dark.jui-btn--round { --jb0:url(skin/buttons/3d/round/yellow/button-round-3d-2.5-yellow-dark_standard.svg);--jb1:url(skin/buttons/3d/round/yellow/button-round-3d-2.5-yellow-dark_hover.svg);--jb2:url(skin/buttons/3d/round/yellow/button-round-3d-2.5-yellow-dark_pressed.svg);--jb3:url(skin/buttons/3d/round/yellow/button-round-3d-2.5-yellow-dark_focus.svg); }
.jui-btn--yellow.jui-btn--dark.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/yellow/button-round-flat-2.5-yellow-dark_standard.svg);--jb1:url(skin/buttons/flat/round/yellow/button-round-flat-2.5-yellow-dark_hover.svg);--jb2:url(skin/buttons/flat/round/yellow/button-round-flat-2.5-yellow-dark_pressed.svg);--jb3:url(skin/buttons/flat/round/yellow/button-round-flat-2.5-yellow-dark_focus.svg); }
.jui-btn--yellow.jui-btn--dark.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/yellow/button-round-3d-1-yellow-dark_standard.svg);--jb1:url(skin/buttons/3d/round/yellow/button-round-3d-1-yellow-dark_hover.svg);--jb2:url(skin/buttons/3d/round/yellow/button-round-3d-1-yellow-dark_pressed.svg);--jb3:url(skin/buttons/3d/round/yellow/button-round-3d-1-yellow-dark_focus.svg); }
.jui-btn--yellow.jui-btn--dark.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/yellow/button-round-flat-1-yellow-dark_standard.svg);--jb1:url(skin/buttons/flat/round/yellow/button-round-flat-1-yellow-dark_hover.svg);--jb2:url(skin/buttons/flat/round/yellow/button-round-flat-1-yellow-dark_pressed.svg);--jb3:url(skin/buttons/flat/round/yellow/button-round-flat-1-yellow-dark_focus.svg); }
.jui-btn--yellow.jui-btn--light { --jb0:url(skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-light_standard.svg);--jb1:url(skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-light_hover.svg);--jb2:url(skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-light_pressed.svg);--jb3:url(skin/buttons/3d/square/yellow/button-square-3d-2.5-yellow-light_focus.svg); }
.jui-btn--yellow.jui-btn--light.jui-btn--flat { --jb0:url(skin/buttons/flat/square/yellow/button-square-flat-2.5-yellow-light_standard.svg);--jb1:url(skin/buttons/flat/square/yellow/button-square-flat-2.5-yellow-light_hover.svg);--jb2:url(skin/buttons/flat/square/yellow/button-square-flat-2.5-yellow-light_pressed.svg);--jb3:url(skin/buttons/flat/square/yellow/button-square-flat-2.5-yellow-light_focus.svg); }
.jui-btn--yellow.jui-btn--light.jui-btn--round { --jb0:url(skin/buttons/3d/round/yellow/button-round-3d-2.5-yellow-light_standard.svg);--jb1:url(skin/buttons/3d/round/yellow/button-round-3d-2.5-yellow-light_hover.svg);--jb2:url(skin/buttons/3d/round/yellow/button-round-3d-2.5-yellow-light_pressed.svg);--jb3:url(skin/buttons/3d/round/yellow/button-round-3d-2.5-yellow-light_focus.svg); }
.jui-btn--yellow.jui-btn--light.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/yellow/button-round-flat-2.5-yellow-light_standard.svg);--jb1:url(skin/buttons/flat/round/yellow/button-round-flat-2.5-yellow-light_hover.svg);--jb2:url(skin/buttons/flat/round/yellow/button-round-flat-2.5-yellow-light_pressed.svg);--jb3:url(skin/buttons/flat/round/yellow/button-round-flat-2.5-yellow-light_focus.svg); }
.jui-btn--yellow.jui-btn--light.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/yellow/button-round-3d-1-yellow-light_standard.svg);--jb1:url(skin/buttons/3d/round/yellow/button-round-3d-1-yellow-light_hover.svg);--jb2:url(skin/buttons/3d/round/yellow/button-round-3d-1-yellow-light_pressed.svg);--jb3:url(skin/buttons/3d/round/yellow/button-round-3d-1-yellow-light_focus.svg); }
.jui-btn--yellow.jui-btn--light.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/yellow/button-round-flat-1-yellow-light_standard.svg);--jb1:url(skin/buttons/flat/round/yellow/button-round-flat-1-yellow-light_hover.svg);--jb2:url(skin/buttons/flat/round/yellow/button-round-flat-1-yellow-light_pressed.svg);--jb3:url(skin/buttons/flat/round/yellow/button-round-flat-1-yellow-light_focus.svg); }
.jui-btn--green { --jb0:url(skin/buttons/3d/square/green/button-square-3d-2.5-green-regular_standard.svg);--jb1:url(skin/buttons/3d/square/green/button-square-3d-2.5-green-regular_hover.svg);--jb2:url(skin/buttons/3d/square/green/button-square-3d-2.5-green-regular_pressed.svg);--jb3:url(skin/buttons/3d/square/green/button-square-3d-2.5-green-regular_focus.svg); }
.jui-btn--green.jui-btn--flat { --jb0:url(skin/buttons/flat/square/green/button-square-flat-2.5-green-regular_standard.svg);--jb1:url(skin/buttons/flat/square/green/button-square-flat-2.5-green-regular_hover.svg);--jb2:url(skin/buttons/flat/square/green/button-square-flat-2.5-green-regular_pressed.svg);--jb3:url(skin/buttons/flat/square/green/button-square-flat-2.5-green-regular_focus.svg); }
.jui-btn--green.jui-btn--round { --jb0:url(skin/buttons/3d/round/green/button-round-3d-2.5-green-regular_standard.svg);--jb1:url(skin/buttons/3d/round/green/button-round-3d-2.5-green-regular_hover.svg);--jb2:url(skin/buttons/3d/round/green/button-round-3d-2.5-green-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/green/button-round-3d-2.5-green-regular_focus.svg); }
.jui-btn--green.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/green/button-round-flat-2.5-green-regular_standard.svg);--jb1:url(skin/buttons/flat/round/green/button-round-flat-2.5-green-regular_hover.svg);--jb2:url(skin/buttons/flat/round/green/button-round-flat-2.5-green-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/green/button-round-flat-2.5-green-regular_focus.svg); }
.jui-btn--green.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/green/button-round-3d-1-green-regular_standard.svg);--jb1:url(skin/buttons/3d/round/green/button-round-3d-1-green-regular_hover.svg);--jb2:url(skin/buttons/3d/round/green/button-round-3d-1-green-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/green/button-round-3d-1-green-regular_focus.svg); }
.jui-btn--green.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/green/button-round-flat-1-green-regular_standard.svg);--jb1:url(skin/buttons/flat/round/green/button-round-flat-1-green-regular_hover.svg);--jb2:url(skin/buttons/flat/round/green/button-round-flat-1-green-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/green/button-round-flat-1-green-regular_focus.svg); }
.jui-btn--green.jui-btn--dark { --jb0:url(skin/buttons/3d/square/green/button-square-3d-2.5-green-dark_standard.svg);--jb1:url(skin/buttons/3d/square/green/button-square-3d-2.5-green-dark_hover.svg);--jb2:url(skin/buttons/3d/square/green/button-square-3d-2.5-green-dark_pressed.svg);--jb3:url(skin/buttons/3d/square/green/button-square-3d-2.5-green-dark_focus.svg); }
.jui-btn--green.jui-btn--dark.jui-btn--flat { --jb0:url(skin/buttons/flat/square/green/button-square-flat-2.5-green-dark_standard.svg);--jb1:url(skin/buttons/flat/square/green/button-square-flat-2.5-green-dark_hover.svg);--jb2:url(skin/buttons/flat/square/green/button-square-flat-2.5-green-dark_pressed.svg);--jb3:url(skin/buttons/flat/square/green/button-square-flat-2.5-green-dark_focus.svg); }
.jui-btn--green.jui-btn--dark.jui-btn--round { --jb0:url(skin/buttons/3d/round/green/button-round-3d-2.5-green-dark_standard.svg);--jb1:url(skin/buttons/3d/round/green/button-round-3d-2.5-green-dark_hover.svg);--jb2:url(skin/buttons/3d/round/green/button-round-3d-2.5-green-dark_pressed.svg);--jb3:url(skin/buttons/3d/round/green/button-round-3d-2.5-green-dark_focus.svg); }
.jui-btn--green.jui-btn--dark.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/green/button-round-flat-2.5-green-dark_standard.svg);--jb1:url(skin/buttons/flat/round/green/button-round-flat-2.5-green-dark_hover.svg);--jb2:url(skin/buttons/flat/round/green/button-round-flat-2.5-green-dark_pressed.svg);--jb3:url(skin/buttons/flat/round/green/button-round-flat-2.5-green-dark_focus.svg); }
.jui-btn--green.jui-btn--dark.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/green/button-round-3d-1-green-dark_standard.svg);--jb1:url(skin/buttons/3d/round/green/button-round-3d-1-green-dark_hover.svg);--jb2:url(skin/buttons/3d/round/green/button-round-3d-1-green-dark_pressed.svg);--jb3:url(skin/buttons/3d/round/green/button-round-3d-1-green-dark_focus.svg); }
.jui-btn--green.jui-btn--dark.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/green/button-round-flat-1-green-dark_standard.svg);--jb1:url(skin/buttons/flat/round/green/button-round-flat-1-green-dark_hover.svg);--jb2:url(skin/buttons/flat/round/green/button-round-flat-1-green-dark_pressed.svg);--jb3:url(skin/buttons/flat/round/green/button-round-flat-1-green-dark_focus.svg); }
.jui-btn--green.jui-btn--light { --jb0:url(skin/buttons/3d/square/green/button-square-3d-2.5-green-light_standard.svg);--jb1:url(skin/buttons/3d/square/green/button-square-3d-2.5-green-light_hover.svg);--jb2:url(skin/buttons/3d/square/green/button-square-3d-2.5-green-light_pressed.svg);--jb3:url(skin/buttons/3d/square/green/button-square-3d-2.5-green-light_focus.svg); }
.jui-btn--green.jui-btn--light.jui-btn--flat { --jb0:url(skin/buttons/flat/square/green/button-square-flat-2.5-green-light_standard.svg);--jb1:url(skin/buttons/flat/square/green/button-square-flat-2.5-green-light_hover.svg);--jb2:url(skin/buttons/flat/square/green/button-square-flat-2.5-green-light_pressed.svg);--jb3:url(skin/buttons/flat/square/green/button-square-flat-2.5-green-light_focus.svg); }
.jui-btn--green.jui-btn--light.jui-btn--round { --jb0:url(skin/buttons/3d/round/green/button-round-3d-2.5-green-light_standard.svg);--jb1:url(skin/buttons/3d/round/green/button-round-3d-2.5-green-light_hover.svg);--jb2:url(skin/buttons/3d/round/green/button-round-3d-2.5-green-light_pressed.svg);--jb3:url(skin/buttons/3d/round/green/button-round-3d-2.5-green-light_focus.svg); }
.jui-btn--green.jui-btn--light.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/green/button-round-flat-2.5-green-light_standard.svg);--jb1:url(skin/buttons/flat/round/green/button-round-flat-2.5-green-light_hover.svg);--jb2:url(skin/buttons/flat/round/green/button-round-flat-2.5-green-light_pressed.svg);--jb3:url(skin/buttons/flat/round/green/button-round-flat-2.5-green-light_focus.svg); }
.jui-btn--green.jui-btn--light.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/green/button-round-3d-1-green-light_standard.svg);--jb1:url(skin/buttons/3d/round/green/button-round-3d-1-green-light_hover.svg);--jb2:url(skin/buttons/3d/round/green/button-round-3d-1-green-light_pressed.svg);--jb3:url(skin/buttons/3d/round/green/button-round-3d-1-green-light_focus.svg); }
.jui-btn--green.jui-btn--light.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/green/button-round-flat-1-green-light_standard.svg);--jb1:url(skin/buttons/flat/round/green/button-round-flat-1-green-light_hover.svg);--jb2:url(skin/buttons/flat/round/green/button-round-flat-1-green-light_pressed.svg);--jb3:url(skin/buttons/flat/round/green/button-round-flat-1-green-light_focus.svg); }
.jui-btn--purple { --jb0:url(skin/buttons/3d/square/purple/button-square-3d-2.5-purple-regular_standard.svg);--jb1:url(skin/buttons/3d/square/purple/button-square-3d-2.5-purple-regular_hover.svg);--jb2:url(skin/buttons/3d/square/purple/button-square-3d-2.5-purple-regular_pressed.svg);--jb3:url(skin/buttons/3d/square/purple/button-square-3d-2.5-purple-regular_focus.svg); }
.jui-btn--purple.jui-btn--flat { --jb0:url(skin/buttons/flat/square/purple/button-square-flat-2.5-purple-regular_standard.svg);--jb1:url(skin/buttons/flat/square/purple/button-square-flat-2.5-purple-regular_hover.svg);--jb2:url(skin/buttons/flat/square/purple/button-square-flat-2.5-purple-regular_pressed.svg);--jb3:url(skin/buttons/flat/square/purple/button-square-flat-2.5-purple-regular_focus.svg); }
.jui-btn--purple.jui-btn--round { --jb0:url(skin/buttons/3d/round/purple/button-round-3d-2.5-purple-regular_standard.svg);--jb1:url(skin/buttons/3d/round/purple/button-round-3d-2.5-purple-regular_hover.svg);--jb2:url(skin/buttons/3d/round/purple/button-round-3d-2.5-purple-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/purple/button-round-3d-2.5-purple-regular_focus.svg); }
.jui-btn--purple.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/purple/button-round-flat-2.5-purple-regular_standard.svg);--jb1:url(skin/buttons/flat/round/purple/button-round-flat-2.5-purple-regular_hover.svg);--jb2:url(skin/buttons/flat/round/purple/button-round-flat-2.5-purple-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/purple/button-round-flat-2.5-purple-regular_focus.svg); }
.jui-btn--purple.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/purple/button-round-3d-1-purple-regular_standard.svg);--jb1:url(skin/buttons/3d/round/purple/button-round-3d-1-purple-regular_hover.svg);--jb2:url(skin/buttons/3d/round/purple/button-round-3d-1-purple-regular_pressed.svg);--jb3:url(skin/buttons/3d/round/purple/button-round-3d-1-purple-regular_focus.svg); }
.jui-btn--purple.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/purple/button-round-flat-1-purple-regular_standard.svg);--jb1:url(skin/buttons/flat/round/purple/button-round-flat-1-purple-regular_hover.svg);--jb2:url(skin/buttons/flat/round/purple/button-round-flat-1-purple-regular_pressed.svg);--jb3:url(skin/buttons/flat/round/purple/button-round-flat-1-purple-regular_focus.svg); }
.jui-btn--purple.jui-btn--dark { --jb0:url(skin/buttons/3d/square/purple/button-square-3d-2.5-purple-dark_standard.svg);--jb1:url(skin/buttons/3d/square/purple/button-square-3d-2.5-purple-dark_hover.svg);--jb2:url(skin/buttons/3d/square/purple/button-square-3d-2.5-purple-dark_pressed.svg);--jb3:url(skin/buttons/3d/square/purple/button-square-3d-2.5-purple-dark_focus.svg); }
.jui-btn--purple.jui-btn--dark.jui-btn--flat { --jb0:url(skin/buttons/flat/square/purple/button-square-flat-2.5-purple-dark_standard.svg);--jb1:url(skin/buttons/flat/square/purple/button-square-flat-2.5-purple-dark_hover.svg);--jb2:url(skin/buttons/flat/square/purple/button-square-flat-2.5-purple-dark_pressed.svg);--jb3:url(skin/buttons/flat/square/purple/button-square-flat-2.5-purple-dark_focus.svg); }
.jui-btn--purple.jui-btn--dark.jui-btn--round { --jb0:url(skin/buttons/3d/round/purple/button-round-3d-2.5-purple-dark_standard.svg);--jb1:url(skin/buttons/3d/round/purple/button-round-3d-2.5-purple-dark_hover.svg);--jb2:url(skin/buttons/3d/round/purple/button-round-3d-2.5-purple-dark_pressed.svg);--jb3:url(skin/buttons/3d/round/purple/button-round-3d-2.5-purple-dark_focus.svg); }
.jui-btn--purple.jui-btn--dark.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/purple/button-round-flat-2.5-purple-dark_standard.svg);--jb1:url(skin/buttons/flat/round/purple/button-round-flat-2.5-purple-dark_hover.svg);--jb2:url(skin/buttons/flat/round/purple/button-round-flat-2.5-purple-dark_pressed.svg);--jb3:url(skin/buttons/flat/round/purple/button-round-flat-2.5-purple-dark_focus.svg); }
.jui-btn--purple.jui-btn--dark.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/purple/button-round-3d-1-purple-dark_standard.svg);--jb1:url(skin/buttons/3d/round/purple/button-round-3d-1-purple-dark_hover.svg);--jb2:url(skin/buttons/3d/round/purple/button-round-3d-1-purple-dark_pressed.svg);--jb3:url(skin/buttons/3d/round/purple/button-round-3d-1-purple-dark_focus.svg); }
.jui-btn--purple.jui-btn--dark.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/purple/button-round-flat-1-purple-dark_standard.svg);--jb1:url(skin/buttons/flat/round/purple/button-round-flat-1-purple-dark_hover.svg);--jb2:url(skin/buttons/flat/round/purple/button-round-flat-1-purple-dark_pressed.svg);--jb3:url(skin/buttons/flat/round/purple/button-round-flat-1-purple-dark_focus.svg); }
.jui-btn--purple.jui-btn--light { --jb0:url(skin/buttons/3d/square/purple/button-square-3d-2.5-purple-light_standard.svg);--jb1:url(skin/buttons/3d/square/purple/button-square-3d-2.5-purple-light_hover.svg);--jb2:url(skin/buttons/3d/square/purple/button-square-3d-2.5-purple-light_pressed.svg);--jb3:url(skin/buttons/3d/square/purple/button-square-3d-2.5-purple-light_focus.svg); }
.jui-btn--purple.jui-btn--light.jui-btn--flat { --jb0:url(skin/buttons/flat/square/purple/button-square-flat-2.5-purple-light_standard.svg);--jb1:url(skin/buttons/flat/square/purple/button-square-flat-2.5-purple-light_hover.svg);--jb2:url(skin/buttons/flat/square/purple/button-square-flat-2.5-purple-light_pressed.svg);--jb3:url(skin/buttons/flat/square/purple/button-square-flat-2.5-purple-light_focus.svg); }
.jui-btn--purple.jui-btn--light.jui-btn--round { --jb0:url(skin/buttons/3d/round/purple/button-round-3d-2.5-purple-light_standard.svg);--jb1:url(skin/buttons/3d/round/purple/button-round-3d-2.5-purple-light_hover.svg);--jb2:url(skin/buttons/3d/round/purple/button-round-3d-2.5-purple-light_pressed.svg);--jb3:url(skin/buttons/3d/round/purple/button-round-3d-2.5-purple-light_focus.svg); }
.jui-btn--purple.jui-btn--light.jui-btn--round.jui-btn--flat { --jb0:url(skin/buttons/flat/round/purple/button-round-flat-2.5-purple-light_standard.svg);--jb1:url(skin/buttons/flat/round/purple/button-round-flat-2.5-purple-light_hover.svg);--jb2:url(skin/buttons/flat/round/purple/button-round-flat-2.5-purple-light_pressed.svg);--jb3:url(skin/buttons/flat/round/purple/button-round-flat-2.5-purple-light_focus.svg); }
.jui-btn--purple.jui-btn--light.jui-btn--round.jui-btn--icon { --jb0:url(skin/buttons/3d/round/purple/button-round-3d-1-purple-light_standard.svg);--jb1:url(skin/buttons/3d/round/purple/button-round-3d-1-purple-light_hover.svg);--jb2:url(skin/buttons/3d/round/purple/button-round-3d-1-purple-light_pressed.svg);--jb3:url(skin/buttons/3d/round/purple/button-round-3d-1-purple-light_focus.svg); }
.jui-btn--purple.jui-btn--light.jui-btn--round.jui-btn--icon.jui-btn--flat { --jb0:url(skin/buttons/flat/round/purple/button-round-flat-1-purple-light_standard.svg);--jb1:url(skin/buttons/flat/round/purple/button-round-flat-1-purple-light_hover.svg);--jb2:url(skin/buttons/flat/round/purple/button-round-flat-1-purple-light_pressed.svg);--jb3:url(skin/buttons/flat/round/purple/button-round-flat-1-purple-light_focus.svg); }

/* ===== .jui-bar — track + fill; fill width from --p (0..1) ===== */
.jui-bar {
  --p: 0; display: block; position: relative; width: 100%; height: calc(20px * var(--jui-s)); overflow: hidden;
  border-style: solid; border-color: transparent; border-width: calc(4px * var(--jui-s));
  border-image-source: var(--jbt-regular); border-image-slice: 6 fill; border-image-width: calc(6px * var(--jui-s)); border-image-repeat: stretch;
  --jui-s: 1.25;
}
.jui-bar__fill {
  display: block; height: 100%; width: calc(var(--p) * 100%); max-width: 100%;
  border-style: solid; border-color: transparent; border-width: 0;
  border-image-source: var(--jbf-regular); border-image-slice: 2 fill; border-image-width: calc(2px * var(--jui-s)); border-image-repeat: stretch;
  transition: width 0.35s cubic-bezier(.3,1.4,.6,1);
}
.jui-bar--thin { height: calc(16px * var(--jui-s)); border-image-source: var(--jbt-thin); }
.jui-bar--thin .jui-bar__fill { border-image-source: var(--jbf-thin); border-image-slice: 4 fill; border-image-width: calc(4px * var(--jui-s)); }
.jui-bar--wide { height: calc(24px * var(--jui-s)); border-image-source: var(--jbt-wide); }
.jui-bar--wide .jui-bar__fill { border-image-source: var(--jbf-wide); }
.jui-bar--sm { --jui-s: 1; } .jui-bar--lg { --jui-s: 1.75; } .jui-bar--xl { --jui-s: 2.25; }
.jui-bar__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 calc(12px * var(--jui-s))/1 var(--jui-font); color: #fff; letter-spacing: 0.03em;
  paint-order: stroke fill; -webkit-text-stroke: 3px var(--jui-ink); pointer-events: none; white-space: nowrap; }
.jui-bar--seg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--seg, 5) - calc(3px * var(--jui-s))), var(--jbt-in) calc(100% / var(--seg, 5) - calc(3px * var(--jui-s))) calc(100% / var(--seg, 5))); }
.jui-bar--vertical { width: calc(20px * var(--jui-s)); height: auto; min-height: 80px; display: flex; align-items: flex-end; }
.jui-bar--vertical .jui-bar__fill { width: 100%; height: calc(var(--p) * 100%); }
:where(.jui-bar) { --jbf-thin:url(skin/bars/thin/green/progress-bar-thin-green-regular.svg);--jbf-regular:url(skin/bars/regular/green/progress-bar-regular-green-regular.svg);--jbf-wide:url(skin/bars/wide/green/progress-bar-wide-green-regular.svg); --jbt-thin:url(skin/bars/thin/grey/progress-container-thin-grey-dark.svg);--jbt-regular:url(skin/bars/regular/grey/progress-container-regular-grey-dark.svg);--jbt-wide:url(skin/bars/wide/grey/progress-container-wide-grey-dark.svg);--jbt-in:#324652; }
.jui-bar--red { --jbf-thin:url(skin/bars/thin/red/progress-bar-thin-red-regular.svg);--jbf-regular:url(skin/bars/regular/red/progress-bar-regular-red-regular.svg);--jbf-wide:url(skin/bars/wide/red/progress-bar-wide-red-regular.svg); }
.jui-bar--red.jui-bar--dark { --jbf-thin:url(skin/bars/thin/red/progress-bar-thin-red-dark.svg);--jbf-regular:url(skin/bars/regular/red/progress-bar-regular-red-dark.svg);--jbf-wide:url(skin/bars/wide/red/progress-bar-wide-red-dark.svg); }
.jui-bar--red.jui-bar--light { --jbf-thin:url(skin/bars/thin/red/progress-bar-thin-red-light.svg);--jbf-regular:url(skin/bars/regular/red/progress-bar-regular-red-light.svg);--jbf-wide:url(skin/bars/wide/red/progress-bar-wide-red-light.svg); }
.jui-bar--blue { --jbf-thin:url(skin/bars/thin/blue/progress-bar-thin-blue-regular.svg);--jbf-regular:url(skin/bars/regular/blue/progress-bar-regular-blue-regular.svg);--jbf-wide:url(skin/bars/wide/blue/progress-bar-wide-blue-regular.svg); }
.jui-bar--blue.jui-bar--dark { --jbf-thin:url(skin/bars/thin/blue/progress-bar-thin-blue-dark.svg);--jbf-regular:url(skin/bars/regular/blue/progress-bar-regular-blue-dark.svg);--jbf-wide:url(skin/bars/wide/blue/progress-bar-wide-blue-dark.svg); }
.jui-bar--blue.jui-bar--light { --jbf-thin:url(skin/bars/thin/blue/progress-bar-thin-blue-light.svg);--jbf-regular:url(skin/bars/regular/blue/progress-bar-regular-blue-light.svg);--jbf-wide:url(skin/bars/wide/blue/progress-bar-wide-blue-light.svg); }
.jui-bar--white { --jbf-thin:url(skin/bars/thin/white/progress-bar-thin-white.svg);--jbf-regular:url(skin/bars/regular/white/progress-bar-regular-white.svg);--jbf-wide:url(skin/bars/wide/white/progress-bar-wide-white.svg); }
.jui-bar--grey { --jbf-thin:url(skin/bars/thin/grey/progress-bar-thin-grey-regular.svg);--jbf-regular:url(skin/bars/regular/grey/progress-bar-regular-grey-regular.svg);--jbf-wide:url(skin/bars/wide/grey/progress-bar-wide-grey-regular.svg); }
.jui-bar--grey.jui-bar--dark { --jbf-thin:url(skin/bars/thin/grey/progress-bar-thin-grey-dark.svg);--jbf-regular:url(skin/bars/regular/grey/progress-bar-regular-grey-dark.svg);--jbf-wide:url(skin/bars/wide/grey/progress-bar-wide-grey-dark.svg); }
.jui-bar--grey.jui-bar--light { --jbf-thin:url(skin/bars/thin/grey/progress-bar-thin-grey-light.svg);--jbf-regular:url(skin/bars/regular/grey/progress-bar-regular-grey-light.svg);--jbf-wide:url(skin/bars/wide/grey/progress-bar-wide-grey-light.svg); }
.jui-bar--yellow { --jbf-thin:url(skin/bars/thin/yellow/progress-bar-thin-yellow-regular.svg);--jbf-regular:url(skin/bars/regular/yellow/progress-bar-regular-yellow-regular.svg);--jbf-wide:url(skin/bars/wide/yellow/progress-bar-wide-yellow-regular.svg); }
.jui-bar--yellow.jui-bar--dark { --jbf-thin:url(skin/bars/thin/yellow/progress-bar-thin-yellow-dark.svg);--jbf-regular:url(skin/bars/regular/yellow/progress-bar-regular-yellow-dark.svg);--jbf-wide:url(skin/bars/wide/yellow/progress-bar-wide-yellow-dark.svg); }
.jui-bar--yellow.jui-bar--light { --jbf-thin:url(skin/bars/thin/yellow/progress-bar-thin-yellow-light.svg);--jbf-regular:url(skin/bars/regular/yellow/progress-bar-regular-yellow-light.svg);--jbf-wide:url(skin/bars/wide/yellow/progress-bar-wide-yellow-light.svg); }
.jui-bar--green { --jbf-thin:url(skin/bars/thin/green/progress-bar-thin-green-regular.svg);--jbf-regular:url(skin/bars/regular/green/progress-bar-regular-green-regular.svg);--jbf-wide:url(skin/bars/wide/green/progress-bar-wide-green-regular.svg); }
.jui-bar--green.jui-bar--dark { --jbf-thin:url(skin/bars/thin/green/progress-bar-thin-green-dark.svg);--jbf-regular:url(skin/bars/regular/green/progress-bar-regular-green-dark.svg);--jbf-wide:url(skin/bars/wide/green/progress-bar-wide-green-dark.svg); }
.jui-bar--green.jui-bar--light { --jbf-thin:url(skin/bars/thin/green/progress-bar-thin-green-light.svg);--jbf-regular:url(skin/bars/regular/green/progress-bar-regular-green-light.svg);--jbf-wide:url(skin/bars/wide/green/progress-bar-wide-green-light.svg); }
.jui-bar--purple { --jbf-thin:url(skin/bars/thin/purple/progress-bar-thin-purple-regular.svg);--jbf-regular:url(skin/bars/regular/purple/progress-bar-regular-purple-regular.svg);--jbf-wide:url(skin/bars/wide/purple/progress-bar-wide-purple-regular.svg); }
.jui-bar--purple.jui-bar--dark { --jbf-thin:url(skin/bars/thin/purple/progress-bar-thin-purple-dark.svg);--jbf-regular:url(skin/bars/regular/purple/progress-bar-regular-purple-dark.svg);--jbf-wide:url(skin/bars/wide/purple/progress-bar-wide-purple-dark.svg); }
.jui-bar--purple.jui-bar--light { --jbf-thin:url(skin/bars/thin/purple/progress-bar-thin-purple-light.svg);--jbf-regular:url(skin/bars/regular/purple/progress-bar-regular-purple-light.svg);--jbf-wide:url(skin/bars/wide/purple/progress-bar-wide-purple-light.svg); }
[data-theme="dark"] :where(.jui-bar) { --jbt-thin:url(skin/bars/thin/grey/progress-container-thin-grey-regular.svg);--jbt-regular:url(skin/bars/regular/grey/progress-container-regular-grey-regular.svg);--jbt-wide:url(skin/bars/wide/grey/progress-container-wide-grey-regular.svg);--jbt-in:#476475; } /* the dark track would vanish on a dark page */
.jui-bar.jui-bar--track-white { --jbt-thin:url(skin/bars/thin/white/progress-container-thin-white.svg);--jbt-regular:url(skin/bars/regular/white/progress-container-regular-white.svg);--jbt-wide:url(skin/bars/wide/white/progress-container-wide-white.svg);--jbt-in:#d3dee3; }
.jui-bar.jui-bar--track-grey { --jbt-thin:url(skin/bars/thin/grey/progress-container-thin-grey-lighter.svg);--jbt-regular:url(skin/bars/regular/grey/progress-container-regular-grey-lighter.svg);--jbt-wide:url(skin/bars/wide/grey/progress-container-wide-grey-lighter.svg);--jbt-in:#abc0c9; }
.jui-bar--red.jui-bar--tinted { --jbt-thin:url(skin/bars/thin/red/progress-container-thin-red-darker.svg);--jbt-regular:url(skin/bars/regular/red/progress-container-regular-red-darker.svg);--jbt-wide:url(skin/bars/wide/red/progress-container-wide-red-darker.svg);--jbt-in:#99003f; }
.jui-bar--blue.jui-bar--tinted { --jbt-thin:url(skin/bars/thin/blue/progress-container-thin-blue-darker.svg);--jbt-regular:url(skin/bars/regular/blue/progress-container-regular-blue-darker.svg);--jbt-wide:url(skin/bars/wide/blue/progress-container-wide-blue-darker.svg);--jbt-in:#0018ab; }
.jui-bar--yellow.jui-bar--tinted { --jbt-thin:url(skin/bars/thin/yellow/progress-container-thin-yellow-darker.svg);--jbt-regular:url(skin/bars/regular/yellow/progress-container-regular-yellow-darker.svg);--jbt-wide:url(skin/bars/wide/yellow/progress-container-wide-yellow-darker.svg);--jbt-in:#f15a24; }
.jui-bar--green.jui-bar--tinted { --jbt-thin:url(skin/bars/thin/green/progress-container-thin-green-darker.svg);--jbt-regular:url(skin/bars/regular/green/progress-container-regular-green-darker.svg);--jbt-wide:url(skin/bars/wide/green/progress-container-wide-green-darker.svg);--jbt-in:#006837; }
.jui-bar--purple.jui-bar--tinted { --jbt-thin:url(skin/bars/thin/purple/progress-container-thin-purple-darker.svg);--jbt-regular:url(skin/bars/regular/purple/progress-container-regular-purple-darker.svg);--jbt-wide:url(skin/bars/wide/purple/progress-container-wide-purple-darker.svg);--jbt-in:#5414b3; }

/* ===== .jui-check / .jui-radio / .jui-toggle — <label class="jui-check jui-check--red"><input type="checkbox"> Text</label> (or the class on the input) ===== */
.jui-check, .jui-radio, .jui-toggle { display: inline-flex; align-items: center; gap: calc(10px * var(--jui-s)); min-height: 44px; cursor: pointer; font-family: var(--jui-font); font-weight: 700; color: inherit; user-select: none; -webkit-user-select: none; }
input.jui-check, input.jui-radio, input.jui-toggle, .jui-check > input, .jui-radio > input, .jui-toggle > input {
  -webkit-appearance: none; appearance: none; margin: 0; flex: none; cursor: pointer; border: 0; border-radius: 0; outline: none;
  background: var(--jw-off) center / 100% 100% no-repeat; min-height: 0;
}
input.jui-check, .jui-check > input { width: calc(32px * var(--jui-s)); height: calc(32px * var(--jui-s)); }
input.jui-check:checked, .jui-check > input:checked { background-image: var(--jw-on); }
input.jui-check:indeterminate, .jui-check > input:indeterminate { background-image: var(--jw-mid); }
.jui-check--cross > input:checked, input.jui-check.jui-check--cross:checked { background-image: var(--jw-x); }
input.jui-radio, .jui-radio > input { width: calc(32px * var(--jui-s)); height: calc(32px * var(--jui-s)); border-radius: 50%; }
input.jui-radio:checked, .jui-radio > input:checked { background-image: var(--jw-on); }
input.jui-toggle, .jui-toggle > input {
  width: calc(56px * var(--jui-s)); height: calc(36px * var(--jui-s));
  background: var(--jw-knob) left center / auto 100% no-repeat, var(--jw-off) center / 100% 85.7% no-repeat;
  transition: background-position 0.18s ease;
}
input.jui-toggle:checked, .jui-toggle > input:checked { background-image: var(--jw-knob), var(--jw-on); background-position: right center, center; }
input.jui-check:focus-visible, input.jui-radio:focus-visible, input.jui-toggle:focus-visible,
.jui-check > input:focus-visible, .jui-radio > input:focus-visible, .jui-toggle > input:focus-visible { outline: 3px solid var(--jui-ink); outline-offset: 3px; border-radius: 8px; }
[data-theme="dark"] :is(.jui-check, .jui-radio, .jui-toggle) > input:focus-visible { outline-color: #fff; }
:is(.jui-check, .jui-radio, .jui-toggle) > input:disabled, input:is(.jui-check, .jui-radio, .jui-toggle):disabled { cursor: not-allowed; opacity: 0.5; filter: grayscale(0.8); }
.jui-check--sm, .jui-radio--sm, .jui-toggle--sm { --jui-s: 0.75; } .jui-check--lg, .jui-radio--lg, .jui-toggle--lg { --jui-s: 1.3; }
:where(.jui-check) { --jw-off:url(skin/widgets/checkboxes/white/checkbox-empty-white.svg); --jw-on:url(skin/widgets/checkboxes/green/checkbox-tick-green.svg);--jw-mid:url(skin/widgets/checkboxes/green/checkbox-dot-green.svg);--jw-x:url(skin/widgets/checkboxes/green/checkbox-cross-green.svg); }
:where(.jui-radio) { --jw-off:url(skin/widgets/radio-buttons/white/radio-off-white.svg); --jw-on:url(skin/widgets/radio-buttons/green/radio-on-green.svg); }
:where(.jui-toggle) { --jw-off:url(skin/widgets/toggles/grey/toggle-round-grey.svg); --jw-on:url(skin/widgets/toggles/green/toggle-container-round-green.svg); --jw-knob:url(skin/widgets/handles/handle-round.svg); }
.jui-check--red { --jw-on:url(skin/widgets/checkboxes/red/checkbox-tick-red.svg);--jw-mid:url(skin/widgets/checkboxes/red/checkbox-dot-red.svg);--jw-x:url(skin/widgets/checkboxes/red/checkbox-cross-red.svg); } .jui-radio--red { --jw-on:url(skin/widgets/radio-buttons/red/radio-on-red.svg); } .jui-toggle--red { --jw-on:url(skin/widgets/toggles/red/toggle-container-round-red.svg); }
.jui-check--blue { --jw-on:url(skin/widgets/checkboxes/blue/checkbox-tick-blue.svg);--jw-mid:url(skin/widgets/checkboxes/blue/checkbox-dot-blue.svg);--jw-x:url(skin/widgets/checkboxes/blue/checkbox-cross-blue.svg); } .jui-radio--blue { --jw-on:url(skin/widgets/radio-buttons/blue/radio-on-blue.svg); } .jui-toggle--blue { --jw-on:url(skin/widgets/toggles/blue/toggle-container-round-blue.svg); }
.jui-check--white { --jw-on:url(skin/widgets/checkboxes/white/checkbox-tick-white.svg);--jw-mid:url(skin/widgets/checkboxes/white/checkbox-dot-white.svg);--jw-x:url(skin/widgets/checkboxes/white/checkbox-cross-white.svg); } .jui-radio--white { --jw-on:url(skin/widgets/radio-buttons/white/radio-on-white.svg); } .jui-toggle--white { --jw-on:url(skin/widgets/toggles/white/toggle-container-round-white.svg); }
.jui-check--grey { --jw-on:url(skin/widgets/checkboxes/grey/checkbox-tick-grey.svg);--jw-mid:url(skin/widgets/checkboxes/grey/checkbox-dot-grey.svg);--jw-x:url(skin/widgets/checkboxes/grey/checkbox-cross-grey.svg); } .jui-radio--grey { --jw-on:url(skin/widgets/radio-buttons/grey/radio-on-grey.svg); } .jui-toggle--grey { --jw-on:url(skin/widgets/toggles/grey/toggle-round-black.svg); }
.jui-check--yellow { --jw-on:url(skin/widgets/checkboxes/yellow/checkbox-tick-yellow.svg);--jw-mid:url(skin/widgets/checkboxes/yellow/checkbox-dot-yellow.svg);--jw-x:url(skin/widgets/checkboxes/yellow/checkbox-cross-yellow.svg); } .jui-radio--yellow { --jw-on:url(skin/widgets/radio-buttons/yellow/radio-on-yellow.svg); } .jui-toggle--yellow { --jw-on:url(skin/widgets/toggles/yellow/toggle-container-round-yellow.svg); }
.jui-check--green { --jw-on:url(skin/widgets/checkboxes/green/checkbox-tick-green.svg);--jw-mid:url(skin/widgets/checkboxes/green/checkbox-dot-green.svg);--jw-x:url(skin/widgets/checkboxes/green/checkbox-cross-green.svg); } .jui-radio--green { --jw-on:url(skin/widgets/radio-buttons/green/radio-on-green.svg); } .jui-toggle--green { --jw-on:url(skin/widgets/toggles/green/toggle-container-round-green.svg); }
.jui-check--purple { --jw-on:url(skin/widgets/checkboxes/purple/checkbox-tick-purple.svg);--jw-mid:url(skin/widgets/checkboxes/purple/checkbox-dot-purple.svg);--jw-x:url(skin/widgets/checkboxes/purple/checkbox-cross-purple.svg); } .jui-radio--purple { --jw-on:url(skin/widgets/radio-buttons/purple/radio-on-purple.svg); } .jui-toggle--purple { --jw-on:url(skin/widgets/toggles/purple/toggle-container-round-purple.svg); }

/* ===== .jui-ic — icon slot. <img class="jui-ic jui-ic--md" src="…">, or monochrome: <span class="jui-ic jui-ic--mask" style="--jui-ic:url(…)"></span> ===== */
.jui-ic { display: inline-block; flex: none; width: var(--jui-ic-md); height: var(--jui-ic-md); vertical-align: middle; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.jui-ic--sm { width: var(--jui-ic-sm); height: var(--jui-ic-sm); }
.jui-ic--md { width: var(--jui-ic-md); height: var(--jui-ic-md); }
.jui-ic--lg { width: var(--jui-ic-lg); height: var(--jui-ic-lg); }
.jui-ic--xl { width: var(--jui-ic-xl); height: var(--jui-ic-xl); }
.jui-ic--em { width: 1.3em; height: 1.3em; }
.jui-ic--mask { background-color: currentColor; -webkit-mask: var(--jui-ic) center / contain no-repeat; mask: var(--jui-ic) center / contain no-repeat; }
.jui-ic--off { filter: grayscale(1) brightness(1.15); opacity: 0.45; }
.jui-ic--shadow { filter: drop-shadow(0 3px 0 rgba(27, 45, 56, 0.3)); }

/* ===== .jui-kbd — keycap (the pack's white 3D key) ===== */
.jui-kbd {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  min-width: calc(40px * var(--jui-s)); height: calc(42px * var(--jui-s)); padding: 0 calc(4px * var(--jui-s));
  font: 800 calc(16px * var(--jui-s))/1 var(--jui-font); color: var(--jui-ink); text-transform: uppercase; letter-spacing: 0; text-shadow: none;
  border-style: solid; border-color: transparent; border-width: calc(5px * var(--jui-s)) calc(6px * var(--jui-s)) calc(11px * var(--jui-s)) calc(6px * var(--jui-s)); border-image-width: calc(7px * var(--jui-s)) calc(7px * var(--jui-s)) calc(17px * var(--jui-s)) calc(7px * var(--jui-s));
  border-image-source: url(skin/buttons/3d/square/white/button-square-3d-1-white_standard.svg); border-image-slice: 7 7 17 7 fill; background: none;
}
.jui-kbd.is-down { border-width: calc(10px * var(--jui-s)) calc(6px * var(--jui-s)) calc(6px * var(--jui-s)) calc(6px * var(--jui-s)); border-image-width: calc(13px * var(--jui-s)) calc(7px * var(--jui-s)) calc(11px * var(--jui-s)) calc(7px * var(--jui-s)); border-image-slice: 13 7 11 7 fill; border-image-source: url(skin/buttons/3d/square/white/button-square-3d-1-white_pressed.svg); }
.jui-kbd--sm { --jui-s: 0.75; } .jui-kbd--lg { --jui-s: 1.3; }
.jui-kbd--wide { min-width: calc(92px * var(--jui-s)); }
.jui-kbd .jui-ic { width: 1.2em; height: 1.2em; }

/* ===== .jui-badge — small chunky counter; .jui-chip — label pill with optional icon ===== */
.jui-badge, .jui-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; vertical-align: middle; white-space: nowrap;
  font-family: var(--jui-font); font-weight: 900; line-height: 1; color: var(--jtx); text-shadow: 0 calc(1.5px * var(--jui-s)) 0 var(--jts);
  background: var(--jf); border: calc(3px * var(--jui-s)) solid var(--jo); border-radius: 999px; box-shadow: inset 0 calc(-4px * var(--jui-s)) 0 var(--jl);
}
.jui-badge { min-width: calc(30px * var(--jui-s)); height: calc(30px * var(--jui-s)); padding: 0 calc(8px * var(--jui-s)) calc(3px * var(--jui-s)); font-size: calc(15px * var(--jui-s)); }
.jui-chip { min-height: calc(40px * var(--jui-s)); padding: calc(4px * var(--jui-s)) calc(14px * var(--jui-s)) calc(7px * var(--jui-s)); font-size: calc(16px * var(--jui-s)); }
.jui-chip .jui-ic { width: 1.5em; height: 1.5em; margin-left: -0.3em; }
.jui-chip--square, .jui-badge--square { border-radius: calc(10px * var(--jui-s)); }
.jui-badge--sm, .jui-chip--sm { --jui-s: 0.8; } .jui-badge--lg, .jui-chip--lg { --jui-s: 1.3; }
.jui-badge--dot { min-width: 0; width: calc(18px * var(--jui-s)); height: calc(18px * var(--jui-s)); padding: 0; }
/* corner badge on a button / icon: put the badge inside a position:relative parent */
.jui-badge--corner { position: absolute; top: calc(-10px * var(--jui-s)); right: calc(-10px * var(--jui-s)); z-index: 1; }

/* ===== .jui-toast — 3D container with an icon and a message ===== */
.jui-toast {
  display: flex; align-items: center; gap: calc(10px * var(--jui-s)); max-width: min(92vw, 460px); color: var(--jtx); text-shadow: 0 2px 0 var(--jts);
  font: 800 calc(17px * var(--jui-s))/1.25 var(--jui-font);
  border-style: solid; border-color: transparent; border-image-source: var(--jct-3d); border-image-slice: 12 12 22 12 fill; border-image-repeat: stretch;
  border-width: calc(12px * var(--jui-s)) calc(14px * var(--jui-s)) calc(22px * var(--jui-s)) calc(12px * var(--jui-s)); padding: calc(2px * var(--jui-s)) calc(4px * var(--jui-s));
  filter: drop-shadow(0 6px 0 rgba(27, 45, 56, 0.18));
  animation: jui-toast-in 0.32s cubic-bezier(.2,1.5,.5,1) both;
}
.jui-toast .jui-ic { width: calc(36px * var(--jui-s)); height: calc(36px * var(--jui-s)); }
.jui-toast.is-leaving { animation: jui-toast-out 0.22s ease-in both; }
.jui-toast-stack { position: fixed; z-index: 1000; left: 50%; top: 16px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.jui-toast-stack > * { pointer-events: auto; }
@keyframes jui-toast-in { from { opacity: 0; transform: translateY(-14px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes jui-toast-out { to { opacity: 0; transform: translateY(-10px) scale(0.95); } }

/* ===== .jui-title — big display text / numbers: heavy, white (or colour) with a thick dark outline ===== */
.jui-title {
  --jt-o: var(--jui-ink); --jt-f: #fff; --jt-w: 0.07em;
  font-family: var(--jui-font); font-weight: 900; letter-spacing: 0.02em; line-height: 1.05; color: var(--jt-f);
  paint-order: stroke fill; -webkit-text-stroke: calc(var(--jt-w) * 2) var(--jt-o);
  text-shadow: 0 0.09em 0 var(--jt-o);
  font-variant-numeric: tabular-nums;
}
.jui-title.jui-title--white { --jt-f: #fff; --jt-o: var(--jui-ink); }
.jui-title.jui-title--red { --jt-f: #f5535c; --jt-o: #800046; }
.jui-title.jui-title--blue { --jt-f: #37b9ff; --jt-o: #0018ab; }
.jui-title.jui-title--grey { --jt-f: #7b97a6; --jt-o: #1b2d38; }
.jui-title.jui-title--yellow { --jt-f: #fdaf18; --jt-o: #c6263d; }
.jui-title.jui-title--green { --jt-f: #8cc936; --jt-o: #006837; }
.jui-title.jui-title--purple { --jt-f: #c442ff; --jt-o: #5414b3; }
[data-theme="dark"] .jui-title--ink { --jt-f: #e4eef0; }
.jui-title--ink { --jt-f: var(--jui-ink); --jt-o: transparent; -webkit-text-stroke: 0; text-shadow: none; }
.jui-title--sm { font-size: 1.25rem; } .jui-title--md { font-size: 2rem; } .jui-title--lg { font-size: 3rem; } .jui-title--xl { font-size: 4.5rem; }
.jui-title--thin { --jt-w: 0.045em; }

/* ===== motion helpers ===== */
.jui-pop { animation: jui-pop 0.45s cubic-bezier(.2,1.6,.4,1) both; animation-delay: var(--d, 0s); }
@keyframes jui-pop { from { opacity: 0; transform: scale(0.2) rotate(-15deg); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
.jui-pulse { animation: jui-pulse 0.9s ease-in-out infinite; }
@keyframes jui-pulse { 50% { transform: scale(1.08); } }
.jui-wobble { animation: jui-wobble 0.5s ease-in-out both; }
@keyframes jui-wobble { 20% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }

@media (prefers-reduced-motion: reduce) {
  .jui-pop, .jui-pulse, .jui-wobble, .jui-toast, .jui-toast.is-leaving { animation: none !important; }
  .jui-bar__fill, input.jui-toggle, .jui-toggle > input { transition: none !important; }
}