:root {
  --ink: #171417;
  --forest: #0d0b0d;
  --forest-2: #201b1e;
  --green: #e10613;
  --lime: #ff3040;
  --paper: #f4f2f2;
  --card: #fff;
  --line: #d9d3d5;
  --muted: #746a6e;
  --danger: #85000a;
  --shadow: 0 12px 32px #1b000514;
}

body {
  background-color: var(--paper);
  background-image: linear-gradient(145deg, #f8f7f7, #efeded);
}

button, .btn {
  border: 1px solid #ff4651;
  border-radius: 7px;
  background: linear-gradient(180deg, #ff2533, #d9000e);
  color: #fff;
  box-shadow: inset 0 1px #ff8289, 0 4px 12px #b400192b;
  text-transform: uppercase;
  letter-spacing: .45px;
  transition: transform .15s, filter .15s;
}

button:hover, .btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.secondary, button.secondary { background: #fff; color: #c9000d; border-color: #d0c7ca; box-shadow: 0 3px 10px #2600070c; }
.btn.danger, button.danger { background: linear-gradient(#770009, #320004); border-color: #9e000c; }

.topbar { background: linear-gradient(180deg, #fff, #f4f1f2); border-bottom: 3px solid #e10613; box-shadow: 0 5px 18px #2000060d; }
.wallet { border-color: #c8bec1; border-left: 4px solid #e10613; box-shadow: inset 0 0 0 1px #fff, 0 3px 10px #0001; }
.wallet b { color: #d6000e; }
.online { background: #201b1e; color: #f5eff1; }
.online:before { color: #ff2635; }

#sidebar {
  background: linear-gradient(145deg, #1d181b, #080708 52%, #250006);
  color: #eee5e8;
  border-right: 3px solid #e10613;
  box-shadow: 8px 0 25px #26000626;
  overflow: hidden;
}

#sidebar:before {
  display: none;
}

#sidebar > * { position: relative; }
.brand-row { padding-bottom: 22px; border-bottom: 1px solid #4d2227; }
.mark {
  width: 66px;
  height: 66px;
  border: 3px solid #f1f2f3;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff1726 0 48%, #140f11 49%);
  color: #fff;
  box-shadow: 0 0 0 3px #e10613, 0 8px 20px #0008;
}
.mark span { text-shadow: 2px 2px #530008; font-style: italic; font-size: 35px; }
.brand-copy h1 { font-size: 23px; font-style: italic; letter-spacing: 2px; text-shadow: 2px 2px #8e0009; }
.brand-copy p { color: #ff9da4; letter-spacing: 1.2px; }
.brand-logo { justify-content: center; padding: 0 0 18px; }
.brand-logo img { display: block; width: 210px; height: 155px; object-fit: contain; }
.brand-logo + .side-nav { margin-top: 20px; }
.side-nav a { color: #c9bec2; border: 1px solid transparent; }
.side-nav a.active, .side-nav a:hover { background: linear-gradient(90deg, #e10613, #7f0009); color: #fff; border-color: #ff4450; box-shadow: inset 4px 0 #fff, 0 5px 14px #0005; }
.side-nav a .nav-icon { color: #ff5863; }
.side-nav a.active .nav-icon { color: #fff; }
.profile { border-top-color: #63252d; }
.avatar { background: linear-gradient(145deg, #ff2432, #a9000b); color: #fff; border: 2px solid #fff; box-shadow: 0 0 0 2px #e10613; }
.profile small { color: #cfabb0; }

.mobile-brand { font-style: italic; letter-spacing: 1px; }
.mobile-brand span { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 7px; background: #e10613; color: #fff; border: 2px solid #171417; }
.page-kicker { color: #cf0010; }
.page-title { font-weight: 850; text-transform: uppercase; font-style: italic; text-shadow: 2px 2px #fff; }
.panel { border-color: #d2c8cb; border-top: 4px solid #e10613; border-radius: 12px; box-shadow: var(--shadow), inset 0 1px #fff; }
.panel h2 { font-weight: 850; }
.field label, .field-label, .form-field label { color: #3b3034; text-transform: uppercase; letter-spacing: .65px; font-size: 11px; font-weight: 900; }
.field input, .field select, .field textarea, .form-field input, .form-field select, .form-field textarea { border-color: #cfc4c7; background: #fff; color: #21191c; border-radius: 6px; box-shadow: inset 0 2px 4px #1b00050a; }
.field input:focus, .field select:focus, .field textarea:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 3px solid #ff24352e; border-color: #e10613; }
.catalog-footer { border-top-color: #eadde0; }
.catalog-footer b { color: #d0000e; }
.inventory { border-radius: 9px; border-color: #d5cace; }
.inventory th { color: #fff; background: linear-gradient(180deg, #2b2427, #120f10); border-bottom: 3px solid #e10613; }
.inventory th, .inventory td { border-bottom-color: #eadfe1; }
.inventory tbody tr:hover { background: #fff3f4; }
.listing-meta { color: #8b767c; }
.status { background: #ffe2e4; color: #bc000c; border: 1px solid #ffadb3; }

.hero { position: relative; overflow: hidden; background: linear-gradient(120deg, #090708, #350006 52%, #e10613 140%); border: 1px solid #ff3340; border-radius: 12px; box-shadow: inset 0 0 0 1px #ffffff1f, 0 15px 35px #2d000728; }
.hero:after { content: "H"; position: absolute; right: 35px; top: -46px; color: #ffffff0d; font-size: 240px; font-weight: 1000; font-style: italic; transform: rotate(-8deg); }
.hero .page-kicker { color: #ff3442 !important; }
.hero h1, .hero p { position: relative; z-index: 1; }
.hero h1 { text-transform: uppercase; font-style: italic; }
.hero p { color: #eadadd; }
.notice-card { background: linear-gradient(135deg, #fff, #f8f3f4); border: 1px solid #ddd1d4; border-left: 5px solid #e10613; }
.alert { border-color: #ff9ba3; background: #fff0f1; color: #760008; }
.modal-shade { background: #120004c7; }
.modal { border: 2px solid #e10613; border-radius: 12px; }
.toast { background: #171215; border-left: 5px solid #ff1e2d; border-radius: 6px; }
.stat { border-top: 4px solid #e10613; border-radius: 10px; }

.auth { max-width: 520px; }
.auth .panel { position: relative; border-top: 0; padding: 39px; box-shadow: 0 22px 55px #3300092b, 0 0 0 1px #fff; }
.auth .panel:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: #e10613; }
.auth-logo { width: 66px; height: 66px; border-radius: 10px; background: linear-gradient(135deg, #f21120 0 49%, #161113 50%); color: #fff; border: 3px solid #f4f4f4; box-shadow: 0 0 0 3px #e10613, 0 9px 20px #3a00082e; transform: rotate(45deg); font-size: 0; }
.auth-logo:after { content: "H"; font-size: 30px; font-style: italic; transform: rotate(-45deg); text-shadow: 2px 2px #690008; }
.auth-header h1 { text-transform: uppercase; font-style: italic; font-size: 31px; margin: 12px 0 6px; }

body:has(#sidebar:empty) #sidebar { display: none; }
body:has(#sidebar:empty) .topbar { display: none; }
body:has(#sidebar:empty) .workspace { min-height: 100vh; background: radial-gradient(circle at 50% 22%, #ff17232a, transparent 28%), linear-gradient(145deg, #191416, #070607 58%, #430009 145%); }
body:has(#sidebar:empty) main { min-height: 100vh; display: grid; align-items: center; }
body:has(#sidebar:empty) .auth { width: min(520px, 100%); margin: 20px auto; }
body:has(.auth-login) main { padding-top: 16px; padding-bottom: 16px; }

/* Login composition based on the supplied reference */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body:has(.auth-login) .workspace {
  background: radial-gradient(circle at 50% 8%, #6e000d 0, #230006 30%, #0b0809 68%);
}
.auth-login {
  width: min(400px, 100%);
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.login-emblem {
  width: 285px;
  height: 225px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-emblem img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 25px #000b); }
.auth-login .panel {
  width: 100%;
  padding: 38px 33px 30px;
  border: 0;
  border-radius: 15px;
  box-shadow: 0 24px 65px #0008;
}
.auth-login .panel:before { display: none; }
.auth-login .auth-header { margin-bottom: 29px; }
.auth-login .auth-header h1 {
  margin: 10px 0 0;
  font-size: 32px;
  font-style: normal;
  text-transform: none;
  letter-spacing: -1px;
}
.auth-login .page-kicker { font-size: 10px; letter-spacing: 2.1px; }
.auth-login .form-field { margin-top: 0; margin-bottom: 17px; }
.auth-login .form-field input {
  height: 47px;
  padding: 0 15px;
  border-color: #d9dce4;
  background: #f0f3f8;
  font-weight: 650;
}
.auth-login .login-submit { width: 100%; height: 49px; margin-top: 3px; }
.register-prompt { margin: 27px 0; text-align: center; color: #7b7376; font-size: 13px; font-weight: 650; }
.register-prompt a { color: #d3000e; font-weight: 900; }
.community { padding-top: 18px; border-top: 1px solid #e5dfe1; text-align: center; }
.community > span { display: block; margin-bottom: 12px; color: #8d8286; font-size: 11px; font-weight: 900; letter-spacing: 1.4px; }
.community > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.community button, .community a.btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 40px; gap: 7px; padding: 0 7px; font-size: 11px; }
.casino-chip {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border: 1px solid #171214;
  border-radius: 1px;
  background: #e10613;
  box-shadow: inset 0 0 0 1px #ff6973, 1px 1px 0 #171214;
  transform: rotate(45deg);
}

@media (max-width: 760px) {
  #sidebar { border-right-width: 2px; }
  .topbar { border-bottom-width: 2px; }
  body:has(#sidebar:empty) main { min-height: 100vh; }
  .auth .panel { padding: 28px 21px; }
  .hero:after { right: -15px; }
  .auth-login { gap: 15px; }
  .login-emblem { width: 225px; height: 178px; }
  .auth-login .panel { padding: 31px 23px 25px; }
}

.topup-panel { width: 100%; }
.topup-history { margin-top: 30px; padding-top: 26px; border-top: 1px solid #e5dfe1; }

main { max-width: none; width: 100%; margin: 0; padding: 18px 10px 48px; }
#app { width: 100%; }
#app > .panel, #app > .form-card { width: 100%; max-width: none; }

.cart-panel { padding: 0; overflow: hidden; }
.cart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 25px 27px; border-bottom: 1px solid #e5dfe1; }
.cart-toolbar h2 { margin: 5px 0 0; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 26px; padding: 26px 27px 28px; align-items: start; }
.cart-summary { border: 1px solid #ded4d7; background: #fffafa; }
.cart-summary > .page-kicker { padding: 15px 16px 5px; }
.cart-summary dl { margin: 0; }
.cart-summary dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid #eadfe1; }
.cart-summary dt, .cart-summary dd { margin: 0; }
.cart-summary dd { font-weight: 800; }
.cart-summary .cart-total { color: #d3000e; font-size: 17px; }
.cart-summary button { width: calc(100% - 32px); margin: 16px 16px 8px; }
.cart-summary small { display: block; padding: 0 16px 16px; color: #7b7376; line-height: 1.45; }
.cart-empty { padding: 54px 20px !important; line-height: 1.8; }
.cart-empty a { color: #d3000e; font-weight: 800; }

#app.page-cart .page-title { margin: 7px 0 18px; font-size: 31px; }
main:has(#app.page-cart) { max-width: none; width: 100%; padding-left: 10px; padding-right: 10px; }
.cart-toolbar { padding: 17px 20px; }
.cart-toolbar h2 { font-size: 19px; }
.cart-layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; padding: 18px 20px 20px; }
.cart-panel .inventory { min-width: 0; table-layout: fixed; }
.cart-panel .inventory th, .cart-panel .inventory td { padding: 10px 11px; font-size: 12px; overflow-wrap: anywhere; }
.cart-panel .inventory th { height: 40px; font-size: 10px; }
.cart-panel .listing-meta { font-size: 10px; }
.cart-summary > .page-kicker { padding: 11px 12px 4px; font-size: 10px; }
.cart-summary dl > div { padding: 9px 12px; font-size: 13px; }
.cart-summary .cart-total { font-size: 15px; }
.cart-summary button { width: calc(100% - 24px); margin: 12px 12px 6px; padding: 10px; font-size: 12px; }
.cart-summary small { padding: 0 12px 12px; font-size: 10px; }

@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } .cart-summary { max-width: none; } .cart-panel .inventory { min-width: 720px; } }
@media (max-width: 560px) { .cart-toolbar { align-items: flex-start; flex-direction: column; } .cart-layout { padding: 18px; } }