:root {
    --bg: #0b0804;
    --bg-2: #160e06;
    --panel: #fff8e7;
    --panel-2: #f3e3b8;
    --line: #d8b15a;
    --line-2: #b98528;
    --text: #2a1a08;
    --cream-text: #fff5d7;
    --muted: #715322;
    --accent: #e0aa35;
    --accent-2: #fff0a0;
    --gold: #f2c55a;
    --gold-2: #9d5c12;
    --ok: #168052;
    --err: #b43b35;
    --wa: #20a866;
    --max: #5b68c7;
    --field: #fffdf7;
    --inset: rgba(101, 57, 10, .07);
    --formbar: rgba(255, 248, 231, .84);
    --pop: #fffaf0;
    --menu: #fffaf0;
    --radius: 20px;
    --shadow: 0 22px 60px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body {
    min-height: 100vh;
    overflow-x: hidden;
    padding: 22px 18px 68px;
    color: var(--cream-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(ellipse 70% 38% at 50% -8%, rgba(224, 170, 53, .30), transparent 72%),
        radial-gradient(ellipse 48% 42% at 5% 42%, rgba(123, 67, 13, .24), transparent 76%),
        radial-gradient(ellipse 48% 42% at 95% 78%, rgba(123, 67, 13, .20), transparent 76%),
        linear-gradient(155deg, #120c05 0%, var(--bg) 48%, #130b04 100%);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(115deg, transparent 0 47%, rgba(255, 218, 122, .12) 48%, transparent 49% 100%),
        linear-gradient(65deg, transparent 0 47%, rgba(255, 218, 122, .08) 48%, transparent 49% 100%);
    background-size: 340px 260px, 270px 220px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 36%, rgba(0, 0, 0, .42) 100%);
}
.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 16%, rgba(255, 218, 122, .16) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 24%, rgba(255, 218, 122, .14) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 76%, rgba(255, 218, 122, .12) 0 1px, transparent 2px);
    background-size: 190px 170px, 230px 210px, 260px 240px;
}
.wrap { width: min(100%, 500px); margin: 0 auto; position: relative; }
.wrap.wide { width: min(100%, 1120px); }
a { color: var(--gold); text-decoration: none; transition: color .18s, opacity .18s, transform .18s; }
a:hover { color: var(--accent-2); opacity: 1; }
svg { width: 1.15em; height: 1.15em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; flex: none; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--cream-text); font-size: 18px; font-weight: 900; letter-spacing: .2px; }
.brand-logo { display: block; width: 34px; height: 34px; flex: none; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 220, 93, .35), 0 5px 18px rgba(0,0,0,.28); }
.brand-name { color: #fff1b1; white-space: nowrap; text-shadow: 0 2px 12px rgba(255, 207, 63, .22); }
.brand svg { width: 25px; height: 25px; color: var(--gold); filter: drop-shadow(0 0 9px rgba(242, 197, 90, .45)); }
.nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.nav a, .top-right a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 12px; color: #f8e7b4; border: 1px solid rgba(216, 177, 90, .35); border-radius: 999px; background: rgba(255, 248, 231, .07); font-size: 13px; font-weight: 700; }
.nav a:hover, .nav a.active, .top-right a:hover { color: #241300; border-color: var(--gold); background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 6px 20px rgba(224, 170, 53, .22); }
.nav a .nd { width: 8px; height: 8px; border-radius: 50%; background: var(--err); box-shadow: 0 0 10px var(--err); animation: ndPulse 1.6s ease-in-out infinite; }
.nav a .nd[hidden] { display: none; }
@keyframes ndPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .65; } }

.card { color: var(--text); background: linear-gradient(145deg, rgba(255, 252, 240, .98), rgba(247, 226, 177, .96)); border: 1px solid rgba(226, 188, 101, .95); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.85); }
.card.tight { padding: 18px; }
.card.lock, .card.locked { opacity: .64; filter: saturate(.72); }
.card.lock:hover { opacity: .82; }
.card + .card { margin-top: 0; }
.hero { position: relative; overflow: hidden; text-align: center; padding: 34px 24px; background: radial-gradient(circle at 50% 0, rgba(255,255,255,.98), transparent 56%), linear-gradient(145deg, #fffdf5, #f4dfaa); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.38) 48%, transparent 54%); transform: translateX(-110%); animation: heroShine 7s ease-in-out infinite; }
@keyframes heroShine { 0%, 65% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
h1, h2, h3 { color: var(--text); }
h1 { font-size: clamp(25px, 6vw, 32px); line-height: 1.12; letter-spacing: -.8px; margin-bottom: 8px; font-weight: 950; }
h2 { display: flex; align-items: center; gap: 8px; font-size: 20px; line-height: 1.2; margin-bottom: 8px; font-weight: 900; }
h2 svg, h3 svg { color: var(--gold-2); }
p, li { color: var(--muted); }
.muted, p.muted { color: var(--muted); font-size: 14px; }
.muted-strong { color: var(--muted); font-weight: 700; }
.center { text-align: center; }
.logo, .hero .emblem { width: 72px; height: 72px; margin: 0 auto 18px; display: grid; place-items: center; color: #3b2100; border: 1px solid rgba(255,255,255,.8); border-radius: 22px; background: linear-gradient(135deg, #fff4bd 0%, #dca02e 52%, #fff1a0 100%); box-shadow: 0 12px 30px rgba(157, 92, 18, .35), inset 0 1px 0 #fff; }
.logo svg, .hero .emblem svg { width: 38px; height: 38px; stroke-width: 2.2; }
.pg { max-width: 900px; margin: 0 auto; }
.pg h3 { color: #8d5c16; font-size: 15px; font-weight: 900; margin: 20px 0 6px; }
.pg p, .pg li { color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.pg ul { margin: 8px 0 0 20px; }

label { display: block; color: #6e4c1b; font-size: 13px; font-weight: 800; margin: 15px 0 7px; }
input, select, textarea { width: 100%; color: var(--text); background: var(--field); border: 1px solid #d9bd7a; border-radius: 13px; padding: 13px 14px; font: inherit; font-size: 15px; transition: border-color .18s, box-shadow .18s, background .18s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #bb7d16; box-shadow: 0 0 0 3px rgba(224, 170, 53, .22); background: #fff; }
input[readonly] { opacity: .65; }
input::placeholder, textarea::placeholder { color: #a98955; }
input.ok { border-color: rgba(22, 128, 82, .65); box-shadow: 0 0 0 3px rgba(22, 128, 82, .12); }
/* iOS/Safari: у нативного календаря собственный шрифт и ширина, из-за которых
   рамка поля «Дата рождения» вылезала за пределы карточки. */
input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: 16px;
    text-align: left;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-datetime-edit { padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 48px; }
.pass-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.pass-eye:hover, .pass-eye.on { color: var(--gold-2); background: var(--panel-2); }
.hint { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; }
.pw-meter { height: 5px; overflow: hidden; margin-top: 8px; border-radius: 99px; background: #e5c98a; }
.pw-meter > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--err), var(--accent), var(--ok)); transition: width .2s; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; overflow: hidden; color: #2c1800; border: 1px solid #a9690c; border-radius: 14px; background: linear-gradient(135deg, #fff0a0 0%, #e1aa32 48%, #b86c0c 100%); box-shadow: 0 9px 20px rgba(111, 62, 8, .24), inset 0 1px 0 rgba(255,255,255,.72); cursor: pointer; font: inherit; font-size: 15px; font-weight: 900; text-align: center; transition: transform .18s, filter .18s, box-shadow .18s; }
.btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%); transform: translateX(-140%); transition: transform .6s ease; }
.btn:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(111, 62, 8, .3), inset 0 1px 0 rgba(255,255,255,.8); }
.btn:hover::after { transform: translateX(140%); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .56; cursor: not-allowed; transform: none; }
.btn.sec { color: #f9e9b8; background: rgba(45, 25, 5, .08); border-color: #b98932; box-shadow: none; }
.btn.sec:hover { color: #2c1800; background: linear-gradient(135deg, #fff0a0, #d69a27); }
.btn.sm { width: auto; min-height: 38px; padding: 8px 12px; font-size: 13px; border-radius: 11px; }
.btn.wa { color: #fff; background: linear-gradient(135deg, #43d889, #13874c); border-color: #0e6e3e; }
.btn.max { color: #fff; background: linear-gradient(135deg, #7887ed, #414ba1); border-color: #343e8f; }
.btn + .btn { margin-top: 10px; }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.row.between { justify-content: space-between; }
.divider { height: 1px; margin: 18px 0; background: linear-gradient(90deg, transparent, #d6af62, transparent); }
.link { margin-top: 15px; color: var(--muted); text-align: center; font-size: 14px; }
.link a { font-weight: 800; }
.msg { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; padding: 12px 14px; color: #6e4615; border: 1px solid #dcb967; border-radius: 14px; background: rgba(255, 243, 201, .8); font-size: 14px; }
.msg svg { width: 18px; height: 18px; color: #b67812; }
.msg.error { color: #812c28; border-color: #d99486; background: rgba(255, 223, 213, .9); }
.msg.error svg { color: var(--err); }
.msg.ok, .msg:not(.error) svg { color: var(--ok); }
.msg[hidden] { display: none; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 17px; }
.step { height: 5px; border-radius: 99px; background: rgba(255, 248, 231, .18); }
.step.active { background: linear-gradient(90deg, #a86a11, var(--gold), #fff1a0); box-shadow: 0 0 13px rgba(242,197,90,.45); }
.amount { margin: 12px 0 16px; color: #9a5d0b; font-size: 36px; line-height: 1.1; font-weight: 950; text-align: center; letter-spacing: -1.5px; }
.amount.done { color: #137a4d; }
.tag, .badge, .unread { display: inline-flex; align-items: center; gap: 5px; width: max-content; max-width: 100%; padding: 5px 10px; color: #79551e; border: 1px solid #d6b362; border-radius: 999px; background: rgba(255,255,255,.38); font-size: 12px; font-weight: 800; }
.tag svg { width: 14px; height: 14px; }
.badge { color: #93610e; background: rgba(255, 229, 153, .45); }
.badge.done { color: #126b45; border-color: rgba(22,128,82,.45); background: rgba(214,247,225,.55); }
.badge.pending { color: #93610e; }
.unread { color: #2a1800; background: var(--accent); }
.foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(216, 177, 90, .3); }
.foot a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; color: #e8ce8b; border: 1px solid rgba(216,177,90,.28); border-radius: 999px; background: rgba(255,248,231,.05); font-size: 12px; font-weight: 700; }
.foot a:hover { color: #251400; background: var(--accent); border-color: var(--accent); }
.foot svg { width: 14px; height: 14px; }

.wheel-wrap { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 24px auto 18px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255,205,70,.12), transparent 62%); filter: drop-shadow(0 22px 27px rgba(0,0,0,.34)); }
.wheel-wrap::before, .wheel-wrap::after { content: ""; position: absolute; inset: -9px; border: 1px solid rgba(246, 203, 91, .48); border-radius: 50%; box-shadow: 0 0 30px rgba(226, 165, 30, .24), inset 0 0 18px rgba(255, 221, 123, .2); }
.wheel-wrap::after { inset: -18px; border-color: rgba(255, 235, 170, .16); box-shadow: none; }
.wheel-wrap.spinning .wheel { filter: drop-shadow(0 0 20px rgba(255, 201, 60, .75)); }
.wheel { width: 100%; height: 100%; overflow: visible; transform-origin: center; }
/* Крутится внутренняя группа: transition должен быть именно на ней,
   иначе колесо мгновенно «перепрыгивает» к результату без анимации. */
#rotor { transform-origin: 160px 160px; transform-box: view-box; transition: transform 5.2s cubic-bezier(.12, .78, .16, 1); will-change: transform; }
#wheel .bulb { filter: drop-shadow(0 0 7px #fff0a0); animation: bulbPulse 1.4s ease-in-out infinite alternate; }
@keyframes bulbPulse { from { opacity: .35; } to { opacity: 1; } }
.spin { position: absolute; top: -17px; left: 50%; z-index: 3; width: 0; height: 0; transform: translateX(-50%); border-right: 15px solid transparent; border-left: 15px solid transparent; border-top: 32px solid #ffe89b; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.result, #result { min-height: 42px; margin: 0 0 14px; text-align: center; }
.confetti, .confetti.coin, .win-rays, .win-ring, .flash { display: none; }

.fieldset, .fgroup { margin: 12px 0 15px; padding: 6px 15px 15px; border: 1px solid #d9bd7a; border-radius: 14px; background: rgba(255, 255, 255, .22); }
.fgroup-t { display: block; color: #7f581b; font-size: 13px; font-weight: 900; margin: 5px 0 3px; }
.method { display: flex; align-items: center; gap: 11px; padding: 15px; margin-bottom: 9px; color: var(--text); border: 1px solid #d6b66f; border-radius: 14px; background: rgba(255,255,255,.35); cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.method:hover { border-color: #b87a10; background: rgba(255,247,212,.82); transform: translateX(2px); }
.method input { width: auto; margin: 0; accent-color: #b87a10; }
.contacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.copy { padding: 0; color: #9a6211; border: 0; border-bottom: 1px dashed #ba8123; background: transparent; cursor: pointer; font: inherit; font-weight: 900; }

.chat { display: flex; flex-direction: column; min-height: 0; height: 62vh; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 5px; }
.bubble { max-width: 80%; padding: 11px 14px; color: var(--text); border: 1px solid #d6b66f; border-radius: 16px; background: #fffaf0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; box-shadow: 0 4px 12px rgba(83,45,6,.06); }
.bubble.me { align-self: flex-end; color: #2c1800; border-color: #a96d12; border-bottom-right-radius: 5px; background: linear-gradient(135deg, #fff0a0, #dca02e); }
.bubble.other { align-self: flex-start; border-bottom-left-radius: 5px; }
.bubble.system { align-self: center; max-width: 94%; color: #77531c; border-color: #d6b66f; border-radius: 999px; background: rgba(255, 244, 203, .78); text-align: center; }
.bubble .t, .bubble .time, .bubble .st { display: block; margin-top: 4px; color: rgba(75,45,11,.66); font-size: 10px; line-height: 1.2; }
.bubble.me .t { color: rgba(55,29,0,.7); }
.chat-form { display: flex; gap: 8px; margin-top: 14px; }
.chat-form input { flex: 1; min-width: 0; margin: 0; }
.chat-form .btn { width: 52px; flex: none; padding: 0; }
.qbtns { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.qbtn { padding: 8px 10px; color: #765015; border: 1px solid #d4b26a; border-radius: 999px; background: rgba(255,255,255,.42); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }
.qbtn:hover { color: #2c1800; background: var(--accent-2); }

.chat-pop { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9997; width: min(100%, 410px); max-height: min(490px, 74vh); margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; color: var(--text); border: 1px solid #e0b960; border-radius: 19px; background: var(--pop); box-shadow: 0 25px 75px rgba(0,0,0,.58), 0 0 0 1px rgba(242,197,90,.16); transform: translateY(25px) scale(.96); opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.1), opacity .25s; }
.chat-pop.show { transform: none; opacity: 1; }
.chat-pop[hidden] { display: none; }
.cp-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-bottom: 1px solid #e2c77f; background: linear-gradient(135deg, #fff0a0, #e1aa32); }
.sup-ic { width: 40px; height: 40px; display: grid; place-items: center; color: #3b2100; border-radius: 12px; background: rgba(255,255,255,.52); }
.sup-ic svg { width: 22px; height: 22px; }
.cp-title { flex: 1; min-width: 0; }
.cp-title b { display: block; color: #2b1900; font-size: 14px; }
.cp-title span { color: #755019; font-size: 12px; }
.cp-x { width: 34px; height: 34px; display: grid; place-items: center; color: #614313; border: 1px solid rgba(105,62,7,.2); border-radius: 10px; background: rgba(255,255,255,.35); cursor: pointer; }
.cp-x:hover { color: var(--err); border-color: var(--err); transform: rotate(90deg); }
.cp-log { flex: 1; min-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 13px; }
.cp-load { margin: auto; color: var(--muted); font-size: 13px; text-align: center; }
.cp-form { display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid #e2c77f; background: var(--formbar); }
.cp-form input { min-width: 0; margin: 0; padding: 12px 13px; }
.cp-form button { width: 46px; flex: none; color: #2b1800; border: 0; border-radius: 12px; background: linear-gradient(135deg, #fff0a0, #d69a27); cursor: pointer; }
.chat-fab { position: fixed; right: 18px; bottom: 18px; z-index: 9996; width: 58px; height: 58px; display: grid; place-items: center; color: #2b1800; border: 1px solid #e8c15c; border-radius: 50%; background: linear-gradient(135deg, #fff0a0, #d69a27); box-shadow: 0 14px 35px rgba(0,0,0,.48), 0 0 25px rgba(242,197,90,.28); cursor: pointer; animation: fabIn .3s ease both; }
.chat-fab:hover { transform: scale(1.08); }
.chat-fab[hidden] { display: none; }
.chat-fab svg { width: 24px; height: 24px; stroke-width: 2.2; }
.chat-fab .nd { position: absolute; top: 3px; right: 3px; }
@keyframes fabIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

.table-scroll, .scroll { overflow-x: auto; border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 8px; border-bottom: 1px solid #ddc27e; text-align: left; vertical-align: top; }
th { color: #79531a; font-size: 11px; font-weight: 900; letter-spacing: .35px; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(255,255,255,.22); }
.user-password-row td { padding-top: 0; }
.user-password-form, .admin-password-form { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.user-password-label { color: var(--muted); font-size: 12px; font-weight: 800; }
.user-password-form input { width: min(190px, 42%); min-height: 37px; padding: 8px 10px; font-size: 13px; }
.admin-password-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.admin-password-fields input { margin: 0; }
.issued-password { margin: 14px 0; padding: 15px; border: 1px solid rgba(22,128,82,.38); border-radius: 14px; background: rgba(218,247,226,.52); }
.issued-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--ok); font-size: 14px; font-weight: 800; }
.issued-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.issued-row code { flex: 1; min-width: 0; padding: 12px; overflow-wrap: anywhere; color: #245a40; border: 1px solid #a9d6b9; border-radius: 11px; background: rgba(255,255,255,.54); font-size: 19px; font-weight: 900; letter-spacing: 1px; }

.ops-wrap { position: relative; margin-top: 8px; }
.op-btn { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--text); border: 1px solid #d9bd7a; border-radius: 12px; background: var(--field); padding: 14px 15px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 800; text-align: left; }
.op-btn:hover, .ops-wrap.open .op-btn { border-color: #b87a10; box-shadow: 0 0 0 3px rgba(224,170,53,.16); }
.op-btn > svg { margin-left: auto; color: var(--muted); }
.op-btn-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-btn-label.placeholder { color: var(--muted); font-weight: 500; }
.opi { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 3px; color: #8a6420; border: 1px solid #e9d8ac; border-radius: 10px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(73, 41, 6, .08); overflow: hidden; }
.opi[hidden] { display: none; }
.opi img { display: block; width: 100%; height: 100%; border-radius: 6px; object-fit: contain; }
.opi svg { width: 18px; height: 18px; }
.opi.sm { width: 28px; height: 28px; padding: 2px; border-radius: 9px; }
.opi.sm svg { width: 15px; height: 15px; }
.op-menu { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; left: 0; max-height: min(60vh, 420px); overflow-y: auto; padding: 12px; border: 1px solid #d9bd7a; border-radius: 14px; background: var(--menu); box-shadow: 0 18px 45px rgba(0,0,0,.3); }
.op-menu[hidden] { display: none; }
.op-menu-title { margin: 0 0 9px 2px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 8px; }
.op { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: var(--text); border: 1px solid #d9bd7a; border-radius: 12px; background: #fffaf0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; }
.op:hover, .op.sel { border-color: #b87a10; background: #fff0a0; }
.op.sel::after { content: "✓"; margin-left: auto; color: #9a5d0b; font-weight: 950; }
.op .opi { box-shadow: inset 0 1px 0 rgba(255,255,255,.34); }

.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,.12) 60%, transparent 72%); transform: scale(0); animation: ripple .6s ease-out forwards; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
.win-ring, .flash, .shake, .wheel-wrap.win, .btn.charge { animation: none; }
body > .wrap > .card:first-of-type { position: relative; }

@media (max-width: 720px) {
    .wrap.wide { width: min(100%, 100%); }
    .top { align-items: flex-start; }
    .brand { font-size: 16px; }
    .nav { max-width: 60%; }
    .nav a { padding: 6px 9px; font-size: 12px; }
    .card { padding: 20px; }
}
@media (max-width: 480px) {
    body { padding: 15px 10px 70px; }
    .top { flex-wrap: wrap; gap: 10px; }
    .nav { max-width: none; justify-content: flex-end; }
    .card { padding: 16px; border-radius: 17px; }
    .hero { padding: 26px 14px; }
    h1 { font-size: 25px; }
    h2 { font-size: 18px; }
    .amount { font-size: 32px; }
    input, select, textarea { font-size: 16px; }
    .btn { min-height: 48px; padding: 12px; }
    .contacts { gap: 8px; }
    .contacts .btn { font-size: 13px; }
    .chat { height: 58vh; min-height: 330px; }
    .chat-pop { left: 8px; right: 8px; bottom: 8px; }
    .bubble { max-width: 90%; }
    .wheel-wrap { width: min(100%, 330px); }
    .foot { gap: 8px; }
    .foot a { font-size: 11px; padding: 7px 10px; }
    .admin-password-fields { grid-template-columns: 1fr; }
    .issued-row { align-items: stretch; flex-direction: column; }
    .issued-row .btn { width: 100%; }
    table { font-size: 11.5px; }
    th, td { padding: 8px 6px; }
}
@media (max-width: 360px) {
    .brand { font-size: 15px; }
    .nav a { font-size: 11px; padding: 6px 8px; }
    .contacts { grid-template-columns: 1fr; }
    .amount { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* compatibility aliases and small content blocks used by existing templates */
:root {
    --panel2: var(--panel-2);
    --accent2: var(--accent-2);
}
.mi { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; color: #8b5a10; border: 1px solid #d6b66f; border-radius: 11px; background: #fff4ca; }
.mi svg { width: 20px; height: 20px; }
.mir { color: #315b9a; background: #e6efff; border-color: #aac2ed; font-size: 10px; font-weight: 950; }
.fgroup-t { display: flex; align-items: center; gap: 8px; color: #7a5115; font-size: 13px; font-weight: 950; }
.fgroup-t svg { width: 17px; height: 17px; color: #b67a13; }
.ro-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 12px 14px; color: #5e3d11; border: 1px solid #dfc98d; border-radius: 13px; background: rgba(255,255,255,.48); }
.ro-field svg { width: 18px; height: 18px; color: var(--ok); }
.admin-name { color: var(--muted); border-color: #d6b66f !important; background: #fff4ca !important; }
.btn.wait { opacity: .52; cursor: not-allowed; }