:root {
    font-family: Inter, Arial, Helvetica, sans-serif;
    color: #2c2145;
    background: #dff7f3;
    font-synthesis: none
}

* {
    box-sizing: border-box
}

html {
    min-width: 320px;
    background: #dff7f3
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden
}

button,
input,
select {
    font: inherit;
    letter-spacing: 0
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer
}

.site-shell {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background: linear-gradient(90deg, transparent 0 14%, rgba(255, 255, 255, .56) 14% 15%, transparent 15% 85%, rgba(255, 255, 255, .52) 85% 86%, transparent 86%), radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .94) 0 18%, rgba(217, 252, 248, .76) 44%, transparent 67%), linear-gradient(180deg, #c7f4ed 0 56%, #f8fbfc 56% 78%, #d5e4e7 78% 79%, #edf7f8 79% 100%)
}

.site-shell:before {
    content: "";
    position: absolute;
    inset: 118px 0 58px;
    pointer-events: none;
    opacity: .44;
    background: linear-gradient(90deg, transparent 6%, #5dc7ca 6% 6.4%, transparent 6.4% 20%, #5dc7ca 20% 20.4%, transparent 20.4% 80%, #5dc7ca 80% 80.4%, transparent 80.4% 94%, #5dc7ca 94% 94.4%, transparent 94.4%), linear-gradient(180deg, transparent 23%, rgba(61, 169, 174, .35) 23% 23.6%, transparent 23.6% 72%, rgba(61, 169, 174, .28) 72% 72.6%, transparent 72.6%)
}

.topbar {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(340px, 430px) minmax(520px, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 120px;
    padding: 10px 24px 10px 34px;
    background: linear-gradient(180deg, #3d2b66, #25183f 74%, #160f2d);
    border-bottom: 7px solid #59417f;
    box-shadow: 0 7px #20123a57, inset 0 3px #ffffff2e
}

.hospital-logo {
    position: absolute;
    top: 7px;
    left: 24px;
    z-index: 3;
    width: 390px;
    height: 190px;
    object-fit: contain;
    object-position: left top;
    filter: drop-shadow(0 7px 2px rgba(20, 12, 35, .35));
    pointer-events: none
}

.topbar nav {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(112px, 1fr));
    gap: 9px
}

.topbar nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 68px;
    padding: 0 14px;
    color: #fff;
    font-size: clamp(17px, 1.25vw, 24px);
    font-weight: 1000;
    text-transform: uppercase;
    background: linear-gradient(180deg, #6b5896, #49376f);
    border: 3px solid #8875b0;
    border-radius: 7px;
    box-shadow: inset 0 0 0 2px #ffffff14, 0 5px #17102b;
    text-shadow: 0 3px 0 rgba(23, 14, 43, .65)
}

.topbar nav button span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: 24px;
    line-height: 1
}

.topbar nav button.active {
    color: #fff;
    background: linear-gradient(180deg, #91ce43, #4f981f);
    border-color: #b6ea65;
    box-shadow: inset 0 0 0 2px #ffffff24, 0 5px #294f14
}

.coin-balance {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 156px;
    min-height: 66px;
    padding: 5px 14px 5px 7px;
    color: #fff;
    background: linear-gradient(180deg, #503d77, #2c204b);
    border: 3px solid #7b68a1;
    border-radius: 7px;
    box-shadow: 0 5px #17102b
}

.coin-balance img {
    width: 52px;
    height: 52px;
    object-fit: contain
}

.coin-balance span {
    display: grid
}

.coin-balance small {
    color: #c9f5eb;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase
}

.coin-balance strong {
    color: #ffd942;
    font-size: 25px;
    line-height: 1.05
}

.header-actions {
    grid-column: 3;
    display: grid;
    justify-items: stretch;
    gap: 7px;
    min-width: 156px
}

.header-actions .coin-balance {
    grid-column: auto
}

.language-selector {
    position: relative;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    min-height: 36px;
    overflow: hidden;
    color: #fff;
    background: #342452;
    border: 2px solid #79669b;
    border-radius: 6px;
    box-shadow: 0 3px #17102b
}

.language-selector>span {
    display: grid;
    place-items: center;
    font-size: 16px
}

.language-selector select {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 24px 0 3px;
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    background: transparent;
    border: 0;
    outline: 0
}

.language-selector option {
    color: #241838;
    background: #fff
}

.language-selector.compact {
    position: static;
    justify-self: end;
    width: min(170px, calc(100% - 20px));
    margin-top: 9px;
    color: #4c376c;
    background: #edf4f4;
    border-color: #9d8ab7;
    box-shadow: 0 3px #d1c8dc
}

.language-selector.compact select {
    color: #4c376c
}

.hospital-stage {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(270px, 330px) minmax(540px, 760px) minmax(300px, 360px);
    justify-content: center;
    align-items: start;
    gap: clamp(14px, 1.5vw, 28px);
    width: min(1740px, 100%);
    min-height: 760px;
    margin: 0 auto;
    padding: 145px 24px 46px
}

.side-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fffffffa, #f2eff8fa);
    border: 7px solid #5a477d;
    border-radius: 14px;
    box-shadow: inset 0 0 0 3px #8f7cad, 0 9px #34264c59, 0 18px 32px #2c4a4f2e
}

.side-panel h1,
.side-panel h2 {
    margin: 0;
    padding: 16px 12px;
    color: #fff;
    font-size: clamp(24px, 2vw, 34px);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(180deg, #65508a, #47356a);
    border-bottom: 5px solid #382852;
    text-shadow: 0 4px 0 #2c1e46
}

.daily-panel {
    min-height: 550px
}

.spin-ticket {
    display: grid;
    grid-template-columns: 68px 1fr;
    align-items: center;
    width: calc(100% - 34px);
    min-height: 94px;
    margin: 22px auto 18px;
    padding: 10px 16px;
    color: #306d18;
    background: linear-gradient(180deg, #dff0a8, #bdd77e);
    border: 2px dashed #719940;
    border-radius: 8px;
    box-shadow: 0 5px #8ba84d
}

.spin-ticket strong {
    font-size: 60px;
    line-height: 1;
    text-align: center
}

.spin-ticket span {
    font-size: 20px;
    font-weight: 1000;
    line-height: 1.05;
    text-transform: uppercase
}

.daily-panel h2 {
    margin: 0 18px;
    padding: 12px 0 7px;
    color: #51426e;
    font-size: 18px;
    background: transparent;
    border: 0;
    border-top: 2px solid #d4cee0;
    text-shadow: none
}

.streak-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    padding: 7px 20px 20px
}

.streak-track span {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    color: #fff;
    font-size: 24px;
    font-weight: 1000;
    background: #73b63d;
    border: 3px solid #edf8cd;
    border-radius: 50%;
    box-shadow: 0 3px #497d28
}

.streak-track span.today {
    color: #fff4aa;
    background: #65518c;
    box-shadow: 0 3px #332248
}

.clipboard-note {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(100% - 54px);
    min-height: 210px;
    margin: 5px auto 24px;
    padding: 54px 25px 24px;
    text-align: center;
    background: linear-gradient(180deg, #fff, #f2f0f4);
    border: 5px solid #5d4b79;
    border-radius: 10px;
    box-shadow: inset 0 0 0 3px #d6d2de, 0 7px #3b2e52
}

.clipboard-note:before {
    content: "";
    position: absolute;
    top: -14px;
    width: 94px;
    height: 29px;
    background: #a9a9ad;
    border: 4px solid #51475e;
    border-radius: 9px 9px 3px 3px
}

.medical-cross {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: #fff;
    font-size: 38px;
    font-weight: 1000;
    background: #e8483f;
    border-radius: 7px;
    box-shadow: 0 3px #a32429
}

.clipboard-note p {
    margin: 12px 0 0;
    color: #594475;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.25
}

.wheel-area {
    --wheel-size: min(46vw, 650px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0
}

.wheel-frame {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    width: var(--wheel-size);
    aspect-ratio: 1;
    padding: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #786694 0 66%, #4b365f 66% 72%, #9884af 72% 76%, #4a345f 76% 100%);
    box-shadow: 0 17px #32204552, 0 25px 45px #2050533d, inset 0 0 0 6px #b5a8c5
}

.prize-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: transform 4.2s cubic-bezier(.12, .63, .08, 1);
    transform-origin: center;
    filter: drop-shadow(0 4px 0 rgba(44, 28, 61, .42))
}

.wheel-slice {
    stroke: #4c3565;
    stroke-width: 5
}

.wheel-slice.blue {
    fill: #46bce5
}

.wheel-slice.purple {
    fill: #9472ca
}

.wheel-slice.gold {
    fill: #f6c548
}

.portrait-ring {
    fill: #f8f8fc;
    stroke: #4b365f;
    stroke-width: 6
}

.class-label,
.coin-amount {
    fill: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 1000;
    paint-order: stroke;
    stroke: #332141;
    stroke-width: 8;
    stroke-linejoin: round
}

.class-label {
    font-size: 18px;
    text-transform: uppercase
}

.coin-amount {
    fill: #ffe94b;
    font-size: 32px
}

.wheel-ring-lights {
    position: absolute;
    inset: 3.5%;
    pointer-events: none;
    border: 9px dotted #fff9d2;
    border-radius: 50%;
    filter: drop-shadow(0 0 4px #fff)
}

.wheel-pointer {
    position: absolute;
    top: -24px;
    left: 50%;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 88px;
    height: 108px;
    transform: translate(-50%);
    color: #fff;
    font-size: 55px;
    font-weight: 1000;
    background: linear-gradient(180deg, #7e69aa, #513b79);
    border: 6px solid #4b345f;
    border-radius: 16px 16px 50% 50%;
    box-shadow: inset 0 0 0 4px #aa98c2, 0 7px #2b1c3f66;
    clip-path: polygon(8% 0, 92% 0, 100% 62%, 50% 100%, 0 62%)
}

.spin-control {
    position: absolute;
    top: calc(var(--wheel-size) / 2);
    left: 50%;
    z-index: 7;
    width: calc(var(--wheel-size) * .28);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: clamp(34px, 4vw, 62px);
    font-weight: 1000;
    background: radial-gradient(circle at 50% 35%, #a8da54, #5da92b 65%, #39791b);
    border: 8px solid #4b365f;
    border-radius: 50%;
    box-shadow: inset 0 0 0 6px #b8e66d, 0 8px #342448, 0 0 0 6px #8c7aa6;
    text-shadow: 0 5px 0 #356d19
}

.spin-control:not(:disabled):hover {
    filter: brightness(1.07);
    transform: translate(-50%, -50%) scale(1.035)
}

.spin-control:disabled {
    cursor: not-allowed;
    filter: grayscale(.45) brightness(.78)
}

.result-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(480px, 94%);
    min-height: 76px;
    margin-top: 18px;
    padding: 8px 18px;
    color: #fff;
    background: linear-gradient(180deg, #654c8a, #3b2a5c);
    border: 4px solid #9b87b8;
    border-radius: 9px;
    box-shadow: 0 6px #2b1d43
}

.result-banner img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 8px
}

.result-banner span {
    display: grid
}

.result-banner small {
    color: #cef5e8;
    font-weight: 900;
    text-transform: uppercase
}

.result-banner strong {
    color: #ffe35a;
    font-size: 22px
}

.cooldown-note {
    margin: 16px 0 0;
    padding: 10px 16px;
    color: #51416b;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    background: #ffffffdb;
    border: 2px solid #9d8bb4;
    border-radius: 7px
}

.offer-panel {
    display: grid;
    gap: 11px;
    width: min(560px, 96%);
    margin-top: 12px;
    padding: 14px;
    color: #fff;
    background: linear-gradient(145deg, #604884, #2f234b);
    border: 4px solid #8e7bab;
    border-radius: 10px;
    box-shadow: 0 8px #26193d, 0 16px 28px #29304033
}

.offer-heading {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    align-items: center
}

.offer-heading>span:last-child {
    display: grid
}

.offer-heading small {
    color: #c6f5e7;
    font-size: 11px;
    font-weight: 1000;
    text-transform: uppercase
}

.offer-heading strong {
    font-size: 19px;
    line-height: 1.12;
    text-transform: uppercase
}

.bonus-ticket {
    display: grid;
    place-items: center;
    height: 56px;
    color: #315b1b;
    font-size: 24px;
    font-weight: 1000;
    background: #d9ef90;
    border: 3px solid #f4ffc8;
    border-radius: 7px;
    box-shadow: 0 4px #6f9842
}

.offer-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px
}

.offer-steps span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    font-size: 11px;
    font-weight: 1000;
    text-transform: uppercase;
    background: #120c2475;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 5px
}

.offer-steps b {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #3e2c59;
    background: #ffe265;
    border-radius: 50%
}

.offer-panel>button {
    min-height: 42px;
    color: #31551c;
    font-weight: 1000;
    text-transform: uppercase;
    background: linear-gradient(180deg, #e7f798, #a9d255);
    border: 3px solid #f6ffd0;
    border-radius: 6px;
    box-shadow: 0 4px #577d33
}

.offer-panel>p {
    margin: 0;
    color: #dff8f0;
    font-size: 12px;
    font-weight: 800;
    text-align: center
}

.offer-list {
    display: grid;
    gap: 7px;
    max-height: 232px;
    overflow: auto
}

.offer-list a {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 9px;
    align-items: center;
    min-height: 66px;
    padding: 7px;
    color: #fff;
    text-decoration: none;
    background: #110c2394;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px
}

.offer-list img,
.offer-art {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    object-fit: cover;
    color: #fff;
    font-size: 26px;
    font-weight: 1000;
    background: linear-gradient(145deg, #72ccdc, #7152a1);
    border: 2px solid rgba(255, 255, 255, .45);
    border-radius: 6px
}

.offer-list a>span:nth-child(2) {
    display: grid;
    min-width: 0
}

.offer-list strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.offer-list small {
    color: #ccefe7;
    font-size: 11px
}

.offer-list a>b {
    padding: 7px;
    color: #395b1d;
    font-size: 11px;
    background: #d9ec78;
    border-radius: 5px
}

.post-spin-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 10px;
    background: #1b1130d1;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.post-spin-stack {
    position: relative;
    display: grid;
    justify-items: center;
    width: min(580px, 100%);
    max-height: calc(100svh - 20px);
    overflow: auto;
    padding: 54px 8px 18px
}

.post-spin-stack .result-banner {
    width: 100%;
    margin: 0 0 14px
}

.post-spin-stack .offer-panel {
    width: 100%;
    margin: 0
}

.post-spin-close {
    position: absolute;
    top: 3px;
    right: 8px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #fff;
    font-size: 22px;
    font-weight: 1000;
    background: #70588f;
    border: 3px solid #aa98bf;
    border-radius: 50%;
    box-shadow: 0 4px #281a40
}

.winners-panel {
    min-height: 520px
}

.winner-list {
    display: grid;
    gap: 8px;
    padding: 17px 14px
}

.winner-row {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 9px;
    align-items: center;
    min-height: 67px;
    padding: 7px 9px;
    background: linear-gradient(180deg, #fff, #eeebf3);
    border: 2px solid #d2cbdc;
    border-radius: 8px;
    box-shadow: 0 3px #b8afc7
}

.winner-row img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    background: #d6f5ef;
    border: 2px solid #6b568e;
    border-radius: 50%
}

.winner-row>span {
    display: grid;
    min-width: 0
}

.winner-row strong {
    overflow: hidden;
    color: #59427c;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.winner-row small {
    color: #6a6274;
    font-size: 11px;
    font-weight: 800
}

.winner-row time {
    color: #8b8197;
    font-size: 11px;
    font-weight: 900
}

.winner-footer {
    margin: 4px 16px 18px;
    padding: 13px;
    color: #fff;
    font-weight: 1000;
    text-align: center;
    text-transform: uppercase;
    background: #70b23d;
    border: 3px solid #a9dc68;
    border-radius: 7px;
    box-shadow: 0 4px #3f7126
}

.winner-footer span {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    background: #ed4a47;
    border-radius: 5px
}

.site-shell>footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    min-height: 46px;
    padding: 14px 20px;
    color: #e9e2f4;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    background: #2f214e;
    border-top: 4px solid #665184
}

.modal-backdrop,
.info-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #1c1230c2;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px)
}

.username-modal {
    position: relative;
    display: grid;
    justify-items: center;
    width: min(440px, 100%);
    padding: 26px;
    text-align: center;
    background: linear-gradient(180deg, #fff, #edf4f4);
    border: 7px solid #5a447e;
    border-radius: 14px;
    box-shadow: inset 0 0 0 3px #9d8ab7, 0 12px #2e2045, 0 24px 70px #00000057
}

.username-modal img {
    width: 104px;
    height: 104px;
    margin-top: -76px;
    object-fit: cover;
    border: 6px solid #5a447e;
    border-radius: 50%;
    box-shadow: 0 5px #302145
}

.username-modal>small {
    margin-top: 14px;
    color: #4d987a;
    font-weight: 1000;
    text-transform: uppercase
}

.username-modal h2 {
    margin: 5px 0 7px;
    color: #4c376e;
    font-size: 31px;
    text-transform: uppercase
}

.username-modal p {
    margin: 0 0 18px;
    color: #71677d;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35
}

.username-modal input {
    width: 100%;
    height: 52px;
    padding: 0 15px;
    color: #34254c;
    font-size: 18px;
    font-weight: 800;
    background: #fff;
    border: 3px solid #8c7aa6;
    border-radius: 7px;
    outline: 0
}

.username-modal input:focus {
    border-color: #63b73a;
    box-shadow: 0 0 0 3px #63b73a33
}

.username-modal button {
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
    color: #fff;
    font-size: 18px;
    font-weight: 1000;
    text-transform: uppercase;
    background: linear-gradient(180deg, #8dcc45, #4f9827);
    border: 3px solid #b7e76f;
    border-radius: 7px;
    box-shadow: 0 5px #32651d
}

.form-error {
    margin-top: 12px;
    color: #b92832;
    font-size: 13px;
    font-weight: 900
}

.info-panel {
    position: relative;
    width: min(880px, 100%);
    max-height: min(780px, 90vh);
    overflow: auto;
    padding: 24px;
    background: linear-gradient(180deg, #fff, #edf5f4);
    border: 7px solid #59427d;
    border-radius: 14px;
    box-shadow: inset 0 0 0 3px #9d8ab7, 0 12px #2d2045
}

.info-panel>h2 {
    margin: 0 55px 21px 0;
    color: #4b376b;
    font-size: 34px;
    text-transform: uppercase
}

.close-info {
    position: absolute;
    top: 15px;
    right: 15px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #fff;
    font-size: 22px;
    font-weight: 1000;
    background: #6a548e;
    border: 3px solid #9b89b4;
    border-radius: 50%
}

.reward-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px
}

.reward-card {
    display: grid;
    justify-items: center;
    min-width: 0;
    padding: 13px;
    text-align: center;
    border: 3px solid #5a4479;
    border-radius: 8px;
    box-shadow: 0 5px #38284f
}

.reward-card.blue {
    background: #bcecf4
}

.reward-card.purple {
    background: #d8c7ed
}

.reward-card.gold {
    background: #ffe69b
}

.reward-card img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    border-radius: 9px
}

.reward-card strong {
    margin-top: 8px;
    color: #4a3766;
    font-size: 14px
}

.reward-card small {
    color: #756887;
    font-size: 11px;
    font-weight: 800
}

.history-list {
    display: grid;
    gap: 8px
}

.history-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 10px;
    align-items: center;
    min-height: 65px;
    padding: 7px 12px;
    background: #fff;
    border: 2px solid #d2c9dc;
    border-radius: 7px
}

.history-row img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 7px
}

.history-row>span {
    display: grid
}

.history-row small {
    color: #766b82;
    font-size: 12px
}

.history-row time {
    color: #70657d;
    font-size: 12px;
    font-weight: 800
}

.account-view {
    display: grid;
    justify-items: center;
    padding: 20px;
    text-align: center
}

.account-view>img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 6px solid #6a5589;
    border-radius: 50%
}

.account-view h3 {
    margin: 12px 0 4px;
    color: #4a3768;
    font-size: 30px
}

.account-view>strong {
    color: #ac7910;
    font-size: 23px
}

.account-view p {
    margin: 7px 0;
    font-weight: 800
}

.username-lock {
    margin-top: 18px;
    padding: 10px 14px;
    color: #4e3d67;
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
    background: #e0f1c6;
    border: 2px solid #8eb45a;
    border-radius: 6px
}

.topbar nav button,
.side-panel h1,
.side-panel h2,
.spin-ticket span,
.offer-heading strong,
.offer-panel>button,
.winner-footer,
.username-modal h2,
.username-modal button,
.username-lock {
    overflow-wrap: anywhere
}

html[dir=rtl] .prize-wheel,
html[dir=rtl] .topbar {
    direction: ltr
}

html[dir=rtl] .topbar nav button,
html[dir=rtl] .language-selector {
    direction: rtl
}

html[dir=rtl] .coin-balance {
    direction: ltr
}

html[dir=rtl] .winner-footer span {
    margin-right: 0;
    margin-left: 5px
}

html[dir=rtl] .post-spin-close,
html[dir=rtl] .close-info {
    right: auto;
    left: 15px
}

html[dir=rtl] .info-panel>h2 {
    margin-right: 0;
    margin-left: 55px
}

html[dir=rtl] .language-selector.compact {
    justify-self: start
}

html[dir=rtl] .language-selector select {
    padding-right: 3px;
    padding-left: 24px
}

.admin-login-shell,
.admin-shell {
    min-height: 100svh;
    color: #34264e;
    background: linear-gradient(180deg, #d5f6ef, #f4f8f8)
}

.admin-login-shell {
    display: grid;
    place-items: center;
    padding: 24px
}

.admin-login {
    display: grid;
    justify-items: center;
    width: min(420px, 100%);
    padding: 28px;
    background: #fff;
    border: 6px solid #58417a;
    border-radius: 12px;
    box-shadow: 0 9px #302146
}

.admin-login img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border: 5px solid #58417a;
    border-radius: 50%
}

.admin-login h1 {
    color: #4c376c;
    text-transform: uppercase
}

.admin-login input {
    width: 100%;
    height: 50px;
    padding: 0 13px;
    border: 3px solid #8f7ba8;
    border-radius: 6px
}

.admin-login button {
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    color: #fff;
    font-weight: 1000;
    text-transform: uppercase;
    background: #63a936;
    border: 3px solid #a6da64;
    border-radius: 6px
}

.admin-shell {
    padding-bottom: 50px
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 96px;
    padding: 16px clamp(20px, 4vw, 60px);
    color: #fff;
    background: linear-gradient(180deg, #443069, #25183e);
    border-bottom: 6px solid #654d87
}

.admin-header span {
    display: grid
}

.admin-header small {
    color: #b8f0dd;
    font-weight: 900;
    text-transform: uppercase
}

.admin-header h1 {
    margin: 2px 0 0;
    font-size: 34px;
    text-transform: uppercase
}

.admin-header a {
    padding: 11px 15px;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    background: #5d9f35;
    border: 3px solid #9ed35e;
    border-radius: 6px
}

.admin-nav {
    display: flex;
    justify-content: center;
    gap: 7px;
    overflow-x: auto;
    padding: 10px 20px;
    background: #e5f3ef;
    border-bottom: 2px solid #bfd6d0
}

.admin-nav a {
    flex: 0 0 auto;
    min-width: 112px;
    padding: 9px 13px;
    color: #4d3a6c;
    font-size: 12px;
    font-weight: 1000;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    background: #fff;
    border: 2px solid #bdb1cb;
    border-radius: 5px
}

.admin-nav a:first-child {
    color: #fff;
    background: #5d477e;
    border-color: #7f6a9c
}

.admin-message {
    width: min(1500px, calc(100% - 40px));
    margin: 18px auto 0;
    padding: 12px 16px;
    color: #fff;
    font-weight: 800;
    background: #5e4a7d;
    border-radius: 6px
}

.admin-section {
    width: min(1500px, calc(100% - 40px));
    margin: 22px auto 0;
    padding: 20px;
    background: #fff;
    border: 3px solid #c6bcd3;
    border-radius: 9px;
    box-shadow: 0 6px #d5e4e2
}

.admin-section[id] {
    scroll-margin-top: 14px
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 16px
}

.section-heading span {
    display: grid
}

.section-heading small {
    color: #4e9a7a;
    font-weight: 1000;
    text-transform: uppercase
}

.section-heading h2 {
    margin: 2px 0 0;
    color: #4a3769;
    font-size: 28px
}

.section-heading button {
    min-height: 42px;
    padding: 0 15px;
    color: #fff;
    font-weight: 900;
    background: #5f9f39;
    border: 3px solid #9bd160;
    border-radius: 6px
}

.admin-slot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px
}

.admin-slot {
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px;
    background: #f3f8f7;
    border: 2px solid #d2c9dd;
    border-radius: 7px
}

.admin-slot>img {
    width: 66px;
    height: 66px;
    object-fit: contain;
    border: 3px solid #6a5687;
    border-radius: 8px
}

.admin-slot>span {
    display: grid;
    min-width: 0
}

.admin-slot>span small {
    color: #57997d;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase
}

.admin-slot>span strong {
    overflow: hidden;
    color: #4f3b6c;
    text-overflow: ellipsis;
    white-space: nowrap
}

.admin-slot label {
    display: grid;
    gap: 4px;
    color: #6c6178;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase
}

.admin-slot input:not([type=checkbox]) {
    min-width: 0;
    width: 100%;
    height: 36px;
    padding: 0 8px;
    color: #3f3156;
    font-weight: 800;
    background: #fff;
    border: 2px solid #bbb0c9;
    border-radius: 5px
}

.enabled-toggle {
    display: flex !important;
    grid-column: 1 / -1;
    align-items: center
}

.enabled-toggle input {
    width: 18px;
    height: 18px
}

.admin-table-wrap {
    overflow-x: auto
}

.admin-table-wrap table {
    width: 100%;
    border-collapse: collapse
}

.admin-table-wrap th {
    padding: 11px;
    color: #fff;
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
    background: #5a447a
}

.admin-table-wrap td {
    padding: 11px;
    color: #50445d;
    border-bottom: 1px solid #ded8e4
}

.coin-cell,
.spin-reward {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 900
}

.coin-cell img,
.spin-reward img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 5px
}

.class-prizes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.class-prizes button {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 48px;
    padding: 5px 8px;
    color: #4a3863;
    text-align: left;
    background: #fff1c6;
    border: 2px solid #d5a941;
    border-radius: 6px
}

.class-prizes button.delivered {
    background: #d7f2dc;
    border-color: #68aa70
}

.class-prizes img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 5px
}

.class-prizes span {
    display: grid;
    font-weight: 900
}

.class-prizes small {
    font-size: 9px;
    text-transform: uppercase
}

.statistics-section {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none
}

.statistics-section>.section-heading {
    padding: 0 2px
}

.stat-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px
}

.stat-summary {
    display: grid;
    min-height: 98px;
    padding: 15px;
    background: #fff;
    border: 2px solid #cec4d8;
    border-left: 7px solid #64a942;
    border-radius: 7px;
    box-shadow: 0 4px #d5e4e2
}

.stat-summary:nth-child(4n+2) {
    border-left-color: #5a9fc0
}

.stat-summary:nth-child(4n+3) {
    border-left-color: #e2b535
}

.stat-summary:nth-child(4n+4) {
    border-left-color: #725494
}

.stat-summary small {
    align-self: start;
    color: #74677f;
    font-size: 11px;
    font-weight: 1000;
    text-transform: uppercase
}

.stat-summary strong {
    align-self: end;
    overflow-wrap: anywhere;
    color: #493667;
    font-size: 27px
}

.activity-grid {
    display: grid;
    gap: 14px;
    margin-top: 15px
}

.activity-chart {
    min-width: 0;
    padding: 17px;
    background: #fff;
    border: 2px solid #cbc1d5;
    border-radius: 8px;
    box-shadow: 0 4px #d5e4e2
}

.activity-chart>header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 13px
}

.activity-chart>header span {
    display: grid
}

.activity-chart>header small,
.reward-statistics header>span small {
    color: #4c9879;
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase
}

.activity-chart h3,
.reward-statistics h3 {
    margin: 2px 0 0;
    color: #4a3768;
    font-size: 20px
}

.activity-chart>header>strong {
    min-width: 52px;
    color: #fff;
    font-size: 21px;
    text-align: center;
    background: #5d477d;
    border: 3px solid #8975a3;
    border-radius: 6px
}

.activity-scroll {
    overflow-x: auto;
    padding: 4px 0 7px
}

.activity-bars {
    display: grid;
    align-items: end;
    gap: 4px;
    min-width: 720px;
    height: 195px
}

.activity-bar {
    display: grid;
    grid-template-rows: 18px 145px 23px;
    gap: 3px;
    min-width: 0;
    text-align: center
}

.activity-bar>b {
    overflow: hidden;
    color: #5b4a6e;
    font-size: 10px;
    line-height: 18px
}

.activity-bar>span {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 145px;
    overflow: hidden;
    background: #e8f1ef;
    border-radius: 3px 3px 0 0
}

.activity-bar>span>i {
    display: block;
    width: 100%;
    min-height: 0;
    background: #65a941;
    border-top: 3px solid #9bd45d
}

.activity-chart:nth-child(2) .activity-bar>span>i {
    background: #6c5291;
    border-top-color: #a58cbe
}

.activity-bar>small {
    overflow: hidden;
    color: #7b7083;
    font-size: 9px;
    font-weight: 800;
    line-height: 23px;
    white-space: nowrap
}

.reward-statistics {
    margin-top: 15px;
    padding: 17px;
    background: #fff;
    border: 2px solid #cbc1d5;
    border-radius: 8px;
    box-shadow: 0 4px #d5e4e2
}

.reward-statistics>header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px
}

.reward-statistics>header>span {
    display: grid
}

.reward-statistics>header>small {
    color: #82758b;
    font-size: 10px;
    font-weight: 800
}

.reward-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px
}

.reward-stat-grid article {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 9px;
    background: #f2f7f6;
    border: 2px solid #d5cedd;
    border-radius: 6px
}

.reward-stat-grid img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 6px
}

.reward-stat-grid span {
    display: grid;
    min-width: 0
}

.reward-stat-grid strong {
    overflow: hidden;
    color: #4e3b6c;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.reward-stat-grid small {
    color: #777080;
    font-size: 11px;
    font-weight: 800
}

.empty-statistics {
    grid-column: 1 / -1;
    margin: 0;
    padding: 22px;
    color: #776b80;
    font-weight: 800;
    text-align: center;
    background: #f2f7f6;
    border: 2px dashed #c8bdcf;
    border-radius: 6px
}

@media(max-width:1240px) {
    .topbar {
        grid-template-columns: 300px 1fr auto;
        padding-left: 18px
    }
    .hospital-logo {
        left: 10px;
        width: 310px;
        height: 165px
    }
    .topbar nav button {
        min-height: 62px;
        padding: 0 8px;
        font-size: 16px
    }
    .coin-balance {
        min-width: 135px
    }
    .hospital-stage {
        grid-template-columns: 250px minmax(500px, 640px) 285px;
        padding-right: 15px;
        padding-left: 15px
    }
    .admin-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:1040px) {
    .site-shell {
        overflow: visible
    }
    .topbar {
        grid-template-columns: minmax(230px, 1fr) auto;
        min-height: 182px;
        align-items: start
    }
    .hospital-logo {
        width: 280px;
        height: 142px
    }
    .topbar nav {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin-top: 2px
    }
    .header-actions {
        grid-column: 2;
        justify-self: end;
        min-width: 146px
    }
    .header-actions .coin-balance {
        grid-column: auto
    }
    .hospital-stage {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 75px;
        padding-bottom: 80px
    }
    .wheel-area {
        --wheel-size: min(82vw, 640px);
        order: 1
    }
    .daily-panel {
        order: 2;
        width: min(620px, 100%);
        justify-self: center;
        min-height: 0
    }
    .winners-panel {
        order: 3;
        width: min(620px, 100%);
        justify-self: center;
        min-height: 0
    }
    .daily-panel .clipboard-note {
        min-height: 160px
    }
    .site-shell>footer {
        position: relative
    }
}

@media(max-width:640px) {
    .topbar {
        grid-template-columns: 1fr auto;
        min-height: 222px;
        padding: 8px 10px
    }
    .hospital-logo {
        top: 3px;
        left: 8px;
        width: 235px;
        height: 117px
    }
    .header-actions {
        grid-column: 2;
        width: 125px;
        min-width: 125px;
        gap: 5px
    }
    .header-actions .coin-balance {
        grid-column: auto;
        justify-self: stretch;
        min-width: 125px;
        min-height: 54px;
        padding: 4px 8px
    }
    .coin-balance img {
        width: 42px;
        height: 42px
    }
    .coin-balance strong {
        font-size: 20px
    }
    .topbar nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px
    }
    .topbar nav button {
        min-width: 0;
        min-height: 47px;
        padding: 3px 4px;
        font-size: clamp(10px, 3.35vw, 14px);
        line-height: 1.05;
        border-width: 2px;
        box-shadow: 0 3px #17102b
    }
    .topbar nav button span {
        width: 22px;
        height: 22px;
        font-size: 18px
    }
    .hospital-stage {
        padding: 48px 10px 55px
    }
    .wheel-area {
        --wheel-size: min(94vw, 470px)
    }
    .wheel-frame {
        padding: 8px;
        box-shadow: 0 10px #3220454d, inset 0 0 0 4px #b5a8c5
    }
    .wheel-pointer {
        top: -16px;
        width: 62px;
        height: 78px;
        font-size: 39px;
        border-width: 4px
    }
    .spin-control {
        width: calc(var(--wheel-size) * .28);
        font-size: clamp(10px, 3.4vw, 18px);
        line-height: 1;
        white-space: nowrap;
        border-width: 5px;
        box-shadow: inset 0 0 0 4px #b8e66d, 0 5px #342448, 0 0 0 4px #8c7aa6
    }
    .class-label {
        font-size: 18px;
        stroke-width: 6
    }
    .coin-amount {
        font-size: 28px;
        stroke-width: 6
    }
    .side-panel {
        width: 100%;
        border-width: 5px
    }
    .side-panel h1,
    .side-panel h2 {
        font-size: 27px;
        padding: 13px
    }
    .spin-ticket span {
        padding: 2px 0;
        font-size: clamp(15px, 5vw, 20px);
        line-height: 1.15
    }
    .offer-heading strong {
        font-size: clamp(15px, 4.4vw, 19px)
    }
    .offer-steps span {
        flex-direction: column;
        min-width: 0;
        min-height: 50px;
        gap: 2px;
        padding: 3px;
        font-size: clamp(9px, 2.8vw, 11px);
        line-height: 1;
        overflow-wrap: anywhere
    }
    .username-modal {
        padding: 25px 17px 22px
    }
    .username-modal h2 {
        max-width: 100%;
        font-size: clamp(22px, 7vw, 31px)
    }
    .username-modal button {
        font-size: clamp(14px, 4.6vw, 18px)
    }
    .language-selector.compact {
        width: min(150px, calc(100% - 20px))
    }
    .daily-panel {
        min-height: 0
    }
    .offer-panel {
        width: 100%
    }
    .post-spin-backdrop {
        padding: 5px
    }
    .post-spin-stack {
        max-height: calc(100svh - 10px);
        padding: 49px 5px 13px
    }
    .post-spin-stack .result-banner {
        min-height: 66px
    }
    .post-spin-stack .result-banner strong {
        font-size: 18px
    }
    .offer-list a {
        grid-template-columns: 48px 1fr
    }
    .offer-list a>b {
        grid-column: 2;
        justify-self: start
    }
    .reward-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .history-row {
        grid-template-columns: 48px 1fr
    }
    .history-row time {
        grid-column: 2
    }
    .admin-header {
        align-items: flex-start;
        padding: 13px
    }
    .admin-header h1 {
        font-size: 25px
    }
    .admin-header a {
        padding: 8px;
        font-size: 12px
    }
    .admin-section {
        width: calc(100% - 20px);
        padding: 12px
    }
    .statistics-section {
        padding: 0
    }
    .admin-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        padding: 8px 10px
    }
    .admin-nav a {
        min-width: 0
    }
    .section-heading {
        align-items: flex-end
    }
    .section-heading h2 {
        font-size: 21px
    }
    .admin-slot-grid {
        grid-template-columns: 1fr
    }
    .stat-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .stat-summary {
        min-height: 86px;
        padding: 11px
    }
    .stat-summary strong {
        font-size: 21px
    }
    .activity-chart,
    .reward-statistics {
        padding: 11px
    }
    .activity-bars {
        min-width: 680px
    }
    .reward-statistics>header {
        align-items: flex-start;
        flex-direction: column
    }
    .reward-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .reward-stat-grid article {
        grid-template-columns: 40px 1fr;
        padding: 7px
    }
    .reward-stat-grid img {
        width: 40px;
        height: 40px
    }
}

@media(max-width:360px) {
    .hospital-logo {
        width: 185px;
        height: 100px
    }
    .header-actions {
        width: 112px;
        min-width: 112px
    }
    .header-actions .coin-balance {
        min-width: 112px;
        padding-right: 5px;
        padding-left: 4px
    }
    .coin-balance img {
        width: 38px;
        height: 38px
    }
    .language-selector {
        grid-template-columns: 24px minmax(0, 1fr)
    }
    .language-selector select {
        font-size: 10px
    }
}

@media(prefers-reduced-motion:reduce) {
    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
    }
}