/* Shared shell and interior components, matched to the supplied RubinOT reference. */
.hb-reference { --hb-paper: #e9dab0; --hb-paper-light: #efe2bd; --hb-paper-shade: #cbbd9e; --hb-ink: #3d2314; --hb-gold: #bc9339; }
.hb-reference #Bodycontainer { max-width: 1160px; }
.hb-reference #MenuColumn { width: 184px; flex: 0 0 184px; margin-left: 8px; margin-right: 12px; }
.hb-reference #ThemeboxesColumn { width: 190px; flex: 0 0 190px; margin-left: 12px; margin-right: 8px; }
.hb-reference #MenuColumn .rb-panel, .hb-reference .rb-box { width: 100%; }
.hb-reference .rb-panel-head, .hb-reference .rb-box-head, .hb-reference .rb-page-head { text-transform: uppercase; }
.hb-reference .rb-panel-head::after, .hb-reference .rb-page-head::after,
.hb-reference .rb-box-head::after, .hb-reference #Topbar::before { filter: none; }
.hb-reference .rb-panel-body::before, .hb-reference .rb-box::before { filter: saturate(.95); }
.hb-reference #News > .rb-panel-body, .hb-reference .rb-ticker > .rb-panel-body,
.hb-reference #MenuColumn .rb-panel-body, .hb-reference .rb-box {
  background: linear-gradient(100deg,#e3d1a6,#eddfb8 55%,#e2cfa0);
}
.hb-reference .Content #News .NewsHeadline + table { background: #ecdfbb; }
.hb-reference #MenuColumn a.rb-menuitem { font: 400 11px/1.5 Verdana,Arial,sans-serif; padding-top: 5px; padding-bottom: 5px; border-bottom: 0; }
.hb-reference #MenuColumn a.rb-menuitem[aria-current="page"] { color: #366b24; background: rgba(177,163,83,.13); box-shadow: inset 2px 0 #a9b955; }
.hb-reference .rb-collapsible .RbTgl { color: #d3a344; }
.hb-reference #MenuColumn > .rb-panel { margin-bottom: 11px; }
.hb-reference #MenuColumn > .hb-login-panel { margin-bottom: 10px; }
.hb-login-status { margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 9px/1.5 Verdana,Arial,sans-serif; color: #4e3722; }
.hb-reference #MenuColumn a.rb-btn { font: 400 11px/28px Verdana,Arial,sans-serif; height: 29px; margin: 5px 0; border-radius: 0; letter-spacing: 0; }
.hb-reference #MenuColumn a.hb-account-button { background: linear-gradient(#3374aa,#1b477b); border: 1px solid #173e66; color: #fff8df; }
.hb-reference #MenuColumn a.hb-logout-button { display: flex; justify-content: center; align-items: center; gap: 7px; background: linear-gradient(#a4514b,#79322e); border: 1px solid #6b2926; color: #fff1d8; }
.hb-reference #MenuColumn .hb-sidebar-download { display: flex; align-items: center; justify-content: center; gap: 7px; height: 30px; margin: 7px 0 14px; }
.hb-reference #MenuColumn .hb-login-panel > .rb-panel-head { width: calc(100% + 16px); margin-left: -8px; }
.hb-reference #MenuColumn .hb-login-panel > .rb-panel-body {
  box-sizing: border-box; border: 12px solid transparent; border-radius: 0;
  border-image: url('/templates/highbinot/images/ui/box/body.png') 210 fill / 12px stretch;
  background: none; box-shadow: 0 2px 4px rgba(34,23,9,.2);
}
.hb-reference #MenuColumn .hb-login-panel > .rb-panel-body::before { display: none; }
.hb-reference #MenuColumn .hb-login-guest > .rb-panel-body { min-height: 128px; }
.hb-reference #MenuColumn .hb-login-guest .rb-frame-mid { display: block; padding: 2px 0; }
.hb-reference #MenuColumn .hb-login-guest a.rb-btn {
  display: block; box-sizing: border-box; width: 100%; height: 27px; padding: 0 3px;
  margin: 5px 0 8px; font: 400 10px/25px Verdana,Arial,sans-serif;
  color: #fff8e8; text-shadow: 0 1px 1px rgba(0,0,0,.65);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 1px 3px rgba(34,23,9,.35);
}
.hb-reference #MenuColumn a.hb-login-button { background: linear-gradient(#337eb6,#1b4d81); border: 1px solid #173f67; }
.hb-reference #MenuColumn a.hb-login-button:hover { background: linear-gradient(#4292ca,#245f98); }
.hb-reference #MenuColumn a.hb-create-button { background: linear-gradient(#97815e,#6c5739); border: 1px solid #5f4b2e; }
.hb-reference #MenuColumn a.hb-create-button:hover { background: linear-gradient(#aa926b,#7b6442); }
.hb-reference #MenuColumn .hb-login-guest a.rb-btn:hover { transform: none; color: #fff; }
.hb-reference #MenuColumn a.hb-sidebar-download {
  box-sizing: border-box; height: 28px; margin: 12px 0 14px; color: #fff8e8; border: 1px solid #23561b;
  background: linear-gradient(#489b3d,#286b25); text-shadow: 0 1px 1px #1c4b18;
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 1px 3px rgba(0,0,0,.25);
}
.hb-reference #MenuColumn a.hb-sidebar-download:hover { color: #fff; background: linear-gradient(#55ac49,#347e2c); transform: none; }
.hb-icon { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: middle; }

/* Identical icon treatment throughout the quick-link bar, without OS emoji. */
.hb-reference #Topbar { height: 40px; margin: 0 0 12px; }
.hb-reference #TopbarInner { display: flex; align-items: center; justify-content: center; gap: 11px; height: 40px; padding: 0 23px; box-sizing: border-box; }
.hb-reference .Content #TopbarInner .TopbarLink {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  margin: 0; padding: 0; border: 0; background: none; text-decoration: none;
  color: #f5f1e3; font: 400 11px/1.3 Verdana,Arial,sans-serif; white-space: nowrap;
}
.hb-reference .Content #TopbarInner .TopbarLink:hover { color: #ffdfa1; }
.hb-reference .Content #TopbarInner button.TopbarLink:disabled { opacity: 1; cursor: default; color: #f5f1e3; }
.hb-reference .Content #TopbarInner .TopbarPlayers { gap: 4px; }
.hb-reference .Content #TopbarInner .TopbarPlayers .hb-icon,
.hb-reference .Content #TopbarInner .TopbarPlayers b { color: #39ed84; font-weight: 600; }
.hb-reference .Content #TopbarInner .TopbarPlayers.hb-offline .hb-icon,
.hb-reference .Content #TopbarInner .TopbarPlayers.hb-offline b { color: #ef9690; }
.hb-reference .TopbarSep { display: block; height: 14px; width: 1px; background: #526d80; }
.hb-language-switch { display: flex; align-items: center; gap: 5px; }
.hb-language-switch button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 19px; padding: 2px; margin: 0; border: 1px solid transparent; border-radius: 3px; background: none; cursor: pointer; }
.hb-language-switch .hb-flag { width: 20px; height: 13px; display: block; border-radius: 1px; }
.hb-language-switch button[aria-pressed="true"] { background: #e3b84b; border-color: #ffe08c; box-shadow: 0 0 5px rgba(255,208,91,.35); }
.hb-language-switch button:hover { border-color: #d9b866; }
.hb-language-switch button:focus-visible { outline: 2px solid #fff3bf; outline-offset: 2px; }

/* Sidebar proportions from the supplied reference. */
.hb-reference .rb-box { padding: 25px 10px 13px; margin-top: 15px; }
.hb-reference .rb-box-head { height: 27px; line-height: 27px; font-size: 11px; letter-spacing: .8px; }
.hb-reference .DiscordContent, .hb-reference .WikiContent { padding: 3px 2px; }
.hb-reference .DiscordIconWrap, .hb-reference .WikiIconWrap,
.hb-reference .DiscordIconBg, .hb-reference .WikiIconBg { width: 40px; height: 40px; }
.hb-reference .DiscordIconWrap, .hb-reference .WikiIconWrap { margin-bottom: 7px; }
.hb-reference .DiscordIconBg svg, .hb-reference .WikiIconBg svg { width: 24px; height: 24px; }
.hb-reference .DiscordText, .hb-reference .WikiText { margin: 0 0 9px; font: 400 10px/1.4 Verdana,Arial,sans-serif; }
.hb-reference .rb-box a.rb-btn { height: 30px; line-height: 28px; padding: 0 5px; margin: 0; border-radius: 0; box-sizing: border-box; font: 600 10px/28px Verdana,Arial,sans-serif; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-reference .rb-box a.rb-btn-discord { background: linear-gradient(#536bdd,#3749b3); }
.hb-reference .rb-box a.rb-btn-gold { background: linear-gradient(#e4c36a,#b88725); }
.hb-reference .BoostedFrame { width: 46px; height: 46px; border: 1px solid #556674; background: #c4baa4; border-radius: 2px; box-shadow: none; }
.hb-reference .BoostedFrame img { max-width: 44px; max-height: 44px; }
.hb-reference .BoostedBadge { width: 14px; height: 14px; top: -7px; font-size: 8px; line-height: 12px; background: #546b7c; border-color: #b7c0c5; }
.hb-reference .rb-box .BoostedCards { padding-top: 4px; gap: 9px; }
.hb-reference .rb-box .BoostedLabel { font: 400 8px/1.3 Verdana,Arial,sans-serif; letter-spacing: .3px; margin-top: 6px; color: #264052; }
.hb-reference .rb-box .BoostedName { font: 400 9px/1.4 Verdana,Arial,sans-serif; }
.hb-reference .BoostedDivider { height: 57px; background: rgba(139,108,48,.3); }
.hb-reference .WikiIconBg { background: linear-gradient(#c6a04a,#a57c2b); }
.hb-shop-scene { height: 84px; display: flex; align-items: flex-end; justify-content: center; padding: 9px 2px; margin-bottom: 7px; border: 1px solid #ad8328; background: linear-gradient(0deg,rgba(8,15,20,.85),rgba(8,15,20,.08)),url('/templates/highbinot/images/header/background-battlepass-2026.webp') 57% 70% / 560px auto; overflow: hidden; }
.hb-shop-scene span { color: #f5cf65; font: italic 700 15px/1.15 Georgia,serif; text-shadow: 1px 2px 2px #000; white-space: nowrap; }
.hb-reference #WebshopBox > .rb-box-head { background: linear-gradient(#9b5d16,#b77d1c); border: 1px solid #d6a340; text-shadow: 0 1px #4d2b07; }
.hb-reference #WebshopBox > .rb-box-head::after { display: none; }
.hb-reference #WebshopBox .rb-btn-gold { background: linear-gradient(#ffb523,#e38603); border-color: #c27b0d; color: #fff8e4; text-shadow: 0 1px #9b5c00; }
.hb-reference .DiscordGlow, .hb-reference .WikiGlow { width: 45px; height: 45px; top: 5px; filter: blur(12px); }

/* Preserve functional MyAAC records/forms and give every inner page the same frame system. */
.hb-reference .rb-content-mid { color: #3d2314; font: 12px/1.5 Verdana,Arial,sans-serif; }
.hb-reference .rb-content-mid .TableContainer,
.hb-reference .rb-content-mid .SmallBox { border-color: #b39551; }
.hb-reference .rb-content-mid .CaptionContainer,
.hb-reference .rb-content-mid .CaptionInnerContainer { background: #28445f !important; border-color: #a58030; }
.hb-reference .rb-content-mid .CaptionContainer .Text { color: #f4e7bf; font: 700 11px/1.6 Verdana,Arial,sans-serif; }
.hb-reference .rb-content-mid .TableContentContainer { border-color: #b7a277; box-shadow: none; }
.hb-reference .rb-content-mid .TableContent,
.hb-reference .rb-content-mid table.myaac-table { border-collapse: collapse; width: 100%; background: #e3d3aa; }
.hb-reference .rb-content-mid .TableContent td,
.hb-reference .rb-content-mid .myaac-table td { font: 11px/1.55 Verdana,Arial,sans-serif; padding: 7px 9px; color: #3d2314; }
.hb-reference .rb-content-mid .Odd,
.hb-reference .rb-content-mid .myaac-table > tbody > tr:nth-child(odd) { background: #e5d6af; }
.hb-reference .rb-content-mid .Even,
.hb-reference .rb-content-mid .myaac-table > tbody > tr:nth-child(even) { background: #d7c7a3; }
.hb-reference .rb-content-mid .myaac-table > thead > tr > :is(th,td) { color: #f3e7c8 !important; background: #29465e !important; }
.hb-reference .rb-content-mid input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.hb-reference .rb-content-mid select,
.hb-reference .rb-content-mid textarea {
  max-width: 100%; box-sizing: border-box; border: 1px solid #9e885e; border-radius: 2px;
  background: #f4eacb; color: #3d2314; padding: 5px 7px; font: 12px Verdana,Arial,sans-serif;
}
.hb-reference .rb-content-mid :is(input,select,textarea):focus-visible { outline: 2px solid #426b86; outline-offset: 1px; }
.hb-reference .rb-content-mid .TableContainer { max-width: 100%; }
.hb-reference .rb-content-mid :is(h2,h3) { color: #3d2314; }
.hb-reference .rb-content-mid .hb-interior .hb-section-title { color: #f3e6c5; }
.hb-reference .hb-interior a.hb-button { color: #36280e; }
.hb-reference .hb-interior a.hb-button-green { color: #f7f4df; }
.hb-reference .hb-interior a.hb-button-blue { color: #fff4d9; }
.hb-login-fields { display: grid; grid-template-columns: minmax(105px,160px) minmax(0,1fr); align-items: center; gap: 12px 15px; max-width: 520px; margin-top: 18px; }
.hb-login-fields label { font-weight: 600; font-size: 11px; }
.hb-login-fields input { width: 100%; }
.hb-remember { display: flex; align-items: center; gap: 5px; margin: 14px 0; font-size: 11px; }

/* Calendar and its legend are independent framed sections, as in the reference. */
body[data-hb-page="event-schedule"] #News > .rb-page-head { display: none; }
body[data-hb-page="event-schedule"] #News > .rb-panel-body { border: 0; background: none; box-shadow: none; margin: 0; border-radius: 0; flex: 0 0 auto; }
body[data-hb-page="event-schedule"] #News > .rb-panel-body::before { display: none; }
body[data-hb-page="event-schedule"] #News .rb-content-mid { padding: 0; flex: 0 0 auto; }
body[data-hb-page="event-schedule"] #News.rb-content { flex: 0 0 auto; margin-top: 0; }
body[data-hb-page="event-schedule"] .hb-calendar .hb-calendar__toolbar,
body[data-hb-page="event-schedule"] .hb-calendar .hb-calendar__legend-title {
  background: url('/templates/highbinot/images/ui/page/header-editable.png') center / 100% 100% no-repeat;
  border: 0; border-radius: 0; box-shadow: none; min-height: 34px; padding: 3px 17px;
}
body[data-hb-page="event-schedule"] .hb-calendar { --hb-cal-paper: #e9dab0; --hb-cal-cell: #cbbd9e; --hb-cal-cell-muted: #c2b394; }
body[data-hb-page="event-schedule"] .hb-calendar .hb-calendar__surface { padding: 12px 17px 16px; }
body[data-hb-page="event-schedule"] .hb-calendar .hb-calendar__grid td { height: 72px; }
body[data-hb-page="event-schedule"] .hb-calendar .hb-calendar__grid td,
body[data-hb-page="event-schedule"] .hb-calendar .hb-calendar__grid th { font-family: Verdana,Arial,sans-serif; font-size: 10px; }
body[data-hb-page="event-schedule"] .hb-calendar a.hb-calendar__event { color: #fff6db; text-decoration: none; }
body[data-hb-page="event-schedule"] .hb-calendar a.hb-calendar__arrow { color: #edc46f; text-decoration: none; }
@media (max-width: 1050px) {
  .hb-reference #Bodycontainer { max-width: 100%; }
  .hb-reference #MenuColumn { flex-basis: 168px; width: 168px; margin: 0 8px; }
  .hb-reference #ThemeboxesColumn { flex: 1 1 100%; width: auto; margin: 0 8px 16px; }
  .hb-reference #TopbarInner { gap: 8px; padding: 0 18px; }
}
@media (max-width: 640px) {
  .hb-reference #MenuColumn { flex: 1 1 100%; width: 100%; margin: 0; }
  .hb-reference #MenuColumn > a.hb-sidebar-download { display: none; }
  .hb-reference #MenuColumn.hb-nav-open > a.hb-sidebar-download { display: flex; }
  .hb-reference #ThemeboxesColumn { width: 100%; margin: 8px 0 16px; }
  .hb-reference #Topbar { height: 68px; }
  .hb-reference #TopbarInner { height: 68px; gap: 6px 12px; padding: 7px 12px; flex-wrap: wrap; align-content: center; }
  .hb-reference .Content #TopbarInner .TopbarLink { font-size: 10px; gap: 4px; }
  .hb-reference #TopbarInner .hb-icon { width: 13px; height: 13px; }
  .hb-reference .TopbarSep { display: none; }
  .hb-reference .hb-language-switch { flex: 1 1 100%; justify-content: center; gap: 8px; }
  .hb-reference #MenuColumn .rb-panel { margin-bottom: 0; }
  body[data-hb-page="event-schedule"] .hb-calendar .hb-calendar__surface { padding-left: 5px; padding-right: 5px; }
  body[data-hb-page="event-schedule"] .hb-calendar .hb-calendar__clock { display: none; }
}