@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
    --navy:#101536;
    --navy2:#171f4b;
    --purple:#6546f5;
    --purple2:#7b4bff;
    --gold:#ffc943;
    --ink:#1b2140;
    --muted:#7d849e;
    --line:#e9ebf5;
    --bg:#f5f6fc;
    --white:#fff
}
* {
    box-sizing:border-box
}
body {
    font-family:'DM Sans',sans-serif;
    color:var(--ink);
    background:var(--bg);
    margin:0
}
h1,h2,h3,h4,h5,.brand {
    font-family:Manrope,sans-serif
}
a {
    text-decoration:none
}
.muted {
    color:var(--muted)
}
.btn {
    font-weight:700;
    border-radius:10px
}
.btn-primary {
    background:linear-gradient(115deg,#6546f5,#803eff);
    border:0;
    box-shadow:0 5px 13px #6546f526
}
.btn-primary:hover {
    background:#5134df
}
.btn-outline-primary {
    border-color:#d8d2ff;
    color:#6546f5
}
.btn-outline-primary:hover {
    background:#6546f5;
    border-color:#6546f5
}
.btn-gold {
    background:linear-gradient(110deg,#ffe56a,#ffbb2d);
    color:#181a35;
    border:1px solid #ffdf71;
    box-shadow:0 8px 20px #f8bd3540
}
.btn-gold:hover {
    background:#ffd04a;
    color:#16182e
}
.form-control,.form-select {
    border-color:#e4e7f1;
    border-radius:10px;
    padding:.75rem .9rem
}
.form-control:focus,.form-select:focus {
    border-color:#9d8dff;
    box-shadow:0 0 0 .2rem #6546f51c
}
.form-label {
    font-weight:700;
    font-size:.9rem
}
.auth-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:radial-gradient(ellipse at 15% 20%,#33388b 0,transparent 34%),radial-gradient(ellipse at 90% 85%,#642eac 0,transparent 34%),#101536
}
.auth-card {
    width:min(100%,440px);
    background:#fff;
    border-radius:24px;
    padding:36px;
    box-shadow:0 28px 90px #070b2d60;
    text-align:center
}
.brand-mark {
    width:58px;
    height:58px;
    border-radius:18px;
    background:linear-gradient(140deg,#ffe47b,#ffb927);
    color:#5a3b00;
    display:grid;
    place-items:center;
    font-size:27px;
    margin:0 auto 18px
}
.auth-card h1 {
    font-size:25px;
    font-weight:800;
    letter-spacing:-1px
}
.auth-card h1 span {
    color:var(--purple)
}
.auth-card .muted {
    font-size:13px
}
.auth-tabs {
    display:flex;
    border-bottom:1px solid var(--line);
    margin:25px 0;
    text-align:center
}
.auth-tabs>* {
    width:50%;
    padding:12px;
    color:#6f7690;
    font-weight:700
}
.auth-tabs .active {
    color:var(--purple);
    border-bottom:2px solid var(--purple)
}
.auth-card form {
    text-align:left
}
.auth-card .form-control {
    background:#f9faff
}
.app-body {
    min-height:100vh
}
.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:252px;
    background:linear-gradient(180deg,#121837,#10152e);
    color:#fff;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    z-index:1040;
    overflow-y:auto
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-weight:800;
    font-size:16px;
    padding:0 8px 28px;
    letter-spacing:-.5px
}
.brand:hover {
    color:#fff
}
.brand b {
    color:#ffd35a
}
.brand-icon {
    width:38px;
    height:38px;
    border-radius:12px;
    background:linear-gradient(140deg,#ffe47b,#ffb72d);
    display:grid;
    place-items:center;
    color:#473100;
    font-size:18px
}
.user-mini {
    display:flex;
    align-items:center;
    gap:10px;
    padding:15px 10px;
    background:#ffffff0d;
    border:1px solid #ffffff12;
    border-radius:13px;
    margin-bottom:28px;
    min-width:0
}
.avatar,.person-avatar,.winner-avatar {
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-weight:800
}
.avatar {
    width:40px;
    height:40px;
    background:linear-gradient(135deg,#a7b4ff,#e2c8ff);
    color:#32216f
}
.user-mini strong,.user-mini small {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:160px
}
.user-mini strong {
    font-size:12px
}
.user-mini small {
    font-size:10px;
    color:#aeb7d9;
    margin-top:3px
}
.nav-label {
    font-size:10px;
    letter-spacing:1.5px;
    font-weight:800;
    color:#7e89b5;
    padding:0 12px 10px
}
.side-link {
    display:flex;
    align-items:center;
    gap:13px;
    padding:12px;
    border-radius:10px;
    color:#aeb6d5;
    font-size:13px;
    font-weight:600;
    margin:2px 0;
    transition:.2s
}
.side-link i {
    width:19px;
    text-align:center;
    font-size:15px
}
.side-link:hover {
    background:#ffffff0b;
    color:#fff
}
.side-link.active {
    color:#fff;
    background:linear-gradient(100deg,#6045f5,#7543ec);
    box-shadow:0 8px 18px #5f43f540
}
.sidebar-bottom {
    margin-top:auto;
    padding-top:30px
}
.sidebar-foot {
    font-size:10px;
    line-height:1.6;
    color:#7f89b1;
    padding:20px 10px 0
}
.main-area {
    margin-left:252px;
    min-height:100vh;
    display:flex;
    flex-direction:column
}
.topbar {
    height:88px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 34px;
    gap:20px
}
.eyebrow {
    font-size:9px;
    letter-spacing:1.5px;
    font-weight:800;
    color:#9299b2
}
.topbar h1 {
    font-size:22px;
    font-weight:800;
    margin:3px 0 0;
    letter-spacing:-.7px
}
.top-actions {
    display:flex;
    align-items:center;
    gap:16px
}
.top-actions .btn {
    font-size:12px;
    padding:11px 15px
}
.avatar-small {
    width:36px;
    height:36px
}
.content-wrap {
    padding:28px 34px 35px;
    flex:1;
    max-width:1800px;
    width:100%;
    margin:0 auto
}
.app-footer {
    padding:16px 34px;
    border-top:1px solid var(--line);
    background:#fff;
    color:#9a9fb2;
    font-size:11px;
    display:flex;
    justify-content:space-between;
    gap:10px
}
.hero-banner {
    min-height:250px;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    padding:32px 38px;
    color:#fff;
    background:radial-gradient(ellipse at 80% 10%,#5638ba 0,transparent 36%),linear-gradient(112deg,#171e50,#28206a 60%,#392277);
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 13px 30px #24215a18
}
.hero-banner:after {
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(#ffffff45 1px,transparent 1px);
    background-size:25px 25px;
    opacity:.16;
    pointer-events:none
}
.hero-copy {
    position:relative;
    z-index:2
}
.pill-light {
    display:inline-flex;
    align-items:center;
    border:1px solid #ffffff42;
    background:#ffffff14;
    border-radius:50px;
    padding:7px 11px;
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
    color:#fff
}
.hero-copy h2 {
    font-size:34px;
    line-height:1.18;
    font-weight:800;
    letter-spacing:-1.5px;
    margin:16px 0 10px
}
.hero-copy h2 span {
    color:#ffd65b
}
.hero-copy p {
    font-size:12px;
    color:#c9ccef;
    margin-bottom:20px
}
.hero-copy .btn {
    font-size:12px;
    padding:12px 17px
}
.hero-art {
    width:40%;
    height:210px;
    position:relative;
    display:grid;
    place-items:center
}
.hero-glow {
    width:210px;
    height:210px;
    border-radius:50%;
    background:radial-gradient(circle,#a85bff66,transparent 70%);
    position:absolute
}
.hero-gift {
    position:relative;
    width:132px;
    height:132px;
    display:grid;
    place-items:center;
    border-radius:36px;
    background:linear-gradient(145deg,#ffe884,#ffad23);
    box-shadow:0 20px 45px #080b3560,inset 0 2px 5px #fff9;
    color:#7441b5;
    font-size:65px;
    transform:rotate(-8deg)
}
.floating-star {
    position:absolute;
    color:#ffdb63;
    font-size:34px
}
.star-one {
    top:10px;
    right:30px
}
.star-two {
    bottom:18px;
    left:35px;
    color:#d9b8ff
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin:22px 0
}
.stat-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    padding:19px;
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
    box-shadow:0 4px 15px #252e5a04
}
.stat-icon {
    width:45px;
    height:45px;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-size:19px;
    flex-shrink:0
}
.stat-icon.purple {
    color:#6546f5;
    background:#efecff
}
.stat-icon.pink {
    color:#ed4c8b;
    background:#fff0f5
}
.stat-icon.gold {
    color:#d99b09;
    background:#fff7d9
}
.stat-icon.mint {
    color:#11a778;
    background:#e5fbf2
}
.stat-card span,.stat-card small {
    display:block;
    color:#8a90a8;
    font-size:10px
}
.stat-card strong {
    display:block;
    font-family:Manrope,sans-serif;
    font-size:27px;
    line-height:1.45;
    letter-spacing:-1px
}
.stat-card small {
    font-size:9px
}
.section-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}
.panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:22px;
    box-shadow:0 4px 15px #252e5a04;
    min-width:0
}
.panel-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px
}
.panel-heading h3 {
    font-size:15px;
    font-weight:800;
    margin:0 0 5px;
    letter-spacing:-.4px
}
.panel-heading p {
    margin:0;
    color:#9298ae;
    font-size:10px
}
.heading-icon {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    background:#f0edff;
    color:var(--purple);
    border-radius:11px
}
.setup-list>a {
    display:flex;
    align-items:center;
    gap:13px;
    padding:14px 0;
    border-bottom:1px solid #f0f1f7;
    color:var(--ink)
}
.setup-list>a:last-child {
    border-bottom:0
}
.setup-number {
    width:36px;
    height:36px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background:#efecff;
    color:#6546f5;
    font-size:12px;
    font-weight:800;
    flex-shrink:0
}
.setup-number.pink-bg {
    background:#fff0f5;
    color:#ed4c8b
}
.setup-number.gold-bg {
    background:#fff7d9;
    color:#d99b09
}
.setup-list b,.setup-list small {
    display:block
}
.setup-list b {
    font-size:12px
}
.setup-list small {
    font-size:10px;
    color:#9298ae;
    margin-top:4px
}
.setup-list>a>i {
    margin-left:auto;
    color:#a6abc0;
    font-size:12px
}
.text-link {
    color:#6848ef;
    font-weight:700;
    font-size:11px
}
.winner-row {
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 0;
    border-bottom:1px solid #f1f2f7
}
.winner-row:last-child {
    border-bottom:0
}
.winner-avatar {
    width:37px;
    height:37px;
    background:linear-gradient(135deg,#7d6aff,#e2b5ff);
    color:#fff
}
.winner-detail {
    flex:1;
    min-width:0
}
.winner-detail b,.winner-detail small {
    display:block
}
.winner-detail b {
    font-size:12px
}
.winner-detail small {
    font-size:10px;
    color:#9096ac;
    margin-top:3px
}
.winner-date {
    font-size:10px;
    color:#969cb0
}
.empty-state {
    text-align:center;
    padding:35px 15px
}
.empty-icon {
    width:54px;
    height:54px;
    border-radius:17px;
    background:#f0edff;
    color:#7655f7;
    display:grid;
    place-items:center;
    font-size:22px;
    margin:0 auto 14px
}
.empty-state b {
    display:block;
    font-size:13px
}
.empty-state p {
    font-size:11px;
    color:#9298ae;
    margin:6px 0 15px
}
.page-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin:3px 0 22px
}
.page-toolbar h2,.draw-page-head h2 {
    font-size:22px;
    font-weight:800;
    letter-spacing:-.8px;
    margin:0 0 6px
}
.page-toolbar p,.draw-page-head p {
    color:#8b91a8;
    font-size:12px;
    margin:0
}
.toolbar-actions {
    display:flex;
    gap:9px
}
.toolbar-actions .btn,.page-toolbar>.btn {
    font-size:11px;
    padding:11px 14px
}
.app-table {
    margin:0;
    white-space:nowrap
}
.app-table thead th {
    background:#fafbff;
    color:#8c92aa;
    font-size:9px;
    letter-spacing:.5px;
    text-transform:uppercase;
    font-weight:800;
    padding:15px 18px;
    border-bottom:1px solid var(--line)
}
.app-table tbody td {
    padding:13px 18px;
    border-color:#f0f1f7;
    font-size:1.06rem;
}
.table-person {
    display:flex;
    align-items:center;
    gap:10px
}
.table-person b {
    font-size:11px
}
.person-avatar {
    width:34px;
    height:34px;
    background:#efedff;
    color:#6948ed;
    font-size:12px
}
.status-pill {
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:6px;
    font-size:0.8rem;
    font-weight:800
}
.status-active {
    background:#e6fbf1;
    color:#109768
}
.status-inactive {
    background:#f0f1f6;
    color:#747b91
}
.status-won {
    background:#fff5d7;
    color:#a77700
}
.status-ready {
    background:#e7f9f0;
    color:#109768
}
.icon-btn {
    border:0;
    background:#f0edff;
    color:#6848ef;
    width:30px;
    height:30px;
    border-radius:8px;
    margin-left:4px;
    font-size:15px
}
.icon-btn.danger {
    background:#fff0f1;
    color:#e34c5b
}
.table-bottom {
    display:flex;
    justify-content:space-between;
    padding:14px 18px;
    color:#8d93aa;
    font-size:10px;
    border-top:1px solid #f0f1f7
}
.table-bottom code {
    color:#6848ef
}
.modal-content {
    border:0;
    border-radius:17px;
    box-shadow:0 20px 70px #11173724
}
.modal-header,.modal-footer {
    border-color:#eff0f7;
    padding:18px 22px
}
.modal-title {
    font-weight:800;
    font-size:16px
}
.modal-body {
    padding:22px
}
.prize-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:17px
}
.span-all {
    grid-column:1/-1
}
.prize-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden
}
.prize-art {
    height:135px;
    background:linear-gradient(140deg,#f0edff,#f9f6ff);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative
}
.prize-emoji {
    width:84px;
    height:84px;
    border-radius:26px;
    background:linear-gradient(145deg,#ffe37c,#ffbd32);
    color:#7c49e9;
    display:grid;
    place-items:center;
    font-size:39px;
    box-shadow:0 12px 25px #b18af32b;
    transform:rotate(-5deg)
}
.prize-art .status-pill {
    position:absolute;
    top:12px;
    right:12px
}
.prize-card-body {
    padding:17px
}
.prize-card-body h3 {
    font-size:14px;
    font-weight:800;
    margin:0 0 6px
}
.prize-card-body>p {
    font-size:10px;
    color:#9298ae;
    min-height:30px;
    margin:0 0 14px
}
.prize-meta {
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding-bottom:14px;
    border-bottom:1px solid #f0f1f7;
    color:#8b91a8;
    font-size:9px
}
.prize-actions {
    display:flex;
    gap:8px;
    margin-top:13px
}
.prize-actions form {
    margin-left:auto
}
.prize-actions .btn {
    font-size:10px
}
.draw-page-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin:3px 0 22px
}
.draw-page-head h2 {
    font-size:27px;
    margin-top:12px
}
.draw-page-head .btn {
    font-size:11px
}
.purple-pill {
    color:#6546f5;
    border-color:#ded7ff;
    background:#f0edff
}
.draw-layout {
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);
    gap:20px;
    align-items:start
}
.wheel-stage {
    position:relative;
    overflow:hidden;
    border-radius:20px;
    padding:22px 20px 24px;
    background:radial-gradient(ellipse at 50% 45%,#332778 0,#171c48 54%,#10152f 100%);
    color:#fff;
    min-width:0;
    box-shadow:0 14px 35px #14173b24
}
.wheel-stage:before {
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(#fff 1px,transparent 1px);
    background-size:24px 24px;
    opacity:.13;
    pointer-events:none
}
.wheel-topline {
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    color:#c5c8e5;
    font-size:9px;
    letter-spacing:.7px
}
.wheel-topline>span:last-child {
    margin-left:auto;
    font-weight:800;
    font-size:8px
}
.wheel-topline b {
    color:#fff;
    font-size:12px
}
.live-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#44e1ac;
    box-shadow:0 0 0 4px #44e1ac20
}
.wheel-wrap {
    width:min(100%,500px);
    aspect-ratio:1;
    position:relative;
    margin:20px auto 14px;
    filter:drop-shadow(0 14px 20px #05082080)
}
#wheelCanvas {
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
    border:8px solid #f9ce57;
    box-shadow:0 0 0 5px #8d5b19,0 0 0 10px #ffdf75,0 0 25px #ffcb47a1
}
.wheel-pointer {
    position:absolute;
    z-index:4;
    left:50%;
    top:-15px;
    transform:translateX(-50%);
    font-size:42px;
    color:#fff0a0;
    text-shadow:0 3px 0 #a64e18;
    filter:drop-shadow(0 3px 3px #0008)
}
.wheel-center {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:24%;
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle at 35% 25%,#a85a23,#54210c 75%);
    border:6px solid #ffdb66;
    box-shadow:0 0 0 5px #a97120,0 0 20px #ffc84f99;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:#fff6c5;
    text-shadow:0 2px 2px #0008
}
.wheel-center span {
    font-size:clamp(7px,1vw,11px);
    letter-spacing:2px;
    font-weight:800
}
.wheel-center b {
    font-family:Manrope,sans-serif;
    font-size:clamp(15px,2.1vw,25px);
    line-height:1.25
}
.wheel-center i {
    font-size:10px;
    color:#ffdf65;
    margin-top:3px
}
.wheel-caption {
    text-align:center;
    font-size:10px;
    color:#b9bfe4;
    position:relative
}
.draw-controls {
    display:flex;
    flex-direction:column;
    gap:17px
}
.control-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px;
    box-shadow:0 4px 15px #252e5a04
}
.control-card>.form-label {
    display:block;
    color:#4c5270
}
.control-card .form-select {
    font-size:12px
}
.prize-selected-art {
    display:flex;
    align-items:center;
    gap:13px;
    padding:18px 0
}
.big-gift {
    width:53px;
    height:53px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:linear-gradient(145deg,#ffe984,#ffbd36);
    font-size:25px;
    color:#7650df
}
.prize-selected-art b,.prize-selected-art small {
    display:block
}
.prize-selected-art b {
    font-size:12px
}
.prize-selected-art small {
    font-size:10px;
    color:#9aa0b4;
    margin-top:4px
}
.spin-button {
    width:100%;
    padding:15px 12px;
    font-size:13px;
    letter-spacing:.5px
}
.spin-button:disabled {
    opacity:.5;
    cursor:not-allowed
}
.draw-note {
    font-size:9px;
    color:#9aa0b4;
    text-align:center;
    margin:12px 0 0
}
.roster-card {
    padding:19px
}
.count-badge {
    min-width:29px;
    height:29px;
    display:grid;
    place-items:center;
    background:#efecff;
    color:#6546f5;
    border-radius:9px;
    font-size:11px;
    font-weight:800
}
.roster-list {
    max-height:300px;
    overflow:auto
}
.roster-person {
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 0;
    border-bottom:1px solid #f0f1f7
}
.roster-person:last-child {
    border-bottom:0
}
.roster-person>span:nth-child(2) {
    flex:1;
    min-width:0
}
.roster-person b,.roster-person small {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.roster-person b {
    font-size:10px
}
.roster-person small {
    font-size:9px;
    color:#9298ae;
    margin-top:3px
}
.roster-person>i {
    color:#27b889;
    font-size:13px
}
.winner-overlay {
    position:fixed;
    inset:0;
    z-index:2000;
    background:#080b26eF;
    backdrop-filter:blur(8px);
    display:grid;
    place-items:center;
    padding:20px;
    overflow:auto
}
.winner-overlay[hidden] {
    display:none
}
.winner-modal {
    width:min(100%,450px);
    background:#fff;
    border-radius:25px;
    padding:32px;
    text-align:center;
    box-shadow:0 25px 100px #0005;
    position:relative;
    animation:winnerPop .45s cubic-bezier(.2,.8,.2,1)
}
@keyframes winnerPop {
    from {
        opacity:0;
        transform:translateY(20px) scale(.92)
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1)
    }
}
.confetti-symbol {
    font-size:42px;
    margin-bottom:10px
}
.winner-modal .pill-light {
    background:#f1edff;
    color:#6848ef;
    border-color:#e0d8ff
}
.winner-modal h2 {
    font-size:25px;
    font-weight:800;
    margin:16px 0
}
.winner-big-avatar {
    width:78px;
    height:78px;
    border-radius:50%;
    display:grid;
    place-items:center;
    margin:0 auto 12px;
    background:linear-gradient(140deg,#7350fa,#c17aff);
    color:#fff;
    font-family:Manrope,sans-serif;
    font-weight:800;
    font-size:32px;
    box-shadow:0 8px 25px #7553ef4d;
    border:4px solid #fff;
    outline:2px solid #d9d0ff
}
.winner-modal h3 {
    font-size:25px;
    font-weight:800;
    margin:0 0 5px
}
.winner-modal p {
    font-size:12px;
    color:#969bb0;
    margin:0
}
.winner-prize-name {
    font-size:18px;
    color:#7049ed;
    font-weight:800;
    margin:4px 0 23px
}
.winner-modal-actions {
    display:flex;
    justify-content:center;
    gap:9px;
    flex-wrap:wrap
}
.winner-modal-actions .btn {
    font-size:11px;
    padding:11px 15px
}
.small-winner {
    width:32px;
    height:32px;
    font-size:11px
}
.modal-open {
    overflow:hidden
}
#drawExperience:fullscreen {
    background:#101536;
    padding:2vh 3vw;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
    align-items:center;
    overflow:auto
}
#drawExperience:fullscreen .wheel-wrap {
    width:min(68vh,100%)
}
#drawExperience:fullscreen .wheel-stage {
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center
}
#drawExperience:fullscreen .draw-controls {
    max-height:94vh;
    overflow:auto
}
@media(max-width:1200px) {
    .content-wrap {
        padding:24px
    }
    .topbar {
        padding:0 24px
    }
    .stats-grid {
        gap:10px
    }
    .stat-card {
        padding:14px;
        gap:9px
    }
    .stat-icon {
        width:38px;
        height:38px
    }
    .stat-card strong {
        font-size:23px
    }
    .draw-layout {
        grid-template-columns:minmax(0,1.2fr) minmax(275px,.8fr)
    }
    .wheel-stage {
        padding:18px 14px
    }
    .prize-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:991px) {
    .sidebar {
        transform:translateX(-100%);
        transition:transform .25s;
        box-shadow:12px 0 40px #11152c30
    }
    .sidebar.sidebar-open {
        transform:translateX(0)
    }
    .main-area {
        margin-left:0
    }
    .topbar {
        height:76px
    }
    .stats-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .draw-layout {
        grid-template-columns:1fr
    }
    .wheel-wrap {
        width:min(100%,480px)
    }
    .draw-controls {
        display:grid;
        grid-template-columns:1fr 1fr
    }
    .section-grid {
        grid-template-columns:1fr 1fr
    }
    .hero-art {
        width:32%
    }
    .hero-copy h2 {
        font-size:29px
    }
}
@media(max-width:650px) {
    .content-wrap {
        padding:17px 13px 25px
    }
    .topbar {
        padding:0 14px;
        height:70px
    }
    .topbar h1 {
        font-size:18px
    }
    .eyebrow {
        font-size:7px
    }
    .top-actions .btn {
        font-size:0;
        padding:11px
    }
    .top-actions .btn i {
        font-size:14px;
        margin:0!important
    }
    .top-actions {
        gap:8px
    }
    .app-footer {
        padding:14px;
        font-size:9px;
        flex-wrap:wrap
    }
    .hero-banner {
        padding:24px 20px;
        min-height:230px
    }
    .hero-copy h2 {
        font-size:26px
    }
    .hero-copy p {
        max-width:250px;
        line-height:1.6
    }
    .hero-art {
        position:absolute;
        right:-38px;
        bottom:2px;
        width:180px;
        opacity:.3
    }
    .hero-gift {
        width:120px;
        height:120px
    }
    .stats-grid {
        gap:9px;
        margin:14px 0
    }
    .stat-card {
        padding:12px 10px;
        gap:8px
    }
    .stat-icon {
        width:34px;
        height:34px;
        font-size:14px;
        border-radius:10px
    }
    .stat-card span {
        font-size:9px
    }
    .stat-card strong {
        font-size:22px
    }
    .stat-card small {
        font-size:8px
    }
    .section-grid {
        grid-template-columns:1fr;
        gap:13px
    }
    .panel {
        padding:16px
    }
    .page-toolbar {
        align-items:flex-start;
        flex-direction:column
    }
    .toolbar-actions {
        width:100%
    }
    .toolbar-actions .btn {
        flex:1
    }
    .page-toolbar>.btn {
        align-self:stretch
    }
    .prize-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px
    }
    .prize-art {
        height:110px
    }
    .prize-emoji {
        width:65px;
        height:65px;
        font-size:29px
    }
    .prize-card-body {
        padding:12px
    }
    .prize-meta {
        flex-direction:column;
        gap:5px
    }
    .draw-page-head {
        align-items:flex-start;
        flex-direction:column
    }
    .draw-page-head h2 {
        font-size:23px
    }
    .draw-page-head .btn {
        align-self:stretch
    }
    .draw-controls {
        grid-template-columns:1fr
    }
    .wheel-stage {
        padding:18px 13px
    }
    .wheel-wrap {
        width:min(100%,390px);
        margin:19px auto
    }
    .wheel-center {
        border-width:4px;
        box-shadow:0 0 0 3px #a97120,0 0 15px #ffc84f99
    }
    .wheel-pointer {
        font-size:34px
    }
    .wheel-topline {
        font-size:8px
    }
    .wheel-caption {
        font-size:9px
    }
    .control-card {
        padding:16px
    }
    .table-bottom {
        padding:12px;
        gap:10px;
        flex-wrap:wrap
    }
    .auth-card {
        padding:28px 22px
    }
    .winner-modal {
        padding:26px 19px
    }
    .winner-modal h2 {
        font-size:22px
    }
    #drawExperience:fullscreen {
        display:block;
        padding:12px
    }
    #drawExperience:fullscreen .wheel-wrap {
        width:min(48vh,90vw)
    }
    #drawExperience:fullscreen .wheel-stage {
        height:auto
    }
    #drawExperience:fullscreen .draw-controls {
        display:none
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:.01ms!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important
    }
}